@raintonic/formaui 0.2.1 → 0.3.0

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\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\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)}: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\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\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)}: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';\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\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  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  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\" aria-label=\"Main menu\">\r\n  <ng-content select=\"[top-content]\"></ng-content>\r\n\r\n  <ul class=\"fui-big-menu__list\" role=\"menubar\" aria-label=\"Menu categories\">\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":";;;;;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,0vEAyDA,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,0vEAAA,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":"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"}

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\">\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)}.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\">\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)}.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()\">\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)}.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()\">\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)}.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';\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 { ChangeDetectionStrategy, Component, ViewEncapsulation, contentChildren, effect, input } from '@angular/core';\r\nimport { FUI_BREADCRUMB } from './breadcrumb.types';\r\nimport { FuiBreadcrumbItemComponent } from './breadcrumb-item.component';\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 separator = input('/');\r\n  readonly ariaLabel = input('Breadcrumb', { 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}\r\n","<nav [attr.aria-label]=\"ariaLabel()\">\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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"}
+{"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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"}

package/fesm2022/raintonic-formaui-components-button-group.mjs

@@ -18,9 +18,9 @@ import { input, inject, ElementRef, Renderer2, effect, ViewEncapsulation, Change
  * ### Basic Button Group
  * ```html
  * <fui-button-group>
- *   <button fuiButton variant="outline">Left</button>
- *   <button fuiButton variant="outline">Center</button>
- *   <button fuiButton variant="outline">Right</button>
+ *   <button fuiButton variant="secondary">Left</button>
+ *   <button fuiButton variant="secondary">Center</button>
+ *   <button fuiButton variant="secondary">Right</button>
  * </fui-button-group>
  * ```
  *
@@ -34,9 +34,9 @@ import { input, inject, ElementRef, Renderer2, effect, ViewEncapsulation, Change
  *   imports: [FuiButtonGroupComponent, FuiButtonDirective],
  *   template: `
  *     <fui-button-group>
- *       <button fuiButton variant="outline">Option 1</button>
- *       <button fuiButton variant="outline">Option 2</button>
- *       <button fuiButton variant="outline">Option 3</button>
+ *       <button fuiButton variant="secondary">Option 1</button>
+ *       <button fuiButton variant="secondary">Option 2</button>
+ *       <button fuiButton variant="secondary">Option 3</button>
  *     </fui-button-group>
  *   `
  * })

package/fesm2022/raintonic-formaui-components-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-button-group.mjs","sources":["../../../lib/components/button-group/button-group.component.ts","../../../lib/components/button-group/raintonic-formaui-components-button-group.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  AfterContentInit,\r\n  ElementRef,\r\n  Renderer2,\r\n  inject,\r\n  effect,\r\n  input,\r\n} from '@angular/core';\r\n\r\n/**\r\n * # Button Group Component\r\n *\r\n * A container component that groups multiple buttons together, creating a unified\r\n * visual element with connected borders. Follows Carbon Design System patterns.\r\n *\r\n * ## Features\r\n * - Groups multiple buttons into a single visual unit\r\n * - Removes internal border-radius, keeping only the extremities rounded\r\n * - Surface-02 background with small padding\r\n * - Automatically handles button border-radius for first and last buttons\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Button Group\r\n * ```html\r\n * <fui-button-group>\r\n *   <button fuiButton variant=\"outline\">Left</button>\r\n *   <button fuiButton variant=\"outline\">Center</button>\r\n *   <button fuiButton variant=\"outline\">Right</button>\r\n * </fui-button-group>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiButtonGroupComponent } from '@raintonic/formaui/components/button-group';\r\n * import { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiButtonGroupComponent, FuiButtonDirective],\r\n *   template: `\r\n *     <fui-button-group>\r\n *       <button fuiButton variant=\"outline\">Option 1</button>\r\n *       <button fuiButton variant=\"outline\">Option 2</button>\r\n *       <button fuiButton variant=\"outline\">Option 3</button>\r\n *     </fui-button-group>\r\n *   `\r\n * })\r\n * export class MyComponent {}\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-button-group',\r\n  standalone: true,\r\n  template: `<ng-content></ng-content>`,\r\n  styleUrls: ['./button-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-button-group',\r\n    role: 'group',\r\n    '[attr.aria-label]': 'ariaLabel()',\r\n  },\r\n})\r\nexport class FuiButtonGroupComponent implements AfterContentInit {\r\n  /**\r\n   * Accessible label for the button group\r\n   */\r\n  readonly ariaLabel = input<string | undefined>(undefined);\r\n\r\n  private readonly _elementRef = inject(ElementRef);\r\n  private readonly _renderer = inject(Renderer2);\r\n\r\n  constructor() {\r\n    // Set up an effect to handle dynamic button changes\r\n    effect(() => {\r\n      this._updateButtonStyles();\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this._updateButtonStyles();\r\n  }\r\n\r\n  private _updateButtonStyles(): void {\r\n    const hostElement = this._elementRef.nativeElement as HTMLElement;\r\n    const buttons = hostElement.querySelectorAll('[fuiButton]');\r\n\r\n    buttons.forEach((button, index) => {\r\n      // Remove all position classes first\r\n      this._renderer.removeClass(button, 'fui-button-group__button--first');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--middle');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--last');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--only');\r\n\r\n      // Add appropriate class based on position\r\n      if (buttons.length === 1) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--only');\r\n      } else if (index === 0) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--first');\r\n      } else if (index === buttons.length - 1) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--last');\r\n      } else {\r\n        this._renderer.addClass(button, 'fui-button-group__button--middle');\r\n      }\r\n    });\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;MAcU,uBAAuB,CAAA;AAClC;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC;AAExC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE9C,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,mBAAmB,EAAE;AAC5B,QAAA,CAAC,CAAC;IACJ;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;IAC5B;IAEQ,mBAAmB,GAAA;AACzB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAA4B;QACjE,MAAM,OAAO,GAAG,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC;QAE3D,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;;YAEhC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACrE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACtE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;;AAGpE,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;AAAO,iBAAA,IAAI,KAAK,KAAK,CAAC,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACpE;iBAAO,IAAI,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;iBAAO;gBACL,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACrE;AACF,QAAA,CAAC,CAAC;IACJ;uGA1CW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,6VAVxB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU1B,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAbnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EACN,CAAA,yBAAA,CAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA;;;ACjEH;;AAEG;;;;"}
+{"version":3,"file":"raintonic-formaui-components-button-group.mjs","sources":["../../../lib/components/button-group/button-group.component.ts","../../../lib/components/button-group/raintonic-formaui-components-button-group.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  AfterContentInit,\r\n  ElementRef,\r\n  Renderer2,\r\n  inject,\r\n  effect,\r\n  input,\r\n} from '@angular/core';\r\n\r\n/**\r\n * # Button Group Component\r\n *\r\n * A container component that groups multiple buttons together, creating a unified\r\n * visual element with connected borders. Follows Carbon Design System patterns.\r\n *\r\n * ## Features\r\n * - Groups multiple buttons into a single visual unit\r\n * - Removes internal border-radius, keeping only the extremities rounded\r\n * - Surface-02 background with small padding\r\n * - Automatically handles button border-radius for first and last buttons\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Button Group\r\n * ```html\r\n * <fui-button-group>\r\n *   <button fuiButton variant=\"secondary\">Left</button>\r\n *   <button fuiButton variant=\"secondary\">Center</button>\r\n *   <button fuiButton variant=\"secondary\">Right</button>\r\n * </fui-button-group>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiButtonGroupComponent } from '@raintonic/formaui/components/button-group';\r\n * import { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiButtonGroupComponent, FuiButtonDirective],\r\n *   template: `\r\n *     <fui-button-group>\r\n *       <button fuiButton variant=\"secondary\">Option 1</button>\r\n *       <button fuiButton variant=\"secondary\">Option 2</button>\r\n *       <button fuiButton variant=\"secondary\">Option 3</button>\r\n *     </fui-button-group>\r\n *   `\r\n * })\r\n * export class MyComponent {}\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-button-group',\r\n  standalone: true,\r\n  template: `<ng-content></ng-content>`,\r\n  styleUrls: ['./button-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-button-group',\r\n    role: 'group',\r\n    '[attr.aria-label]': 'ariaLabel()',\r\n  },\r\n})\r\nexport class FuiButtonGroupComponent implements AfterContentInit {\r\n  /**\r\n   * Accessible label for the button group\r\n   */\r\n  readonly ariaLabel = input<string | undefined>(undefined);\r\n\r\n  private readonly _elementRef = inject(ElementRef);\r\n  private readonly _renderer = inject(Renderer2);\r\n\r\n  constructor() {\r\n    // Set up an effect to handle dynamic button changes\r\n    effect(() => {\r\n      this._updateButtonStyles();\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this._updateButtonStyles();\r\n  }\r\n\r\n  private _updateButtonStyles(): void {\r\n    const hostElement = this._elementRef.nativeElement as HTMLElement;\r\n    const buttons = hostElement.querySelectorAll('[fuiButton]');\r\n\r\n    buttons.forEach((button, index) => {\r\n      // Remove all position classes first\r\n      this._renderer.removeClass(button, 'fui-button-group__button--first');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--middle');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--last');\r\n      this._renderer.removeClass(button, 'fui-button-group__button--only');\r\n\r\n      // Add appropriate class based on position\r\n      if (buttons.length === 1) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--only');\r\n      } else if (index === 0) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--first');\r\n      } else if (index === buttons.length - 1) {\r\n        this._renderer.addClass(button, 'fui-button-group__button--last');\r\n      } else {\r\n        this._renderer.addClass(button, 'fui-button-group__button--middle');\r\n      }\r\n    });\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;MAcU,uBAAuB,CAAA;AAClC;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC;AAExC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE9C,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,mBAAmB,EAAE;AAC5B,QAAA,CAAC,CAAC;IACJ;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;IAC5B;IAEQ,mBAAmB,GAAA;AACzB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAA4B;QACjE,MAAM,OAAO,GAAG,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC;QAE3D,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;;YAEhC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACrE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACtE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;;AAGpE,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;AAAO,iBAAA,IAAI,KAAK,KAAK,CAAC,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACpE;iBAAO,IAAI,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;iBAAO;gBACL,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACrE;AACF,QAAA,CAAC,CAAC;IACJ;uGA1CW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,6VAVxB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU1B,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAbnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EACN,CAAA,yBAAA,CAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA;;;ACjEH;;AAEG;;;;"}

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

@@ -1,7 +1,14 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, computed, inject, ElementRef, Renderer2, effect, HostListener, Directive } from '@angular/core';
 
-const FUI_BUTTON_VARIANTS = ['primary', 'secondary', 'ghost', 'outline', 'danger', 'link', 'icon'];
+const FUI_BUTTON_VARIANTS = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'tertiary-violet',
+    'link',
+    'destructive',
+];
 const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
 /**
  * # Button Directive
@@ -10,8 +17,8 @@ const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
  * Follows Carbon Design System patterns with full accessibility support.
  *
  * ## Features
- * - Multiple variants: primary, secondary,ghost, outline, danger, link
- * - Six sizes: sm, md, lg, xl, 2xl, field
+ * - Multiple variants: primary, secondary, tertiary, tertiary-violet, link, destructive
+ * - Five sizes: sm, md, lg, xl, 2xl
  * - Full accessibility support (ARIA attributes, keyboard navigation)
  * - Loading and disabled states
  * - Icon support with proper spacing
@@ -21,7 +28,7 @@ const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
  *
  * ### Link Button
  * ```html
- * <a fuiButton href="/dashboard" variant="ghost">Go to Dashboard</a>
+ * <a fuiButton href="/dashboard" variant="tertiary">Go to Dashboard</a>
  * ```
  *
  * @example
@@ -104,6 +111,7 @@ class FuiButtonDirective {
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     _elementRef = inject(ElementRef);
     _renderer = inject(Renderer2);
+    _leadingSlot = null;
     // Element kind guards
     get isButton() {
         return this._elementRef.nativeElement.tagName.toLowerCase() === 'button';
@@ -115,19 +123,32 @@ class FuiButtonDirective {
         // Manage loading spinner and anchor href disabled-state together
         effect(() => {
             if (this.loading()) {
-                this._addLoadingSpinner();
+                this._fillLeadingSlot();
             }
             else {
-                this._removeLoadingSpinner();
+                this._clearLeadingSlot();
             }
             this._syncAnchorHrefDisabledState();
         });
+        // Keep the native `type` attribute in sync with the `type` input signal.
+        // No-op for anchor elements (guarded by `this.isButton`).
+        effect(() => {
+            if (this.isButton) {
+                this._renderer.setAttribute(this._elementRef.nativeElement, 'type', this.type());
+            }
+        });
     }
     ngAfterViewInit() {
-        // Ensure explicit type for native buttons to prevent accidental form submit
         const el = this._elementRef.nativeElement;
-        if (this.isButton) {
-            this._renderer.setAttribute(el, 'type', this.type());
+        // Create the permanent leading slot (spinner target) as the first child.
+        const slot = this._renderer.createElement('span');
+        this._renderer.addClass(slot, 'fui-button__leading');
+        this._renderer.setAttribute(slot, 'aria-hidden', 'true');
+        this._renderer.insertBefore(el, slot, el.firstChild);
+        this._leadingSlot = slot;
+        // If loading was true before view init, fill the slot now.
+        if (this.loading()) {
+            this._fillLeadingSlot();
         }
     }
     onClick(event) {
@@ -136,6 +157,7 @@ class FuiButtonDirective {
             event.stopPropagation();
             return;
         }
+        this._spawnRipple(event);
     }
     onKeydown(event) {
         if (this.disabled() || this.loading()) {
@@ -163,25 +185,49 @@ class FuiButtonDirective {
             this._elementRef.nativeElement.click();
         }
     }
-    _addLoadingSpinner() {
-        // Prevent duplicate spinner nodes
-        if (this._elementRef.nativeElement.querySelector('.fui-icon'))
+    _fillLeadingSlot() {
+        if (!this._leadingSlot)
+            return;
+        // Idempotence guard
+        if (this._leadingSlot.querySelector('.fui-button__spinner'))
             return;
         const spinner = this._renderer.createElement('fui-icon');
         this._renderer.addClass(spinner, 'fui-button__spinner');
         this._renderer.setAttribute(spinner, 'aria-hidden', 'true');
-        // Add spinner icon
         const spinnerIcon = this._renderer.createElement('span');
         this._renderer.addClass(spinnerIcon, 'fui-button__spinner-icon');
         this._renderer.appendChild(spinner, spinnerIcon);
-        this._renderer.appendChild(this._elementRef.nativeElement, spinner);
+        this._renderer.appendChild(this._leadingSlot, spinner);
     }
-    _removeLoadingSpinner() {
-        const spinner = this._elementRef.nativeElement.querySelector('.fui-button__spinner');
+    _clearLeadingSlot() {
+        if (!this._leadingSlot)
+            return;
+        const spinner = this._leadingSlot.querySelector('.fui-button__spinner');
         if (spinner) {
-            this._renderer.removeChild(this._elementRef.nativeElement, spinner);
+            this._renderer.removeChild(this._leadingSlot, spinner);
         }
     }
+    _spawnRipple(event) {
+        const host = this._elementRef.nativeElement;
+        const rect = host.getBoundingClientRect();
+        // Diameter covers the farthest corner from the click point
+        const size = Math.max(rect.width, rect.height) * 2;
+        // Fallback to center for keyboard-synthesized clicks (clientX/Y === 0)
+        const hasCoords = event.clientX !== 0 || event.clientY !== 0;
+        const x = (hasCoords ? event.clientX - rect.left : rect.width / 2) - size / 2;
+        const y = (hasCoords ? event.clientY - rect.top : rect.height / 2) - size / 2;
+        const ripple = this._renderer.createElement('span');
+        this._renderer.addClass(ripple, 'fui-button__ripple');
+        this._renderer.setAttribute(ripple, 'aria-hidden', 'true');
+        this._renderer.setStyle(ripple, 'width', `${size}px`);
+        this._renderer.setStyle(ripple, 'height', `${size}px`);
+        this._renderer.setStyle(ripple, 'left', `${x}px`);
+        this._renderer.setStyle(ripple, 'top', `${y}px`);
+        ripple.addEventListener('animationend', () => {
+            this._renderer.removeChild(host, ripple);
+        }, { once: true });
+        this._renderer.appendChild(host, ripple);
+    }
     _syncAnchorHrefDisabledState() {
         const el = this._elementRef.nativeElement;
         if (!this.isAnchor)