@fylib/adapter-angular 0.2.5 → 0.2.8

package/dist/components/notification-menu.component.js

@@ -1,12 +1,3 @@
-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, computed, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NotificationMenuDefinition } from '@fylib/catalog';
@@ -16,7 +7,9 @@ import { FyIconComponent } from './icon.component';
 import { FyAccordionComponent } from './accordion.component';
 import { FyNotificationService } from '../services/notification.service';
 import { FyWebClientService } from '../services/webclient.service';
-let FyNotificationMenuComponent = class FyNotificationMenuComponent extends BaseFyComponent {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FyNotificationMenuComponent extends BaseFyComponent {
     set notifications(value) {
         this._notifications.set(value ?? []);
     }
@@ -26,7 +19,7 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
     constructor() {
         super(inject(FyLibService), 'fy-notification-menu');
         this.notify = inject(FyNotificationService);
-        this._notifications = signal([]);
+        this._notifications = signal([], ...(ngDevMode ? [{ debugName: "_notifications" }] : /* istanbul ignore next */ []));
         this.unreadCount = 0;
         this.activeAnimations = null;
         this.activeEffects = null;
@@ -35,10 +28,10 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
         this.fyClearAll = new EventEmitter();
         this.fyViewAll = new EventEmitter();
         this.fyNotificationClick = new EventEmitter();
-        this.isOpen = signal(false);
-        this.isClosing = signal(false);
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : /* istanbul ignore next */ []));
         this.webClient = inject(FyWebClientService, { optional: true });
-        this.themeTokens = computed(() => this.fylib.tokens().effects?.notificationMenu);
+        this.themeTokens = computed(() => this.fylib.tokens().effects?.notificationMenu, ...(ngDevMode ? [{ debugName: "themeTokens" }] : /* istanbul ignore next */ []));
         this.resolvedConfig = computed(() => {
             const themeConfig = this.themeTokens()?.config;
             const def = NotificationMenuDefinition.defaultProps;
@@ -55,8 +48,8 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
                 readApiMethod: this.readApiMethod ?? themeConfig?.readApiMethod ?? def.readApiMethod,
                 readApiHeaders: this.readApiHeaders ?? themeConfig?.readApiHeaders
             };
-        });
-        this.visibleLimit = signal(10);
+        }, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
+        this.visibleLimit = signal(10, ...(ngDevMode ? [{ debugName: "visibleLimit" }] : /* istanbul ignore next */ []));
         this.displayNotifications = computed(() => {
             const config = this.resolvedConfig();
             const notifications = this._notifications();
@@ -64,9 +57,9 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
                 return notifications;
             const limit = this.visibleLimit();
             return notifications.slice(0, limit);
-        });
-        this.shouldScroll = computed(() => this._notifications().length > 5);
-        this.scrollHeight = computed(() => this.themeTokens()?.dropdown?.maxHeight || '320px');
+        }, ...(ngDevMode ? [{ debugName: "displayNotifications" }] : /* istanbul ignore next */ []));
+        this.shouldScroll = computed(() => this._notifications().length > 5, ...(ngDevMode ? [{ debugName: "shouldScroll" }] : /* istanbul ignore next */ []));
+        this.scrollHeight = computed(() => this.themeTokens()?.dropdown?.maxHeight || '320px', ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
         this.accordionItems = computed(() => {
             return this.displayNotifications().map(item => ({
                 id: item.id,
@@ -74,7 +67,7 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
                 subtitle: item.description,
                 content: item.details
             }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "accordionItems" }] : /* istanbul ignore next */ []));
         // Sincroniza com o FyNotificationService usando effect
         effect(() => {
             const current = this.notify.notifications();
@@ -199,106 +192,9 @@ let FyNotificationMenuComponent = class FyNotificationMenuComponent extends Base
         const anim = this.resolveAnim('open', undefined, NotificationMenuDefinition.features?.animations?.open);
         return anim ? ` fy-anim-${anim}` : '';
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], FyNotificationMenuComponent.prototype, "notifications", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FyNotificationMenuComponent.prototype, "unreadCount", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "showAllNotifications", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FyNotificationMenuComponent.prototype, "maxNotifications", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "enableClearAll", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "enableAccordion", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "showViewAll", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "viewAllPosition", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "markAllAsReadOnOpen", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyNotificationMenuComponent.prototype, "markAsReadOnClick", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyNotificationMenuComponent.prototype, "readApiEndpoint", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyNotificationMenuComponent.prototype, "readApiMethod", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "readApiHeaders", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FyNotificationMenuComponent.prototype, "onRead", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FyNotificationMenuComponent.prototype, "onReadAll", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "activeAnimations", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "activeEffects", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "customStyles", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "fyOpen", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "fyClearAll", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "fyViewAll", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyNotificationMenuComponent.prototype, "fyNotificationClick", void 0);
-FyNotificationMenuComponent = __decorate([
-    Component({
-        selector: 'fy-notification-menu',
-        standalone: true,
-        imports: [
-            CommonModule,
-            FyIconComponent,
-            FyAccordionComponent
-        ],
-        template: `
+}
+FyNotificationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyNotificationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyNotificationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyNotificationMenuComponent, isStandalone: true, selector: "fy-notification-menu", inputs: { notifications: "notifications", unreadCount: "unreadCount", showAllNotifications: "showAllNotifications", maxNotifications: "maxNotifications", enableClearAll: "enableClearAll", enableAccordion: "enableAccordion", showViewAll: "showViewAll", viewAllPosition: "viewAllPosition", markAllAsReadOnOpen: "markAllAsReadOnOpen", markAsReadOnClick: "markAsReadOnClick", readApiEndpoint: "readApiEndpoint", readApiMethod: "readApiMethod", readApiHeaders: "readApiHeaders", onRead: "onRead", onReadAll: "onReadAll", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles" }, outputs: { fyOpen: "fyOpen", fyClearAll: "fyClearAll", fyViewAll: "fyViewAll", fyNotificationClick: "fyNotificationClick" }, usesInheritance: true, ngImport: i0, template: `
     <div class="fy-notification-menu">
       <!-- Botão de Notificação -->
       <button 
@@ -440,256 +336,198 @@ FyNotificationMenuComponent = __decorate([
       </div>
     }
   </div>
-  `,
-        styles: [`
-    .fy-notification-menu {
-      position: relative;
-      display: inline-block;
-    }
-
-    .fy-notification-menu__trigger {
-      background: transparent;
-      border: none;
-      padding: 8px;
-      cursor: pointer;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 22px;
-      border-radius: 50%;
-      transition: background 0.2s;
-    }
-
-    .fy-notification-menu__trigger:hover {
-      background: rgba(0,0,0,0.05);
-    }
-
-    .fy-notification-menu__badge {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      min-width: 18px;
-      height: 18px;
-      padding: 0 4px;
-      border-radius: 9px;
-      font-size: 10px;
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 2px solid var(--fy-colors-surface, #ffffff);
-    }
-
-    .fy-notification-menu__dropdown {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 8px;
-      z-index: 1000;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      box-shadow: var(--fy-notificationMenu-dropdown-shadow, 0 10px 40px rgba(0,0,0,0.1));
-      border: 1px solid var(--fy-notificationMenu-dropdown-borderColor, rgba(0,0,0,0.08));
-      background-color: var(--fy-notificationMenu-dropdown-background, #fff);
-      border-radius: var(--fy-notificationMenu-dropdown-borderRadius, 12px);
-      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 450px);
-    }
-
-    @media (max-width: 768px) {
-      .fy-notification-menu__dropdown {
-        position: fixed;
-        top: calc(var(--fy-layout-header-height, 64px) + 8px);
-        left: 16px;
-        right: 16px;
-        width: calc(100% - 32px) !important;
-        max-height: calc(100vh - var(--fy-layout-header-height, 64px) - 32px) !important;
-        margin-top: 0;
-        z-index: 2000;
-      }
-    }
-
-    .fy-notification-menu__header {
-      padding: 12px 16px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));
-      flex-shrink: 0;
-    }
-
-    .fy-notification-menu__header-actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .fy-notification-menu__title {
-      font-weight: var(--fy-typography-fontWeight-bold, 600);
-      font-size: 14px;
-    }
-
-    .fy-notification-menu__action-btn {
-      background: transparent;
-      border: none;
-      color: var(--fy-colors-primary, #007aff);
-      font-size: 12px;
-      cursor: pointer;
-      padding: 4px 8px;
-      border-radius: 4px;
-    }
-
-    .fy-notification-menu__action-btn:hover {
-      background: rgba(var(--fy-colors-primary-rgb), 0.08);
-    }
-
-    .fy-notification-menu__close-btn {
-      display: none;
-      background: transparent;
-      border: none;
-      color: var(--fy-colors-text, inherit);
-      font-size: 20px;
-      cursor: pointer;
-      padding: 4px;
-      line-height: 1;
-      opacity: 0.6;
-      transition: opacity 0.2s;
-    }
-
-    .fy-notification-menu__close-btn:hover {
-      opacity: 1;
-    }
-
-    @media (max-width: 768px) {
-      .fy-notification-menu__close-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    .fy-notification-menu__body {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-    }
-    .fy-notification-menu__body--scroll {
-      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 320px);
-    }
-
-    .fy-notification-menu__empty {
-      padding: 32px 16px;
-      text-align: center;
-      color: var(--fy-colors-secondary, #86868b);
-      font-size: 13px;
-    }
-
-    .fy-notification-menu__item {
-      padding: 12px 16px;
-      display: flex;
-      gap: 12px;
-      cursor: pointer;
-      transition: background 0.2s;
-      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));
-      position: relative;
-    }
-
-    .fy-notification-menu__item:hover {
-      background: rgba(0,0,0,0.02);
-    }
-
-    .fy-notification-menu__item--unread {
-      background: rgba(var(--fy-colors-primary-rgb), 0.02);
-    }
-
-    .fy-notification-menu__item--read {
-      opacity: 0.6;
-      filter: grayscale(0.4);
-      transition: all 0.3s ease;
-    }
-
-    .fy-notification-menu__item--read:hover {
-      opacity: 0.8;
-      filter: grayscale(0.2);
-    }
-
-    .fy-notification-menu__accordion-item.fy-notification-menu__item--read ::ng-deep .fy-accordion__header {
-      opacity: 0.7;
-    }
-
-    .fy-notification-menu__unread-dot {
-      position: absolute;
-      right: 12px;
-      top: 12px;
-      width: 8px;
-      height: 8px;
-      background: var(--fy-colors-primary, #007aff);
-      border-radius: 50%;
-    }
-
-    .fy-notification-menu__item-content {
-      flex: 1;
-    }
-
-    .fy-notification-menu__item-title {
-      font-weight: 600;
-      font-size: 13px;
-      margin-bottom: 2px;
-    }
-
-    .fy-notification-menu__item-desc {
-      font-size: 12px;
-      color: var(--fy-colors-secondary, #86868b);
-      line-height: 1.4;
-    }
-
-    .fy-notification-menu__item-date {
-      font-size: 11px;
-      color: var(--fy-colors-secondary, #86868b);
-      margin-top: 4px;
-      opacity: 0.7;
-    }
+  `, isInline: true, styles: ["\n    .fy-notification-menu {\n      position: relative;\n      display: inline-block;\n    }\n\n    .fy-notification-menu__trigger {\n      background: transparent;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      border-radius: 50%;\n      transition: background 0.2s;\n    }\n\n    .fy-notification-menu__trigger:hover {\n      background: rgba(0,0,0,0.05);\n    }\n\n    .fy-notification-menu__badge {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      min-width: 18px;\n      height: 18px;\n      padding: 0 4px;\n      border-radius: 9px;\n      font-size: 10px;\n      font-weight: bold;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fy-colors-surface, #ffffff);\n    }\n\n    .fy-notification-menu__dropdown {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 8px;\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      box-shadow: var(--fy-notificationMenu-dropdown-shadow, 0 10px 40px rgba(0,0,0,0.1));\n      border: 1px solid var(--fy-notificationMenu-dropdown-borderColor, rgba(0,0,0,0.08));\n      background-color: var(--fy-notificationMenu-dropdown-background, #fff);\n      border-radius: var(--fy-notificationMenu-dropdown-borderRadius, 12px);\n      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 450px);\n    }\n\n    @media (max-width: 768px) {\n      .fy-notification-menu__dropdown {\n        position: fixed;\n        top: calc(var(--fy-layout-header-height, 64px) + 8px);\n        left: 16px;\n        right: 16px;\n        width: calc(100% - 32px) !important;\n        max-height: calc(100vh - var(--fy-layout-header-height, 64px) - 32px) !important;\n        margin-top: 0;\n        z-index: 2000;\n      }\n    }\n\n    .fy-notification-menu__header {\n      padding: 12px 16px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n      flex-shrink: 0;\n    }\n\n    .fy-notification-menu__header-actions {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-notification-menu__title {\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n      font-size: 14px;\n    }\n\n    .fy-notification-menu__action-btn {\n      background: transparent;\n      border: none;\n      color: var(--fy-colors-primary, #007aff);\n      font-size: 12px;\n      cursor: pointer;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .fy-notification-menu__action-btn:hover {\n      background: rgba(var(--fy-colors-primary-rgb), 0.08);\n    }\n\n    .fy-notification-menu__close-btn {\n      display: none;\n      background: transparent;\n      border: none;\n      color: var(--fy-colors-text, inherit);\n      font-size: 20px;\n      cursor: pointer;\n      padding: 4px;\n      line-height: 1;\n      opacity: 0.6;\n      transition: opacity 0.2s;\n    }\n\n    .fy-notification-menu__close-btn:hover {\n      opacity: 1;\n    }\n\n    @media (max-width: 768px) {\n      .fy-notification-menu__close-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    .fy-notification-menu__body {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n    }\n    .fy-notification-menu__body--scroll {\n      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 320px);\n    }\n\n    .fy-notification-menu__empty {\n      padding: 32px 16px;\n      text-align: center;\n      color: var(--fy-colors-secondary, #86868b);\n      font-size: 13px;\n    }\n\n    .fy-notification-menu__item {\n      padding: 12px 16px;\n      display: flex;\n      gap: 12px;\n      cursor: pointer;\n      transition: background 0.2s;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));\n      position: relative;\n    }\n\n    .fy-notification-menu__item:hover {\n      background: rgba(0,0,0,0.02);\n    }\n\n    .fy-notification-menu__item--unread {\n      background: rgba(var(--fy-colors-primary-rgb), 0.02);\n    }\n\n    .fy-notification-menu__item--read {\n      opacity: 0.6;\n      filter: grayscale(0.4);\n      transition: all 0.3s ease;\n    }\n\n    .fy-notification-menu__item--read:hover {\n      opacity: 0.8;\n      filter: grayscale(0.2);\n    }\n\n    .fy-notification-menu__accordion-item.fy-notification-menu__item--read ::ng-deep .fy-accordion__header {\n      opacity: 0.7;\n    }\n\n    .fy-notification-menu__unread-dot {\n      position: absolute;\n      right: 12px;\n      top: 12px;\n      width: 8px;\n      height: 8px;\n      background: var(--fy-colors-primary, #007aff);\n      border-radius: 50%;\n    }\n\n    .fy-notification-menu__item-content {\n      flex: 1;\n    }\n\n    .fy-notification-menu__item-title {\n      font-weight: 600;\n      font-size: 13px;\n      margin-bottom: 2px;\n    }\n\n    .fy-notification-menu__item-desc {\n      font-size: 12px;\n      color: var(--fy-colors-secondary, #86868b);\n      line-height: 1.4;\n    }\n\n    .fy-notification-menu__item-date {\n      font-size: 11px;\n      color: var(--fy-colors-secondary, #86868b);\n      margin-top: 4px;\n      opacity: 0.7;\n    }\n\n    .fy-notification-menu__item-actions {\n      display: flex;\n      align-items: center;\n      margin-right: 20px;\n    }\n\n    .fy-notification-menu__read-btn {\n      background: transparent;\n      border: none;\n      padding: 6px;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--fy-colors-primary, #007aff);\n      opacity: 0.4;\n      transition: all 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .fy-notification-menu__read-btn:hover {\n      opacity: 1;\n      background: rgba(var(--fy-colors-primary-rgb), 0.1);\n    }\n\n    .fy-notification-menu__accordion-item {\n      display: block;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));\n    }\n\n    .fy-notification-menu__footer {\n      padding: 8px 16px;\n      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n      display: flex;\n      flex-shrink: 0;\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }, { kind: "component", type: FyAccordionComponent, selector: "fy-accordion", inputs: ["items", "activeIndex", "expandMode", "size", "status", "bordered", "flush", "animated", "lazy", "iconPosition", "disabled", "onOpen", "onClose", "onChange", "activeAnimations", "activeEffects", "customStyles"], outputs: ["fyOpen", "fyClose", "fyChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyNotificationMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fy-notification-menu', standalone: true, imports: [
+                        CommonModule,
+                        FyIconComponent,
+                        FyAccordionComponent
+                    ], template: `
+    <div class="fy-notification-menu">
+      <!-- Botão de Notificação -->
+      <button 
+        class="fy-notification-menu__trigger" 
+        (click)="toggleMenu()"
+        [style.color]="themeTokens()?.button?.textColor"
+      >
+        <fy-icon [name]="themeTokens()?.button?.icon || 'bell'"></fy-icon>
+        @if (unreadCountDisplay > 0) {
+          <span 
+            class="fy-notification-menu__badge"
+            [style.background]="themeTokens()?.button?.badgeBackground"
+            [style.color]="themeTokens()?.button?.badgeTextColor"
+          >
+            {{ unreadCountDisplay > 99 ? '99+' : unreadCountDisplay }}
+          </span>
+        }
+      </button>
 
-    .fy-notification-menu__item-actions {
-      display: flex;
-      align-items: center;
-      margin-right: 20px;
-    }
+      <!-- Dropdown -->
+      @if (isOpen() || isClosing()) {
+        <div 
+          class="fy-notification-menu__dropdown"
+        [class]="composeAnimClasses(animationClassSuffix)"
+        [style.width]="themeTokens()?.dropdown?.width"
+        [style.background]="themeTokens()?.dropdown?.background"
+        [style.border-color]="themeTokens()?.dropdown?.borderColor"
+        [style.box-shadow]="themeTokens()?.dropdown?.shadow"
+        [style.border-radius]="themeTokens()?.dropdown?.borderRadius"
+      >
+        <!-- Header -->
+        <div class="fy-notification-menu__header">
+          <span class="fy-notification-menu__title">Notificações</span>
+          
+          <div class="fy-notification-menu__header-actions">
+            @if (resolvedConfig().allowClear && notifications.length > 0) {
+              <button 
+                class="fy-notification-menu__action-btn"
+                (click)="clearAll()"
+              >
+                Limpar tudo
+              </button>
+            }
+            
+            @if (resolvedConfig().showViewAll && resolvedConfig().viewAllPosition.startsWith('header')) {
+              <button 
+                class="fy-notification-menu__action-btn"
+                (click)="viewAll()"
+              >
+                Ver todas
+              </button>
+            }
 
-    .fy-notification-menu__read-btn {
-      background: transparent;
-      border: none;
-      padding: 6px;
-      border-radius: 4px;
-      cursor: pointer;
-      color: var(--fy-colors-primary, #007aff);
-      opacity: 0.4;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+            <!-- Botão fechar (Mobile/Tablet) -->
+            <button class="fy-notification-menu__close-btn" (click)="closeMenu()">
+              <fy-icon name="x"></fy-icon>
+            </button>
+          </div>
+        </div>
 
-    .fy-notification-menu__read-btn:hover {
-      opacity: 1;
-      background: rgba(var(--fy-colors-primary-rgb), 0.1);
-    }
+        <!-- List -->
+        <div 
+          class="fy-notification-menu__body" 
+          [class.fy-notification-menu__body--scroll]="shouldScroll()"
+        >
+          @if (_notifications().length === 0) {
+            <div class="fy-notification-menu__empty">
+              Nenhuma notificação por enquanto.
+            </div>
+          }
 
-    .fy-notification-menu__accordion-item {
-      display: block;
-      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));
-    }
+          @if (resolvedConfig().accordionMode) {
+            @for (item of displayNotifications(); track item.id) {
+              <div class="fy-notification-menu__item-wrapper">
+                <fy-accordion 
+                  [items]="[{ id: item.id, title: item.title, subtitle: item.description, content: item.details }]"
+                  [flush]="true"
+                  class="fy-notification-menu__accordion-item"
+                  [class.fy-notification-menu__item--unread]="!item.read"
+                  [class.fy-notification-menu__item--read]="item.read"
+                  (fyExpand)="onItemExpand(item)"
+                >
+                </fy-accordion>
+                @if (!item.read) {
+                  <div class="fy-notification-menu__unread-dot"></div>
+                }
+              </div>
+            }
+          } @else {
+            @for (item of displayNotifications(); track item.id) {
+              <div 
+                class="fy-notification-menu__item"
+                [class.fy-notification-menu__item--unread]="!item.read"
+                [class.fy-notification-menu__item--read]="item.read"
+                (click)="onItemClick(item)"
+              >
+                @if (item.icon) {
+                  <div class="fy-notification-menu__item-icon">
+                    <fy-icon [name]="item.icon"></fy-icon>
+                  </div>
+                }
+                <div class="fy-notification-menu__item-content">
+                  <div class="fy-notification-menu__item-title">{{ item.title }}</div>
+                  <div class="fy-notification-menu__item-desc">{{ item.description }}</div>
+                  <div class="fy-notification-menu__item-date">{{ item.date | date:'short' }}</div>
+                </div>
+                @if (!item.read) {
+                  <div class="fy-notification-menu__item-actions">
+                    <button class="fy-notification-menu__read-btn" (click)="onMarkAsRead($event, item)">
+                      <fy-icon name="check"></fy-icon>
+                    </button>
+                  </div>
+                }
+                @if (!item.read) {
+                  <div class="fy-notification-menu__unread-dot"></div>
+                }
+              </div>
+            }
+          }
+        </div>
 
-    .fy-notification-menu__footer {
-      padding: 8px 16px;
-      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));
-      display: flex;
-      flex-shrink: 0;
+        <!-- Footer -->
+        @if (resolvedConfig().showViewAll && resolvedConfig().viewAllPosition.startsWith('footer')) {
+          <div 
+            class="fy-notification-menu__footer"
+            [style.justify-content]="resolvedConfig().viewAllPosition.endsWith('right') ? 'flex-end' : 'flex-start'"
+          >
+            <button class="fy-notification-menu__action-btn" (click)="viewAll()">Ver todas</button>
+            @if (shouldScroll() && displayNotifications().length < _notifications().length) {
+              <button 
+                class="fy-notification-menu__action-btn" 
+                (click)="loadMore()"
+              >
+                Carregar mais
+              </button>
+            }
+          </div>
+        }
+      </div>
     }
-  `],
-        encapsulation: ViewEncapsulation.None
-    }),
-    __metadata("design:paramtypes", [])
-], FyNotificationMenuComponent);
-export { FyNotificationMenuComponent };
+  </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-notification-menu {\n      position: relative;\n      display: inline-block;\n    }\n\n    .fy-notification-menu__trigger {\n      background: transparent;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      border-radius: 50%;\n      transition: background 0.2s;\n    }\n\n    .fy-notification-menu__trigger:hover {\n      background: rgba(0,0,0,0.05);\n    }\n\n    .fy-notification-menu__badge {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      min-width: 18px;\n      height: 18px;\n      padding: 0 4px;\n      border-radius: 9px;\n      font-size: 10px;\n      font-weight: bold;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fy-colors-surface, #ffffff);\n    }\n\n    .fy-notification-menu__dropdown {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 8px;\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      box-shadow: var(--fy-notificationMenu-dropdown-shadow, 0 10px 40px rgba(0,0,0,0.1));\n      border: 1px solid var(--fy-notificationMenu-dropdown-borderColor, rgba(0,0,0,0.08));\n      background-color: var(--fy-notificationMenu-dropdown-background, #fff);\n      border-radius: var(--fy-notificationMenu-dropdown-borderRadius, 12px);\n      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 450px);\n    }\n\n    @media (max-width: 768px) {\n      .fy-notification-menu__dropdown {\n        position: fixed;\n        top: calc(var(--fy-layout-header-height, 64px) + 8px);\n        left: 16px;\n        right: 16px;\n        width: calc(100% - 32px) !important;\n        max-height: calc(100vh - var(--fy-layout-header-height, 64px) - 32px) !important;\n        margin-top: 0;\n        z-index: 2000;\n      }\n    }\n\n    .fy-notification-menu__header {\n      padding: 12px 16px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n      flex-shrink: 0;\n    }\n\n    .fy-notification-menu__header-actions {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-notification-menu__title {\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n      font-size: 14px;\n    }\n\n    .fy-notification-menu__action-btn {\n      background: transparent;\n      border: none;\n      color: var(--fy-colors-primary, #007aff);\n      font-size: 12px;\n      cursor: pointer;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .fy-notification-menu__action-btn:hover {\n      background: rgba(var(--fy-colors-primary-rgb), 0.08);\n    }\n\n    .fy-notification-menu__close-btn {\n      display: none;\n      background: transparent;\n      border: none;\n      color: var(--fy-colors-text, inherit);\n      font-size: 20px;\n      cursor: pointer;\n      padding: 4px;\n      line-height: 1;\n      opacity: 0.6;\n      transition: opacity 0.2s;\n    }\n\n    .fy-notification-menu__close-btn:hover {\n      opacity: 1;\n    }\n\n    @media (max-width: 768px) {\n      .fy-notification-menu__close-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    .fy-notification-menu__body {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n    }\n    .fy-notification-menu__body--scroll {\n      max-height: var(--fy-notificationMenu-dropdown-maxHeight, 320px);\n    }\n\n    .fy-notification-menu__empty {\n      padding: 32px 16px;\n      text-align: center;\n      color: var(--fy-colors-secondary, #86868b);\n      font-size: 13px;\n    }\n\n    .fy-notification-menu__item {\n      padding: 12px 16px;\n      display: flex;\n      gap: 12px;\n      cursor: pointer;\n      transition: background 0.2s;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));\n      position: relative;\n    }\n\n    .fy-notification-menu__item:hover {\n      background: rgba(0,0,0,0.02);\n    }\n\n    .fy-notification-menu__item--unread {\n      background: rgba(var(--fy-colors-primary-rgb), 0.02);\n    }\n\n    .fy-notification-menu__item--read {\n      opacity: 0.6;\n      filter: grayscale(0.4);\n      transition: all 0.3s ease;\n    }\n\n    .fy-notification-menu__item--read:hover {\n      opacity: 0.8;\n      filter: grayscale(0.2);\n    }\n\n    .fy-notification-menu__accordion-item.fy-notification-menu__item--read ::ng-deep .fy-accordion__header {\n      opacity: 0.7;\n    }\n\n    .fy-notification-menu__unread-dot {\n      position: absolute;\n      right: 12px;\n      top: 12px;\n      width: 8px;\n      height: 8px;\n      background: var(--fy-colors-primary, #007aff);\n      border-radius: 50%;\n    }\n\n    .fy-notification-menu__item-content {\n      flex: 1;\n    }\n\n    .fy-notification-menu__item-title {\n      font-weight: 600;\n      font-size: 13px;\n      margin-bottom: 2px;\n    }\n\n    .fy-notification-menu__item-desc {\n      font-size: 12px;\n      color: var(--fy-colors-secondary, #86868b);\n      line-height: 1.4;\n    }\n\n    .fy-notification-menu__item-date {\n      font-size: 11px;\n      color: var(--fy-colors-secondary, #86868b);\n      margin-top: 4px;\n      opacity: 0.7;\n    }\n\n    .fy-notification-menu__item-actions {\n      display: flex;\n      align-items: center;\n      margin-right: 20px;\n    }\n\n    .fy-notification-menu__read-btn {\n      background: transparent;\n      border: none;\n      padding: 6px;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--fy-colors-primary, #007aff);\n      opacity: 0.4;\n      transition: all 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .fy-notification-menu__read-btn:hover {\n      opacity: 1;\n      background: rgba(var(--fy-colors-primary-rgb), 0.1);\n    }\n\n    .fy-notification-menu__accordion-item {\n      display: block;\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.03));\n    }\n\n    .fy-notification-menu__footer {\n      padding: 8px 16px;\n      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n      display: flex;\n      flex-shrink: 0;\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { notifications: [{
+                type: Input
+            }], unreadCount: [{
+                type: Input
+            }], showAllNotifications: [{
+                type: Input
+            }], maxNotifications: [{
+                type: Input
+            }], enableClearAll: [{
+                type: Input
+            }], enableAccordion: [{
+                type: Input
+            }], showViewAll: [{
+                type: Input
+            }], viewAllPosition: [{
+                type: Input
+            }], markAllAsReadOnOpen: [{
+                type: Input
+            }], markAsReadOnClick: [{
+                type: Input
+            }], readApiEndpoint: [{
+                type: Input
+            }], readApiMethod: [{
+                type: Input
+            }], readApiHeaders: [{
+                type: Input
+            }], onRead: [{
+                type: Input
+            }], onReadAll: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fyOpen: [{
+                type: Output
+            }], fyClearAll: [{
+                type: Output
+            }], fyViewAll: [{
+                type: Output
+            }], fyNotificationClick: [{
+                type: Output
+            }] } });