@fylib/adapter-angular 0.1.0

package/dist/effects/ui-effects.plugin.js

@@ -0,0 +1,134 @@
+import { animationEngine } from '@fylib/animation';
+function createOrGet(id, setup) {
+    const existing = document.getElementById(id);
+    if (existing)
+        return existing;
+    const el = document.createElement('div');
+    el.id = id;
+    setup(el);
+    document.body.appendChild(el);
+    return el;
+}
+function playTemporary(el, duration, cleanup) {
+    el.style.opacity = '1';
+    if (duration <= 0) {
+        el.style.opacity = '0';
+        if (cleanup)
+            cleanup();
+        return;
+    }
+    setTimeout(() => {
+        el.style.opacity = '0';
+        setTimeout(() => {
+            if (el.parentElement) {
+                el.parentElement.removeChild(el);
+            }
+            if (cleanup)
+                cleanup();
+        }, 200);
+    }, duration);
+}
+function renderWindowOpen(duration = 600) {
+    const overlay = createOrGet('fy-window-open-overlay', el => {
+        el.style.position = 'fixed';
+        el.style.inset = '0';
+        el.style.background = 'rgba(255, 255, 255, 0.5)';
+        el.style.pointerEvents = 'none';
+        el.style.transition = 'opacity 0.2s ease';
+        el.style.opacity = '0';
+        el.style.zIndex = '9998';
+    });
+    playTemporary(overlay, duration);
+}
+function renderMacSheet(kind, duration = 600) {
+    const id = kind === 'open' ? 'fy-macos-sheet-open' : 'fy-macos-sheet-close';
+    const sheet = createOrGet(id, el => {
+        el.style.position = 'fixed';
+        el.style.left = '50%';
+        el.style.top = '0';
+        el.style.transform = 'translateX(-50%)';
+        el.style.width = '560px';
+        el.style.maxWidth = 'calc(100% - 40px)';
+        el.style.height = '140px';
+        el.style.background =
+            'linear-gradient(to bottom, rgba(245,245,247,0.98), rgba(229,229,234,0.98))';
+        el.style.borderRadius = '0 0 12px 12px';
+        el.style.boxShadow = '0 18px 40px rgba(0,0,0,0.35)';
+        el.style.pointerEvents = 'none';
+        el.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
+        el.style.opacity = '0';
+        el.style.zIndex = '9999';
+    });
+    sheet.style.transform =
+        kind === 'open' ? 'translate(-50%, -20px)' : 'translate(-50%, 0)';
+    setTimeout(() => {
+        sheet.style.opacity = kind === 'open' ? '1' : '0';
+        sheet.style.transform =
+            kind === 'open' ? 'translate(-50%, 0)' : 'translate(-50%, -20px)';
+    }, 10);
+    playTemporary(sheet, duration);
+}
+function renderSidebarSlideGlow(side, duration = 600) {
+    const id = side === 'in' ? 'fy-sidebar-glow-in' : 'fy-sidebar-glow-out';
+    const glow = createOrGet(id, el => {
+        el.style.position = 'fixed';
+        el.style.top = '0';
+        el.style.left = '0';
+        el.style.height = '100%';
+        el.style.width = '8px';
+        el.style.background = side === 'in'
+            ? 'linear-gradient(to right, rgba(37,99,235,0.6), rgba(37,99,235,0))'
+            : 'linear-gradient(to right, rgba(239,68,68,0.6), rgba(239,68,68,0))';
+        el.style.pointerEvents = 'none';
+        el.style.transition = 'opacity 0.2s ease';
+        el.style.opacity = '0';
+        el.style.zIndex = '9997';
+    });
+    playTemporary(glow, duration);
+}
+const uiEffectsPlugin = {
+    name: 'ui-effects-renderer',
+    renderEffect(effect) {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+        switch (effect.name) {
+            case 'window-open': {
+                const duration = (effect.params && effect.params['duration']);
+                renderWindowOpen(duration ?? 600);
+                break;
+            }
+            case 'window-macos-sheet-open': {
+                const duration = (effect.params && effect.params['duration']);
+                renderMacSheet('open', duration ?? 800);
+                break;
+            }
+            case 'window-macos-sheet-close': {
+                const duration = (effect.params && effect.params['duration']);
+                renderMacSheet('close', duration ?? 600);
+                break;
+            }
+            case 'sidebar-slide-in': {
+                const duration = (effect.params && effect.params['duration']);
+                renderSidebarSlideGlow('in', duration ?? 600);
+                break;
+            }
+            case 'sidebar-slide-out': {
+                const duration = (effect.params && effect.params['duration']);
+                renderSidebarSlideGlow('out', duration ?? 600);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+};
+let registered = false;
+export function registerUIEffectsPlugin() {
+    if (registered)
+        return;
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    animationEngine.registerGlobalEffectPlugin(uiEffectsPlugin);
+    registered = true;
+}

package/dist/icons/providers/fontawesome.provider.d.ts

@@ -0,0 +1,3 @@
+import { IconSetProvider } from '../registry';
+export declare const fontAwesomeProvider: IconSetProvider;
+export declare function registerFontAwesomeProvider(): void;

package/dist/icons/providers/fontawesome.provider.js

@@ -0,0 +1,25 @@
+import { iconRegistry } from '../registry';
+function mapVariantToFaPrefix(variant) {
+    switch (variant) {
+        case 'regular': return 'far';
+        case 'bold': return 'fas';
+        case 'light': return 'fal';
+        case 'thin': return 'fat';
+        case 'duotone': return 'fad';
+        case 'fill': return 'fas';
+        default: return 'fas';
+    }
+}
+export const fontAwesomeProvider = {
+    name: 'fa',
+    resolveClass(iconName, variant) {
+        const prefix = mapVariantToFaPrefix(variant);
+        return `${prefix} fa-${iconName}`;
+    },
+    resolveSvg() {
+        return null;
+    }
+};
+export function registerFontAwesomeProvider() {
+    iconRegistry.registerProvider(fontAwesomeProvider);
+}

package/dist/icons/providers/mdi.provider.d.ts

@@ -0,0 +1,3 @@
+import { IconSetProvider } from '../registry';
+export declare const mdiProvider: IconSetProvider;
+export declare function registerMdiProvider(): void;

package/dist/icons/providers/mdi.provider.js

@@ -0,0 +1,13 @@
+import { iconRegistry } from '../registry';
+export const mdiProvider = {
+    name: 'mdi',
+    resolveClass(iconName) {
+        return `mdi mdi-${iconName}`;
+    },
+    resolveSvg() {
+        return null;
+    }
+};
+export function registerMdiProvider() {
+    iconRegistry.registerProvider(mdiProvider);
+}

package/dist/icons/providers/phosphor.provider.d.ts

@@ -0,0 +1,3 @@
+import { IconSetProvider } from '../registry';
+export declare const phosphorProvider: IconSetProvider;
+export declare function registerPhosphorProvider(): void;

package/dist/icons/providers/phosphor.provider.js

@@ -0,0 +1,17 @@
+import { iconRegistry } from '../registry';
+export const phosphorProvider = {
+    name: 'ph',
+    resolveClass(iconName, variant) {
+        const v = (variant || 'regular');
+        if (v === 'regular') {
+            return `ph ph-${iconName}`;
+        }
+        return `ph-${v} ph-${iconName}`;
+    },
+    resolveSvg() {
+        return null;
+    }
+};
+export function registerPhosphorProvider() {
+    iconRegistry.registerProvider(phosphorProvider);
+}

package/dist/icons/registry.d.ts

@@ -0,0 +1,22 @@
+export type IconVariant = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+export interface IconSetProvider {
+    name: string;
+    resolveClass?(iconName: string, variant?: IconVariant): string | null;
+    resolveSvg?(iconName: string, variant?: IconVariant): {
+        viewBox?: string;
+        svg: string;
+    } | null;
+}
+declare class IconRegistry {
+    private providers;
+    registerProvider(provider: IconSetProvider): void;
+    getProvider(name: string): IconSetProvider | undefined;
+}
+export declare const iconRegistry: IconRegistry;
+export interface IconNameMap {
+    ph: string;
+    fa: string;
+    mdi: string;
+}
+export type IconSetKey = keyof IconNameMap;
+export {};

package/dist/icons/registry.js

@@ -0,0 +1,12 @@
+class IconRegistry {
+    constructor() {
+        this.providers = new Map();
+    }
+    registerProvider(provider) {
+        this.providers.set(provider.name, provider);
+    }
+    getProvider(name) {
+        return this.providers.get(name);
+    }
+}
+export const iconRegistry = new IconRegistry();

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export * from './services/fylib.service';
+export * from './providers';
+export * from './directives/theme-vars.directive';
+export * from './directives/animation.directive';
+export * from './directives/wallpaper.directive';
+export * from './components/button.component';
+export * from './components/input.component';
+export * from './components/icon.component';
+export * from './components/nav-link.component';
+export * from './components/card.component';
+export * from './components/table.component';
+export * from './components/modal.component';
+export * from './components/select.component';
+export * from './components/accordion.component';
+export * from './components/chart.component';
+export * from './layouts/layout.component';
+export * from './layouts/slot.component';
+export * from './icons/registry';
+export * from './icons/providers/phosphor.provider';
+export * from './icons/providers/fontawesome.provider';
+export * from './icons/providers/mdi.provider';
+export * from './components/badge.component';
+export * from './components/toast.component';
+export * from './components/notification-menu.component';
+export * from './components/text.component';
+export * from './services/notification.service';
+export * from './services/sse.service';
+export * from './services/webclient.service';
+export { registerAllEffects } from './effects/register-all';

package/dist/index.js

@@ -0,0 +1,29 @@
+export * from './services/fylib.service';
+export * from './providers';
+export * from './directives/theme-vars.directive';
+export * from './directives/animation.directive';
+export * from './directives/wallpaper.directive';
+export * from './components/button.component';
+export * from './components/input.component';
+export * from './components/icon.component';
+export * from './components/nav-link.component';
+export * from './components/card.component';
+export * from './components/table.component';
+export * from './components/modal.component';
+export * from './components/select.component';
+export * from './components/accordion.component';
+export * from './components/chart.component';
+export * from './layouts/layout.component';
+export * from './layouts/slot.component';
+export * from './icons/registry';
+export * from './icons/providers/phosphor.provider';
+export * from './icons/providers/fontawesome.provider';
+export * from './icons/providers/mdi.provider';
+export * from './components/badge.component';
+export * from './components/toast.component';
+export * from './components/notification-menu.component';
+export * from './components/text.component';
+export * from './services/notification.service';
+export * from './services/sse.service';
+export * from './services/webclient.service';
+export { registerAllEffects } from './effects/register-all';

package/dist/layouts/layout.component.d.ts

@@ -0,0 +1,24 @@
+import { OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { EffectName } from '@fylib/config';
+export declare class FyLayoutComponent implements OnInit, OnChanges, OnDestroy {
+    private fylib;
+    private platformId;
+    private layoutEffectId;
+    name: string;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    enterEffect?: EffectName;
+    bgEffect?: EffectName | string | null;
+    bgEffectIntensity?: number | null;
+    bgEffectSpeed?: number | null;
+    bgEffectLoop?: boolean | null;
+    get animationsDisabled(): boolean;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private applyBgEffect;
+    private stopBgEffect;
+    private resolveAnimationsActive;
+}

package/dist/layouts/layout.component.js

@@ -0,0 +1,255 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, ViewEncapsulation, HostBinding, inject, effect, PLATFORM_ID } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { FyLibService } from '../services/fylib.service';
+import { AppLayoutDefinition } from '@fylib/catalog';
+import { resolveAnimationsActive, triggerEffectForEvent } from '../base/interaction.utils';
+let FyLayoutComponent = class FyLayoutComponent {
+    get animationsDisabled() {
+        return !resolveAnimationsActive(this.fylib, 'fy-layout', this.activeAnimations);
+    }
+    constructor() {
+        this.fylib = inject(FyLibService);
+        this.platformId = inject(PLATFORM_ID);
+        this.layoutEffectId = `layout-bg-effect-${Math.random().toString(36).substr(2, 9)}`;
+        this.name = AppLayoutDefinition.name;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.bgEffectIntensity = null;
+        this.bgEffectSpeed = null;
+        this.bgEffectLoop = null;
+        // Reage a mudanças na configuração global de efeitos de tema (themeEffectsEnabled)
+        effect(() => {
+            this.fylib.config();
+            this.applyBgEffect();
+        });
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (!resolveAnimationsActive(this.fylib, 'fy-layout', this.activeAnimations)) {
+            return;
+        }
+        const animationName = this.fylib.getComponentAnimation('fy-layout', 'enter');
+        if (animationName) {
+            this.fylib.playAnimation(animationName);
+        }
+        const enabled = this.fylib.isEffectsEnabledFor('fy-layout', this.activeEffects);
+        if (enabled) {
+            if (this.enterEffect) {
+                this.fylib.triggerEffect(this.enterEffect);
+            }
+            else {
+                triggerEffectForEvent(this.fylib, 'fy-layout.enter', 'fy-layout', this.activeEffects);
+            }
+            this.applyBgEffect();
+        }
+    }
+    ngOnChanges(changes) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (changes['bgEffect'] || changes['bgEffectIntensity'] || changes['bgEffectSpeed'] || changes['bgEffectLoop']) {
+            this.applyBgEffect();
+        }
+    }
+    ngOnDestroy() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.stopBgEffect();
+    }
+    applyBgEffect() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const config = this.fylib.config();
+        const globalEnabled = config.theme?.themeEffectsEnabled ?? false;
+        // Só mostra se habilitado globalmente no AppConfig (theme.config.ts)
+        if (!globalEnabled) {
+            this.stopBgEffect();
+            return;
+        }
+        // Regra solicitada: seguir a ativação do wallpaper. 
+        // Ou seja, só ativa se a prop bgEffect estiver presente (não undefined).
+        if (this.bgEffect === undefined) {
+            this.stopBgEffect();
+            return;
+        }
+        const enabled = this.fylib.isEffectsEnabledFor('fy-layout', this.activeEffects);
+        if (!enabled) {
+            this.stopBgEffect();
+            return;
+        }
+        let effectToPlay;
+        let params = {
+            id: this.layoutEffectId,
+            intensity: this.bgEffectIntensity,
+            speed: this.bgEffectSpeed,
+            loop: this.bgEffectLoop
+        };
+        // 1. Se informou um nome específico (diferente de "" ou "auto"), usa ele como override com precedência total
+        if (this.bgEffect && this.bgEffect !== '' && this.bgEffect !== 'auto') {
+            effectToPlay = this.bgEffect;
+        }
+        else {
+            // 2. Se a prop está presente mas sem valor ("" ou "auto"), pega o padrão do tema corrente
+            const themeEffect = this.fylib.getThemeBackgroundEffect();
+            if (themeEffect) {
+                effectToPlay = themeEffect.name;
+                // Aplica fallbacks do tema se não houver overrides na instância
+                params.intensity = params.intensity ?? themeEffect.intensity;
+                params.speed = params.speed ?? themeEffect.speed;
+                params.loop = params.loop ?? themeEffect.loop;
+            }
+        }
+        if (effectToPlay) {
+            this.fylib.triggerEffect(effectToPlay, params);
+        }
+        else {
+            this.stopBgEffect();
+        }
+    }
+    stopBgEffect() {
+        // Tenta parar tanto o efeito da prop quanto o possível efeito do tema
+        // O ID é o mesmo para o componente layout, então vai parar o que estiver rodando nele
+        const currentEffect = this.bgEffect || this.fylib.getThemeBackgroundEffect()?.name;
+        if (currentEffect) {
+            this.fylib.triggerEffect(currentEffect, {
+                id: this.layoutEffectId,
+                stop: true
+            });
+        }
+    }
+    resolveAnimationsActive() {
+        return resolveAnimationsActive(this.fylib, 'fy-layout', this.activeAnimations);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyLayoutComponent.prototype, "name", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "customStyles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyLayoutComponent.prototype, "enterEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "bgEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "bgEffectIntensity", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "bgEffectSpeed", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyLayoutComponent.prototype, "bgEffectLoop", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FyLayoutComponent.prototype, "animationsDisabled", null);
+FyLayoutComponent = __decorate([
+    Component({
+        selector: 'fy-layout',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div [class]="'fy-layout fy-layout--' + name" [ngStyle]="customStyles || null">
+      <ng-content></ng-content>
+    </div>
+  `,
+        styles: [`
+    .fy-layout {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      width: 100%;
+      overflow-x: hidden;
+      background-color: var(--fy-colors-background);
+      color: var(--fy-colors-text);
+      font-family: var(--fy-typography-fontFamily-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    /* App Layout specific styles */
+    .fy-layout--app-layout {
+      display: grid;
+      grid-template-areas:
+        "header"
+        "content"
+        "footer";
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr auto;
+      gap: var(--fy-layout-gap, 0);
+    }
+
+    /* When sidebar slot is present, switch to two columns */
+    .fy-layout--app-layout:has(.fy-slot--sidebar) {
+      grid-template-areas:
+        "header header"
+        "sidebar content"
+        "footer footer";
+      grid-template-columns: var(--fy-layout-sidebar-width, 260px) 1fr;
+    }
+
+    /* Fixed Sidebar mode: Lock height to viewport and disable global scroll */
+    .fy-layout--app-layout:has(.fy-slot--sidebar-fixed) {
+      height: 100vh;
+      min-height: 100vh;
+      max-height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Ensure content area takes full height and scrolls internally in fixed mode */
+    .fy-layout--app-layout:has(.fy-slot--sidebar-fixed) .fy-slot--content {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    @media (max-width: 768px) {
+      .fy-layout--app-layout {
+        grid-template-areas: 
+          "header"
+          "content"
+          "footer";
+        grid-template-columns: 1fr;
+      }
+
+      .fy-layout--app-layout:has(.fy-slot--sidebar) {
+        grid-template-areas: 
+          "header"
+          "content"
+          "footer";
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyLayoutComponent);
+export { FyLayoutComponent };

package/dist/layouts/slot.component.d.ts

@@ -0,0 +1,61 @@
+import { OnDestroy } from '@angular/core';
+import { EffectName } from '@fylib/config';
+export declare class FySlotComponent implements OnDestroy {
+    private fylib;
+    name: 'content' | 'sidebar' | 'header' | 'footer';
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fixedSidebar: boolean | null;
+    copyrightText: string | null;
+    copyrightShineDuration: string;
+    openEffect?: EffectName;
+    closeEffect?: EffectName;
+    sidebarOpen: boolean;
+    headerMenuOpen: boolean;
+    headerToggleIconName: string;
+    sidebarToggleIconName: string;
+    sidebarToggleMode: 'floating' | 'tongue';
+    sidebarTonguePos: 'top' | 'middle' | 'bottom';
+    headerMenuAnimClass: string;
+    headerMenuAnimationOpen?: import('@fylib/animation').HeaderMenuAnimationName | null;
+    headerMenuAnimationClose?: import('@fylib/animation').HeaderMenuAnimationName | null;
+    /** Deprecated: use fy-header-links-center/right slots */
+    headerLinksAlign: 'left' | 'center' | 'right';
+    headerLogoImgSrc?: string | null;
+    headerLogoSvgSrc?: string | null;
+    headerLogoAlt?: string | null;
+    headerLogoBadgeText?: string | null;
+    headerLogoBadgeBG?: string | null;
+    headerLogoBadgeTextColor?: string | null;
+    headerLogoBadgeRadius?: string | null;
+    headerLogoBadgeShine?: boolean | null;
+    headerLogoColorLight?: string | null;
+    headerLogoColorDark?: string | null;
+    sidebarLogoImgSrc?: string | null;
+    sidebarLogoSvgSrc?: string | null;
+    sidebarLogoAlt?: string | null;
+    headerLogoFilter?: string | null;
+    sidebarLogoFilter?: string | null;
+    sidebarLogoColorLight?: string | null;
+    sidebarLogoColorDark?: string | null;
+    sidebarLogoBadgeText?: string | null;
+    sidebarLogoBadgeBG?: string | null;
+    sidebarLogoBadgeTextColor?: string | null;
+    sidebarLogoBadgeRadius?: string | null;
+    sidebarLogoBadgeShine?: boolean | null;
+    get currentYear(): number;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    get hostClass(): string;
+    get computedHeaderLogoFilter(): string | null;
+    get computedSidebarLogoFilter(): string | null;
+    private filterFromTargetColor;
+    private getLogoDarkOpacity;
+    toggleSidebar(): void;
+    toggleHeaderMenu(): void;
+    constructor();
+    ngOnDestroy(): void;
+    private resolveAnimationsActive;
+    private updateBodyScroll;
+}