@raintonic/formaui 0.2.0 → 0.3.0

package/fesm2022/raintonic-formaui-components-badge.mjs

@@ -21,7 +21,9 @@ const FUI_BADGE_VARIANTS = [
  *
  * @input label - (required) Text content of the badge.
  * @input icon - Optional Phosphor icon name displayed before the label.
- * @input customColor - Optional hex color that overrides the variant palette.
+ * @input customColor - Optional hex color or `{ label, background }` object that overrides the variant palette.
+ *   - Hex string: used as label color; background is the same hex with 16% alpha.
+ *   - Object: `{ label, background }` both as hex; applied as-is.
  * @input size - Badge size: 'sm' | 'md' | 'lg'. Default 'md'.
  * @input variant - Color variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'. Default 'primary'.
  * @input ariaLabel - Accessible label override for screen readers.
@@ -30,43 +32,49 @@ const FUI_BADGE_VARIANTS = [
  * <fui-badge label="Active" variant="success" icon="check-circle"></fui-badge>
  */
 class FuiBadgeComponent {
-    /** Pattern allowing hex, rgb/rgba, hsl/hsla, and CSS named colors */
-    static _SAFE_COLOR_PATTERN = /^(#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\([^)]+\)|[a-zA-Z]+)$/;
+    /** Hex pattern: #rgb, #rgba, #rrggbb, #rrggbbaa */
+    static _HEX_PATTERN = /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     customColor = input(null, ...(ngDevMode ? [{ debugName: "customColor" }] : /* istanbul ignore next */ []));
     size = input('md', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (v) => (FUI_BADGE_SIZES.includes(v) ? v : 'md') });
     variant = input('primary', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (v) => (FUI_BADGE_VARIANTS.includes(v) ? v : 'primary') });
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Validated custom color - returns null for invalid values to prevent CSS injection */
-    sanitizedColor = computed(() => {
-        const color = this.customColor();
-        if (!color)
-            return null;
-        if (!FuiBadgeComponent._SAFE_COLOR_PATTERN.test(color)) {
-            console.warn(`[FormaUI] Invalid badge color: "${color}"`);
+    /**
+     * Resolved custom color pair (label + background).
+     * - String input: must be a valid hex → used as label color, background is same hex with 16% alpha.
+     * - Object input: `{ label, background }` used directly (both must be valid hex).
+     * Returns null for invalid values to prevent CSS injection.
+     */
+    resolvedCustomColor = computed(() => {
+        const value = this.customColor();
+        if (!value)
             return null;
+        if (typeof value === 'string') {
+            if (!FuiBadgeComponent._HEX_PATTERN.test(value)) {
+                console.warn(`[FormaUI] Invalid badge color: "${value}"`);
+                return null;
+            }
+            return { label: value, background: this.hexToRgba(value, 0.16) };
         }
-        return color;
-    }, ...(ngDevMode ? [{ debugName: "sanitizedColor" }] : /* istanbul ignore next */ []));
-    computedTextColor = computed(() => {
-        const color = this.sanitizedColor();
-        if (!color)
+        const { label, background } = value;
+        if (!FuiBadgeComponent._HEX_PATTERN.test(label) || !FuiBadgeComponent._HEX_PATTERN.test(background)) {
+            console.warn(`[FormaUI] Invalid badge color object:`, value);
             return null;
-        const luminance = this.getRelativeLuminance(color);
-        return luminance < 0.5 ? '#ffffff' : '#000000';
-    }, ...(ngDevMode ? [{ debugName: "computedTextColor" }] : /* istanbul ignore next */ []));
+        }
+        return { label, background };
+    }, ...(ngDevMode ? [{ debugName: "resolvedCustomColor" }] : /* istanbul ignore next */ []));
     computedStyles = computed(() => {
-        const color = this.sanitizedColor();
-        if (!color)
+        const resolved = this.resolvedCustomColor();
+        if (!resolved)
             return {};
         return {
-            'background-color': color,
-            color: this.computedTextColor() ?? '#000000',
+            'background-color': resolved.background,
+            color: resolved.label,
         };
     }, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
     computedClasses = computed(() => {
-        const effectiveVariant = this.sanitizedColor() ? 'custom' : this.variant();
+        const effectiveVariant = this.resolvedCustomColor() ? 'custom' : this.variant();
         const classes = ['fui-badge', `fui-badge--${effectiveVariant}`, `fui-badge--${this.size()}`];
         if (this.icon()) {
             classes.push('fui-badge--with-icon');
@@ -79,15 +87,21 @@ class FuiBadgeComponent {
             return 'md';
         return 'sm';
     }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    getRelativeLuminance(hex) {
-        const r = parseInt(hex.slice(1, 3), 16) / 255;
-        const g = parseInt(hex.slice(3, 5), 16) / 255;
-        const b = parseInt(hex.slice(5, 7), 16) / 255;
-        const linearize = (channel) => channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
-        return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+    hexToRgba(hex, alpha) {
+        let h = hex.slice(1);
+        if (h.length === 3 || h.length === 4) {
+            h = h
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        const r = parseInt(h.slice(0, 2), 16);
+        const g = parseInt(h.slice(2, 4), 16);
+        const b = parseInt(h.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBadgeComponent, isStandalone: true, selector: "fui-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "computedClasses()", "style": "computedStyles()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: "<div class=\"fui-badge__content\">\n  @if (icon()) {\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n  }\n  <span class=\"fui-badge__label\">{{ label() }}</span>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}:host.fui-badge{--fui-badge-bg: transparent;--fui-badge-color: inherit;--fui-badge-font-size: var(--fui-font-size-01);--fui-badge-font-weight: var(--fui-font-weight-medium);--fui-badge-border-radius: var(--fui-border-radius-pill);--fui-badge-gap: var(--fui-spacing-02);--fui-badge-height-sm: 1.25rem;--fui-badge-height-md: 1.5rem;--fui-badge-height-lg: 2rem;contain:content;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fui-font-family-sans);font-size:var(--fui-badge-font-size);font-weight:var(--fui-badge-font-weight);border-radius:var(--fui-badge-border-radius);background-color:var(--fui-badge-bg);color:var(--fui-badge-color);white-space:nowrap;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-badge .fui-badge__content{display:flex;align-items:center;gap:var(--fui-badge-gap)}:host.fui-badge .fui-badge__label{line-height:1}:host.fui-badge .fui-badge__icon{display:inline-flex;align-items:center;justify-content:center}:host.fui-badge--sm{height:var(--fui-badge-height-sm);padding:0 var(--fui-spacing-03);font-size:var(--fui-font-size-01)}:host.fui-badge--md{height:var(--fui-badge-height-md);padding:0 var(--fui-spacing-04);font-size:var(--fui-font-size-02)}:host.fui-badge--lg{height:var(--fui-badge-height-lg);padding:0 var(--fui-spacing-05);font-size:var(--fui-font-size-03)}:host.fui-badge--primary{--fui-badge-bg: var(--fui-primary-20);--fui-badge-color: var(--fui-primary)}:host.fui-badge--secondary{--fui-badge-bg: var(--fui-secondary-20);--fui-badge-color: var(--fui-secondary-80)}:host.fui-badge--success{--fui-badge-bg: var(--fui-success-20);--fui-badge-color: var(--fui-success-80)}:host.fui-badge--info{--fui-badge-bg: var(--fui-info-20);--fui-badge-color: var(--fui-info-80)}:host.fui-badge--warning{--fui-badge-bg: var(--fui-warning-20);--fui-badge-color: var(--fui-warning-80)}:host.fui-badge--error{--fui-badge-bg: var(--fui-danger-20);--fui-badge-color: var(--fui-danger-80)}:host.fui-badge--custom{--fui-badge-bg: transparent;--fui-badge-color: inherit}@media(prefers-reduced-motion:reduce){:host.fui-badge{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBadgeComponent, isStandalone: true, selector: "fui-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "computedClasses()", "style": "computedStyles()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: "<div class=\"fui-badge__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-badge__label\">{{ label() }}</span>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-badge{--fui-badge-bg: transparent;--fui-badge-color: inherit;--fui-badge-font-size: var(--fui-font-size-01);--fui-badge-font-weight: var(--fui-font-weight-medium);--fui-badge-border-radius: var(--fui-border-radius-pill);--fui-badge-gap: var(--fui-spacing-02);--fui-badge-height-sm: 1.25rem;--fui-badge-height-md: 1.5rem;--fui-badge-height-lg: 2rem;contain:content;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fui-font-family-sans);font-size:var(--fui-badge-font-size);font-weight:var(--fui-badge-font-weight);border-radius:var(--fui-badge-border-radius);background-color:var(--fui-badge-bg);color:var(--fui-badge-color);white-space:nowrap;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-badge .fui-badge__content{display:flex;align-items:center;gap:var(--fui-badge-gap)}:host.fui-badge .fui-badge__label{line-height:1}:host.fui-badge .fui-badge__icon{display:inline-flex;align-items:center;justify-content:center}:host.fui-badge--sm{height:var(--fui-badge-height-sm);padding:0 var(--fui-spacing-03);font-size:var(--fui-font-size-01)}:host.fui-badge--md{height:var(--fui-badge-height-md);padding:0 var(--fui-spacing-04);font-size:var(--fui-font-size-02)}:host.fui-badge--lg{height:var(--fui-badge-height-lg);padding:0 var(--fui-spacing-05);font-size:var(--fui-font-size-03)}:host.fui-badge--primary{--fui-badge-bg: var(--fui-primary-20);--fui-badge-color: var(--fui-primary)}:host.fui-badge--secondary{--fui-badge-bg: var(--fui-secondary-20);--fui-badge-color: var(--fui-secondary-80)}:host.fui-badge--success{--fui-badge-bg: var(--fui-success-20);--fui-badge-color: var(--fui-success-80)}:host.fui-badge--info{--fui-badge-bg: var(--fui-info-20);--fui-badge-color: var(--fui-info-80)}:host.fui-badge--warning{--fui-badge-bg: var(--fui-warning-20);--fui-badge-color: var(--fui-warning-80)}:host.fui-badge--error{--fui-badge-bg: var(--fui-danger-20);--fui-badge-color: var(--fui-danger-80)}:host.fui-badge--custom{--fui-badge-bg: transparent;--fui-badge-color: inherit}@media(prefers-reduced-motion:reduce){:host.fui-badge{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBadgeComponent, decorators: [{
             type: Component,
@@ -96,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[style]': 'computedStyles()',
                         role: 'status',
                         '[attr.aria-label]': 'ariaLabel() || null',
-                    }, template: "<div class=\"fui-badge__content\">\n  @if (icon()) {\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n  }\n  <span class=\"fui-badge__label\">{{ label() }}</span>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}:host.fui-badge{--fui-badge-bg: transparent;--fui-badge-color: inherit;--fui-badge-font-size: var(--fui-font-size-01);--fui-badge-font-weight: var(--fui-font-weight-medium);--fui-badge-border-radius: var(--fui-border-radius-pill);--fui-badge-gap: var(--fui-spacing-02);--fui-badge-height-sm: 1.25rem;--fui-badge-height-md: 1.5rem;--fui-badge-height-lg: 2rem;contain:content;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fui-font-family-sans);font-size:var(--fui-badge-font-size);font-weight:var(--fui-badge-font-weight);border-radius:var(--fui-badge-border-radius);background-color:var(--fui-badge-bg);color:var(--fui-badge-color);white-space:nowrap;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-badge .fui-badge__content{display:flex;align-items:center;gap:var(--fui-badge-gap)}:host.fui-badge .fui-badge__label{line-height:1}:host.fui-badge .fui-badge__icon{display:inline-flex;align-items:center;justify-content:center}:host.fui-badge--sm{height:var(--fui-badge-height-sm);padding:0 var(--fui-spacing-03);font-size:var(--fui-font-size-01)}:host.fui-badge--md{height:var(--fui-badge-height-md);padding:0 var(--fui-spacing-04);font-size:var(--fui-font-size-02)}:host.fui-badge--lg{height:var(--fui-badge-height-lg);padding:0 var(--fui-spacing-05);font-size:var(--fui-font-size-03)}:host.fui-badge--primary{--fui-badge-bg: var(--fui-primary-20);--fui-badge-color: var(--fui-primary)}:host.fui-badge--secondary{--fui-badge-bg: var(--fui-secondary-20);--fui-badge-color: var(--fui-secondary-80)}:host.fui-badge--success{--fui-badge-bg: var(--fui-success-20);--fui-badge-color: var(--fui-success-80)}:host.fui-badge--info{--fui-badge-bg: var(--fui-info-20);--fui-badge-color: var(--fui-info-80)}:host.fui-badge--warning{--fui-badge-bg: var(--fui-warning-20);--fui-badge-color: var(--fui-warning-80)}:host.fui-badge--error{--fui-badge-bg: var(--fui-danger-20);--fui-badge-color: var(--fui-danger-80)}:host.fui-badge--custom{--fui-badge-bg: transparent;--fui-badge-color: inherit}@media(prefers-reduced-motion:reduce){:host.fui-badge{transition:none}}\n"] }]
+                    }, template: "<div class=\"fui-badge__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-badge__label\">{{ label() }}</span>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-badge{--fui-badge-bg: transparent;--fui-badge-color: inherit;--fui-badge-font-size: var(--fui-font-size-01);--fui-badge-font-weight: var(--fui-font-weight-medium);--fui-badge-border-radius: var(--fui-border-radius-pill);--fui-badge-gap: var(--fui-spacing-02);--fui-badge-height-sm: 1.25rem;--fui-badge-height-md: 1.5rem;--fui-badge-height-lg: 2rem;contain:content;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fui-font-family-sans);font-size:var(--fui-badge-font-size);font-weight:var(--fui-badge-font-weight);border-radius:var(--fui-badge-border-radius);background-color:var(--fui-badge-bg);color:var(--fui-badge-color);white-space:nowrap;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-badge .fui-badge__content{display:flex;align-items:center;gap:var(--fui-badge-gap)}:host.fui-badge .fui-badge__label{line-height:1}:host.fui-badge .fui-badge__icon{display:inline-flex;align-items:center;justify-content:center}:host.fui-badge--sm{height:var(--fui-badge-height-sm);padding:0 var(--fui-spacing-03);font-size:var(--fui-font-size-01)}:host.fui-badge--md{height:var(--fui-badge-height-md);padding:0 var(--fui-spacing-04);font-size:var(--fui-font-size-02)}:host.fui-badge--lg{height:var(--fui-badge-height-lg);padding:0 var(--fui-spacing-05);font-size:var(--fui-font-size-03)}:host.fui-badge--primary{--fui-badge-bg: var(--fui-primary-20);--fui-badge-color: var(--fui-primary)}:host.fui-badge--secondary{--fui-badge-bg: var(--fui-secondary-20);--fui-badge-color: var(--fui-secondary-80)}:host.fui-badge--success{--fui-badge-bg: var(--fui-success-20);--fui-badge-color: var(--fui-success-80)}:host.fui-badge--info{--fui-badge-bg: var(--fui-info-20);--fui-badge-color: var(--fui-info-80)}:host.fui-badge--warning{--fui-badge-bg: var(--fui-warning-20);--fui-badge-color: var(--fui-warning-80)}:host.fui-badge--error{--fui-badge-bg: var(--fui-danger-20);--fui-badge-color: var(--fui-danger-80)}:host.fui-badge--custom{--fui-badge-bg: transparent;--fui-badge-color: inherit}@media(prefers-reduced-motion:reduce){:host.fui-badge{transition:none}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**

package/fesm2022/raintonic-formaui-components-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-badge.mjs","sources":["../../../lib/components/badge/badge.types.ts","../../../lib/components/badge/badge.component.ts","../../../lib/components/badge/badge.component.html","../../../lib/components/badge/raintonic-formaui-components-badge.ts"],"sourcesContent":["export type FuiBadgeSize = 'sm' | 'md' | 'lg';\n\nexport type FuiBadgeVariant = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'custom';\n\nexport const FUI_BADGE_SIZES: readonly FuiBadgeSize[] = ['sm', 'md', 'lg'] as const;\n\nexport const FUI_BADGE_VARIANTS: readonly FuiBadgeVariant[] = [\n  'primary',\n  'secondary',\n  'success',\n  'info',\n  'warning',\n  'error',\n  'custom',\n] as const;\n","import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FuiBadgeSize, FuiBadgeVariant, FUI_BADGE_SIZES, FUI_BADGE_VARIANTS } from './badge.types';\n\n/**\n * @component FuiBadgeComponent\n * @selector fui-badge\n * @description Displays a small label badge with optional icon and color variants.\n * Supports custom colors with automatic text contrast calculation.\n *\n * @input label - (required) Text content of the badge.\n * @input icon - Optional Phosphor icon name displayed before the label.\n * @input customColor - Optional hex color that overrides the variant palette.\n * @input size - Badge size: 'sm' | 'md' | 'lg'. Default 'md'.\n * @input variant - Color variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'. Default 'primary'.\n * @input ariaLabel - Accessible label override for screen readers.\n *\n * @example\n * <fui-badge label=\"Active\" variant=\"success\" icon=\"check-circle\"></fui-badge>\n */\n@Component({\n  selector: 'fui-badge',\n  standalone: true,\n  imports: [FuiIconComponent],\n  templateUrl: './badge.component.html',\n  styleUrls: ['./badge.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'computedClasses()',\n    '[style]': 'computedStyles()',\n    role: 'status',\n    '[attr.aria-label]': 'ariaLabel() || null',\n  },\n})\nexport class FuiBadgeComponent {\n  /** Pattern allowing hex, rgb/rgba, hsl/hsla, and CSS named colors */\n  private static readonly _SAFE_COLOR_PATTERN = /^(#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\\([^)]+\\)|[a-zA-Z]+)$/;\n\n  readonly label = input.required<string>();\n\n  readonly icon = input<string | null>(null);\n\n  readonly customColor = input<string | null>(null);\n\n  readonly size = input<FuiBadgeSize, FuiBadgeSize | string>('md', {\n    transform: (v) => ((FUI_BADGE_SIZES as readonly string[]).includes(v) ? (v as FuiBadgeSize) : 'md'),\n  });\n\n  readonly variant = input<FuiBadgeVariant, FuiBadgeVariant | string>('primary', {\n    transform: (v) => ((FUI_BADGE_VARIANTS as readonly string[]).includes(v) ? (v as FuiBadgeVariant) : 'primary'),\n  });\n\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Validated custom color - returns null for invalid values to prevent CSS injection */\n  readonly sanitizedColor: Signal<string | null> = computed(() => {\n    const color = this.customColor();\n    if (!color) return null;\n    if (!FuiBadgeComponent._SAFE_COLOR_PATTERN.test(color)) {\n      console.warn(`[FormaUI] Invalid badge color: \"${color}\"`);\n      return null;\n    }\n    return color;\n  });\n\n  readonly computedTextColor: Signal<string | null> = computed(() => {\n    const color = this.sanitizedColor();\n    if (!color) return null;\n    const luminance = this.getRelativeLuminance(color);\n    return luminance < 0.5 ? '#ffffff' : '#000000';\n  });\n\n  readonly computedStyles = computed(() => {\n    const color = this.sanitizedColor();\n    if (!color) return {} as Record<string, string>;\n    return {\n      'background-color': color,\n      color: this.computedTextColor() ?? '#000000',\n    } as Record<string, string>;\n  });\n\n  readonly computedClasses: Signal<string> = computed(() => {\n    const effectiveVariant = this.sanitizedColor() ? 'custom' : this.variant();\n    const classes: string[] = ['fui-badge', `fui-badge--${effectiveVariant}`, `fui-badge--${this.size()}`];\n\n    if (this.icon()) {\n      classes.push('fui-badge--with-icon');\n    }\n\n    return classes.join(' ');\n  });\n\n  readonly iconSize: Signal<'sm' | 'md' | 'lg'> = computed(() => {\n    const size = this.size();\n    if (size === 'lg') return 'md';\n    return 'sm';\n  });\n\n  private getRelativeLuminance(hex: string): number {\n    const r = parseInt(hex.slice(1, 3), 16) / 255;\n    const g = parseInt(hex.slice(3, 5), 16) / 255;\n    const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n    const linearize = (channel: number): number =>\n      channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);\n\n    return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);\n  }\n}\n","<div class=\"fui-badge__content\">\n  @if (icon()) {\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n  }\n  <span class=\"fui-badge__label\">{{ label() }}</span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-badge.mjs","sources":["../../../lib/components/badge/badge.types.ts","../../../lib/components/badge/badge.component.ts","../../../lib/components/badge/badge.component.html","../../../lib/components/badge/raintonic-formaui-components-badge.ts"],"sourcesContent":["export type FuiBadgeSize = 'sm' | 'md' | 'lg';\r\n\r\nexport interface FuiBadgeCustomColorObject {\r\n  label: string;\r\n  background: string;\r\n}\r\n\r\nexport type FuiBadgeCustomColor = string | FuiBadgeCustomColorObject;\r\n\r\nexport type FuiBadgeVariant = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'custom';\r\n\r\nexport const FUI_BADGE_SIZES: readonly FuiBadgeSize[] = ['sm', 'md', 'lg'] as const;\r\n\r\nexport const FUI_BADGE_VARIANTS: readonly FuiBadgeVariant[] = [\r\n  'primary',\r\n  'secondary',\r\n  'success',\r\n  'info',\r\n  'warning',\r\n  'error',\r\n  'custom',\r\n] as const;\r\n","import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport {\r\n  FuiBadgeCustomColor,\r\n  FuiBadgeCustomColorObject,\r\n  FuiBadgeSize,\r\n  FuiBadgeVariant,\r\n  FUI_BADGE_SIZES,\r\n  FUI_BADGE_VARIANTS,\r\n} from './badge.types';\r\n\r\n/**\r\n * @component FuiBadgeComponent\r\n * @selector fui-badge\r\n * @description Displays a small label badge with optional icon and color variants.\r\n * Supports custom colors with automatic text contrast calculation.\r\n *\r\n * @input label - (required) Text content of the badge.\r\n * @input icon - Optional Phosphor icon name displayed before the label.\r\n * @input customColor - Optional hex color or `{ label, background }` object that overrides the variant palette.\r\n *   - Hex string: used as label color; background is the same hex with 16% alpha.\r\n *   - Object: `{ label, background }` both as hex; applied as-is.\r\n * @input size - Badge size: 'sm' | 'md' | 'lg'. Default 'md'.\r\n * @input variant - Color variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'. Default 'primary'.\r\n * @input ariaLabel - Accessible label override for screen readers.\r\n *\r\n * @example\r\n * <fui-badge label=\"Active\" variant=\"success\" icon=\"check-circle\"></fui-badge>\r\n */\r\n@Component({\r\n  selector: 'fui-badge',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[class]': 'computedClasses()',\r\n    '[style]': 'computedStyles()',\r\n    role: 'status',\r\n    '[attr.aria-label]': 'ariaLabel() || null',\r\n  },\r\n})\r\nexport class FuiBadgeComponent {\r\n  /** Hex pattern: #rgb, #rgba, #rrggbb, #rrggbbaa */\r\n  private static readonly _HEX_PATTERN = /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\r\n\r\n  readonly label = input.required<string>();\r\n\r\n  readonly icon = input<string | null>(null);\r\n\r\n  readonly customColor = input<FuiBadgeCustomColor | null>(null);\r\n\r\n  readonly size = input<FuiBadgeSize, FuiBadgeSize | string>('md', {\r\n    transform: (v) => ((FUI_BADGE_SIZES as readonly string[]).includes(v) ? (v as FuiBadgeSize) : 'md'),\r\n  });\r\n\r\n  readonly variant = input<FuiBadgeVariant, FuiBadgeVariant | string>('primary', {\r\n    transform: (v) => ((FUI_BADGE_VARIANTS as readonly string[]).includes(v) ? (v as FuiBadgeVariant) : 'primary'),\r\n  });\r\n\r\n  readonly ariaLabel = input<string | null>(null);\r\n\r\n  /**\r\n   * Resolved custom color pair (label + background).\r\n   * - String input: must be a valid hex → used as label color, background is same hex with 16% alpha.\r\n   * - Object input: `{ label, background }` used directly (both must be valid hex).\r\n   * Returns null for invalid values to prevent CSS injection.\r\n   */\r\n  readonly resolvedCustomColor: Signal<FuiBadgeCustomColorObject | null> = computed(() => {\r\n    const value = this.customColor();\r\n    if (!value) return null;\r\n\r\n    if (typeof value === 'string') {\r\n      if (!FuiBadgeComponent._HEX_PATTERN.test(value)) {\r\n        console.warn(`[FormaUI] Invalid badge color: \"${value}\"`);\r\n        return null;\r\n      }\r\n      return { label: value, background: this.hexToRgba(value, 0.16) };\r\n    }\r\n\r\n    const { label, background } = value;\r\n    if (!FuiBadgeComponent._HEX_PATTERN.test(label) || !FuiBadgeComponent._HEX_PATTERN.test(background)) {\r\n      console.warn(`[FormaUI] Invalid badge color object:`, value);\r\n      return null;\r\n    }\r\n    return { label, background };\r\n  });\r\n\r\n  readonly computedStyles = computed(() => {\r\n    const resolved = this.resolvedCustomColor();\r\n    if (!resolved) return {} as Record<string, string>;\r\n    return {\r\n      'background-color': resolved.background,\r\n      color: resolved.label,\r\n    } as Record<string, string>;\r\n  });\r\n\r\n  readonly computedClasses: Signal<string> = computed(() => {\r\n    const effectiveVariant = this.resolvedCustomColor() ? 'custom' : this.variant();\r\n    const classes: string[] = ['fui-badge', `fui-badge--${effectiveVariant}`, `fui-badge--${this.size()}`];\r\n\r\n    if (this.icon()) {\r\n      classes.push('fui-badge--with-icon');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly iconSize: Signal<'sm' | 'md' | 'lg'> = computed(() => {\r\n    const size = this.size();\r\n    if (size === 'lg') return 'md';\r\n    return 'sm';\r\n  });\r\n\r\n  private hexToRgba(hex: string, alpha: number): string {\r\n    let h = hex.slice(1);\r\n    if (h.length === 3 || h.length === 4) {\r\n      h = h\r\n        .split('')\r\n        .map((c) => c + c)\r\n        .join('');\r\n    }\r\n    const r = parseInt(h.slice(0, 2), 16);\r\n    const g = parseInt(h.slice(2, 4), 16);\r\n    const b = parseInt(h.slice(4, 6), 16);\r\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`;\r\n  }\r\n}\r\n","<div class=\"fui-badge__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-badge__icon\" [name]=\"icon()!\" [size]=\"iconSize()\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-badge__label\">{{ label() }}</span>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-big-menu.mjs

@@ -1,7 +1,20 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, HostListener, Component } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, input, output, signal, computed, HostListener, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
+import { FuiIntlBase } from '@raintonic/formaui/core';
+
+class FuiBigMenuIntl extends FuiIntlBase {
+    rootAriaLabel = 'Main menu';
+    categoriesAriaLabel = 'Menu categories';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBigMenuIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBigMenuIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBigMenuIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * @component FuiBigMenuComponent
@@ -27,11 +40,16 @@ import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
  * <fui-big-menu [menu]="menuItems" (itemMenuClick)="onItemClick($event)"></fui-big-menu>
  */
 class FuiBigMenuComponent {
+    intl = inject(FuiBigMenuIntl);
+    _cdr = inject(ChangeDetectorRef);
     menu = input.required(...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
     itemMenuClick = output();
     selectedMainVoice = signal(null, ...(ngDevMode ? [{ debugName: "selectedMainVoice" }] : /* istanbul ignore next */ []));
     selectedMainVoiceId = computed(() => this.selectedMainVoice()?.id, ...(ngDevMode ? [{ debugName: "selectedMainVoiceId" }] : /* istanbul ignore next */ []));
     showSecondaryMenu = signal(false, ...(ngDevMode ? [{ debugName: "showSecondaryMenu" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
+    }
     ngOnInit() {
         this.selectedMainVoice.set(this.menu()[0] ?? null);
     }
@@ -47,12 +65,12 @@ class FuiBigMenuComponent {
         this.showSecondaryMenu.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBigMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBigMenuComponent, isStandalone: true, selector: "fui-big-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemMenuClick: "itemMenuClick" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<nav class=\"fui-big-menu\" role=\"navigation\" aria-label=\"Main menu\">\n  <ng-content select=\"[top-content]\"></ng-content>\n\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\n    @for (item of menu(); track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          (click)=\"selectMainVoice(item)\"\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\n          [fuiTooltip]=\"item.label\"\n          fuiTooltipTrigger=\"hover\"\n          fuiTooltipPosition=\"right\"\n          fuiTooltipSize=\"sm\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n\n  <div class=\"fui-grow\"></div>\n  <ng-content select=\"[bottom-content]\"></ng-content>\n</nav>\n\n<div\n  class=\"fui-big-menu__secondary-menu\"\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\n  role=\"menu\"\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\n>\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\n    {{ selectedMainVoice()?.label }}\n  </h2>\n\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\n    @for (item of selectedMainVoice()?.children; track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          class=\"fui-big-menu__secondary-menu-item\"\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\n          <span class=\"fui-grow\"></span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}:host{--fui-big-menu-width: 90px;--fui-big-menu-bg: var(--fui-surface-00);--fui-big-menu-border-color: var(--fui-border-color);--fui-big-menu-item-size: 48px;--fui-big-menu-item-border-radius: var(--fui-border-radius-sm);--fui-big-menu-secondary-width: 228px;--fui-big-menu-secondary-item-height: 32px;display:flex;width:var(--fui-big-menu-width);background-color:var(--fui-big-menu-bg);border-right:1px solid var(--fui-big-menu-border-color);position:fixed;top:0;left:0;height:100vh;padding:var(--fui-spacing-04);align-items:center;flex-direction:column;z-index:var(--fui-z-fixed)}.fui-big-menu__list{display:flex;flex-direction:column;gap:var(--fui-spacing-04)}.fui-big-menu__list li{list-style:none}.fui-big-menu__list li button{width:var(--fui-big-menu-item-size);height:var(--fui-big-menu-item-size);display:flex;align-items:center;justify-content:center;border-radius:var(--fui-big-menu-item-border-radius);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__list li button:hover{color:var(--fui-primary);background-color:var(--fui-primary-20)}.fui-big-menu__list li button.fui-big-menu__item--active{background-color:var(--fui-primary);color:var(--fui-primary-text-color);box-shadow:0 2px 14px 0 var(--fui-primary)}.fui-big-menu__secondary-menu{width:var(--fui-big-menu-secondary-width);height:100vh;position:fixed;top:0;left:var(--fui-big-menu-width);z-index:-1;background-color:var(--fui-big-menu-bg);display:block;border-right:1px solid var(--fui-big-menu-border-color);transform:translate(-100%);padding:var(--fui-spacing-04);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu h2{padding:var(--fui-spacing-04)}.fui-big-menu__secondary-menu__active{transform:translate(0)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-top:var(--fui-spacing-04)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li{list-style:none}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item{display:flex;align-items:center;gap:var(--fui-spacing-04);width:100%;border-radius:var(--fui-border-radius-sm);padding:var(--fui-spacing-04);height:var(--fui-big-menu-secondary-item-height);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item:hover:not(.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active{color:var(--fui-primary);background-color:var(--fui-primary-20)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBigMenuComponent, isStandalone: true, selector: "fui-big-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemMenuClick: "itemMenuClick" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<nav class=\"fui-big-menu\" role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" [attr.aria-label]=\"intl.categoriesAriaLabel\">\r\n    @for (item of menu(); track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          (click)=\"selectMainVoice(item)\"\r\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\r\n          [fuiTooltip]=\"item.label\"\r\n          fuiTooltipTrigger=\"hover\"\r\n          fuiTooltipPosition=\"right\"\r\n          fuiTooltipSize=\"sm\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  <div class=\"fui-grow\"></div>\r\n  <ng-content select=\"[bottom-content]\"></ng-content>\r\n</nav>\r\n\r\n<div\r\n  class=\"fui-big-menu__secondary-menu\"\r\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\r\n>\r\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\r\n    {{ selectedMainVoice()?.label }}\r\n  </h2>\r\n\r\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\r\n    @for (item of selectedMainVoice()?.children; track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          class=\"fui-big-menu__secondary-menu-item\"\r\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\r\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\r\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\r\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\r\n          <span class=\"fui-grow\"></span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-big-menu-width: 90px;--fui-big-menu-bg: var(--fui-surface-00);--fui-big-menu-border-color: var(--fui-border-color);--fui-big-menu-item-size: 48px;--fui-big-menu-item-border-radius: var(--fui-border-radius-sm);--fui-big-menu-secondary-width: 228px;--fui-big-menu-secondary-item-height: 32px;display:flex;width:var(--fui-big-menu-width);background-color:var(--fui-big-menu-bg);border-right:1px solid var(--fui-big-menu-border-color);position:fixed;top:0;left:0;height:100vh;padding:var(--fui-spacing-04);align-items:center;flex-direction:column;z-index:var(--fui-z-fixed)}.fui-big-menu__list{display:flex;flex-direction:column;gap:var(--fui-spacing-04)}.fui-big-menu__list li{list-style:none}.fui-big-menu__list li button{width:var(--fui-big-menu-item-size);height:var(--fui-big-menu-item-size);display:flex;align-items:center;justify-content:center;border-radius:var(--fui-big-menu-item-border-radius);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__list li button:hover{color:var(--fui-primary);background-color:var(--fui-primary-20)}.fui-big-menu__list li button.fui-big-menu__item--active{background-color:var(--fui-primary);color:var(--fui-primary-text-color);box-shadow:0 2px 14px 0 var(--fui-primary)}.fui-big-menu__secondary-menu{width:var(--fui-big-menu-secondary-width);height:100vh;position:fixed;top:0;left:var(--fui-big-menu-width);z-index:-1;background-color:var(--fui-big-menu-bg);display:block;border-right:1px solid var(--fui-big-menu-border-color);transform:translate(-100%);padding:var(--fui-spacing-04);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu h2{padding:var(--fui-spacing-04)}.fui-big-menu__secondary-menu__active{transform:translate(0)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-top:var(--fui-spacing-04)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li{list-style:none}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item{display:flex;align-items:center;gap:var(--fui-spacing-04);width:100%;border-radius:var(--fui-border-radius-sm);padding:var(--fui-spacing-04);height:var(--fui-big-menu-secondary-item-height);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item:hover:not(.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active{color:var(--fui-primary);background-color:var(--fui-primary-20)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBigMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-big-menu', imports: [FuiIconComponent, FuiTooltipDirective], template: "<nav class=\"fui-big-menu\" role=\"navigation\" aria-label=\"Main menu\">\n  <ng-content select=\"[top-content]\"></ng-content>\n\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\n    @for (item of menu(); track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          (click)=\"selectMainVoice(item)\"\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\n          [fuiTooltip]=\"item.label\"\n          fuiTooltipTrigger=\"hover\"\n          fuiTooltipPosition=\"right\"\n          fuiTooltipSize=\"sm\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n\n  <div class=\"fui-grow\"></div>\n  <ng-content select=\"[bottom-content]\"></ng-content>\n</nav>\n\n<div\n  class=\"fui-big-menu__secondary-menu\"\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\n  role=\"menu\"\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\n>\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\n    {{ selectedMainVoice()?.label }}\n  </h2>\n\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\n    @for (item of selectedMainVoice()?.children; track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          class=\"fui-big-menu__secondary-menu-item\"\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\n          <span class=\"fui-grow\"></span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}:host{--fui-big-menu-width: 90px;--fui-big-menu-bg: var(--fui-surface-00);--fui-big-menu-border-color: var(--fui-border-color);--fui-big-menu-item-size: 48px;--fui-big-menu-item-border-radius: var(--fui-border-radius-sm);--fui-big-menu-secondary-width: 228px;--fui-big-menu-secondary-item-height: 32px;display:flex;width:var(--fui-big-menu-width);background-color:var(--fui-big-menu-bg);border-right:1px solid var(--fui-big-menu-border-color);position:fixed;top:0;left:0;height:100vh;padding:var(--fui-spacing-04);align-items:center;flex-direction:column;z-index:var(--fui-z-fixed)}.fui-big-menu__list{display:flex;flex-direction:column;gap:var(--fui-spacing-04)}.fui-big-menu__list li{list-style:none}.fui-big-menu__list li button{width:var(--fui-big-menu-item-size);height:var(--fui-big-menu-item-size);display:flex;align-items:center;justify-content:center;border-radius:var(--fui-big-menu-item-border-radius);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__list li button:hover{color:var(--fui-primary);background-color:var(--fui-primary-20)}.fui-big-menu__list li button.fui-big-menu__item--active{background-color:var(--fui-primary);color:var(--fui-primary-text-color);box-shadow:0 2px 14px 0 var(--fui-primary)}.fui-big-menu__secondary-menu{width:var(--fui-big-menu-secondary-width);height:100vh;position:fixed;top:0;left:var(--fui-big-menu-width);z-index:-1;background-color:var(--fui-big-menu-bg);display:block;border-right:1px solid var(--fui-big-menu-border-color);transform:translate(-100%);padding:var(--fui-spacing-04);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu h2{padding:var(--fui-spacing-04)}.fui-big-menu__secondary-menu__active{transform:translate(0)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-top:var(--fui-spacing-04)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li{list-style:none}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item{display:flex;align-items:center;gap:var(--fui-spacing-04);width:100%;border-radius:var(--fui-border-radius-sm);padding:var(--fui-spacing-04);height:var(--fui-big-menu-secondary-item-height);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item:hover:not(.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active{color:var(--fui-primary);background-color:var(--fui-primary-20)}\n"] }]
-        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], itemMenuClick: [{ type: i0.Output, args: ["itemMenuClick"] }], onMouseOver: [{
+            args: [{ selector: 'fui-big-menu', imports: [FuiIconComponent, FuiTooltipDirective], template: "<nav class=\"fui-big-menu\" role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" [attr.aria-label]=\"intl.categoriesAriaLabel\">\r\n    @for (item of menu(); track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          (click)=\"selectMainVoice(item)\"\r\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\r\n          [fuiTooltip]=\"item.label\"\r\n          fuiTooltipTrigger=\"hover\"\r\n          fuiTooltipPosition=\"right\"\r\n          fuiTooltipSize=\"sm\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  <div class=\"fui-grow\"></div>\r\n  <ng-content select=\"[bottom-content]\"></ng-content>\r\n</nav>\r\n\r\n<div\r\n  class=\"fui-big-menu__secondary-menu\"\r\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\r\n>\r\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\r\n    {{ selectedMainVoice()?.label }}\r\n  </h2>\r\n\r\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\r\n    @for (item of selectedMainVoice()?.children; track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          class=\"fui-big-menu__secondary-menu-item\"\r\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\r\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\r\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\r\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\r\n          <span class=\"fui-grow\"></span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-big-menu-width: 90px;--fui-big-menu-bg: var(--fui-surface-00);--fui-big-menu-border-color: var(--fui-border-color);--fui-big-menu-item-size: 48px;--fui-big-menu-item-border-radius: var(--fui-border-radius-sm);--fui-big-menu-secondary-width: 228px;--fui-big-menu-secondary-item-height: 32px;display:flex;width:var(--fui-big-menu-width);background-color:var(--fui-big-menu-bg);border-right:1px solid var(--fui-big-menu-border-color);position:fixed;top:0;left:0;height:100vh;padding:var(--fui-spacing-04);align-items:center;flex-direction:column;z-index:var(--fui-z-fixed)}.fui-big-menu__list{display:flex;flex-direction:column;gap:var(--fui-spacing-04)}.fui-big-menu__list li{list-style:none}.fui-big-menu__list li button{width:var(--fui-big-menu-item-size);height:var(--fui-big-menu-item-size);display:flex;align-items:center;justify-content:center;border-radius:var(--fui-big-menu-item-border-radius);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__list li button:hover{color:var(--fui-primary);background-color:var(--fui-primary-20)}.fui-big-menu__list li button.fui-big-menu__item--active{background-color:var(--fui-primary);color:var(--fui-primary-text-color);box-shadow:0 2px 14px 0 var(--fui-primary)}.fui-big-menu__secondary-menu{width:var(--fui-big-menu-secondary-width);height:100vh;position:fixed;top:0;left:var(--fui-big-menu-width);z-index:-1;background-color:var(--fui-big-menu-bg);display:block;border-right:1px solid var(--fui-big-menu-border-color);transform:translate(-100%);padding:var(--fui-spacing-04);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu h2{padding:var(--fui-spacing-04)}.fui-big-menu__secondary-menu__active{transform:translate(0)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-top:var(--fui-spacing-04)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li{list-style:none}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item{display:flex;align-items:center;gap:var(--fui-spacing-04);width:100%;border-radius:var(--fui-border-radius-sm);padding:var(--fui-spacing-04);height:var(--fui-big-menu-secondary-item-height);color:var(--fui-text-secondary);transition:all var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item:hover:not(.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-big-menu__secondary-menu .fui-big-menu__secondary-menu-list li .fui-big-menu__secondary-menu-item--active{color:var(--fui-primary);background-color:var(--fui-primary-20)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], itemMenuClick: [{ type: i0.Output, args: ["itemMenuClick"] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseLeave: [{
@@ -64,5 +82,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FuiBigMenuComponent };
+export { FuiBigMenuComponent, FuiBigMenuIntl };
 //# sourceMappingURL=raintonic-formaui-components-big-menu.mjs.map

package/fesm2022/raintonic-formaui-components-big-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-big-menu.mjs","sources":["../../../lib/components/big-menu/big-menu.component.ts","../../../lib/components/big-menu/big-menu.component.html","../../../lib/components/big-menu/raintonic-formaui-components-big-menu.ts"],"sourcesContent":["import { Component, computed, HostListener, input, OnInit, output, signal } from '@angular/core';\nimport { BigMenuChild, BigMenuItem } from './big-menu-item.interface';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';\n\n/**\n * @component FuiBigMenuComponent\n * @selector fui-big-menu\n * @description A two-level navigation mega-menu. The primary column displays icon-based\n * main menu items; hovering over or selecting a main item reveals a secondary flyout\n * panel listing its children. Designed for application-level navigation alongside\n * `fui-toolbar` and `fui-sidebar`.\n *\n * @input menu - (required) Array of `BigMenuItem` objects defining the menu structure\n *\n * @output itemMenuClick - Emits `{ item: BigMenuChild; event: MouseEvent }` when a child item is clicked\n *\n * @cssvar --fui-big-menu-width - Width of the primary icon column (default: 90px)\n * @cssvar --fui-big-menu-bg - Background color of both menu panels\n * @cssvar --fui-big-menu-border-color - Border color between panels and edge\n * @cssvar --fui-big-menu-item-size - Width and height of primary menu item icons\n * @cssvar --fui-big-menu-item-border-radius - Border radius of primary item icons\n * @cssvar --fui-big-menu-secondary-width - Width of the secondary flyout panel (default: 228px)\n * @cssvar --fui-big-menu-secondary-item-height - Height of each child item row\n *\n * @example\n * <fui-big-menu [menu]=\"menuItems\" (itemMenuClick)=\"onItemClick($event)\"></fui-big-menu>\n */\n@Component({\n  selector: 'fui-big-menu',\n  imports: [FuiIconComponent, FuiTooltipDirective],\n  templateUrl: './big-menu.component.html',\n  styleUrl: './big-menu.component.scss',\n})\nexport class FuiBigMenuComponent implements OnInit {\n  menu = input.required<BigMenuItem[]>();\n\n  itemMenuClick = output<{ item: BigMenuChild; event: MouseEvent }>();\n  selectedMainVoice = signal<BigMenuItem | null>(null);\n  selectedMainVoiceId = computed(() => this.selectedMainVoice()?.id);\n  showSecondaryMenu = signal(false);\n\n  ngOnInit(): void {\n    this.selectedMainVoice.set(this.menu()[0] ?? null);\n  }\n\n  selectMainVoice(voice: BigMenuItem): void {\n    if (voice.id !== this.selectedMainVoiceId()) {\n      this.selectedMainVoice.set(voice);\n    }\n  }\n\n  @HostListener('mouseover')\n  onMouseOver(): void {\n    this.showSecondaryMenu.set(true);\n  }\n\n  @HostListener('mouseleave')\n  onMouseLeave(): void {\n    this.showSecondaryMenu.set(false);\n  }\n}\n","<nav class=\"fui-big-menu\" role=\"navigation\" aria-label=\"Main menu\">\n  <ng-content select=\"[top-content]\"></ng-content>\n\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\n    @for (item of menu(); track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          (click)=\"selectMainVoice(item)\"\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\n          [fuiTooltip]=\"item.label\"\n          fuiTooltipTrigger=\"hover\"\n          fuiTooltipPosition=\"right\"\n          fuiTooltipSize=\"sm\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n\n  <div class=\"fui-grow\"></div>\n  <ng-content select=\"[bottom-content]\"></ng-content>\n</nav>\n\n<div\n  class=\"fui-big-menu__secondary-menu\"\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\n  role=\"menu\"\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\n>\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\n    {{ selectedMainVoice()?.label }}\n  </h2>\n\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\n    @for (item of selectedMainVoice()?.children; track $index) {\n      <li role=\"none\">\n        <button\n          role=\"menuitem\"\n          type=\"button\"\n          class=\"fui-big-menu__secondary-menu-item\"\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\n        >\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\n          <span class=\"fui-grow\"></span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAOU,mBAAmB,CAAA;AAC9B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAiB;IAEtC,aAAa,GAAG,MAAM,EAA6C;AACnE,IAAA,iBAAiB,GAAG,MAAM,CAAqB,IAAI,wFAAC;AACpD,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAAE,0FAAC;AAClE,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,wFAAC;IAEjC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IACpD;AAEA,IAAA,eAAe,CAAC,KAAkB,EAAA;QAChC,IAAI,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,mBAAmB,EAAE,EAAE;AAC3C,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC;QACnC;IACF;IAGA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC;IAClC;IAGA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC;IACnC;uGA1BW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,eAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClChC,woEAyDA,EAAA,MAAA,EAAA,CAAA,q6IAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BY,gBAAgB,gIAAE,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,oBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIpC,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EACf,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,woEAAA,EAAA,MAAA,EAAA,CAAA,q6IAAA,CAAA,EAAA;;sBAsB/C,YAAY;uBAAC,WAAW;;sBAKxB,YAAY;uBAAC,YAAY;;;AEzD5B;;AAEG;;;;"}
+{"version":3,"file":"raintonic-formaui-components-big-menu.mjs","sources":["../../../lib/components/big-menu/big-menu.intl.ts","../../../lib/components/big-menu/big-menu.component.ts","../../../lib/components/big-menu/big-menu.component.html","../../../lib/components/big-menu/raintonic-formaui-components-big-menu.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiBigMenuIntl extends FuiIntlBase {\r\n  rootAriaLabel = 'Main menu';\r\n  categoriesAriaLabel = 'Menu categories';\r\n}\r\n","import { ChangeDetectorRef, Component, computed, HostListener, inject, input, OnInit, output, signal } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { BigMenuChild, BigMenuItem } from './big-menu-item.interface';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';\r\nimport { FuiBigMenuIntl } from './big-menu.intl';\r\n\r\n/**\r\n * @component FuiBigMenuComponent\r\n * @selector fui-big-menu\r\n * @description A two-level navigation mega-menu. The primary column displays icon-based\r\n * main menu items; hovering over or selecting a main item reveals a secondary flyout\r\n * panel listing its children. Designed for application-level navigation alongside\r\n * `fui-toolbar` and `fui-sidebar`.\r\n *\r\n * @input menu - (required) Array of `BigMenuItem` objects defining the menu structure\r\n *\r\n * @output itemMenuClick - Emits `{ item: BigMenuChild; event: MouseEvent }` when a child item is clicked\r\n *\r\n * @cssvar --fui-big-menu-width - Width of the primary icon column (default: 90px)\r\n * @cssvar --fui-big-menu-bg - Background color of both menu panels\r\n * @cssvar --fui-big-menu-border-color - Border color between panels and edge\r\n * @cssvar --fui-big-menu-item-size - Width and height of primary menu item icons\r\n * @cssvar --fui-big-menu-item-border-radius - Border radius of primary item icons\r\n * @cssvar --fui-big-menu-secondary-width - Width of the secondary flyout panel (default: 228px)\r\n * @cssvar --fui-big-menu-secondary-item-height - Height of each child item row\r\n *\r\n * @example\r\n * <fui-big-menu [menu]=\"menuItems\" (itemMenuClick)=\"onItemClick($event)\"></fui-big-menu>\r\n */\r\n@Component({\r\n  selector: 'fui-big-menu',\r\n  imports: [FuiIconComponent, FuiTooltipDirective],\r\n  templateUrl: './big-menu.component.html',\r\n  styleUrl: './big-menu.component.scss',\r\n})\r\nexport class FuiBigMenuComponent implements OnInit {\r\n  readonly intl = inject(FuiBigMenuIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  menu = input.required<BigMenuItem[]>();\r\n\r\n  itemMenuClick = output<{ item: BigMenuChild; event: MouseEvent }>();\r\n  selectedMainVoice = signal<BigMenuItem | null>(null);\r\n  selectedMainVoiceId = computed(() => this.selectedMainVoice()?.id);\r\n  showSecondaryMenu = signal(false);\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.selectedMainVoice.set(this.menu()[0] ?? null);\r\n  }\r\n\r\n  selectMainVoice(voice: BigMenuItem): void {\r\n    if (voice.id !== this.selectedMainVoiceId()) {\r\n      this.selectedMainVoice.set(voice);\r\n    }\r\n  }\r\n\r\n  @HostListener('mouseover')\r\n  onMouseOver(): void {\r\n    this.showSecondaryMenu.set(true);\r\n  }\r\n\r\n  @HostListener('mouseleave')\r\n  onMouseLeave(): void {\r\n    this.showSecondaryMenu.set(false);\r\n  }\r\n}\r\n","<nav class=\"fui-big-menu\" role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" [attr.aria-label]=\"intl.categoriesAriaLabel\">\r\n    @for (item of menu(); track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          (click)=\"selectMainVoice(item)\"\r\n          [class.fui-big-menu__item--active]=\"item.id === selectedMainVoiceId()\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [attr.aria-current]=\"item.id === selectedMainVoiceId() ? 'true' : null\"\r\n          [fuiTooltip]=\"item.label\"\r\n          fuiTooltipTrigger=\"hover\"\r\n          fuiTooltipPosition=\"right\"\r\n          fuiTooltipSize=\"sm\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"md\" aria-hidden=\"true\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  <div class=\"fui-grow\"></div>\r\n  <ng-content select=\"[bottom-content]\"></ng-content>\r\n</nav>\r\n\r\n<div\r\n  class=\"fui-big-menu__secondary-menu\"\r\n  [class.fui-big-menu__secondary-menu__active]=\"showSecondaryMenu()\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"selectedMainVoice()?.label\"\r\n>\r\n  <h2 class=\"fui-text-md fui-font-medium fui-text-color-primary\" id=\"fui-big-menu-secondary-heading\">\r\n    {{ selectedMainVoice()?.label }}\r\n  </h2>\r\n\r\n  <ul class=\"fui-big-menu__secondary-menu-list\" role=\"menu\" aria-labelledby=\"fui-big-menu-secondary-heading\">\r\n    @for (item of selectedMainVoice()?.children; track $index) {\r\n      <li role=\"none\">\r\n        <button\r\n          role=\"menuitem\"\r\n          type=\"button\"\r\n          class=\"fui-big-menu__secondary-menu-item\"\r\n          (click)=\"itemMenuClick.emit({ item, event: $event })\"\r\n          [class.fui-big-menu__secondary-menu-item--active]=\"item.isActive ?? false\"\r\n          [attr.aria-current]=\"item.isActive ? 'page' : null\"\r\n        >\r\n          <fui-icon [name]=\"item.icon\" size=\"sm\" aria-hidden=\"true\"></fui-icon>\r\n          <span class=\"fui-text-sm\">{{ item.label }}</span>\r\n          <span class=\"fui-grow\"></span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAIM,MAAO,cAAe,SAAQ,WAAW,CAAA;IAC7C,aAAa,GAAG,WAAW;IAC3B,mBAAmB,GAAG,iBAAiB;uGAF5B,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAd,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cADD,MAAM,EAAA,CAAA;;2FACnB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACIlC;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAOU,mBAAmB,CAAA;AACrB,IAAA,IAAI,GAAG,MAAM,CAAC,cAAc,CAAC;AACrB,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEjD,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAiB;IAEtC,aAAa,GAAG,MAAM,EAA6C;AACnE,IAAA,iBAAiB,GAAG,MAAM,CAAqB,IAAI,wFAAC;AACpD,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAAE,0FAAC;AAClE,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,wFAAC;AAEjC,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,MAAK,EAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAC7F;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IACpD;AAEA,IAAA,eAAe,CAAC,KAAkB,EAAA;QAChC,IAAI,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,mBAAmB,EAAE,EAAE;AAC3C,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC;QACnC;IACF;IAGA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC;IAClC;IAGA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC;IACnC;uGAjCW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,eAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpChC,0xEAyDA,EAAA,MAAA,EAAA,CAAA,+hJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDzBY,gBAAgB,gIAAE,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,oBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIpC,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EACf,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,0xEAAA,EAAA,MAAA,EAAA,CAAA,+hJAAA,CAAA,EAAA;;sBA6B/C,YAAY;uBAAC,WAAW;;sBAKxB,YAAY;uBAAC,YAAY;;;AElE5B;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-breadcrumb.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, effect } from '@angular/core';
+import { InjectionToken, input, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, inject, ChangeDetectorRef, contentChildren, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
+import { FuiIntlBase } from '@raintonic/formaui/core';
 
 const FUI_BREADCRUMB = new InjectionToken('FUI_BREADCRUMB');
 
@@ -12,7 +14,7 @@ class FuiBreadcrumbItemComponent {
     _separator = signal('/', ...(ngDevMode ? [{ debugName: "_separator" }] : /* istanbul ignore next */ []));
     isLink = computed(() => this.routerLink() != null && !this.isLast() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBreadcrumbItemComponent, isStandalone: true, selector: "fui-breadcrumb-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-breadcrumb-item--active": "isLast()", "class.fui-breadcrumb-item--disabled": "disabled()", "attr.aria-current": "isLast() ? \"page\" : null" }, classAttribute: "fui-breadcrumb-item" }, ngImport: i0, template: "<li class=\"fui-breadcrumb-item__wrapper\">\n  @if (isLink()) {\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\n  } @else {\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\n  }\n</li>\n@if (!isLast()) {\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiBreadcrumbItemComponent, isStandalone: true, selector: "fui-breadcrumb-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-breadcrumb-item--active": "isLast()", "class.fui-breadcrumb-item--disabled": "disabled()", "attr.aria-current": "isLast() ? \"page\" : null" }, classAttribute: "fui-breadcrumb-item" }, ngImport: i0, template: "<li class=\"fui-breadcrumb-item__wrapper\">\r\n  @if (isLink()) {\r\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\r\n  } @else {\r\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\r\n  }\r\n</li>\r\n@if (!isLast()) {\r\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbItemComponent, decorators: [{
             type: Component,
@@ -21,12 +23,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-breadcrumb-item--active]': 'isLast()',
                         '[class.fui-breadcrumb-item--disabled]': 'disabled()',
                         '[attr.aria-current]': 'isLast() ? "page" : null',
-                    }, template: "<li class=\"fui-breadcrumb-item__wrapper\">\n  @if (isLink()) {\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\n  } @else {\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\n  }\n</li>\n@if (!isLast()) {\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"] }]
+                    }, template: "<li class=\"fui-breadcrumb-item__wrapper\">\r\n  @if (isLink()) {\r\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\r\n  } @else {\r\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\r\n  }\r\n</li>\r\n@if (!isLast()) {\r\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"] }]
         }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+class FuiBreadcrumbIntl extends FuiIntlBase {
+    rootAriaLabel = 'Breadcrumb';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class FuiBreadcrumbComponent {
+    intl = inject(FuiBreadcrumbIntl);
+    _cdr = inject(ChangeDetectorRef);
     separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     items = contentChildren(FuiBreadcrumbItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
@@ -36,20 +50,23 @@ class FuiBreadcrumbComponent {
                 item._separator.set(this.separator());
             });
         });
+        this.intl.changes
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => { this._cdr.markForCheck(); });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiBreadcrumbComponent, isStandalone: true, selector: "fui-breadcrumb", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fui-breadcrumb" }, providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }], queries: [{ propertyName: "items", predicate: FuiBreadcrumbItemComponent, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"fui-breadcrumb__list\">\n    <ng-content></ng-content>\n  </ol>\n</nav>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiBreadcrumbComponent, isStandalone: true, selector: "fui-breadcrumb", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fui-breadcrumb" }, providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }], queries: [{ propertyName: "items", predicate: FuiBreadcrumbItemComponent, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel() ?? intl.rootAriaLabel\">\r\n  <ol class=\"fui-breadcrumb__list\">\r\n    <ng-content></ng-content>\r\n  </ol>\r\n</nav>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-breadcrumb', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-breadcrumb',
-                    }, providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }], template: "<nav [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"fui-breadcrumb__list\">\n    <ng-content></ng-content>\n  </ol>\n</nav>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"] }]
+                    }, providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }], template: "<nav [attr.aria-label]=\"ariaLabel() ?? intl.rootAriaLabel\">\r\n  <ol class=\"fui-breadcrumb__list\">\r\n    <ng-content></ng-content>\r\n  </ol>\r\n</nav>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-breadcrumb{display:block}.fui-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--fui-gap-4, .25rem)}.fui-breadcrumb-item{display:contents}.fui-breadcrumb-item__wrapper{display:flex;align-items:center}.fui-breadcrumb-item__link{color:var(--fui-primary);text-decoration:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-breadcrumb-item__link:hover{color:var(--fui-primary-80);text-decoration:underline}.fui-breadcrumb-item__link:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;border-radius:var(--fui-border-radius-sm, 8px)}.fui-breadcrumb-item__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-breadcrumb-item--active .fui-breadcrumb-item__text{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-breadcrumb-item--disabled .fui-breadcrumb-item__text{color:var(--fui-text-disabled)}.fui-breadcrumb-item__separator{display:flex;align-items:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none;padding:0 var(--fui-gap-4, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiBreadcrumbItemComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FUI_BREADCRUMB, FuiBreadcrumbComponent, FuiBreadcrumbItemComponent };
+export { FUI_BREADCRUMB, FuiBreadcrumbComponent, FuiBreadcrumbIntl, FuiBreadcrumbItemComponent };
 //# sourceMappingURL=raintonic-formaui-components-breadcrumb.mjs.map

package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-breadcrumb.mjs","sources":["../../../lib/components/breadcrumb/breadcrumb.types.ts","../../../lib/components/breadcrumb/breadcrumb-item.component.ts","../../../lib/components/breadcrumb/breadcrumb-item.component.html","../../../lib/components/breadcrumb/breadcrumb.component.ts","../../../lib/components/breadcrumb/breadcrumb.component.html","../../../lib/components/breadcrumb/raintonic-formaui-components-breadcrumb.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const FUI_BREADCRUMB = new InjectionToken<unknown>('FUI_BREADCRUMB');\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  input,\n  signal,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n  selector: 'fui-breadcrumb-item',\n  standalone: true,\n  imports: [RouterLink],\n  templateUrl: './breadcrumb-item.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-breadcrumb-item',\n    '[class.fui-breadcrumb-item--active]': 'isLast()',\n    '[class.fui-breadcrumb-item--disabled]': 'disabled()',\n    '[attr.aria-current]': 'isLast() ? \"page\" : null',\n  },\n})\nexport class FuiBreadcrumbItemComponent {\n  readonly routerLink = input<string | unknown[] | null>(null);\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n  // Set by parent breadcrumb\n  readonly isLast = signal(false);\n  readonly _separator = signal('/');\n\n  readonly isLink = computed(() => this.routerLink() != null && !this.isLast() && !this.disabled());\n}\n","<li class=\"fui-breadcrumb-item__wrapper\">\n  @if (isLink()) {\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\n  } @else {\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\n  }\n</li>\n@if (!isLast()) {\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, contentChildren, effect, input } from '@angular/core';\nimport { FUI_BREADCRUMB } from './breadcrumb.types';\nimport { FuiBreadcrumbItemComponent } from './breadcrumb-item.component';\n\n@Component({\n  selector: 'fui-breadcrumb',\n  standalone: true,\n  imports: [],\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-breadcrumb',\n  },\n  providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }],\n})\nexport class FuiBreadcrumbComponent {\n  readonly separator = input('/');\n  readonly ariaLabel = input('Breadcrumb', { alias: 'aria-label' });\n\n  readonly items = contentChildren(FuiBreadcrumbItemComponent);\n\n  constructor() {\n    effect(() => {\n      const items = this.items();\n      items.forEach((item, idx) => {\n        item.isLast.set(idx === items.length - 1);\n        item._separator.set(this.separator());\n      });\n    });\n  }\n}\n","<nav [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"fui-breadcrumb__list\">\n    <ng-content></ng-content>\n  </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-breadcrumb.mjs","sources":["../../../lib/components/breadcrumb/breadcrumb.types.ts","../../../lib/components/breadcrumb/breadcrumb-item.component.ts","../../../lib/components/breadcrumb/breadcrumb-item.component.html","../../../lib/components/breadcrumb/breadcrumb.intl.ts","../../../lib/components/breadcrumb/breadcrumb.component.ts","../../../lib/components/breadcrumb/breadcrumb.component.html","../../../lib/components/breadcrumb/raintonic-formaui-components-breadcrumb.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport const FUI_BREADCRUMB = new InjectionToken<unknown>('FUI_BREADCRUMB');\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'fui-breadcrumb-item',\r\n  standalone: true,\r\n  imports: [RouterLink],\r\n  templateUrl: './breadcrumb-item.component.html',\r\n  styleUrls: ['./breadcrumb.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-breadcrumb-item',\r\n    '[class.fui-breadcrumb-item--active]': 'isLast()',\r\n    '[class.fui-breadcrumb-item--disabled]': 'disabled()',\r\n    '[attr.aria-current]': 'isLast() ? \"page\" : null',\r\n  },\r\n})\r\nexport class FuiBreadcrumbItemComponent {\r\n  readonly routerLink = input<string | unknown[] | null>(null);\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n  // Set by parent breadcrumb\r\n  readonly isLast = signal(false);\r\n  readonly _separator = signal('/');\r\n\r\n  readonly isLink = computed(() => this.routerLink() != null && !this.isLast() && !this.disabled());\r\n}\r\n","<li class=\"fui-breadcrumb-item__wrapper\">\r\n  @if (isLink()) {\r\n    <a class=\"fui-breadcrumb-item__link\" [routerLink]=\"routerLink()\"><ng-content></ng-content></a>\r\n  } @else {\r\n    <span class=\"fui-breadcrumb-item__text\"><ng-content></ng-content></span>\r\n  }\r\n</li>\r\n@if (!isLast()) {\r\n  <li class=\"fui-breadcrumb-item__separator\" aria-hidden=\"true\">{{ _separator() }}</li>\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiBreadcrumbIntl extends FuiIntlBase {\r\n  rootAriaLabel = 'Breadcrumb';\r\n}\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewEncapsulation, contentChildren, effect, inject, input } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FUI_BREADCRUMB } from './breadcrumb.types';\r\nimport { FuiBreadcrumbItemComponent } from './breadcrumb-item.component';\r\nimport { FuiBreadcrumbIntl } from './breadcrumb.intl';\r\n\r\n@Component({\r\n  selector: 'fui-breadcrumb',\r\n  standalone: true,\r\n  imports: [],\r\n  templateUrl: './breadcrumb.component.html',\r\n  styleUrls: ['./breadcrumb.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-breadcrumb',\r\n  },\r\n  providers: [{ provide: FUI_BREADCRUMB, useExisting: FuiBreadcrumbComponent }],\r\n})\r\nexport class FuiBreadcrumbComponent {\r\n  readonly intl = inject(FuiBreadcrumbIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  readonly separator = input('/');\r\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\r\n\r\n  readonly items = contentChildren(FuiBreadcrumbItemComponent);\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const items = this.items();\r\n      items.forEach((item, idx) => {\r\n        item.isLast.set(idx === items.length - 1);\r\n        item._separator.set(this.separator());\r\n      });\r\n    });\r\n\r\n    this.intl.changes\r\n      .pipe(takeUntilDestroyed())\r\n      .subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n}\r\n","<nav [attr.aria-label]=\"ariaLabel() ?? intl.rootAriaLabel\">\r\n  <ol class=\"fui-breadcrumb__list\">\r\n    <ng-content></ng-content>\r\n  </ol>\r\n</nav>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}