@candy-kingdom/bonnie 0.24.0 → 0.25.0

package/fesm2022/candy-kingdom-bonnie.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Directive, Output, Component, Input, Pipe, Optional, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { Subject, takeUntil, BehaviorSubject, NEVER, fromEvent, merge, filter } from 'rxjs';
-import * as i2 from '@angular/platform-browser';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { Injectable, EventEmitter, signal, inject, ChangeDetectorRef, effect, Output, Directive, ElementRef, Input, Component, Pipe, ViewChild, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { Subject, takeUntil, NEVER, fromEvent, merge, BehaviorSubject, filter } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
 
 /**
  * This is a TypeGen auto-generated file.
@@ -227,45 +227,43 @@ function isLocalUrlString(url) {
 }
 
 class UnsubscriberService {
-    constructor() {
-        this._destroy$ = new Subject();
-        this.takeUntilDestroy = (origin) => origin.pipe(takeUntil(this._destroy$));
-    }
+    _destroy$ = new Subject();
+    takeUntilDestroy = (origin) => origin.pipe(takeUntil(this._destroy$));
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnsubscriberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnsubscriberService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnsubscriberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnsubscriberService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnsubscriberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnsubscriberService, decorators: [{
             type: Injectable
         }] });
 
 class SrcBaseDirective {
-    constructor(_u, cd) {
-        this._u = _u;
-        this.cd = cd;
-        this.ratioChange = new EventEmitter();
-        this.srcChange = new EventEmitter();
-        this._ratioSubject = new BehaviorSubject(0);
-        this._queryChangeClearSubject = new Subject();
+    ratioChange = new EventEmitter();
+    srcChange = new EventEmitter();
+    _ratio = signal(0, ...(ngDevMode ? [{ debugName: "_ratio" }] : []));
+    ratio = this._ratio.asReadonly();
+    _queryChangeClearSubject = new Subject();
+    _data;
+    _u = inject(UnsubscriberService);
+    cd = inject(ChangeDetectorRef);
+    _effectCleanup;
+    constructor() {
         console.log('SrcBaseDirective ctor');
         this.cd.detach();
+        // Watch for ratio changes and emit
+        this._effectCleanup = effect(() => {
+            const ratio = this._ratio();
+            this.ratioChange.next(ratio);
+            this.cd.detectChanges(); // todo: verify, do i need it here
+        }, ...(ngDevMode ? [{ debugName: "_effectCleanup" }] : []));
     }
     ngOnInit() {
         console.log('SrcBaseDirective ngOnInit');
-        this._ratioSubject
-            .pipe(this._u.takeUntilDestroy)
-            .subscribe(x => {
-            this.ratioChange.next(x);
-            this.cd.detectChanges(); // todo: verify, do i need it here
-        });
         this.cd.detectChanges();
     }
-    get ratio() {
-        return this._ratioSubject.value;
-    }
     get data() {
         return this._data;
     }
@@ -280,32 +278,36 @@ class SrcBaseDirective {
         // clear mediaQuery subscriptions
         this._queryChangeClearSubject.next();
         // ratio
-        this._ratioSubject.next(0);
+        this._ratio.set(0);
         this.srcChange.next(this._data);
         if (this._data === undefined || this._data.sources.length === 0) {
             return;
         }
         const allRatios = this._data.sources
-            .flatMap(x => x.srcSet)
-            .map(x => x.meta.ratio)
+            .flatMap((x) => x.srcSet)
+            .map((x) => x.meta.ratio)
             .filter(distinct);
         if (allRatios.length === 1) {
             // same ratio for all
-            this._ratioSubject.next(allRatios[0]);
+            this._ratio.set(allRatios[0]);
             return;
         }
-        this.watchMediaQueries()
-            .subscribe(() => { this.calcRatio(); console.log('watchMediaQueries calcRatio'); });
+        this.watchMediaQueries().subscribe(() => {
+            this.calcRatio();
+            console.log('watchMediaQueries calcRatio');
+        });
         this.calcRatio();
     }
     calcRatio() {
-        if (this._data === undefined || this._data === null || this._data.sources.length === 0)
+        if (this._data === undefined ||
+            this._data === null ||
+            this._data.sources.length === 0)
             return;
         for (let i = 0; i < this._data.sources.length; i++) {
             const source = this._data.sources[i];
             const srcRatios = source.srcSet
-                .sort(descendingT(x => x.meta.width))
-                .map(x => x.meta.ratio)
+                .sort(descendingT((x) => x.meta.width))
+                .map((x) => x.meta.ratio)
                 .filter(distinct);
             if (srcRatios.length === 0) {
                 // console.warn(`each source should have srcSet with same ratio. founded: ${srcRatios.join(', ')}`);
@@ -316,49 +318,53 @@ class SrcBaseDirective {
             }
             const ratio = srcRatios[0]; // most accurate ratio in biggest image
             if (source.mediaQuery.length === 0) {
-                this._ratioSubject.next(ratio);
+                this._ratio.set(ratio);
                 return;
             }
-            if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+            if (typeof window === 'undefined' ||
+                typeof window.matchMedia === 'undefined')
                 return;
             const mediaQueryList = window.matchMedia(source.mediaQuery);
             if (mediaQueryList.matches) {
-                this._ratioSubject.next(ratio);
+                this._ratio.set(ratio);
                 return;
             }
         }
     }
     watchMediaQueries() {
         console.log('watchMediaQueries');
-        if (this._data === undefined
-            || this._data === null
-            || typeof window === 'undefined'
-            || typeof window.matchMedia === 'undefined')
+        if (this._data === undefined ||
+            this._data === null ||
+            typeof window === 'undefined' ||
+            typeof window.matchMedia === 'undefined')
             return NEVER.pipe(this._u.takeUntilDestroy, takeUntil(this._queryChangeClearSubject));
         const mediaQueries = this._data.sources
-            .map(x => x.mediaQuery)
+            .map((x) => x.mediaQuery)
             .filter(distinct)
-            .filter(x => x.length > 0);
+            .filter((x) => x.length > 0);
         console.log('watchMediaQueries mediaQueries', mediaQueries);
-        const queryObservables = mediaQueries.map(media => {
+        const queryObservables = mediaQueries.map((media) => {
             const queryList = window.matchMedia(media);
-            const observable = fromEvent(queryList, 'change')
-                .pipe(this._u.takeUntilDestroy, takeUntil(this._queryChangeClearSubject));
+            const observable = fromEvent(queryList, 'change').pipe(this._u.takeUntilDestroy, takeUntil(this._queryChangeClearSubject));
             return observable;
         });
         const combinedObservable = merge(...queryObservables);
         return combinedObservable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SrcBaseDirective, deps: [{ token: UnsubscriberService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: SrcBaseDirective, selector: "[bonSrcBase]", outputs: { ratioChange: "ratioChange", srcChange: "srcChange" }, providers: [UnsubscriberService], ngImport: i0 }); }
+    ngOnDestroy() {
+        this._effectCleanup?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SrcBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SrcBaseDirective, isStandalone: true, selector: "[bonSrcBase]", outputs: { ratioChange: "ratioChange", srcChange: "srcChange" }, providers: [UnsubscriberService], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SrcBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SrcBaseDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: '[bonSrcBase]',
-                    providers: [UnsubscriberService]
+                    providers: [UnsubscriberService],
                 }]
-        }], ctorParameters: () => [{ type: UnsubscriberService }, { type: i0.ChangeDetectorRef }], propDecorators: { ratioChange: [{
+        }], ctorParameters: () => [], propDecorators: { ratioChange: [{
                 type: Output
             }], srcChange: [{
                 type: Output
@@ -380,14 +386,12 @@ var MediaObjectFit;
 })(MediaObjectFit || (MediaObjectFit = {}));
 
 class DeviceService {
-    constructor() {
-        this.devicePixelRatio = typeof window === 'undefined' ? 1 : window.devicePixelRatio;
-        this.isSSR = typeof window === 'undefined';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DeviceService }); }
+    devicePixelRatio = typeof window === 'undefined' ? 1 : window.devicePixelRatio;
+    isSSR = typeof window === 'undefined';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DeviceService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DeviceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DeviceService, decorators: [{
             type: Injectable
         }] });
 
@@ -395,23 +399,31 @@ class DeviceServiceBase {
 }
 
 class IntersectionComponent {
-    constructor(_hostRef, _u, cd) {
-        this._hostRef = _hostRef;
-        this._u = _u;
-        this.intersected = new EventEmitter();
-        this._intersectSubject = new BehaviorSubject(false);
-        cd.detach();
+    intersected = new EventEmitter();
+    _hostRef = inject(ElementRef);
+    _u = inject(UnsubscriberService);
+    _cd = inject(ChangeDetectorRef);
+    intersectionObserver;
+    _intersected = signal(false, ...(ngDevMode ? [{ debugName: "_intersected" }] : []));
+    intersectedOnce = this._intersected.asReadonly();
+    _session;
+    _effectCleanup;
+    constructor() {
+        this._cd.detach();
         // no template with variables, so we don't need to call changeDetection
         if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
             // call intersection without any
             return;
         }
         this.intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this));
+        // Watch for intersection changes and emit when it becomes true
+        this._effectCleanup = effect(() => {
+            if (this._intersected()) {
+                this.intersected.next();
+            }
+        }, ...(ngDevMode ? [{ debugName: "_effectCleanup" }] : []));
     }
     ngOnInit() {
-        this._intersectSubject
-            .pipe(this._u.takeUntilDestroy, filter(x => x === true))
-            .subscribe(x => this.intersected.next());
     }
     set session(newSession) {
         if (this._session === newSession)
@@ -420,14 +432,11 @@ class IntersectionComponent {
         this._session = newSession;
         this.reset();
     }
-    get intersectedOnce() {
-        return this._intersectSubject.value;
-    }
     reset() {
         if (this.intersectionObserver === undefined || this.intersectionObserver === null)
             return;
         this.intersectionObserver.unobserve(this._hostRef.nativeElement);
-        this._intersectSubject.next(false);
+        this._intersected.set(false);
         this.intersectionObserver.observe(this._hostRef.nativeElement);
     }
     onIntersection(entries, observer) {
@@ -435,7 +444,7 @@ class IntersectionComponent {
             console.warn('multi entries!');
         }
         const isIntersecting = entries[0].isIntersecting;
-        this._intersectSubject.next(isIntersecting);
+        this._intersected.set(isIntersecting);
         console.log(`intersected ${isIntersecting}`, this._hostRef.nativeElement);
         // only once will recieve intersection
         if (isIntersecting) {
@@ -443,16 +452,16 @@ class IntersectionComponent {
         }
     }
     ngOnDestroy() {
-        this._intersectSubject.complete();
+        this._effectCleanup?.destroy();
         this.intersectionObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionComponent, deps: [{ token: i0.ElementRef }, { token: UnsubscriberService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: IntersectionComponent, selector: "bon-intersection", inputs: { session: "session" }, outputs: { intersected: "intersected" }, providers: [UnsubscriberService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IntersectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: IntersectionComponent, isStandalone: true, selector: "bon-intersection", inputs: { session: "session" }, outputs: { intersected: "intersected" }, providers: [UnsubscriberService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IntersectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-intersection', template: '<ng-content></ng-content>', providers: [UnsubscriberService], styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UnsubscriberService }, { type: i0.ChangeDetectorRef }], propDecorators: { intersected: [{
+            args: [{ selector: 'bon-intersection', standalone: true, template: '<ng-content></ng-content>', providers: [UnsubscriberService], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { intersected: [{
                 type: Output
             }], session: [{
                 type: Input
@@ -462,17 +471,17 @@ class EncodeURIComponentPipe {
     transform(value) {
         return encodeURIComponent(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EncodeURIComponentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: EncodeURIComponentPipe, name: "encodeURIComponent" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EncodeURIComponentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: EncodeURIComponentPipe, isStandalone: true, name: "encodeURIComponent" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EncodeURIComponentPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EncodeURIComponentPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'encodeURIComponent', pure: true }]
+            args: [{ name: 'encodeURIComponent', standalone: true, pure: true }]
         }] });
 
 function emptyImage() {
     return {
-        $type: 'image',
+        $type: 'image', // todo: remove
         type: 'image',
         sources: [],
     };
@@ -480,7 +489,7 @@ function emptyImage() {
 
 function emptyVideo() {
     return {
-        $type: 'video',
+        $type: 'video', // todo: remove
         type: 'video',
         sources: [],
     };
@@ -503,7 +512,7 @@ class LocalizeServiceBase {
     getLocalized(value, defaultValue, locale) {
         if (value === undefined)
             return defaultValue;
-        locale = locale ?? this.locale;
+        locale = locale ?? this.locale();
         const obj = value[locale] ?? defaultValue;
         return obj;
     }
@@ -518,41 +527,35 @@ class LocalizeServiceBase {
 }
 
 class LocalizePipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return '';
         return this.localizeService.getLocalizedText(value, locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizePipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: LocalizePipe, name: "localize", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocalizePipe, isStandalone: true, name: "localize", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localize', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'localize', standalone: true, pure: false }]
+        }] });
 class LocalizeObjectPipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(object, locale) {
         if (object === undefined || object === null)
             return undefined;
         return this.localizeService.getLocalized(object, undefined, locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeObjectPipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: LocalizeObjectPipe, name: "localizeObject", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocalizeObjectPipe, isStandalone: true, name: "localizeObject", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeObjectPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeObjectPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizeObject', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'localizeObject', standalone: true, pure: false }]
+        }] });
 class LocalizationIsNotEmptyPipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
@@ -560,17 +563,15 @@ class LocalizationIsNotEmptyPipe {
         const isNotEmpty = text.trim().length > 0;
         return isNotEmpty;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsNotEmptyPipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsNotEmptyPipe, name: "localizationIsNotEmpty", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsNotEmptyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsNotEmptyPipe, isStandalone: true, name: "localizationIsNotEmpty", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsNotEmptyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsNotEmptyPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizationIsNotEmpty', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'localizationIsNotEmpty', standalone: true, pure: false }]
+        }] });
 class LocalizationIsEmptyPipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return true;
@@ -578,18 +579,16 @@ class LocalizationIsEmptyPipe {
         const isEmpty = text.trim().length === 0;
         return isEmpty;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsEmptyPipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsEmptyPipe, name: "localizationIsEmpty", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsEmptyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsEmptyPipe, isStandalone: true, name: "localizationIsEmpty", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsEmptyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsEmptyPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizationIsEmpty', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'localizationIsEmpty', standalone: true, pure: false }]
+        }] });
 class LocalizeUrlPipe {
-    constructor(localizeService, domSanitizer) {
-        this.localizeService = localizeService;
-        this.domSanitizer = domSanitizer;
-    }
+    localizeService = inject(LocalizeServiceBase);
+    domSanitizer = inject(DomSanitizer);
     transform(value, locale) {
         if (value === undefined || value === null)
             return '';
@@ -597,60 +596,57 @@ class LocalizeUrlPipe {
         const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(urlString);
         return safeUrl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeUrlPipe, deps: [{ token: LocalizeServiceBase }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: LocalizeUrlPipe, name: "localizeUrl", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocalizeUrlPipe, isStandalone: true, name: "localizeUrl", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizeUrl', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }, { type: i2.DomSanitizer }] });
+            args: [{ name: 'localizeUrl', standalone: true, pure: false }]
+        }] });
 class IsLocalUrlPipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
         const isLocal = this.localizeService.isLocalUrl(value, locale);
         return isLocal;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsLocalUrlPipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: IsLocalUrlPipe, name: "isLocalUrl", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsLocalUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: IsLocalUrlPipe, isStandalone: true, name: "isLocalUrl", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsLocalUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsLocalUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'isLocalUrl', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'isLocalUrl', standalone: true, pure: false }]
+        }] });
 class IsNotLocalUrlPipe {
-    constructor(localizeService) {
-        this.localizeService = localizeService;
-    }
+    localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
         const isLocal = this.localizeService.isLocalUrl(value, locale);
         return !isLocal;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsNotLocalUrlPipe, deps: [{ token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: IsNotLocalUrlPipe, name: "isNotLocalUrl", pure: false }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsNotLocalUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: IsNotLocalUrlPipe, isStandalone: true, name: "isNotLocalUrl", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsNotLocalUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsNotLocalUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'isNotLocalUrl', pure: false }]
-        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+            args: [{ name: 'isNotLocalUrl', standalone: true, pure: false }]
+        }] });
 
 class ImageSrcDirective extends SrcBaseDirective {
     set imgsrc(value) {
         console.log('set imgsrc', value);
         this.data = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ImageSrcDirective, selector: "[imgsrc]", inputs: { imgsrc: "imgsrc" }, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ImageSrcDirective, isStandalone: true, selector: "[imgsrc]", inputs: { imgsrc: "imgsrc" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageSrcDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageSrcDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[imgsrc]'
+                    standalone: true,
+                    selector: '[imgsrc]',
                 }]
         }], propDecorators: { imgsrc: [{
                 type: Input
@@ -688,26 +684,28 @@ function getDefaultSrc(image) {
 }
 
 class MarcyImageComponent {
-    constructor(device, cd, _u, srcDir) {
-        this.device = device;
-        this.cd = cd;
-        this._u = _u;
-        this.MediaStatus = MediaStatus;
-        this.MarcyObjectFit = MediaObjectFit;
-        this.isLoaded = new EventEmitter();
-        this.sources = [];
-        this.$status = new BehaviorSubject(MediaStatus.NotSet);
-        this.defaultSrc = '';
-        this._objectFit = MediaObjectFit.Original;
+    MediaStatus = MediaStatus;
+    MarcyObjectFit = MediaObjectFit;
+    isLoaded = new EventEmitter();
+    sources = [];
+    $status = new BehaviorSubject(MediaStatus.NotSet);
+    defaultSrc = '';
+    _objectFit = MediaObjectFit.Original;
+    src;
+    device = inject(DeviceServiceBase);
+    cd = inject(ChangeDetectorRef);
+    _u = inject(UnsubscriberService);
+    _srcDir = inject(ImageSrcDirective, { optional: true });
+    constructor() {
         console.log('MarcyImageComponent ctor');
-        if (srcDir === undefined || srcDir === null)
+        if (this._srcDir === undefined || this._srcDir === null)
             throw new Error(`${MarcyImageComponent.name} should have [imgsrc] directive as source object`);
-        this.src = srcDir;
+        this.src = this._srcDir;
         // bind src changes
         this.src.srcChange
             .pipe(this._u.takeUntilDestroy)
             .subscribe(this.onSrcChange.bind(this));
-        cd.detach();
+        this.cd.detach();
     }
     ngOnInit() {
         // bind loaded event
@@ -741,15 +739,13 @@ class MarcyImageComponent {
     onLoad() {
         this.$status.next(MediaStatus.Loaded);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyImageComponent, deps: [{ token: DeviceServiceBase }, { token: i0.ChangeDetectorRef }, { token: UnsubscriberService }, { token: ImageSrcDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MarcyImageComponent, selector: "bon-image", inputs: { objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], ngImport: i0, template: "<div *ngIf=\"sources.length > 0\"\r\n     [class.knownRatio]=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\"\r\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\r\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\r\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\r\n     class=\"picture-container\">\r\n\r\n  <ng-template #pictureTemplate>\r\n    <picture>\r\n      <source *ngFor=\"let source of sources\"\r\n              [srcset]=\"source.srcSet\"\r\n              [attr.media]=\"source.media.length > 0 ? source.media : undefined\"\r\n              [attr.type]=\"source.mime.length > 0 ? source.mime : undefined\"\r\n              [attr.sizes]=\"source.sizes.length > 0 ? source.sizes : undefined\" />\r\n\r\n      <img [src]=\"defaultSrc\" (load)=\"onLoad()\" />\r\n    </picture>\r\n  </ng-template>\r\n\r\n  <noscript *ngIf=\"device.isSSR\">\r\n    <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\r\n  </noscript>\r\n\r\n  <bon-intersection #intersectionZone *ngIf=\"!device.isSSR\" [session]=\"src\" (intersected)=\"cd.detectChanges()\">\r\n\r\n    <ng-container *ngIf=\"intersectionZone.intersectedOnce\">\r\n      <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n  </bon-intersection>\r\n\r\n  <div *ngIf=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio +'%'\"></div>\r\n</div>\r\n", styles: [":host{display:block}.picture-container{overflow:hidden}.picture-container.cover picture,.picture-container.cover bon-intersection,.picture-container.contain picture,.picture-container.contain bon-intersection,.picture-container.knownRatio picture,.picture-container.knownRatio bon-intersection{width:100%;height:100%}.picture-container.cover picture>img,.picture-container.cover bon-intersection>img,.picture-container.contain picture>img,.picture-container.contain bon-intersection>img,.picture-container.knownRatio picture>img,.picture-container.knownRatio bon-intersection>img{height:100%}.picture-container.cover{height:100%}.picture-container.cover picture>img{object-fit:cover}.picture-container.contain{height:100%}.picture-container.contain picture>img{object-fit:contain}.picture-container.knownRatio{position:relative}.picture-container.knownRatio picture{position:absolute}.picture-container.knownRatio picture>img{object-fit:fill}picture{display:block;backface-visibility:hidden}picture>img{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IntersectionComponent, selector: "bon-intersection", inputs: ["session"], outputs: ["intersected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MarcyImageComponent, isStandalone: true, selector: "bon-image", inputs: { objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], ngImport: i0, template: "<div *ngIf=\"sources.length > 0\"\n     [class.knownRatio]=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\"\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\n     class=\"picture-container\">\n\n  <ng-template #pictureTemplate>\n    <picture>\n      <source *ngFor=\"let source of sources\"\n              [srcset]=\"source.srcSet\"\n              [attr.media]=\"source.media.length > 0 ? source.media : undefined\"\n              [attr.type]=\"source.mime.length > 0 ? source.mime : undefined\"\n              [attr.sizes]=\"source.sizes.length > 0 ? source.sizes : undefined\" />\n\n      <img [src]=\"defaultSrc\" (load)=\"onLoad()\" />\n    </picture>\n  </ng-template>\n\n  <noscript *ngIf=\"device.isSSR\">\n    <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n  </noscript>\n\n  <bon-intersection #intersectionZone *ngIf=\"!device.isSSR\" [session]=\"src\" (intersected)=\"cd.detectChanges()\">\n\n    <ng-container *ngIf=\"intersectionZone.intersectedOnce()\">\n      <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n    </ng-container>\n\n  </bon-intersection>\n\n  <div *ngIf=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n</div>\n", styles: [":host{display:block}.picture-container{overflow:hidden}.picture-container.cover picture,.picture-container.cover bon-intersection,.picture-container.contain picture,.picture-container.contain bon-intersection,.picture-container.knownRatio picture,.picture-container.knownRatio bon-intersection{width:100%;height:100%}.picture-container.cover picture>img,.picture-container.cover bon-intersection>img,.picture-container.contain picture>img,.picture-container.contain bon-intersection>img,.picture-container.knownRatio picture>img,.picture-container.knownRatio bon-intersection>img{height:100%}.picture-container.cover{height:100%}.picture-container.cover picture>img{object-fit:cover}.picture-container.contain{height:100%}.picture-container.contain picture>img{object-fit:contain}.picture-container.knownRatio{position:relative}.picture-container.knownRatio picture{position:absolute}.picture-container.knownRatio picture>img{object-fit:fill}picture{display:block;backface-visibility:hidden}picture>img{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IntersectionComponent, selector: "bon-intersection", inputs: ["session"], outputs: ["intersected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-image', providers: [UnsubscriberService], template: "<div *ngIf=\"sources.length > 0\"\r\n     [class.knownRatio]=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\"\r\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\r\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\r\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\r\n     class=\"picture-container\">\r\n\r\n  <ng-template #pictureTemplate>\r\n    <picture>\r\n      <source *ngFor=\"let source of sources\"\r\n              [srcset]=\"source.srcSet\"\r\n              [attr.media]=\"source.media.length > 0 ? source.media : undefined\"\r\n              [attr.type]=\"source.mime.length > 0 ? source.mime : undefined\"\r\n              [attr.sizes]=\"source.sizes.length > 0 ? source.sizes : undefined\" />\r\n\r\n      <img [src]=\"defaultSrc\" (load)=\"onLoad()\" />\r\n    </picture>\r\n  </ng-template>\r\n\r\n  <noscript *ngIf=\"device.isSSR\">\r\n    <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\r\n  </noscript>\r\n\r\n  <bon-intersection #intersectionZone *ngIf=\"!device.isSSR\" [session]=\"src\" (intersected)=\"cd.detectChanges()\">\r\n\r\n    <ng-container *ngIf=\"intersectionZone.intersectedOnce\">\r\n      <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n  </bon-intersection>\r\n\r\n  <div *ngIf=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio +'%'\"></div>\r\n</div>\r\n", styles: [":host{display:block}.picture-container{overflow:hidden}.picture-container.cover picture,.picture-container.cover bon-intersection,.picture-container.contain picture,.picture-container.contain bon-intersection,.picture-container.knownRatio picture,.picture-container.knownRatio bon-intersection{width:100%;height:100%}.picture-container.cover picture>img,.picture-container.cover bon-intersection>img,.picture-container.contain picture>img,.picture-container.contain bon-intersection>img,.picture-container.knownRatio picture>img,.picture-container.knownRatio bon-intersection>img{height:100%}.picture-container.cover{height:100%}.picture-container.cover picture>img{object-fit:cover}.picture-container.contain{height:100%}.picture-container.contain picture>img{object-fit:contain}.picture-container.knownRatio{position:relative}.picture-container.knownRatio picture{position:absolute}.picture-container.knownRatio picture>img{object-fit:fill}picture{display:block;backface-visibility:hidden}picture>img{display:block;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: DeviceServiceBase }, { type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: ImageSrcDirective, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { isLoaded: [{
+            args: [{ selector: 'bon-image', standalone: true, imports: [CommonModule, AsyncPipe, IntersectionComponent], providers: [UnsubscriberService], template: "<div *ngIf=\"sources.length > 0\"\n     [class.knownRatio]=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\"\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\n     class=\"picture-container\">\n\n  <ng-template #pictureTemplate>\n    <picture>\n      <source *ngFor=\"let source of sources\"\n              [srcset]=\"source.srcSet\"\n              [attr.media]=\"source.media.length > 0 ? source.media : undefined\"\n              [attr.type]=\"source.mime.length > 0 ? source.mime : undefined\"\n              [attr.sizes]=\"source.sizes.length > 0 ? source.sizes : undefined\" />\n\n      <img [src]=\"defaultSrc\" (load)=\"onLoad()\" />\n    </picture>\n  </ng-template>\n\n  <noscript *ngIf=\"device.isSSR\">\n    <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n  </noscript>\n\n  <bon-intersection #intersectionZone *ngIf=\"!device.isSSR\" [session]=\"src\" (intersected)=\"cd.detectChanges()\">\n\n    <ng-container *ngIf=\"intersectionZone.intersectedOnce()\">\n      <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n    </ng-container>\n\n  </bon-intersection>\n\n  <div *ngIf=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n</div>\n", styles: [":host{display:block}.picture-container{overflow:hidden}.picture-container.cover picture,.picture-container.cover bon-intersection,.picture-container.contain picture,.picture-container.contain bon-intersection,.picture-container.knownRatio picture,.picture-container.knownRatio bon-intersection{width:100%;height:100%}.picture-container.cover picture>img,.picture-container.cover bon-intersection>img,.picture-container.contain picture>img,.picture-container.contain bon-intersection>img,.picture-container.knownRatio picture>img,.picture-container.knownRatio bon-intersection>img{height:100%}.picture-container.cover{height:100%}.picture-container.cover picture>img{object-fit:cover}.picture-container.contain{height:100%}.picture-container.contain picture>img{object-fit:contain}.picture-container.knownRatio{position:relative}.picture-container.knownRatio picture{position:absolute}.picture-container.knownRatio picture>img{object-fit:fill}picture{display:block;backface-visibility:hidden}picture>img{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isLoaded: [{
                 type: Output
             }], objectFit: [{
                 type: Input
@@ -760,13 +756,14 @@ class VideoSrcDirective extends SrcBaseDirective {
         this.data = value;
         console.log('set vidsrc', value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VideoSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: VideoSrcDirective, selector: "[vidsrc]", inputs: { vidsrc: "vidsrc" }, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VideoSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VideoSrcDirective, isStandalone: true, selector: "[vidsrc]", inputs: { vidsrc: "vidsrc" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VideoSrcDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VideoSrcDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[vidsrc]'
+                    standalone: true,
+                    selector: '[vidsrc]',
                 }]
         }], propDecorators: { vidsrc: [{
                 type: Input
@@ -776,27 +773,34 @@ function isWebM(src) {
     return src.mimeType === 'video/webm';
 }
 class MarcyVideoComponent {
-    constructor(device, cd, _u, srcDir) {
-        this.device = device;
-        this.cd = cd;
-        this._u = _u;
-        this.MediaStatus = MediaStatus;
-        this.MarcyObjectFit = MediaObjectFit;
-        this.isLoaded = new EventEmitter();
-        this.$status = new BehaviorSubject(MediaStatus.NotSet);
-        this._objectFit = MediaObjectFit.Original;
+    MediaStatus = MediaStatus;
+    MarcyObjectFit = MediaObjectFit;
+    videoRef;
+    isLoaded = new EventEmitter();
+    $status = signal(MediaStatus.NotSet, ...(ngDevMode ? [{ debugName: "$status" }] : []));
+    src;
+    _effectCleanup;
+    source;
+    _objectFit = MediaObjectFit.Original;
+    device = inject(DeviceServiceBase);
+    cd = inject(ChangeDetectorRef);
+    _u = inject(UnsubscriberService);
+    _srcDir = inject(VideoSrcDirective, { optional: true });
+    constructor() {
         console.log('MarcyVideoComponent ctor');
-        if (srcDir === undefined || srcDir === null)
+        if (this._srcDir === undefined || this._srcDir === null)
             throw new Error(`${MarcyVideoComponent.name} should have [vidsrc] directive as source object`);
-        this.src = srcDir;
-        cd.detach();
+        this.src = this._srcDir;
+        this.cd.detach();
+        // Watch for status changes and emit when loaded
+        this._effectCleanup = effect(() => {
+            if (this.$status() === MediaStatus.Loaded) {
+                this.isLoaded.next();
+            }
+        }, ...(ngDevMode ? [{ debugName: "_effectCleanup" }] : []));
     }
     ngOnInit() {
         console.log('MarcyVideoComponent ngOnInit');
-        // bind loaded event
-        this.$status
-            .pipe(this._u.takeUntilDestroy, filter(status => status === MediaStatus.Loaded))
-            .subscribe(() => this.isLoaded.next());
         this.cd.detectChanges();
     }
     ngAfterViewInit() {
@@ -826,15 +830,15 @@ class MarcyVideoComponent {
         console.log('MarcyVideoComponent updateSources');
         this.source = this.findMoreSuitableSource();
         console.log('MarcyVideoComponent new source', this.source);
-        if (this.$status.value === MediaStatus.NotSet && this.source === undefined) {
+        if (this.$status() === MediaStatus.NotSet && this.source === undefined) {
             return;
         }
         if (this.source === undefined) {
-            this.$status.next(MediaStatus.NotSet);
+            this.$status.set(MediaStatus.NotSet);
             this.cd.detectChanges();
             return;
         }
-        this.$status.next(MediaStatus.NotLoaded);
+        this.$status.set(MediaStatus.NotLoaded);
         this.cd.detectChanges();
     }
     set objectFit(val) {
@@ -845,7 +849,7 @@ class MarcyVideoComponent {
         return this._objectFit;
     }
     onLoad() {
-        this.$status.next(MediaStatus.Loaded);
+        this.$status.set(MediaStatus.Loaded);
     }
     findMoreSuitableSource() {
         if (this.videoRef === undefined) {
@@ -900,15 +904,16 @@ class MarcyVideoComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyVideoComponent, deps: [{ token: DeviceServiceBase }, { token: i0.ChangeDetectorRef }, { token: UnsubscriberService }, { token: VideoSrcDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MarcyVideoComponent, selector: "bon-video", inputs: { objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div [class.knownRatio]=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\"\r\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\r\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\r\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\r\n     class=\"video-container\">\r\n\r\n  <ng-container *ngIf=\"device.isSSR ; then ssrTemplate else browserTemplate\"></ng-container>\r\n\r\n  <ng-template #videoTemplate>\r\n    <video #video\r\n           [src]=\"source !== undefined ? source.url :'' \"\r\n           (load)=\"onLoad()\"\r\n           (canplay)=\"video.muted=true;video.play();\"\r\n           playsInline\r\n           autoplay\r\n           loop\r\n           muted> </video>\r\n  </ng-template>\r\n\r\n  <ng-template #ssrTemplate>\r\n    <noscript *ngIf=\"device.isSSR\">\r\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\r\n    </noscript>\r\n  </ng-template>\r\n\r\n  <ng-template #browserTemplate>\r\n    <bon-intersection #intersectionZone [session]=\"src\" (intersected)=\"cd.detectChanges()\">\r\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\r\n    </bon-intersection>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio +'%'\"></div>\r\n</div>\r\n", styles: [":host{display:block}.video-container{background-color:#000;overflow:hidden}.video-container.cover video,.video-container.cover bon-intersection,.video-container.contain video,.video-container.contain bon-intersection,.video-container.knownRatio video,.video-container.knownRatio bon-intersection{width:100%;height:100%}.video-container.cover{height:100%}.video-container.cover video{object-fit:cover}.video-container.contain{height:100%}.video-container.contain video{object-fit:contain}.video-container.knownRatio{position:relative}.video-container.knownRatio video{position:absolute;object-fit:fill}video{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IntersectionComponent, selector: "bon-intersection", inputs: ["session"], outputs: ["intersected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    ngOnDestroy() {
+        this._effectCleanup?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MarcyVideoComponent, isStandalone: true, selector: "bon-video", inputs: { objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div [class.knownRatio]=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\"\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\n     [class.loaded]=\"$status() === MediaStatus.Loaded\"\n     class=\"video-container\">\n\n  <ng-container *ngIf=\"device.isSSR ; then ssrTemplate else browserTemplate\"></ng-container>\n\n  <ng-template #videoTemplate>\n    <video #video\n           [src]=\"source !== undefined ? source.url :'' \"\n           (load)=\"onLoad()\"\n           (canplay)=\"video.muted=true;video.play();\"\n           playsInline\n           autoplay\n           loop\n           muted> </video>\n  </ng-template>\n\n  <ng-template #ssrTemplate>\n    <noscript *ngIf=\"device.isSSR\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </noscript>\n  </ng-template>\n\n  <ng-template #browserTemplate>\n    <bon-intersection #intersectionZone [session]=\"src\" (intersected)=\"cd.detectChanges()\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </bon-intersection>\n  </ng-template>\n\n  <div *ngIf=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n</div>\n", styles: [":host{display:block}.video-container{background-color:#000;overflow:hidden}.video-container.cover video,.video-container.cover bon-intersection,.video-container.contain video,.video-container.contain bon-intersection,.video-container.knownRatio video,.video-container.knownRatio bon-intersection{width:100%;height:100%}.video-container.cover{height:100%}.video-container.cover video{object-fit:cover}.video-container.contain{height:100%}.video-container.contain video{object-fit:contain}.video-container.knownRatio{position:relative}.video-container.knownRatio video{position:absolute;object-fit:fill}video{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IntersectionComponent, selector: "bon-intersection", inputs: ["session"], outputs: ["intersected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-video', providers: [UnsubscriberService], template: "<div [class.knownRatio]=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\"\r\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\r\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\r\n     [class.loaded]=\"($status | async) === MediaStatus.Loaded\"\r\n     class=\"video-container\">\r\n\r\n  <ng-container *ngIf=\"device.isSSR ; then ssrTemplate else browserTemplate\"></ng-container>\r\n\r\n  <ng-template #videoTemplate>\r\n    <video #video\r\n           [src]=\"source !== undefined ? source.url :'' \"\r\n           (load)=\"onLoad()\"\r\n           (canplay)=\"video.muted=true;video.play();\"\r\n           playsInline\r\n           autoplay\r\n           loop\r\n           muted> </video>\r\n  </ng-template>\r\n\r\n  <ng-template #ssrTemplate>\r\n    <noscript *ngIf=\"device.isSSR\">\r\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\r\n    </noscript>\r\n  </ng-template>\r\n\r\n  <ng-template #browserTemplate>\r\n    <bon-intersection #intersectionZone [session]=\"src\" (intersected)=\"cd.detectChanges()\">\r\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\r\n    </bon-intersection>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"src.ratio > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio +'%'\"></div>\r\n</div>\r\n", styles: [":host{display:block}.video-container{background-color:#000;overflow:hidden}.video-container.cover video,.video-container.cover bon-intersection,.video-container.contain video,.video-container.contain bon-intersection,.video-container.knownRatio video,.video-container.knownRatio bon-intersection{width:100%;height:100%}.video-container.cover{height:100%}.video-container.cover video{object-fit:cover}.video-container.contain{height:100%}.video-container.contain video{object-fit:contain}.video-container.knownRatio{position:relative}.video-container.knownRatio video{position:absolute;object-fit:fill}video{display:block;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: DeviceServiceBase }, { type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: VideoSrcDirective, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { videoRef: [{
+            args: [{ selector: 'bon-video', standalone: true, imports: [CommonModule, IntersectionComponent], providers: [UnsubscriberService], template: "<div [class.knownRatio]=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\"\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\n     [class.loaded]=\"$status() === MediaStatus.Loaded\"\n     class=\"video-container\">\n\n  <ng-container *ngIf=\"device.isSSR ; then ssrTemplate else browserTemplate\"></ng-container>\n\n  <ng-template #videoTemplate>\n    <video #video\n           [src]=\"source !== undefined ? source.url :'' \"\n           (load)=\"onLoad()\"\n           (canplay)=\"video.muted=true;video.play();\"\n           playsInline\n           autoplay\n           loop\n           muted> </video>\n  </ng-template>\n\n  <ng-template #ssrTemplate>\n    <noscript *ngIf=\"device.isSSR\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </noscript>\n  </ng-template>\n\n  <ng-template #browserTemplate>\n    <bon-intersection #intersectionZone [session]=\"src\" (intersected)=\"cd.detectChanges()\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </bon-intersection>\n  </ng-template>\n\n  <div *ngIf=\"src.ratio() > 0 && objectFit === MarcyObjectFit.Original\" [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n</div>\n", styles: [":host{display:block}.video-container{background-color:#000;overflow:hidden}.video-container.cover video,.video-container.cover bon-intersection,.video-container.contain video,.video-container.contain bon-intersection,.video-container.knownRatio video,.video-container.knownRatio bon-intersection{width:100%;height:100%}.video-container.cover{height:100%}.video-container.cover video{object-fit:cover}.video-container.contain{height:100%}.video-container.contain video{object-fit:contain}.video-container.knownRatio{position:relative}.video-container.knownRatio video{position:absolute;object-fit:fill}video{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { videoRef: [{
                 type: ViewChild,
                 args: ['video']
             }], isLoaded: [{
@@ -918,13 +923,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class MarcyMediaComponent {
+    device;
+    cd;
+    _u;
+    MarcyObjectFit = MediaObjectFit;
+    isLoaded = new EventEmitter();
+    _objectFit = MediaObjectFit.Original;
+    _src;
     constructor(device, cd, _u) {
         this.device = device;
         this.cd = cd;
         this._u = _u;
-        this.MarcyObjectFit = MediaObjectFit;
-        this.isLoaded = new EventEmitter();
-        this._objectFit = MediaObjectFit.Original;
         console.log('MarcyMediaComponent ctor');
         cd.detach();
     }
@@ -950,12 +959,12 @@ class MarcyMediaComponent {
     onLoad() {
         this.isLoaded.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyMediaComponent, deps: [{ token: DeviceServiceBase }, { token: i0.ChangeDetectorRef }, { token: UnsubscriberService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MarcyMediaComponent, selector: "bon-media", inputs: { src: "src", objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], ngImport: i0, template: "<bon-image *ngIf=\"src && src.type==='image'\"\r\n           [imgsrc]=\"src\"\r\n           [objectFit]=\"objectFit\"\r\n           (isLoaded)=\"onLoad()\"></bon-image>\r\n\r\n<bon-video *ngIf=\"src && src.type==='video'\"\r\n           [vidsrc]=\"src\"\r\n           [objectFit]=\"objectFit\"\r\n           (isLoaded)=\"onLoad()\"></bon-video>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarcyImageComponent, selector: "bon-image", inputs: ["objectFit"], outputs: ["isLoaded"] }, { kind: "component", type: MarcyVideoComponent, selector: "bon-video", inputs: ["objectFit"], outputs: ["isLoaded"] }, { kind: "directive", type: ImageSrcDirective, selector: "[imgsrc]", inputs: ["imgsrc"] }, { kind: "directive", type: VideoSrcDirective, selector: "[vidsrc]", inputs: ["vidsrc"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyMediaComponent, deps: [{ token: DeviceServiceBase }, { token: i0.ChangeDetectorRef }, { token: UnsubscriberService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MarcyMediaComponent, isStandalone: true, selector: "bon-media", inputs: { src: "src", objectFit: "objectFit" }, outputs: { isLoaded: "isLoaded" }, providers: [UnsubscriberService], ngImport: i0, template: "<bon-image *ngIf=\"src && src.type==='image'\"\n           [imgsrc]=\"src\"\n           [objectFit]=\"objectFit\"\n           (isLoaded)=\"onLoad()\"></bon-image>\n\n<bon-video *ngIf=\"src && src.type==='video'\"\n           [vidsrc]=\"src\"\n           [objectFit]=\"objectFit\"\n           (isLoaded)=\"onLoad()\"></bon-video>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarcyImageComponent, selector: "bon-image", inputs: ["objectFit"], outputs: ["isLoaded"] }, { kind: "component", type: MarcyVideoComponent, selector: "bon-video", inputs: ["objectFit"], outputs: ["isLoaded"] }, { kind: "directive", type: VideoSrcDirective, selector: "[vidsrc]", inputs: ["vidsrc"] }, { kind: "directive", type: ImageSrcDirective, selector: "[imgsrc]", inputs: ["imgsrc"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyMediaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-media', providers: [UnsubscriberService], template: "<bon-image *ngIf=\"src && src.type==='image'\"\r\n           [imgsrc]=\"src\"\r\n           [objectFit]=\"objectFit\"\r\n           (isLoaded)=\"onLoad()\"></bon-image>\r\n\r\n<bon-video *ngIf=\"src && src.type==='video'\"\r\n           [vidsrc]=\"src\"\r\n           [objectFit]=\"objectFit\"\r\n           (isLoaded)=\"onLoad()\"></bon-video>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bon-media', standalone: true, imports: [CommonModule, MarcyImageComponent, MarcyVideoComponent, VideoSrcDirective, ImageSrcDirective], providers: [UnsubscriberService], template: "<bon-image *ngIf=\"src && src.type==='image'\"\n           [imgsrc]=\"src\"\n           [objectFit]=\"objectFit\"\n           (isLoaded)=\"onLoad()\"></bon-image>\n\n<bon-video *ngIf=\"src && src.type==='video'\"\n           [vidsrc]=\"src\"\n           [objectFit]=\"objectFit\"\n           (isLoaded)=\"onLoad()\"></bon-video>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: DeviceServiceBase }, { type: i0.ChangeDetectorRef }, { type: UnsubscriberService }], propDecorators: { isLoaded: [{
                 type: Output
             }], src: [{
@@ -965,19 +974,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class BoneDirective {
-    constructor(cd, _u, localizationService) {
-        this.cd = cd;
-        this._u = _u;
-        this.localizationService = localizationService;
+    _bone;
+    cd = inject(ChangeDetectorRef);
+    localizationService = inject(LocalizeServiceBase);
+    _effectCleanup;
+    constructor() {
         this.cd.detach();
-    }
-    ngOnInit() {
-        this.localizationService.locale$
-            .pipe(this._u.takeUntilDestroy)
-            .subscribe(() => {
+        // todo: check if this is needed
+        // Watch locale changes using signal
+        this._effectCleanup = effect(() => {
+            // Access the signal to track changes
+            this.localizationService.locale();
             // need to detect changes in our detached components
             this.cd.detectChanges();
-        });
+        }, ...(ngDevMode ? [{ debugName: "_effectCleanup" }] : []));
+    }
+    ngOnInit() {
     }
     set bone(value) {
         this._bone = value;
@@ -988,58 +1000,59 @@ class BoneDirective {
             throw new Error('The property "bone" should be set at least once. For example in skeleton');
         return this._bone;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: UnsubscriberService }, { token: LocalizeServiceBase }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: BoneDirective, isStandalone: true, selector: "[bonBoneDir]", ngImport: i0 }); }
+    ngOnDestroy() {
+        this._effectCleanup?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BoneDirective, isStandalone: true, selector: "[bonBoneDir]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bonBoneDir]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: LocalizeServiceBase }] });
+        }], ctorParameters: () => [] });
 
 class SkeletonAnchorDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonAnchorDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonAnchorDirective, isStandalone: true, selector: "[bonSkeletonAnchor]", ngImport: i0 }); }
+    viewContainerRef = inject(ViewContainerRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SkeletonAnchorDirective, isStandalone: true, selector: "[bonSkeletonAnchor]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bonSkeletonAnchor]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+        }] });
 
 class UnknownBoneComponent {
-    constructor(cd, bd) {
-        this.cd = cd;
-        this.bd = bd;
-        console.log('BoneDirective', bd);
-        cd.detach();
+    cd = inject(ChangeDetectorRef);
+    bd = inject((BoneDirective), { host: true });
+    constructor() {
+        console.log('BoneDirective', this.bd);
+        this.cd.detach();
     }
     ngOnInit() {
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BoneDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownBoneComponent, selector: "bon-unknown-bone", hostDirectives: [{ directive: BoneDirective }], ngImport: i0, template: `<h2>unknown bone {{bd.bone.type}}</h2>
-             <div>{{bd.bone | json}}</div>`, isInline: true, styles: [":host{display:block;border:2px solid red;box-sizing:border-box}\n"], dependencies: [{ kind: "pipe", type: i4.JsonPipe, name: "json" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnknownBoneComponent, isStandalone: true, selector: "bon-unknown-bone", hostDirectives: [{ directive: BoneDirective }], ngImport: i0, template: `<h2>unknown bone {{bd.bone.type}}</h2>
+             <div>{{bd.bone | json}}</div>`, isInline: true, styles: [":host{display:block;border:2px solid red;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-unknown-bone', hostDirectives: [BoneDirective], template: `<h2>unknown bone {{bd.bone.type}}</h2>
+            args: [{ selector: 'bon-unknown-bone', standalone: true, imports: [CommonModule, JsonPipe], hostDirectives: [BoneDirective], template: `<h2>unknown bone {{bd.bone.type}}</h2>
              <div>{{bd.bone | json}}</div>`, styles: [":host{display:block;border:2px solid red;box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BoneDirective }] });
+        }], ctorParameters: () => [] });
 
 class SkeletonComponent {
-    constructor(cd) {
-        this.cd = cd;
-        this._bones = [];
-        this.iniailized = false;
-    }
+    skeletonAnchor;
+    map;
+    _bones = [];
+    iniailized = false;
+    cd = inject(ChangeDetectorRef);
     ngOnInit() {
         this.iniailized = true;
         this.fillComponentFromBones();
@@ -1066,13 +1079,13 @@ class SkeletonComponent {
             boneComponentRef.instance.bd.bone = bone;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonComponent, selector: "bon-skeleton", inputs: { map: "map", bones: "bones" }, viewQueries: [{ propertyName: "skeletonAnchor", first: true, predicate: SkeletonAnchorDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-template bonSkeletonAnchor></ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: SkeletonAnchorDirective, selector: "[bonSkeletonAnchor]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SkeletonComponent, isStandalone: true, selector: "bon-skeleton", inputs: { map: "map", bones: "bones" }, viewQueries: [{ propertyName: "skeletonAnchor", first: true, predicate: SkeletonAnchorDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-template bonSkeletonAnchor></ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: SkeletonAnchorDirective, selector: "[bonSkeletonAnchor]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bon-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template bonSkeletonAnchor></ng-template>\r\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { skeletonAnchor: [{
+            args: [{ selector: 'bon-skeleton', standalone: true, imports: [SkeletonAnchorDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template bonSkeletonAnchor></ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { skeletonAnchor: [{
                 type: ViewChild,
                 args: [SkeletonAnchorDirective, { static: true }]
             }], map: [{
@@ -1092,92 +1105,9 @@ class BoneMap extends Map {
     }
 }
 
-const components = [
-    MarcyImageComponent,
-    MarcyVideoComponent,
-    MarcyMediaComponent,
-    IntersectionComponent,
-    //
-    SkeletonComponent,
-    UnknownBoneComponent
-];
-const directives = [
-    SrcBaseDirective,
-    ImageSrcDirective,
-    VideoSrcDirective,
-];
-const standAloneDirectives = [
-    SkeletonAnchorDirective,
-    BoneDirective
-];
-const pipes = [
-    EncodeURIComponentPipe,
-    LocalizePipe,
-    LocalizationIsNotEmptyPipe
-];
-class BonnieModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: BonnieModule, declarations: [MarcyImageComponent,
-            MarcyVideoComponent,
-            MarcyMediaComponent,
-            IntersectionComponent,
-            //
-            SkeletonComponent,
-            UnknownBoneComponent, SrcBaseDirective,
-            ImageSrcDirective,
-            VideoSrcDirective, EncodeURIComponentPipe,
-            LocalizePipe,
-            LocalizationIsNotEmptyPipe], imports: [CommonModule, SkeletonAnchorDirective,
-            BoneDirective], exports: [CommonModule, EncodeURIComponentPipe,
-            LocalizePipe,
-            LocalizationIsNotEmptyPipe, MarcyImageComponent,
-            MarcyVideoComponent,
-            MarcyMediaComponent,
-            IntersectionComponent,
-            //
-            SkeletonComponent,
-            UnknownBoneComponent, SrcBaseDirective,
-            ImageSrcDirective,
-            VideoSrcDirective, SkeletonAnchorDirective,
-            BoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieModule, providers: [
-            ...pipes,
-            UnsubscriberService,
-            DeviceService,
-            { provide: DeviceServiceBase, useExisting: DeviceService },
-        ], imports: [CommonModule, CommonModule] }); }
-} // todo: move to standalone
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...components,
-                        ...directives,
-                        ...pipes,
-                    ],
-                    providers: [
-                        ...pipes,
-                        UnsubscriberService,
-                        DeviceService,
-                        { provide: DeviceServiceBase, useExisting: DeviceService },
-                    ],
-                    imports: [
-                        CommonModule,
-                        ...standAloneDirectives
-                    ],
-                    exports: [
-                        CommonModule,
-                        ...pipes,
-                        ...components,
-                        ...directives,
-                        ...standAloneDirectives
-                    ]
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BoneDirective, BoneMap, BonnieModule, DeviceService, DeviceServiceBase, EncodeURIComponentPipe, ImageSrcDirective, IntersectionComponent, IsLocalUrlPipe, IsNotLocalUrlPipe, LocalizationIsEmptyPipe, LocalizationIsNotEmptyPipe, LocalizeObjectPipe, LocalizePipe, LocalizeServiceBase, LocalizeUrlPipe, MarcyImageComponent, MarcyMediaComponent, MarcyVideoComponent, MediaObjectFit, MediaStatus, PublishStatus, SizesWidthUnit, SkeletonAnchorDirective, SkeletonComponent, SrcBaseDirective, UnknownBoneComponent, UnsubscriberService, VideoSrcDirective, emptyBone, emptyImage, emptyLocalizedString, emptyVideo, getDefaultSrc, toHtmlPictureSources };
+export { BoneDirective, BoneMap, DeviceService, DeviceServiceBase, EncodeURIComponentPipe, ImageSrcDirective, IntersectionComponent, IsLocalUrlPipe, IsNotLocalUrlPipe, LocalizationIsEmptyPipe, LocalizationIsNotEmptyPipe, LocalizeObjectPipe, LocalizePipe, LocalizeServiceBase, LocalizeUrlPipe, MarcyImageComponent, MarcyMediaComponent, MarcyVideoComponent, MediaObjectFit, MediaStatus, PublishStatus, SizesWidthUnit, SkeletonAnchorDirective, SkeletonComponent, SrcBaseDirective, UnknownBoneComponent, UnsubscriberService, VideoSrcDirective, emptyBone, emptyImage, emptyLocalizedString, emptyVideo, getDefaultSrc, toHtmlPictureSources };
 //# sourceMappingURL=candy-kingdom-bonnie.mjs.map