@fylib/adapter-angular 0.1.0

package/dist/components/toast.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ToastProps } from '@fylib/catalog';
+import { BaseFyComponent } from '../base/base-component';
+export declare class FyToastComponent extends BaseFyComponent<'fy-toast'> implements ToastProps, OnInit, OnDestroy {
+    id?: string;
+    title?: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    duration: number;
+    showIcon: boolean;
+    closable: boolean;
+    position: any;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fyClose: EventEmitter<void>;
+    private timer?;
+    isClosing: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    close(): void;
+    get resolvedIcon(): string;
+    get resolvedIconColor(): string;
+    get resolvedCloseIcon(): string;
+    get animationClassSuffix(): string;
+}

package/dist/components/toast.component.js

@@ -0,0 +1,260 @@
+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, Output, EventEmitter, inject, ViewEncapsulation, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FyLibService } from '../services/fylib.service';
+import { BaseFyComponent } from '../base/base-component';
+import { FyIconComponent } from './icon.component';
+let FyToastComponent = class FyToastComponent extends BaseFyComponent {
+    constructor() {
+        super(inject(FyLibService), 'fy-toast');
+        this.type = 'info';
+        this.duration = 3000;
+        this.showIcon = true;
+        this.closable = true;
+        this.position = 'top-right';
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyClose = new EventEmitter();
+        this.isClosing = signal(false);
+    }
+    ngOnInit() {
+        if (this.duration > 0) {
+            this.timer = setTimeout(() => this.close(), this.duration);
+        }
+        this.triggerByEvent('fy-toast.open', undefined, this.activeEffects);
+    }
+    ngOnDestroy() {
+        if (this.timer)
+            clearTimeout(this.timer);
+    }
+    close() {
+        if (this.isClosing())
+            return;
+        this.isClosing.set(true);
+        // Aguarda a animação de saída (out) terminar antes de emitir o fechamento
+        setTimeout(() => {
+            this.fyClose.emit();
+        }, 300); // tempo aproximado da animação toast-out
+    }
+    get resolvedIcon() {
+        const themeIcons = this.fylib.getTokens().effects?.toast?.icons;
+        const iconFromTheme = themeIcons ? themeIcons[this.type] : undefined;
+        if (iconFromTheme) {
+            return iconFromTheme;
+        }
+        switch (this.type) {
+            case 'success': return 'check-circle';
+            case 'warning': return 'warning';
+            case 'error': return 'x-circle';
+            default: return 'info';
+        }
+    }
+    get resolvedIconColor() {
+        const themeIconColors = this.fylib.getTokens().effects?.toast?.iconColor;
+        const colorFromTheme = themeIconColors ? themeIconColors[this.type] : undefined;
+        if (colorFromTheme) {
+            return String(colorFromTheme);
+        }
+        const colors = this.fylib.getTokens().colors;
+        switch (this.type) {
+            case 'success': return String(colors?.success || '#28cd41');
+            case 'warning': return String(colors?.warning || '#ffcc00');
+            case 'error': return String(colors?.danger || '#ff3b30');
+            default: return String(colors?.info || '#007aff');
+        }
+    }
+    get resolvedCloseIcon() {
+        const themeCloseIcon = this.fylib.getTokens().effects?.toast?.closeIcon;
+        return themeCloseIcon || 'x';
+    }
+    get animationClassSuffix() {
+        if (this.isClosing()) {
+            return ' fy-anim-toast-out';
+        }
+        return ' fy-anim-toast-in';
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyToastComponent.prototype, "id", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyToastComponent.prototype, "title", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyToastComponent.prototype, "message", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyToastComponent.prototype, "type", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], FyToastComponent.prototype, "duration", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyToastComponent.prototype, "showIcon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyToastComponent.prototype, "closable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyToastComponent.prototype, "position", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyToastComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyToastComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyToastComponent.prototype, "customStyles", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyToastComponent.prototype, "fyClose", void 0);
+FyToastComponent = __decorate([
+    Component({
+        selector: 'fy-toast',
+        standalone: true,
+        imports: [CommonModule, FyIconComponent],
+        template: `
+    <div
+      class="fy-toast"
+      [class]="'fy-toast--' + type"
+      [class]="composeAnimClasses(animationClassSuffix)"
+      [style]="getHostStyles(customStyles)"
+    >
+      @if (showIcon) {
+        <div class="fy-toast__icon">
+          <fy-icon [name]="resolvedIcon" [color]="resolvedIconColor"></fy-icon>
+        </div>
+      }
+      
+      <div class="fy-toast__content">
+        @if (title) { <div class="fy-toast__title">{{ title }}</div> }
+        <div class="fy-toast__message">{{ message }}</div>
+      </div>
+
+      @if (closable) {
+        <button class="fy-toast__close" (click)="close()">
+          <fy-icon [name]="resolvedCloseIcon"></fy-icon>
+        </button>
+      }
+    </div>
+  `,
+        styles: [`
+    .fy-toast {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--fy-effects-toast-gap, var(--fy-spacing-sm, 8px));
+      padding: var(--fy-effects-toast-padding, var(--fy-spacing-md, 12px));
+      min-width: var(--fy-effects-toast-minWidth, 280px);
+      max-width: var(--fy-effects-toast-maxWidth, 420px);
+      background: var(--fy-effects-toast-background, #ffffff);
+      border: 1px solid var(--fy-effects-toast-borderColor, rgba(0,0,0,0.1));
+      border-radius: var(--fy-effects-toast-borderRadius, 8px);
+      box-shadow: var(--fy-effects-toast-shadow, 0 4px 12px rgba(0,0,0,0.1));
+      color: var(--fy-effects-toast-textColor, inherit);
+      pointer-events: auto;
+      margin-bottom: 8px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+    }
+
+    /* Animações base */
+    .fy-anim-toast-in {
+      animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    }
+
+    .fy-anim-toast-out {
+      animation: toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    @keyframes toast-in {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+
+    @keyframes toast-out {
+      from { transform: scale(1); opacity: 1; }
+      to { transform: scale(0.8); opacity: 0; }
+    }
+
+    .fy-toast__icon {
+      flex-shrink: 0;
+      font-size: var(--fy-effects-toast-iconSize, 20px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .fy-toast--info .fy-toast__icon { color: var(--fy-effects-toast-iconColor-info, var(--fy-colors-info, #007aff)); }
+    .fy-toast--success .fy-toast__icon { color: var(--fy-effects-toast-iconColor-success, var(--fy-colors-success, #28cd41)); }
+    .fy-toast--warning .fy-toast__icon { color: var(--fy-effects-toast-iconColor-warning, var(--fy-colors-warning, #ffcc00)); }
+    .fy-toast--error .fy-toast__icon { color: var(--fy-effects-toast-iconColor-error, var(--fy-colors-danger, #ff3b30)); }
+
+    .fy-toast__content {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .fy-toast__title {
+      font-weight: var(--fy-effects-toast-titleFontWeight, var(--fy-typography-fontWeight-bold, 600));
+      font-size: var(--fy-effects-toast-titleFontSize, var(--fy-typography-fontSize-md, 14px));
+      margin-bottom: 2px;
+    }
+
+    .fy-toast__message {
+      font-size: var(--fy-effects-toast-messageFontSize, var(--fy-typography-fontSize-sm, 13px));
+      line-height: var(--fy-effects-toast-messageLineHeight, 1.4);
+      opacity: 0.9;
+    }
+
+    .fy-toast__close {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      flex-shrink: 0;
+      background: var(--fy-effects-toast-closeButtonBackground, transparent);
+      border: var(--fy-effects-toast-closeButtonBorder, none);
+      border-radius: var(--fy-effects-toast-closeButtonBorderRadius, 0);
+      padding: 2px;
+      cursor: pointer;
+      opacity: var(--fy-effects-toast-closeButtonOpacity, 0.5);
+      transition: opacity 0.2s;
+      color: currentColor;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--fy-effects-toast-closeButtonSize, 18px);
+      height: var(--fy-effects-toast-closeButtonSize, 18px);
+    }
+
+    .fy-toast__close:hover {
+      opacity: var(--fy-effects-toast-closeButtonHoverOpacity, 1);
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyToastComponent);
+export { FyToastComponent };

package/dist/directives/animation.directive.d.ts

@@ -0,0 +1,5 @@
+export declare class FyAnimationDirective {
+    private el;
+    animationName: string;
+    play(): void;
+}

package/dist/directives/animation.directive.js

@@ -0,0 +1,34 @@
+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 { Directive, inject, ElementRef, Input } from '@angular/core';
+import { animationEngine } from '@fylib/animation';
+let FyAnimationDirective = class FyAnimationDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+    }
+    play() {
+        if (this.animationName) {
+            animationEngine.playAnimation(this.animationName);
+            // Aqui poderíamos adicionar lógica para aplicar classes CSS ou Web Animations API
+            this.el.nativeElement.classList.add(`fy-anim-${this.animationName}`);
+        }
+    }
+};
+__decorate([
+    Input('fyAnimation'),
+    __metadata("design:type", String)
+], FyAnimationDirective.prototype, "animationName", void 0);
+FyAnimationDirective = __decorate([
+    Directive({
+        selector: '[fyAnimation]',
+        standalone: true
+    })
+], FyAnimationDirective);
+export { FyAnimationDirective };

package/dist/directives/theme-vars.directive.d.ts

@@ -0,0 +1,7 @@
+export declare class FyThemeVarsDirective {
+    private el;
+    private fylib;
+    constructor();
+    private ensureResetInjected;
+    private applyTokensToElement;
+}

package/dist/directives/theme-vars.directive.js

@@ -0,0 +1,70 @@
+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 { Directive, ElementRef, inject, effect } from '@angular/core';
+import { FyLibService } from '../services/fylib.service';
+let FyThemeVarsDirective = class FyThemeVarsDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.fylib = inject(FyLibService);
+        this.ensureResetInjected();
+        effect(() => {
+            const tokens = this.fylib.tokens();
+            const config = this.fylib.config();
+            this.applyTokensToElement(this.el.nativeElement, tokens, !!config.theme?.animationsEnabled);
+        });
+    }
+    ensureResetInjected() {
+        const doc = this.el.nativeElement.ownerDocument;
+        if (!doc.getElementById('fy-reset-style')) {
+            const style = doc.createElement('style');
+            style.id = 'fy-reset-style';
+            style.textContent = `
+        *,*::before,*::after{box-sizing:border-box}
+        html,body{height:100%}
+        body{margin:0;padding:0;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+        h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
+        ul,ol{margin:0;padding:0;list-style:none}
+        img,picture,video,canvas,svg{display:block;max-width:100%}
+        input,button,textarea,select{font:inherit;color:inherit}
+        a{text-decoration:none;color:inherit}
+        table{border-collapse:collapse;border-spacing:0}
+      `;
+            doc.head.appendChild(style);
+        }
+    }
+    applyTokensToElement(element, tokens, animationsEnabled, prefix = '--fy-') {
+        Object.keys(tokens).forEach(key => {
+            const value = tokens[key];
+            if (value == null) {
+                return;
+            }
+            if (typeof value === 'object') {
+                this.applyTokensToElement(element, value, animationsEnabled, `${prefix}${key}-`);
+            }
+            else {
+                element.style.setProperty(`${prefix}${key}`, String(value));
+            }
+        });
+        if (!animationsEnabled) {
+            element.classList.add('fy-animations-disabled');
+        }
+        else {
+            element.classList.remove('fy-animations-disabled');
+        }
+    }
+};
+FyThemeVarsDirective = __decorate([
+    Directive({
+        selector: '[fyThemeVars]',
+        standalone: true
+    }),
+    __metadata("design:paramtypes", [])
+], FyThemeVarsDirective);
+export { FyThemeVarsDirective };

package/dist/directives/wallpaper.directive.d.ts

@@ -0,0 +1,28 @@
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { WallpaperName } from '@fylib/config';
+export declare class FyWallpaperDirective implements OnInit, OnChanges {
+    private el;
+    private renderer;
+    private fylib;
+    private platformId;
+    private document;
+    wallpaperName?: WallpaperName | string | null;
+    wallpaperOpacity?: number;
+    wallpaperEnabled: boolean;
+    private styleElement?;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private applyWallpaper;
+    private renderWallpaper;
+    private applyHeartsPattern;
+    private applyGeometricPattern;
+    private applyPineTreesPattern;
+    private applyCyberGridPattern;
+    private applyDotsPattern;
+    private applyGrassPattern;
+    private applyAeroWavesPattern;
+    private applyMeshGradientPattern;
+    private ensureAnimationStyles;
+    private clearWallpaper;
+}

package/dist/directives/wallpaper.directive.js

@@ -0,0 +1,195 @@
+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 { Directive, ElementRef, Input, inject, Renderer2, effect, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { FyLibService } from '../services/fylib.service';
+let FyWallpaperDirective = class FyWallpaperDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.fylib = inject(FyLibService);
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+        this.wallpaperEnabled = true;
+        // Reage a mudanças na configuração global (ex: habilitar/desabilitar wallpaperEnabled no theme.config.ts)
+        effect(() => {
+            this.fylib.config();
+            this.applyWallpaper();
+        });
+    }
+    ngOnInit() {
+        this.applyWallpaper();
+    }
+    ngOnChanges(changes) {
+        if (changes['wallpaperName'] || changes['wallpaperOpacity'] || changes['wallpaperEnabled']) {
+            this.applyWallpaper();
+        }
+    }
+    applyWallpaper() {
+        // No SSR, evitamos processar wallpaper se não estivermos no browser
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const config = this.fylib.config();
+        const globalEnabled = config.theme?.wallpaperEnabled ?? false;
+        // Só mostra se habilitado globalmente no AppConfig (theme.config.ts)
+        if (!globalEnabled || this.wallpaperEnabled === false) {
+            this.clearWallpaper();
+            return;
+        }
+        let wallpaper;
+        // Lógica de resolução solicitada:
+        // 1. Se informou um nome específico (diferente de "" ou "auto"), usa ele como override com precedência total
+        if (this.wallpaperName && this.wallpaperName !== '' && this.wallpaperName !== 'auto') {
+            wallpaper = {
+                name: this.wallpaperName,
+                type: 'pattern',
+                opacity: this.wallpaperOpacity
+            };
+        }
+        else {
+            // 2. Se a diretiva está presente mas sem valor ("" ou "auto" ou undefined), pega o padrão do tema corrente
+            wallpaper = this.fylib.getThemeWallpaper();
+            // Se pegou do tema, aplica o override de opacidade da diretiva se existir
+            if (wallpaper && this.wallpaperOpacity !== undefined) {
+                wallpaper = { ...wallpaper, opacity: this.wallpaperOpacity };
+            }
+        }
+        if (!wallpaper) {
+            this.clearWallpaper();
+            return;
+        }
+        this.renderWallpaper(wallpaper);
+    }
+    renderWallpaper(wp) {
+        // Se não houver opacidade definida (nem na prop nem no objeto wallpaper), padrão é 1
+        const opacity = wp.opacity ?? 1;
+        // Garantir que o elemento tem posição relativa se for usar overlay
+        if (wp.overlay) {
+            this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
+        }
+        switch (wp.name) {
+            case 'hearts':
+                this.applyHeartsPattern(opacity);
+                break;
+            case 'geometric':
+                this.applyGeometricPattern(opacity);
+                break;
+            case 'pine-trees':
+                this.applyPineTreesPattern(opacity);
+                break;
+            case 'cyber-grid':
+                this.applyCyberGridPattern(opacity);
+                break;
+            case 'dots':
+                this.applyDotsPattern(opacity);
+                break;
+            case 'grass':
+                this.applyGrassPattern(opacity);
+                break;
+            case 'aero-waves':
+                this.applyAeroWavesPattern(opacity);
+                break;
+            case 'mesh-gradient':
+                this.applyMeshGradientPattern(opacity);
+                break;
+            default:
+                this.clearWallpaper();
+        }
+    }
+    applyHeartsPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.ensureAnimationStyles();
+        // Removido backgroundColor fixo para respeitar o do elemento original
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 30c0-10-10-10-10-10s-10 0-10 10 10 20 20 30c10-10 20-20 20-30s0-10-10-10-10 0-10 10z' fill='%23ff85a2' fill-opacity='${opacity * 0.2}'/%3E%3Cpath d='M10 70c0-5-5-5-5-5s-5 0-5 5 5 10 10 15c5-5 10-10 10-15s0-5-5-5-5 0-5 5z' fill='%23ffb3c6' fill-opacity='${opacity * 0.15}'/%3E%3Cpath d='M80 80c0-7-7-7-7-7s-7 0-7 7 7 14 14 21c7-7 14-14 14-21s0-7-7-7-7 0-7 7z' fill='%23a2d2ff' fill-opacity='${opacity * 0.1}'/%3E%3C/svg%3E")`);
+        this.renderer.setStyle(nativeEl, 'backgroundRepeat', 'repeat');
+        this.renderer.setStyle(nativeEl, 'animation', 'fy-wallpaper-diagonal 20s linear infinite');
+    }
+    applyGeometricPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%233b82f6' fill-opacity='${opacity * 0.1}'/%3E%3C/svg%3E")`);
+        this.renderer.setStyle(nativeEl, 'backgroundRepeat', 'repeat');
+    }
+    applyPineTreesPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10l15 30H25l15-30zM40 30l20 40H20l20-40z' fill='%232f5233' fill-opacity='${opacity * 0.15}'/%3E%3C/svg%3E")`);
+        this.renderer.setStyle(nativeEl, 'backgroundRepeat', 'repeat');
+        this.ensureAnimationStyles();
+        this.renderer.setStyle(nativeEl, 'animation', 'fy-wallpaper-diagonal 30s linear infinite');
+    }
+    applyCyberGridPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        // Reduzida a intensidade da linha (0.15) para não escurecer demais o conteúdo
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `linear-gradient(rgba(34, 197, 94, ${opacity * 0.15}) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 197, 94, ${opacity * 0.15}) 1px, transparent 1px)`);
+        this.renderer.setStyle(nativeEl, 'backgroundSize', '40px 40px');
+    }
+    applyDotsPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `radial-gradient(circle, rgba(0,0,0,${opacity * 0.1}) 1px, transparent 1px)`);
+        this.renderer.setStyle(nativeEl, 'backgroundSize', '20px 20px');
+    }
+    applyGrassPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 40c0-10 5-15 10-20M20 40c0-10-5-15-10-20' stroke='%2334d399' stroke-width='1' fill='none' stroke-opacity='${opacity * 0.3}'/%3E%3C/svg%3E")`);
+        this.renderer.setStyle(nativeEl, 'backgroundRepeat', 'repeat');
+    }
+    applyAeroWavesPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `linear-gradient(135deg, rgba(255,255,255,${opacity * 0.2}) 0%, transparent 50%, rgba(255,255,255,${opacity * 0.2}) 100%)`);
+        this.renderer.setStyle(nativeEl, 'backgroundSize', '200% 200%');
+        this.ensureAnimationStyles();
+        this.renderer.setStyle(nativeEl, 'animation', 'fy-wallpaper-diagonal 15s ease infinite');
+    }
+    applyMeshGradientPattern(opacity) {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.setStyle(nativeEl, 'backgroundImage', `radial-gradient(at 0% 0%, rgba(0, 122, 255, ${opacity * 0.15}) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(82, 212, 255, ${opacity * 0.15}) 0px, transparent 50%)`);
+    }
+    ensureAnimationStyles() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.document.getElementById('fy-wallpaper-styles'))
+            return;
+        const style = this.document.createElement('style');
+        style.id = 'fy-wallpaper-styles';
+        style.innerHTML = `
+      @keyframes fy-wallpaper-diagonal {
+        from { background-position: 0 0; }
+        to { background-position: 200px 200px; }
+      }
+    `;
+        this.document.head.appendChild(style);
+    }
+    clearWallpaper() {
+        const nativeEl = this.el.nativeElement;
+        this.renderer.removeStyle(nativeEl, 'backgroundImage');
+        this.renderer.removeStyle(nativeEl, 'backgroundRepeat');
+        this.renderer.removeStyle(nativeEl, 'animation');
+    }
+};
+__decorate([
+    Input('fyWallpaper'),
+    __metadata("design:type", Object)
+], FyWallpaperDirective.prototype, "wallpaperName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], FyWallpaperDirective.prototype, "wallpaperOpacity", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyWallpaperDirective.prototype, "wallpaperEnabled", void 0);
+FyWallpaperDirective = __decorate([
+    Directive({
+        selector: '[fyWallpaper]',
+        standalone: true
+    }),
+    __metadata("design:paramtypes", [])
+], FyWallpaperDirective);
+export { FyWallpaperDirective };

package/dist/effects/confetti.plugin.d.ts

@@ -0,0 +1 @@
+export declare function registerConfettiPlugin(): void;