@candy-kingdom/bonnie-cms 0.1.7 → 0.1.8

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

@@ -1,16 +1,16 @@
+import * as i1 from '@angular/common/http';
+import { HttpRequest, HttpEventType } from '@angular/common/http';
 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 * as i1 from '@angular/forms';
+import { Injectable, Inject, EventEmitter, forwardRef, Directive, Output, Component, ContentChildren, Host, Input, ViewChildren, ViewChild, HostBinding, NgModule } from '@angular/core';
+import { of, combineLatest, map, merge, mergeMap, Subject, debounceTime, last, catchError, Observable } from 'rxjs';
+import * as i2$1 from '@angular/common';
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i2 from '@angular/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 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/platform-browser';
 import * as i4 from '@candy-kingdom/bonnie';
 import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
 
@@ -111,6 +111,107 @@ var DeviceVisibility;
     DeviceVisibility[DeviceVisibility["All"] = 7] = "All";
 })(DeviceVisibility || (DeviceVisibility = {}));
 
+class DataService {
+    constructor(http, baseHref) {
+        this.http = http;
+        this.baseHref = baseHref;
+    }
+    getView(viewCode) {
+        const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
+        return pageOb;
+    }
+    getPage(pageRoute) {
+        const pageUrl = `/${pageRoute}`;
+        const pageOb = this.getSkeleton(`${this.baseHref}api/pages/?url=${encodeURIComponent(pageUrl)}`);
+        return pageOb;
+    }
+    getSettings(ids) {
+        const pageOb = this.http.get(`${this.baseHref}api/settings`, {
+            params: { ids: ids }
+        });
+        return pageOb;
+    }
+    getSkeleton(url) {
+        const skeletonOb = this.http.get(url);
+        const routeDataObs = skeletonOb
+            .pipe(map(x => {
+            const notEmptyDataRoutes = x.bones
+                .map(b => ('dataRoute' in b) && typeof (b.dataRoute) === 'string' ? b.dataRoute : '')
+                .filter(x => x.length > 0);
+            if (notEmptyDataRoutes.length === 0) {
+                const emptyData = {};
+                return { page: of(x), data: of(emptyData) };
+            }
+            return {
+                page: of(x),
+                data: combineLatest(notEmptyDataRoutes
+                    .map(dataRoute => {
+                    const url = `${this.baseHref}api/Pages/Children/?url=${dataRoute}`;
+                    return {
+                        route: dataRoute,
+                        json: this.http.get(url)
+                    };
+                })
+                    .reduce((prev, curr) => {
+                    prev[curr.route] = curr.json;
+                    return prev;
+                }, {}))
+            };
+        }), map(x => combineLatest(x)), mergeMap(res => merge(res)), map(x => {
+            for (const bone of x.page.bones) {
+                if (!('dataRoute' in bone) || typeof bone.dataRoute !== 'string' || bone.dataRoute.length === 0)
+                    continue;
+                const data = x.data[bone.dataRoute];
+                if (data === undefined || data === null)
+                    throw new Error(`Data ${bone.dataRoute} have not been preloaded`);
+                bone.data = data; // todo: fix
+            }
+            return x.page;
+        }));
+        return routeDataObs;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, deps: [{ token: i1.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_BASE_HREF]
+                }] }] });
+
+class AdminDataService {
+    constructor(http, baseHref) {
+        this.http = http;
+        this.baseHref = baseHref;
+        console.log('baseHref: ' + baseHref);
+    }
+    getSettingGroups() {
+        const pageOb = this.http.get(`${this.baseHref}api/admin/settings`);
+        return pageOb;
+    }
+    getPage(url) {
+        const pageOb = this.http.get(`${this.baseHref}api/admin/pages/${url}`);
+        return pageOb;
+    }
+    storePage(page) {
+        const ob = this.http.post(`${this.baseHref}api/admin/pages`, page);
+        return ob;
+    }
+    updateSettings(settings) {
+        const ob = this.http.post(`${this.baseHref}api/admin/settings`, settings);
+        return ob;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, deps: [{ token: i1.HttpClient }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_BASE_HREF]
+                }] }] });
+
 class EditableDirective {
     constructor() {
         this.saved = new EventEmitter();
@@ -375,7 +476,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 }, { token: i1.HttpClient }], 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 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
                     type: Host
-                }] }, { type: i2.HttpClient }], propDecorators: { locale: [{
+                }] }, { type: i1.HttpClient }], propDecorators: { locale: [{
                 type: Input
             }] } });
 
@@ -406,7 +507,7 @@ class TranslationInputComponent {
         this.blurred.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: { text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: { text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, decorators: [{
             type: Component,
@@ -458,7 +559,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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
             type: Component,
@@ -517,7 +618,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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, decorators: [{
             type: Component,
@@ -579,7 +680,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,
@@ -593,7 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 
 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"] }] }); }
+    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,
@@ -730,13 +831,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$2.DomSanitizer }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MediaUploaderComponent, selector: "bonc-media-uploader", inputs: { uploadUrlMap: "uploadUrlMap", forceRatio: "forceRatio", src: "src", uploadType: "uploadType" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">NO MEDIA</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
 }
 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: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i1.HttpClient }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: true }]
             }], srcChange: [{
@@ -772,7 +873,7 @@ class TextFormComponent extends FormBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TextFormComponent, selector: "bonc-text-form", inputs: { locale: "locale", label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i2$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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TextFormComponent, selector: "bonc-text-form", inputs: { locale: "locale", label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, decorators: [{
             type: Component,
@@ -806,7 +907,7 @@ class SeoFormComponent extends FormBaseComponent {
         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"] }] }); }
+    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,
@@ -848,7 +949,7 @@ class TranslationFormComponent extends FormBaseComponent {
         });
     }
     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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationFormComponent, selector: "bonc-translation-form", inputs: { locale: "locale", field: "field", label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
@@ -1021,7 +1122,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 +1214,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 +1318,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,
@@ -1305,7 +1406,10 @@ class BonnieCmsModule {
             UnknownBoneEditorComponent,
             MediaUploaderComponent,
             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,
             FormsModule,
@@ -1317,7 +1421,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     declarations: [
                         ...components,
                     ],
-                    providers: [],
+                    providers: [
+                        DataService,
+                        AdminDataService
+                    ],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -1339,5 +1446,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, FormBaseComponent, FormControlsComponent, LinkPopupComponent, MediaUploaderComponent, SeoFormComponent, SkeletonEditorAnchorDirective, SkeletonEditorComponent, TextEditorField, TextFormComponent, TextInputStyle, TextSettingType, TranslationFormComponent, TranslationInputComponent, TranslationTextareaComponent, UnknownBoneEditorComponent, UnknownFormComponent, createPreset, hasFlag, isLocalUrlString, regExpIsMobile, setOrRemoveFlag };
 //# sourceMappingURL=candy-kingdom-bonnie-cms.mjs.map