@candy-kingdom/bonnie-cms 0.1.7 → 0.2.0

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

@@ -1,16 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Directive, Output, Component, ContentChildren, Host, Input, ViewChildren, ViewChild, HostBinding, NgModule } from '@angular/core';
-import { Subject, debounceTime, map, 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 from '@angular/common/http';
-import { HttpRequest, HttpEventType } from '@angular/common/http';
-import * as i2$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/common';
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import * as i2 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { take } from 'rxjs/operators';
 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.
@@ -363,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 = '';
     }
@@ -375,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: i2.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: [{
@@ -385,7 +401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
                     type: Host
-                }] }, { type: i2.HttpClient }], propDecorators: { locale: [{
+                }] }], propDecorators: { locale: [{
                 type: Input
             }] } });
 
@@ -458,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.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$1.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,
@@ -517,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$2.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"] }] }); }
+    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,
@@ -552,6 +568,448 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: [{ required: true }]
             }] } });
 
+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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-form-controls', 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"] }]
+        }], propDecorators: { editable: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+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.cd = cd;
+        this.srcChange = new EventEmitter();
+        this.progress = 0;
+        this.isUploading = false;
+        this.autoplay = true;
+        this.fileTypeMask = undefined;
+        this._uploadTypes = [];
+    }
+    set src(newSrc) {
+        if (this._src === newSrc)
+            return;
+        this._src = newSrc;
+    }
+    get src() {
+        return this._src;
+    }
+    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 uploadTypes() {
+        return this._uploadTypes;
+    }
+    onFileSelect(fileInput) {
+        if (fileInput.files === undefined || fileInput.files === null || fileInput.files.length !== 1)
+            return;
+        const file = fileInput.files[0];
+        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 '${file.type}'`);
+            return;
+        }
+        const formData = new FormData();
+        formData.append('file', file);
+        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; });
+    }
+    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 === null || event.body === undefined) {
+                    console.warn(`empty body from uploader`);
+                    return;
+                }
+                this.srcChange.emit(event.body);
+                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: 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: FileUploaderComponent, decorators: [{
+            type: Component,
+            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: [{
+                type: Output
+            }], uploadUrlMap: [{
+                type: Input,
+                args: [{ required: true }]
+            }], src: [{
+                type: Input
+            }], uploadTypes: [{
+                type: Input
+            }] } });
+
+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() {
+        super(...arguments);
+        this.TextInputStyle = TextInputStyle;
+        this.label = '';
+        this.type = TextInputStyle.SingleLine;
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    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: { 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', 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 LottieFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        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 };
+        });
+    }
+    ;
+    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: 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: LottieFormComponent, decorators: [{
+            type: Component,
+            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
+            }], 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
+            }] } });
+
+class UnknownFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    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: { 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', 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 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() {
         this.DeviceType = DeviceType;
@@ -579,7 +1037,7 @@ class AdminControlsComponent {
         }
     }
     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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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,
@@ -591,18 +1049,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-form-controls', 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"] }]
-        }], propDecorators: { editable: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
 const imageMimeTypes = ['image/png', 'image/jpeg'];
 const videoMimeTypes = ['video/mp4'];
 const imageFileTypes = imageMimeTypes.join(',');
@@ -730,13 +1176,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$1.DomSanitizer }, { token: i2.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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2$2.DecimalPipe, name: "number" }] }); }
+    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: MediaUploaderComponent, 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$1.DomSanitizer }, { type: i2.HttpClient }], propDecorators: { fileInput: [{
+            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: [{
@@ -752,114 +1198,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Input
             }] } });
 
-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() {
-        super(...arguments);
-        this.TextInputStyle = TextInputStyle;
-        this.label = '';
-        this.type = TextInputStyle.SingleLine;
-    }
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
-            this.editable.save();
-        });
-    }
-    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$2.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"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-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$2.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 UnknownFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-    }
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
-            this.editable.save();
-        });
-    }
-    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"] }); }
-}
-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"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
-
-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: { 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$2.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', 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: [{
-                type: Input,
-                args: [{ required: true }]
-            }], label: [{
-                type: Input
-            }] } });
-
 class SkeletonEditorAnchorDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -1021,7 +1359,7 @@ class UnknownBoneEditorComponent extends BoneEditorBaseComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownBoneEditorComponent, selector: "bonc-unknown-bone-editor", usesInheritance: true, ngImport: i0, template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\r\n<pre>{{bone | json}}</pre>\r\n", styles: [":host{display:block;background-color:#dc143c}\n"], dependencies: [{ kind: "pipe", type: i2$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownBoneEditorComponent, selector: "bonc-unknown-bone-editor", usesInheritance: true, ngImport: i0, template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\r\n<pre>{{bone | json}}</pre>\r\n", styles: [":host{display:block;background-color:#dc143c}\n"], dependencies: [{ kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
             type: Component,
@@ -1113,7 +1451,7 @@ class BoneEditorContainerComponent {
         // return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorContainerComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: { locale: "locale", device: "device", map: "map", bone: "bone" }, outputs: { removed: "removed", saved: "saved", editing: "editing" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: SkeletonEditorAnchorDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editor\" class=\"left bar\" [class.inactive]=\"editor.noPresets\">\r\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\r\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\r\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\r\n</div>\r\n\r\n<div class=\"editor-container\"\r\n     [class.disabled]=\"disabled\"\r\n     [style.width]=\"\r\n                      device === DeviceType.Desktop ? '75vw'\r\n                      : device === DeviceType.Tablet ? '55vw'\r\n                      : device === DeviceType.Mobile ? '35vw'\r\n                      : '75vw' \">\r\n  <ng-template boncSkeletonEditorAnchor>\r\n  </ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\r\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\r\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\r\n</div>\r\n", styles: [":host{display:flex}.editor-container{background-color:var(--bg-color)}.editor-container.disabled{opacity:.1;pointer-events:none}.editor-container.mobile{width:350px}.preset{white-space:pre-line}.bar{width:120px;display:flex;flex-direction:column;pointer-events:all}.bar.left:hover,.bar.active{background-color:#111}.bar.hidden{opacity:.2}.bar.left{position:relative;border-right:none}.bar.right{border-left:none;text-align:right}.bar.right .delete{display:none}.bar.right .delete:hover{color:#ff355e}.bar.right.active .delete,.bar.right:hover .delete{display:block}.left.bar.inactive a:hover{cursor:initial;color:#444}.popup{position:absolute;top:0;right:-350px;display:flex;flex-direction:column;width:350px;padding:20px;color:#222;background-color:#fff;border:2px solid black;box-sizing:border-box;z-index:3}.popup a{padding:0!important;cursor:pointer!important}.popup a.close{position:absolute;top:10px;right:10px;color:#666}.popup a.close:hover{background-color:#cf0!important}.popup a.reset{align-self:flex-start;margin-top:30px}.popup a.reset:hover{background-color:#cf0!important}.color-group{display:flex}.color-group:first-of-type{margin-top:20px}.color-group label{flex:1}.color-group input{border:1px solid #222;padding:6px;cursor:pointer}.color-group input:hover,.color-group input:focus{outline:none}.color-group+.color-group{margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: { locale: "locale", device: "device", map: "map", bone: "bone" }, outputs: { removed: "removed", saved: "saved", editing: "editing" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: SkeletonEditorAnchorDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editor\" class=\"left bar\" [class.inactive]=\"editor.noPresets\">\r\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\r\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\r\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\r\n</div>\r\n\r\n<div class=\"editor-container\"\r\n     [class.disabled]=\"disabled\"\r\n     [style.width]=\"\r\n                      device === DeviceType.Desktop ? '75vw'\r\n                      : device === DeviceType.Tablet ? '55vw'\r\n                      : device === DeviceType.Mobile ? '35vw'\r\n                      : '75vw' \">\r\n  <ng-template boncSkeletonEditorAnchor>\r\n  </ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\r\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\r\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\r\n</div>\r\n", styles: [":host{display:flex}.editor-container{background-color:var(--bg-color)}.editor-container.disabled{opacity:.1;pointer-events:none}.editor-container.mobile{width:350px}.preset{white-space:pre-line}.bar{width:120px;display:flex;flex-direction:column;pointer-events:all}.bar.left:hover,.bar.active{background-color:#111}.bar.hidden{opacity:.2}.bar.left{position:relative;border-right:none}.bar.right{border-left:none;text-align:right}.bar.right .delete{display:none}.bar.right .delete:hover{color:#ff355e}.bar.right.active .delete,.bar.right:hover .delete{display:block}.left.bar.inactive a:hover{cursor:initial;color:#444}.popup{position:absolute;top:0;right:-350px;display:flex;flex-direction:column;width:350px;padding:20px;color:#222;background-color:#fff;border:2px solid black;box-sizing:border-box;z-index:3}.popup a{padding:0!important;cursor:pointer!important}.popup a.close{position:absolute;top:10px;right:10px;color:#666}.popup a.close:hover{background-color:#cf0!important}.popup a.reset{align-self:flex-start;margin-top:30px}.popup a.reset:hover{background-color:#cf0!important}.color-group{display:flex}.color-group:first-of-type{margin-top:20px}.color-group label{flex:1}.color-group input{border:1px solid #222;padding:6px;cursor:pointer}.color-group input:hover,.color-group input:focus{outline:none}.color-group+.color-group{margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorContainerComponent, decorators: [{
             type: Component,
@@ -1217,7 +1555,7 @@ class SkeletonEditorComponent {
         this.bones[index2] = tempBone;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonEditorComponent, selector: "bonc-skeleton-editor", inputs: { locale: "locale", device: "device", map: "map", templates: "templates" }, viewQueries: [{ propertyName: "boneEditorContainerList", predicate: ["boneEditorContainer"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<ng-template #controls let-index='index'>\r\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\r\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\r\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\r\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\r\n    </div>\r\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\r\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\r\n  </div>\r\n\r\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\r\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\r\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- todo: add trackby -->\r\n<ng-container *ngFor=\"let bone of bones; let i = index\">\r\n  <ng-container>\r\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\r\n  </ng-container>\r\n\r\n  <bonc-bone-editor-container #boneEditorContainer\r\n                              [map]=\"map\"\r\n                              [bone]=\"bone\"\r\n                              [locale]=\"locale\"\r\n                              [device]=\"device\"\r\n                              (removed)=\"removeBone(i)\"\r\n                              (editing)=\"boneEditHandler($event)\"\r\n                              (saved)=\"boneChangeHandler(i, $event)\">\r\n  </bonc-bone-editor-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\r\n", styles: [":host{display:block}.controls{height:62px;display:flex;align-items:center;justify-content:space-between;margin:0 120px}.controls.appearable{background-color:var(--bg-color)}.controls.appearable *{opacity:0}.controls.appearable:hover{background-color:#222}.controls.appearable:hover *{opacity:1}.controls .up-down{width:100px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.controls a{display:flex;align-items:center;justify-content:center;color:#000;background-color:#cf0;-webkit-user-select:none;user-select:none;cursor:pointer}.controls a.add{padding:10px 30px}.controls a.up,.controls a.down,.controls a.remove{padding:4px 8px}.controls a.remove{align-self:flex-end}.controls a:hover{color:#cf0;background-color:#333}.controls a.remove:hover{color:#fff;background-color:#ff355e}.templates{width:220px;height:380px;position:absolute;left:50%;display:flex;flex-direction:column;margin-left:-110px;margin-top:-190px;z-index:10;padding:6px;background-color:#cf0;box-shadow:0 0 78px #000000bf}.templates a{display:flex;flex:1;align-items:center;justify-content:center;background-color:#cf0;text-align:center;cursor:pointer;text-transform:lowercase}.templates a:hover{text-decoration:underline;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: ["locale", "device", "map", "bone"], outputs: ["removed", "saved", "editing"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonEditorComponent, selector: "bonc-skeleton-editor", inputs: { locale: "locale", device: "device", map: "map", templates: "templates" }, viewQueries: [{ propertyName: "boneEditorContainerList", predicate: ["boneEditorContainer"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<ng-template #controls let-index='index'>\r\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\r\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\r\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\r\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\r\n    </div>\r\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\r\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\r\n  </div>\r\n\r\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\r\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\r\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- todo: add trackby -->\r\n<ng-container *ngFor=\"let bone of bones; let i = index\">\r\n  <ng-container>\r\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\r\n  </ng-container>\r\n\r\n  <bonc-bone-editor-container #boneEditorContainer\r\n                              [map]=\"map\"\r\n                              [bone]=\"bone\"\r\n                              [locale]=\"locale\"\r\n                              [device]=\"device\"\r\n                              (removed)=\"removeBone(i)\"\r\n                              (editing)=\"boneEditHandler($event)\"\r\n                              (saved)=\"boneChangeHandler(i, $event)\">\r\n  </bonc-bone-editor-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\r\n", styles: [":host{display:block}.controls{height:62px;display:flex;align-items:center;justify-content:space-between;margin:0 120px}.controls.appearable{background-color:var(--bg-color)}.controls.appearable *{opacity:0}.controls.appearable:hover{background-color:#222}.controls.appearable:hover *{opacity:1}.controls .up-down{width:100px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.controls a{display:flex;align-items:center;justify-content:center;color:#000;background-color:#cf0;-webkit-user-select:none;user-select:none;cursor:pointer}.controls a.add{padding:10px 30px}.controls a.up,.controls a.down,.controls a.remove{padding:4px 8px}.controls a.remove{align-self:flex-end}.controls a:hover{color:#cf0;background-color:#333}.controls a.remove:hover{color:#fff;background-color:#ff355e}.templates{width:220px;height:380px;position:absolute;left:50%;display:flex;flex-direction:column;margin-left:-110px;margin-top:-190px;z-index:10;padding:6px;background-color:#cf0;box-shadow:0 0 78px #000000bf}.templates a{display:flex;flex:1;align-items:center;justify-content:center;background-color:#cf0;text-align:center;cursor:pointer;text-transform:lowercase}.templates a:hover{text-decoration:underline;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: ["locale", "device", "map", "bone"], outputs: ["removed", "saved", "editing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorComponent, decorators: [{
             type: Component,
@@ -1249,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 = [
@@ -1271,43 +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, imports: [CommonModule,
+    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
@@ -1317,18 +1674,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     declarations: [
                         ...components,
                     ],
-                    providers: [],
+                    providers: [
+                        DataService,
+                        AdminDataService
+                    ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         CdkTextareaAutosize,
                         BonnieModule,
+                        LottieComponent,
                         ...standaloneDirectives
                     ],
                     exports: [
                         CommonModule,
                         FormsModule,
                         BonnieModule,
+                        LottieFormComponent,
                         ...components,
                         ...standaloneDirectives
                     ]
@@ -1339,5 +1701,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminControlsComponent, BoneEditorBaseComponent, BoneEditorContainerComponent, BonnieCmsModule, 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