cmat 0.0.87 → 0.0.89

package/icons/material-icons/heroicons-outline.svg

@@ -659,6 +659,9 @@
         <svg id="pencil" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"/>
         </svg>
+		<svg id="percent-badge" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+		  <path stroke-linecap="round" stroke-linejoin="round" d="m8.99 14.993 6-6m6 3.001c0 1.268-.63 2.39-1.593 3.069a3.746 3.746 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043 3.745 3.745 0 0 1-3.068 1.593c-1.268 0-2.39-.63-3.068-1.593a3.745 3.745 0 0 1-3.296-1.043 3.746 3.746 0 0 1-1.043-3.297 3.746 3.746 0 0 1-1.593-3.068c0-1.268.63-2.39 1.593-3.068a3.746 3.746 0 0 1 1.043-3.297 3.745 3.745 0 0 1 3.296-1.042 3.745 3.745 0 0 1 3.068-1.594c1.268 0 2.39.63 3.068 1.593a3.745 3.745 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.297 3.746 3.746 0 0 1 1.593 3.068ZM9.74 9.743h.008v.007H9.74v-.007Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm4.125 4.5h.008v.008h-.008v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+		</svg>
         <svg id="phone-arrow-up-right" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 3.75v4.5m0-4.5h-4.5m4.5 0l-6 6m3 12c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 014.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 00-.38 1.21 12.035 12.035 0 007.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 011.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 01-2.25 2.25h-2.25z"/>
         </svg>

package/icons/material-icons/heroicons-solid.svg

@@ -753,6 +753,9 @@
         <svg id="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
             <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z"/>
         </svg>
+       <svg id="percent-badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+        <path fill-rule="evenodd" d="M11.99 2.243a4.49 4.49 0 0 0-3.398 1.55 4.49 4.49 0 0 0-3.497 1.306 4.491 4.491 0 0 0-1.307 3.498 4.491 4.491 0 0 0-1.548 3.397c0 1.357.6 2.573 1.548 3.397a4.491 4.491 0 0 0 1.307 3.498 4.49 4.49 0 0 0 3.498 1.307 4.49 4.49 0 0 0 3.397 1.549 4.49 4.49 0 0 0 3.397-1.549 4.49 4.49 0 0 0 3.497-1.307 4.491 4.491 0 0 0 1.306-3.497 4.491 4.491 0 0 0 1.55-3.398c0-1.357-.601-2.573-1.549-3.397a4.491 4.491 0 0 0-1.307-3.498 4.49 4.49 0 0 0-3.498-1.307 4.49 4.49 0 0 0-3.396-1.549Zm3.53 7.28a.75.75 0 0 0-1.06-1.06l-6 6a.75.75 0 1 0 1.06 1.06l6-6Zm-5.78-.905a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm4.5 4.5a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
+        </svg>
         <svg id="play-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm14.024-.983a1.125 1.125 0 010 1.966l-5.603 3.113A1.125 1.125 0 019 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113z" clip-rule="evenodd"/>
         </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmat",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "author": {
     "name": "Yu Tao",
     "email": "916426364@qq.com"
@@ -17,6 +17,7 @@
     "@angular/platform-browser": "^21.2.9",
     "@angular/platform-browser-dynamic": "^21.2.9",
     "@angular/router": "^21.2.9",
+    "@ctrl/tinycolor": "^4.2.0",
     "@ngx-formly/core": "^7.1.0",
     "@ngx-formly/material": "^7.1.0",
     "@ngx-translate/core": "^17.0.0",
@@ -78,10 +79,18 @@
       "types": "./types/cmat-components-code-editor.d.ts",
       "default": "./fesm2022/cmat-components-code-editor.mjs"
     },
+    "./components/color-picker": {
+      "types": "./types/cmat-components-color-picker.d.ts",
+      "default": "./fesm2022/cmat-components-color-picker.mjs"
+    },
     "./components/custom-formly": {
       "types": "./types/cmat-components-custom-formly.d.ts",
       "default": "./fesm2022/cmat-components-custom-formly.mjs"
     },
+    "./components/data-picker": {
+      "types": "./types/cmat-components-data-picker.d.ts",
+      "default": "./fesm2022/cmat-components-data-picker.mjs"
+    },
     "./components/date-range": {
       "types": "./types/cmat-components-date-range.d.ts",
       "default": "./fesm2022/cmat-components-date-range.mjs"

package/styles/components/bundle.scss

@@ -586,6 +586,27 @@ cmat-transfer-picker {
       transform: translateZ(0);
     }
 
+.cmat-data-picker{
+    .picker-trigger {
+        @apply flex items-center justify-between cursor-pointer;
+
+        &.disabled {
+            @apply opacity-50 cursor-not-allowed;
+        }
+
+        .placeholder {
+            @apply text-secondary flex-1;
+        }
+
+        .trigger-icon {
+            @apply ml-2 text-secondary;
+        }
+    }
+}
+.cmat-data-picker-drawer-overlay {
+    @apply bg-card;
+}
+
 /* 滚动动画 */
 @keyframes scroll-up {
  0% {

package/styles/overrides/angular-material.scss

@@ -12,7 +12,7 @@
 /*  @ Overlay
 /* ----------------------------------------------------------------------------------------------------- */
 .cmat-backdrop-on-mobile {
-    @apply bg-black/60! sm:bg-transparent!;
+    @apply bg-black/60! md:bg-transparent!;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -101,7 +101,6 @@
 .mat-mdc-raised-button,
 .mat-mdc-outlined-button,
 .mat-mdc-unelevated-button,
-.mat-mdc-icon-button,
 .mat-mdc-fab,
 .mat-mdc-mini-fab {
     height: 40px;
@@ -114,16 +113,10 @@
         height: 48px;
         min-height: 48px;
         max-height: 48px;
-    }
+    }   
+}
 
-    /* Lower the icon opacity on disabled buttons */
-    &[disabled=true] {
 
-        .mat-icon {
-            opacity: 0.38 !important;
-        }
-    }
-}
 
 /* Icon buttons */
 .mat-mdc-icon-button {
@@ -137,6 +130,14 @@
     img {
         height: auto !important;
     }
+
+     /* Lower the icon opacity on disabled buttons */
+    &[disabled=true] {
+
+        .mat-icon {
+            opacity: 0.38 !important;
+        }
+    }
 }
 
 /* FAB buttons */
@@ -1201,6 +1202,7 @@
 
 .mat-mdc-select-panel{
     @apply dark:border!;
+    @apply overflow-y-auto scrollbar-custom;
 }
 
 .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after,
@@ -1505,4 +1507,24 @@ textarea.mat-mdc-input-element {
 .mat-mdc-card{
    border-top: 1px solid !important;
    border-top-color: inherit !important;
+}
+
+.outline-radio-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  height: 56px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+
+.outline-radio-group .mat-radio-button {
+  margin: 0;
+}
+
+.outline-label {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-right: 8px;
 }

package/tailwind/plugins/theming.js

@@ -1,183 +1,183 @@
-const chroma = require('chroma-js');
-const _ = require('lodash');
-const fs = require('fs');
-const path = require('path');
-const colors = require('tailwindcss/colors');
-const plugin = require('tailwindcss/plugin');
-const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
-const { importDefault } = require(path.resolve(__dirname, ('./helpers')));
-const flattenColorPalette = importDefault(flattenColorPaletteImport);
-const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
-const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
-
-const normalizeTheme = (theme) => {
-    return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)),
-        (palette, paletteName) => [
-            paletteName,
-            {
-                ...palette,
-                DEFAULT: palette['DEFAULT'] || palette[500]
-            }
-        ]
-    ));
-};
-
-const theming = plugin.withOptions((options) => ({
-    addComponents,
-    theme
-}) => {
-    const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-        themeName,
-        _.defaults({}, theme, options.themes['default'])
-    ]));
-
-    let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
-        themeName,
-        normalizeTheme(theme)
-    ]));
-
-    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-        themeName,
-        _.pick(
-            _.fromPairs(_.map(theme, (palette, paletteName) => [
-                paletteName,
-                {
-                    ...palette,
-                    contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
-                        hue,
-                        _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
-                    ]))
-                }
-            ])),
-            ['primary', 'accent', 'warn']
-        )
-    ]));
-
-    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-        themeName,
-        {
-            selector: `".theme-${themeName}"`,
-            ...theme
-        }
-    ]));
-
-    const sassMap = jsonToSassMap(JSON.stringify({ 'user-themes': themes }));
-
-    const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
-
-    let data;
-    try {
-        data = fs.readFileSync(filename, { encoding: 'utf8' });
-    }
-    catch (err) {
-        console.error(err);
-    }
-
-    if (data !== sassMap) {
-        try {
-            fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }
-
-    addComponents(
-        _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName === 'default' ? '.theme-default' : `.theme-${themeName}`,
-            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                [
-                    paletteName,
-                    palette
-                ],
-                [
-                    `on-${paletteName}`,
-                    _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
-                ]
-            ])
-            ))), (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
-        ]))
-    );
-
-    const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => {
-        const isDark = colorScheme === 'dark';
-        const background = theme(`cmat.customProps.background.${colorScheme}`);
-        const foreground = theme(`cmat.customProps.foreground.${colorScheme}`);
-        const lightSchemeSelectors = 'body.light, .light, .dark .light';
-        const darkSchemeSelectors = 'body.dark, .dark, .light .dark';
-
-        return {
-            [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
-
-                ...(!isDark ? { '--is-dark': 'false' } : {}),
-
-                ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]]))),
-                ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
-            }
-        };
-    });
-
-    const schemeUtilities = (() => {
-        return {};
-    })();
-
-    addComponents(schemeCustomProps);
-    addComponents(schemeUtilities);
-},
-    (options) => {
-        return {
-            theme: {
-                extend: {
-                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
-                        [name, `rgba(var(--cmat-${name}-rgb), <alpha-value>)`],
-                        [`on-${name}`, `rgba(var(--cmat-on-${name}-rgb), <alpha-value>)`]
-                    ])))
-                },
-                cmat: {
-                    customProps: {
-                        background: {
-                            light: {
-                                'bg-app-bar': '#FFFFFF',
-                                'bg-card': '#FFFFFF',
-                                'bg-default': colors.slate[100],
-                                'bg-dialog': '#FFFFFF',                                
-                                'bg-status-bar': colors.slate[300]
-                            },
-                            dark: {
-                                'bg-app-bar': colors.slate[900],
-                                'bg-card': colors.slate[800],
-                                'bg-default': colors.slate[900],
-                                'bg-dialog': colors.slate[800],                                
-                                'bg-status-bar': colors.slate[900]
-                            }
-                        },
-                        foreground: {
-                            light: {
-                                'text-default': colors.slate[800],
-                                'text-secondary': colors.slate[500],
-                                'text-hint': colors.slate[400],
-                                'text-disabled': colors.slate[400],
-                                'border': colors.slate[200],
-                                'divider': colors.slate[200],
-                                'icon': colors.slate[500],
-                                'mat-icon': colors.slate[500]
-                            },
-                            dark: {
-                                'text-default': '#FFFFFF',
-                                'text-secondary': colors.slate[400],
-                                'text-hint': colors.slate[500],
-                                'text-disabled': colors.slate[600],
-                                'border': chroma(colors.slate[100]).alpha(0.12).css(),
-                                'divider': chroma(colors.slate[100]).alpha(0.12).css(),
-                                'icon': colors.slate[400],
-                                'mat-icon': colors.slate[400]
-                            }
-                        }
-                    }
-                }
-            }
-        };
-    }
-);
-
-module.exports = theming;
+const chroma = require('chroma-js');
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+const colors = require('tailwindcss/colors');
+const plugin = require('tailwindcss/plugin');
+const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
+const { importDefault } = require(path.resolve(__dirname, ('./helpers')));
+const flattenColorPalette = importDefault(flattenColorPaletteImport);
+const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
+const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
+
+const normalizeTheme = (theme) => {
+    return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)),
+        (palette, paletteName) => [
+            paletteName,
+            {
+                ...palette,
+                DEFAULT: palette['DEFAULT'] || palette[500]
+            }
+        ]
+    ));
+};
+
+const theming = plugin.withOptions((options) => ({
+    addComponents,
+    theme
+}) => {
+    const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+        themeName,
+        _.defaults({}, theme, options.themes['default'])
+    ]));
+
+    let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
+        themeName,
+        normalizeTheme(theme)
+    ]));
+
+    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+        themeName,
+        _.pick(
+            _.fromPairs(_.map(theme, (palette, paletteName) => [
+                paletteName,
+                {
+                    ...palette,
+                    contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
+                        hue,
+                        _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                    ]))
+                }
+            ])),
+            ['primary', 'accent', 'warn']
+        )
+    ]));
+
+    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+        themeName,
+        {
+            selector: `".theme-${themeName}"`,
+            ...theme
+        }
+    ]));
+
+    const sassMap = jsonToSassMap(JSON.stringify({ 'user-themes': themes }));
+
+    const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
+
+    let data;
+    try {
+        data = fs.readFileSync(filename, { encoding: 'utf8' });
+    }
+    catch (err) {
+        console.error(err);
+    }
+
+    if (data !== sassMap) {
+        try {
+            fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+
+    addComponents(
+        _.fromPairs(_.map(options.themes, (theme, themeName) => [
+            themeName === 'default' ? '.theme-default' : `.theme-${themeName}`,
+            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
+                [
+                    paletteName,
+                    palette
+                ],
+                [
+                    `on-${paletteName}`,
+                    _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                ]
+            ])
+            ))), (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
+        ]))
+    );
+
+    const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => {
+        const isDark = colorScheme === 'dark';
+        const background = theme(`cmat.customProps.background.${colorScheme}`);
+        const foreground = theme(`cmat.customProps.foreground.${colorScheme}`);
+        const lightSchemeSelectors = 'body.light, .light, .dark .light';
+        const darkSchemeSelectors = 'body.dark, .dark, .light .dark';
+
+        return {
+            [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
+
+                ...(!isDark ? { '--is-dark': 'false' } : {}),
+
+                ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]]))),
+                ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
+            }
+        };
+    });
+
+    const schemeUtilities = (() => {
+        return {};
+    })();
+
+    addComponents(schemeCustomProps);
+    addComponents(schemeUtilities);
+},
+    (options) => {
+        return {
+            theme: {
+                extend: {
+                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
+                        [name, `rgba(var(--cmat-${name}-rgb), <alpha-value>)`],
+                        [`on-${name}`, `rgba(var(--cmat-on-${name}-rgb), <alpha-value>)`]
+                    ])))
+                },
+                cmat: {
+                    customProps: {
+                        background: {
+                            light: {
+                                'bg-app-bar': '#FFFFFF',
+                                'bg-card': '#FFFFFF',
+                                'bg-default': colors.slate[100],
+                                'bg-dialog': '#FFFFFF',                                
+                                'bg-status-bar': colors.slate[300]
+                            },
+                            dark: {
+                                'bg-app-bar': colors.slate[900],
+                                'bg-card': colors.slate[800],
+                                'bg-default': colors.slate[900],
+                                'bg-dialog': colors.slate[800],                                
+                                'bg-status-bar': colors.slate[900]
+                            }
+                        },
+                        foreground: {
+                            light: {
+                                'text-default': colors.slate[800],
+                                'text-secondary': colors.slate[500],
+                                'text-hint': colors.slate[400],
+                                'text-disabled': colors.slate[400],
+                                'border': colors.slate[200],
+                                'divider': colors.slate[200],
+                                'icon': colors.slate[500],
+                                'mat-icon': colors.slate[500]
+                            },
+                            dark: {
+                                'text-default': '#FFFFFF',
+                                'text-secondary': colors.slate[400],
+                                'text-hint': colors.slate[500],
+                                'text-disabled': colors.slate[600],
+                                'border': chroma(colors.slate[100]).alpha(0.12).css(),
+                                'divider': chroma(colors.slate[100]).alpha(0.12).css(),
+                                'icon': colors.slate[400],
+                                'mat-icon': colors.slate[400]
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    }
+);
+
+module.exports = theming;

package/types/cmat-components-breadcrumb.d.ts

@@ -1,10 +1,41 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
+import * as cmat_components_breadcrumb from 'cmat/components/breadcrumb';
 
 declare class CmatBreadcrumbItemDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CmatBreadcrumbItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatBreadcrumbItemDirective, "[cmatBreadcrumbItem]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CmatBreadcrumbItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CmatBreadcrumbItemDirective, "[cmatBreadcrumbItem]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CmatBreadcrumbComponent {
+    readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    readonly autoGenerate: _angular_core.InputSignal<boolean>;
+    readonly preserveQueryParams: _angular_core.InputSignal<boolean>;
+    readonly preserveFragment: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly anchorTarget: _angular_core.InputSignal<void | "_blank">;
+    readonly separatorTemplate: _angular_core.WritableSignal<TemplateRef<void> | null>;
+    readonly separator: _angular_core.InputSignal<string | void | TemplateRef<void>>;
+    readonly breadcrumbs: _angular_core.Signal<{
+        label: string;
+        finalRouteLink: string | undefined;
+        routeLink?: string;
+        routeRegex?: string;
+        isAutoGeneratedLabel?: boolean;
+        queryParams?: Record<string, unknown>;
+        fragment?: string;
+        routeInterceptor?: (((breadcrumb: cmat_components_breadcrumb.CmatBreadcrumb, routeLink?: string) => string) & ((breadcrumb: cmat_components_breadcrumb.CmatBreadcrumb, routeLink?: string) => string)) | undefined;
+        alias?: string;
+        skip?: boolean;
+        disable?: boolean;
+        info?: unknown;
+    }[]>;
+    private readonly _breadcrumbService;
+    private readonly _autoGenerate;
+    private readonly _breadcrumbItems;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CmatBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CmatBreadcrumbComponent, "cmat-breadcrumb", ["cmatBreadcrumb"], { "autoGenerate": { "alias": "autoGenerate"; "required": false; "isSignal": true; }; "preserveQueryParams": { "alias": "preserveQueryParams"; "required": false; "isSignal": true; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "anchorTarget": { "alias": "anchorTarget"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate"], never, true, never>;
 }
 
 interface CmatBreadcrumb {
@@ -28,17 +59,17 @@ type CmatBreadcrumbFunction = (resolvedLabel?: string) => string;
 
 type CmatBreadcrumbDefinition = CmatBreadcrumb & CmatBreadcrumbObject;
 declare class CmatBreadcrumbService {
+    private readonly _breadcrumbs;
+    readonly breadcrumbs: _angular_core.Signal<CmatBreadcrumbDefinition[]>;
     private _activatedRoute;
     private _router;
     private readonly _destroyRef;
     private _baseHref;
+    private readonly _compiledRegexCache;
     private readonly _dynamicBreadcrumbStore;
     private _currentBreadcrumbs;
     private _previousBreadcrumbs;
-    private _breadcrumbs;
-    private readonly _breadcrumbs$;
     constructor();
-    get breadcrumbs$(): Observable<CmatBreadcrumbDefinition[]>;
     set(key: string, breadcrumb: string | CmatBreadcrumbObject): void;
     private _detectRouteChanges;
     private _setupBreadcrumbs;
@@ -59,36 +90,8 @@ declare class CmatBreadcrumbService {
     private _extractLabel;
     private _extractObject;
     private _publishCurrentBreadcrumbs;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CmatBreadcrumbService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<CmatBreadcrumbService>;
-}
-
-interface CmatBreadcrumbTemplateContext {
-    $implicit: string | undefined | CmatBreadcrumbFunction;
-    info: unknown;
-    last: boolean;
-    first: boolean;
-    index: number;
-    count: number;
-}
-declare class CmatBreadcrumbComponent {
-    itemTemplate: TemplateRef<CmatBreadcrumbTemplateContext> | null;
-    set autoGenerate(value: boolean);
-    get autoGenerate(): boolean;
-    preserveQueryParams: boolean;
-    preserveFragment: boolean;
-    class: string;
-    anchorTarget: '_blank' | void;
-    separatorTemplate: TemplateRef<void> | null;
-    readonly breadcrumbs: i0.Signal<CmatBreadcrumbDefinition[]>;
-    private readonly _breadcrumbService;
-    private readonly _autoGenerate;
-    private readonly _breadcrumbItems;
-    set separator(value: string | void);
-    get separator(): string | void;
-    private _separator;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CmatBreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CmatBreadcrumbComponent, "cmat-breadcrumb", ["cmatBreadcrumb"], { "autoGenerate": { "alias": "autoGenerate"; "required": false; }; "preserveQueryParams": { "alias": "preserveQueryParams"; "required": false; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; }; "class": { "alias": "class"; "required": false; }; "anchorTarget": { "alias": "anchorTarget"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; }, {}, ["itemTemplate"], never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CmatBreadcrumbService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CmatBreadcrumbService>;
 }
 
 export { CmatBreadcrumbComponent, CmatBreadcrumbItemDirective, CmatBreadcrumbService };