@candy-kingdom/bonnie 0.1.1

package/fesm2022/candy-kingdom-bonnie.mjs

@@ -0,0 +1,1107 @@
+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';
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+var PublishStatus;
+(function (PublishStatus) {
+    PublishStatus[PublishStatus["NotSet"] = 0] = "NotSet";
+    PublishStatus[PublishStatus["Draft"] = 1] = "Draft";
+    PublishStatus[PublishStatus["Published"] = 2] = "Published";
+    PublishStatus[PublishStatus["Archived"] = 3] = "Archived";
+})(PublishStatus || (PublishStatus = {}));
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+var SizesWidthUnit;
+(function (SizesWidthUnit) {
+    SizesWidthUnit["Px"] = "Px";
+    SizesWidthUnit["Em"] = "Em";
+    SizesWidthUnit["Vw"] = "Vw";
+})(SizesWidthUnit || (SizesWidthUnit = {}));
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * 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}`)
+        .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 {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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();
+        console.log('SrcBaseDirective ctor');
+        this.cd.detach();
+    }
+    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;
+    }
+    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._ratioSubject.next(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._ratioSubject.next(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._ratioSubject.next(ratio);
+                return;
+            }
+            if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+                return;
+            const mediaQueryList = window.matchMedia(source.mediaQuery);
+            if (mediaQueryList.matches) {
+                this._ratioSubject.next(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;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SrcBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bonSrcBase]',
+                    providers: [UnsubscriberService]
+                }]
+        }], ctorParameters: () => [{ type: UnsubscriberService }, { type: i0.ChangeDetectorRef }], 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 {
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable
+        }] });
+
+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();
+        // 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));
+    }
+    ngOnInit() {
+        this._intersectSubject
+            .pipe(this._u.takeUntilDestroy, filter(x => x === true))
+            .subscribe(x => this.intersected.next());
+    }
+    set session(newSession) {
+        if (this._session === newSession)
+            return;
+        console.log('reset intersection Observer');
+        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.intersectionObserver.observe(this._hostRef.nativeElement);
+    }
+    onIntersection(entries, observer) {
+        if (entries.length > 1) {
+            console.warn('multi entries!');
+        }
+        const isIntersecting = entries[0].isIntersecting;
+        this._intersectSubject.next(isIntersecting);
+        console.log(`intersected ${isIntersecting}`, this._hostRef.nativeElement);
+        // only once will recieve intersection
+        if (isIntersecting) {
+            observer.unobserve(this._hostRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this._intersectSubject.complete();
+        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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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: [{
+                type: Output
+            }], session: [{
+                type: Input
+            }] } });
+
+class LocalizeServiceBase {
+    getLocalized(value, defaultValue, locale) {
+        if (value === undefined)
+            return defaultValue;
+        locale = locale ?? this.locale;
+        const obj = value[locale] ?? defaultValue;
+        return obj;
+    }
+    getLocalizedText(value, locale) {
+        return this.getLocalized(value, '', locale);
+    }
+    ;
+    isLocalUrl(value, locale) {
+        const url = this.getLocalizedText(value, locale);
+        return isLocalUrlString(url);
+    }
+}
+
+class LocalizePipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localize', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+class LocalizeObjectPipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeObjectPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localizeObject', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+class LocalizationIsNotEmptyPipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    transform(value, locale) {
+        if (value === undefined || value === null)
+            return false;
+        const text = this.localizeService.getLocalizedText(value, locale);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsNotEmptyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localizationIsNotEmpty', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+class LocalizationIsEmptyPipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    transform(value, locale) {
+        if (value === undefined || value === null)
+            return true;
+        const text = this.localizeService.getLocalizedText(value, locale);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationIsEmptyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localizationIsEmpty', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+class LocalizeUrlPipe {
+    constructor(localizeService, domSanitizer) {
+        this.localizeService = localizeService;
+        this.domSanitizer = domSanitizer;
+    }
+    transform(value, locale) {
+        if (value === undefined || value === null)
+            return '';
+        const urlString = this.localizeService.getLocalizedText(value, locale);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localizeUrl', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }, { type: i2.DomSanitizer }] });
+class IsLocalUrlPipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsLocalUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'isLocalUrl', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+class IsNotLocalUrlPipe {
+    constructor(localizeService) {
+        this.localizeService = localizeService;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IsNotLocalUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'isNotLocalUrl', pure: false }]
+        }], ctorParameters: () => [{ type: LocalizeServiceBase }] });
+
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageSrcDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[imgsrc]'
+                }]
+        }], propDecorators: { imgsrc: [{
+                type: Input
+            }] } });
+
+function toHtmlPictureSources(imageSource) {
+    const sizes = generateSizesString(imageSource.sizes);
+    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 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 {
+    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;
+        console.log('MarcyImageComponent ctor');
+        if (srcDir === undefined || srcDir === null)
+            throw new Error(`${MarcyImageComponent.name} should have [imgsrc] directive as source object`);
+        this.src = srcDir;
+        // bind src changes
+        this.src.srcChange
+            .pipe(this._u.takeUntilDestroy)
+            .subscribe(this.onSrcChange.bind(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();
+    }
+    onSrcChange(val) {
+        console.log('MarcyImageComponent onSrcChange', val);
+        this.defaultSrc = getDefaultSrc(val)?.url ?? '';
+        this.sources.splice(0, this.sources.length);
+        if (val === undefined || val === null || val.sources.length === 0) {
+            this.$status.next(MediaStatus.NotSet);
+            this.cd.detectChanges();
+            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;
+    }
+    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\"\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: "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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bon-image', 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: () => [{ type: DeviceServiceBase }, { type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: ImageSrcDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { isLoaded: [{
+                type: Output
+            }], objectFit: [{
+                type: Input
+            }] } });
+
+class VideoSrcDirective extends SrcBaseDirective {
+    set vidsrc(value) {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VideoSrcDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vidsrc]'
+                }]
+        }], propDecorators: { vidsrc: [{
+                type: Input
+            }] } });
+
+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;
+        console.log('MarcyVideoComponent ctor');
+        if (srcDir === undefined || srcDir === null)
+            throw new Error(`${MarcyVideoComponent.name} should have [vidsrc] directive as source object`);
+        this.src = srcDir;
+        cd.detach();
+    }
+    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() {
+        console.log('MarcyVideoComponent ngAfterViewInit');
+        // bind src changes
+        this.src.srcChange
+            .pipe(this._u.takeUntilDestroy)
+            .subscribe((val) => {
+            console.log('MarcyVideoComponent onSrcChange', val);
+            this.updateSources();
+            // resubscribe because its updated with src
+            this.subscribeToMediaQueryChange();
+        });
+        this.updateSources();
+        // initial, for src added before init
+        this.subscribeToMediaQueryChange();
+    }
+    subscribeToMediaQueryChange() {
+        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.value === MediaStatus.NotSet && this.source === undefined) {
+            return;
+        }
+        if (this.source === undefined) {
+            this.$status.next(MediaStatus.NotSet);
+            this.cd.detectChanges();
+            return;
+        }
+        this.$status.next(MediaStatus.NotLoaded);
+        this.cd.detectChanges();
+    }
+    set objectFit(val) {
+        this._objectFit = val ?? MediaObjectFit.Original;
+        this.cd.detectChanges();
+    }
+    get objectFit() {
+        return this._objectFit;
+    }
+    onLoad() {
+        this.$status.next(MediaStatus.Loaded);
+    }
+    findMoreSuitableSource() {
+        if (this.videoRef === undefined) {
+            console.log('skipping findMoreSuitableSource. videoRef is empty still');
+            return;
+        }
+        const videoSources = this.src.data?.sources ?? [];
+        const currentVideoWidth = this.videoRef.nativeElement.clientWidth;
+        const realPixelsVideoWidth = this.device.devicePixelRatio * currentVideoWidth;
+        console.log(`MarcyVideoComponent currentVideoWidth ${currentVideoWidth}`);
+        console.log(`MarcyVideoComponent realPixelsVideoWidth ${realPixelsVideoWidth}`);
+        for (let i = 0; i < videoSources.length; i++) {
+            const videoSource = videoSources[i];
+            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
+                // element or undefined
+                return mp4Srcs[0];
+            }
+            const fileSrcs = videoSource
+                .srcSet
+                .filter(x => this.videoRef.nativeElement.canPlayType(x.mimeType))
+                .sort(ascendingT(x => x.meta.width)) // smallest video
+                .sort(x => x.mimeType.includes('webm') ? 1 : -1); // webm first
+            if (fileSrcs.length === 0)
+                continue;
+            let bestSrc = fileSrcs[0];
+            for (let i = 1; i < fileSrcs.length; i++) {
+                const fileSrc = fileSrcs[i];
+                const currentDiff = fileSrc.meta.width - realPixelsVideoWidth;
+                // too big video source width
+                if (currentDiff > 0)
+                    break;
+                bestSrc = fileSrc;
+            }
+            return bestSrc;
+        }
+        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\"\n     [class.cover]=\"objectFit === MarcyObjectFit.Cover\"\n     [class.contain]=\"objectFit === MarcyObjectFit.Contain\"\n     [class.loaded]=\"($status | async) === 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           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: "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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bon-video', 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 | async) === 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           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: () => [{ type: DeviceServiceBase }, { type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: VideoSrcDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { videoRef: [{
+                type: ViewChild,
+                args: ['video']
+            }], isLoaded: [{
+                type: Output
+            }], objectFit: [{
+                type: Input
+            }] } });
+
+class MarcyMediaComponent {
+    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();
+    }
+    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;
+    }
+    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'\"\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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bon-media', 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: [{
+                type: Input
+            }], objectFit: [{
+                type: Input
+            }] } });
+
+class BoneDirective {
+    constructor(cd, _u, localizationService) {
+        this.cd = cd;
+        this._u = _u;
+        this.localizationService = localizationService;
+        this.cd.detach();
+    }
+    ngOnInit() {
+        this.localizationService.locale$
+            .pipe(this._u.takeUntilDestroy)
+            .subscribe(() => {
+            // need to detect changes in our detached components
+            this.cd.detectChanges();
+        });
+    }
+    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;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bonBoneDir]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UnsubscriberService }, { type: LocalizeServiceBase }] });
+
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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();
+    }
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bon-unknown-bone', 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 }] });
+
+class SkeletonComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this._bones = [];
+        this.iniailized = false;
+    }
+    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;
+            }
+            const boneComponentRef = viewContainerRef.createComponent(componentType);
+            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>\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: [{
+            type: Component,
+            args: [{ selector: 'bon-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template bonSkeletonAnchor></ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { skeletonAnchor: [{
+                type: ViewChild,
+                args: [SkeletonAnchorDirective, { static: true }]
+            }], map: [{
+                type: Input,
+                args: [{ required: true }]
+            }], bones: [{
+                type: Input
+            }] } });
+
+const components = [
+    MarcyImageComponent,
+    MarcyVideoComponent,
+    MarcyMediaComponent,
+    IntersectionComponent,
+    //
+    SkeletonComponent,
+    UnknownBoneComponent
+];
+const directives = [
+    SrcBaseDirective,
+    ImageSrcDirective,
+    VideoSrcDirective,
+];
+const standAloneDirectives = [
+    SkeletonAnchorDirective,
+    BoneDirective
+];
+const pipes = [
+    LocalizePipe,
+    LocalizationIsNotEmptyPipe
+];
+class MarcyElementsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: MarcyElementsModule, declarations: [MarcyImageComponent,
+            MarcyVideoComponent,
+            MarcyMediaComponent,
+            IntersectionComponent,
+            //
+            SkeletonComponent,
+            UnknownBoneComponent, SrcBaseDirective,
+            ImageSrcDirective,
+            VideoSrcDirective, LocalizePipe,
+            LocalizationIsNotEmptyPipe], imports: [CommonModule, SkeletonAnchorDirective,
+            BoneDirective], exports: [CommonModule, 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: MarcyElementsModule, providers: [
+            ...pipes,
+            UnsubscriberService,
+            DeviceService,
+            { provide: DeviceServiceBase, useExisting: DeviceService },
+        ], imports: [CommonModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MarcyElementsModule, 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, DeviceService, DeviceServiceBase, ImageSrcDirective, IntersectionComponent, IsLocalUrlPipe, IsNotLocalUrlPipe, LocalizationIsEmptyPipe, LocalizationIsNotEmptyPipe, LocalizeObjectPipe, LocalizePipe, LocalizeServiceBase, LocalizeUrlPipe, MarcyElementsModule, MarcyImageComponent, MarcyMediaComponent, MarcyVideoComponent, MediaObjectFit, MediaStatus, PublishStatus, SizesWidthUnit, SkeletonAnchorDirective, SkeletonComponent, SrcBaseDirective, UnknownBoneComponent, UnsubscriberService, VideoSrcDirective, getDefaultSrc, toHtmlPictureSources };
+//# sourceMappingURL=candy-kingdom-bonnie.mjs.map