@candy-kingdom/bonnie-cms 0.1.3

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

@@ -0,0 +1,1343 @@
+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 { 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 { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { take } from 'rxjs/operators';
+import * as i1$1 from '@angular/platform-browser';
+import * as i4 from '@candy-kingdom/bonnie';
+import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+var TextSettingType;
+(function (TextSettingType) {
+    TextSettingType[TextSettingType["SingleLine"] = 0] = "SingleLine";
+    TextSettingType[TextSettingType["MultiLine"] = 1] = "MultiLine";
+})(TextSettingType || (TextSettingType = {}));
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+var DeviceType;
+(function (DeviceType) {
+    DeviceType[DeviceType["NotSet"] = 0] = "NotSet";
+    DeviceType[DeviceType["Mobile"] = 1] = "Mobile";
+    DeviceType[DeviceType["Tablet"] = 2] = "Tablet";
+    DeviceType[DeviceType["Desktop"] = 3] = "Desktop";
+})(DeviceType || (DeviceType = {}));
+
+var TextEditorField;
+(function (TextEditorField) {
+    TextEditorField[TextEditorField["NotSet"] = 0] = "NotSet";
+    TextEditorField[TextEditorField["Input"] = 1] = "Input";
+    TextEditorField[TextEditorField["Textarea"] = 2] = "Textarea";
+})(TextEditorField || (TextEditorField = {}));
+
+// tslint:disable-next-line: max-line-length
+const regExpIsMobile = new RegExp(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/, 'i');
+function isLocalUrlString(url) {
+    if (url === undefined || url === null || url.trim().length === 0)
+        return true;
+    if (url.startsWith('//'))
+        return false;
+    if (url.startsWith('./') || url.startsWith('/'))
+        return true;
+    return false;
+}
+function hasFlag(value, flag) {
+    return (value & flag) === flag;
+}
+function setOrRemoveFlag(value, flag, enabled) {
+    return (enabled ? value | flag : value & ~flag);
+}
+
+var DeviceVisibility;
+(function (DeviceVisibility) {
+    DeviceVisibility[DeviceVisibility["None"] = 0] = "None";
+    DeviceVisibility[DeviceVisibility["Desktop"] = 1] = "Desktop";
+    DeviceVisibility[DeviceVisibility["Tablet"] = 2] = "Tablet";
+    DeviceVisibility[DeviceVisibility["Mobile"] = 4] = "Mobile";
+    DeviceVisibility[DeviceVisibility["All"] = 7] = "All";
+})(DeviceVisibility || (DeviceVisibility = {}));
+
+class EditableDirective {
+    constructor() {
+        this.saved = new EventEmitter();
+        this.editModeChange = new EventEmitter();
+        this.externalSaveCall = new EventEmitter();
+        this.canceled = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.propagateChange = () => { };
+        this._inEditMode = false;
+        this._isDirty = false;
+        this.startEditing = () => {
+            if (this._inEditMode) {
+                this.updateDirty();
+                return;
+            }
+            this._inEditMode = true;
+            this.updateDirty();
+            this.editModeChange.emit(true);
+        };
+    }
+    get inEditMode() {
+        return this._inEditMode;
+    }
+    subscribe(params) {
+        const subscriptions = [];
+        if (params.onValueChange !== undefined && params.onValueChange !== null) {
+            subscriptions.push(this.valueChange.subscribe((x) => {
+                if (params.onValueChange)
+                    params.onValueChange(x);
+            }));
+        }
+        if (params.onEditModeChange !== undefined) {
+            subscriptions.push(this.editModeChange.subscribe((x) => {
+                if (params.onEditModeChange)
+                    params.onEditModeChange(x);
+            }));
+        }
+        if (params.onSaveRequest !== undefined) {
+            subscriptions.push(this.externalSaveCall.subscribe(() => {
+                if (params.onSaveRequest)
+                    params.onSaveRequest();
+            }));
+        }
+        return subscriptions;
+    }
+    requestSave() {
+        this.externalSaveCall.emit();
+    }
+    save(newData) {
+        if (!this._inEditMode) {
+            console.warn('save before edit mode'); //todo: fix that
+        }
+        this.finishEditing();
+        const newUnqieNotEmptyData = this.value === newData || newData === undefined
+            ? JSON.parse(JSON.stringify(this.value))
+            : newData;
+        this.setOriginal(newUnqieNotEmptyData);
+        this.updateDirty();
+        this.saved.emit(newUnqieNotEmptyData);
+        this.propagateChange(newUnqieNotEmptyData);
+    }
+    patchSave(propName, newDataParts) {
+        if (this._originalValue === undefined || this._originalValue === null)
+            return;
+        if (typeof this._originalValue !== "object") {
+            console.warn('patch save called on not object type');
+            return;
+        }
+        this._originalValue[propName] = newDataParts;
+        this.setOriginal(this._originalValue);
+        this.updateDirty();
+        if (!this.isDirty)
+            this.close();
+    }
+    // change model without opening or closing the editor
+    silentPatch(dict) {
+        for (const key in dict) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (!dict.hasOwnProperty(key))
+                continue;
+            const propVal = dict[key];
+            if (this._value !== undefined && this._value !== null) {
+                this._value[key] = propVal;
+            }
+            if (this._originalValue !== undefined && this._originalValue !== null) {
+                this._originalValue[key] = propVal;
+            }
+        }
+        this._storedData = JSON.stringify(this._originalValue);
+    }
+    cancel() {
+        if (!this._inEditMode)
+            return;
+        this.finishEditing();
+        // reset value
+        this.setValue(this._originalValue);
+        this.canceled.emit();
+    }
+    close() {
+        this.finishEditing();
+    }
+    finishEditing() {
+        if (!this._inEditMode)
+            return;
+        this._inEditMode = false;
+        this.editModeChange.emit(false);
+    }
+    setValue(newValue) {
+        this._value = (newValue === null || newValue === undefined)
+            ? undefined
+            : JSON.parse(JSON.stringify(newValue));
+        this.valueChange.emit(this._value);
+    }
+    set value(newValue) {
+        this.setValue(newValue);
+    }
+    get value() {
+        return this._value;
+    }
+    updateDirty() {
+        this._isDirty = JSON.stringify(this._value) !== this._storedData;
+    }
+    markAsDirty() {
+        this._isDirty = true;
+    }
+    get isDirty() {
+        return this._isDirty;
+    }
+    setOriginal(newOriginalValue) {
+        this._originalValue = newOriginalValue;
+        this._storedData = JSON.stringify(newOriginalValue);
+    }
+    // #region ngModel
+    writeValue(newValue) {
+        this.finishEditing();
+        this.setOriginal(newValue);
+        this._isDirty = false;
+        this.setValue(newValue);
+    }
+    setDisabledState() {
+    }
+    registerOnChange(tellAngularThatSomethingIsChanged) {
+        this.propagateChange = (newValue) => {
+            tellAngularThatSomethingIsChanged(newValue);
+        };
+    }
+    registerOnTouched() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: EditableDirective, isStandalone: true, selector: "[boncEditable]", outputs: { saved: "saved", editModeChange: "editModeChange", externalSaveCall: "externalSaveCall", canceled: "canceled", valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableDirective), multi: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[boncEditable]',
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableDirective), multi: true }]
+                }]
+        }], propDecorators: { saved: [{
+                type: Output
+            }], editModeChange: [{
+                type: Output
+            }], externalSaveCall: [{
+                type: Output
+            }], canceled: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EditableGroupComponent {
+    constructor() {
+        this.editModeChange = new EventEmitter();
+        this.saved = new EventEmitter();
+        this.requestEditorClose = new EventEmitter();
+        this.subscriptions = [];
+        this._inEditMode = false;
+        this.saveSubject = new Subject();
+    }
+    ngAfterContentInit() {
+        this.saveSubject
+            .asObservable()
+            .pipe(debounceTime(100))
+            .subscribe(() => this.saved.emit());
+        this.updateSubscriptions();
+        this.editables.changes.subscribe(() => {
+            this.clearSubscribtions();
+            this.updateSubscriptions();
+        });
+    }
+    get inEditMode() {
+        return this._inEditMode;
+    }
+    saveAll() {
+        this.editables.forEach(x => x.requestSave());
+    }
+    cancelAll() {
+        this.editables.forEach(x => x.cancel());
+    }
+    closeAll() {
+        this.requestEditorClose.emit(true);
+        this.editables.forEach(x => x.close());
+    }
+    clearSubscribtions() {
+        this.subscriptions.forEach(x => x.unsubscribe());
+        this.subscriptions.splice(0, this.subscriptions.length);
+    }
+    updateSubscriptions() {
+        this.editables.forEach(editable => {
+            this.subscriptions.push(editable.saved.subscribe(() => this.onSave()));
+            this.subscriptions.push(...editable.subscribe({
+                onEditModeChange: this.updateEditMode.bind(this)
+            }));
+        });
+    }
+    onSave() {
+        this.saveSubject.next();
+    }
+    updateEditMode() {
+        const newEditMode = this.editables
+            .filter(x => x.inEditMode)
+            .length > 0;
+        if (newEditMode === this._inEditMode)
+            return;
+        this._inEditMode = newEditMode;
+        this.editModeChange.next(newEditMode);
+    }
+    ngOnDestroy() {
+        this.clearSubscribtions();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EditableGroupComponent, selector: "bonc-editable-group", outputs: { editModeChange: "editModeChange", saved: "saved", requestEditorClose: "requestEditorClose" }, queries: [{ propertyName: "editables", predicate: EditableDirective, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bonc-editable-group',
+                    template: '<ng-content></ng-content>'
+                }]
+        }], propDecorators: { editModeChange: [{
+                type: Output
+            }], saved: [{
+                type: Output
+            }], requestEditorClose: [{
+                type: Output
+            }], editables: [{
+                type: ContentChildren,
+                args: [EditableDirective, { descendants: true }]
+            }] } });
+
+class FormBaseComponent {
+    static { this.inputs = ['locale']; }
+    constructor(editable, http) {
+        this.editable = editable;
+        this.http = http;
+        this.name = '';
+        this._locale = '';
+    }
+    set locale(value) {
+        this._locale = value;
+    }
+    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.ɵ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: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
+                    type: Host
+                }] }, { type: i2.HttpClient }], propDecorators: { locale: [{
+                type: Input
+            }] } });
+
+class TranslationInputComponent {
+    constructor() {
+        this.device = DeviceType.NotSet;
+        this.startEditing = new EventEmitter();
+        this.changed = new EventEmitter();
+        this.blurred = new EventEmitter();
+    }
+    onClick() {
+        this.startEditing.emit();
+    }
+    onKeyPress() {
+        this.changed.emit();
+    }
+    onBlur() {
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-translation-input', 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"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], device: [{
+                type: Input
+            }], startEditing: [{
+                type: Output
+            }], changed: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }] } });
+
+class TranslationTextareaComponent {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.device = DeviceType.NotSet;
+        this.startEditing = new EventEmitter();
+        this.changed = new EventEmitter();
+        this.blurred = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        setTimeout(this.triggerResize.bind(this));
+    }
+    ngOnChanges() {
+        setTimeout(this.triggerResize.bind(this), 500);
+    }
+    onClick() {
+        this.startEditing.emit();
+    }
+    onKeyPress() {
+        this.changed.emit();
+    }
+    onBlur() {
+        this.blurred.emit();
+    }
+    triggerResize() {
+        // console.log('trigger resize!');
+        this.ngZone.onStable.pipe(take(1))
+            .subscribe(() => {
+            this.autosizeList.forEach(x => x.resizeToFitContent(true));
+        });
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-translation-textarea', 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"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { autosizeList: [{
+                type: ViewChildren,
+                args: [CdkTextareaAutosize]
+            }], minRows: [{
+                type: Input
+            }], maxRows: [{
+                type: Input
+            }], text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], device: [{
+                type: Input
+            }], startEditing: [{
+                type: Output
+            }], changed: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }] } });
+
+class LinkPopupComponent {
+    constructor() {
+        this.TextEditorField = TextEditorField;
+        this.linkChange = new EventEmitter();
+        this.startEditing = new EventEmitter();
+        this.changed = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.open = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.LinkPopupField = TextEditorField;
+        this.popupIsShown = false;
+    }
+    onClick() {
+        this.startEditing.emit();
+    }
+    onChange() {
+        console.log('change link pop up');
+        this.changed.emit();
+    }
+    onBlur() {
+        this.blurred.emit();
+    }
+    showPopup() {
+        this.popupIsShown = true;
+        this.open.emit();
+    }
+    hidePopup() {
+        this.popupIsShown = false;
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-link-popup', 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"] }]
+        }], propDecorators: { linkChange: [{
+                type: Output
+            }], startEditing: [{
+                type: Output
+            }], changed: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], field: [{
+                type: Input,
+                args: [{ required: true }]
+            }], maxRows: [{
+                type: Input
+            }], minRows: [{
+                type: Input
+            }], linkTitle: [{
+                type: Input,
+                args: [{ required: true }]
+            }], locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], link: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class AdminControlsComponent {
+    constructor() {
+        this.DeviceType = DeviceType;
+        this.deviceControls = false;
+        this.locale = 'en';
+        this.device = this.DeviceType.Desktop;
+    }
+    changeLocale() {
+        this.locale = this.locale === 'en' ? 'ru' : 'en';
+    }
+    changeDevice() {
+        switch (this.device) {
+            case DeviceType.Desktop:
+                this.device = DeviceType.Tablet;
+                return;
+            case DeviceType.Tablet:
+                this.device = DeviceType.Mobile;
+                return;
+            case DeviceType.Mobile:
+                this.device = DeviceType.Desktop;
+                return;
+            default:
+                this.device = DeviceType.Desktop;
+                return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AdminControlsComponent, selector: "bonc-admin-controls", inputs: { editableGroup: "editableGroup", deviceControls: "deviceControls" }, ngImport: i0, template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-admin-controls', template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"] }]
+        }], propDecorators: { editableGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], deviceControls: [{
+                type: Input
+            }] } });
+
+class FormControlsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FormControlsComponent, selector: "bonc-form-controls", inputs: { editable: "editable" }, ngImport: i0, template: "<div [class.edit]=\"editable.inEditMode\" class=\"content\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\r\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\r\n    <ng-container *ngIf=\"editable.isDirty\">\r\n        <a (click)=\"editable.cancel()\">reset</a>\r\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;background-color:#222;color:silver}.content{flex:1;padding:10px}.content.edit{background-color:#111}.controls{display:flex;flex-direction:column;width:100px;background-color:#111}.controls.hidden{opacity:0;pointer-events:none}.controls a{display:block}.controls a.apply{flex:1}\n"], dependencies: [{ kind: "directive", type: i2$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(',');
+const videoFileTypes = videoMimeTypes.join(',');
+const allMediaFileTypes = `${imageFileTypes},${videoFileTypes}`;
+class MediaUploaderComponent {
+    constructor(sanitizer, http) {
+        this.sanitizer = sanitizer;
+        this.http = http;
+        this.MediaObjectFit = MediaObjectFit;
+        this.srcChange = new EventEmitter();
+        this.progress = 0;
+        this.isUploading = false;
+        this.autoplay = true;
+        this.fileTypeMask = allMediaFileTypes;
+    }
+    set src(newSrc) {
+        if (this._src === newSrc)
+            return;
+        this._src = newSrc;
+    }
+    get src() {
+        return this._src;
+    }
+    set uploadType(newUploadType) {
+        switch (newUploadType) {
+            case "image":
+                this._uploadType = newUploadType;
+                this.fileTypeMask = imageFileTypes;
+                break;
+            case "video":
+                this._uploadType = newUploadType;
+                this.fileTypeMask = videoFileTypes;
+                break;
+            case undefined:
+            default:
+                this._uploadType = newUploadType;
+                this.fileTypeMask = allMediaFileTypes;
+                break;
+        }
+    }
+    get uploadType() {
+        return this._uploadType;
+    }
+    onFileSelect(fileInput) {
+        if (fileInput.files === undefined || fileInput.files === null || fileInput.files.length !== 1)
+            return;
+        const file = fileInput.files[0];
+        let uploadingMediaType;
+        if (this._uploadType !== undefined && this._uploadType !== null) {
+            uploadingMediaType = this._uploadType;
+        }
+        else if (imageMimeTypes.includes(file.type)) {
+            uploadingMediaType = 'image';
+        }
+        else if (videoMimeTypes.includes(file.type)) {
+            uploadingMediaType = 'video';
+        }
+        else {
+            console.error(`unknown media type ${file.type} (${file.name})`);
+            return;
+        }
+        const uploadUrl = this.uploadUrlMap.get(uploadingMediaType);
+        if (uploadUrl === undefined || uploadUrl === null) {
+            console.error(`upload map doesn't have url for type ${uploadingMediaType}`);
+            return;
+        }
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('ratio', `${this.forceRatio ?? 0}`);
+        this.progress = 0;
+        this.isUploading = true;
+        this.updateClip();
+        const request = new HttpRequest('POST', uploadUrl, formData, {
+            reportProgress: true
+        });
+        this.http
+            .request(request)
+            .pipe(map(event => this.getEventMessage(event)), 
+        // tap(message => this.showProgress(message)),
+        last(), // return last (completed) message to caller
+        catchError(this.handleError(file))).subscribe(() => { this.isUploading = false; });
+    }
+    selectFile(event) {
+        // ignore buble click on file picker
+        if (event.target === this.fileInput.nativeElement)
+            return;
+        this.fileInput.nativeElement.click();
+    }
+    getEventMessage(event) {
+        switch (event.type) {
+            case HttpEventType.Sent:
+                return;
+            case HttpEventType.UploadProgress:
+                this.progress = event.total === undefined ? 0.5 : event.loaded / event.total;
+                this.updateClip();
+                return;
+            case HttpEventType.Response:
+                if (event.body === undefined || event.body === null) {
+                    console.error('media deserialization error. Response body in undefined');
+                }
+                else {
+                    // remove this
+                    // needed for C# deserialization
+                    const pixmedia = {
+                        $type: event.body.type,
+                        ...event.body,
+                    };
+                    this.srcChange.emit(pixmedia);
+                }
+                return;
+            default:
+                return;
+        }
+    }
+    updateClip() {
+        this.clipStyle = this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`);
+    }
+    handleError(file) {
+        const func = (error, p2) => {
+            const message = `error uploadingFile ${file.name}.`;
+            console.error(message, error, p2);
+            alert(message);
+            return new Observable();
+        };
+        return func;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, deps: [{ token: i1$1.DomSanitizer }, { token: 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" }] }); }
+}
+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: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], srcChange: [{
+                type: Output
+            }], uploadUrlMap: [{
+                type: Input,
+                args: [{ required: true }]
+            }], forceRatio: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], uploadType: [{
+                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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorAnchorDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[boncSkeletonEditorAnchor]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+
+class BoneEditorBaseComponent {
+    constructor() {
+        this.editing = new EventEmitter();
+        this.saved = new EventEmitter();
+        this.removed = new EventEmitter();
+        this.device = DeviceType.NotSet;
+        this._storedData = '';
+        this._isDirty = false;
+        this._isEditing = false;
+        this.applyPresetAtIndex = (newIndex) => {
+            newIndex = newIndex < 0 ? 0 : newIndex % this.presets.length;
+            const currentIndex = this._currentPreset === undefined ? -1 : this.presets.indexOf(this._currentPreset);
+            if (currentIndex === newIndex)
+                return;
+            this._currentPreset = this.presets[newIndex];
+            this._currentPreset.transformer(this._bone);
+            this.updateDirty();
+        };
+        this.updatePresetByData = () => {
+            const countOfActive = this.presets.map(p => p.isActive(this._bone)).filter(p => p).length;
+            if (countOfActive !== 1)
+                throw new Error(`active preset count should be equal 1, but it was: ${countOfActive}. ${this.constructor.name}`);
+            for (let i = 0; this.presets.length; i++) {
+                const preset = this.presets[i];
+                if (preset.isActive(this._bone)) {
+                    this.applyPresetAtIndex(i);
+                    break;
+                }
+            }
+        };
+        this.presets = this.getPresets();
+        if (this.presets === undefined || this.presets === null)
+            throw new Error('presets cannot be undefined in ContentPreset constructor');
+        if (this.presets.length === 0) {
+            this.presets = [
+                {
+                    title: 'default',
+                    isActive: () => true,
+                    transformer: bone => bone,
+                    clean: bone => bone,
+                }
+            ];
+        }
+        this.noPresets = this.presets.length === 1;
+    }
+    get isMobile() {
+        return this.device !== undefined && this.device === DeviceType.Mobile;
+    }
+    get isTablet() {
+        return this.device !== undefined && this.device === DeviceType.Tablet;
+    }
+    get isDesktop() {
+        return this.device !== undefined && this.device === DeviceType.Desktop;
+    }
+    get currentPreset() {
+        return this._currentPreset;
+    }
+    get bone() {
+        return this._bone;
+    }
+    set bone(newData) {
+        this._isDirty = false;
+        this._storedData = JSON.stringify(newData);
+        this._bone = JSON.parse(this._storedData);
+        this.updatePresetByData();
+    }
+    get isDirty() {
+        return this._isDirty;
+    }
+    get isEditing() {
+        return this._isEditing;
+    }
+    resetData() {
+        this._isEditing = false;
+        this.bone = JSON.parse(this._storedData);
+        if (this.onReset !== undefined)
+            this.onReset();
+        this.editing.emit(false);
+    }
+    updateDirty() {
+        this._isDirty = JSON.stringify(this._bone) !== this._storedData;
+    }
+    markAsDirty() {
+        this._isDirty = true;
+    }
+    remove() {
+        this.removed.next();
+    }
+    save() {
+        if (!this.isDirty)
+            return;
+        this._isDirty = false;
+        this.finishEditing();
+        this._storedData = JSON.stringify(this._bone);
+        const clonedData = JSON.parse(this._storedData);
+        this.saved.emit(clonedData);
+    }
+    startEditing() {
+        if (this._isEditing) {
+            this.updateDirty();
+            return;
+        }
+        this._isEditing = true;
+        this.updateDirty();
+        this.editing.emit(true);
+    }
+    finishEditing() {
+        if (this._isDirty)
+            throw new Error('Нельзя закрывать редактирование когда есть изменения. Надо сохранить либо зарезетить.');
+        if (this.onFinishEditing !== undefined)
+            this.onFinishEditing();
+        this._isEditing = false;
+    }
+    nextPreset() {
+        const newIndex = this._currentPreset === undefined ? 0 : this.presets.indexOf(this._currentPreset) + 1;
+        this.applyPresetAtIndex(newIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BoneEditorBaseComponent, selector: "ng-component", inputs: { locale: "locale", bone: "bone" }, host: { properties: { "class.mobile": "this.isMobile", "class.tablet": "this.isTablet", "class.desktop": "this.isDesktop" } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: () => [], propDecorators: { locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isMobile: [{
+                type: HostBinding,
+                args: ['class.mobile']
+            }], isTablet: [{
+                type: HostBinding,
+                args: ['class.tablet']
+            }], isDesktop: [{
+                type: HostBinding,
+                args: ['class.desktop']
+            }], bone: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class UnknownBoneEditorComponent extends BoneEditorBaseComponent {
+    onFinishEditing() { }
+    onReset() { }
+    getPresets() {
+        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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-unknown-bone-editor', 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"] }]
+        }] });
+
+// todo: rename class
+class BoneEditorContainerComponent {
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.removed = new EventEmitter();
+        this.saved = new EventEmitter();
+        this.editing = new EventEmitter();
+        this.DeviceType = DeviceType;
+        this.themePopupIsShown = false;
+        this.device = DeviceType.NotSet;
+        this.nextPreset = () => {
+            if (this.editor === undefined || this.editor === null)
+                return;
+            this.editor.nextPreset();
+        };
+    }
+    ngOnChanges() {
+        if (this.editor === undefined || this.editor === null)
+            return;
+        this.editor.locale = this.locale;
+        this.editor.device = this.device;
+    }
+    get bone() {
+        return this._bone;
+    }
+    set bone(newBone) {
+        this._bone = newBone;
+        if (this.removeSubscription) {
+            this.removeSubscription.unsubscribe();
+            this.removeSubscription = undefined;
+        }
+        if (this.saveSubscription) {
+            this.saveSubscription.unsubscribe();
+            this.saveSubscription = undefined;
+        }
+        if (this.changedSubscription) {
+            this.changedSubscription.unsubscribe();
+            this.changedSubscription = undefined;
+        }
+        const viewContainerRef = this.anchor.viewContainerRef;
+        viewContainerRef.clear();
+        const componentType = this.map.get(newBone.type) ?? UnknownBoneEditorComponent;
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+        const boneEditorRef = viewContainerRef.createComponent(componentFactory);
+        this.editor = boneEditorRef.instance;
+        this.editor.bone = newBone;
+        this.removeSubscription = this.editor.removed.subscribe(() => {
+            this.removed.next();
+        });
+        this.changedSubscription = this.editor.editing.subscribe((isEditing) => {
+            this.editing.next(isEditing);
+        });
+        this.saveSubscription = this.editor.saved.subscribe((newBoneValue) => {
+            this.saved.next(newBoneValue);
+        });
+        this.ngOnChanges();
+    }
+    // todo: add or remove visibility feature
+    // public setDisabled = (disabled: boolean): void => {
+    //   if (this.editor === undefined || this.editor === null)
+    //     return;
+    //   this.editor.startEditing();
+    //   if (this.device === DeviceType.Desktop)
+    //     this.editor.bone.visibility = setOrRemoveFlag(this.editor.bone.visibility, DeviceVisibility.Desktop, !disabled);
+    //   else if (this.device === DeviceType.Tablet)
+    //     this.editor.bone.visibility = setOrRemoveFlag(this.editor.bone.visibility, DeviceVisibility.Tablet, !disabled);
+    //   else if (this.device === DeviceType.Mobile)
+    //     this.editor.bone.visibility = setOrRemoveFlag(this.editor.bone.visibility, DeviceVisibility.Mobile, !disabled);
+    //   this.editor.updateDirty();
+    // }
+    get disabled() {
+        if (this.editor === undefined || this.editor === null)
+            throw new Error('editor should have been set');
+        return false;
+        // todo: add or remove visibility feature
+        // const visibility = this.editor.bone.visibility;
+        // if (this.device === DeviceType.Desktop && hasFlag(visibility, DeviceVisibility.Desktop))
+        //   return false;
+        // if (this.device === DeviceType.Tablet && hasFlag(visibility, DeviceVisibility.Tablet))
+        //   return false;
+        // if (this.device === DeviceType.Mobile && hasFlag(visibility, DeviceVisibility.Mobile))
+        //   return false;
+        // 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-bone-editor-container', 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"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { anchor: [{
+                type: ViewChild,
+                args: [SkeletonEditorAnchorDirective, { static: true }]
+            }], removed: [{
+                type: Output
+            }], saved: [{
+                type: Output
+            }], editing: [{
+                type: Output
+            }], locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], device: [{
+                type: Input
+            }], map: [{
+                type: Input,
+                args: [{ required: true }]
+            }], bone: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+// todo: rename class
+class SkeletonEditorComponent {
+    constructor(editable) {
+        this.editable = editable;
+        this.device = DeviceType.NotSet;
+        this.templatesAreShown = [];
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.boneEditorContainerList.forEach(editorContainer => editorContainer.editor?.save());
+            this.editable.save();
+        });
+        this.editable.canceled.subscribe(() => {
+            this.boneEditorContainerList.forEach(editorContainer => editorContainer.editor?.resetData());
+            this.editable.save();
+        });
+    }
+    ngOnChanges() {
+        this.templatesAreShown.splice(0, this.templatesAreShown.length);
+        if (this.bones === undefined)
+            return;
+        this.bones.forEach(() => this.templatesAreShown.push(false));
+        this.templatesAreShown.push(false);
+    }
+    get bones() {
+        return this.editable?.value ?? [];
+    }
+    boneEditHandler(isEditing) {
+        if (isEditing)
+            this.editable.startEditing();
+        else {
+            const allClosed = this.boneEditorContainerList
+                .filter(x => x.editor !== undefined && x.editor.isEditing)
+                .length === 0;
+            this.editable.updateDirty();
+            if (!this.editable.isDirty && allClosed)
+                this.editable.close();
+        }
+    }
+    boneChangeHandler(index, newBoneValue) {
+        if (Array.isArray(this.editable.value)) {
+            this.editable.value[index] = newBoneValue;
+        }
+        this.editable.save();
+    }
+    removeBone(boneIndex) {
+        if (this.bones === undefined || this.bones === null)
+            return;
+        if (!confirm('Вы уверены, что хотите удалить компонент?'))
+            return;
+        this.bones.splice(boneIndex, 1);
+        if (!this.editable.inEditMode)
+            this.editable.startEditing();
+        this.editable.save();
+    }
+    moveDown(boneIndex) {
+        if (boneIndex >= this.bones.length - 1)
+            return;
+        this.swapBones(boneIndex, boneIndex + 1);
+    }
+    moveUp(boneIndex) {
+        if (boneIndex <= 0)
+            return;
+        this.swapBones(boneIndex - 1, boneIndex);
+    }
+    createBone(index, selectedTemplate) {
+        const newBone = selectedTemplate.boneFactory();
+        this.bones.splice(index, 0, newBone);
+    }
+    swapBones(index1, index2) {
+        if (index1 < 0 || index2 < 0 || index1 >= this.bones.length || index2 >= this.bones.length)
+            throw new Error(`ошибка swapBones. неправильные индексы ${index1} и ${index2}. bone count: ${this.bones.length}`);
+        const tempBone = this.bones[index1];
+        this.bones[index1] = this.bones[index2];
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-skeleton-editor', hostDirectives: [EditableDirective], 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"] }]
+        }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
+                    type: Host
+                }] }], propDecorators: { boneEditorContainerList: [{
+                type: ViewChildren,
+                args: ['boneEditorContainer']
+            }], locale: [{
+                type: Input,
+                args: [{ required: true }]
+            }], device: [{
+                type: Input
+            }], map: [{
+                type: Input,
+                args: [{ required: true }]
+            }], templates: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+function createPreset(params) {
+    return {
+        title: params.title,
+        isActive: x => x.style === params.style,
+        transformer: bone => bone.style = params.style,
+        clean: bone => bone.style = params.style,
+    };
+}
+
+const components = [
+    TranslationInputComponent,
+    TranslationTextareaComponent,
+    AdminControlsComponent,
+    EditableGroupComponent,
+    FormControlsComponent,
+    TranslationFormComponent,
+    TextFormComponent,
+    SeoFormComponent,
+    UnknownFormComponent,
+    SkeletonEditorComponent,
+    SkeletonEditorAnchorDirective,
+    BoneEditorContainerComponent,
+    UnknownBoneEditorComponent,
+    MediaUploaderComponent,
+    LinkPopupComponent
+];
+const standaloneDirectives = [
+    EditableDirective
+];
+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,
+            TranslationTextareaComponent,
+            AdminControlsComponent,
+            EditableGroupComponent,
+            FormControlsComponent,
+            TranslationFormComponent,
+            TextFormComponent,
+            SeoFormComponent,
+            UnknownFormComponent,
+            SkeletonEditorComponent,
+            SkeletonEditorAnchorDirective,
+            BoneEditorContainerComponent,
+            UnknownBoneEditorComponent,
+            MediaUploaderComponent,
+            LinkPopupComponent], imports: [CommonModule,
+            FormsModule,
+            CdkTextareaAutosize,
+            BonnieModule, EditableDirective], exports: [CommonModule,
+            FormsModule,
+            BonnieModule, TranslationInputComponent,
+            TranslationTextareaComponent,
+            AdminControlsComponent,
+            EditableGroupComponent,
+            FormControlsComponent,
+            TranslationFormComponent,
+            TextFormComponent,
+            SeoFormComponent,
+            UnknownFormComponent,
+            SkeletonEditorComponent,
+            SkeletonEditorAnchorDirective,
+            BoneEditorContainerComponent,
+            UnknownBoneEditorComponent,
+            MediaUploaderComponent,
+            LinkPopupComponent, EditableDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, imports: [CommonModule,
+            FormsModule,
+            BonnieModule, CommonModule,
+            FormsModule,
+            BonnieModule] }); }
+} // todo: move to standalone
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...components,
+                    ],
+                    providers: [],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CdkTextareaAutosize,
+                        BonnieModule,
+                        ...standaloneDirectives
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        BonnieModule,
+                        ...components,
+                        ...standaloneDirectives
+                    ]
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=candy-kingdom-bonnie-cms.mjs.map