cmat 0.0.78 → 0.0.79

package/fesm2022/cmat-components-breadcrumb.mjs

@@ -1,21 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, Injectable, TemplateRef, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { Directive, inject, DestroyRef, signal, Injectable, computed, TemplateRef, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router, GuardsCheckEnd, RouterLink } from '@angular/router';
-import { takeUntil, filter, map } from 'rxjs/operators';
-import { isNull } from 'lodash-es';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
-/**
- * This directive is used to customize the breadcrumb label behavior
- * *cmatBreadcrumbItem directive can be used in the child element of cmat-breadcrumb
- * Usage: refer to the demo - app.component.html
- */
 class CmatBreadcrumbItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatBreadcrumbItem]'
@@ -29,57 +23,27 @@ const PATH_PARAM = {
     REGEX_REPLACER: '/[^/]+',
 };
 const ALIAS_PREFIX = '@';
-const isNonEmpty = (obj) => obj && Object.keys(obj).length > 0;
+const isNonEmpty = (obj) => !!obj && Object.keys(obj).length > 0;
 class CmatBreadcrumbService {
     constructor() {
         this._activatedRoute = inject(ActivatedRoute);
         this._router = inject(Router);
+        this._destroyRef = inject(DestroyRef);
         this._baseHref = '/';
-        this._unsubscribeAll = new Subject();
-        /**
-         * dynamicBreadcrumbStore holds information about dynamically updated breadcrumbs.
-         * Breadcrumbs can be set from anywhere (component, service) in the app.
-         * On every breadcrumb update check this store and use the info if available.
-         */
-        this._dynamicBreadcrumbStore = [];
-        /**
-         * breadcrumbList for the current route
-         * When breadcrumb info is changed dynamically, check if the currentBreadcrumbs is effected
-         * If effected, update the change and emit a new stream
-         */
+        this._dynamicBreadcrumbStore = {
+            alias: new Map(),
+            routeLink: new Map(),
+            routeRegex: new Map(),
+        };
         this._currentBreadcrumbs = [];
         this._previousBreadcrumbs = [];
-        /**
-         * Breadcrumbs observable to be subscribed by BreadcrumbComponent
-         * Emits on every route change OR dynamic update of breadcrumb
-         */
-        this._breadcrumbs = new BehaviorSubject([]);
+        this._breadcrumbs = signal([], ...(ngDevMode ? [{ debugName: "_breadcrumbs" }] : /* istanbul ignore next */ []));
+        this._breadcrumbs$ = toObservable(this._breadcrumbs);
         this._detectRouteChanges();
     }
     get breadcrumbs$() {
-        return this._breadcrumbs.asObservable();
+        return this._breadcrumbs$;
     }
-    ngOnDestroy() {
-        this._unsubscribeAll.next(void 0);
-        this._unsubscribeAll.complete();
-    }
-    /**
-     * Update breadcrumb dynamically
-     *
-     * key can be a path | alias
-     *
-     * 1) Using complete route path. route can be passed the same way you define angular routes
-     * - path can be passed as 'exact path(routeLink)' or 'path with params(routeRegex)'
-     * - update label Ex: set('/mentor', 'Mentor'), set('/mentor/:id', 'Mentor Details')
-     * - change visibility Ex: set('/mentor/:id/edit', { skip: true })
-     * ------------------------------------------ OR ------------------------------------------
-     * 2) Using route alias (prefixed with '@'). alias should be unique for a route
-     * - update label Ex: set('@mentor', 'Enabler')
-     * - change visibility Ex: set('@mentorEdit', { skip: true })
-     *
-     *
-     * value can be string | BreadcrumbObject | BreadcrumbFunction
-     */
     set(key, breadcrumb) {
         const breadcrumbObject = this._extractObject(breadcrumb);
         let updateArgs;
@@ -98,26 +62,15 @@ class CmatBreadcrumbService {
                 { ...breadcrumbObject, routeLink: this._ensureLeadingSlash(key) },
             ];
         }
-        // For this route if previously a breadcrumb is not defined that sets isAutoGeneratedLabel: true
-        // change it to false since this is user supplied value
         updateArgs[1].isAutoGeneratedLabel = false;
         this._updateStore(...updateArgs);
         this._updateCurrentBreadcrumbs(...updateArgs);
     }
-    /**
-     * Whenever route changes build breadcrumb list again
-     */
     _detectRouteChanges() {
-        // Special case where breadcrumb service & component instantiates after a route is navigated.
-        // Ex: put breadcrumbs within *ngIf and this.router.events would be empty
-        // This check is also required where  { initialNavigation: 'enabledBlocking' } is applied to routes
         this._setupBreadcrumbs(this._activatedRoute.snapshot);
         this._router.events
-            .pipe(takeUntil(this._unsubscribeAll), filter((event) => event instanceof GuardsCheckEnd))
+            .pipe(takeUntilDestroyed(this._destroyRef), filter((event) => event instanceof GuardsCheckEnd))
             .subscribe((event) => {
-            // activatedRoute doesn't carry data when shouldReuseRoute returns false
-            // use the event data with GuardsCheckEnd as workaround
-            // Check for shouldActivate in case where the authGuard returns false the breadcrumbs shouldn't be changed
             if (event.shouldActivate) {
                 this._setupBreadcrumbs(event.state.root);
             }
@@ -125,7 +78,6 @@ class CmatBreadcrumbService {
     }
     _setupBreadcrumbs(activatedRouteSnapshot) {
         this._previousBreadcrumbs = this._currentBreadcrumbs;
-        // breadcrumb label for base OR root path. Usually, this can be set as 'Home'
         const rootBreadcrumb = this._getRootBreadcrumb();
         this._currentBreadcrumbs = rootBreadcrumb ? [rootBreadcrumb] : [];
         this._prepareBreadcrumbList(activatedRouteSnapshot, this._baseHref);
@@ -144,11 +96,19 @@ class CmatBreadcrumbService {
         }
     }
     _prepareBreadcrumbItem(activatedRouteSnapshot, routeLinkPrefix) {
-        const { path, breadcrumb } = this._parseRouteData(activatedRouteSnapshot.routeConfig);
-        const resolvedSegment = this._resolvePathSegment(path, activatedRouteSnapshot);
+        const routeData = this._parseRouteData(activatedRouteSnapshot.routeConfig);
+        if (!routeData) {
+            return {
+                label: '',
+                routeLink: routeLinkPrefix,
+                isAutoGeneratedLabel: true,
+            };
+        }
+        const { path, breadcrumb } = routeData;
+        const resolvedSegment = this._resolvePathSegment(path ?? '', activatedRouteSnapshot);
         const routeLink = `${routeLinkPrefix}${resolvedSegment}`;
         const storeItem = this._getFromStore(routeLink, breadcrumb.alias);
-        const label = this._extractLabel(storeItem?.label ?? breadcrumb?.label, resolvedSegment);
+        const label = this._extractLabel(storeItem?.label ?? breadcrumb?.label ?? '', resolvedSegment);
         let isAutoGeneratedLabel = false;
         let autoGeneratedLabel = '';
         if (!label) {
@@ -158,7 +118,7 @@ class CmatBreadcrumbService {
         return {
             ...storeItem,
             ...breadcrumb,
-            label: isAutoGeneratedLabel ? autoGeneratedLabel : label,
+            label: isAutoGeneratedLabel ? autoGeneratedLabel : (label ?? ''),
             routeLink,
             isAutoGeneratedLabel,
             ...this._getQueryParamsFromPreviousList(routeLink),
@@ -177,18 +137,28 @@ class CmatBreadcrumbService {
         }
         const lastCrumb = this._currentBreadcrumbs[this._currentBreadcrumbs.length - 1];
         this._setQueryParamsForActiveBreadcrumb(lastCrumb, activatedRouteSnapshot);
-        // remove breadcrumb items that needs to be hidden
         const breadcrumbsToShow = this._currentBreadcrumbs.filter(item => !item.skip);
-        this._breadcrumbs.next(breadcrumbsToShow);
+        this._breadcrumbs.set([...breadcrumbsToShow]);
         return void 0;
     }
     _getFromStore(routeLink, alias) {
-        return this._dynamicBreadcrumbStore.find(item => (((alias && alias === item.alias) ?? false) || (routeLink && routeLink === item.routeLink) || this._matchRegex(routeLink, item.routeRegex)));
+        if (alias) {
+            const aliasBreadcrumb = this._dynamicBreadcrumbStore.alias.get(alias);
+            if (aliasBreadcrumb) {
+                return aliasBreadcrumb;
+            }
+        }
+        const routeLinkBreadcrumb = this._dynamicBreadcrumbStore.routeLink.get(routeLink);
+        if (routeLinkBreadcrumb) {
+            return routeLinkBreadcrumb;
+        }
+        for (const breadcrumb of this._dynamicBreadcrumbStore.routeRegex.values()) {
+            if (this._matchRegex(routeLink, breadcrumb.routeRegex)) {
+                return breadcrumb;
+            }
+        }
+        return void 0;
     }
-    /**
-     * use exact match instead of regexp.test
-     * for /mentor/[^/]+ we should match '/mentor/12' but not '/mentor/12/abc'
-     */
     _matchRegex(routeLink, routeRegex) {
         if (routeRegex && routeLink) {
             const match = new RegExp(routeRegex).exec(routeLink);
@@ -196,14 +166,7 @@ class CmatBreadcrumbService {
         }
         return null;
     }
-    /**
-     * if the path segment has route params, read the param value from url
-     * for each segment of route this gets called
-     *
-     * for mentor/:id/view - it gets called with mentor, :id, view 3 times
-     */
     _resolvePathSegment(segment, activatedRouteSnapshot) {
-        //quirk -segment can be defined as view/:id in route config in which case you need to make it view/<resolved-param>
         if (segment.includes(PATH_PARAM.PREFIX)) {
             Object.entries(activatedRouteSnapshot.params).forEach(([key, value]) => {
                 segment = segment.replace(`:${key}`, `${value}`);
@@ -211,17 +174,11 @@ class CmatBreadcrumbService {
         }
         return segment;
     }
-    /**
-     * queryParams & fragments for previous breadcrumb path are copied over to new list
-     */
     _getQueryParamsFromPreviousList(routeLink) {
         const { queryParams, fragment } = this._previousBreadcrumbs.find(item => item.routeLink === routeLink) ??
             {};
         return { queryParams, fragment };
     }
-    /**
-     * set current activated route query params to the last breadcrumb item
-     */
     _setQueryParamsForActiveBreadcrumb(lastItem, activatedRouteSnapshot) {
         if (lastItem) {
             const { queryParams, fragment } = activatedRouteSnapshot;
@@ -229,101 +186,74 @@ class CmatBreadcrumbService {
             lastItem.fragment = fragment ?? void 0;
         }
     }
-    /**
-     * For a specific route, breadcrumb can be defined either on parent OR it's child(which has empty path)
-     * When both are defined, child takes precedence
-     *
-     * Ex: Below we are setting breadcrumb on both parent and child.
-     * So, child takes precedence and "Defined On Child" is displayed for the route 'home'
-     * { path: 'home', loadChildren: './home/home.module#HomeModule' , data: {breadcrumb: "Defined On Module"}}
-     *                                                AND
-     * children: [
-     *   { path: '', component: ShowUserComponent, data: {breadcrumb: "Defined On Child" }
-     * ]
-     */
     _parseRouteData(routeConfig) {
-        if (isNull(routeConfig))
+        if (!routeConfig) {
             return void 0;
+        }
         const { path, data } = routeConfig;
         const breadcrumb = this._mergeWithBaseChildData(routeConfig, data?.['breadcrumb']);
         return { path, breadcrumb };
     }
-    /**
-     * get empty children of a module or Component. Empty child is the one with path: ''
-     * When parent and it's children (that has empty route path) define data merge them both with child taking precedence
-     */
     _mergeWithBaseChildData(routeConfig, config) {
         if (!routeConfig) {
             return this._extractObject(config);
         }
         let baseChild = void 0;
         if (routeConfig.loadChildren) {
-            // To handle a module with empty child route
-            baseChild = routeConfig._loadedRoutes.find((route) => route.path === '');
+            baseChild = routeConfig._loadedRoutes?.find(route => route.path === '');
         }
         else if (routeConfig.children) {
-            // To handle a component with empty child route
-            baseChild = routeConfig.children.find((route) => route.path === '');
+            baseChild = routeConfig.children.find(route => route.path === '');
         }
         const childConfig = baseChild?.data?.['breadcrumb'];
         return childConfig
-            ? this._mergeWithBaseChildData(baseChild, {
+            ? this._mergeWithBaseChildData(baseChild ?? null, {
                 ...this._extractObject(config),
                 ...this._extractObject(childConfig),
             })
             : this._extractObject(config);
     }
-    /**
-     * Update the store to reuse for dynamic declarations
-     * If the store already has this route definition update it, else add
-     */
     _updateStore(key, breadcrumb) {
-        const storeItemIndex = this._dynamicBreadcrumbStore.findIndex(item => breadcrumb[key] === item[key]);
-        if (storeItemIndex > -1) {
-            this._dynamicBreadcrumbStore[storeItemIndex] = {
-                ...this._dynamicBreadcrumbStore[storeItemIndex],
-                ...breadcrumb,
-            };
+        if (key === 'alias' && breadcrumb.alias) {
+            this._dynamicBreadcrumbStore.alias.set(breadcrumb.alias, { ...this._dynamicBreadcrumbStore.alias.get(breadcrumb.alias), ...breadcrumb });
+            return;
         }
-        else {
-            this._dynamicBreadcrumbStore.push({ ...breadcrumb });
+        if (key === 'routeLink' && breadcrumb.routeLink) {
+            this._dynamicBreadcrumbStore.routeLink.set(breadcrumb.routeLink, { ...this._dynamicBreadcrumbStore.routeLink.get(breadcrumb.routeLink), ...breadcrumb });
+            return;
+        }
+        if (key === 'routeRegex' && breadcrumb.routeRegex) {
+            this._dynamicBreadcrumbStore.routeRegex.set(breadcrumb.routeRegex, { ...this._dynamicBreadcrumbStore.routeRegex.get(breadcrumb.routeRegex), ...breadcrumb });
         }
     }
-    /**
-     * If breadcrumb is present in current breadcrumbs update it and emit new stream
-     */
     _updateCurrentBreadcrumbs(key, breadcrumb) {
-        const itemIndex = this._currentBreadcrumbs.findIndex(item => key === 'routeRegex'
-            ? this._matchRegex(item.routeLink, breadcrumb[key])
-            : breadcrumb[key] === item[key]);
+        const itemIndex = this._currentBreadcrumbs.findIndex((item) => {
+            if (key === 'routeRegex') {
+                return this._matchRegex(item.routeLink, breadcrumb.routeRegex);
+            }
+            if (key === 'alias') {
+                return item.alias === breadcrumb.alias;
+            }
+            return item.routeLink === breadcrumb.routeLink;
+        });
         if (itemIndex > -1) {
             this._currentBreadcrumbs[itemIndex] = {
                 ...this._currentBreadcrumbs[itemIndex],
                 ...breadcrumb,
             };
-            const breadcrumbsToShow = this._currentBreadcrumbs.filter(item => !item.skip);
-            this._breadcrumbs.next([...breadcrumbsToShow]);
+            this._publishCurrentBreadcrumbs();
         }
     }
-    /**
-     * For a route with path param, we create regex dynamically from angular route syntax
-     * '/mentor/:id' becomes '/mentor/[^/]',
-     * breadcrumbService.set('/mentor/:id', 'Uday') should update 'Uday' as label for '/mentor/2' OR 'mentor/ada'
-     */
     _buildRegex(path) {
         return this._ensureLeadingSlash(path).replace(new RegExp(PATH_PARAM.REGEX_IDENTIFIER, 'g'), PATH_PARAM.REGEX_REPLACER);
     }
     _ensureLeadingSlash(path) {
         return path.startsWith('/') ? path : `/${path}`;
     }
-    /**
-     * In App's RouteConfig, breadcrumb can be defined as a string OR a function OR an object
-     *
-     * string: simple static breadcrumb label for a path
-     * function: callback that gets invoked with resolved path param
-     * object: additional data defined along with breadcrumb label that gets passed to *cmatBreadcrumbItem directive
-     */
     _extractLabel(config, resolvedParam) {
+        if (!config) {
+            return undefined;
+        }
         const label = typeof config === 'object' ? config.label : config;
         if (typeof label === 'function') {
             return label(resolvedParam);
@@ -331,17 +261,19 @@ class CmatBreadcrumbService {
         return label;
     }
     _extractObject(config) {
-        // don't include {label} if config is undefined. This is important since we merge the configs
         if (config &&
             (typeof config === 'string' || typeof config === 'function')) {
             return { label: config };
         }
         return config || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
+    _publishCurrentBreadcrumbs() {
+        this._breadcrumbs.set(this._currentBreadcrumbs.filter(item => !item.skip));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -350,74 +282,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 
 class CmatBreadcrumbComponent {
     constructor() {
-        /**
-         * 如果为true，即使没有任何映射标签，面包屑也会自动生成
-         * 默认标签与路由segment相同
-         */
-        this.autoGenerate = true;
-        /**
-         * 默认情况下，查询参数将与breadcrumbs一起保留
-         */
+        this.itemTemplate = null;
         this.preserveQueryParams = true;
-        /**
-         * 默认情况下，fragments参数将与breadcrumbs一起保留
-         */
         this.preserveFragment = true;
-        /**
-         * 可提供覆盖样式，增加特异性
-         */
         this.class = '';
-        this._separator = '/';
+        this.separatorTemplate = null;
+        this.breadcrumbs = computed(() => {
+            const breadcrumbs = this._breadcrumbItems();
+            if (this._autoGenerate()) {
+                return breadcrumbs;
+            }
+            return breadcrumbs.filter(breadcrumb => !breadcrumb.isAutoGeneratedLabel);
+        }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
         this._breadcrumbService = inject(CmatBreadcrumbService);
+        this._autoGenerate = signal(true, ...(ngDevMode ? [{ debugName: "_autoGenerate" }] : /* istanbul ignore next */ []));
+        this._breadcrumbItems = toSignal(this._breadcrumbService.breadcrumbs$, { initialValue: [] });
+        this._separator = '/';
     }
-    get separator() {
-        return this._separator;
+    set autoGenerate(value) {
+        this._autoGenerate.set(value);
+    }
+    get autoGenerate() {
+        return this._autoGenerate();
     }
-    /**
-     * 面包屑分隔符, 默认'/'.
-     * 用户可以通过传递字符串或模板来自定义分隔符
-     *
-     * 字符串 --> Ex: <cmat-breadcrumb separator="-"></cmat-breadcrumb>
-     *
-     * 模板 --> Ex: <cmat-breadcrumb [separator]="separatorTemplate"></cmat-breadcrumb>
-     * <ng-template #separatorTemplate><mat-icon>arrow_right</mat-icon></ng-template>
-     */
     set separator(value) {
-        if (value instanceof TemplateRef) {
-            this.separatorTemplate = value;
-            this._separator = undefined;
-        }
-        else {
-            this.separatorTemplate = null;
-            this._separator = value || '/';
-        }
+        this._separator = value;
     }
-    ngOnInit() {
-        this.breadcrumbs$ = this._breadcrumbService.breadcrumbs$.pipe(map((breadcrumbs) => breadcrumbs
-            .filter((breadcrumb) => {
-            // Usually, breadcrumb list can contain a combination of auto generated and user specified labels
-            // this filters autogenerated labels in case of "[autoGenerate]: false"
-            if (this.autoGenerate) {
-                return true;
-            }
-            return !breadcrumb.isAutoGeneratedLabel;
-        })
-            .map((breadcrumb) => {
-            // Do not mutate breadcrumb as its source of truth.
-            // There can be scenarios where we can have multiple cmat-breadcrumb instances in page
-            const { routeInterceptor, routeLink } = breadcrumb;
-            return {
-                ...breadcrumb,
-                routeLink: routeInterceptor?.(breadcrumb, routeLink) ?? routeLink,
-            };
-        })));
+    get separator() {
+        return this._separator;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs(); 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", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-breadcrumb', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatBreadcrumb', imports: [NgClass, AsyncPipe, RouterLink, NgTemplateOutlet], template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"] }]
+            args: [{ selector: 'cmat-breadcrumb', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatBreadcrumb', imports: [NgClass, RouterLink, NgTemplateOutlet], template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs(); 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", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"] }]
         }], propDecorators: { itemTemplate: [{
                 type: ContentChild,
                 args: [CmatBreadcrumbItemDirective, { static: false, read: TemplateRef }]