cmat 0.0.78 → 0.0.79

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-breadcrumb.mjs","sources":["../../../projects/cmat/components/breadcrumb/breadcrumb-item.directive.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.service.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.component.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.component.html","../../../projects/cmat/components/breadcrumb/cmat-components-breadcrumb.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n/**\r\n * This directive is used to customize the breadcrumb label behavior\r\n * *cmatBreadcrumbItem directive can be used in the child element of cmat-breadcrumb\r\n * Usage: refer to the demo - app.component.html\r\n */\r\n@Directive({\r\n    selector: '[cmatBreadcrumbItem]'\r\n})\r\nexport class CmatBreadcrumbItemDirective {\r\n}\r\n","import { Injectable, OnDestroy, inject } from '@angular/core';\r\nimport { ActivatedRoute, ActivatedRouteSnapshot, GuardsCheckEnd, Route, Router } from '@angular/router';\r\nimport { isNull } from 'lodash-es';\r\nimport { Observable, BehaviorSubject, Subject } from 'rxjs';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\nimport { CmatBreadcrumb } from './types/breadcrumb';\r\nimport { CmatBreadcrumbFunction, CmatBreadcrumbObject, } from './types/breadcrumb.config';\r\n\r\ntype CmatBreadcrumbConfig = CmatBreadcrumbObject | CmatBreadcrumbFunction | string;\r\ntype StoreMatcherKey = 'routeLink' | 'routeRegex' | 'alias';\r\nexport type CmatBreadcrumbDefinition = CmatBreadcrumb & CmatBreadcrumbObject;\r\n\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nconst PATH_PARAM = {\r\n    PREFIX: ':',\r\n    REGEX_IDENTIFIER: '/:[^/]+',\r\n    REGEX_REPLACER: '/[^/]+',\r\n};\r\n\r\n\r\nconst ALIAS_PREFIX = '@';\r\nconst isNonEmpty = (obj: any): boolean => obj && Object.keys(obj).length > 0;\r\n\r\n@Injectable({\r\n    providedIn: 'root',\r\n})\r\nexport class CmatBreadcrumbService implements OnDestroy {\r\n    private _activatedRoute = inject(ActivatedRoute);\r\n    private _router = inject(Router);\r\n\r\n    private _baseHref = '/';\r\n\r\n    private _unsubscribeAll: Subject<void> = new Subject<void>();\r\n    /**\r\n     * dynamicBreadcrumbStore holds information about dynamically updated breadcrumbs.\r\n     * Breadcrumbs can be set from anywhere (component, service) in the app.\r\n     * On every breadcrumb update check this store and use the info if available.\r\n     */\r\n    private _dynamicBreadcrumbStore: CmatBreadcrumbDefinition[] = [];\r\n\r\n    /**\r\n     * breadcrumbList for the current route\r\n     * When breadcrumb info is changed dynamically, check if the currentBreadcrumbs is effected\r\n     * If effected, update the change and emit a new stream\r\n     */\r\n    private _currentBreadcrumbs: CmatBreadcrumbDefinition[] = [];\r\n    private _previousBreadcrumbs: CmatBreadcrumbDefinition[] = [];\r\n\r\n    /**\r\n     * Breadcrumbs observable to be subscribed by BreadcrumbComponent\r\n     * Emits on every route change OR dynamic update of breadcrumb\r\n     */\r\n    private _breadcrumbs = new BehaviorSubject<CmatBreadcrumbDefinition[]>([]);\r\n\r\n    \r\n\r\n    constructor() {\r\n        this._detectRouteChanges();\r\n    }\r\n\r\n    get breadcrumbs$(): Observable<CmatBreadcrumbDefinition[]> {\r\n        return this._breadcrumbs.asObservable();\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this._unsubscribeAll.next(void 0);\r\n        this._unsubscribeAll.complete();\r\n    }\r\n\r\n    /**\r\n     * Update breadcrumb dynamically\r\n     *\r\n     * key can be a path | alias\r\n     *\r\n     * 1) Using complete route path. route can be passed the same way you define angular routes\r\n     * - path can be passed as 'exact path(routeLink)' or 'path with params(routeRegex)'\r\n     * - update label Ex: set('/mentor', 'Mentor'), set('/mentor/:id', 'Mentor Details')\r\n     * - change visibility Ex: set('/mentor/:id/edit', { skip: true })\r\n     * ------------------------------------------ OR ------------------------------------------\r\n     * 2) Using route alias (prefixed with '@'). alias should be unique for a route\r\n     * - update label Ex: set('@mentor', 'Enabler')\r\n     * - change visibility Ex: set('@mentorEdit', { skip: true })\r\n     *\r\n     *\r\n     * value can be string | BreadcrumbObject | BreadcrumbFunction\r\n     */\r\n    set(key: string, breadcrumb: string | CmatBreadcrumbObject): void {\r\n        const breadcrumbObject = this._extractObject(breadcrumb);\r\n        let updateArgs: [StoreMatcherKey, CmatBreadcrumbDefinition];\r\n\r\n        if (key.startsWith(ALIAS_PREFIX)) {\r\n            updateArgs = ['alias', { ...breadcrumbObject, alias: key.slice(1) }];\r\n        } else if (key.includes(PATH_PARAM.PREFIX)) {\r\n            updateArgs = [\r\n                'routeRegex',\r\n                { ...breadcrumbObject, routeRegex: this._buildRegex(key) },\r\n            ];\r\n        } else {\r\n            updateArgs = [\r\n                'routeLink',\r\n                { ...breadcrumbObject, routeLink: this._ensureLeadingSlash(key) },\r\n            ];\r\n        }\r\n\r\n        // For this route if previously a breadcrumb is not defined that sets isAutoGeneratedLabel: true\r\n        // change it to false since this is user supplied value\r\n        updateArgs[1].isAutoGeneratedLabel = false;\r\n\r\n        this._updateStore(...updateArgs);\r\n        this._updateCurrentBreadcrumbs(...updateArgs);\r\n    }\r\n\r\n\r\n\r\n    /**\r\n     * Whenever route changes build breadcrumb list again\r\n     */\r\n    private _detectRouteChanges(): void {\r\n        // Special case where breadcrumb service & component instantiates after a route is navigated.\r\n        // Ex: put breadcrumbs within *ngIf and this.router.events would be empty\r\n        // This check is also required where  { initialNavigation: 'enabledBlocking' } is applied to routes\r\n        this._setupBreadcrumbs(this._activatedRoute.snapshot);\r\n\r\n        this._router.events\r\n            .pipe(\r\n                takeUntil(this._unsubscribeAll),\r\n                filter((event): event is GuardsCheckEnd => event instanceof GuardsCheckEnd))\r\n            .subscribe((event) => {\r\n                // activatedRoute doesn't carry data when shouldReuseRoute returns false\r\n                // use the event data with GuardsCheckEnd as workaround\r\n                // Check for shouldActivate in case where the authGuard returns false the breadcrumbs shouldn't be changed\r\n                if (event.shouldActivate) {\r\n                    this._setupBreadcrumbs(event.state.root);\r\n                }\r\n            });\r\n    }\r\n\r\n    private _setupBreadcrumbs(activatedRouteSnapshot: ActivatedRouteSnapshot): void {\r\n        this._previousBreadcrumbs = this._currentBreadcrumbs;\r\n        // breadcrumb label for base OR root path. Usually, this can be set as 'Home'\r\n        const rootBreadcrumb = this._getRootBreadcrumb();\r\n        this._currentBreadcrumbs = rootBreadcrumb ? [rootBreadcrumb] : [];\r\n        this._prepareBreadcrumbList(activatedRouteSnapshot, this._baseHref);\r\n    }\r\n\r\n    private _getRootBreadcrumb(): CmatBreadcrumb | void {\r\n        const rootConfig = this._router.config.find(config => config.path === '');\r\n        const rootBreadcrumb = this._extractObject(rootConfig?.data?.['breadcrumb']);\r\n        const storeItem = this._getFromStore('/', rootBreadcrumb.alias);\r\n\r\n        if (isNonEmpty(rootBreadcrumb) || isNonEmpty(storeItem)) {\r\n            return {\r\n                ...storeItem,\r\n                ...rootBreadcrumb,\r\n                routeLink: this._baseHref,\r\n                ...this._getQueryParamsFromPreviousList('/'),\r\n            };\r\n        }\r\n    }\r\n\r\n    private _prepareBreadcrumbItem(\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot,\r\n        routeLinkPrefix: string\r\n    ): CmatBreadcrumbDefinition {\r\n        const { path, breadcrumb } = this._parseRouteData(\r\n            activatedRouteSnapshot.routeConfig\r\n        );\r\n\r\n        const resolvedSegment = this._resolvePathSegment(path, activatedRouteSnapshot);\r\n        const routeLink = `${routeLinkPrefix}${resolvedSegment}`;\r\n        const storeItem = this._getFromStore(routeLink, breadcrumb.alias);\r\n\r\n        const label = this._extractLabel(\r\n            storeItem?.label ?? breadcrumb?.label,\r\n            resolvedSegment\r\n        );\r\n        let isAutoGeneratedLabel = false;\r\n        let autoGeneratedLabel = '';\r\n        if (!label) {\r\n            isAutoGeneratedLabel = true;\r\n            autoGeneratedLabel = resolvedSegment;\r\n        }\r\n\r\n        return {\r\n            ...storeItem,\r\n            ...breadcrumb,\r\n            label: isAutoGeneratedLabel ? autoGeneratedLabel : label,\r\n            routeLink,\r\n            isAutoGeneratedLabel,\r\n            ...this._getQueryParamsFromPreviousList(routeLink),\r\n        };\r\n    }\r\n\r\n    private _prepareBreadcrumbList(\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot,\r\n        routeLinkPrefix: string\r\n    ): CmatBreadcrumb[] | void {\r\n        if (activatedRouteSnapshot.routeConfig?.path) {\r\n            const breadcrumbItem = this._prepareBreadcrumbItem(\r\n                activatedRouteSnapshot,\r\n                routeLinkPrefix\r\n            );\r\n            this._currentBreadcrumbs.push(breadcrumbItem);\r\n\r\n            if (activatedRouteSnapshot.firstChild) {\r\n                return this._prepareBreadcrumbList(\r\n                    activatedRouteSnapshot.firstChild,\r\n                    breadcrumbItem.routeLink + '/'\r\n                );\r\n            }\r\n        } else if (activatedRouteSnapshot.firstChild) {\r\n            return this._prepareBreadcrumbList(\r\n                activatedRouteSnapshot.firstChild,\r\n                routeLinkPrefix\r\n            );\r\n        }\r\n        const lastCrumb = this._currentBreadcrumbs[\r\n            this._currentBreadcrumbs.length - 1\r\n        ];\r\n        this._setQueryParamsForActiveBreadcrumb(lastCrumb, activatedRouteSnapshot);\r\n\r\n        // remove breadcrumb items that needs to be hidden\r\n        const breadcrumbsToShow = this._currentBreadcrumbs.filter(\r\n            item => !item.skip\r\n        );\r\n        this._breadcrumbs.next(breadcrumbsToShow);\r\n\r\n        return void 0;\r\n    }\r\n\r\n    private _getFromStore(routeLink: string, alias?: string): CmatBreadcrumbDefinition | void {\r\n        return this._dynamicBreadcrumbStore.find(item => (\r\n            ((alias && alias === item.alias) ?? false) || (routeLink && routeLink === item.routeLink) || this._matchRegex(routeLink, item.routeRegex)\r\n        ));\r\n    }\r\n\r\n    /**\r\n     * use exact match instead of regexp.test\r\n     * for /mentor/[^/]+ we should match '/mentor/12' but not '/mentor/12/abc'\r\n     */\r\n    private _matchRegex(routeLink?: string, routeRegex?: string): boolean | null {\r\n        if (routeRegex && routeLink) {\r\n            const match = new RegExp(routeRegex).exec(routeLink);\r\n            return match?.[0] === routeLink;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * if the path segment has route params, read the param value from url\r\n     * for each segment of route this gets called\r\n     *\r\n     * for mentor/:id/view - it gets called with mentor, :id, view 3 times\r\n     */\r\n    private _resolvePathSegment(segment: string, activatedRouteSnapshot: ActivatedRouteSnapshot): string {\r\n        //quirk -segment can be defined as view/:id in route config in which case you need to make it view/<resolved-param>\r\n        if (segment.includes(PATH_PARAM.PREFIX)) {\r\n            Object.entries(activatedRouteSnapshot.params).forEach(([key, value]) => {\r\n                segment = segment.replace(`:${key}`, `${value}`);\r\n            });\r\n        }\r\n        return segment;\r\n    }\r\n\r\n    /**\r\n     * queryParams & fragments for previous breadcrumb path are copied over to new list\r\n     */\r\n    private _getQueryParamsFromPreviousList(routeLink: string): CmatBreadcrumb {\r\n        const { queryParams, fragment } =\r\n            this._previousBreadcrumbs.find(item => item.routeLink === routeLink) ??\r\n            {};\r\n        return { queryParams, fragment };\r\n    }\r\n\r\n    /**\r\n     * set current activated route query params to the last breadcrumb item\r\n     */\r\n    private _setQueryParamsForActiveBreadcrumb(\r\n        lastItem: CmatBreadcrumb,\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot\r\n    ): void {\r\n        if (lastItem) {\r\n            const { queryParams, fragment } = activatedRouteSnapshot;\r\n            lastItem.queryParams = queryParams ? { ...queryParams } : undefined;\r\n            lastItem.fragment = fragment ?? void 0;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * For a specific route, breadcrumb can be defined either on parent OR it's child(which has empty path)\r\n     * When both are defined, child takes precedence\r\n     *\r\n     * Ex: Below we are setting breadcrumb on both parent and child.\r\n     * So, child takes precedence and \"Defined On Child\" is displayed for the route 'home'\r\n     * { path: 'home', loadChildren: './home/home.module#HomeModule' , data: {breadcrumb: \"Defined On Module\"}}\r\n     *                                                AND\r\n     * children: [\r\n     *   { path: '', component: ShowUserComponent, data: {breadcrumb: \"Defined On Child\" }\r\n     * ]\r\n     */\r\n    private _parseRouteData(routeConfig: Route | null): any {\r\n        if (isNull(routeConfig))\r\n            return void 0;\r\n\r\n        const { path, data } = routeConfig;\r\n        const breadcrumb = this._mergeWithBaseChildData(\r\n            routeConfig,\r\n            data?.['breadcrumb']\r\n        );\r\n\r\n        return { path, breadcrumb };\r\n    }\r\n\r\n    /**\r\n     * get empty children of a module or Component. Empty child is the one with path: ''\r\n     * When parent and it's children (that has empty route path) define data merge them both with child taking precedence\r\n     */\r\n    private _mergeWithBaseChildData(\r\n        routeConfig: any,\r\n        config: CmatBreadcrumbConfig\r\n    ): CmatBreadcrumbObject {\r\n        if (!routeConfig) {\r\n            return this._extractObject(config);\r\n        }\r\n\r\n        let baseChild: Route | void = void 0;\r\n        if (routeConfig.loadChildren) {\r\n            // To handle a module with empty child route\r\n            baseChild = routeConfig._loadedRoutes.find((route: { path: string; }) => route.path === '');\r\n        } else if (routeConfig.children) {\r\n            // To handle a component with empty child route\r\n            baseChild = routeConfig.children.find((route: { path: string; }) => route.path === '');\r\n        }\r\n\r\n        const childConfig = baseChild?.data?.['breadcrumb'];\r\n        return childConfig\r\n            ? this._mergeWithBaseChildData(baseChild, {\r\n                ...this._extractObject(config),\r\n                ...this._extractObject(childConfig),\r\n            })\r\n            : this._extractObject(config);\r\n    }\r\n\r\n    /**\r\n     * Update the store to reuse for dynamic declarations\r\n     * If the store already has this route definition update it, else add\r\n     */\r\n    private _updateStore(key: string, breadcrumb: CmatBreadcrumbDefinition): void {\r\n        const storeItemIndex = this._dynamicBreadcrumbStore.findIndex(item => (breadcrumb as any)[key] === (item as any)[key]);\r\n        if (storeItemIndex > -1) {\r\n            this._dynamicBreadcrumbStore[storeItemIndex] = {\r\n                ...this._dynamicBreadcrumbStore[storeItemIndex],\r\n                ...breadcrumb,\r\n            };\r\n        } else {\r\n            this._dynamicBreadcrumbStore.push({ ...breadcrumb });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * If breadcrumb is present in current breadcrumbs update it and emit new stream\r\n     */\r\n    private _updateCurrentBreadcrumbs(\r\n        key: string,\r\n        breadcrumb: CmatBreadcrumbDefinition\r\n    ): void {\r\n        const itemIndex = this._currentBreadcrumbs.findIndex(item => key === 'routeRegex'\r\n            ? this._matchRegex(item.routeLink, breadcrumb[key])\r\n            : (breadcrumb as any)[key] === (item as any)[key]);\r\n        if (itemIndex > -1) {\r\n            this._currentBreadcrumbs[itemIndex] = {\r\n                ...this._currentBreadcrumbs[itemIndex],\r\n                ...breadcrumb,\r\n            };\r\n            const breadcrumbsToShow = this._currentBreadcrumbs.filter(\r\n                item => !item.skip\r\n            );\r\n            this._breadcrumbs.next([...breadcrumbsToShow]);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * For a route with path param, we create regex dynamically from angular route syntax\r\n     * '/mentor/:id' becomes '/mentor/[^/]',\r\n     * breadcrumbService.set('/mentor/:id', 'Uday') should update 'Uday' as label for '/mentor/2' OR 'mentor/ada'\r\n     */\r\n    private _buildRegex(path: string): string {\r\n        return this._ensureLeadingSlash(path).replace(\r\n            new RegExp(PATH_PARAM.REGEX_IDENTIFIER, 'g'),\r\n            PATH_PARAM.REGEX_REPLACER\r\n        );\r\n    }\r\n\r\n    private _ensureLeadingSlash(path: string): string {\r\n        return path.startsWith('/') ? path : `/${path}`;\r\n    }\r\n\r\n    /**\r\n     * In App's RouteConfig, breadcrumb can be defined as a string OR a function OR an object\r\n     *\r\n     * string: simple static breadcrumb label for a path\r\n     * function: callback that gets invoked with resolved path param\r\n     * object: additional data defined along with breadcrumb label that gets passed to *cmatBreadcrumbItem directive\r\n     */\r\n    private _extractLabel(config: CmatBreadcrumbConfig, resolvedParam?: string): string | void {\r\n        const label = typeof config === 'object' ? config.label : config;\r\n        if (typeof label === 'function') {\r\n            return label(resolvedParam);\r\n        }\r\n        return label;\r\n    }\r\n\r\n    private _extractObject(config: CmatBreadcrumbConfig): CmatBreadcrumbObject {\r\n        // don't include {label} if config is undefined. This is important since we merge the configs\r\n        if (\r\n            config &&\r\n            (typeof config === 'string' || typeof config === 'function')\r\n        ) {\r\n            return { label: config };\r\n        }\r\n        return (config as CmatBreadcrumbObject) || {};\r\n    }\r\n}\r\n","import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, ContentChild, Input, OnInit, TemplateRef, ViewEncapsulation, inject } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\nimport { map } from 'rxjs/operators';\r\nimport { CmatBreadcrumbItemDirective } from './breadcrumb-item.directive';\r\nimport { CmatBreadcrumbDefinition, CmatBreadcrumbService } from './breadcrumb.service';\r\n\r\n@Component({\r\n    selector: 'cmat-breadcrumb',\r\n    templateUrl: './breadcrumb.component.html',\r\n    styleUrls: ['./breadcrumb.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatBreadcrumb',\r\n    imports: [NgClass, AsyncPipe, RouterLink, NgTemplateOutlet]\r\n})\r\nexport class CmatBreadcrumbComponent implements OnInit {   \r\n    /**\r\n     * 面包屑项目可以使用此模板进行自定义\r\n     * 模板上下文提供标签、附加信息、第一个和最后一个索引\r\n     * 用例:\r\n     * 1) 添加图标和标签\r\n     * 2) i18n. {{breadcrumb | translate}}\r\n     * 3) 更改文本大小写 {{breadcrumb | titlecase}}\r\n     */\r\n    @ContentChild(CmatBreadcrumbItemDirective, { static: false, read: TemplateRef })\r\n    itemTemplate: any;\r\n\r\n    /**\r\n     * 如果为true，即使没有任何映射标签，面包屑也会自动生成\r\n     * 默认标签与路由segment相同\r\n     */\r\n    @Input() autoGenerate = true;\r\n\r\n    /**\r\n     * 默认情况下，查询参数将与breadcrumbs一起保留\r\n     */\r\n    @Input() preserveQueryParams = true;\r\n\r\n    /**\r\n     * 默认情况下，fragments参数将与breadcrumbs一起保留\r\n     */\r\n    @Input() preserveFragment = true;\r\n\r\n    /**\r\n     * 可提供覆盖样式，增加特异性\r\n     */\r\n    @Input() class = '';\r\n\r\n    /**\r\n     * anchorTarget = \"_blank\" 使breadcrumb链接在新选项卡中打开\r\n     */\r\n    @Input() anchorTarget: '_blank' | void;\r\n\r\n    breadcrumbs$: Observable<CmatBreadcrumbDefinition[]>;\r\n    separatorTemplate: TemplateRef<any> | null;\r\n\r\n    private _separator: string | void = '/';\r\n    private _breadcrumbService = inject(CmatBreadcrumbService);\r\n\r\n    get separator(): string | void {\r\n        return this._separator;\r\n    }\r\n    /**\r\n     * 面包屑分隔符, 默认'/'.\r\n     * 用户可以通过传递字符串或模板来自定义分隔符\r\n     *\r\n     * 字符串 --> Ex: <cmat-breadcrumb separator=\"-\"></cmat-breadcrumb>\r\n     *\r\n     * 模板 --> Ex: <cmat-breadcrumb [separator]=\"separatorTemplate\"></cmat-breadcrumb>\r\n     * <ng-template #separatorTemplate><mat-icon>arrow_right</mat-icon></ng-template>\r\n     */\r\n    @Input()\r\n    set separator(value: string | TemplateRef<void>) {\r\n        if (value instanceof TemplateRef) {\r\n            this.separatorTemplate = value;\r\n            this._separator = undefined;\r\n        } else {\r\n            this.separatorTemplate = null;\r\n            this._separator = value || '/';\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this.breadcrumbs$ = this._breadcrumbService.breadcrumbs$.pipe(\r\n            map((breadcrumbs: CmatBreadcrumbDefinition[]) => breadcrumbs\r\n                .filter((breadcrumb: CmatBreadcrumbDefinition) => {\r\n                    // Usually, breadcrumb list can contain a combination of auto generated and user specified labels\r\n                    // this filters autogenerated labels in case of \"[autoGenerate]: false\"\r\n                    if (this.autoGenerate) {\r\n                        return true;\r\n                    }\r\n                    return !breadcrumb.isAutoGeneratedLabel;\r\n                })\r\n                .map((breadcrumb: CmatBreadcrumbDefinition) => {\r\n                    // Do not mutate breadcrumb as its source of truth.\r\n                    // There can be scenarios where we can have multiple cmat-breadcrumb instances in page\r\n                    const { routeInterceptor, routeLink } = breadcrumb;\r\n                    return {\r\n                        ...breadcrumb,\r\n                        routeLink: routeInterceptor?.(breadcrumb, routeLink) ?? routeLink,\r\n                    };\r\n                }))\r\n        );\r\n    }\r\n}\r\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cmat-components-breadcrumb.mjs","sources":["../../../projects/cmat/components/breadcrumb/breadcrumb-item.directive.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.service.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.component.ts","../../../projects/cmat/components/breadcrumb/breadcrumb.component.html","../../../projects/cmat/components/breadcrumb/cmat-components-breadcrumb.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n\r\n@Directive({\r\n    selector: '[cmatBreadcrumbItem]'\r\n})\r\nexport class CmatBreadcrumbItemDirective {\r\n}\r\n","import { DestroyRef, Injectable, inject, signal } from '@angular/core';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { ActivatedRoute, ActivatedRouteSnapshot, GuardsCheckEnd, Route, Router } from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\nimport { filter } from 'rxjs/operators';\r\nimport { CmatBreadcrumb } from './types/breadcrumb';\r\nimport { CmatBreadcrumbFunction, CmatBreadcrumbObject } from './types/breadcrumb.config';\r\n\r\ntype CmatBreadcrumbConfig = CmatBreadcrumbObject | CmatBreadcrumbFunction | string;\r\ntype StoreMatcherKey = 'routeLink' | 'routeRegex' | 'alias';\r\nexport type CmatBreadcrumbDefinition = CmatBreadcrumb & CmatBreadcrumbObject;\r\n\r\ninterface CmatBreadcrumbRouteConfig {\r\n    path?: string | null;\r\n    loadChildren?: unknown;\r\n    _loadedRoutes?: Route[];\r\n    data?: {\r\n        breadcrumb?: CmatBreadcrumbConfig;\r\n    };\r\n    children?: Route[];\r\n}\r\n\r\ninterface CmatBreadcrumbRouteData {\r\n    path?: string;\r\n    breadcrumb: CmatBreadcrumbObject;\r\n}\r\n\r\ninterface CmatBreadcrumbStore {\r\n    alias: Map<string, CmatBreadcrumbDefinition>;\r\n    routeLink: Map<string, CmatBreadcrumbDefinition>;\r\n    routeRegex: Map<string, CmatBreadcrumbDefinition>;\r\n}\r\n\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nconst PATH_PARAM = {\r\n    PREFIX: ':',\r\n    REGEX_IDENTIFIER: '/:[^/]+',\r\n    REGEX_REPLACER: '/[^/]+',\r\n};\r\n\r\n\r\nconst ALIAS_PREFIX = '@';\r\nconst isNonEmpty = (obj: object | undefined): boolean => !!obj && Object.keys(obj).length > 0;\r\n\r\n@Injectable({\r\n    providedIn: 'root',\r\n})\r\nexport class CmatBreadcrumbService {\r\n    private _activatedRoute = inject(ActivatedRoute);\r\n    private _router = inject(Router);\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n    private _baseHref = '/';\r\n\r\n    \r\n    private readonly _dynamicBreadcrumbStore: CmatBreadcrumbStore = {\r\n        alias: new Map<string, CmatBreadcrumbDefinition>(),\r\n        routeLink: new Map<string, CmatBreadcrumbDefinition>(),\r\n        routeRegex: new Map<string, CmatBreadcrumbDefinition>(),\r\n    };\r\n\r\n    \r\n    private _currentBreadcrumbs: CmatBreadcrumbDefinition[] = [];\r\n    private _previousBreadcrumbs: CmatBreadcrumbDefinition[] = [];\r\n\r\n    \r\n    private _breadcrumbs = signal<CmatBreadcrumbDefinition[]>([]);\r\n    private readonly _breadcrumbs$ = toObservable(this._breadcrumbs);\r\n\r\n    \r\n\r\n    constructor() {\r\n        this._detectRouteChanges();\r\n    }\r\n\r\n    get breadcrumbs$(): Observable<CmatBreadcrumbDefinition[]> {\r\n        return this._breadcrumbs$;\r\n    }\r\n\r\n    \r\n    set(key: string, breadcrumb: string | CmatBreadcrumbObject): void {\r\n        const breadcrumbObject = this._extractObject(breadcrumb);\r\n        let updateArgs: [StoreMatcherKey, CmatBreadcrumbDefinition];\r\n\r\n        if (key.startsWith(ALIAS_PREFIX)) {\r\n            updateArgs = ['alias', { ...breadcrumbObject, alias: key.slice(1) }];\r\n        } else if (key.includes(PATH_PARAM.PREFIX)) {\r\n            updateArgs = [\r\n                'routeRegex',\r\n                { ...breadcrumbObject, routeRegex: this._buildRegex(key) },\r\n            ];\r\n        } else {\r\n            updateArgs = [\r\n                'routeLink',\r\n                { ...breadcrumbObject, routeLink: this._ensureLeadingSlash(key) },\r\n            ];\r\n        }\r\n        updateArgs[1].isAutoGeneratedLabel = false;\r\n\r\n        this._updateStore(...updateArgs);\r\n        this._updateCurrentBreadcrumbs(...updateArgs);\r\n    }\r\n\r\n\r\n\r\n    \r\n    private _detectRouteChanges(): void {\r\n        this._setupBreadcrumbs(this._activatedRoute.snapshot);\r\n\r\n        this._router.events\r\n            .pipe(\r\n                takeUntilDestroyed(this._destroyRef),\r\n                filter((event): event is GuardsCheckEnd => event instanceof GuardsCheckEnd))\r\n            .subscribe((event) => {\r\n                if (event.shouldActivate) {\r\n                    this._setupBreadcrumbs(event.state.root);\r\n                }\r\n            });\r\n    }\r\n\r\n    private _setupBreadcrumbs(activatedRouteSnapshot: ActivatedRouteSnapshot): void {\r\n        this._previousBreadcrumbs = this._currentBreadcrumbs;\r\n        const rootBreadcrumb = this._getRootBreadcrumb();\r\n        this._currentBreadcrumbs = rootBreadcrumb ? [rootBreadcrumb] : [];\r\n        this._prepareBreadcrumbList(activatedRouteSnapshot, this._baseHref);\r\n    }\r\n\r\n    private _getRootBreadcrumb(): CmatBreadcrumb | void {\r\n        const rootConfig = this._router.config.find(config => config.path === '');\r\n        const rootBreadcrumb = this._extractObject(rootConfig?.data?.['breadcrumb']);\r\n        const storeItem = this._getFromStore('/', rootBreadcrumb.alias);\r\n\r\n        if (isNonEmpty(rootBreadcrumb) || isNonEmpty(storeItem as object | undefined)) {\r\n            return {\r\n                ...storeItem,\r\n                ...rootBreadcrumb,\r\n                routeLink: this._baseHref,\r\n                ...this._getQueryParamsFromPreviousList('/'),\r\n            };\r\n        }\r\n    }\r\n\r\n    private _prepareBreadcrumbItem(\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot,\r\n        routeLinkPrefix: string\r\n    ): CmatBreadcrumbDefinition {\r\n        const routeData = this._parseRouteData(\r\n            activatedRouteSnapshot.routeConfig\r\n        );\r\n\r\n        if (!routeData) {\r\n            return {\r\n                label: '',\r\n                routeLink: routeLinkPrefix,\r\n                isAutoGeneratedLabel: true,\r\n            };\r\n        }\r\n\r\n        const { path, breadcrumb } = routeData;\r\n\r\n        const resolvedSegment = this._resolvePathSegment(path ?? '', activatedRouteSnapshot);\r\n        const routeLink = `${routeLinkPrefix}${resolvedSegment}`;\r\n        const storeItem = this._getFromStore(routeLink, breadcrumb.alias);\r\n\r\n        const label = this._extractLabel(\r\n            storeItem?.label ?? breadcrumb?.label ?? '',\r\n            resolvedSegment\r\n        );\r\n        let isAutoGeneratedLabel = false;\r\n        let autoGeneratedLabel = '';\r\n        if (!label) {\r\n            isAutoGeneratedLabel = true;\r\n            autoGeneratedLabel = resolvedSegment;\r\n        }\r\n\r\n        return {\r\n            ...storeItem,\r\n            ...breadcrumb,\r\n                label: isAutoGeneratedLabel ? autoGeneratedLabel : (label ?? ''),\r\n            routeLink,\r\n            isAutoGeneratedLabel,\r\n            ...this._getQueryParamsFromPreviousList(routeLink),\r\n        };\r\n    }\r\n\r\n    private _prepareBreadcrumbList(\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot,\r\n        routeLinkPrefix: string\r\n    ): CmatBreadcrumb[] | void {\r\n        if (activatedRouteSnapshot.routeConfig?.path) {\r\n            const breadcrumbItem = this._prepareBreadcrumbItem(\r\n                activatedRouteSnapshot,\r\n                routeLinkPrefix\r\n            );\r\n            this._currentBreadcrumbs.push(breadcrumbItem);\r\n\r\n            if (activatedRouteSnapshot.firstChild) {\r\n                return this._prepareBreadcrumbList(\r\n                    activatedRouteSnapshot.firstChild,\r\n                    breadcrumbItem.routeLink + '/'\r\n                );\r\n            }\r\n        } else if (activatedRouteSnapshot.firstChild) {\r\n            return this._prepareBreadcrumbList(\r\n                activatedRouteSnapshot.firstChild,\r\n                routeLinkPrefix\r\n            );\r\n        }\r\n        const lastCrumb = this._currentBreadcrumbs[\r\n            this._currentBreadcrumbs.length - 1\r\n        ];\r\n        this._setQueryParamsForActiveBreadcrumb(lastCrumb, activatedRouteSnapshot);\r\n        const breadcrumbsToShow = this._currentBreadcrumbs.filter(\r\n            item => !item.skip\r\n        );\r\n        this._breadcrumbs.set([...breadcrumbsToShow]);\r\n\r\n        return void 0;\r\n    }\r\n\r\n    private _getFromStore(routeLink: string, alias?: string): CmatBreadcrumbDefinition | void {\r\n        if (alias) {\r\n            const aliasBreadcrumb = this._dynamicBreadcrumbStore.alias.get(alias);\r\n\r\n            if (aliasBreadcrumb) {\r\n                return aliasBreadcrumb;\r\n            }\r\n        }\r\n\r\n        const routeLinkBreadcrumb = this._dynamicBreadcrumbStore.routeLink.get(routeLink);\r\n\r\n        if (routeLinkBreadcrumb) {\r\n            return routeLinkBreadcrumb;\r\n        }\r\n\r\n        for (const breadcrumb of this._dynamicBreadcrumbStore.routeRegex.values()) {\r\n            if (this._matchRegex(routeLink, breadcrumb.routeRegex)) {\r\n                return breadcrumb;\r\n            }\r\n        }\r\n\r\n        return void 0;\r\n    }\r\n\r\n    \r\n    private _matchRegex(routeLink?: string, routeRegex?: string): boolean | null {\r\n        if (routeRegex && routeLink) {\r\n            const match = new RegExp(routeRegex).exec(routeLink);\r\n            return match?.[0] === routeLink;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    \r\n    private _resolvePathSegment(segment: string, activatedRouteSnapshot: ActivatedRouteSnapshot): string {\r\n        if (segment.includes(PATH_PARAM.PREFIX)) {\r\n            Object.entries(activatedRouteSnapshot.params).forEach(([key, value]) => {\r\n                segment = segment.replace(`:${key}`, `${value}`);\r\n            });\r\n        }\r\n        return segment;\r\n    }\r\n\r\n    \r\n    private _getQueryParamsFromPreviousList(routeLink: string): CmatBreadcrumb {\r\n        const { queryParams, fragment } =\r\n            this._previousBreadcrumbs.find(item => item.routeLink === routeLink) ??\r\n            {};\r\n        return { queryParams, fragment };\r\n    }\r\n\r\n    \r\n    private _setQueryParamsForActiveBreadcrumb(\r\n        lastItem: CmatBreadcrumb,\r\n        activatedRouteSnapshot: ActivatedRouteSnapshot\r\n    ): void {\r\n        if (lastItem) {\r\n            const { queryParams, fragment } = activatedRouteSnapshot;\r\n            lastItem.queryParams = queryParams ? { ...queryParams } : undefined;\r\n            lastItem.fragment = fragment ?? void 0;\r\n        }\r\n    }\r\n\r\n    \r\n    private _parseRouteData(routeConfig: Route | null): CmatBreadcrumbRouteData | void {\r\n        if (!routeConfig) {\r\n            return void 0;\r\n        }\r\n\r\n        const { path, data } = routeConfig;\r\n        const breadcrumb = this._mergeWithBaseChildData(\r\n            routeConfig as CmatBreadcrumbRouteConfig,\r\n            data?.['breadcrumb']\r\n        );\r\n\r\n        return { path, breadcrumb };\r\n    }\r\n\r\n    \r\n    private _mergeWithBaseChildData(\r\n        routeConfig: CmatBreadcrumbRouteConfig | null,\r\n        config: CmatBreadcrumbConfig\r\n    ): CmatBreadcrumbObject {\r\n        if (!routeConfig) {\r\n            return this._extractObject(config);\r\n        }\r\n\r\n        let baseChild: Route | void = void 0;\r\n        if (routeConfig.loadChildren) {\r\n            baseChild = routeConfig._loadedRoutes?.find(route => route.path === '');\r\n        } else if (routeConfig.children) {\r\n            baseChild = routeConfig.children.find(route => route.path === '');\r\n        }\r\n\r\n        const childConfig = baseChild?.data?.['breadcrumb'];\r\n        return childConfig\r\n            ? this._mergeWithBaseChildData(baseChild ?? null, {\r\n                ...this._extractObject(config),\r\n                ...this._extractObject(childConfig),\r\n            })\r\n            : this._extractObject(config);\r\n    }\r\n\r\n    \r\n    private _updateStore(key: StoreMatcherKey, breadcrumb: CmatBreadcrumbDefinition): void {\r\n        if (key === 'alias' && breadcrumb.alias) {\r\n            this._dynamicBreadcrumbStore.alias.set(breadcrumb.alias, { ...this._dynamicBreadcrumbStore.alias.get(breadcrumb.alias), ...breadcrumb });\r\n            return;\r\n        }\r\n\r\n        if (key === 'routeLink' && breadcrumb.routeLink) {\r\n            this._dynamicBreadcrumbStore.routeLink.set(breadcrumb.routeLink, { ...this._dynamicBreadcrumbStore.routeLink.get(breadcrumb.routeLink), ...breadcrumb });\r\n            return;\r\n        }\r\n\r\n        if (key === 'routeRegex' && breadcrumb.routeRegex) {\r\n            this._dynamicBreadcrumbStore.routeRegex.set(breadcrumb.routeRegex, { ...this._dynamicBreadcrumbStore.routeRegex.get(breadcrumb.routeRegex), ...breadcrumb });\r\n        }\r\n    }\r\n\r\n    \r\n    private _updateCurrentBreadcrumbs(\r\n        key: StoreMatcherKey,\r\n        breadcrumb: CmatBreadcrumbDefinition\r\n    ): void {\r\n        const itemIndex = this._currentBreadcrumbs.findIndex((item) => {\r\n            if (key === 'routeRegex') {\r\n                return this._matchRegex(item.routeLink, breadcrumb.routeRegex);\r\n            }\r\n\r\n            if (key === 'alias') {\r\n                return item.alias === breadcrumb.alias;\r\n            }\r\n\r\n            return item.routeLink === breadcrumb.routeLink;\r\n        });\r\n\r\n        if (itemIndex > -1) {\r\n            this._currentBreadcrumbs[itemIndex] = {\r\n                ...this._currentBreadcrumbs[itemIndex],\r\n                ...breadcrumb,\r\n            };\r\n            this._publishCurrentBreadcrumbs();\r\n        }\r\n    }\r\n\r\n    \r\n    private _buildRegex(path: string): string {\r\n        return this._ensureLeadingSlash(path).replace(\r\n            new RegExp(PATH_PARAM.REGEX_IDENTIFIER, 'g'),\r\n            PATH_PARAM.REGEX_REPLACER\r\n        );\r\n    }\r\n\r\n    private _ensureLeadingSlash(path: string): string {\r\n        return path.startsWith('/') ? path : `/${path}`;\r\n    }\r\n\r\n    \r\n    private _extractLabel(config: CmatBreadcrumbConfig | undefined, resolvedParam?: string): string | undefined {\r\n        if (!config) {\r\n            return undefined;\r\n        }\r\n\r\n        const label = typeof config === 'object' ? config.label : config;\r\n        if (typeof label === 'function') {\r\n            return label(resolvedParam);\r\n        }\r\n        return label;\r\n    }\r\n\r\n    private _extractObject(config: CmatBreadcrumbConfig | undefined): CmatBreadcrumbObject {\r\n        if (\r\n            config &&\r\n            (typeof config === 'string' || typeof config === 'function')\r\n        ) {\r\n            return { label: config };\r\n        }\r\n        return (config as CmatBreadcrumbObject) || {};\r\n    }\r\n\r\n    private _publishCurrentBreadcrumbs(): void {\r\n        this._breadcrumbs.set(this._currentBreadcrumbs.filter(item => !item.skip));\r\n    }\r\n}\r\n","import { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef, ViewEncapsulation, computed, inject, signal } from '@angular/core';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { RouterLink } from '@angular/router';\r\nimport { CmatBreadcrumbItemDirective } from './breadcrumb-item.directive';\r\nimport { CmatBreadcrumbDefinition, CmatBreadcrumbService } from './breadcrumb.service';\r\nimport { CmatBreadcrumbFunction } from './types/breadcrumb.config';\r\n\r\n/* eslint-disable @typescript-eslint/member-ordering */\r\n\r\ninterface CmatBreadcrumbTemplateContext {\r\n    $implicit: string | undefined | CmatBreadcrumbFunction;\r\n    info: unknown;\r\n    last: boolean;\r\n    first: boolean;\r\n    index: number;\r\n    count: number;\r\n}\r\n\r\n@Component({\r\n    selector: 'cmat-breadcrumb',\r\n    templateUrl: './breadcrumb.component.html',\r\n    styleUrls: ['./breadcrumb.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatBreadcrumb',\r\n    imports: [NgClass, RouterLink, NgTemplateOutlet]\r\n})\r\nexport class CmatBreadcrumbComponent {\r\n    @ContentChild(CmatBreadcrumbItemDirective, { static: false, read: TemplateRef })\r\n    itemTemplate: TemplateRef<CmatBreadcrumbTemplateContext> | null = null;\r\n\r\n\r\n    @Input()\r\n    set autoGenerate(value: boolean) {\r\n        this._autoGenerate.set(value);\r\n    }\r\n\r\n    get autoGenerate(): boolean {\r\n        return this._autoGenerate();\r\n    }\r\n\r\n\r\n    @Input() preserveQueryParams = true;\r\n\r\n\r\n    @Input() preserveFragment = true;\r\n\r\n\r\n    @Input() class = '';\r\n\r\n\r\n    @Input() anchorTarget: '_blank' | void;\r\n\r\n    separatorTemplate: TemplateRef<void> | null = null;\r\n\r\n    readonly breadcrumbs = computed(() => {\r\n        const breadcrumbs = this._breadcrumbItems();\r\n\r\n        if (this._autoGenerate()) {\r\n            return breadcrumbs;\r\n        }\r\n\r\n        return breadcrumbs.filter(breadcrumb => !breadcrumb.isAutoGeneratedLabel);\r\n    });\r\n\r\n    private readonly _breadcrumbService = inject(CmatBreadcrumbService);\r\n    private readonly _autoGenerate = signal(true);\r\n    private readonly _breadcrumbItems = toSignal(this._breadcrumbService.breadcrumbs$, { initialValue: [] as CmatBreadcrumbDefinition[] });\r\n    @Input()\r\n    set separator(value: string | void) {\r\n        this._separator = value;\r\n    }\r\n\r\n    get separator(): string | void {\r\n        return this._separator;\r\n    }\r\n\r\n    private _separator: string | void = '/';\r\n}\r\n","<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(); track\r\n      breadcrumb.routeLink ?? $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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst, index: index, count: count }\"></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>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-card.mjs

@@ -19,23 +19,19 @@ class CmatCardComponent {
         /* eslint-enable @typescript-eslint/naming-convention */
     }
     ngOnChanges(changes) {
-        // Expanded
         if ('expanded' in changes) {
-            // Coerce the value to a boolean
             this.expanded = coerceBooleanProperty(changes['expanded'].currentValue);
         }
-        // Flippable
         if ('flippable' in changes) {
-            // Coerce the value to a boolean
             this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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 expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-card', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"] }]
+            args: [{ selector: 'cmat-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCard', imports: [], template: "\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\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", ".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\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 { 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', '../../animations/expand-collapse.css'],\r\n    standalone: true,\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\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    @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 expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\r\n</div>\r\n}\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAca,iBAAiB,CAAA;AAV9B,IAAA,WAAA,GAAA;QAgBa,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,IAAI,GAAiB,OAAO;QAC5B,IAAA,CAAA,SAAS,GAAY,KAAK;AAyBtC,IAAA;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;;IAEL;AAEA,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;QAC3E;;AAGA,QAAA,IAAI,WAAW,IAAI,OAAO,EAAE;;AAExB,YAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;QAC7E;IACJ;8GAhCS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,+OCd9B,grBAwBC,EAAA,MAAA,EAAA,CAAA,kiCAAA,EAAA,sdAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDVY,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EAGT,IAAI,EAAA,aAAA,EACD,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,WACX,EAAE,EAAA,QAAA,EAAA,grBAAA,EAAA,MAAA,EAAA,CAAA,kiCAAA,EAAA,sdAAA,CAAA,EAAA;;sBAQV;;sBACA;;sBACA;;sBACA,WAAW;uBAAC,OAAO;;;AEvBxB;;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 { 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', '../../animations/expand-collapse.css'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\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    @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        if ('expanded' in changes) {\r\n            this.expanded = coerceBooleanProperty(changes['expanded'].currentValue);\r\n        }\r\n        if ('flippable' in changes) {\r\n            this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);\r\n        }\r\n    }\r\n}\r\n","\r\n@if (flippable) {\r\n\r\n<div class=\"cmat-card-front\">\r\n  <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n</div>\r\n\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\r\n@if (!flippable) {\r\n\r\n<ng-content></ng-content>\r\n\r\n@if (expanded) {\r\n<div class=\"cmat-card-expansion expand-collapse-animation\" animate.leave=\"expand-collapse-animation-leaving\">\r\n  <div>\r\n    <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n  </div>\r\n</div>\r\n}\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAaa,iBAAiB,CAAA;AAT9B,IAAA,WAAA,GAAA;QAea,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,IAAI,GAAiB,OAAO;QAC5B,IAAA,CAAA,SAAS,GAAY,KAAK;AAoBtC,IAAA;AAnBG,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;;IAEL;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,UAAU,IAAI,OAAO,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;QAC3E;AACA,QAAA,IAAI,WAAW,IAAI,OAAO,EAAE;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;QAC7E;IACJ;8GA3BS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,+OCb9B,wkBAwBC,EAAA,MAAA,EAAA,CAAA,kiCAAA,EAAA,sdAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDXY,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;+BACI,WAAW,EAAA,aAAA,EAGN,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,OAAA,EACX,EAAE,EAAA,QAAA,EAAA,wkBAAA,EAAA,MAAA,EAAA,CAAA,kiCAAA,EAAA,sdAAA,CAAA,EAAA;;sBAQV;;sBACA;;sBACA;;sBACA,WAAW;uBAAC,OAAO;;;AEtBxB;;AAEG;;;;"}

package/fesm2022/cmat-components-carousel.mjs

@@ -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: "21.2.7", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", 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: "21.2.8", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-header',
@@ -21,10 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 }]
         }] });
 class CmatCarouselFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", 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: "21.2.8", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.2.7", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatCarouselTemplate]'
@@ -618,10 +618,10 @@ class CmatCarouselComponent {
             this.clonedItemsForFinishing = [...this.data.slice(0, this._numVisible)];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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], suspendAutoPlay: ["suspendAutoPlay", "suspendAutoPlay", 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\" matIconButton  [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\" matIconButton  [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: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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], suspendAutoPlay: ["suspendAutoPlay", "suspendAutoPlay", 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\" matIconButton  [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\" matIconButton  [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: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatIconModule, MatButtonModule, CmatArrowCursorDirective, CommonModule], 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\" matIconButton  [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\" matIconButton  [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: () => [], propDecorators: { page: [{

package/fesm2022/cmat-components-cascade.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, ChangeDetectorRef, Input, ViewChild, HostBinding } from '@angular/core';
+import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, ChangeDetectorRef, DestroyRef, Input, ViewChild, HostBinding } from '@angular/core';
 import { FormControl, NgControl } from '@angular/forms';
 import { MAT_BOTTOM_SHEET_DATA, MatBottomSheet } from '@angular/material/bottom-sheet';
 import * as i1 from '@angular/material/button';
@@ -18,11 +18,12 @@ import { Overlay, OverlayConfig, OverlayModule, CdkOverlayOrigin } from '@angula
 import * as i4$1 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
 import { NgClass } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import * as i2$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { Subject } from 'rxjs';
-import { takeUntil, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 class CmatCascadeBottomSheetComponent {
     constructor() {
@@ -48,10 +49,10 @@ class CmatCascadeBottomSheetComponent {
             this.selected.setValue(this.root.steps.length - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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\" matIconButton  (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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.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: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "21.2.8", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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\" matIconButton  (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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.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: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "21.2.7", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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\" matIconButton  (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: () => [] });
@@ -60,10 +61,10 @@ class CmatCascadeMenuComponent {
     constructor() {
         this.root = inject(CmatCascadeListComponent, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCascadeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "21.2.8", ngImport: i0, type: CmatCascadeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "21.2.7", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', 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"] }]
         }] });
@@ -77,6 +78,7 @@ class CmatCascadeListComponent {
         this._breakpointObserver = inject(BreakpointObserver);
         this._bottomSheet = inject(MatBottomSheet);
         this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
         /* 组件 id */
         this.id = `cmat-cascade-list-${NEXT_ID++}`;
         this.clearable = false;
@@ -90,8 +92,6 @@ class CmatCascadeListComponent {
         this.focused = false;
         this.touched = false;
         this.controlType = 'cmat-cascade-list';
-        this._unsubscribeAll = new Subject();
-        // Whether the cascade dropdownlist UI is in touch mode.
         this._touchUi = false;
         this._placeholder = '请选择';
         this._required = false;
@@ -180,7 +180,7 @@ class CmatCascadeListComponent {
                 }
             ])
         });
-        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntil(this._unsubscribeAll), map((match) => match.matches)).subscribe((matches) => {
+        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntilDestroyed(this._destroyRef), map((match) => match.matches)).subscribe((matches) => {
             this.touchUi !== matches && !matches && this.bottomSheetRef?.dismiss();
         });
         this.overlayRef = this._overlay.create(config);
@@ -202,8 +202,6 @@ class CmatCascadeListComponent {
     }
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._unsubscribeAll.next(void 0);
-        this._unsubscribeAll.complete();
     }
     writeValue(value) {
         this.value = value;
@@ -277,12 +275,9 @@ class CmatCascadeListComponent {
             ...item,
             active: i === index
         }));
-        // reset steps
         this.steps.length = step + 1;
         const next = this.steps[step][index].children;
-        // go next
         if (next && Array.isArray(next) && next.length) {
-            // change on select (props)
             if (this.changeOnSelect) {
                 this._changeLabels();
             }
@@ -292,7 +287,6 @@ class CmatCascadeListComponent {
             }));
             return this.steps.push(nativeNext);
         }
-        // last step
         this._changeLabels();
         if (this.overlayRef?.hasAttached()) {
             this.overlayRef.detach();
@@ -383,10 +377,10 @@ class CmatCascadeListComponent {
             this._inputElement.nativeElement.value = this.currentLabels[this.currentLabels.length - 1].label ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCascadeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", allowLabelValue: "allowLabelValue", 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 matIconButton  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\" cdkPortal>\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: i4.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: i2$1.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: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4$1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatCascadeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", allowLabelValue: "allowLabelValue", 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 matIconButton  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\" cdkPortal>\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: i4.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: i2$1.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: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4$1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 matIconButton  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\" cdkPortal>\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: () => [], propDecorators: { id: [{