@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs

@@ -0,0 +1,644 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { SearchInputComponent } from "@lifecorner/angular-ui-kit/search-input";
+const TYPE_ICONS = {
+	info: "information-circle",
+	success: "check-circle",
+	warning: "exclamation-triangle",
+	error: "x-circle"
+};
+const PRIORITY_LABELS = {
+	low: "Low",
+	normal: "Normal",
+	high: "High",
+	urgent: "Urgent"
+};
+var NotificationCenterComponent = class NotificationCenterComponent {
+	notifications = input.required(...ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []);
+	title = input("Notifications", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	showFilter = input(true, ...ngDevMode ? [{ debugName: "showFilter" }] : /* istanbul ignore next */ []);
+	showTimestamp = input(true, ...ngDevMode ? [{ debugName: "showTimestamp" }] : /* istanbul ignore next */ []);
+	showPriority = input(false, ...ngDevMode ? [{ debugName: "showPriority" }] : /* istanbul ignore next */ []);
+	emptyMessage = input("No notifications", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	maxHeight = input("480px", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+	groupByCategory = input(false, ...ngDevMode ? [{ debugName: "groupByCategory" }] : /* istanbul ignore next */ []);
+	dateLocale = input("de-DE", ...ngDevMode ? [{ debugName: "dateLocale" }] : /* istanbul ignore next */ []);
+	markAllReadLabel = input("Mark all read", ...ngDevMode ? [{ debugName: "markAllReadLabel" }] : /* istanbul ignore next */ []);
+	clearAllLabel = input("Clear all", ...ngDevMode ? [{ debugName: "clearAllLabel" }] : /* istanbul ignore next */ []);
+	searchPlaceholder = input("Search notifications…", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+	filterAllLabel = input("All", ...ngDevMode ? [{ debugName: "filterAllLabel" }] : /* istanbul ignore next */ []);
+	filterErrorLabel = input("Error", ...ngDevMode ? [{ debugName: "filterErrorLabel" }] : /* istanbul ignore next */ []);
+	filterWarningLabel = input("Warning", ...ngDevMode ? [{ debugName: "filterWarningLabel" }] : /* istanbul ignore next */ []);
+	filterSuccessLabel = input("Success", ...ngDevMode ? [{ debugName: "filterSuccessLabel" }] : /* istanbul ignore next */ []);
+	filterInfoLabel = input("Info", ...ngDevMode ? [{ debugName: "filterInfoLabel" }] : /* istanbul ignore next */ []);
+	dismissAriaLabel = input("Dismiss notification:", ...ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []);
+	otherCategoryLabel = input("Other", ...ngDevMode ? [{ debugName: "otherCategoryLabel" }] : /* istanbul ignore next */ []);
+	lowPriorityLabel = input("Low", ...ngDevMode ? [{ debugName: "lowPriorityLabel" }] : /* istanbul ignore next */ []);
+	highPriorityLabel = input("High", ...ngDevMode ? [{ debugName: "highPriorityLabel" }] : /* istanbul ignore next */ []);
+	urgentPriorityLabel = input("Urgent", ...ngDevMode ? [{ debugName: "urgentPriorityLabel" }] : /* istanbul ignore next */ []);
+	justNowLabel = input("Just now", ...ngDevMode ? [{ debugName: "justNowLabel" }] : /* istanbul ignore next */ []);
+	minutesAgoLabel = input("{n}m ago", ...ngDevMode ? [{ debugName: "minutesAgoLabel" }] : /* istanbul ignore next */ []);
+	hoursAgoLabel = input("{n}h ago", ...ngDevMode ? [{ debugName: "hoursAgoLabel" }] : /* istanbul ignore next */ []);
+	daysAgoLabel = input("{n}d ago", ...ngDevMode ? [{ debugName: "daysAgoLabel" }] : /* istanbul ignore next */ []);
+	notificationClick = output();
+	notificationDismiss = output();
+	notificationAction = output();
+	markAllRead = output();
+	clearAll = output();
+	activeFilter = signal("all", ...ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []);
+	searchQuery = signal("", ...ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []);
+	unreadCount = computed(() => this.notifications().filter((n) => !n.read).length, ...ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []);
+	filteredNotifications = computed(() => {
+		let items = this.notifications();
+		const filter = this.activeFilter();
+		const query = this.searchQuery().toLowerCase().trim();
+		if (filter !== "all") items = items.filter((n) => n.type === filter);
+		if (query) items = items.filter((n) => n.title.toLowerCase().includes(query) || n.message?.toLowerCase().includes(query) || n.category?.toLowerCase().includes(query));
+		return [...items].sort((a, b) => {
+			const prio = this.priorityWeight(b.priority) - this.priorityWeight(a.priority);
+			if (prio !== 0) return prio;
+			return b.timestamp.getTime() - a.timestamp.getTime();
+		});
+	}, ...ngDevMode ? [{ debugName: "filteredNotifications" }] : /* istanbul ignore next */ []);
+	groupedNotifications = computed(() => {
+		const items = this.filteredNotifications();
+		if (!this.groupByCategory()) return [{
+			category: null,
+			items
+		}];
+		const map = /* @__PURE__ */ new Map();
+		for (const n of items) {
+			const cat = n.category || this.otherCategoryLabel();
+			if (!map.has(cat)) map.set(cat, []);
+			map.get(cat).push(n);
+		}
+		return Array.from(map.entries()).map(([category, items]) => ({
+			category,
+			items
+		}));
+	}, ...ngDevMode ? [{ debugName: "groupedNotifications" }] : /* istanbul ignore next */ []);
+	filterCounts = computed(() => {
+		const items = this.notifications();
+		return {
+			all: items.length,
+			info: items.filter((n) => n.type === "info").length,
+			success: items.filter((n) => n.type === "success").length,
+			warning: items.filter((n) => n.type === "warning").length,
+			error: items.filter((n) => n.type === "error").length
+		};
+	}, ...ngDevMode ? [{ debugName: "filterCounts" }] : /* istanbul ignore next */ []);
+	hasNotifications = computed(() => this.filteredNotifications().length > 0, ...ngDevMode ? [{ debugName: "hasNotifications" }] : /* istanbul ignore next */ []);
+	getTypeIcon(type) {
+		return type ? TYPE_ICONS[type] : "information-circle";
+	}
+	getPriorityLabel(priority) {
+		switch (priority) {
+			case "low": return this.lowPriorityLabel();
+			case "high": return this.highPriorityLabel();
+			case "urgent": return this.urgentPriorityLabel();
+			default: return priority ? PRIORITY_LABELS[priority] : "";
+		}
+	}
+	formatTime(date) {
+		const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+		const mins = Math.floor(diff / 6e4);
+		if (mins < 1) return this.justNowLabel();
+		if (mins < 60) return this.minutesAgoLabel().replace("{n}", String(mins));
+		const hours = Math.floor(mins / 60);
+		if (hours < 24) return this.hoursAgoLabel().replace("{n}", String(hours));
+		const days = Math.floor(hours / 24);
+		if (days < 7) return this.daysAgoLabel().replace("{n}", String(days));
+		return date.toLocaleDateString(this.dateLocale(), {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric"
+		});
+	}
+	setFilter(filter) {
+		this.activeFilter.set(filter);
+	}
+	onSearch(query) {
+		this.searchQuery.set(query);
+	}
+	onClick(notification) {
+		this.notificationClick.emit(notification);
+	}
+	onDismiss(id, event) {
+		event.stopPropagation();
+		this.notificationDismiss.emit(id);
+	}
+	onAction(notification, event) {
+		event.stopPropagation();
+		this.notificationAction.emit(notification);
+	}
+	onMarkAllRead() {
+		this.markAllRead.emit();
+	}
+	onClearAll() {
+		this.clearAll.emit();
+	}
+	priorityWeight(p) {
+		switch (p) {
+			case "urgent": return 4;
+			case "high": return 3;
+			case "normal": return 2;
+			case "low": return 1;
+			default: return 2;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: NotificationCenterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: NotificationCenterComponent,
+		isStandalone: true,
+		selector: "lc-notification-center",
+		inputs: {
+			notifications: {
+				classPropertyName: "notifications",
+				publicName: "notifications",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showFilter: {
+				classPropertyName: "showFilter",
+				publicName: "showFilter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTimestamp: {
+				classPropertyName: "showTimestamp",
+				publicName: "showTimestamp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showPriority: {
+				classPropertyName: "showPriority",
+				publicName: "showPriority",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxHeight: {
+				classPropertyName: "maxHeight",
+				publicName: "maxHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupByCategory: {
+				classPropertyName: "groupByCategory",
+				publicName: "groupByCategory",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateLocale: {
+				classPropertyName: "dateLocale",
+				publicName: "dateLocale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			markAllReadLabel: {
+				classPropertyName: "markAllReadLabel",
+				publicName: "markAllReadLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearAllLabel: {
+				classPropertyName: "clearAllLabel",
+				publicName: "clearAllLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchPlaceholder: {
+				classPropertyName: "searchPlaceholder",
+				publicName: "searchPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterAllLabel: {
+				classPropertyName: "filterAllLabel",
+				publicName: "filterAllLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterErrorLabel: {
+				classPropertyName: "filterErrorLabel",
+				publicName: "filterErrorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterWarningLabel: {
+				classPropertyName: "filterWarningLabel",
+				publicName: "filterWarningLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterSuccessLabel: {
+				classPropertyName: "filterSuccessLabel",
+				publicName: "filterSuccessLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterInfoLabel: {
+				classPropertyName: "filterInfoLabel",
+				publicName: "filterInfoLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissAriaLabel: {
+				classPropertyName: "dismissAriaLabel",
+				publicName: "dismissAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			otherCategoryLabel: {
+				classPropertyName: "otherCategoryLabel",
+				publicName: "otherCategoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lowPriorityLabel: {
+				classPropertyName: "lowPriorityLabel",
+				publicName: "lowPriorityLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highPriorityLabel: {
+				classPropertyName: "highPriorityLabel",
+				publicName: "highPriorityLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			urgentPriorityLabel: {
+				classPropertyName: "urgentPriorityLabel",
+				publicName: "urgentPriorityLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			justNowLabel: {
+				classPropertyName: "justNowLabel",
+				publicName: "justNowLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minutesAgoLabel: {
+				classPropertyName: "minutesAgoLabel",
+				publicName: "minutesAgoLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hoursAgoLabel: {
+				classPropertyName: "hoursAgoLabel",
+				publicName: "hoursAgoLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			daysAgoLabel: {
+				classPropertyName: "daysAgoLabel",
+				publicName: "daysAgoLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			notificationClick: "notificationClick",
+			notificationDismiss: "notificationDismiss",
+			notificationAction: "notificationAction",
+			markAllRead: "markAllRead",
+			clearAll: "clearAll"
+		},
+		ngImport: i0,
+		template: "<div class=\"lc-nc\">\n  <!-- Header -->\n  <div class=\"lc-nc__header\">\n    <div class=\"lc-nc__header-left\">\n      <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n      @if (unreadCount() > 0) {\n        <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n      }\n    </div>\n    <div class=\"lc-nc__header-actions\">\n      @if (unreadCount() > 0) {\n        <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n      }\n      @if (notifications().length > 0) {\n        <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n      }\n    </div>\n  </div>\n\n  <!-- Search -->\n  <div class=\"lc-nc__search\">\n    <lc-search-input\n      class=\"lc-nc__search-field\"\n      [placeholder]=\"searchPlaceholder()\"\n      [debounceMs]=\"0\"\n      (searchChange)=\"onSearch($event)\"\n    />\n  </div>\n\n  <!-- Filters -->\n  @if (showFilter()) {\n    <div class=\"lc-nc__filters\">\n      <button\n        type=\"button\"\n        class=\"lc-nc__filter\"\n        [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n        [attr.aria-pressed]=\"activeFilter() === 'all'\"\n        (click)=\"setFilter('all')\"\n      >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n      @if (filterCounts().error > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--error\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n          [attr.aria-pressed]=\"activeFilter() === 'error'\"\n          (click)=\"setFilter('error')\"\n        >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n      }\n      @if (filterCounts().warning > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--warning\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n          [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n          (click)=\"setFilter('warning')\"\n        >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n      }\n      @if (filterCounts().success > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--success\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n          [attr.aria-pressed]=\"activeFilter() === 'success'\"\n          (click)=\"setFilter('success')\"\n        >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n      }\n      @if (filterCounts().info > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--info\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n          [attr.aria-pressed]=\"activeFilter() === 'info'\"\n          (click)=\"setFilter('info')\"\n        >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n      }\n    </div>\n  }\n\n  <!-- Notification list -->\n  <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n    @if (!hasNotifications()) {\n      <div class=\"lc-nc__empty\">\n        <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n        <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n      </div>\n    } @else {\n      @for (group of groupedNotifications(); track group.category ?? '') {\n        <div class=\"lc-nc__group\">\n          @if (group.category !== null) {\n            <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n          }\n          <!-- The whole row is a mouse target; the title is a real button so\n               keyboard and screen-reader users can activate it (its click bubbles\n               to the row), and the dismiss/action buttons stop propagation. -->\n          @for (n of group.items; track n.id) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n            <div\n              class=\"lc-nc__item\"\n              [class.lc-nc__item--unread]=\"!n.read\"\n              [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n              (click)=\"onClick(n)\"\n            >\n              <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n              <div class=\"lc-nc__item-body\">\n                <div class=\"lc-nc__item-header\">\n                  <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n                  @if (showPriority() && n.priority && n.priority !== 'normal') {\n                    <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n                      {{ getPriorityLabel(n.priority) }}\n                    </span>\n                  }\n                </div>\n                @if (n.message) {\n                  <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n                }\n                <div class=\"lc-nc__item-footer\">\n                  @if (showTimestamp()) {\n                    <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n                  }\n                  @if (n.category) {\n                    <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n                  }\n                  @if (n.actionLabel) {\n                    <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n                  }\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"lc-nc__item-dismiss\"\n                (click)=\"onDismiss(n.id, $event)\"\n                [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n              >×</button>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n",
+		styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover{background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:none;border-radius:var(--border-radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:#e1a0402e;color:var(--color-warning)}.lc-nc__item-priority--urgent{background:#9d0e0e2e;color:var(--color-error)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}, {
+			kind: "component",
+			type: SearchInputComponent,
+			selector: "lc-search-input",
+			inputs: [
+				"inputId",
+				"placeholder",
+				"size",
+				"debounceMs",
+				"disabled",
+				"ariaLabel",
+				"ariaLabelledBy",
+				"clearAriaLabel",
+				"value"
+			],
+			outputs: [
+				"valueChange",
+				"searchChange",
+				"searchSubmit"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: NotificationCenterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-notification-center",
+			standalone: true,
+			imports: [IconComponent, SearchInputComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-nc\">\n  <!-- Header -->\n  <div class=\"lc-nc__header\">\n    <div class=\"lc-nc__header-left\">\n      <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n      @if (unreadCount() > 0) {\n        <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n      }\n    </div>\n    <div class=\"lc-nc__header-actions\">\n      @if (unreadCount() > 0) {\n        <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n      }\n      @if (notifications().length > 0) {\n        <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n      }\n    </div>\n  </div>\n\n  <!-- Search -->\n  <div class=\"lc-nc__search\">\n    <lc-search-input\n      class=\"lc-nc__search-field\"\n      [placeholder]=\"searchPlaceholder()\"\n      [debounceMs]=\"0\"\n      (searchChange)=\"onSearch($event)\"\n    />\n  </div>\n\n  <!-- Filters -->\n  @if (showFilter()) {\n    <div class=\"lc-nc__filters\">\n      <button\n        type=\"button\"\n        class=\"lc-nc__filter\"\n        [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n        [attr.aria-pressed]=\"activeFilter() === 'all'\"\n        (click)=\"setFilter('all')\"\n      >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n      @if (filterCounts().error > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--error\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n          [attr.aria-pressed]=\"activeFilter() === 'error'\"\n          (click)=\"setFilter('error')\"\n        >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n      }\n      @if (filterCounts().warning > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--warning\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n          [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n          (click)=\"setFilter('warning')\"\n        >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n      }\n      @if (filterCounts().success > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--success\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n          [attr.aria-pressed]=\"activeFilter() === 'success'\"\n          (click)=\"setFilter('success')\"\n        >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n      }\n      @if (filterCounts().info > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-nc__filter lc-nc__filter--info\"\n          [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n          [attr.aria-pressed]=\"activeFilter() === 'info'\"\n          (click)=\"setFilter('info')\"\n        >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n      }\n    </div>\n  }\n\n  <!-- Notification list -->\n  <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n    @if (!hasNotifications()) {\n      <div class=\"lc-nc__empty\">\n        <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n        <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n      </div>\n    } @else {\n      @for (group of groupedNotifications(); track group.category ?? '') {\n        <div class=\"lc-nc__group\">\n          @if (group.category !== null) {\n            <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n          }\n          <!-- The whole row is a mouse target; the title is a real button so\n               keyboard and screen-reader users can activate it (its click bubbles\n               to the row), and the dismiss/action buttons stop propagation. -->\n          @for (n of group.items; track n.id) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n            <div\n              class=\"lc-nc__item\"\n              [class.lc-nc__item--unread]=\"!n.read\"\n              [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n              (click)=\"onClick(n)\"\n            >\n              <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n              <div class=\"lc-nc__item-body\">\n                <div class=\"lc-nc__item-header\">\n                  <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n                  @if (showPriority() && n.priority && n.priority !== 'normal') {\n                    <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n                      {{ getPriorityLabel(n.priority) }}\n                    </span>\n                  }\n                </div>\n                @if (n.message) {\n                  <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n                }\n                <div class=\"lc-nc__item-footer\">\n                  @if (showTimestamp()) {\n                    <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n                  }\n                  @if (n.category) {\n                    <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n                  }\n                  @if (n.actionLabel) {\n                    <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n                  }\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"lc-nc__item-dismiss\"\n                (click)=\"onDismiss(n.id, $event)\"\n                [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n              >×</button>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n",
+			styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover{background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:none;border-radius:var(--border-radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:#e1a0402e;color:var(--color-warning)}.lc-nc__item-priority--urgent{background:#9d0e0e2e;color:var(--color-error)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"]
+		}]
+	}],
+	propDecorators: {
+		notifications: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "notifications",
+				required: true
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		showFilter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showFilter",
+				required: false
+			}]
+		}],
+		showTimestamp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTimestamp",
+				required: false
+			}]
+		}],
+		showPriority: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPriority",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		groupByCategory: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupByCategory",
+				required: false
+			}]
+		}],
+		dateLocale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateLocale",
+				required: false
+			}]
+		}],
+		markAllReadLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markAllReadLabel",
+				required: false
+			}]
+		}],
+		clearAllLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearAllLabel",
+				required: false
+			}]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		filterAllLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterAllLabel",
+				required: false
+			}]
+		}],
+		filterErrorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterErrorLabel",
+				required: false
+			}]
+		}],
+		filterWarningLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterWarningLabel",
+				required: false
+			}]
+		}],
+		filterSuccessLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterSuccessLabel",
+				required: false
+			}]
+		}],
+		filterInfoLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterInfoLabel",
+				required: false
+			}]
+		}],
+		dismissAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissAriaLabel",
+				required: false
+			}]
+		}],
+		otherCategoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "otherCategoryLabel",
+				required: false
+			}]
+		}],
+		lowPriorityLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lowPriorityLabel",
+				required: false
+			}]
+		}],
+		highPriorityLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highPriorityLabel",
+				required: false
+			}]
+		}],
+		urgentPriorityLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "urgentPriorityLabel",
+				required: false
+			}]
+		}],
+		justNowLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "justNowLabel",
+				required: false
+			}]
+		}],
+		minutesAgoLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minutesAgoLabel",
+				required: false
+			}]
+		}],
+		hoursAgoLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hoursAgoLabel",
+				required: false
+			}]
+		}],
+		daysAgoLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "daysAgoLabel",
+				required: false
+			}]
+		}],
+		notificationClick: [{
+			type: i0.Output,
+			args: ["notificationClick"]
+		}],
+		notificationDismiss: [{
+			type: i0.Output,
+			args: ["notificationDismiss"]
+		}],
+		notificationAction: [{
+			type: i0.Output,
+			args: ["notificationAction"]
+		}],
+		markAllRead: [{
+			type: i0.Output,
+			args: ["markAllRead"]
+		}],
+		clearAll: [{
+			type: i0.Output,
+			args: ["clearAll"]
+		}]
+	}
+});
+export { NotificationCenterComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-notification-center.mjs.map