npm - @raintonic/formaui - Versions diffs - 0.3.1 → 0.9.0 - Mend

@raintonic/formaui 0.3.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (238) hide show

package/types/raintonic-formaui-services-theme.d.ts CHANGED Viewed

@@ -1,86 +1,12 @@
 import * as i0 from '@angular/core';
 import { Signal } from '@angular/core';
-/**
- * Configuration interface for theme customization
- */
-interface FuiThemeConfig {
-    /** Primary color for the theme (hex, rgb, hsl) */
-    primary?: string;
-    /** Secondary color for the theme (hex, rgb, hsl) */
-    secondary?: string;
-    /** Tertiary color for the theme (hex, rgb, hsl) */
-    tertiary?: string;
-}
-/**
- * Available theme modes
- */
+/** Theme mode. `auto` segue `prefers-color-scheme`. */
 type FuiThemeMode = 'light' | 'dark' | 'auto';
 /**
- * # FuiTheme Service
- *
- * Central service for managing theme configuration and mode switching.
- * Provides runtime theme customization with CSS variables and automatic palette generation.
- *
- * ## Features
- * - Runtime theme customization
- * - Light/dark/auto mode switching
- * - Automatic color palette generation
- * - CSS variables-based theming
- * - Persistent theme preferences
- * - System theme detection
- *
- * ## Usage
- *
- * ### Basic Theme Setup
- * ```typescript
- * import { FuiThemeService } from '@raintonic/formaui/services/theme';
- *
- * constructor(private themeService: FuiThemeService) {
- *   // Set custom theme colors
- *   this.themeService.setTheme({
- *     primary: '#007bff',
- *     secondary: '#6c757d',
- *     tertiary: '#28a745'
- *   });
- * }
- * ```
- *
- * ### Theme Mode Switching
- * ```typescript
- * // Switch to dark mode
- * this.themeService.setMode('dark');
- *
- * // Switch to auto (follows system preference)
- * this.themeService.setMode('auto');
- *
- * // Get current mode
- * const currentMode = this.themeService.currentMode();
- * const isDark = this.themeService.isDark();
- * ```
- *
- * @example
- * ```typescript
- * import { Component, effect } from '@angular/core';
- * import { FuiThemeService } from '@raintonic/formaui/services/theme';
- *
- * @Component({
- *   template: `
- *     <div class="theme-controls">
- *       <button fuiButton (click)="setLightMode()">Light</button>
- *       <button fuiButton (click)="setDarkMode()">Dark</button>
- *       <button fuiButton (click)="setAutoMode()">Auto</button>
- *     </div>
- *   `
- * })
- * export class ThemeControlsComponent {
- *   constructor(public themeService: FuiThemeService) {}
- *
- *   setLightMode() { this.themeService.setMode('light'); }
- *   setDarkMode() { this.themeService.setMode('dark'); }
- *   setAutoMode() { this.themeService.setMode('auto'); }
- * }
- * ```
+ * FuiThemeService — gestione del mode tema (zoneless, signals).
+ * Applica il tema via attributo `data-theme="light|dark"` su `<html>`.
+ * Default `auto` (system-driven via prefers-color-scheme), override persistito in localStorage.
  */
 declare class FuiThemeService {
     private readonly _destroyRef;
@@ -88,39 +14,23 @@ declare class FuiThemeService {
     private readonly _platformId;
     private readonly _currentMode;
     private readonly _isDark;
+    /** Mode corrente (`light|dark|auto`). */
     readonly currentMode: Signal<FuiThemeMode>;
+    /** Dark risolto (true se il tema applicato è dark). */
     readonly isDark: Signal<boolean>;
     constructor();
-    /**
-     * Initialize theme with custom colors
-     */
-    initTheme(config?: FuiThemeConfig): void;
-    /**
-     * Set theme colors dynamically
-     */
-    setTheme(config?: FuiThemeConfig): void;
-    /**
-     * Set theme mode
-     */
-    setThemeMode(mode: FuiThemeMode): void;
-    /**
-     * Set theme mode (preferred method)
-     */
+    /** Imposta il mode, persiste e applica `data-theme`. */
     setMode(mode: FuiThemeMode): void;
-    /**
-     * Toggle between light and dark themes
-     */
+    /** Toggle light/dark (porta il mode su un valore esplicito). */
     toggleTheme(): void;
-    private _initializeTheme;
-    private _setupMediaQueryListener;
-    private _applyThemeMode;
-    private _updateDarkMode;
-    private _setColorPalette;
-    private _generateColorPalette;
+    private _init;
+    private _systemPrefersDark;
+    private _apply;
+    private _setupMediaListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<FuiThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FuiThemeService>;
 }
 export { FuiThemeService };
-export type { FuiThemeConfig, FuiThemeMode };
+export type { FuiThemeMode };
 //# sourceMappingURL=raintonic-formaui-services-theme.d.ts.map

package/types/raintonic-formaui-services-theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-services-theme.d.ts","sources":["../../../lib/services/theme/theme.service.ts"],"mappings":";;;AAGA~~;;AAEG~~;~~UACc~~,~~cAAc;;;;;;;AAO9B;AAED;;AAEG;AACG,~~KAAM,YAAY;~~AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEG~~;AACH,~~cAGa~~,eAAe;AAC1B;AACA;AACA;~~AACA~~;AACA~~;AAEA~~,0BAAsB,MAAM,CAAC,YAAY~~;AACzC~~,qBAAiB,MAAM~~;;AAOvB;;AAEG;AACH~~,~~uBAAkB,cAAmB;AAIrC;;AAEG;AACH,sBAAiB,cAAmB;AAgBpC;;AAEG;AACH,uBAAmB,YAAY;AAI/B;;AAEG;AACH,~~kBAAc,YAAY~~;AAK1B~~;;~~AAEG~~;~~AACH~~;~~AAKA~~;~~AAoBA~~;~~AA+BA~~;~~AA+BA;AAKA;AAWA;yCAlKW~~,eAAe;6CAAf,eAAe;~~AAkM3B~~;;;;","names":[]}
1	+ {"version":3,"file":"raintonic-formaui-services-theme.d.ts","sources":["../../../lib/services/theme/theme.service.ts"],"mappings":";;;AAGA;AACM,KAAM,YAAY;AAIxB;;;;AAIG;AACH,cACa,eAAe;AAC1B;AACA;AACA;AAEA;AACA;;AAGA,0BAAsB,MAAM,CAAC,YAAY;;AAEzC,qBAAiB,MAAM;;;AAQvB,kBAAc,YAAY;;AAa1B;AAIA;AAgBA;AAIA;AAQA;yCAhEW,eAAe;6CAAf,eAAe;AAiF3B;;;;","names":[]}

package/types/raintonic-formaui.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare const FORMAUI_VERSION = "0.3.1";
+declare const FORMAUI_VERSION = "0.9.0";
 export { FORMAUI_VERSION };
 //# sourceMappingURL=raintonic-formaui.d.ts.map

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

@@ -1,86 +0,0 @@
-import * as i0 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
- * @selector fui-big-menu
- * @description A two-level navigation mega-menu. The primary column displays icon-based
- * main menu items; hovering over or selecting a main item reveals a secondary flyout
- * panel listing its children. Designed for application-level navigation alongside
- * `fui-toolbar` and `fui-sidebar`.
- *
- * @input menu - (required) Array of `BigMenuItem` objects defining the menu structure
- *
- * @output itemMenuClick - Emits `{ item: BigMenuChild; event: MouseEvent }` when a child item is clicked
- *
- * @cssvar --fui-big-menu-width - Width of the primary icon column (default: 90px)
- * @cssvar --fui-big-menu-bg - Background color of both menu panels
- * @cssvar --fui-big-menu-border-color - Border color between panels and edge
- * @cssvar --fui-big-menu-item-size - Width and height of primary menu item icons
- * @cssvar --fui-big-menu-item-border-radius - Border radius of primary item icons
- * @cssvar --fui-big-menu-secondary-width - Width of the secondary flyout panel (default: 228px)
- * @cssvar --fui-big-menu-secondary-item-height - Height of each child item row
- *
- * @example
- * <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);
-    }
-    selectMainVoice(voice) {
-        if (voice.id !== this.selectedMainVoiceId()) {
-            this.selectedMainVoice.set(voice);
-        }
-    }
-    onMouseOver() {
-        this.showSecondaryMenu.set(true);
-    }
-    onMouseLeave() {
-        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\" [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\" [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: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-/**
- * Generated bundle index. Do not edit.
- */
-export { FuiBigMenuComponent, FuiBigMenuIntl };
-//# sourceMappingURL=raintonic-formaui-components-big-menu.mjs.map

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

@@ -1 +0,0 @@

- {"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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"}