@candy-kingdom/bonnie-cms 0.1.8 → 0.2.0

package/fesm2022/candy-kingdom-bonnie-cms.mjs

@@ -1,16 +1,18 @@
-import * as i1 from '@angular/common/http';
-import { HttpRequest, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, forwardRef, Directive, Output, Component, ContentChildren, Host, Input, ViewChildren, ViewChild, HostBinding, NgModule } from '@angular/core';
-import { of, combineLatest, map, merge, mergeMap, Subject, debounceTime, last, catchError, Observable } from 'rxjs';
+import { EventEmitter, forwardRef, Directive, Output, Component, ContentChildren, Host, Input, ViewChildren, ViewChild, ChangeDetectorRef, inject, Injectable, Inject, HostBinding, NgModule } from '@angular/core';
+import { Subject, debounceTime, map, last, catchError, Observable, of, combineLatest, merge, mergeMap } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/common';
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i2 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { take } from 'rxjs/operators';
-import * as i1$2 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/common/http';
+import { HttpRequest, HttpEventType } from '@angular/common/http';
+import * as i3 from 'ngx-lottie';
+import { LottieComponent } from 'ngx-lottie';
 import * as i4 from '@candy-kingdom/bonnie';
 import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
 
@@ -54,6 +56,21 @@ import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
  * 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.
@@ -111,107 +128,6 @@ var DeviceVisibility;
     DeviceVisibility[DeviceVisibility["All"] = 7] = "All";
 })(DeviceVisibility || (DeviceVisibility = {}));
 
-class DataService {
-    constructor(http, baseHref) {
-        this.http = http;
-        this.baseHref = baseHref;
-    }
-    getView(viewCode) {
-        const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
-        return pageOb;
-    }
-    getPage(pageRoute) {
-        const pageUrl = `/${pageRoute}`;
-        const pageOb = this.getSkeleton(`${this.baseHref}api/pages/?url=${encodeURIComponent(pageUrl)}`);
-        return pageOb;
-    }
-    getSettings(ids) {
-        const pageOb = this.http.get(`${this.baseHref}api/settings`, {
-            params: { ids: ids }
-        });
-        return pageOb;
-    }
-    getSkeleton(url) {
-        const skeletonOb = this.http.get(url);
-        const routeDataObs = skeletonOb
-            .pipe(map(x => {
-            const notEmptyDataRoutes = x.bones
-                .map(b => ('dataRoute' in b) && typeof (b.dataRoute) === 'string' ? b.dataRoute : '')
-                .filter(x => x.length > 0);
-            if (notEmptyDataRoutes.length === 0) {
-                const emptyData = {};
-                return { page: of(x), data: of(emptyData) };
-            }
-            return {
-                page: of(x),
-                data: combineLatest(notEmptyDataRoutes
-                    .map(dataRoute => {
-                    const url = `${this.baseHref}api/Pages/Children/?url=${dataRoute}`;
-                    return {
-                        route: dataRoute,
-                        json: this.http.get(url)
-                    };
-                })
-                    .reduce((prev, curr) => {
-                    prev[curr.route] = curr.json;
-                    return prev;
-                }, {}))
-            };
-        }), map(x => combineLatest(x)), mergeMap(res => merge(res)), map(x => {
-            for (const bone of x.page.bones) {
-                if (!('dataRoute' in bone) || typeof bone.dataRoute !== 'string' || bone.dataRoute.length === 0)
-                    continue;
-                const data = x.data[bone.dataRoute];
-                if (data === undefined || data === null)
-                    throw new Error(`Data ${bone.dataRoute} have not been preloaded`);
-                bone.data = data; // todo: fix
-            }
-            return x.page;
-        }));
-        return routeDataObs;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, deps: [{ token: i1.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_BASE_HREF]
-                }] }] });
-
-class AdminDataService {
-    constructor(http, baseHref) {
-        this.http = http;
-        this.baseHref = baseHref;
-        console.log('baseHref: ' + baseHref);
-    }
-    getSettingGroups() {
-        const pageOb = this.http.get(`${this.baseHref}api/admin/settings`);
-        return pageOb;
-    }
-    getPage(url) {
-        const pageOb = this.http.get(`${this.baseHref}api/admin/pages/${url}`);
-        return pageOb;
-    }
-    storePage(page) {
-        const ob = this.http.post(`${this.baseHref}api/admin/pages`, page);
-        return ob;
-    }
-    updateSettings(settings) {
-        const ob = this.http.post(`${this.baseHref}api/admin/settings`, settings);
-        return ob;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, deps: [{ token: i1.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_BASE_HREF]
-                }] }] });
-
 class EditableDirective {
     constructor() {
         this.saved = new EventEmitter();
@@ -464,9 +380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 
 class FormBaseComponent {
     static { this.inputs = ['locale']; }
-    constructor(editable, http) {
+    constructor(editable) {
         this.editable = editable;
-        this.http = http;
         this.name = '';
         this._locale = '';
     }
@@ -476,7 +391,7 @@ class FormBaseComponent {
     get locale() {
         return this._locale;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormBaseComponent, deps: [{ token: EditableDirective, host: true }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormBaseComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FormBaseComponent, selector: "ng-component", inputs: { locale: "locale" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormBaseComponent, decorators: [{
@@ -486,7 +401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
                     type: Host
-                }] }, { type: i1.HttpClient }], propDecorators: { locale: [{
+                }] }], propDecorators: { locale: [{
                 type: Input
             }] } });
 
@@ -507,7 +422,7 @@ class TranslationInputComponent {
         this.blurred.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: { text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: { text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, decorators: [{
             type: Component,
@@ -559,7 +474,7 @@ class TranslationTextareaComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: { minRows: "minRows", maxRows: "maxRows", text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, viewQueries: [{ propertyName: "autosizeList", predicate: CdkTextareaAutosize, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea [(ngModel)]=\"text[locale]\"\r\n          [cdkAutosizeMinRows]=\"minRows\"\r\n          [cdkAutosizeMaxRows]=\"maxRows\"\r\n          (click)=\"onClick()\"\r\n          (keyup)=\"onKeyPress()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          cdkTextareaAutosize>\r\n</textarea>\r\n", styles: [":host{display:block;padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}textarea{display:block;width:100%;line-height:140%;padding:2px 0;margin:0;box-sizing:content-box;border:none;resize:none;color:silver;background-color:transparent}textarea:focus{outline:none}textarea[readonly]{cursor:pointer}textarea[readonly]::selection{-webkit-user-select:none;user-select:none}textarea[readonly]:hover{background:repeating-linear-gradient(-45deg,#ccff00,#ccff00 10px,rgba(0,0,0,0) 10px,rgba(0,0,0,0) 20px) fixed bottom;color:#000}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: { minRows: "minRows", maxRows: "maxRows", text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, viewQueries: [{ propertyName: "autosizeList", predicate: CdkTextareaAutosize, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea [(ngModel)]=\"text[locale]\"\r\n          [cdkAutosizeMinRows]=\"minRows\"\r\n          [cdkAutosizeMaxRows]=\"maxRows\"\r\n          (click)=\"onClick()\"\r\n          (keyup)=\"onKeyPress()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          cdkTextareaAutosize>\r\n</textarea>\r\n", styles: [":host{display:block;padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}textarea{display:block;width:100%;line-height:140%;padding:2px 0;margin:0;box-sizing:content-box;border:none;resize:none;color:silver;background-color:transparent}textarea:focus{outline:none}textarea[readonly]{cursor:pointer}textarea[readonly]::selection{-webkit-user-select:none;user-select:none}textarea[readonly]:hover{background:repeating-linear-gradient(-45deg,#ccff00,#ccff00 10px,rgba(0,0,0,0) 10px,rgba(0,0,0,0) 20px) fixed bottom;color:#000}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
             type: Component,
@@ -618,7 +533,7 @@ class LinkPopupComponent {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LinkPopupComponent, selector: "bonc-link-popup", inputs: { field: "field", maxRows: "maxRows", minRows: "minRows", linkTitle: "linkTitle", locale: "locale", link: "link" }, outputs: { linkChange: "linkChange", startEditing: "startEditing", changed: "changed", blurred: "blurred", open: "open", closed: "closed" }, ngImport: i0, template: "<bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                        (click)=\"showPopup()\"\r\n                        [text]=\"linkTitle\"\r\n                        [locale]=\"locale\"\r\n                        (startEditing)=\"onClick()\"\r\n                        (changed)=\"onChange()\"\r\n                        (blurred)=\"onBlur()\">\r\n</bonc-translation-input>\r\n\r\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                           (click)=\"showPopup()\"\r\n                           [text]=\"linkTitle\"\r\n                           [locale]=\"locale\"\r\n                           [minRows]=\"minRows\"\r\n                           [maxRows]=\"maxRows\"\r\n                           (startEditing)=\"onClick()\"\r\n                           (changed)=\"onChange()\"\r\n                           (blurred)=\"onBlur()\">\r\n</bonc-translation-textarea>\r\n\r\n<div *ngIf=\"popupIsShown\">\r\n  <div class=\"popup\">\r\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\r\n\r\n    <label>Link\r\n      <input [(ngModel)]=\"link[locale]\"\r\n             (click)=\"onClick()\"\r\n             (keyup)=\"onChange()\"\r\n             (blur)=\"onBlur()\">\r\n    </label>\r\n\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host translation-input{z-index:1}.popup{position:absolute;display:flex;flex-direction:column;justify-content:center;width:350px;padding:20px;box-sizing:border-box;color:#000;background-color:#fff;z-index:5;border:2px solid black}.popup a{cursor:pointer}.popup a:hover{background-color:#cf0}.popup a.close{position:absolute;top:10px;right:10px}.popup label+label{margin-top:20px}.popup input{width:100%;margin-top:5px;padding:6px;font-size:12px;box-sizing:border-box;border:1px solid #222}.popup input:hover,.popup input:focus{background-color:silver;color:#333;border-color:silver;outline:none}button{display:block;color:#fff;background-color:transparent;box-shadow:none;border:none;outline:none;text-decoration:none;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none;color:#000;cursor:pointer}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button:hover{background-color:#cf0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LinkPopupComponent, selector: "bonc-link-popup", inputs: { field: "field", maxRows: "maxRows", minRows: "minRows", linkTitle: "linkTitle", locale: "locale", link: "link" }, outputs: { linkChange: "linkChange", startEditing: "startEditing", changed: "changed", blurred: "blurred", open: "open", closed: "closed" }, ngImport: i0, template: "<bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                        (click)=\"showPopup()\"\r\n                        [text]=\"linkTitle\"\r\n                        [locale]=\"locale\"\r\n                        (startEditing)=\"onClick()\"\r\n                        (changed)=\"onChange()\"\r\n                        (blurred)=\"onBlur()\">\r\n</bonc-translation-input>\r\n\r\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                           (click)=\"showPopup()\"\r\n                           [text]=\"linkTitle\"\r\n                           [locale]=\"locale\"\r\n                           [minRows]=\"minRows\"\r\n                           [maxRows]=\"maxRows\"\r\n                           (startEditing)=\"onClick()\"\r\n                           (changed)=\"onChange()\"\r\n                           (blurred)=\"onBlur()\">\r\n</bonc-translation-textarea>\r\n\r\n<div *ngIf=\"popupIsShown\">\r\n  <div class=\"popup\">\r\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\r\n\r\n    <label>Link\r\n      <input [(ngModel)]=\"link[locale]\"\r\n             (click)=\"onClick()\"\r\n             (keyup)=\"onChange()\"\r\n             (blur)=\"onBlur()\">\r\n    </label>\r\n\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host translation-input{z-index:1}.popup{position:absolute;display:flex;flex-direction:column;justify-content:center;width:350px;padding:20px;box-sizing:border-box;color:#000;background-color:#fff;z-index:5;border:2px solid black}.popup a{cursor:pointer}.popup a:hover{background-color:#cf0}.popup a.close{position:absolute;top:10px;right:10px}.popup label+label{margin-top:20px}.popup input{width:100%;margin-top:5px;padding:6px;font-size:12px;box-sizing:border-box;border:1px solid #222}.popup input:hover,.popup input:focus{background-color:silver;color:#333;border-color:silver;outline:none}button{display:block;color:#fff;background-color:transparent;box-shadow:none;border:none;outline:none;text-decoration:none;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none;color:#000;cursor:pointer}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button:hover{background-color:#cf0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, decorators: [{
             type: Component,
@@ -653,45 +568,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: [{ required: true }]
             }] } });
 
-class AdminControlsComponent {
-    constructor() {
-        this.DeviceType = DeviceType;
-        this.deviceControls = false;
-        this.locale = 'en';
-        this.device = this.DeviceType.Desktop;
-    }
-    changeLocale() {
-        this.locale = this.locale === 'en' ? 'ru' : 'en';
-    }
-    changeDevice() {
-        switch (this.device) {
-            case DeviceType.Desktop:
-                this.device = DeviceType.Tablet;
-                return;
-            case DeviceType.Tablet:
-                this.device = DeviceType.Mobile;
-                return;
-            case DeviceType.Mobile:
-                this.device = DeviceType.Desktop;
-                return;
-            default:
-                this.device = DeviceType.Desktop;
-                return;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AdminControlsComponent, selector: "bonc-admin-controls", inputs: { editableGroup: "editableGroup", deviceControls: "deviceControls" }, ngImport: i0, template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-admin-controls', template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"] }]
-        }], propDecorators: { editableGroup: [{
-                type: Input,
-                args: [{ required: true }]
-            }], deviceControls: [{
-                type: Input
-            }] } });
-
 class FormControlsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FormControlsComponent, selector: "bonc-form-controls", inputs: { editable: "editable" }, ngImport: i0, template: "<div [class.edit]=\"editable.inEditMode\" class=\"content\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\r\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\r\n    <ng-container *ngIf=\"editable.isDirty\">\r\n        <a (click)=\"editable.cancel()\">reset</a>\r\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;background-color:#222;color:silver}.content{flex:1;padding:10px}.content.edit{background-color:#111}.controls{display:flex;flex-direction:column;width:100px;background-color:#111}.controls.hidden{opacity:0;pointer-events:none}.controls a{display:block}.controls a.apply{flex:1}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -704,21 +580,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: [{ required: true }]
             }] } });
 
-const imageMimeTypes = ['image/png', 'image/jpeg'];
-const videoMimeTypes = ['video/mp4'];
-const imageFileTypes = imageMimeTypes.join(',');
-const videoFileTypes = videoMimeTypes.join(',');
-const allMediaFileTypes = `${imageFileTypes},${videoFileTypes}`;
-class MediaUploaderComponent {
-    constructor(sanitizer, http) {
+class SeoFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._pageId = '';
+        this.ogImageUploadUrl = '';
+        this.label = '';
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    set pageId(value) {
+        this._pageId = value;
+        this.ogImageUploadUrl = `/api/admin/page/Og-Image?pageId=${this.pageId}`; // todo: replace with link to single image api
+    }
+    get pageId() {
+        return this._pageId;
+    }
+    ResToSrc(res) {
+        return res.url;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SeoFormComponent, selector: "bonc-seo-form", inputs: { label: "label", pageId: "pageId" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-seo-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], pageId: [{
+                type: Input
+            }] } });
+
+class FileUploaderComponent {
+    constructor(sanitizer, http, cd) {
         this.sanitizer = sanitizer;
         this.http = http;
-        this.MediaObjectFit = MediaObjectFit;
+        this.cd = cd;
         this.srcChange = new EventEmitter();
         this.progress = 0;
         this.isUploading = false;
         this.autoplay = true;
-        this.fileTypeMask = allMediaFileTypes;
+        this.fileTypeMask = undefined;
+        this._uploadTypes = [];
     }
     set src(newSrc) {
         if (this._src === newSrc)
@@ -728,52 +634,26 @@ class MediaUploaderComponent {
     get src() {
         return this._src;
     }
-    set uploadType(newUploadType) {
-        switch (newUploadType) {
-            case "image":
-                this._uploadType = newUploadType;
-                this.fileTypeMask = imageFileTypes;
-                break;
-            case "video":
-                this._uploadType = newUploadType;
-                this.fileTypeMask = videoFileTypes;
-                break;
-            case undefined:
-            default:
-                this._uploadType = newUploadType;
-                this.fileTypeMask = allMediaFileTypes;
-                break;
-        }
+    set uploadTypes(newUploadType) {
+        this._uploadTypes.splice(0, this._uploadTypes.length);
+        this._uploadTypes.push(...newUploadType);
+        this.fileTypeMask = this._uploadTypes.length === 0 ? undefined : this._uploadTypes.join(',');
+        this.cd.detectChanges();
     }
-    get uploadType() {
-        return this._uploadType;
+    get uploadTypes() {
+        return this._uploadTypes;
     }
     onFileSelect(fileInput) {
         if (fileInput.files === undefined || fileInput.files === null || fileInput.files.length !== 1)
             return;
         const file = fileInput.files[0];
-        let uploadingMediaType;
-        if (this._uploadType !== undefined && this._uploadType !== null) {
-            uploadingMediaType = this._uploadType;
-        }
-        else if (imageMimeTypes.includes(file.type)) {
-            uploadingMediaType = 'image';
-        }
-        else if (videoMimeTypes.includes(file.type)) {
-            uploadingMediaType = 'video';
-        }
-        else {
-            console.error(`unknown media type ${file.type} (${file.name})`);
-            return;
-        }
-        const uploadUrl = this.uploadUrlMap.get(uploadingMediaType);
+        const uploadUrl = this.uploadUrlMap.get(file.type) ?? this.uploadUrlMap.get("");
         if (uploadUrl === undefined || uploadUrl === null) {
-            console.error(`upload map doesn't have url for type ${uploadingMediaType}`);
+            console.error(`upload map doesn't have url for type '${file.type}'`);
             return;
         }
         const formData = new FormData();
         formData.append('file', file);
-        formData.append('ratio', `${this.forceRatio ?? 0}`);
         this.progress = 0;
         this.isUploading = true;
         this.updateClip();
@@ -802,18 +682,11 @@ class MediaUploaderComponent {
                 this.updateClip();
                 return;
             case HttpEventType.Response:
-                if (event.body === undefined || event.body === null) {
-                    console.error('media deserialization error. Response body in undefined');
-                }
-                else {
-                    // remove this
-                    // needed for C# deserialization
-                    const pixmedia = {
-                        $type: event.body.type,
-                        ...event.body,
-                    };
-                    this.srcChange.emit(pixmedia);
+                if (event.body === null || event.body === undefined) {
+                    console.warn(`empty body from uploader`);
+                    return;
                 }
+                this.srcChange.emit(event.body);
                 return;
             default:
                 return;
@@ -831,13 +704,13 @@ class MediaUploaderComponent {
         };
         return func;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MediaUploaderComponent, selector: "bonc-media-uploader", inputs: { uploadUrlMap: "uploadUrlMap", forceRatio: "forceRatio", src: "src", uploadType: "uploadType" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">NO MEDIA</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileUploaderComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i1$2.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: { uploadUrlMap: "uploadUrlMap", src: "src", uploadTypes: "uploadTypes" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"src?.url?.length === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-media-uploader', template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">NO MEDIA</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i1.HttpClient }], propDecorators: { fileInput: [{
+            args: [{ selector: 'bonc-file-uploader', template: "<div *ngIf=\"src?.url?.length === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: true }]
             }], srcChange: [{
@@ -845,20 +718,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }], uploadUrlMap: [{
                 type: Input,
                 args: [{ required: true }]
-            }], forceRatio: [{
-                type: Input
             }], src: [{
                 type: Input
-            }], uploadType: [{
+            }], uploadTypes: [{
                 type: Input
             }] } });
 
-var TextInputStyle;
-(function (TextInputStyle) {
-    TextInputStyle[TextInputStyle["NotSet"] = 0] = "NotSet";
-    TextInputStyle[TextInputStyle["SingleLine"] = 1] = "SingleLine";
-    TextInputStyle[TextInputStyle["MultiLine"] = 2] = "MultiLine";
-})(TextInputStyle || (TextInputStyle = {}));
+class SvgFormComponent extends FormBaseComponent {
+    constructor(editable) {
+        super(editable);
+        this.cd = inject(ChangeDetectorRef);
+        this.SvgMime = 'image/svg+xml';
+        this.label = '';
+        this.uploadMap = new Map();
+        this._uploadUrl = '/api/admin/upload/image/svg';
+        this.uploadMap.set(this.SvgMime, this._uploadUrl);
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    set uploadUrl(newValue) {
+        this._uploadUrl = newValue;
+        this.uploadMap.set(this.SvgMime, this._uploadUrl);
+        this.cd.detectChanges();
+    }
+    onFileUploaded(fileSrc) {
+        this.editable.startEditing();
+        const svgSrc = fileSrc;
+        this.editable.value = svgSrc;
+        this.editable.updateDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SvgFormComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SvgFormComponent, selector: "bonc-svg-form", inputs: { label: "label", uploadUrl: "uploadUrl" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[SvgMime]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SvgFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-svg-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[SvgMime]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"] }]
+        }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
+                    type: Host
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], uploadUrl: [{
+                type: Input
+            }] } });
+
+class FileFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.uploadTypes = [];
+        this.uploadMap = new Map();
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    ;
+    onFileUploaded(fileSrc) {
+        this.editable.startEditing();
+        const svgSrc = fileSrc;
+        this.editable.value = svgSrc;
+        this.editable.updateDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FileFormComponent, selector: "bonc-file-form", inputs: { label: "label", uploadTypes: "uploadTypes", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"uploadTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-file-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"uploadTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], uploadTypes: [{
+                type: Input,
+                args: [{ required: true }]
+            }], uploadMap: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+var TextInputStyle;
+(function (TextInputStyle) {
+    TextInputStyle[TextInputStyle["NotSet"] = 0] = "NotSet";
+    TextInputStyle[TextInputStyle["SingleLine"] = 1] = "SingleLine";
+    TextInputStyle[TextInputStyle["MultiLine"] = 2] = "MultiLine";
+})(TextInputStyle || (TextInputStyle = {}));
 
 class TextFormComponent extends FormBaseComponent {
     constructor() {
@@ -873,48 +819,73 @@ class TextFormComponent extends FormBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TextFormComponent, selector: "bonc-text-form", inputs: { locale: "locale", label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TextFormComponent, selector: "bonc-text-form", inputs: { label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-text-form', inputs: FormBaseComponent.inputs, hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"] }]
+            args: [{ selector: 'bonc-text-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], type: [{
                 type: Input
             }] } });
 
-class SeoFormComponent extends FormBaseComponent {
+class LottieFormComponent extends FormBaseComponent {
     constructor() {
         super(...arguments);
-        this._pageId = '';
-        this.ogImageUploadUrl = '';
+        this.LottieMimeType = 'application/json';
         this.label = '';
+        this.uploadMap = new Map();
     }
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
+        this.editable.valueChange.subscribe(x => {
+            const url = x?.url ?? '';
+            this.animOptions = url.length === 0 ? undefined : { path: url };
+        });
     }
-    set pageId(value) {
-        this._pageId = value;
-        this.ogImageUploadUrl = `/api/admin/page/Og-Image?pageId=${this.pageId}`; // todo: replace with link to single image api
-    }
-    get pageId() {
-        return this._pageId;
-    }
-    ResToSrc(res) {
-        return res.url;
+    ;
+    onFileUploaded(fileSrc) {
+        this.editable.startEditing();
+        const svgSrc = fileSrc;
+        this.editable.value = svgSrc;
+        this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SeoFormComponent, selector: "bonc-seo-form", inputs: { label: "label", pageId: "pageId" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LottieFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LottieFormComponent, selector: "bonc-lottie-form", inputs: { label: "label", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[LottieMimeType]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n\r\n    <ng-lottie *ngIf=\"animOptions\"\r\n               [options]=\"animOptions\"></ng-lottie>\r\n\r\n\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block;max-width:600px}a{color:silver}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LottieFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-seo-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bonc-lottie-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[LottieMimeType]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n\r\n    <ng-lottie *ngIf=\"animOptions\"\r\n               [options]=\"animOptions\"></ng-lottie>\r\n\r\n\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block;max-width:600px}a{color:silver}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
-            }], pageId: [{
+            }], uploadMap: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class TranslationFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.TextEditorField = TextEditorField;
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationFormComponent, selector: "bonc-translation-form", inputs: { field: "field", label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-translation-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
                 type: Input
             }] } });
 
@@ -929,35 +900,301 @@ class UnknownFormComponent extends FormBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownFormComponent, selector: "bonc-unknown-form", inputs: { locale: "locale", label: "label" }, usesInheritance: true, ngImport: i0, template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownFormComponent, selector: "bonc-unknown-form", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-unknown-form', inputs: FormBaseComponent.inputs, template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }]
+            args: [{ selector: 'bonc-unknown-form', template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });
 
-class TranslationFormComponent extends FormBaseComponent {
+class DataService {
+    constructor(http, baseHref) {
+        this.http = http;
+        this.baseHref = baseHref;
+    }
+    getView(viewCode) {
+        const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
+        return pageOb;
+    }
+    getPage(pageRoute) {
+        const pageUrl = `/${pageRoute}`;
+        const pageOb = this.getSkeleton(`${this.baseHref}api/pages/?url=${encodeURIComponent(pageUrl)}`);
+        return pageOb;
+    }
+    getSettings(ids) {
+        const pageOb = this.http.get(`${this.baseHref}api/settings`, {
+            params: { ids: ids }
+        });
+        return pageOb;
+    }
+    getSkeleton(url) {
+        const skeletonOb = this.http.get(url);
+        const routeDataObs = skeletonOb
+            .pipe(map(x => {
+            const notEmptyDataRoutes = x.bones
+                .map(b => ('dataRoute' in b) && typeof (b.dataRoute) === 'string' ? b.dataRoute : '')
+                .filter(x => x.length > 0);
+            if (notEmptyDataRoutes.length === 0) {
+                const emptyData = {};
+                return { page: of(x), data: of(emptyData) };
+            }
+            return {
+                page: of(x),
+                data: combineLatest(notEmptyDataRoutes
+                    .map(dataRoute => {
+                    const url = `${this.baseHref}api/Pages/Children/?url=${dataRoute}`;
+                    return {
+                        route: dataRoute,
+                        json: this.http.get(url)
+                    };
+                })
+                    .reduce((prev, curr) => {
+                    prev[curr.route] = curr.json;
+                    return prev;
+                }, {}))
+            };
+        }), map(x => combineLatest(x)), mergeMap(res => merge(res)), map(x => {
+            for (const bone of x.page.bones) {
+                if (!('dataRoute' in bone) || typeof bone.dataRoute !== 'string' || bone.dataRoute.length === 0)
+                    continue;
+                const data = x.data[bone.dataRoute];
+                if (data === undefined || data === null)
+                    throw new Error(`Data ${bone.dataRoute} have not been preloaded`);
+                bone.data = data; // todo: fix
+            }
+            return x.page;
+        }));
+        return routeDataObs;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, deps: [{ token: i1$2.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_BASE_HREF]
+                }] }] });
+
+class AdminDataService {
+    constructor(http, baseHref) {
+        this.http = http;
+        this.baseHref = baseHref;
+        console.log('baseHref: ' + baseHref);
+    }
+    getSettingGroups() {
+        const pageOb = this.http.get(`${this.baseHref}api/admin/settings`);
+        return pageOb;
+    }
+    getPage(url) {
+        const pageOb = this.http.get(`${this.baseHref}api/admin/pages/${url}`);
+        return pageOb;
+    }
+    storePage(page) {
+        const ob = this.http.post(`${this.baseHref}api/admin/pages`, page);
+        return ob;
+    }
+    updateSettings(settings) {
+        const ob = this.http.post(`${this.baseHref}api/admin/settings`, settings);
+        return ob;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, deps: [{ token: i1$2.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_BASE_HREF]
+                }] }] });
+
+class AdminControlsComponent {
     constructor() {
-        super(...arguments);
-        this.TextEditorField = TextEditorField;
+        this.DeviceType = DeviceType;
+        this.deviceControls = false;
+        this.locale = 'en';
+        this.device = this.DeviceType.Desktop;
     }
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
-            this.editable.save();
+    changeLocale() {
+        this.locale = this.locale === 'en' ? 'ru' : 'en';
+    }
+    changeDevice() {
+        switch (this.device) {
+            case DeviceType.Desktop:
+                this.device = DeviceType.Tablet;
+                return;
+            case DeviceType.Tablet:
+                this.device = DeviceType.Mobile;
+                return;
+            case DeviceType.Mobile:
+                this.device = DeviceType.Desktop;
+                return;
+            default:
+                this.device = DeviceType.Desktop;
+                return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AdminControlsComponent, selector: "bonc-admin-controls", inputs: { editableGroup: "editableGroup", deviceControls: "deviceControls" }, ngImport: i0, template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-admin-controls', template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"] }]
+        }], propDecorators: { editableGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], deviceControls: [{
+                type: Input
+            }] } });
+
+const imageMimeTypes = ['image/png', 'image/jpeg'];
+const videoMimeTypes = ['video/mp4'];
+const imageFileTypes = imageMimeTypes.join(',');
+const videoFileTypes = videoMimeTypes.join(',');
+const allMediaFileTypes = `${imageFileTypes},${videoFileTypes}`;
+class MediaUploaderComponent {
+    constructor(sanitizer, http) {
+        this.sanitizer = sanitizer;
+        this.http = http;
+        this.MediaObjectFit = MediaObjectFit;
+        this.srcChange = new EventEmitter();
+        this.progress = 0;
+        this.isUploading = false;
+        this.autoplay = true;
+        this.fileTypeMask = allMediaFileTypes;
+    }
+    set src(newSrc) {
+        if (this._src === newSrc)
+            return;
+        this._src = newSrc;
+    }
+    get src() {
+        return this._src;
+    }
+    set uploadType(newUploadType) {
+        switch (newUploadType) {
+            case "image":
+                this._uploadType = newUploadType;
+                this.fileTypeMask = imageFileTypes;
+                break;
+            case "video":
+                this._uploadType = newUploadType;
+                this.fileTypeMask = videoFileTypes;
+                break;
+            case undefined:
+            default:
+                this._uploadType = newUploadType;
+                this.fileTypeMask = allMediaFileTypes;
+                break;
+        }
+    }
+    get uploadType() {
+        return this._uploadType;
+    }
+    onFileSelect(fileInput) {
+        if (fileInput.files === undefined || fileInput.files === null || fileInput.files.length !== 1)
+            return;
+        const file = fileInput.files[0];
+        let uploadingMediaType;
+        if (this._uploadType !== undefined && this._uploadType !== null) {
+            uploadingMediaType = this._uploadType;
+        }
+        else if (imageMimeTypes.includes(file.type)) {
+            uploadingMediaType = 'image';
+        }
+        else if (videoMimeTypes.includes(file.type)) {
+            uploadingMediaType = 'video';
+        }
+        else {
+            console.error(`unknown media type ${file.type} (${file.name})`);
+            return;
+        }
+        const uploadUrl = this.uploadUrlMap.get(uploadingMediaType);
+        if (uploadUrl === undefined || uploadUrl === null) {
+            console.error(`upload map doesn't have url for type ${uploadingMediaType}`);
+            return;
+        }
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('ratio', `${this.forceRatio ?? 0}`);
+        this.progress = 0;
+        this.isUploading = true;
+        this.updateClip();
+        const request = new HttpRequest('POST', uploadUrl, formData, {
+            reportProgress: true
         });
+        this.http
+            .request(request)
+            .pipe(map(event => this.getEventMessage(event)), 
+        // tap(message => this.showProgress(message)),
+        last(), // return last (completed) message to caller
+        catchError(this.handleError(file))).subscribe(() => { this.isUploading = false; });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationFormComponent, selector: "bonc-translation-form", inputs: { locale: "locale", field: "field", label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+    selectFile(event) {
+        // ignore buble click on file picker
+        if (event.target === this.fileInput.nativeElement)
+            return;
+        this.fileInput.nativeElement.click();
+    }
+    getEventMessage(event) {
+        switch (event.type) {
+            case HttpEventType.Sent:
+                return;
+            case HttpEventType.UploadProgress:
+                this.progress = event.total === undefined ? 0.5 : event.loaded / event.total;
+                this.updateClip();
+                return;
+            case HttpEventType.Response:
+                if (event.body === undefined || event.body === null) {
+                    console.error('media deserialization error. Response body in undefined');
+                }
+                else {
+                    // remove this
+                    // needed for C# deserialization
+                    const pixmedia = {
+                        $type: event.body.type,
+                        ...event.body,
+                    };
+                    this.srcChange.emit(pixmedia);
+                }
+                return;
+            default:
+                return;
+        }
+    }
+    updateClip() {
+        this.clipStyle = this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`);
+    }
+    handleError(file) {
+        const func = (error, p2) => {
+            const message = `error uploadingFile ${file.name}.`;
+            console.error(message, error, p2);
+            alert(message);
+            return new Observable();
+        };
+        return func;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MediaUploaderComponent, selector: "bonc-media-uploader", inputs: { uploadUrlMap: "uploadUrlMap", forceRatio: "forceRatio", src: "src", uploadType: "uploadType" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-form', inputs: FormBaseComponent.inputs, hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { field: [{
+            args: [{ selector: 'bonc-media-uploader', template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1$2.HttpClient }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], srcChange: [{
+                type: Output
+            }], uploadUrlMap: [{
                 type: Input,
                 args: [{ required: true }]
-            }], label: [{
+            }], forceRatio: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], uploadType: [{
                 type: Input
             }] } });
 
@@ -1350,21 +1587,28 @@ function createPreset(params) {
     };
 }
 
+const formComponents = [
+    TranslationFormComponent,
+    TextFormComponent,
+    SeoFormComponent,
+    SvgFormComponent,
+    FileFormComponent,
+    LottieFormComponent,
+    UnknownFormComponent
+];
 const components = [
+    ...formComponents,
     TranslationInputComponent,
     TranslationTextareaComponent,
     AdminControlsComponent,
     EditableGroupComponent,
     FormControlsComponent,
-    TranslationFormComponent,
-    TextFormComponent,
-    SeoFormComponent,
-    UnknownFormComponent,
     SkeletonEditorComponent,
     SkeletonEditorAnchorDirective,
     BoneEditorContainerComponent,
     UnknownBoneEditorComponent,
     MediaUploaderComponent,
+    FileUploaderComponent,
     LinkPopupComponent
 ];
 const standaloneDirectives = [
@@ -1372,46 +1616,55 @@ const standaloneDirectives = [
 ];
 class BonnieCmsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, declarations: [TranslationInputComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, declarations: [TranslationFormComponent,
+            TextFormComponent,
+            SeoFormComponent,
+            SvgFormComponent,
+            FileFormComponent,
+            LottieFormComponent,
+            UnknownFormComponent, TranslationInputComponent,
             TranslationTextareaComponent,
             AdminControlsComponent,
             EditableGroupComponent,
             FormControlsComponent,
-            TranslationFormComponent,
-            TextFormComponent,
-            SeoFormComponent,
-            UnknownFormComponent,
             SkeletonEditorComponent,
             SkeletonEditorAnchorDirective,
             BoneEditorContainerComponent,
             UnknownBoneEditorComponent,
             MediaUploaderComponent,
+            FileUploaderComponent,
             LinkPopupComponent], imports: [CommonModule,
             FormsModule,
             CdkTextareaAutosize,
-            BonnieModule, EditableDirective], exports: [CommonModule,
+            BonnieModule,
+            LottieComponent, EditableDirective], exports: [CommonModule,
             FormsModule,
-            BonnieModule, TranslationInputComponent,
+            BonnieModule,
+            LottieFormComponent, TranslationFormComponent,
+            TextFormComponent,
+            SeoFormComponent,
+            SvgFormComponent,
+            FileFormComponent,
+            LottieFormComponent,
+            UnknownFormComponent, TranslationInputComponent,
             TranslationTextareaComponent,
             AdminControlsComponent,
             EditableGroupComponent,
             FormControlsComponent,
-            TranslationFormComponent,
-            TextFormComponent,
-            SeoFormComponent,
-            UnknownFormComponent,
             SkeletonEditorComponent,
             SkeletonEditorAnchorDirective,
             BoneEditorContainerComponent,
             UnknownBoneEditorComponent,
             MediaUploaderComponent,
+            FileUploaderComponent,
             LinkPopupComponent, EditableDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, providers: [
             DataService,
             AdminDataService
         ], imports: [CommonModule,
             FormsModule,
-            BonnieModule, CommonModule,
+            BonnieModule,
+            LottieComponent, CommonModule,
             FormsModule,
             BonnieModule] }); }
 } // todo: move to standalone
@@ -1430,12 +1683,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         FormsModule,
                         CdkTextareaAutosize,
                         BonnieModule,
+                        LottieComponent,
                         ...standaloneDirectives
                     ],
                     exports: [
                         CommonModule,
                         FormsModule,
                         BonnieModule,
+                        LottieFormComponent,
                         ...components,
                         ...standaloneDirectives
                     ]
@@ -1446,5 +1701,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminControlsComponent, AdminDataService, BoneEditorBaseComponent, BoneEditorContainerComponent, BonnieCmsModule, DataService, DeviceType, DeviceVisibility, EditableDirective, EditableGroupComponent, FormBaseComponent, FormControlsComponent, LinkPopupComponent, MediaUploaderComponent, SeoFormComponent, SkeletonEditorAnchorDirective, SkeletonEditorComponent, TextEditorField, TextFormComponent, TextInputStyle, TextSettingType, TranslationFormComponent, TranslationInputComponent, TranslationTextareaComponent, UnknownBoneEditorComponent, UnknownFormComponent, createPreset, hasFlag, isLocalUrlString, regExpIsMobile, setOrRemoveFlag };
+export { AdminControlsComponent, AdminDataService, BoneEditorBaseComponent, BoneEditorContainerComponent, BonnieCmsModule, DataService, DeviceType, DeviceVisibility, EditableDirective, EditableGroupComponent, FileFormComponent, FileUploaderComponent, FormBaseComponent, FormControlsComponent, LinkPopupComponent, LottieFormComponent, MediaUploaderComponent, SeoFormComponent, SkeletonEditorAnchorDirective, SkeletonEditorComponent, SvgFormComponent, TextEditorField, TextFormComponent, TextInputStyle, TextSettingType, TranslationFormComponent, TranslationInputComponent, TranslationTextareaComponent, UnknownBoneEditorComponent, UnknownFormComponent, createPreset, hasFlag, isLocalUrlString, regExpIsMobile, setOrRemoveFlag };
 //# sourceMappingURL=candy-kingdom-bonnie-cms.mjs.map