@fylib/adapter-angular 0.1.0

package/dist/components/modal.component.js

@@ -0,0 +1,404 @@
+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, ViewEncapsulation, HostBinding, HostListener, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalDefinition } from '@fylib/catalog';
+import { FyButtonComponent } from './button.component';
+import { BaseFyComponent } from '../base/base-component';
+let FyModalComponent = class FyModalComponent extends BaseFyComponent {
+    get animationsDisabled() {
+        return !this.isAnimationsActive(this.activeAnimations);
+    }
+    get hostStyles() {
+        return this.getHostStyles(this.customStyles);
+    }
+    constructor() {
+        super(inject(require('../services/fylib.service').FyLibService), 'fy-modal');
+        this.visible = ModalDefinition.defaultProps.visible;
+        this.size = ModalDefinition.defaultProps.size;
+        this.position = ModalDefinition.defaultProps.position;
+        this.status = ModalDefinition.defaultProps.status;
+        this.closable = ModalDefinition.defaultProps.closable;
+        this.closeOnEscape = ModalDefinition.defaultProps.closeOnEscape;
+        this.closeOnBackdrop = ModalDefinition.defaultProps.closeOnBackdrop;
+        this.showHeader = ModalDefinition.defaultProps.showHeader;
+        this.showFooter = ModalDefinition.defaultProps.showFooter;
+        this.showConfirmButton = ModalDefinition.defaultProps.showConfirmButton;
+        this.showCancelButton = ModalDefinition.defaultProps.showCancelButton;
+        this.confirmText = ModalDefinition.defaultProps.confirmText;
+        this.cancelText = ModalDefinition.defaultProps.cancelText;
+        this.loading = ModalDefinition.defaultProps.loading;
+        this.centered = ModalDefinition.defaultProps.centered;
+        this.blockScroll = ModalDefinition.defaultProps.blockScroll;
+        this.draggable = ModalDefinition.defaultProps.draggable;
+        this.resizable = ModalDefinition.defaultProps.resizable;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyOpen = new EventEmitter();
+        this.fyClose = new EventEmitter();
+        this.fyConfirm = new EventEmitter();
+        this.fyCancel = new EventEmitter();
+        this.modalAnimClass = '';
+    }
+    ngOnChanges(changes) {
+        if (changes['visible']) {
+            if (this.visible) {
+                if (this.blockScroll && typeof document !== 'undefined') {
+                    document.body.style.overflow = 'hidden';
+                }
+                if (this.isAnimationsActive(this.activeAnimations)) {
+                    const name = this.resolveAnim('open', undefined, ModalDefinition.features?.animations?.open);
+                    if (name) {
+                        this.fylib.playAnimation(name);
+                        this.modalAnimClass = `fy-anim-${name}`;
+                        setTimeout(() => { this.modalAnimClass = ''; }, 280);
+                    }
+                }
+                if (this.onOpen)
+                    this.onOpen();
+                this.fyOpen.emit();
+            }
+            else {
+                if (this.blockScroll && typeof document !== 'undefined') {
+                    document.body.style.overflow = '';
+                }
+                if (this.isAnimationsActive(this.activeAnimations)) {
+                    const name = this.resolveAnim('close', undefined, ModalDefinition.features?.animations?.close);
+                    if (name) {
+                        this.fylib.playAnimation(name);
+                        this.modalAnimClass = `fy-anim-${name}`;
+                        setTimeout(() => { this.modalAnimClass = ''; }, 220);
+                    }
+                }
+                if (this.onClose)
+                    this.onClose();
+                this.fyClose.emit();
+            }
+        }
+    }
+    handleConfirm() {
+        if (this.onConfirm)
+            this.onConfirm();
+        this.fyConfirm.emit();
+    }
+    handleCancel() {
+        if (!this.closable)
+            return;
+        if (this.onCancel)
+            this.onCancel();
+        this.fyCancel.emit();
+        if (this.isAnimationsActive(this.activeAnimations)) {
+            const name = this.resolveAnim('close', undefined, ModalDefinition.features?.animations?.close);
+            if (name) {
+                this.fylib.playAnimation(name);
+                this.modalAnimClass = `fy-anim-${name}`;
+                setTimeout(() => {
+                    this.modalAnimClass = '';
+                    this.visible = false;
+                    this.ngOnChanges({ visible: { currentValue: false, previousValue: true, firstChange: false, isFirstChange: () => false } });
+                }, 220);
+                return;
+            }
+        }
+        this.visible = false;
+        this.ngOnChanges({ visible: { currentValue: false, previousValue: true, firstChange: false, isFirstChange: () => false } });
+    }
+    onBackdropClick() {
+        if (!this.closeOnBackdrop)
+            return;
+        this.handleCancel();
+    }
+    onKeydown(event) {
+        if (!this.visible)
+            return;
+        if (event.key === 'Escape' && this.closeOnEscape) {
+            this.handleCancel();
+        }
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "visible", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyModalComponent.prototype, "title", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyModalComponent.prototype, "subtitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyModalComponent.prototype, "content", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "position", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "status", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "closable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "closeOnEscape", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "closeOnBackdrop", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "showHeader", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "showFooter", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "showConfirmButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "showCancelButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyModalComponent.prototype, "confirmText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyModalComponent.prototype, "cancelText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "loading", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "centered", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "blockScroll", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "draggable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyModalComponent.prototype, "resizable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "customStyles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyModalComponent.prototype, "onOpen", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyModalComponent.prototype, "onClose", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyModalComponent.prototype, "onConfirm", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyModalComponent.prototype, "onCancel", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "fyOpen", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "fyClose", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "fyConfirm", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyModalComponent.prototype, "fyCancel", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FyModalComponent.prototype, "animationsDisabled", null);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], FyModalComponent.prototype, "hostStyles", null);
+__decorate([
+    HostListener('document:keydown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], FyModalComponent.prototype, "onKeydown", null);
+FyModalComponent = __decorate([
+    Component({
+        selector: 'fy-modal',
+        standalone: true,
+        imports: [CommonModule, FyButtonComponent],
+        template: `
+    @if (visible) {
+      <div class="fy-modal-overlay" (click)="onBackdropClick()"></div>
+      <div class="fy-modal" [ngClass]="['fy-modal--' + size, 'fy-modal--status-' + status, modalAnimClass]">
+        @if (showHeader) {
+          <header class="fy-modal__header">
+            @if (title) { <h3 class="fy-modal__title">{{ title }}</h3> }
+            @if (subtitle) { <p class="fy-modal__subtitle">{{ subtitle }}</p> }
+            @if (closable) {
+              <button type="button" class="fy-modal__close" (click)="handleCancel()">&times;</button>
+            }
+          </header>
+        }
+
+        <section class="fy-modal__body">
+          <ng-content></ng-content>
+          @if (content) { <div class="fy-modal__content">{{ content }}</div> }
+        </section>
+
+        @if (showFooter) {
+          <footer class="fy-modal__footer">
+            @if (showCancelButton) {
+              <fy-button
+                variant="ghost"
+                size="md"
+                [label]="cancelText || 'Cancelar'"
+                (fyClick)="handleCancel()"
+              ></fy-button>
+            }
+            @if (showConfirmButton) {
+              <fy-button
+                size="md"
+                [label]="confirmText || 'Confirmar'"
+                (fyClick)="handleConfirm()"
+              ></fy-button>
+            }
+          </footer>
+        }
+      </div>
+    }
+  `,
+        styles: [`
+    .fy-modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--fy-effects-modal-overlayColor, rgba(0,0,0,0.45));
+      z-index: 2000;
+    }
+    .fy-modal {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--fy-effects-modal-background, var(--fy-colors-surface, #fff));
+      border: var(--fy-effects-modal-borderWidth, 1px) solid var(--fy-effects-modal-borderColor, rgba(0,0,0,0.12));
+      border-radius: var(--fy-effects-modal-borderRadius, var(--fy-borderRadius-md));
+      box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
+      color: var(--fy-colors-text);
+      width: 90vw;
+      max-width: 640px;
+      max-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: 2001;
+    } 
+    .fy-modal--sm { max-width: 400px; }
+    .fy-modal--md { max-width: 640px; }
+    .fy-modal--lg { max-width: 840px; }
+    .fy-modal--xl { max-width: 1040px; }
+    .fy-modal--full { width: 96vw; height: 90vh; max-width: none; }
+
+    .fy-modal__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));
+    }
+    .fy-modal__title {
+      margin: 0;
+      font-size: var(--fy-typography-fontSize-lg, 18px);
+      font-weight: var(--fy-typography-fontWeight-bold, 700);
+    }
+    .fy-modal__subtitle {
+      margin: 0;
+      opacity: .8;
+      font-size: var(--fy-typography-fontSize-sm, 12px);
+    }
+    .fy-modal__close {
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+      font-size: 20px;
+      line-height: 1;
+    }
+    .fy-modal__body {
+      padding: 16px;
+      flex: 1; 
+      overflow: auto;
+    }
+    .fy-modal__footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));
+    }
+
+    .fy-modal--status-success {
+      border-color: var(--fy-colors-success, #22c55e);
+      box-shadow: 0 0 0 3px rgba(34,197,94,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
+    }
+    .fy-modal--status-error {
+      border-color: var(--fy-colors-danger, #ef4444);
+      box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
+    }
+
+    .fy-animations-disabled, .fy-animations-disabled * {
+      transition: none !important;
+      animation: none !important;
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyModalComponent);
+export { FyModalComponent };

package/dist/components/nav-link.component.d.ts

@@ -0,0 +1,11 @@
+export declare class FyNavLinkComponent {
+    label: string;
+    to?: string;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    active?: boolean;
+    hoverEnabled: boolean;
+    iconName?: string;
+    iconSet?: 'ph' | 'fa' | 'mdi';
+    get hasProjectedContent(): boolean;
+}

package/dist/components/nav-link.component.js

@@ -0,0 +1,121 @@
+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 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FyIconComponent } from './icon.component';
+let FyNavLinkComponent = class FyNavLinkComponent {
+    constructor() {
+        this.label = '';
+        this.hoverEnabled = true;
+    }
+    get hasProjectedContent() {
+        // Em Angular, checar projeção é não trivial sem ViewChild/ContentChild; simplificado:
+        return !!this.label && this.label.trim().length > 0 ? false : true;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "label", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "to", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "href", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "target", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyNavLinkComponent.prototype, "active", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyNavLinkComponent.prototype, "hoverEnabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "iconName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyNavLinkComponent.prototype, "iconSet", void 0);
+FyNavLinkComponent = __decorate([
+    Component({
+        selector: 'fy-nav-link',
+        standalone: true,
+        imports: [CommonModule, FyIconComponent],
+        template: `
+    <a
+      [attr.href]="href || to || null"
+      [attr.target]="target || null"
+      rel="noopener noreferrer"
+      class="fy-nav-link"
+      [class.active]="active"
+      [class.fy-nav-link--hover-disabled]="!hoverEnabled"
+      
+    >
+      @if (iconName) {
+        <fy-icon [name]="iconName" [set]="iconSet" class="fy-nav-link__icon"></fy-icon>
+      }
+      <ng-content></ng-content>
+      @if (!hasProjectedContent) {
+        <span>{{ label }}</span>
+      }
+    </a>
+  `,
+        styles: [`
+    .fy-nav-link {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fy-spacing-sm, 8px);
+      padding: var(--fy-spacing-sm) var(--fy-spacing-md);
+      border-radius: var(--fy-borderRadius-sm);
+      color: var(--fy-colors-text);
+      text-decoration: none;
+      transition: background-color 0.15s ease, color 0.15s ease;
+    }
+    .fy-nav-link__icon {
+      flex: 0 0 auto;
+      opacity: .95;
+    }
+    .fy-nav-link:hover:not(.fy-nav-link--hover-disabled) {
+      background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
+      color: var(--fy-colors-primary);
+    }
+    .fy-nav-link.active {
+      background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.12);
+      color: var(--fy-colors-primary);
+      font-weight: var(--fy-typography-fontWeight-bold);
+    }
+
+    /* Dentro do header, os links devem se comportar como itens de navegação horizontal */
+    .fy-slot--header .fy-nav-link {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @media (max-width: 768px) {
+      .fy-slot--header .fy-nav-link {
+        display: inline-flex;
+        justify-content: flex-start;
+      }
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    })
+], FyNavLinkComponent);
+export { FyNavLinkComponent };

package/dist/components/notification-menu.component.d.ts

@@ -0,0 +1,68 @@
+import { EventEmitter } from '@angular/core';
+import { NotificationMenuProps, NotificationItem } from '@fylib/catalog';
+import { BaseFyComponent } from '../base/base-component';
+export declare class FyNotificationMenuComponent extends BaseFyComponent<'fy-notification-menu'> implements NotificationMenuProps {
+    private notify;
+    _notifications: import("@angular/core").WritableSignal<NotificationItem[]>;
+    set notifications(value: NotificationItem[]);
+    get notifications(): NotificationItem[];
+    unreadCount: number;
+    showAllNotifications?: boolean;
+    maxNotifications?: number;
+    enableClearAll?: boolean;
+    enableAccordion?: boolean;
+    showViewAll?: boolean;
+    viewAllPosition?: any;
+    markAllAsReadOnOpen?: boolean;
+    markAsReadOnClick?: boolean;
+    readApiEndpoint?: string;
+    readApiMethod?: 'POST' | 'PUT' | 'PATCH';
+    readApiHeaders?: Record<string, string>;
+    onRead?: (notification: NotificationItem) => void;
+    onReadAll?: (notifications: NotificationItem[]) => void;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fyOpen: EventEmitter<void>;
+    fyClearAll: EventEmitter<void>;
+    fyViewAll: EventEmitter<void>;
+    fyNotificationClick: EventEmitter<NotificationItem>;
+    isOpen: import("@angular/core").WritableSignal<boolean>;
+    isClosing: import("@angular/core").WritableSignal<boolean>;
+    private webClient;
+    constructor();
+    themeTokens: import("@angular/core").Signal<import("@fylib/core").NotificationMenuTokens | undefined>;
+    resolvedConfig: import("@angular/core").Signal<{
+        showAll: boolean;
+        limit: number;
+        allowClear: boolean;
+        accordionMode: boolean;
+        showViewAll: boolean;
+        viewAllPosition: any;
+        markAllAsReadOnOpen: boolean;
+        markAsReadOnClick: boolean;
+        readApiEndpoint: string | undefined;
+        readApiMethod: "POST" | "PUT" | "PATCH";
+        readApiHeaders: Record<string, string> | undefined;
+    }>;
+    private visibleLimit;
+    displayNotifications: import("@angular/core").Signal<NotificationItem[]>;
+    shouldScroll: import("@angular/core").Signal<boolean>;
+    scrollHeight: import("@angular/core").Signal<string>;
+    private initialLimit;
+    loadMore(): void;
+    accordionItems: import("@angular/core").Signal<any[]>;
+    get unreadCountDisplay(): number;
+    toggleMenu(): void;
+    openMenu(): void;
+    closeMenu(): void;
+    clearAll(): void;
+    viewAll(): void;
+    onItemClick(item: NotificationItem): void;
+    onItemExpand(item: NotificationItem): void;
+    onMarkAsRead(event: Event, item: NotificationItem): void;
+    private markAsRead;
+    private markAllAsRead;
+    private sendReadToBackend;
+    get animationClassSuffix(): string;
+}