ng-prime-tools 1.1.18 → 1.1.19

package/fesm2022/ng-prime-tools.mjs

@@ -11642,6 +11642,385 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTNotificationsPageComponent {
+    constructor() {
+        this.notifications = [];
+        this.config = {};
+        this.notificationClick = new EventEmitter();
+        this.action = new EventEmitter();
+        this.globalAction = new EventEmitter();
+        this.searchText = '';
+        this.selectedFilter = 'ALL';
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+        this.defaultActions = [
+            {
+                id: 'MARK_AS_READ',
+                label: 'Marquer comme lue',
+                icon: 'pi pi-check',
+            },
+            {
+                id: 'DELETE',
+                label: 'Supprimer',
+                icon: 'pi pi-trash',
+                danger: true,
+            },
+        ];
+        this.defaultGlobalActions = [
+            {
+                id: 'MARK_ALL_AS_READ',
+                label: 'Tout marquer comme lu',
+                icon: 'pi pi-check-circle',
+            },
+        ];
+    }
+    ngOnChanges(changes) {
+        if (changes['config']?.firstChange) {
+            this.selectedFilter = this.config.defaultFilter ?? 'ALL';
+        }
+    }
+    getNotifications() {
+        return this.notifications ?? [];
+    }
+    getFilteredNotifications() {
+        const search = this.searchText.trim().toLocaleLowerCase();
+        return this.getNotifications()
+            .filter((notification) => this.matchesFilter(notification))
+            .filter((notification) => this.matchesSearch(notification, search))
+            .sort((left, right) => this.toTimestamp(right.date) - this.toTimestamp(left.date));
+    }
+    getTotalCount() {
+        return this.getNotifications().length;
+    }
+    getUnreadCount() {
+        return this.getNotifications().filter((notification) => notification.read !== true).length;
+    }
+    getReadCount() {
+        return this.getNotifications().filter((notification) => notification.read === true).length;
+    }
+    hasNotifications() {
+        return this.getNotifications().length > 0;
+    }
+    hasFilteredNotifications() {
+        return this.getFilteredNotifications().length > 0;
+    }
+    hasSearch() {
+        return this.searchText.trim().length > 0;
+    }
+    showSearch() {
+        return this.config.showSearch !== false;
+    }
+    showFilters() {
+        return this.config.showFilters !== false;
+    }
+    showCounters() {
+        return this.config.showCounters !== false;
+    }
+    showGlobalActions() {
+        return (this.config.showGlobalActions !== false &&
+            this.getGlobalActions().length > 0);
+    }
+    getTitle() {
+        return this.config.title?.trim() || 'Notifications';
+    }
+    getSubtitle() {
+        return this.config.subtitle?.trim() || 'Consultez toutes vos notifications';
+    }
+    getEmptyText() {
+        return this.config.emptyText?.trim() || 'Aucune notification';
+    }
+    getNoSearchResultText() {
+        return (this.config.noSearchResultText?.trim() ||
+            'Aucune notification ne correspond à votre recherche');
+    }
+    getEmptyIcon() {
+        return this.config.emptyIcon?.trim() || 'pi pi-bell-slash';
+    }
+    getSearchPlaceholder() {
+        return (this.config.searchPlaceholder?.trim() || 'Rechercher une notification...');
+    }
+    getAllLabel() {
+        return this.config.allLabel?.trim() || 'Toutes';
+    }
+    getUnreadLabel() {
+        return this.config.unreadLabel?.trim() || 'Non lues';
+    }
+    getReadLabel() {
+        return this.config.readLabel?.trim() || 'Lues';
+    }
+    selectFilter(filter) {
+        this.selectedFilter = filter;
+    }
+    isFilterSelected(filter) {
+        return this.selectedFilter === filter;
+    }
+    onSearch(value) {
+        this.searchText = value ?? '';
+    }
+    clearSearch() {
+        this.searchText = '';
+    }
+    onNotificationClick(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.closeMenus();
+        this.notificationClick.emit({
+            notification,
+        });
+    }
+    toggleActionMenu(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.isGlobalActionMenuOpen = false;
+        this.openedActionMenuId =
+            this.openedActionMenuId === notification.id ? null : notification.id;
+    }
+    onActionMenuClick(event) {
+        event.stopPropagation();
+    }
+    onActionClick(notification, menuAction, event) {
+        event.stopPropagation();
+        if (notification.disabled || menuAction.disabled) {
+            return;
+        }
+        this.action.emit({
+            notification,
+            action: menuAction,
+        });
+        this.openedActionMenuId = null;
+    }
+    toggleGlobalActionMenu(event) {
+        event.stopPropagation();
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = !this.isGlobalActionMenuOpen;
+    }
+    onGlobalActionMenuClick(event) {
+        event.stopPropagation();
+    }
+    onGlobalActionClick(menuAction, event) {
+        event.stopPropagation();
+        if (menuAction.disabled) {
+            return;
+        }
+        this.globalAction.emit({
+            action: menuAction,
+            notifications: this.getNotifications(),
+        });
+        this.isGlobalActionMenuOpen = false;
+    }
+    closeMenus() {
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+    }
+    getNotificationClasses(notification) {
+        const classes = ['pt-notifications-page-item'];
+        if (notification.read !== true) {
+            classes.push('unread');
+        }
+        if (notification.disabled) {
+            classes.push('disabled');
+        }
+        if (notification.styleClass) {
+            classes.push(notification.styleClass);
+        }
+        return classes.join(' ');
+    }
+    getNotificationIcon(notification) {
+        return notification.icon?.trim() || 'pi pi-bell';
+    }
+    getNotificationIconStyles(notification) {
+        return {
+            color: notification.iconColor ??
+                'var(--pt-notifications-page-icon-color, #3F2564)',
+        };
+    }
+    getActions(notification) {
+        const configuredActions = notification.actions !== undefined
+            ? notification.actions
+            : this.defaultActions;
+        return configuredActions.filter((menuAction) => {
+            if (menuAction.visible === false) {
+                return false;
+            }
+            if (menuAction.id === 'MARK_AS_READ' && notification.read === true) {
+                return false;
+            }
+            return true;
+        });
+    }
+    getGlobalActions() {
+        const configuredActions = this.config.globalActions !== undefined
+            ? this.config.globalActions
+            : this.defaultGlobalActions;
+        return configuredActions.filter((menuAction) => {
+            if (menuAction.visible === false) {
+                return false;
+            }
+            if (menuAction.id === 'MARK_ALL_AS_READ' && this.getUnreadCount() === 0) {
+                return false;
+            }
+            return true;
+        });
+    }
+    hasActions(notification) {
+        return this.getActions(notification).length > 0;
+    }
+    isActionMenuOpen(notification) {
+        return this.openedActionMenuId === notification.id;
+    }
+    getActionClasses(menuAction) {
+        const classes = ['pt-notifications-page-action-item'];
+        if (menuAction.danger) {
+            classes.push('danger');
+        }
+        if (menuAction.disabled) {
+            classes.push('disabled');
+        }
+        return classes.join(' ');
+    }
+    hasMetadata(notification) {
+        return !!(notification.date || notification.sender?.trim());
+    }
+    getDateText(notification) {
+        if (!notification.date) {
+            return '';
+        }
+        const date = this.toDate(notification.date);
+        if (!date) {
+            return String(notification.date);
+        }
+        return this.formatRelativeDate(date);
+    }
+    matchesFilter(notification) {
+        switch (this.selectedFilter) {
+            case 'UNREAD':
+                return notification.read !== true;
+            case 'READ':
+                return notification.read === true;
+            case 'ALL':
+            default:
+                return true;
+        }
+    }
+    matchesSearch(notification, search) {
+        if (!search) {
+            return true;
+        }
+        const text = notification.text?.toLocaleLowerCase() ?? '';
+        const sender = notification.sender?.toLocaleLowerCase() ?? '';
+        return text.includes(search) || sender.includes(search);
+    }
+    formatRelativeDate(date) {
+        const now = new Date();
+        const differenceMs = now.getTime() - date.getTime();
+        if (differenceMs < 0) {
+            return this.formatAbsoluteDate(date);
+        }
+        const differenceSeconds = Math.floor(differenceMs / 1000);
+        const differenceMinutes = Math.floor(differenceSeconds / 60);
+        const differenceHours = Math.floor(differenceMinutes / 60);
+        const differenceDays = this.getCalendarDayDifference(now, date);
+        if (differenceSeconds < 60) {
+            return "À l'instant";
+        }
+        if (differenceMinutes < 60) {
+            return `Il y a ${differenceMinutes} min`;
+        }
+        if (differenceDays === 0) {
+            return `Il y a ${differenceHours} h`;
+        }
+        if (differenceDays === 1) {
+            return `Hier à ${this.formatTime(date)}`;
+        }
+        if (differenceDays < 7) {
+            return `Il y a ${differenceDays} j`;
+        }
+        return this.formatAbsoluteDate(date);
+    }
+    getCalendarDayDifference(left, right) {
+        const leftDate = new Date(left.getFullYear(), left.getMonth(), left.getDate());
+        const rightDate = new Date(right.getFullYear(), right.getMonth(), right.getDate());
+        const millisecondsPerDay = 24 * 60 * 60 * 1000;
+        return Math.round((leftDate.getTime() - rightDate.getTime()) / millisecondsPerDay);
+    }
+    toDate(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        const normalized = value.trim();
+        if (!normalized) {
+            return null;
+        }
+        const parsedDate = new Date(normalized);
+        if (!Number.isNaN(parsedDate.getTime())) {
+            return parsedDate;
+        }
+        const match = normalized.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d+))?$/);
+        if (!match) {
+            return null;
+        }
+        const [, year, month, day, hour, minute, second, fraction] = match;
+        const milliseconds = fraction
+            ? Number(fraction.padEnd(3, '0').substring(0, 3))
+            : 0;
+        const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second ?? 0), milliseconds);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    formatAbsoluteDate(date) {
+        const day = this.pad2(date.getDate());
+        const month = this.pad2(date.getMonth() + 1);
+        const year = date.getFullYear();
+        return `${day}/${month}/${year} ${this.formatTime(date)}`;
+    }
+    formatTime(date) {
+        return `${this.pad2(date.getHours())}:${this.pad2(date.getMinutes())}`;
+    }
+    pad2(value) {
+        return String(value).padStart(2, '0');
+    }
+    toTimestamp(value) {
+        if (!value) {
+            return 0;
+        }
+        const date = this.toDate(value);
+        return date ? date.getTime() : 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationsPageComponent, isStandalone: false, selector: "pt-notifications-page", inputs: { notifications: "notifications", config: "config" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-notifications-page\" (click)=\"closeMenus()\">\n  <div class=\"pt-notifications-page-header\">\n    <div class=\"pt-notifications-page-heading\">\n      <div class=\"pt-notifications-page-title-row\">\n        <div class=\"pt-notifications-page-title-icon\">\n          <i class=\"pi pi-bell\"></i>\n        </div>\n\n        <div>\n          <h2 class=\"pt-notifications-page-title\">\n            {{ getTitle() }}\n          </h2>\n\n          <div class=\"pt-notifications-page-subtitle\">\n            {{ getSubtitle() }}\n          </div>\n        </div>\n      </div>\n\n      @if (showCounters()) {\n        <div class=\"pt-notifications-page-counters\">\n          <span class=\"pt-notifications-page-counter\">\n            {{ getTotalCount() }}\n            notification(s)\n          </span>\n\n          @if (getUnreadCount() > 0) {\n            <span class=\"pt-notifications-page-counter unread\">\n              {{ getUnreadCount() }}\n              non lue(s)\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showGlobalActions()) {\n      <div\n        class=\"pt-notifications-page-global-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-global-button\"\n          aria-label=\"Actions globales\"\n          (click)=\"toggleGlobalActionMenu($event)\"\n        >\n          <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n\n        @if (isGlobalActionMenuOpen) {\n          <div\n            class=\"pt-notifications-page-global-menu\"\n            (click)=\"onGlobalActionMenuClick($event)\"\n          >\n            @for (menuAction of getGlobalActions(); track menuAction.id) {\n              <button\n                type=\"button\"\n                [class]=\"getActionClasses(menuAction)\"\n                [disabled]=\"menuAction.disabled\"\n                (click)=\"onGlobalActionClick(menuAction, $event)\"\n              >\n                @if (menuAction.icon) {\n                  <i [class]=\"menuAction.icon\"></i>\n                }\n\n                <span>\n                  {{ menuAction.label }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"pt-notifications-page-toolbar\">\n    @if (showFilters()) {\n      <div class=\"pt-notifications-page-filters\">\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('ALL')\"\n          (click)=\"selectFilter('ALL')\"\n        >\n          {{ getAllLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getTotalCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('UNREAD')\"\n          (click)=\"selectFilter('UNREAD')\"\n        >\n          {{ getUnreadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getUnreadCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('READ')\"\n          (click)=\"selectFilter('READ')\"\n        >\n          {{ getReadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getReadCount() }}\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (showSearch()) {\n      <div class=\"pt-notifications-page-search\">\n        <i class=\"pi pi-search\"></i>\n\n        <input\n          type=\"text\"\n          [value]=\"searchText\"\n          [placeholder]=\"getSearchPlaceholder()\"\n          (input)=\"onSearch($any($event.target).value)\"\n        />\n\n        @if (hasSearch()) {\n          <button\n            type=\"button\"\n            class=\"pt-notifications-page-search-clear\"\n            aria-label=\"Effacer la recherche\"\n            (click)=\"clearSearch()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasFilteredNotifications()) {\n    <div class=\"pt-notifications-page-list\">\n      @for (notification of getFilteredNotifications(); track notification.id) {\n        <div\n          [class]=\"getNotificationClasses(notification)\"\n          (click)=\"onNotificationClick(notification, $event)\"\n        >\n          <div class=\"pt-notifications-page-item-icon-wrapper\">\n            <div class=\"pt-notifications-page-item-icon\">\n              <i\n                [class]=\"getNotificationIcon(notification)\"\n                [ngStyle]=\"getNotificationIconStyles(notification)\"\n              ></i>\n            </div>\n          </div>\n\n          <div class=\"pt-notifications-page-item-content\">\n            <div class=\"pt-notifications-page-item-text\">\n              {{ notification.text }}\n            </div>\n\n            @if (hasMetadata(notification)) {\n              <div class=\"pt-notifications-page-item-metadata\">\n                @if (notification.date) {\n                  <span>\n                    <i class=\"pi pi-clock\"></i>\n\n                    {{ getDateText(notification) }}\n                  </span>\n                }\n\n                @if (notification.sender?.trim()) {\n                  <span>\n                    <i class=\"pi pi-user\"></i>\n\n                    {{ notification.sender }}\n                  </span>\n                }\n              </div>\n            }\n          </div>\n\n          @if (hasActions(notification)) {\n            <div\n              class=\"pt-notifications-page-item-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notifications-page-more-button\"\n                aria-label=\"Actions notification\"\n                [disabled]=\"notification.disabled\"\n                (click)=\"toggleActionMenu(notification, $event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isActionMenuOpen(notification)) {\n                <div\n                  class=\"pt-notifications-page-action-menu\"\n                  (click)=\"onActionMenuClick($event)\"\n                >\n                  @for (\n                    menuAction of getActions(notification);\n                    track menuAction.id\n                  ) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onActionClick(notification, menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (notification.read !== true) {\n            <span class=\"pt-notifications-page-unread-indicator\"></span>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"pt-notifications-page-empty\">\n      <div class=\"pt-notifications-page-empty-icon\">\n        <i [class]=\"getEmptyIcon()\"></i>\n      </div>\n\n      <div class=\"pt-notifications-page-empty-text\">\n        @if (hasSearch()) {\n          {{ getNoSearchResultText() }}\n        } @else {\n          {{ getEmptyText() }}\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.pt-notifications-page{position:relative;width:100%;background:var(--pt-notifications-page-bg, #ffffff);border:1px solid var(--pt-notifications-page-border, #e5e7eb);border-radius:14px;overflow:visible}.pt-notifications-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-heading{display:flex;flex-direction:column;gap:.85rem}.pt-notifications-page-title-row{display:flex;align-items:center;gap:.8rem}.pt-notifications-page-title-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-title-icon-bg, #f3f0f8);color:var(--pt-notifications-page-title-icon-color, #3f2564);font-size:1.15rem}.pt-notifications-page-title{margin:0;color:var(--pt-notifications-page-title-color, #1f2937);font-size:1.25rem;font-weight:700}.pt-notifications-page-subtitle{margin-top:.2rem;color:var(--pt-notifications-page-subtitle-color, #6b7280);font-size:.875rem}.pt-notifications-page-counters{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.pt-notifications-page-counter{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:999px;background:var(--pt-notifications-page-counter-bg, #f3f4f6);color:var(--pt-notifications-page-counter-color, #4b5563);font-size:.78rem;font-weight:600}.pt-notifications-page-counter.unread{background:var(--pt-notifications-page-unread-counter-bg, #f3f0f8);color:var(--pt-notifications-page-unread-counter-color, #3f2564)}.pt-notifications-page-global-actions{position:relative}.pt-notifications-page-global-button,.pt-notifications-page-more-button,.pt-notifications-page-search-clear{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--pt-notifications-page-action-color, #6b7280)}.pt-notifications-page-global-button{width:36px;height:36px;border-radius:50%}.pt-notifications-page-global-button:hover,.pt-notifications-page-more-button:hover{background:var(--pt-notifications-page-action-hover-bg, #f3f4f6)}.pt-notifications-page-global-menu,.pt-notifications-page-action-menu{position:absolute;z-index:1000;min-width:200px;padding:.35rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0f172a24}.pt-notifications-page-global-menu{top:calc(100% + 5px);right:0}.pt-notifications-page-action-menu{top:30px;right:0}.pt-notifications-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-filters{display:flex;align-items:center;gap:.4rem}.pt-notifications-page-filter{display:flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid var(--pt-notifications-page-filter-border, #e5e7eb);border-radius:8px;background:var(--pt-notifications-page-filter-bg, #ffffff);color:var(--pt-notifications-page-filter-color, #4b5563);font-size:.82rem;font-weight:600;cursor:pointer}.pt-notifications-page-filter:hover{background:#f9fafb}.pt-notifications-page-filter.selected{border-color:var(--pt-notifications-page-primary, #3f2564);background:var(--pt-notifications-page-selected-bg, #f3f0f8);color:var(--pt-notifications-page-primary, #3f2564)}.pt-notifications-page-filter-count{min-width:20px;padding:.1rem .35rem;border-radius:999px;background:#0000000d;text-align:center;font-size:.72rem}.pt-notifications-page-search{position:relative;display:flex;align-items:center;width:min(360px,100%)}.pt-notifications-page-search>.pi-search{position:absolute;left:.85rem;color:#9ca3af}.pt-notifications-page-search input{width:100%;padding:.65rem 2.5rem .65rem 2.4rem;border:1px solid #d1d5db;border-radius:8px;outline:none;font-size:.85rem}.pt-notifications-page-search input:focus{border-color:var(--pt-notifications-page-primary, #3f2564);box-shadow:0 0 0 2px #3f256414}.pt-notifications-page-search-clear{position:absolute;right:.6rem;width:28px;height:28px}.pt-notifications-page-list{width:100%}.pt-notifications-page-item{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-item-bg, #ffffff);cursor:pointer;transition:background .15s ease}.pt-notifications-page-item:last-child{border-bottom:0}.pt-notifications-page-item:hover{background:var(--pt-notifications-page-item-hover-bg, #f9fafb)}.pt-notifications-page-item.unread{background:var(--pt-notifications-page-unread-bg, #faf8fd)}.pt-notifications-page-item.unread:hover{background:var(--pt-notifications-page-unread-hover-bg, #f6f2fa)}.pt-notifications-page-item.disabled{opacity:.55;cursor:default}.pt-notifications-page-item-icon-wrapper{flex:0 0 auto}.pt-notifications-page-item-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-item-icon-bg, #f3f4f6);font-size:1rem}.pt-notifications-page-item-content{flex:1 1 auto;min-width:0}.pt-notifications-page-item-text{color:var(--pt-notifications-page-text-color, #1f2937);font-size:.9rem;line-height:1.5}.pt-notifications-page-item.unread .pt-notifications-page-item-text{font-weight:600}.pt-notifications-page-item-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.5rem;color:var(--pt-notifications-page-metadata-color, #6b7280);font-size:.78rem}.pt-notifications-page-item-metadata span{display:inline-flex;align-items:center;gap:.35rem}.pt-notifications-page-item-actions{position:relative;flex:0 0 auto}.pt-notifications-page-more-button{width:30px;height:30px;border-radius:50%}.pt-notifications-page-action-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:6px;background:transparent;color:#374151;font-size:.8rem;text-align:left;cursor:pointer}.pt-notifications-page-action-item:hover{background:#f3f4f6}.pt-notifications-page-action-item.danger{color:#dc2626}.pt-notifications-page-action-item.disabled{opacity:.5;cursor:default}.pt-notifications-page-unread-indicator{position:absolute;top:50%;right:.5rem;width:7px;height:7px;border-radius:50%;background:var(--pt-notifications-page-unread-indicator, #3f2564);transform:translateY(-50%)}.pt-notifications-page-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:3rem;color:#6b7280;text-align:center}.pt-notifications-page-empty-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:1rem;border-radius:50%;background:#f3f4f6;color:#9ca3af;font-size:1.6rem}.pt-notifications-page-empty-text{max-width:450px;font-size:.9rem}@media(max-width:768px){.pt-notifications-page-header,.pt-notifications-page-toolbar{flex-direction:column;align-items:stretch}.pt-notifications-page-filters{overflow-x:auto}.pt-notifications-page-search{width:100%}.pt-notifications-page-item{padding:1rem 1.1rem}.pt-notifications-page-item-metadata{gap:.5rem 1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-notifications-page', standalone: false, template: "<div class=\"pt-notifications-page\" (click)=\"closeMenus()\">\n  <div class=\"pt-notifications-page-header\">\n    <div class=\"pt-notifications-page-heading\">\n      <div class=\"pt-notifications-page-title-row\">\n        <div class=\"pt-notifications-page-title-icon\">\n          <i class=\"pi pi-bell\"></i>\n        </div>\n\n        <div>\n          <h2 class=\"pt-notifications-page-title\">\n            {{ getTitle() }}\n          </h2>\n\n          <div class=\"pt-notifications-page-subtitle\">\n            {{ getSubtitle() }}\n          </div>\n        </div>\n      </div>\n\n      @if (showCounters()) {\n        <div class=\"pt-notifications-page-counters\">\n          <span class=\"pt-notifications-page-counter\">\n            {{ getTotalCount() }}\n            notification(s)\n          </span>\n\n          @if (getUnreadCount() > 0) {\n            <span class=\"pt-notifications-page-counter unread\">\n              {{ getUnreadCount() }}\n              non lue(s)\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showGlobalActions()) {\n      <div\n        class=\"pt-notifications-page-global-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-global-button\"\n          aria-label=\"Actions globales\"\n          (click)=\"toggleGlobalActionMenu($event)\"\n        >\n          <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n\n        @if (isGlobalActionMenuOpen) {\n          <div\n            class=\"pt-notifications-page-global-menu\"\n            (click)=\"onGlobalActionMenuClick($event)\"\n          >\n            @for (menuAction of getGlobalActions(); track menuAction.id) {\n              <button\n                type=\"button\"\n                [class]=\"getActionClasses(menuAction)\"\n                [disabled]=\"menuAction.disabled\"\n                (click)=\"onGlobalActionClick(menuAction, $event)\"\n              >\n                @if (menuAction.icon) {\n                  <i [class]=\"menuAction.icon\"></i>\n                }\n\n                <span>\n                  {{ menuAction.label }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"pt-notifications-page-toolbar\">\n    @if (showFilters()) {\n      <div class=\"pt-notifications-page-filters\">\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('ALL')\"\n          (click)=\"selectFilter('ALL')\"\n        >\n          {{ getAllLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getTotalCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('UNREAD')\"\n          (click)=\"selectFilter('UNREAD')\"\n        >\n          {{ getUnreadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getUnreadCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('READ')\"\n          (click)=\"selectFilter('READ')\"\n        >\n          {{ getReadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getReadCount() }}\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (showSearch()) {\n      <div class=\"pt-notifications-page-search\">\n        <i class=\"pi pi-search\"></i>\n\n        <input\n          type=\"text\"\n          [value]=\"searchText\"\n          [placeholder]=\"getSearchPlaceholder()\"\n          (input)=\"onSearch($any($event.target).value)\"\n        />\n\n        @if (hasSearch()) {\n          <button\n            type=\"button\"\n            class=\"pt-notifications-page-search-clear\"\n            aria-label=\"Effacer la recherche\"\n            (click)=\"clearSearch()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasFilteredNotifications()) {\n    <div class=\"pt-notifications-page-list\">\n      @for (notification of getFilteredNotifications(); track notification.id) {\n        <div\n          [class]=\"getNotificationClasses(notification)\"\n          (click)=\"onNotificationClick(notification, $event)\"\n        >\n          <div class=\"pt-notifications-page-item-icon-wrapper\">\n            <div class=\"pt-notifications-page-item-icon\">\n              <i\n                [class]=\"getNotificationIcon(notification)\"\n                [ngStyle]=\"getNotificationIconStyles(notification)\"\n              ></i>\n            </div>\n          </div>\n\n          <div class=\"pt-notifications-page-item-content\">\n            <div class=\"pt-notifications-page-item-text\">\n              {{ notification.text }}\n            </div>\n\n            @if (hasMetadata(notification)) {\n              <div class=\"pt-notifications-page-item-metadata\">\n                @if (notification.date) {\n                  <span>\n                    <i class=\"pi pi-clock\"></i>\n\n                    {{ getDateText(notification) }}\n                  </span>\n                }\n\n                @if (notification.sender?.trim()) {\n                  <span>\n                    <i class=\"pi pi-user\"></i>\n\n                    {{ notification.sender }}\n                  </span>\n                }\n              </div>\n            }\n          </div>\n\n          @if (hasActions(notification)) {\n            <div\n              class=\"pt-notifications-page-item-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notifications-page-more-button\"\n                aria-label=\"Actions notification\"\n                [disabled]=\"notification.disabled\"\n                (click)=\"toggleActionMenu(notification, $event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isActionMenuOpen(notification)) {\n                <div\n                  class=\"pt-notifications-page-action-menu\"\n                  (click)=\"onActionMenuClick($event)\"\n                >\n                  @for (\n                    menuAction of getActions(notification);\n                    track menuAction.id\n                  ) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onActionClick(notification, menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (notification.read !== true) {\n            <span class=\"pt-notifications-page-unread-indicator\"></span>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"pt-notifications-page-empty\">\n      <div class=\"pt-notifications-page-empty-icon\">\n        <i [class]=\"getEmptyIcon()\"></i>\n      </div>\n\n      <div class=\"pt-notifications-page-empty-text\">\n        @if (hasSearch()) {\n          {{ getNoSearchResultText() }}\n        } @else {\n          {{ getEmptyText() }}\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.pt-notifications-page{position:relative;width:100%;background:var(--pt-notifications-page-bg, #ffffff);border:1px solid var(--pt-notifications-page-border, #e5e7eb);border-radius:14px;overflow:visible}.pt-notifications-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-heading{display:flex;flex-direction:column;gap:.85rem}.pt-notifications-page-title-row{display:flex;align-items:center;gap:.8rem}.pt-notifications-page-title-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-title-icon-bg, #f3f0f8);color:var(--pt-notifications-page-title-icon-color, #3f2564);font-size:1.15rem}.pt-notifications-page-title{margin:0;color:var(--pt-notifications-page-title-color, #1f2937);font-size:1.25rem;font-weight:700}.pt-notifications-page-subtitle{margin-top:.2rem;color:var(--pt-notifications-page-subtitle-color, #6b7280);font-size:.875rem}.pt-notifications-page-counters{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.pt-notifications-page-counter{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:999px;background:var(--pt-notifications-page-counter-bg, #f3f4f6);color:var(--pt-notifications-page-counter-color, #4b5563);font-size:.78rem;font-weight:600}.pt-notifications-page-counter.unread{background:var(--pt-notifications-page-unread-counter-bg, #f3f0f8);color:var(--pt-notifications-page-unread-counter-color, #3f2564)}.pt-notifications-page-global-actions{position:relative}.pt-notifications-page-global-button,.pt-notifications-page-more-button,.pt-notifications-page-search-clear{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--pt-notifications-page-action-color, #6b7280)}.pt-notifications-page-global-button{width:36px;height:36px;border-radius:50%}.pt-notifications-page-global-button:hover,.pt-notifications-page-more-button:hover{background:var(--pt-notifications-page-action-hover-bg, #f3f4f6)}.pt-notifications-page-global-menu,.pt-notifications-page-action-menu{position:absolute;z-index:1000;min-width:200px;padding:.35rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0f172a24}.pt-notifications-page-global-menu{top:calc(100% + 5px);right:0}.pt-notifications-page-action-menu{top:30px;right:0}.pt-notifications-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-filters{display:flex;align-items:center;gap:.4rem}.pt-notifications-page-filter{display:flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid var(--pt-notifications-page-filter-border, #e5e7eb);border-radius:8px;background:var(--pt-notifications-page-filter-bg, #ffffff);color:var(--pt-notifications-page-filter-color, #4b5563);font-size:.82rem;font-weight:600;cursor:pointer}.pt-notifications-page-filter:hover{background:#f9fafb}.pt-notifications-page-filter.selected{border-color:var(--pt-notifications-page-primary, #3f2564);background:var(--pt-notifications-page-selected-bg, #f3f0f8);color:var(--pt-notifications-page-primary, #3f2564)}.pt-notifications-page-filter-count{min-width:20px;padding:.1rem .35rem;border-radius:999px;background:#0000000d;text-align:center;font-size:.72rem}.pt-notifications-page-search{position:relative;display:flex;align-items:center;width:min(360px,100%)}.pt-notifications-page-search>.pi-search{position:absolute;left:.85rem;color:#9ca3af}.pt-notifications-page-search input{width:100%;padding:.65rem 2.5rem .65rem 2.4rem;border:1px solid #d1d5db;border-radius:8px;outline:none;font-size:.85rem}.pt-notifications-page-search input:focus{border-color:var(--pt-notifications-page-primary, #3f2564);box-shadow:0 0 0 2px #3f256414}.pt-notifications-page-search-clear{position:absolute;right:.6rem;width:28px;height:28px}.pt-notifications-page-list{width:100%}.pt-notifications-page-item{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-item-bg, #ffffff);cursor:pointer;transition:background .15s ease}.pt-notifications-page-item:last-child{border-bottom:0}.pt-notifications-page-item:hover{background:var(--pt-notifications-page-item-hover-bg, #f9fafb)}.pt-notifications-page-item.unread{background:var(--pt-notifications-page-unread-bg, #faf8fd)}.pt-notifications-page-item.unread:hover{background:var(--pt-notifications-page-unread-hover-bg, #f6f2fa)}.pt-notifications-page-item.disabled{opacity:.55;cursor:default}.pt-notifications-page-item-icon-wrapper{flex:0 0 auto}.pt-notifications-page-item-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-item-icon-bg, #f3f4f6);font-size:1rem}.pt-notifications-page-item-content{flex:1 1 auto;min-width:0}.pt-notifications-page-item-text{color:var(--pt-notifications-page-text-color, #1f2937);font-size:.9rem;line-height:1.5}.pt-notifications-page-item.unread .pt-notifications-page-item-text{font-weight:600}.pt-notifications-page-item-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.5rem;color:var(--pt-notifications-page-metadata-color, #6b7280);font-size:.78rem}.pt-notifications-page-item-metadata span{display:inline-flex;align-items:center;gap:.35rem}.pt-notifications-page-item-actions{position:relative;flex:0 0 auto}.pt-notifications-page-more-button{width:30px;height:30px;border-radius:50%}.pt-notifications-page-action-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:6px;background:transparent;color:#374151;font-size:.8rem;text-align:left;cursor:pointer}.pt-notifications-page-action-item:hover{background:#f3f4f6}.pt-notifications-page-action-item.danger{color:#dc2626}.pt-notifications-page-action-item.disabled{opacity:.5;cursor:default}.pt-notifications-page-unread-indicator{position:absolute;top:50%;right:.5rem;width:7px;height:7px;border-radius:50%;background:var(--pt-notifications-page-unread-indicator, #3f2564);transform:translateY(-50%)}.pt-notifications-page-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:3rem;color:#6b7280;text-align:center}.pt-notifications-page-empty-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:1rem;border-radius:50%;background:#f3f4f6;color:#9ca3af;font-size:1.6rem}.pt-notifications-page-empty-text{max-width:450px;font-size:.9rem}@media(max-width:768px){.pt-notifications-page-header,.pt-notifications-page-toolbar{flex-direction:column;align-items:stretch}.pt-notifications-page-filters{overflow-x:auto}.pt-notifications-page-search{width:100%}.pt-notifications-page-item{padding:1rem 1.1rem}.pt-notifications-page-item-metadata{gap:.5rem 1rem}}\n"] }]
+        }], propDecorators: { notifications: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], notificationClick: [{
+                type: Output
+            }], action: [{
+                type: Output
+            }], globalAction: [{
+                type: Output
+            }] } });
+
+class PTNotificationsPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, declarations: [PTNotificationsPageComponent], imports: [CommonModule], exports: [PTNotificationsPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNotificationsPageComponent],
+                    imports: [CommonModule],
+                    exports: [PTNotificationsPageComponent],
+                }]
+        }] });
+
 // projects/ng-prime-tools/src/lib/models/form-multi-select.model.ts
 
 // projects/ng-prime-tools/src/lib/models/pt-accordion-config.model.ts
@@ -11708,5 +12087,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAccordionComponent, PTAccordionModule, PTAccordionPanelDirective, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNewsTickerComponent, PTNewsTickerDirection, PTNewsTickerModule, PTNewsTickerTrend, PTNewsTickerType, PTNotificationComponent, PTNotificationModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAccordionComponent, PTAccordionModule, PTAccordionPanelDirective, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNewsTickerComponent, PTNewsTickerDirection, PTNewsTickerModule, PTNewsTickerTrend, PTNewsTickerType, PTNotificationComponent, PTNotificationModule, PTNotificationsPageComponent, PTNotificationsPageModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map