@ngstarter-ui/components 21.0.24 → 21.0.26

package/fesm2022/ngstarter-ui-components-marquee.mjs

@@ -1,15 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, PLATFORM_ID, input, booleanAttribute, viewChild, TemplateRef, Component, Directive } from '@angular/core';
-import { isPlatformServer, NgTemplateOutlet } from '@angular/common';
+import { inject, ElementRef, PLATFORM_ID, input, booleanAttribute, viewChild, Component, Directive } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 
 class Marquee {
     _elementRef = inject(ElementRef);
     _platformId = inject(PLATFORM_ID);
     _intersectionObserver;
+    _resizeObserver;
+    _mutationObserver;
+    _measureFrame = 0;
     reverse = input(false, { ...(ngDevMode ? { debugName: "reverse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     pauseOnHover = input(false, { ...(ngDevMode ? { debugName: "pauseOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     isInView = false;
-    template = viewChild.required(TemplateRef);
+    track = viewChild.required('track');
+    sourceItem = viewChild.required('sourceItem');
     get nativeElement() {
         return this._elementRef.nativeElement;
     }
@@ -21,7 +25,7 @@ class Marquee {
             this.nativeElement.style.setProperty('--ngs-marquee-pause', changes['pauseOnHover'].currentValue ? 'paused' : 'running');
         }
     }
-    ngAfterContentInit() {
+    ngAfterViewInit() {
         if (isPlatformServer(this._platformId)) {
             return;
         }
@@ -36,21 +40,87 @@ class Marquee {
             }
         });
         this._intersectionObserver.observe(this.nativeElement);
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._queueRepeatMeasure();
+            });
+            this._resizeObserver.observe(this.nativeElement);
+            this._resizeObserver.observe(this.sourceItem().nativeElement);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this._mutationObserver = new MutationObserver(() => {
+                this._queueRepeatMeasure();
+            });
+            this._mutationObserver.observe(this.sourceItem().nativeElement, {
+                attributes: true,
+                characterData: true,
+                childList: true,
+                subtree: true
+            });
+        }
+        this._queueRepeatMeasure();
     }
     ngOnDestroy() {
         if (this._intersectionObserver) {
             this._intersectionObserver.disconnect();
         }
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        if (this._mutationObserver) {
+            this._mutationObserver.disconnect();
+        }
+        if (this._measureFrame) {
+            cancelAnimationFrame(this._measureFrame);
+        }
+    }
+    _queueRepeatMeasure() {
+        if (this._measureFrame) {
+            cancelAnimationFrame(this._measureFrame);
+        }
+        this._measureFrame = requestAnimationFrame(() => {
+            this._measureFrame = 0;
+            this._syncRepeatItems();
+        });
+    }
+    _syncRepeatItems() {
+        const viewport = this.nativeElement.querySelector('.content');
+        const item = this.sourceItem().nativeElement;
+        if (!viewport) {
+            return;
+        }
+        const viewportWidth = viewport.getBoundingClientRect().width;
+        const itemWidth = item.getBoundingClientRect().width;
+        if (viewportWidth <= 0 || itemWidth <= 0) {
+            return;
+        }
+        const repeatGap = Math.max(0, viewportWidth - itemWidth);
+        this.nativeElement.style.setProperty('--ngs-marquee-item-width', `${itemWidth}px`);
+        this.nativeElement.style.setProperty('--ngs-marquee-repeat-gap', `${repeatGap}px`);
+        this._renderClone();
+    }
+    _renderClone() {
+        const track = this.track().nativeElement;
+        const sourceItem = this.sourceItem().nativeElement;
+        track.querySelectorAll('[data-ngs-marquee-clone]').forEach(clone => clone.remove());
+        track.appendChild(this._createItemClone(sourceItem));
+    }
+    _createItemClone(sourceItem) {
+        const clone = sourceItem.cloneNode(true);
+        clone.dataset['ngsMarqueeClone'] = 'true';
+        clone.setAttribute('aria-hidden', 'true');
+        clone.setAttribute('inert', '');
+        return clone;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Marquee, isStandalone: true, selector: "ngs-marquee", inputs: { reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-marquee" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["ngsMarquee"], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n\n<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;display:flex;gap:var(--ngs-marquee-gap);overflow:hidden;padding:.5rem;flex-direction:row}:host .content .item{flex-direction:row;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse)}:host .content .item{display:flex;gap:var(--ngs-marquee-gap);flex-shrink:0}:host .content:hover>.item{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view>.item{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--ngs-marquee-gap)))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Marquee, isStandalone: true, selector: "ngs-marquee", inputs: { reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-marquee" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "sourceItem", first: true, predicate: ["sourceItem"], descendants: true, isSignal: true }], exportAs: ["ngsMarquee"], usesOnChanges: true, ngImport: i0, template: "<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div #track class=\"track\">\n    <div #sourceItem class=\"item\">\n      <ng-content/>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-repeat-gap: var(--ngs-marquee-gap);--ngs-marquee-item-width: 0px;--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;overflow:hidden;padding:.5rem}:host .content .track{display:flex;gap:var(--ngs-marquee-repeat-gap);width:max-content;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse);will-change:transform}:host .content .item{display:flex;flex-shrink:0;white-space:nowrap}:host .content:hover .track{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view .track{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc((var(--ngs-marquee-item-width) + var(--ngs-marquee-repeat-gap)) * -1))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marquee, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-marquee', exportAs: 'ngsMarquee', imports: [NgTemplateOutlet], host: {
+            args: [{ selector: 'ngs-marquee', exportAs: 'ngsMarquee', host: {
                         'class': 'ngs-marquee'
-                    }, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n\n<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;display:flex;gap:var(--ngs-marquee-gap);overflow:hidden;padding:.5rem;flex-direction:row}:host .content .item{flex-direction:row;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse)}:host .content .item{display:flex;gap:var(--ngs-marquee-gap);flex-shrink:0}:host .content:hover>.item{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view>.item{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--ngs-marquee-gap)))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+                    }, template: "<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div #track class=\"track\">\n    <div #sourceItem class=\"item\">\n      <ng-content/>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-repeat-gap: var(--ngs-marquee-gap);--ngs-marquee-item-width: 0px;--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;overflow:hidden;padding:.5rem}:host .content .track{display:flex;gap:var(--ngs-marquee-repeat-gap);width:max-content;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse);will-change:transform}:host .content .item{display:flex;flex-shrink:0;white-space:nowrap}:host .content:hover .track{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view .track{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc((var(--ngs-marquee-item-width) + var(--ngs-marquee-repeat-gap)) * -1))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], sourceItem: [{ type: i0.ViewChild, args: ['sourceItem', { isSignal: true }] }] } });
 
 class MarqueeItemDirective {
     _elementRef = inject(ElementRef);

package/fesm2022/ngstarter-ui-components-marquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-marquee.mjs","sources":["../../../projects/components/marquee/src/marquee/marquee.ts","../../../projects/components/marquee/src/marquee/marquee.html","../../../projects/components/marquee/src/marquee-item.directive.ts","../../../projects/components/marquee/ngstarter-ui-components-marquee.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  input,\n  viewChild,\n  AfterContentInit,\n  inject,\n  PLATFORM_ID,\n  booleanAttribute,\n  OnChanges,\n  SimpleChanges,\n  OnDestroy,\n  TemplateRef\n} from '@angular/core';\nimport { isPlatformServer, NgTemplateOutlet } from '@angular/common';\n\n@Component({\n  selector: 'ngs-marquee',\n  exportAs: 'ngsMarquee',\n  imports: [NgTemplateOutlet],\n  templateUrl: './marquee.html',\n  styleUrl: './marquee.scss',\n  host: {\n    'class': 'ngs-marquee'\n  }\n})\nexport class Marquee implements AfterContentInit, OnChanges, OnDestroy {\n  private _elementRef = inject(ElementRef);\n  private _platformId = inject(PLATFORM_ID);\n  private _intersectionObserver?: IntersectionObserver;\n\n  reverse = input(false, {\n    transform: booleanAttribute\n  });\n  pauseOnHover = input(false, {\n    transform: booleanAttribute\n  });\n\n  protected isInView = false;\n\n  readonly template = viewChild.required(TemplateRef);\n\n  protected get nativeElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['reverse']) {\n      this.nativeElement.style.setProperty('--ngs-marquee-reverse', changes['reverse'].currentValue ? 'reverse' : '');\n    }\n\n    if (changes['pauseOnHover']) {\n      this.nativeElement.style.setProperty('--ngs-marquee-pause', changes['pauseOnHover'].currentValue ? 'paused' : 'running');\n    }\n  }\n\n  ngAfterContentInit(): void {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    this._intersectionObserver = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        if (!this.isInView) {\n          this.isInView = true;\n        }\n      } else if (this.isInView) {\n        this.isInView = false;\n      }\n    });\n    this._intersectionObserver.observe(this.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    if (this._intersectionObserver) {\n      this._intersectionObserver.disconnect();\n    }\n  }\n}\n","<ng-template>\n  <ng-content/>\n</ng-template>\n\n<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n</div>\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngsMarqueeItem]',\n  standalone: true\n})\nexport class MarqueeItemDirective {\n  private _elementRef = inject(ElementRef);\n\n  get nativeElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-marquee.mjs","sources":["../../../projects/components/marquee/src/marquee/marquee.ts","../../../projects/components/marquee/src/marquee/marquee.html","../../../projects/components/marquee/src/marquee-item.directive.ts","../../../projects/components/marquee/ngstarter-ui-components-marquee.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  input,\n  viewChild,\n  AfterViewInit,\n  inject,\n  PLATFORM_ID,\n  booleanAttribute,\n  OnChanges,\n  SimpleChanges,\n  OnDestroy\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\n\n@Component({\n  selector: 'ngs-marquee',\n  exportAs: 'ngsMarquee',\n  templateUrl: './marquee.html',\n  styleUrl: './marquee.scss',\n  host: {\n    'class': 'ngs-marquee'\n  }\n})\nexport class Marquee implements AfterViewInit, OnChanges, OnDestroy {\n  private _elementRef = inject(ElementRef);\n  private _platformId = inject(PLATFORM_ID);\n  private _intersectionObserver?: IntersectionObserver;\n  private _resizeObserver?: ResizeObserver;\n  private _mutationObserver?: MutationObserver;\n  private _measureFrame = 0;\n\n  reverse = input(false, {\n    transform: booleanAttribute\n  });\n  pauseOnHover = input(false, {\n    transform: booleanAttribute\n  });\n\n  protected isInView = false;\n\n  readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n  readonly sourceItem = viewChild.required<ElementRef<HTMLElement>>('sourceItem');\n\n  protected get nativeElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['reverse']) {\n      this.nativeElement.style.setProperty('--ngs-marquee-reverse', changes['reverse'].currentValue ? 'reverse' : '');\n    }\n\n    if (changes['pauseOnHover']) {\n      this.nativeElement.style.setProperty('--ngs-marquee-pause', changes['pauseOnHover'].currentValue ? 'paused' : 'running');\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    this._intersectionObserver = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        if (!this.isInView) {\n          this.isInView = true;\n        }\n      } else if (this.isInView) {\n        this.isInView = false;\n      }\n    });\n    this._intersectionObserver.observe(this.nativeElement);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => {\n        this._queueRepeatMeasure();\n      });\n      this._resizeObserver.observe(this.nativeElement);\n      this._resizeObserver.observe(this.sourceItem().nativeElement);\n    }\n\n    if (typeof MutationObserver !== 'undefined') {\n      this._mutationObserver = new MutationObserver(() => {\n        this._queueRepeatMeasure();\n      });\n      this._mutationObserver.observe(this.sourceItem().nativeElement, {\n        attributes: true,\n        characterData: true,\n        childList: true,\n        subtree: true\n      });\n    }\n\n    this._queueRepeatMeasure();\n  }\n\n  ngOnDestroy(): void {\n    if (this._intersectionObserver) {\n      this._intersectionObserver.disconnect();\n    }\n\n    if (this._resizeObserver) {\n      this._resizeObserver.disconnect();\n    }\n\n    if (this._mutationObserver) {\n      this._mutationObserver.disconnect();\n    }\n\n    if (this._measureFrame) {\n      cancelAnimationFrame(this._measureFrame);\n    }\n  }\n\n  private _queueRepeatMeasure(): void {\n    if (this._measureFrame) {\n      cancelAnimationFrame(this._measureFrame);\n    }\n\n    this._measureFrame = requestAnimationFrame(() => {\n      this._measureFrame = 0;\n      this._syncRepeatItems();\n    });\n  }\n\n  private _syncRepeatItems(): void {\n    const viewport = this.nativeElement.querySelector<HTMLElement>('.content');\n    const item = this.sourceItem().nativeElement;\n\n    if (!viewport) {\n      return;\n    }\n\n    const viewportWidth = viewport.getBoundingClientRect().width;\n    const itemWidth = item.getBoundingClientRect().width;\n\n    if (viewportWidth <= 0 || itemWidth <= 0) {\n      return;\n    }\n\n    const repeatGap = Math.max(0, viewportWidth - itemWidth);\n\n    this.nativeElement.style.setProperty('--ngs-marquee-item-width', `${itemWidth}px`);\n    this.nativeElement.style.setProperty('--ngs-marquee-repeat-gap', `${repeatGap}px`);\n    this._renderClone();\n  }\n\n  private _renderClone(): void {\n    const track = this.track().nativeElement;\n    const sourceItem = this.sourceItem().nativeElement;\n\n    track.querySelectorAll('[data-ngs-marquee-clone]').forEach(clone => clone.remove());\n\n    track.appendChild(this._createItemClone(sourceItem));\n  }\n\n  private _createItemClone(sourceItem: HTMLElement): HTMLElement {\n    const clone = sourceItem.cloneNode(true) as HTMLElement;\n\n    clone.dataset['ngsMarqueeClone'] = 'true';\n    clone.setAttribute('aria-hidden', 'true');\n    clone.setAttribute('inert', '');\n\n    return clone;\n  }\n}\n","<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div #track class=\"track\">\n    <div #sourceItem class=\"item\">\n      <ng-content/>\n    </div>\n  </div>\n</div>\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngsMarqueeItem]',\n  standalone: true\n})\nexport class MarqueeItemDirective {\n  private _elementRef = inject(ElementRef);\n\n  get nativeElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-notifications.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, input, Directive, contentChildren, contentChild, booleanAttribute, Component, ElementRef } from '@angular/core';
+import { inject, TemplateRef, input, Directive, contentChildren, contentChild, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { Skeleton } from '@ngstarter-ui/components/skeleton';
 
@@ -26,7 +26,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[ngsNotificationControlsDef]',
-                    standalone: true
                 }]
         }] });
 
@@ -35,35 +34,62 @@ class NotificationList {
     controlsDef = contentChild(NotificationControlsDefDirective, ...(ngDevMode ? [{ debugName: "controlsDef" }] : /* istanbul ignore next */ []));
     notifications = input([], ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
     static = input(true, { ...(ngDevMode ? { debugName: "static" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _initialized = false;
-    _defsMap = new Map();
-    get controlsTpl() {
-        return this.controlsDef()?.templateRef;
-    }
-    ngAfterContentInit() {
+    notificationClick = output();
+    _initialized = true;
+    _defsMap = computed(() => {
+        const defsMap = new Map();
         this.defs().forEach((def) => {
-            this._defsMap.set(def.ngsNotificationDef(), def.templateRef);
+            defsMap.set(def.ngsNotificationDef(), def.templateRef);
         });
-        this._initialized = true;
+        return defsMap;
+    }, ...(ngDevMode ? [{ debugName: "_defsMap" }] : /* istanbul ignore next */ []));
+    get controlsTpl() {
+        return this.controlsDef()?.templateRef;
     }
     getNotificationTemplate(type) {
-        if (!this._defsMap.has(type)) {
+        const defsMap = this._defsMap();
+        if (!defsMap.has(type)) {
             throw new Error(`Invalid type "${type}" for notification def`);
         }
-        return this._defsMap.get(type);
+        return defsMap.get(type);
+    }
+    handleNotificationClick(notification, event) {
+        if (!this.static() && !this.isEventFromInteractiveElement(event)) {
+            this.notificationClick.emit(notification);
+        }
+    }
+    handleNotificationKeydown(notification, event) {
+        if (this.static() || this.isEventFromInteractiveElement(event)) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.notificationClick.emit(notification);
+        }
+    }
+    stopControlsEvent(event) {
+        event.stopPropagation();
+    }
+    isEventFromInteractiveElement(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return false;
+        }
+        return !!target.closest('a,button,input,select,textarea,[role="link"],[role="menuitem"],.controls');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NotificationList, isStandalone: true, selector: "ngs-notification-list", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-static": "static()" }, classAttribute: "ngs-notification-list" }, queries: [{ propertyName: "defs", predicate: NotificationDefDirective, isSignal: true }, { propertyName: "controlsDef", first: true, predicate: NotificationControlsDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsNotificationList"], ngImport: i0, template: "@if (_initialized) {\n  @for (notification of notifications(); track notification) {\n    <div class=\"notification\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host{--ngs-notification-list-gap: calc(var(--spacing, .25rem) * 6);display:flex;flex-direction:column;gap:var(--ngs-notification-list-gap)}:host .notification{position:relative}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NotificationList, isStandalone: true, selector: "ngs-notification-list", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick" }, host: { attributes: { "role": "list" }, properties: { "class.is-static": "static()" }, classAttribute: "ngs-notification-list" }, queries: [{ propertyName: "defs", predicate: NotificationDefDirective, isSignal: true }, { propertyName: "controlsDef", first: true, predicate: NotificationControlsDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsNotificationList"], ngImport: i0, template: "@if (_initialized) {\n  @for (notification of notifications(); track $index) {\n    <div class=\"notification\"\n         role=\"listitem\"\n         [class.is-interactive]=\"!static()\"\n         [attr.tabindex]=\"static() ? null : 0\"\n         (click)=\"handleNotificationClick(notification, $event)\"\n         (keydown)=\"handleNotificationKeydown(notification, $event)\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\"\n             (click)=\"stopControlsEvent($event)\"\n             (keydown)=\"stopControlsEvent($event)\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host{--ngs-notification-list-gap: calc(var(--spacing, .25rem) * 6);display:flex;flex-direction:column;gap:var(--ngs-notification-list-gap)}:host .notification{position:relative}:host .notification.is-interactive{outline:none}:host .notification.is-interactive:focus-visible{outline:2px solid var(--ngs-color-primary);outline-offset:calc(var(--spacing, .25rem) * 1);border-radius:var(--ngs-notification-radius, var(--ngs-radius-xl))}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationList, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-notification-list', exportAs: 'ngsNotificationList', imports: [
                         NgTemplateOutlet
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification-list',
-                        '[class.is-static]': 'static()'
-                    }, template: "@if (_initialized) {\n  @for (notification of notifications(); track notification) {\n    <div class=\"notification\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host{--ngs-notification-list-gap: calc(var(--spacing, .25rem) * 6);display:flex;flex-direction:column;gap:var(--ngs-notification-list-gap)}:host .notification{position:relative}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { defs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NotificationDefDirective), { isSignal: true }] }], controlsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NotificationControlsDefDirective), { isSignal: true }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }] } });
+                        '[class.is-static]': 'static()',
+                        'role': 'list'
+                    }, template: "@if (_initialized) {\n  @for (notification of notifications(); track $index) {\n    <div class=\"notification\"\n         role=\"listitem\"\n         [class.is-interactive]=\"!static()\"\n         [attr.tabindex]=\"static() ? null : 0\"\n         (click)=\"handleNotificationClick(notification, $event)\"\n         (keydown)=\"handleNotificationKeydown(notification, $event)\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\"\n             (click)=\"stopControlsEvent($event)\"\n             (keydown)=\"stopControlsEvent($event)\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host{--ngs-notification-list-gap: calc(var(--spacing, .25rem) * 6);display:flex;flex-direction:column;gap:var(--ngs-notification-list-gap)}:host .notification{position:relative}:host .notification.is-interactive{outline:none}:host .notification.is-interactive:focus-visible{outline:2px solid var(--ngs-color-primary);outline-offset:calc(var(--spacing, .25rem) * 1);border-radius:var(--ngs-notification-radius, var(--ngs-radius-xl))}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { defs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NotificationDefDirective), { isSignal: true }] }], controlsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NotificationControlsDefDirective), { isSignal: true }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }] } });
 
 class NotificationSkeleton {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -80,11 +106,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 class NotificationTime {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationTime, isStandalone: true, selector: "ngs-notification-time,[ngs-notification-time]", host: { classAttribute: "ngs-notification-time" }, exportAs: ["ngsNotificationTime"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationTime, isStandalone: true, selector: "ngs-notification-time,[ngs-notification-time]", host: { classAttribute: "ngs-notification-time" }, exportAs: ["ngsNotificationTime"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationTime, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-notification-time,[ngs-notification-time]', exportAs: 'ngsNotificationTime', imports: [], host: {
+            args: [{ selector: 'ngs-notification-time,[ngs-notification-time]', exportAs: 'ngsNotificationTime', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification-time'
                     }, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
@@ -95,11 +121,11 @@ class NotificationActor {
         return this.elementRef.nativeElement.tagName === 'A';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationActor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationActor, isStandalone: true, selector: "ngs-notification-actor,[ngs-notification-actor]", host: { properties: { "class.as-link": "asLink" }, classAttribute: "ngs-notification-actor" }, ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:inline-block;font-weight:600;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm)}:host.as-link:hover{cursor:pointer;text-decoration:underline}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationActor, isStandalone: true, selector: "ngs-notification-actor,[ngs-notification-actor]", host: { properties: { "class.as-link": "asLink" }, classAttribute: "ngs-notification-actor" }, ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:inline-block;font-weight:600;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm)}:host.as-link:hover{cursor:pointer;text-decoration:underline}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationActor, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-notification-actor,[ngs-notification-actor]', imports: [], host: {
+            args: [{ selector: 'ngs-notification-actor,[ngs-notification-actor]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification-actor',
                         '[class.as-link]': 'asLink'
                     }, template: "<ng-content/>\n", styles: [":host{display:inline-block;font-weight:600;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm)}:host.as-link:hover{cursor:pointer;text-decoration:underline}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
@@ -107,11 +133,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 class NotificationMessage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationMessage, isStandalone: true, selector: "ngs-notification-message", host: { classAttribute: "ngs-notification-message" }, exportAs: ["ngsNotificationMessage"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationMessage, isStandalone: true, selector: "ngs-notification-message", host: { classAttribute: "ngs-notification-message" }, exportAs: ["ngsNotificationMessage"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-notification-message', exportAs: 'ngsNotificationMessage', imports: [], host: {
+            args: [{ selector: 'ngs-notification-message', exportAs: 'ngsNotificationMessage', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification-message'
                     }, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
@@ -119,25 +145,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class Notification {
     isUnread = input(false, { ...(ngDevMode ? { debugName: "isUnread" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Notification, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Notification, isStandalone: true, selector: "ngs-notification,[ngs-notification]", inputs: { isUnread: { classPropertyName: "isUnread", publicName: "isUnread", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-unread": "isUnread()" }, classAttribute: "ngs-notification" }, exportAs: ["ngsNotification"], ngImport: i0, template: "<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n", styles: [":host{--ngs-notification-padding: calc(var(--spacing, .25rem) * 5);--ngs-notification-gap: calc(var(--spacing, .25rem) * 4);--ngs-notification-bg: var(--ngs-color-surface-container-low);--ngs-notification-hover-bg: var(--ngs-color-surface-container);--ngs-notification-is-unread-bg: var(--ngs-color-primary-200);--ngs-notification-is-unread-hover-bg: var(--ngs-color-primary-300);display:flex;width:100%;position:relative;border-radius:var(--ngs-radius-xl);gap:var(--ngs-notification-gap);padding:var(--ngs-notification-padding)}:host .avatar{position:relative}:host .avatar:empty{display:none}:host .actor:empty{display:none}:host .message:empty{display:none}:host-context(ngs-notification-list.is-static){cursor:auto}:host-context(ngs-notification-list){background:var(--ngs-notification-bg);cursor:pointer}:host-context(ngs-notification-list).is-unread{background:var(--ngs-notification-is-unread-bg)}:host-context(ngs-notification-list:not(.is-static)):hover{background:var(--ngs-notification-hover-bg)}:host-context(ngs-notification-list:not(.is-static)).is-unread:hover{background:var(--ngs-notification-is-unread-hover-bg)}:host-context(html.dark){--ngs-notification-is-unread-bg: var(--ngs-color-neutral-950);--ngs-notification-is-unread-hover-bg: var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Notification, isStandalone: true, selector: "ngs-notification,[ngs-notification]", inputs: { isUnread: { classPropertyName: "isUnread", publicName: "isUnread", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-unread": "isUnread()" }, classAttribute: "ngs-notification" }, exportAs: ["ngsNotification"], ngImport: i0, template: "<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n", styles: [":host{--ngs-notification-padding: calc(var(--spacing, .25rem) * 5);--ngs-notification-gap: calc(var(--spacing, .25rem) * 4);--ngs-notification-bg: var(--ngs-color-surface-container-lowest);--ngs-notification-hover-bg: var(--ngs-color-surface-container-low);--ngs-notification-is-unread-bg: var(--ngs-color-surface-container-low);--ngs-notification-is-unread-hover-bg: var(--ngs-color-surface-container);--ngs-notification-radius: .75rem;display:flex;width:100%;position:relative;border-radius:var(--ngs-notification-radius);gap:var(--ngs-notification-gap);padding:var(--ngs-notification-padding)}:host .avatar{position:relative}:host .avatar:empty{display:none}:host .actor:empty{display:none}:host .message:empty{display:none}:host-context(ngs-notification-list.is-static){cursor:auto}:host-context(ngs-notification-list){background:var(--ngs-notification-bg);cursor:pointer}:host-context(ngs-notification-list).is-unread{background:var(--ngs-notification-is-unread-bg)}:host-context(ngs-notification-list:not(.is-static)):hover{background:var(--ngs-notification-hover-bg)}:host-context(ngs-notification-list:not(.is-static)).is-unread:hover{background:var(--ngs-notification-is-unread-hover-bg)}:host-context(html.dark){--ngs-notification-is-unread-bg: var(--ngs-color-neutral-950);--ngs-notification-is-unread-hover-bg: var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Notification, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-notification,[ngs-notification]', exportAs: 'ngsNotification', imports: [], host: {
+            args: [{ selector: 'ngs-notification,[ngs-notification]', exportAs: 'ngsNotification', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification',
                         '[class.is-unread]': 'isUnread()'
-                    }, template: "<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n", styles: [":host{--ngs-notification-padding: calc(var(--spacing, .25rem) * 5);--ngs-notification-gap: calc(var(--spacing, .25rem) * 4);--ngs-notification-bg: var(--ngs-color-surface-container-low);--ngs-notification-hover-bg: var(--ngs-color-surface-container);--ngs-notification-is-unread-bg: var(--ngs-color-primary-200);--ngs-notification-is-unread-hover-bg: var(--ngs-color-primary-300);display:flex;width:100%;position:relative;border-radius:var(--ngs-radius-xl);gap:var(--ngs-notification-gap);padding:var(--ngs-notification-padding)}:host .avatar{position:relative}:host .avatar:empty{display:none}:host .actor:empty{display:none}:host .message:empty{display:none}:host-context(ngs-notification-list.is-static){cursor:auto}:host-context(ngs-notification-list){background:var(--ngs-notification-bg);cursor:pointer}:host-context(ngs-notification-list).is-unread{background:var(--ngs-notification-is-unread-bg)}:host-context(ngs-notification-list:not(.is-static)):hover{background:var(--ngs-notification-hover-bg)}:host-context(ngs-notification-list:not(.is-static)).is-unread:hover{background:var(--ngs-notification-is-unread-hover-bg)}:host-context(html.dark){--ngs-notification-is-unread-bg: var(--ngs-color-neutral-950);--ngs-notification-is-unread-hover-bg: var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n", styles: [":host{--ngs-notification-padding: calc(var(--spacing, .25rem) * 5);--ngs-notification-gap: calc(var(--spacing, .25rem) * 4);--ngs-notification-bg: var(--ngs-color-surface-container-lowest);--ngs-notification-hover-bg: var(--ngs-color-surface-container-low);--ngs-notification-is-unread-bg: var(--ngs-color-surface-container-low);--ngs-notification-is-unread-hover-bg: var(--ngs-color-surface-container);--ngs-notification-radius: .75rem;display:flex;width:100%;position:relative;border-radius:var(--ngs-notification-radius);gap:var(--ngs-notification-gap);padding:var(--ngs-notification-padding)}:host .avatar{position:relative}:host .avatar:empty{display:none}:host .actor:empty{display:none}:host .message:empty{display:none}:host-context(ngs-notification-list.is-static){cursor:auto}:host-context(ngs-notification-list){background:var(--ngs-notification-bg);cursor:pointer}:host-context(ngs-notification-list).is-unread{background:var(--ngs-notification-is-unread-bg)}:host-context(ngs-notification-list:not(.is-static)):hover{background:var(--ngs-notification-hover-bg)}:host-context(ngs-notification-list:not(.is-static)).is-unread:hover{background:var(--ngs-notification-is-unread-hover-bg)}:host-context(html.dark){--ngs-notification-is-unread-bg: var(--ngs-color-neutral-950);--ngs-notification-is-unread-hover-bg: var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { isUnread: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUnread", required: false }] }] } });
 
 class NotificationContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationContent, isStandalone: true, selector: "ngs-notification-content,[ngs-notification-content]", host: { classAttribute: "ngs-notification-content" }, exportAs: ["ngsNotificationContent"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;margin:calc(var(--spacing, .25rem) * 1) 0 calc(var(--spacing, .25rem) * 1) 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NotificationContent, isStandalone: true, selector: "ngs-notification-content,[ngs-notification-content]", host: { classAttribute: "ngs-notification-content" }, exportAs: ["ngsNotificationContent"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-notification-content-margin: calc(var(--spacing, .25rem) * 1.5) 0 calc(var(--spacing, .25rem) * 1.5) 0;display:block;margin:var(--ngs-notification-content-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotificationContent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-notification-content,[ngs-notification-content]', exportAs: 'ngsNotificationContent', imports: [], host: {
+            args: [{ selector: 'ngs-notification-content,[ngs-notification-content]', exportAs: 'ngsNotificationContent', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-notification-content'
-                    }, template: "<ng-content/>\n", styles: [":host{display:block;margin:calc(var(--spacing, .25rem) * 1) 0 calc(var(--spacing, .25rem) * 1) 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-content/>\n", styles: [":host{--ngs-notification-content-margin: calc(var(--spacing, .25rem) * 1.5) 0 calc(var(--spacing, .25rem) * 1.5) 0;display:block;margin:var(--ngs-notification-content-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class NotificationPropsDirective {

package/fesm2022/ngstarter-ui-components-notifications.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-notifications.mjs","sources":["../../../projects/components/notifications/src/notification-def.directive.ts","../../../projects/components/notifications/src/notification-controls-def.directive.ts","../../../projects/components/notifications/src/notification-list/notification-list.ts","../../../projects/components/notifications/src/notification-list/notification-list.html","../../../projects/components/notifications/src/notification-skeleton/notification-skeleton.ts","../../../projects/components/notifications/src/notification-skeleton/notification-skeleton.html","../../../projects/components/notifications/src/notification-time/notification-time.ts","../../../projects/components/notifications/src/notification-time/notification-time.html","../../../projects/components/notifications/src/notification-actor/notification-actor.ts","../../../projects/components/notifications/src/notification-actor/notification-actor.html","../../../projects/components/notifications/src/notification-message/notification-message.ts","../../../projects/components/notifications/src/notification-message/notification-message.html","../../../projects/components/notifications/src/notification/notification.ts","../../../projects/components/notifications/src/notification/notification.html","../../../projects/components/notifications/src/notification-content/notification-content.ts","../../../projects/components/notifications/src/notification-content/notification-content.html","../../../projects/components/notifications/src/notification-props.directive.ts","../../../projects/components/notifications/src/notification-avatar.directive.ts","../../../projects/components/notifications/ngstarter-ui-components-notifications.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationDef]',\n  standalone: true\n})\nexport class NotificationDefDirective {\n  readonly templateRef = inject(TemplateRef);\n  ngsNotificationDef = input.required<string>();\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationControlsDef]',\n  standalone: true\n})\nexport class NotificationControlsDefDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import {\n  AfterContentInit, booleanAttribute,\n  Component,\n  contentChild,\n  contentChildren,\n  input,\n  TemplateRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { NotificationDefDirective } from '../notification-def.directive';\nimport { NotificationControlsDefDirective } from '../notification-controls-def.directive';\nimport { NotificationInterface } from '../types';\n\n@Component({\n  selector: 'ngs-notification-list',\n  exportAs: 'ngsNotificationList',\n  imports: [\n    NgTemplateOutlet\n  ],\n  templateUrl: './notification-list.html',\n  styleUrl: './notification-list.scss',\n  host: {\n    'class': 'ngs-notification-list',\n    '[class.is-static]': 'static()'\n  }\n})\nexport class NotificationList<T extends NotificationInterface> implements AfterContentInit {\n  readonly defs = contentChildren(NotificationDefDirective);\n  readonly controlsDef = contentChild(NotificationControlsDefDirective);\n\n  notifications = input<T[]>([]);\n  static = input(true, {\n    transform: booleanAttribute\n  });\n\n  protected _initialized = false;\n  protected _defsMap = new Map<string, TemplateRef<any>>();\n\n  get controlsTpl(): TemplateRef<any> {\n    return this.controlsDef()?.templateRef as TemplateRef<any>;\n  }\n\n  ngAfterContentInit() {\n    this.defs().forEach((def: NotificationDefDirective) => {\n      this._defsMap.set(def.ngsNotificationDef(), def.templateRef);\n    });\n    this._initialized = true;\n  }\n\n  getNotificationTemplate(type: string): TemplateRef<any> {\n    if (!this._defsMap.has(type)) {\n      throw new Error(`Invalid type \"${type}\" for notification def`);\n    }\n\n    return this._defsMap.get(type) as TemplateRef<any>;\n  }\n}\n","@if (_initialized) {\n  @for (notification of notifications(); track notification) {\n    <div class=\"notification\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n","import { Component } from '@angular/core';\nimport { Skeleton } from '@ngstarter-ui/components/skeleton';\n\n@Component({\n  selector: 'ngs-notification-skeleton',\n  exportAs: 'ngsNotificationSkeleton',\n  imports: [\n    Skeleton\n  ],\n  templateUrl: './notification-skeleton.html',\n  styleUrl: './notification-skeleton.scss',\n  host: {\n    'class': 'ngs-notification-skeleton',\n  }\n})\nexport class NotificationSkeleton {\n\n}\n","<div class=\"flex gap-3\">\n  <ngs-skeleton roundedFull class=\"size-11\"/>\n  <div class=\"grow flex flex-col gap-2\">\n    <ngs-skeleton class=\"h-16\"/>\n    <ngs-skeleton class=\"w-20 h-3\"/>\n  </div>\n</div>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-time,[ngs-notification-time]',\n  exportAs: 'ngsNotificationTime',\n  imports: [],\n  templateUrl: './notification-time.html',\n  styleUrl: './notification-time.scss',\n  host: {\n    'class': 'ngs-notification-time'\n  }\n})\nexport class NotificationTime {\n\n}\n","<ng-content/>\n","import { Component, ElementRef, inject } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-actor,[ngs-notification-actor]',\n  imports: [],\n  templateUrl: './notification-actor.html',\n  styleUrl: './notification-actor.scss',\n  host: {\n    'class': 'ngs-notification-actor',\n    '[class.as-link]': 'asLink'\n  }\n})\nexport class NotificationActor {\n  private elementRef = inject(ElementRef);\n\n  protected get asLink() {\n    return (this.elementRef.nativeElement as HTMLElement).tagName === 'A';\n  }\n}\n","<ng-content/>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-message',\n  exportAs: 'ngsNotificationMessage',\n  imports: [],\n  templateUrl: './notification-message.html',\n  styleUrl: './notification-message.scss',\n  host: {\n    'class': 'ngs-notification-message'\n  }\n})\nexport class NotificationMessage {\n\n}\n","<ng-content/>\n","import { booleanAttribute, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification,[ngs-notification]',\n  exportAs: 'ngsNotification',\n  imports: [],\n  templateUrl: './notification.html',\n  styleUrl: './notification.scss',\n  host: {\n    'class': 'ngs-notification',\n    '[class.is-unread]': 'isUnread()'\n  }\n})\nexport class Notification {\n  isUnread = input(false, {\n    transform: booleanAttribute\n  });\n}\n","<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-content,[ngs-notification-content]',\n  exportAs: 'ngsNotificationContent',\n  imports: [],\n  templateUrl: './notification-content.html',\n  styleUrl: './notification-content.scss',\n  host: {\n    'class': 'ngs-notification-content'\n  }\n})\nexport class NotificationContent {\n\n}\n","<ng-content/>\n","import { booleanAttribute, Directive, input } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationProps]',\n  exportAs: 'ngsNotificationProps',\n  standalone: true,\n  host: {\n    'class': 'ngs-notification-props',\n    '[class.is-unread]': 'isUnread()',\n  }\n})\nexport class NotificationPropsDirective {\n  isUnread = input(false, {\n    transform: booleanAttribute\n  });\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationAvatar]',\n  exportAs: 'ngsNotificationAvatar',\n  host: {\n    'class': 'ngs-notification-avatar'\n  }\n})\nexport class NotificationAvatarDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-notifications.mjs","sources":["../../../projects/components/notifications/src/notification-def.directive.ts","../../../projects/components/notifications/src/notification-controls-def.directive.ts","../../../projects/components/notifications/src/notification-list/notification-list.ts","../../../projects/components/notifications/src/notification-list/notification-list.html","../../../projects/components/notifications/src/notification-skeleton/notification-skeleton.ts","../../../projects/components/notifications/src/notification-skeleton/notification-skeleton.html","../../../projects/components/notifications/src/notification-time/notification-time.ts","../../../projects/components/notifications/src/notification-time/notification-time.html","../../../projects/components/notifications/src/notification-actor/notification-actor.ts","../../../projects/components/notifications/src/notification-actor/notification-actor.html","../../../projects/components/notifications/src/notification-message/notification-message.ts","../../../projects/components/notifications/src/notification-message/notification-message.html","../../../projects/components/notifications/src/notification/notification.ts","../../../projects/components/notifications/src/notification/notification.html","../../../projects/components/notifications/src/notification-content/notification-content.ts","../../../projects/components/notifications/src/notification-content/notification-content.html","../../../projects/components/notifications/src/notification-props.directive.ts","../../../projects/components/notifications/src/notification-avatar.directive.ts","../../../projects/components/notifications/ngstarter-ui-components-notifications.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationDef]',\n  standalone: true\n})\nexport class NotificationDefDirective {\n  readonly templateRef = inject(TemplateRef);\n  ngsNotificationDef = input.required<string>();\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationControlsDef]',\n})\nexport class NotificationControlsDefDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  contentChildren,\n  input,\n  output,\n  TemplateRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { NotificationDefDirective } from '../notification-def.directive';\nimport { NotificationControlsDefDirective } from '../notification-controls-def.directive';\nimport { NotificationInterface } from '../types';\n\n@Component({\n  selector: 'ngs-notification-list',\n  exportAs: 'ngsNotificationList',\n  imports: [\n    NgTemplateOutlet\n  ],\n  templateUrl: './notification-list.html',\n  styleUrl: './notification-list.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification-list',\n    '[class.is-static]': 'static()',\n    'role': 'list'\n  }\n})\nexport class NotificationList<T extends NotificationInterface> {\n  readonly defs = contentChildren(NotificationDefDirective);\n  readonly controlsDef = contentChild(NotificationControlsDefDirective);\n\n  notifications = input<T[]>([]);\n  static = input(true, {\n    transform: booleanAttribute\n  });\n\n  readonly notificationClick = output<T>();\n\n  protected _initialized = true;\n  protected readonly _defsMap = computed(() => {\n    const defsMap = new Map<string, TemplateRef<any>>();\n\n    this.defs().forEach((def: NotificationDefDirective) => {\n      defsMap.set(def.ngsNotificationDef(), def.templateRef);\n    });\n\n    return defsMap;\n  });\n\n  get controlsTpl(): TemplateRef<any> {\n    return this.controlsDef()?.templateRef as TemplateRef<any>;\n  }\n\n  getNotificationTemplate(type: string): TemplateRef<any> {\n    const defsMap = this._defsMap();\n\n    if (!defsMap.has(type)) {\n      throw new Error(`Invalid type \"${type}\" for notification def`);\n    }\n\n    return defsMap.get(type) as TemplateRef<any>;\n  }\n\n  protected handleNotificationClick(notification: T, event: Event) {\n    if (!this.static() && !this.isEventFromInteractiveElement(event)) {\n      this.notificationClick.emit(notification);\n    }\n  }\n\n  protected handleNotificationKeydown(notification: T, event: KeyboardEvent) {\n    if (this.static() || this.isEventFromInteractiveElement(event)) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.notificationClick.emit(notification);\n    }\n  }\n\n  protected stopControlsEvent(event: Event) {\n    event.stopPropagation();\n  }\n\n  private isEventFromInteractiveElement(event: Event): boolean {\n    const target = event.target;\n\n    if (!(target instanceof HTMLElement)) {\n      return false;\n    }\n\n    return !!target.closest('a,button,input,select,textarea,[role=\"link\"],[role=\"menuitem\"],.controls');\n  }\n}\n","@if (_initialized) {\n  @for (notification of notifications(); track $index) {\n    <div class=\"notification\"\n         role=\"listitem\"\n         [class.is-interactive]=\"!static()\"\n         [attr.tabindex]=\"static() ? null : 0\"\n         (click)=\"handleNotificationClick(notification, $event)\"\n         (keydown)=\"handleNotificationKeydown(notification, $event)\">\n      <ng-container [ngTemplateOutlet]=\"getNotificationTemplate(notification.type)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n      @if (controlsDef()) {\n        <div class=\"controls\"\n             (click)=\"stopControlsEvent($event)\"\n             (keydown)=\"stopControlsEvent($event)\">\n          <ng-container [ngTemplateOutlet]=\"controlsTpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: notification }\" />\n        </div>\n      }\n    </div>\n  }\n}\n","import { Component } from '@angular/core';\nimport { Skeleton } from '@ngstarter-ui/components/skeleton';\n\n@Component({\n  selector: 'ngs-notification-skeleton',\n  exportAs: 'ngsNotificationSkeleton',\n  imports: [\n    Skeleton\n  ],\n  templateUrl: './notification-skeleton.html',\n  styleUrl: './notification-skeleton.scss',\n  host: {\n    'class': 'ngs-notification-skeleton',\n  }\n})\nexport class NotificationSkeleton {\n\n}\n","<div class=\"flex gap-3\">\n  <ngs-skeleton roundedFull class=\"size-11\"/>\n  <div class=\"grow flex flex-col gap-2\">\n    <ngs-skeleton class=\"h-16\"/>\n    <ngs-skeleton class=\"w-20 h-3\"/>\n  </div>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-time,[ngs-notification-time]',\n  exportAs: 'ngsNotificationTime',\n  imports: [],\n  templateUrl: './notification-time.html',\n  styleUrl: './notification-time.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification-time'\n  }\n})\nexport class NotificationTime {\n\n}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-actor,[ngs-notification-actor]',\n  imports: [],\n  templateUrl: './notification-actor.html',\n  styleUrl: './notification-actor.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification-actor',\n    '[class.as-link]': 'asLink'\n  }\n})\nexport class NotificationActor {\n  private elementRef = inject(ElementRef);\n\n  protected get asLink() {\n    return (this.elementRef.nativeElement as HTMLElement).tagName === 'A';\n  }\n}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-message',\n  exportAs: 'ngsNotificationMessage',\n  imports: [],\n  templateUrl: './notification-message.html',\n  styleUrl: './notification-message.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification-message'\n  }\n})\nexport class NotificationMessage {\n\n}\n","<ng-content/>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification,[ngs-notification]',\n  exportAs: 'ngsNotification',\n  imports: [],\n  templateUrl: './notification.html',\n  styleUrl: './notification.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification',\n    '[class.is-unread]': 'isUnread()'\n  }\n})\nexport class Notification {\n  isUnread = input(false, {\n    transform: booleanAttribute\n  });\n}\n","<div class=\"avatar\">\n  <ng-content select=\"[ngsNotificationAvatar]\"/>\n</div>\n<div class=\"grow\">\n  <span class=\"message\">\n    <ng-content select=\"ngs-notification-message,[ngs-notification-message]\"/>\n  </span>\n  <div class=\"content\">\n    <ng-content select=\"ngs-notification-content,[ngs-notification-content]\"/>\n  </div>\n  <ng-content select=\"ngs-notification-time,[ngs-notification-time]\"/>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-notification-content,[ngs-notification-content]',\n  exportAs: 'ngsNotificationContent',\n  imports: [],\n  templateUrl: './notification-content.html',\n  styleUrl: './notification-content.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-notification-content'\n  }\n})\nexport class NotificationContent {\n\n}\n","<ng-content/>\n","import { booleanAttribute, Directive, input } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationProps]',\n  exportAs: 'ngsNotificationProps',\n  standalone: true,\n  host: {\n    'class': 'ngs-notification-props',\n    '[class.is-unread]': 'isUnread()',\n  }\n})\nexport class NotificationPropsDirective {\n  isUnread = input(false, {\n    transform: booleanAttribute\n  });\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsNotificationAvatar]',\n  exportAs: 'ngsNotificationAvatar',\n  host: {\n    'class': 'ngs-notification-avatar'\n  }\n})\nexport class NotificationAvatarDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}