@candy-kingdom/bonnie 0.26.15 → 0.27.0

package/fesm2022/candy-kingdom-bonnie.mjs

@@ -1,9 +1,284 @@
 import * as i0 from '@angular/core';
-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 { Injectable, Pipe, output, input, inject, ElementRef, signal, effect, DestroyRef, Component, Directive, model, viewChild, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, NEVER, takeUntil, fromEvent, merge } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i1 from '@angular/common';
-import { CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
+import { NgTemplateOutlet, JsonPipe } from '@angular/common';
+
+class 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: "21.0.6", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable
+        }] });
+
+class DeviceServiceBase {
+}
+
+function emptyBone() {
+    return {
+        style: "",
+        mediaQuery: "",
+        enabled: true,
+        type: "",
+    };
+}
+
+function emptyImage() {
+    return {
+        $type: "image", // todo: remove
+        type: "image",
+        sources: [],
+    };
+}
+
+function emptyLocalizedString() {
+    return {};
+}
+
+function emptyVideo() {
+    return {
+        $type: "video", // todo: remove
+        type: "video",
+        sources: [],
+    };
+}
+
+class EncodeURIComponentPipe {
+    transform(value) {
+        return encodeURIComponent(value);
+    }
+    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: "21.0.6", ngImport: i0, type: EncodeURIComponentPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "encodeURIComponent", pure: true }]
+        }] });
+
+class IntersectionComponent {
+    intersected = output();
+    session = input(...(ngDevMode ? [undefined, { debugName: "session" }] : []));
+    _hostRef = inject(ElementRef);
+    _intersectionObserver;
+    _isIntersected = signal(false, ...(ngDevMode ? [{ debugName: "_isIntersected" }] : []));
+    isIntersected = this._isIntersected.asReadonly();
+    _session; // todo: remove
+    constructor() {
+        if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
+            return;
+        }
+        this._intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this));
+        effect(() => {
+            if (this._isIntersected()) {
+                this.intersected.emit();
+            }
+        });
+        effect(() => {
+            const newSession = this.session();
+            if (this._session === newSession)
+                return;
+            console.log("reset intersection Observer");
+            this._session = newSession;
+            this.reset();
+        });
+        inject(DestroyRef).onDestroy(() => this._intersectionObserver?.disconnect());
+    }
+    reset() {
+        if (this._intersectionObserver === undefined || this._intersectionObserver === null)
+            return;
+        this._intersectionObserver.unobserve(this._hostRef.nativeElement);
+        this._isIntersected.set(false);
+        this._intersectionObserver.observe(this._hostRef.nativeElement);
+    }
+    onIntersection(entries, observer) {
+        if (entries.length > 1) {
+            console.warn("multi entries!");
+        }
+        const isIntersecting = entries[0].isIntersecting;
+        this._isIntersected.set(isIntersecting);
+        console.log(`intersected ${isIntersecting}`, this._hostRef.nativeElement);
+        // only once will recieve intersection
+        if (isIntersecting) {
+            observer.unobserve(this._hostRef.nativeElement);
+        }
+    }
+    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: "17.1.0", version: "21.0.6", type: IntersectionComponent, isStandalone: true, selector: "bon-intersection", inputs: { session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersected: "intersected" }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host{display:block}\n"] });
+}
+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>", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { intersected: [{ type: i0.Output, args: ["intersected"] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }] } });
+
+var MediaObjectFit;
+(function (MediaObjectFit) {
+    MediaObjectFit["Original"] = "Original";
+    MediaObjectFit["Cover"] = "Cover";
+    MediaObjectFit["Contain"] = "Contain";
+})(MediaObjectFit || (MediaObjectFit = {}));
+
+var MediaStatus;
+(function (MediaStatus) {
+    MediaStatus["NotSet"] = "NotSet";
+    MediaStatus["NotLoaded"] = "NotLoaded";
+    MediaStatus["Loading"] = "Loading";
+    MediaStatus["Loaded"] = "Loaded";
+})(MediaStatus || (MediaStatus = {}));
+
+// https://stackoverflow.com/questions/42136098/array-groupby-in-typescript
+const groupBy = (arr, key) => arr.reduce((groups, item) => {
+    (groups[key(item)] ||= []).push(item);
+    return groups;
+}, {});
+function distinct(value, index, array) {
+    return array.indexOf(value) === index;
+}
+function ascending(a, b) {
+    return a - b;
+}
+function ascendingT(sel) {
+    return (a, b) => ascending(sel(a), sel(b));
+}
+function descending(a, b) {
+    return b - a;
+}
+function descendingT(sel) {
+    return (a, b) => descending(sel(a), sel(b));
+}
+function generateSizesString(sizes) {
+    const sizesString = sizes
+        .sort((x) => x.width)
+        .map((x) => `${x.mediaQuery} ${x.width}${x.unit.toLowerCase()}`.trim())
+        .join(",");
+    return sizesString;
+}
+function matchesMediaQuery(mediaQuery) {
+    const isEmptyQuery = mediaQuery === null || mediaQuery === undefined || mediaQuery.trim().length === 0;
+    // work for SSR and browser
+    if (isEmptyQuery)
+        return true;
+    // other queries disallowed in SSR
+    if (typeof window === "undefined")
+        return false;
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    return mediaQueryList.matches;
+}
+function isLocalUrlString(url) {
+    if (url === undefined || url === null || url.trim().length === 0)
+        return true;
+    if (url.startsWith("//"))
+        return false;
+    if (url.startsWith("./") || url.startsWith("/"))
+        return true;
+    return false;
+}
+
+class SrcBaseDirective {
+    ratioChange = output();
+    _ratio = signal(0, ...(ngDevMode ? [{ debugName: "_ratio" }] : []));
+    ratio = this._ratio.asReadonly();
+    _queryChangeClearSubject = new Subject();
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        effect(() => {
+            const ratio = this._ratio();
+            this.ratioChange.emit(ratio);
+        });
+        effect(() => {
+            const val = this.data();
+            this.onSrcChange(val);
+        });
+    }
+    onSrcChange(val) {
+        if (val !== undefined && val !== null && val.sources.length === 0) {
+            console.warn(`image should have sources!`);
+            this.data.set(undefined);
+            return;
+        }
+        // clear mediaQuery subscriptions
+        this._queryChangeClearSubject.next();
+        // ratio
+        this._ratio.set(0);
+        if (val === undefined || val.sources.length === 0) {
+            return;
+        }
+        const allRatios = val.sources
+            .flatMap((x) => x.srcSet)
+            .map((x) => x.meta.ratio)
+            .filter(distinct);
+        if (allRatios.length === 1) {
+            // same ratio for all
+            this._ratio.set(allRatios[0]);
+            return;
+        }
+        // todo: check if this needed to be unsubscribed
+        this.watchMediaQueries().subscribe(() => {
+            this.calcRatio();
+            console.log("watchMediaQueries calcRatio");
+        });
+        this.calcRatio();
+    }
+    calcRatio() {
+        const data = this.data();
+        if (data === undefined || data === null || data.sources.length === 0)
+            return;
+        for (let i = 0; i < data.sources.length; i++) {
+            const source = data.sources[i];
+            const srcRatios = source.srcSet
+                .sort(descendingT((x) => x.meta.width))
+                .map((x) => x.meta.ratio)
+                .filter(distinct);
+            if (srcRatios.length === 0) {
+                return;
+            }
+            if (srcRatios.length > 1) {
+                console.warn(`each source should have srcSet with same ratio. founded: ${srcRatios.join(", ")}`);
+            }
+            const ratio = srcRatios[0]; // most accurate ratio in biggest image
+            if (source.mediaQuery.length === 0) {
+                this._ratio.set(ratio);
+                return;
+            }
+            if (typeof window === "undefined" || typeof window.matchMedia === "undefined")
+                return;
+            const mediaQueryList = window.matchMedia(source.mediaQuery);
+            if (mediaQueryList.matches) {
+                this._ratio.set(ratio);
+                return;
+            }
+        }
+    }
+    watchMediaQueries() {
+        console.log("watchMediaQueries");
+        const src = this.data();
+        if (src === undefined ||
+            src === null ||
+            typeof window === "undefined" ||
+            typeof window.matchMedia === "undefined")
+            return NEVER.pipe(takeUntilDestroyed(this._destroyRef), takeUntil(this._queryChangeClearSubject));
+        const mediaQueries = src.sources
+            .map((x) => x.mediaQuery)
+            .filter(distinct)
+            .filter((x) => x.length > 0);
+        console.log("watchMediaQueries mediaQueries", mediaQueries);
+        const queryObservables = mediaQueries.map((media) => {
+            const queryList = window.matchMedia(media);
+            const observable = fromEvent(queryList, "change").pipe(takeUntilDestroyed(this._destroyRef), takeUntil(this._queryChangeClearSubject));
+            return observable;
+        });
+        const combinedObservable = merge(...queryObservables);
+        return combinedObservable;
+    }
+    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, outputs: { ratioChange: "ratioChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SrcBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { ratioChange: [{ type: i0.Output, args: ["ratioChange"] }] } });
 
 /**
  * This is a TypeGen auto-generated file.
@@ -178,336 +453,6 @@ var SizesWidthUnit;
  * Any changes made to this file can be lost when this file is regenerated.
  */
 
-// https://stackoverflow.com/questions/42136098/array-groupby-in-typescript
-const groupBy = (arr, key) => arr.reduce((groups, item) => {
-    (groups[key(item)] ||= []).push(item);
-    return groups;
-}, {});
-function distinct(value, index, array) {
-    return array.indexOf(value) === index;
-}
-function ascending(a, b) {
-    return a - b;
-}
-function ascendingT(sel) {
-    return function (a, b) { return ascending(sel(a), sel(b)); };
-}
-function descending(a, b) {
-    return b - a;
-}
-function descendingT(sel) {
-    return function (a, b) { return descending(sel(a), sel(b)); };
-}
-function generateSizesString(sizes) {
-    const sizesString = sizes
-        .sort(x => x.width)
-        .map(x => `${x.mediaQuery} ${x.width}${x.unit.toLowerCase()}`.trim())
-        .join(',');
-    return sizesString;
-}
-function matchesMediaQuery(mediaQuery) {
-    const isEmptyQuery = mediaQuery === null || mediaQuery === undefined || mediaQuery.trim().length === 0;
-    // work for SSR and browser
-    if (isEmptyQuery)
-        return true;
-    // other queries disallowed in SSR
-    if (typeof window === 'undefined')
-        return false;
-    const mediaQueryList = window.matchMedia(mediaQuery);
-    return mediaQueryList.matches;
-}
-function isLocalUrlString(url) {
-    if (url === undefined || url === null || url.trim().length === 0)
-        return true;
-    if (url.startsWith('//'))
-        return false;
-    if (url.startsWith('./') || url.startsWith('/'))
-        return true;
-    return false;
-}
-
-class UnsubscriberService {
-    _destroy$ = new Subject();
-    takeUntilDestroy = (origin) => origin.pipe(takeUntil(this._destroy$));
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    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: "21.0.6", ngImport: i0, type: UnsubscriberService, decorators: [{
-            type: Injectable
-        }] });
-
-class SrcBaseDirective {
-    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.cd.detectChanges();
-    }
-    get data() {
-        return this._data;
-    }
-    set data(val) {
-        console.log('set data', val);
-        if (val !== undefined && val !== null && val.sources.length === 0) {
-            console.warn(`image should have sources!`);
-            val = undefined;
-        }
-        this._data = val;
-        console.log('calling src change ', this._data);
-        // clear mediaQuery subscriptions
-        this._queryChangeClearSubject.next();
-        // ratio
-        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)
-            .filter(distinct);
-        if (allRatios.length === 1) {
-            // same ratio for all
-            this._ratio.set(allRatios[0]);
-            return;
-        }
-        this.watchMediaQueries().subscribe(() => {
-            this.calcRatio();
-            console.log('watchMediaQueries calcRatio');
-        });
-        this.calcRatio();
-    }
-    calcRatio() {
-        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)
-                .filter(distinct);
-            if (srcRatios.length === 0) {
-                // console.warn(`each source should have srcSet with same ratio. founded: ${srcRatios.join(', ')}`);
-                return;
-            }
-            if (srcRatios.length > 1) {
-                console.warn(`each source should have srcSet with same ratio. founded: ${srcRatios.join(', ')}`);
-            }
-            const ratio = srcRatios[0]; // most accurate ratio in biggest image
-            if (source.mediaQuery.length === 0) {
-                this._ratio.set(ratio);
-                return;
-            }
-            if (typeof window === 'undefined' ||
-                typeof window.matchMedia === 'undefined')
-                return;
-            const mediaQueryList = window.matchMedia(source.mediaQuery);
-            if (mediaQueryList.matches) {
-                this._ratio.set(ratio);
-                return;
-            }
-        }
-    }
-    watchMediaQueries() {
-        console.log('watchMediaQueries');
-        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)
-            .filter(distinct)
-            .filter((x) => x.length > 0);
-        console.log('watchMediaQueries mediaQueries', mediaQueries);
-        const queryObservables = mediaQueries.map((media) => {
-            const queryList = window.matchMedia(media);
-            const observable = fromEvent(queryList, 'change').pipe(this._u.takeUntilDestroy, takeUntil(this._queryChangeClearSubject));
-            return observable;
-        });
-        const combinedObservable = merge(...queryObservables);
-        return combinedObservable;
-    }
-    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: "21.0.6", ngImport: i0, type: SrcBaseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[bonSrcBase]',
-                    providers: [UnsubscriberService],
-                }]
-        }], ctorParameters: () => [], propDecorators: { ratioChange: [{
-                type: Output
-            }], srcChange: [{
-                type: Output
-            }] } });
-
-var MediaStatus;
-(function (MediaStatus) {
-    MediaStatus["NotSet"] = "NotSet";
-    MediaStatus["NotLoaded"] = "NotLoaded";
-    MediaStatus["Loading"] = "Loading";
-    MediaStatus["Loaded"] = "Loaded";
-})(MediaStatus || (MediaStatus = {}));
-
-var MediaObjectFit;
-(function (MediaObjectFit) {
-    MediaObjectFit["Original"] = "Original";
-    MediaObjectFit["Cover"] = "Cover";
-    MediaObjectFit["Contain"] = "Contain";
-})(MediaObjectFit || (MediaObjectFit = {}));
-
-class 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: "21.0.6", ngImport: i0, type: DeviceService, decorators: [{
-            type: Injectable
-        }] });
-
-class DeviceServiceBase {
-}
-
-class IntersectionComponent {
-    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() {
-    }
-    set session(newSession) {
-        if (this._session === newSession)
-            return;
-        console.log('reset intersection Observer');
-        this._session = newSession;
-        this.reset();
-    }
-    reset() {
-        if (this.intersectionObserver === undefined || this.intersectionObserver === null)
-            return;
-        this.intersectionObserver.unobserve(this._hostRef.nativeElement);
-        this._intersected.set(false);
-        this.intersectionObserver.observe(this._hostRef.nativeElement);
-    }
-    onIntersection(entries, observer) {
-        if (entries.length > 1) {
-            console.warn('multi entries!');
-        }
-        const isIntersecting = entries[0].isIntersecting;
-        this._intersected.set(isIntersecting);
-        console.log(`intersected ${isIntersecting}`, this._hostRef.nativeElement);
-        // only once will recieve intersection
-        if (isIntersecting) {
-            observer.unobserve(this._hostRef.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        this._effectCleanup?.destroy();
-        this.intersectionObserver?.disconnect();
-    }
-    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: "21.0.6", ngImport: i0, type: IntersectionComponent, decorators: [{
-            type: Component,
-            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
-            }] } });
-
-class EncodeURIComponentPipe {
-    transform(value) {
-        return encodeURIComponent(value);
-    }
-    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: "21.0.6", ngImport: i0, type: EncodeURIComponentPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'encodeURIComponent', standalone: true, pure: true }]
-        }] });
-
-function emptyImage() {
-    return {
-        $type: 'image', // todo: remove
-        type: 'image',
-        sources: [],
-    };
-}
-
-function emptyVideo() {
-    return {
-        $type: 'video', // todo: remove
-        type: 'video',
-        sources: [],
-    };
-}
-
-function emptyBone() {
-    return {
-        style: '',
-        mediaQuery: '',
-        enabled: true,
-        type: ''
-    };
-}
-
-function emptyLocalizedString() {
-    return {};
-}
-
 class LocalizeServiceBase {
     getLocalized(value, defaultValue, locale) {
         if (value === undefined)
@@ -517,9 +462,8 @@ class LocalizeServiceBase {
         return obj;
     }
     getLocalizedText(value, locale) {
-        return this.getLocalized(value, '', locale);
+        return this.getLocalized(value, "", locale);
     }
-    ;
     isLocalUrl(value, locale) {
         const url = this.getLocalizedText(value, locale);
         return isLocalUrlString(url);
@@ -527,39 +471,39 @@ class LocalizeServiceBase {
 }
 
 class LocalizePipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
-            return '';
-        return this.localizeService.getLocalizedText(value, locale);
+            return "";
+        return this._localizeService.getLocalizedText(value, locale);
     }
     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: "21.0.6", ngImport: i0, type: LocalizePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localize', standalone: true, pure: false }]
+            args: [{ name: "localize", pure: false }]
         }] });
 class LocalizeObjectPipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(object, locale) {
         if (object === undefined || object === null)
             return undefined;
-        return this.localizeService.getLocalized(object, undefined, locale);
+        return this._localizeService.getLocalized(object, undefined, locale);
     }
     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: "21.0.6", ngImport: i0, type: LocalizeObjectPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizeObject', standalone: true, pure: false }]
+            args: [{ name: "localizeObject", pure: false }]
         }] });
 class LocalizationIsNotEmptyPipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
-        const text = this.localizeService.getLocalizedText(value, locale);
+        const text = this._localizeService.getLocalizedText(value, locale);
         const isNotEmpty = text.trim().length > 0;
         return isNotEmpty;
     }
@@ -568,14 +512,14 @@ class LocalizationIsNotEmptyPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsNotEmptyPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizationIsNotEmpty', standalone: true, pure: false }]
+            args: [{ name: "localizationIsNotEmpty", pure: false }]
         }] });
 class LocalizationIsEmptyPipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return true;
-        const text = this.localizeService.getLocalizedText(value, locale);
+        const text = this._localizeService.getLocalizedText(value, locale);
         const isEmpty = text.trim().length === 0;
         return isEmpty;
     }
@@ -584,16 +528,16 @@ class LocalizationIsEmptyPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizationIsEmptyPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizationIsEmpty', standalone: true, pure: false }]
+            args: [{ name: "localizationIsEmpty", pure: false }]
         }] });
 class LocalizeUrlPipe {
-    localizeService = inject(LocalizeServiceBase);
-    domSanitizer = inject(DomSanitizer);
+    _localizeService = inject(LocalizeServiceBase);
+    _domSanitizer = inject(DomSanitizer);
     transform(value, locale) {
         if (value === undefined || value === null)
-            return '';
-        const urlString = this.localizeService.getLocalizedText(value, locale);
-        const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(urlString);
+            return "";
+        const urlString = this._localizeService.getLocalizedText(value, locale);
+        const safeUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(urlString);
         return safeUrl;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -601,14 +545,14 @@ class LocalizeUrlPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocalizeUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizeUrl', standalone: true, pure: false }]
+            args: [{ name: "localizeUrl", pure: false }]
         }] });
 class IsLocalUrlPipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
-        const isLocal = this.localizeService.isLocalUrl(value, locale);
+        const isLocal = this._localizeService.isLocalUrl(value, locale);
         return isLocal;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsLocalUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -616,14 +560,14 @@ class IsLocalUrlPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsLocalUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'isLocalUrl', standalone: true, pure: false }]
+            args: [{ name: "isLocalUrl", pure: false }]
         }] });
 class IsNotLocalUrlPipe {
-    localizeService = inject(LocalizeServiceBase);
+    _localizeService = inject(LocalizeServiceBase);
     transform(value, locale) {
         if (value === undefined || value === null)
             return false;
-        const isLocal = this.localizeService.isLocalUrl(value, locale);
+        const isLocal = this._localizeService.isLocalUrl(value, locale);
         return !isLocal;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsNotLocalUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -631,233 +575,165 @@ class IsNotLocalUrlPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IsNotLocalUrlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'isNotLocalUrl', standalone: true, pure: false }]
+            args: [{ name: "isNotLocalUrl", pure: false }]
         }] });
 
+function getDefaultSrc(image) {
+    if (image === undefined || image === null)
+        return undefined;
+    const files = image.sources.flatMap((x) => x.srcSet).sort(descendingT((x) => x.meta.width));
+    const prefferedFiles = files.filter((x) => x.mimeType === "image/jpeg" || x.mimeType === "image/png" || x.mimeType === "image/gif");
+    if (prefferedFiles.length > 0)
+        return prefferedFiles[0];
+    if (files.length > 0)
+        return files[0];
+    return undefined;
+}
+
 class ImageSrcDirective extends SrcBaseDirective {
-    set imgsrc(value) {
-        console.log('set imgsrc', value);
-        this.data = value;
-    }
+    data = model(undefined, { ...(ngDevMode ? { debugName: "data" } : {}), alias: "imgsrc" });
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ImageSrcDirective, isStandalone: true, selector: "[imgsrc]", inputs: { data: { classPropertyName: "data", publicName: "imgsrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "imgsrcChange" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageSrcDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: '[imgsrc]',
+                    selector: "[imgsrc]",
                 }]
-        }], propDecorators: { imgsrc: [{
-                type: Input
-            }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgsrc", required: false }] }, { type: i0.Output, args: ["imgsrcChange"] }] } });
 
 function toHtmlPictureSources(imageSource) {
     const sizes = generateSizesString(imageSource.sizes);
-    const groupedByMime = groupBy(imageSource.srcSet, x => x.mimeType);
+    const groupedByMime = groupBy(imageSource.srcSet, (x) => x.mimeType);
     const simpleSources = [];
     for (const mime in groupedByMime) {
-        const fileSrcs = groupedByMime[mime].sort(ascendingT(x => x.meta.width));
-        const srcSet = fileSrcs
-            .map(x => `${x.url} ${x.meta.width}w`)
-            .join(',');
+        const fileSrcs = groupedByMime[mime].sort(ascendingT((x) => x.meta.width));
+        const srcSet = fileSrcs.map((x) => `${x.url} ${x.meta.width}w`).join(",");
         const source = { mime, sizes, srcSet, media: imageSource.mediaQuery };
         simpleSources.push(source);
     }
     return simpleSources;
 }
 
-function getDefaultSrc(image) {
-    if (image === undefined || image === null)
-        return undefined;
-    const files = image.sources
-        .flatMap(x => x.srcSet)
-        .sort(descendingT(x => x.meta.width));
-    const prefferedFiles = files.filter(x => x.mimeType === 'image/jpeg'
-        || x.mimeType === 'image/png'
-        || x.mimeType === 'image/gif');
-    if (prefferedFiles.length > 0)
-        return prefferedFiles[0];
-    if (files.length > 0)
-        return files[0];
-    return undefined;
-}
-
 class MarcyImageComponent {
     MediaStatus = MediaStatus;
     MarcyObjectFit = MediaObjectFit;
-    isLoaded = new EventEmitter();
-    sources = [];
-    $status = new BehaviorSubject(MediaStatus.NotSet);
-    defaultSrc = '';
-    _objectFit = MediaObjectFit.Original;
     src;
+    isLoaded = output();
+    objectFit = input(MediaObjectFit.Original, ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    sources = signal([], ...(ngDevMode ? [{ debugName: "sources" }] : []));
+    status = signal(MediaStatus.NotSet, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    defaultSrc = signal("", ...(ngDevMode ? [{ debugName: "defaultSrc" }] : []));
     device = inject(DeviceServiceBase);
-    cd = inject(ChangeDetectorRef);
-    _u = inject(UnsubscriberService);
-    _srcDir = inject(ImageSrcDirective, { optional: true });
     constructor() {
-        console.log('MarcyImageComponent ctor');
-        if (this._srcDir === undefined || this._srcDir === null)
+        const src = inject(ImageSrcDirective, { optional: true });
+        if (src === undefined || src === null)
             throw new Error(`${MarcyImageComponent.name} should have [imgsrc] directive as source object`);
-        this.src = this._srcDir;
-        // bind src changes
-        this.src.srcChange
-            .pipe(this._u.takeUntilDestroy)
-            .subscribe(this.onSrcChange.bind(this));
-        this.cd.detach();
-    }
-    ngOnInit() {
-        // bind loaded event
-        this.$status
-            .pipe(this._u.takeUntilDestroy, filter(status => status === MediaStatus.Loaded))
-            .subscribe(x => this.isLoaded.next());
-        this.cd.detectChanges();
+        this.src = src;
+        effect(() => {
+            this.onSrcChange(this.src.data());
+        });
+        effect(() => {
+            if (this.status() === MediaStatus.Loaded) {
+                this.isLoaded.emit();
+            }
+        });
     }
     onSrcChange(val) {
-        console.log('MarcyImageComponent onSrcChange', val);
-        this.defaultSrc = getDefaultSrc(val)?.url ?? '';
-        this.sources.splice(0, this.sources.length);
+        this.defaultSrc.set(getDefaultSrc(val)?.url ?? "");
         if (val === undefined || val === null || val.sources.length === 0) {
-            this.$status.next(MediaStatus.NotSet);
-            this.cd.detectChanges();
+            this.sources.set([]);
+            this.status.set(MediaStatus.NotSet);
             return;
         }
         const newSources = val.sources.flatMap(toHtmlPictureSources);
-        console.log('MarcyImageComponent newSources', newSources);
-        this.sources.push(...newSources);
-        this.$status.next(MediaStatus.NotLoaded);
-        this.cd.detectChanges();
-    }
-    set objectFit(val) {
-        this._objectFit = val ?? MediaObjectFit.Original;
-        this.cd.detectChanges();
-    }
-    get objectFit() {
-        return this._objectFit;
+        this.sources.set(newSources);
+        this.status.set(MediaStatus.NotLoaded);
     }
     onLoad() {
-        this.$status.next(MediaStatus.Loaded);
+        this.status.set(MediaStatus.Loaded);
     }
     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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MarcyImageComponent, isStandalone: true, selector: "bon-image", inputs: { objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoaded: "isLoaded" }, ngImport: i0, template: "@if (sources().length > 0) {\n  <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=\"picture-container\">\n\n    <ng-template #pictureTemplate>\n      <picture>\n        @for (source of sources(); track $index) {\n          <source [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()\" alt=\"\" />\n      </picture>\n    </ng-template>\n\n    @if (device.isSSR) {\n      <noscript>\n        <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n      </noscript>\n    } @else {\n      <bon-intersection #intersectionZone [session]=\"src\">\n        @if (intersectionZone.isIntersected()) {\n          <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n        }\n      </bon-intersection>\n    }\n\n    @if (src.ratio() > 0 && objectFit() === MarcyObjectFit.Original) {\n      <div [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n    }\n  </div>\n}\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: 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: "21.0.6", ngImport: i0, type: MarcyImageComponent, decorators: [{
             type: Component,
-            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
-            }] } });
+            args: [{ selector: "bon-image", imports: [NgTemplateOutlet, IntersectionComponent], template: "@if (sources().length > 0) {\n  <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=\"picture-container\">\n\n    <ng-template #pictureTemplate>\n      <picture>\n        @for (source of sources(); track $index) {\n          <source [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()\" alt=\"\" />\n      </picture>\n    </ng-template>\n\n    @if (device.isSSR) {\n      <noscript>\n        <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n      </noscript>\n    } @else {\n      <bon-intersection #intersectionZone [session]=\"src\">\n        @if (intersectionZone.isIntersected()) {\n          <ng-container *ngTemplateOutlet=\"pictureTemplate\"></ng-container>\n        }\n      </bon-intersection>\n    }\n\n    @if (src.ratio() > 0 && objectFit() === MarcyObjectFit.Original) {\n      <div [style.padding-top]=\"100 / src.ratio() +'%'\"></div>\n    }\n  </div>\n}\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: i0.Output, args: ["isLoaded"] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }] } });
 
 class VideoSrcDirective extends SrcBaseDirective {
-    set vidsrc(value) {
-        this.data = value;
-        console.log('set vidsrc', value);
-    }
+    data = model(undefined, { ...(ngDevMode ? { debugName: "data" } : {}), alias: "vidsrc" });
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: VideoSrcDirective, isStandalone: true, selector: "[vidsrc]", inputs: { data: { classPropertyName: "data", publicName: "vidsrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "vidsrcChange" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VideoSrcDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: '[vidsrc]',
+                    selector: "[vidsrc]",
                 }]
-        }], propDecorators: { vidsrc: [{
-                type: Input
-            }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "vidsrc", required: false }] }, { type: i0.Output, args: ["vidsrcChange"] }] } });
 
 function isWebM(src) {
-    return src.mimeType === 'video/webm';
+    return src.mimeType === "video/webm";
 }
 class MarcyVideoComponent {
     MediaStatus = MediaStatus;
     MarcyObjectFit = MediaObjectFit;
-    videoRef;
-    isLoaded = new EventEmitter();
-    $status = signal(MediaStatus.NotSet, ...(ngDevMode ? [{ debugName: "$status" }] : []));
     src;
-    _effectCleanup;
-    source;
-    _objectFit = MediaObjectFit.Original;
+    isLoaded = output();
+    objectFit = input(MediaObjectFit.Original, ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    videoRef = viewChild("video", ...(ngDevMode ? [{ debugName: "videoRef" }] : []));
+    status = signal(MediaStatus.NotSet, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    source = signal(undefined, ...(ngDevMode ? [{ debugName: "source" }] : []));
     device = inject(DeviceServiceBase);
-    cd = inject(ChangeDetectorRef);
-    _u = inject(UnsubscriberService);
     _srcDir = inject(VideoSrcDirective, { optional: true });
     constructor() {
-        console.log('MarcyVideoComponent ctor');
         if (this._srcDir === undefined || this._srcDir === null)
             throw new Error(`${MarcyVideoComponent.name} should have [vidsrc] directive as source object`);
         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');
-        this.cd.detectChanges();
-    }
-    ngAfterViewInit() {
-        console.log('MarcyVideoComponent ngAfterViewInit');
-        // bind src changes
-        this.src.srcChange
-            .pipe(this._u.takeUntilDestroy)
-            .subscribe((val) => {
-            console.log('MarcyVideoComponent onSrcChange', val);
+        effect(() => {
+            this.src.data();
+            this.videoRef();
             this.updateSources();
-            // resubscribe because its updated with src
             this.subscribeToMediaQueryChange();
         });
-        this.updateSources();
-        // initial, for src added before init
-        this.subscribeToMediaQueryChange();
+        effect(() => {
+            if (this.status() === MediaStatus.Loaded) {
+                this.isLoaded.emit();
+            }
+        });
     }
     subscribeToMediaQueryChange() {
-        this.src
-            .watchMediaQueries()
-            .subscribe(() => {
-            console.log('MarcyVideoComponent watchMediaQueries');
+        this.src.watchMediaQueries().subscribe(() => {
+            console.log("MarcyVideoComponent watchMediaQueries");
             this.updateSources();
         });
     }
     updateSources() {
-        console.log('MarcyVideoComponent updateSources');
-        this.source = this.findMoreSuitableSource();
-        console.log('MarcyVideoComponent new source', this.source);
-        if (this.$status() === MediaStatus.NotSet && this.source === undefined) {
+        console.log("MarcyVideoComponent updateSources");
+        this.source.set(this.findMoreSuitableSource());
+        console.log("MarcyVideoComponent new source", this.source());
+        const src = this.source();
+        if (this.status() === MediaStatus.NotSet && src === undefined) {
             return;
         }
-        if (this.source === undefined) {
-            this.$status.set(MediaStatus.NotSet);
-            this.cd.detectChanges();
+        if (src === undefined) {
+            this.status.set(MediaStatus.NotSet);
             return;
         }
-        this.$status.set(MediaStatus.NotLoaded);
-        this.cd.detectChanges();
-    }
-    set objectFit(val) {
-        this._objectFit = val ?? MediaObjectFit.Original;
-        this.cd.detectChanges();
-    }
-    get objectFit() {
-        return this._objectFit;
+        this.status.set(MediaStatus.NotLoaded);
     }
     onLoad() {
-        this.$status.set(MediaStatus.Loaded);
+        this.status.set(MediaStatus.Loaded);
     }
     findMoreSuitableSource() {
-        if (this.videoRef === undefined) {
-            console.log('skipping findMoreSuitableSource. videoRef is empty still');
+        const ref = this.videoRef();
+        if (ref === undefined) {
+            console.log("skipping findMoreSuitableSource. videoRef is empty still");
             return;
         }
-        const videoSources = this.src.data?.sources ?? [];
-        const currentVideoWidth = this.videoRef.nativeElement.clientWidth;
+        const videoSources = this.src.data()?.sources ?? [];
+        const currentVideoWidth = ref.nativeElement.clientWidth;
         const realPixelsVideoWidth = this.device.devicePixelRatio * currentVideoWidth;
         console.log(`MarcyVideoComponent currentVideoWidth ${currentVideoWidth}`);
         console.log(`MarcyVideoComponent realPixelsVideoWidth ${realPixelsVideoWidth}`);
@@ -866,19 +742,14 @@ class MarcyVideoComponent {
             if (!matchesMediaQuery(videoSource.mediaQuery))
                 continue;
             // SSR
-            if (typeof this.videoRef.nativeElement?.canPlayType !== 'function') {
-                // return first mp4, because all players can play them
-                const mp4Srcs = videoSource
-                    .srcSet
-                    .filter(x => x.mimeType === 'video/mp4')
-                    .sort(descendingT(x => x.meta.width)); // bigest video
-                // console.log(`ssr found video ${mp4Srcs[0].url}`)
-                // element or undefined
+            if (typeof ref.nativeElement.canPlayType !== "function") {
+                const mp4Srcs = videoSource.srcSet
+                    .filter((x) => x.mimeType === "video/mp4")
+                    .sort(descendingT((x) => x.meta.width));
                 return mp4Srcs[0];
             }
-            const fileSrcs = videoSource
-                .srcSet
-                .filter(x => this.videoRef.nativeElement.canPlayType(x.mimeType))
+            const fileSrcs = videoSource.srcSet
+                .filter((x) => ref.nativeElement.canPlayType(x.mimeType))
                 .sort((a, b) => {
                 if (a.meta.width === b.meta.width) {
                     return isWebM(a) ? -1 : 1; // if same width prefer webM
@@ -904,111 +775,51 @@ class MarcyVideoComponent {
         }
         return undefined;
     }
-    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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MarcyVideoComponent, isStandalone: true, selector: "bon-video", inputs: { objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoaded: "isLoaded" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class.knownRatio]=\"\n    src.ratio() > 0 && objectFit() === MarcyObjectFit.Original\n  \"\n  [class.cover]=\"objectFit() === MarcyObjectFit.Cover\"\n  [class.contain]=\"objectFit() === MarcyObjectFit.Contain\"\n  [class.loaded]=\"status() === MediaStatus.Loaded\"\n  class=\"video-container\"\n>\n  @if (device.isSSR) {\n    <ng-container *ngTemplateOutlet=\"ssrTemplate\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"browserTemplate\"></ng-container>\n  }\n\n  <ng-template #videoTemplate>\n    <video\n      #video\n      [src]=\"source()?.url ?? ''\"\n      (load)=\"onLoad()\"\n      (canplay)=\"video.muted = true; video.play()\"\n      playsInline\n      autoplay\n      loop\n      muted\n    ></video>\n  </ng-template>\n\n  <ng-template #ssrTemplate>\n    @if (device.isSSR) {\n      <noscript>\n        <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n      </noscript>\n    }\n  </ng-template>\n\n  <ng-template #browserTemplate>\n    <bon-intersection #intersectionZone [session]=\"src\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </bon-intersection>\n  </ng-template>\n\n  @if (src.ratio() > 0 && objectFit() === MarcyObjectFit.Original) {\n    <div [style.padding-top]=\"100 / src.ratio() + '%'\"></div>\n  }\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: "directive", type: 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: "21.0.6", ngImport: i0, type: MarcyVideoComponent, decorators: [{
             type: Component,
-            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: [{
-                type: Output
-            }], objectFit: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bon-video", imports: [NgTemplateOutlet, IntersectionComponent], template: "<div\n  [class.knownRatio]=\"\n    src.ratio() > 0 && objectFit() === MarcyObjectFit.Original\n  \"\n  [class.cover]=\"objectFit() === MarcyObjectFit.Cover\"\n  [class.contain]=\"objectFit() === MarcyObjectFit.Contain\"\n  [class.loaded]=\"status() === MediaStatus.Loaded\"\n  class=\"video-container\"\n>\n  @if (device.isSSR) {\n    <ng-container *ngTemplateOutlet=\"ssrTemplate\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"browserTemplate\"></ng-container>\n  }\n\n  <ng-template #videoTemplate>\n    <video\n      #video\n      [src]=\"source()?.url ?? ''\"\n      (load)=\"onLoad()\"\n      (canplay)=\"video.muted = true; video.play()\"\n      playsInline\n      autoplay\n      loop\n      muted\n    ></video>\n  </ng-template>\n\n  <ng-template #ssrTemplate>\n    @if (device.isSSR) {\n      <noscript>\n        <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n      </noscript>\n    }\n  </ng-template>\n\n  <ng-template #browserTemplate>\n    <bon-intersection #intersectionZone [session]=\"src\">\n      <ng-container *ngTemplateOutlet=\"videoTemplate\"></ng-container>\n    </bon-intersection>\n  </ng-template>\n\n  @if (src.ratio() > 0 && objectFit() === MarcyObjectFit.Original) {\n    <div [style.padding-top]=\"100 / src.ratio() + '%'\"></div>\n  }\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: { isLoaded: [{ type: i0.Output, args: ["isLoaded"] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], videoRef: [{ type: i0.ViewChild, args: ["video", { isSignal: true }] }] } });
 
 class MarcyMediaComponent {
-    cd = inject(ChangeDetectorRef);
     MarcyObjectFit = MediaObjectFit;
-    isLoaded = new EventEmitter();
-    _objectFit = MediaObjectFit.Original;
-    _src;
-    constructor() {
-        const cd = this.cd;
-        console.log('MarcyMediaComponent ctor');
-        cd.detach();
-    }
-    ngOnInit() {
-        console.log('MarcyMediaComponent ngOnInit');
-        this.cd.detectChanges();
-    }
-    get src() {
-        return this._src;
-    }
-    set src(val) {
-        console.log('set data', val);
-        this._src = val;
-        this.cd.detectChanges();
-    }
-    set objectFit(val) {
-        this._objectFit = val ?? MediaObjectFit.Original;
-        this.cd.detectChanges();
-    }
-    get objectFit() {
-        return this._objectFit;
-    }
+    isLoaded = output();
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    objectFit = input(MediaObjectFit.Original, ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
     onLoad() {
-        this.isLoaded.next();
+        this.isLoaded.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyMediaComponent, deps: [], 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MarcyMediaComponent, isStandalone: true, selector: "bon-media", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoaded: "isLoaded" }, ngImport: i0, template: "@if (src(); as mediaSrc) {\n  @if (mediaSrc.type === 'image') {\n    <bon-image\n      [imgsrc]=\"mediaSrc\"\n      [objectFit]=\"objectFit()\"\n      (isLoaded)=\"onLoad()\"\n    ></bon-image>\n  } @else if (mediaSrc.type === 'video') {\n    <bon-video\n      [vidsrc]=\"mediaSrc\"\n      [objectFit]=\"objectFit()\"\n      (isLoaded)=\"onLoad()\"\n    ></bon-video>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ 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"], outputs: ["vidsrcChange"] }, { kind: "directive", type: ImageSrcDirective, selector: "[imgsrc]", inputs: ["imgsrc"], outputs: ["imgsrcChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MarcyMediaComponent, decorators: [{
             type: Component,
-            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: () => [], propDecorators: { isLoaded: [{
-                type: Output
-            }], src: [{
-                type: Input
-            }], objectFit: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bon-media", imports: [MarcyImageComponent, MarcyVideoComponent, VideoSrcDirective, ImageSrcDirective], template: "@if (src(); as mediaSrc) {\n  @if (mediaSrc.type === 'image') {\n    <bon-image\n      [imgsrc]=\"mediaSrc\"\n      [objectFit]=\"objectFit()\"\n      (isLoaded)=\"onLoad()\"\n    ></bon-image>\n  } @else if (mediaSrc.type === 'video') {\n    <bon-video\n      [vidsrc]=\"mediaSrc\"\n      [objectFit]=\"objectFit()\"\n      (isLoaded)=\"onLoad()\"\n    ></bon-video>\n  }\n}\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { isLoaded: [{ type: i0.Output, args: ["isLoaded"] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }] } });
 
-class BoneDirective {
-    _bone;
-    cd = inject(ChangeDetectorRef);
-    localizationService = inject(LocalizeServiceBase);
-    _effectCleanup;
-    constructor() {
-        this.cd.detach();
-        // 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;
-        this.cd.detectChanges();
-    }
-    get bone() {
-        if (this._bone === undefined || this._bone === null)
-            throw new Error('The property "bone" should be set at least once. For example in skeleton');
-        return this._bone;
-    }
-    ngOnDestroy() {
-        this._effectCleanup?.destroy();
+class BoneMap extends Map {
+    getRequired(key) {
+        const value = this.get(key);
+        if (value === undefined || value === null) {
+            throw Error(`BoneMap doesn't contain type for key = ${key}`);
+        }
+        return value;
     }
+}
+
+class BoneDirective {
+    bone = model.required(...(ngDevMode ? [{ debugName: "bone" }] : []));
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: BoneDirective, isStandalone: true, selector: "[bonBoneDir]", inputs: { bone: { classPropertyName: "bone", publicName: "bone", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { bone: "boneChange" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bonBoneDir]',
-                    standalone: true
+                    selector: "[bonBoneDir]",
                 }]
-        }], ctorParameters: () => [] });
+        }], propDecorators: { bone: [{ type: i0.Input, args: [{ isSignal: true, alias: "bone", required: true }] }, { type: i0.Output, args: ["boneChange"] }] } });
 
 class SkeletonAnchorDirective {
     viewContainerRef = inject(ViewContainerRef);
@@ -1018,92 +829,64 @@ class SkeletonAnchorDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonAnchorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bonSkeletonAnchor]',
-                    standalone: true
+                    selector: "[bonSkeletonAnchor]",
                 }]
         }] });
 
 class UnknownBoneComponent {
-    cd = inject(ChangeDetectorRef);
     bd = inject((BoneDirective), { host: true });
-    constructor() {
-        console.log('BoneDirective', this.bd);
-        this.cd.detach();
-    }
-    ngOnInit() {
-        this.cd.detectChanges();
-    }
     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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: UnknownBoneComponent, isStandalone: true, selector: "bon-unknown-bone", hostDirectives: [{ directive: BoneDirective, inputs: ["bone", "bone"], outputs: ["boneChange", "boneChange"] }], ngImport: i0, template: `@if (bd.bone(); as bone) {
+               <h2>unknown bone {{bone.type}}</h2>
+               <div>{{bone | json}}</div>
+             } @else{
+              bone is undefined
+             }`, isInline: true, styles: [":host{display:block;border:2px solid red;box-sizing:border-box}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneComponent, decorators: [{
             type: Component,
-            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: () => [] });
+            args: [{ selector: "bon-unknown-bone", imports: [JsonPipe], hostDirectives: [{ directive: BoneDirective, inputs: ["bone"], outputs: ["boneChange"] }], template: `@if (bd.bone(); as bone) {
+               <h2>unknown bone {{bone.type}}</h2>
+               <div>{{bone | json}}</div>
+             } @else{
+              bone is undefined
+             }`, styles: [":host{display:block;border:2px solid red;box-sizing:border-box}\n"] }]
+        }] });
 
 class SkeletonComponent {
-    skeletonAnchor;
-    map;
-    _bones = [];
-    iniailized = false;
-    cd = inject(ChangeDetectorRef);
-    ngOnInit() {
-        this.iniailized = true;
-        this.fillComponentFromBones();
-    }
-    set bones(newValue) {
-        this._bones.splice(0, this._bones.length);
-        this._bones.push(...newValue ?? []);
-        this.fillComponentFromBones();
-    }
-    fillComponentFromBones() {
-        if (this.iniailized === false)
-            return;
-        const viewContainerRef = this.skeletonAnchor.viewContainerRef;
-        viewContainerRef.clear();
-        if (this.map === undefined || this.map === null)
-            throw new Error('add type map with input: [map]="..."');
-        for (const bone of this._bones) {
-            let componentType = this.map.get(bone.type);
-            if (componentType === undefined || componentType === null) {
-                console.warn(`Mapping type for ${bone.type} not found`);
-                componentType = UnknownBoneComponent;
+    skeletonAnchor = viewChild.required(SkeletonAnchorDirective);
+    map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
+    bones = input.required(...(ngDevMode ? [{ debugName: "bones" }] : []));
+    constructor() {
+        effect(() => {
+            const anchor = this.skeletonAnchor();
+            const bones = this.bones();
+            const mapVal = this.map();
+            const viewContainerRef = anchor.viewContainerRef;
+            viewContainerRef.clear();
+            if (mapVal === undefined || mapVal === null)
+                throw new Error('add type map with input: [map]="..."');
+            for (const bone of bones) {
+                let componentType = mapVal.get(bone.type);
+                if (componentType === undefined || componentType === null) {
+                    console.warn(`Mapping type for ${bone.type} not found`);
+                    componentType = UnknownBoneComponent;
+                }
+                viewContainerRef.createComponent(componentType).setInput("bone", bone);
             }
-            const boneComponentRef = viewContainerRef.createComponent(componentType);
-            boneComponentRef.instance.bd.bone = bone;
-        }
+        });
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: SkeletonComponent, isStandalone: true, selector: "bon-skeleton", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, bones: { classPropertyName: "bones", publicName: "bones", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "skeletonAnchor", first: true, predicate: SkeletonAnchorDirective, descendants: true, isSignal: 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: "21.0.6", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            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: [{
-                type: Input,
-                args: [{ required: true }]
-            }], bones: [{
-                type: Input
-            }] } });
-
-class BoneMap extends Map {
-    getRequired(key) {
-        const value = this.get(key);
-        if (value === undefined || value === null) {
-            throw Error(`BoneMap doesn't contain type for key = ${key}`);
-        }
-        return value;
-    }
-}
+            args: [{ selector: "bon-skeleton", imports: [SkeletonAnchorDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template bonSkeletonAnchor></ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { skeletonAnchor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SkeletonAnchorDirective), { isSignal: true }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], bones: [{ type: i0.Input, args: [{ isSignal: true, alias: "bones", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, VideoSrcDirective, emptyBone, emptyImage, emptyLocalizedString, emptyVideo, getDefaultSrc, toHtmlPictureSources };
 //# sourceMappingURL=candy-kingdom-bonnie.mjs.map