@candy-kingdom/bonnie-cms 0.26.16 → 0.27.0

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

@@ -1,91 +1,16 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Output, Directive, ContentChildren, Component, inject, Input, ViewChildren, ChangeDetectorRef, ViewChild, InjectionToken, Injectable, ViewContainerRef, HostBinding, ComponentFactoryResolver } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule, DecimalPipe, JsonPipe } from '@angular/common';
-import { Subject, debounceTime, map, last, catchError, Observable, of, combineLatest, mergeMap, merge } from 'rxjs';
+import { input, Component, output, model, signal, computed, effect, HostBinding, forwardRef, Directive, contentChildren, inject, DestroyRef, viewChildren, viewChild, InjectionToken, Injectable, ViewContainerRef, afterNextRender } from '@angular/core';
+import { JsonPipe, DecimalPipe, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, debounceTime, map, last, catchError, Observable, of, combineLatest, mergeMap, merge } from 'rxjs';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient, HttpRequest, HttpEventType } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
 import { LottieComponent } from 'ngx-lottie';
 import { MediaObjectFit, MarcyMediaComponent } 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.
- */
-
-/**
- * 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";
@@ -94,6 +19,15 @@ var DeviceType;
     DeviceType[DeviceType["Desktop"] = 3] = "Desktop";
 })(DeviceType || (DeviceType = {}));
 
+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 = {}));
+
 var TextEditorField;
 (function (TextEditorField) {
     TextEditorField[TextEditorField["NotSet"] = 0] = "NotSet";
@@ -102,13 +36,13 @@ var TextEditorField;
 })(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');
+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('//'))
+    if (url.startsWith("//"))
         return false;
-    if (url.startsWith('./') || url.startsWith('/'))
+    if (url.startsWith("./") || url.startsWith("/"))
         return true;
     return false;
 }
@@ -119,67 +53,225 @@ 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 AdminControlsComponent {
+    DeviceType = DeviceType;
+    editableGroup = input.required(...(ngDevMode ? [{ debugName: "editableGroup" }] : []));
+    deviceControls = input(false, ...(ngDevMode ? [{ debugName: "deviceControls" }] : []));
+    locale = "en";
+    device = this.DeviceType.Desktop;
+    changeLocale() {
+        this.locale = this.locale === "en" ? "ru" : "en"; // move locales to CMS config
+    }
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdminControlsComponent, isStandalone: true, selector: "bonc-admin-controls", inputs: { editableGroup: { classPropertyName: "editableGroup", publicName: "editableGroup", isSignal: true, isRequired: true, transformFunction: null }, deviceControls: { classPropertyName: "deviceControls", publicName: "deviceControls", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-controls\">\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\n\n  <!-- todo: return this functionality -->\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\n  </a> -->\n\n  @if (editableGroup() && editableGroup().inEditMode()) {\n    <a (click)=\"editableGroup().saveAll()\"\n       class=\"save\">Save all</a>\n\n    <a (click)=\"editableGroup().cancelAll()\"\n       class=\"cancel\">Cancel all</a>\n  }\n</div>\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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "bonc-admin-controls", template: "<div class=\"page-controls\">\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\n\n  <!-- todo: return this functionality -->\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\n  </a> -->\n\n  @if (editableGroup() && editableGroup().inEditMode()) {\n    <a (click)=\"editableGroup().saveAll()\"\n       class=\"save\">Save all</a>\n\n    <a (click)=\"editableGroup().cancelAll()\"\n       class=\"cancel\">Cancel all</a>\n  }\n</div>\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: i0.Input, args: [{ isSignal: true, alias: "editableGroup", required: true }] }], deviceControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceControls", required: false }] }] } });
+
+class BoneEditorBaseComponent {
+    editing = output();
+    saved = output();
+    removed = output();
+    boneEtalon = model.required(...(ngDevMode ? [{ debugName: "boneEtalon" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    device = input(DeviceType.NotSet, ...(ngDevMode ? [{ debugName: "device" }] : []));
+    _presets = signal([], ...(ngDevMode ? [{ debugName: "_presets" }] : []));
+    presets = this._presets.asReadonly();
+    _currentPreset = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentPreset" }] : []));
+    currentPreset = this._currentPreset.asReadonly();
+    _isDirty = signal(false, ...(ngDevMode ? [{ debugName: "_isDirty" }] : []));
+    isDirty = this._isDirty.asReadonly();
+    _isEditing = signal(false, ...(ngDevMode ? [{ debugName: "_isEditing" }] : []));
+    isEditing = this._isEditing.asReadonly();
+    noPresets = computed(() => this.presets().length === 0, ...(ngDevMode ? [{ debugName: "noPresets" }] : []));
+    // effect gonna fix this undefined value
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    bone = signal(undefined, ...(ngDevMode ? [{ debugName: "bone" }] : []));
+    _storedBoneJson = "";
+    constructor() {
+        effect(() => {
+            const newData = this.boneEtalon();
+            this._isDirty.set(false);
+            this._storedBoneJson = JSON.stringify(newData);
+            this.bone.set(JSON.parse(this._storedBoneJson));
+            this.updatePresetByData();
+        });
+        const presets = this.getPresets();
+        if (presets.length === 0) {
+            presets.push({
+                title: "default",
+                isActive: () => true,
+                transformer: (bone) => bone,
+                clean: (bone) => bone,
+            });
+        }
+        // todo: remove this, use just regular presets
+        this._presets.set(presets);
+    }
+    get isMobile() {
+        return this.device() === DeviceType.Mobile;
+    }
+    get isTablet() {
+        return this.device() === DeviceType.Tablet;
+    }
+    get isDesktop() {
+        return this.device() === DeviceType.Desktop;
+    }
+    resetData() {
+        this._isEditing.set(false);
+        this.boneEtalon.set(JSON.parse(this._storedBoneJson));
+        this.updatePresetByData();
+        if (this.onReset !== undefined)
+            this.onReset();
+        this.editing.emit(false);
+    }
+    updateDirty() {
+        this._isDirty.set(JSON.stringify(this.bone()) !== this._storedBoneJson);
+    }
+    markAsDirty() {
+        this._isDirty.set(true);
+    }
+    remove() {
+        this.removed.emit();
+    }
+    save() {
+        if (!this.isDirty())
+            return;
+        this._isDirty.set(false);
+        this.finishEditing();
+        this._storedBoneJson = JSON.stringify(this.bone());
+        const clonedData = JSON.parse(this._storedBoneJson);
+        this.saved.emit(clonedData);
+    }
+    startEditing() {
+        if (this.isEditing()) {
+            this.updateDirty();
+            return;
+        }
+        this._isEditing.set(true);
+        this.updateDirty();
+        this.editing.emit(true);
+    }
+    finishEditing() {
+        if (this._isDirty())
+            throw new Error("Нельзя закрывать редактирование когда есть изменения. Надо сохранить либо зарезетить.");
+        if (this.onFinishEditing !== undefined)
+            this.onFinishEditing();
+        this._isEditing.set(false);
+    }
+    nextPreset() {
+        const currentPreset = this.currentPreset();
+        const newIndex = currentPreset === undefined ? 0 : this.presets().indexOf(currentPreset) + 1;
+        this.applyPresetAtIndex(newIndex);
+    }
+    applyPresetAtIndex = (newIndex) => {
+        newIndex = newIndex < 0 ? 0 : newIndex % this.presets().length;
+        const currentPreset = this.currentPreset();
+        const currentIndex = currentPreset === undefined ? -1 : this.presets().indexOf(currentPreset);
+        if (currentIndex === newIndex)
+            return;
+        const newPreset = this.presets()[newIndex];
+        this._currentPreset.set(newPreset);
+        newPreset.transformer(this.bone());
+        this.updateDirty();
+    };
+    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; i < this.presets().length; i++) {
+            const preset = this.presets()[i];
+            if (preset.isActive(this.bone())) {
+                this.applyPresetAtIndex(i);
+                break;
+            }
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BoneEditorBaseComponent, isStandalone: true, selector: "ng-component", inputs: { boneEtalon: { classPropertyName: "boneEtalon", publicName: "boneEtalon", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editing: "editing", saved: "saved", removed: "removed", boneEtalon: "boneEtalonChange" }, 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: "21.0.6", ngImport: i0, type: BoneEditorBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: "" }]
+        }], ctorParameters: () => [], propDecorators: { editing: [{ type: i0.Output, args: ["editing"] }], saved: [{ type: i0.Output, args: ["saved"] }], removed: [{ type: i0.Output, args: ["removed"] }], boneEtalon: [{ type: i0.Input, args: [{ isSignal: true, alias: "boneEtalon", required: true }] }, { type: i0.Output, args: ["boneEtalonChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], isMobile: [{
+                type: HostBinding,
+                args: ["class.mobile"]
+            }], isTablet: [{
+                type: HostBinding,
+                args: ["class.tablet"]
+            }], isDesktop: [{
+                type: HostBinding,
+                args: ["class.desktop"]
+            }] } });
+
+class UnknownBoneEditorComponent extends BoneEditorBaseComponent {
+    onFinishEditing() {
+        // no-op for unknown bone type
+    }
+    onReset() {
+        // no-op for unknown bone type
+    }
+    getPresets() {
+        return [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnknownBoneEditorComponent, isStandalone: true, selector: "bonc-unknown-bone-editor", usesInheritance: true, ngImport: i0, template: "<p>Unknown Bone Editor | bone type: {{bone().type}}</p>\n<pre>{{bone() | json}}</pre>\n", styles: [":host{display:block;background-color:#dc143c}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "bonc-unknown-bone-editor", imports: [JsonPipe], template: "<p>Unknown Bone Editor | bone type: {{bone().type}}</p>\n<pre>{{bone() | json}}</pre>\n", styles: [":host{display:block;background-color:#dc143c}\n"] }]
+        }] });
 
 class EditableDirective {
-    saved = new EventEmitter();
-    editModeChange = new EventEmitter();
-    externalSaveCall = new EventEmitter();
-    canceled = new EventEmitter();
-    valueChange = new EventEmitter();
+    saved = output();
+    editModeChange = output();
+    externalSaveCall = output();
+    canceled = output();
+    valueChange = output();
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     propagateChange = () => { };
-    _inEditMode = false;
-    _isDirty = false;
+    _inEditMode = signal(false, ...(ngDevMode ? [{ debugName: "_inEditMode" }] : []));
+    inEditMode = this._inEditMode.asReadonly();
+    _isDirty = signal(false, ...(ngDevMode ? [{ debugName: "_isDirty" }] : []));
+    isDirty = this._isDirty.asReadonly();
     _value;
     _originalValue;
     _storedData;
-    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();
     }
     startEditing = () => {
-        if (this._inEditMode) {
+        if (this.inEditMode()) {
             this.updateDirty();
             return;
         }
-        this._inEditMode = true;
+        this._inEditMode.set(true);
         this.updateDirty();
         this.editModeChange.emit(true);
     };
     save(newData) {
-        if (!this._inEditMode) {
-            console.warn('save before edit mode'); //todo: fix that
+        if (!this.inEditMode()) {
+            console.warn("save before edit mode"); //todo: fix that
         }
         this.finishEditing();
         const newUnqieNotEmptyData = this.value === newData || newData === undefined
@@ -194,20 +286,19 @@ class EditableDirective {
         if (this._originalValue === undefined || this._originalValue === null)
             return;
         if (typeof this._originalValue !== "object") {
-            console.warn('patch save called on not object type');
+            console.warn("patch save called on not object type");
             return;
         }
         this._originalValue[propName] = newDataParts;
         this.setOriginal(this._originalValue);
         this.updateDirty();
-        if (!this.isDirty)
+        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))
+            if (!Object.hasOwn(dict, key))
                 continue;
             const propVal = dict[key];
             if (this._value !== undefined && this._value !== null) {
@@ -220,7 +311,7 @@ class EditableDirective {
         this._storedData = JSON.stringify(this._originalValue);
     }
     cancel() {
-        if (!this._inEditMode)
+        if (!this.inEditMode())
             return;
         this.finishEditing();
         // reset value
@@ -231,15 +322,16 @@ class EditableDirective {
         this.finishEditing();
     }
     finishEditing() {
-        if (!this._inEditMode)
+        if (!this.inEditMode())
             return;
-        this._inEditMode = false;
+        this._inEditMode.set(false);
         this.editModeChange.emit(false);
     }
     setValue(newValue) {
-        this._value = (newValue === null || newValue === undefined)
-            ? undefined
-            : JSON.parse(JSON.stringify(newValue));
+        this._value =
+            newValue === null || newValue === undefined
+                ? undefined
+                : JSON.parse(JSON.stringify(newValue));
         this.valueChange.emit(this._value);
     }
     set value(newValue) {
@@ -249,13 +341,10 @@ class EditableDirective {
         return this._value;
     }
     updateDirty() {
-        this._isDirty = JSON.stringify(this._value) !== this._storedData;
+        this._isDirty.set(JSON.stringify(this._value) !== this._storedData);
     }
     markAsDirty() {
-        this._isDirty = true;
-    }
-    get isDirty() {
-        return this._isDirty;
+        this._isDirty.set(true);
     }
     setOriginal(newOriginalValue) {
         this._originalValue = newOriginalValue;
@@ -265,10 +354,11 @@ class EditableDirective {
     writeValue(newValue) {
         this.finishEditing();
         this.setOriginal(newValue);
-        this._isDirty = false;
+        this._isDirty.set(false);
         this.setValue(newValue);
     }
     setDisabledState() {
+        // required by ControlValueAccessor
     }
     registerOnChange(tellAngularThatSomethingIsChanged) {
         this.propagateChange = (newValue) => {
@@ -276,139 +366,106 @@ class EditableDirective {
         };
     }
     registerOnTouched() {
+        // required by ControlValueAccessor
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EditableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.6", ngImport: i0, type: EditableDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: '[boncEditable]',
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableDirective), multi: 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
-            }] } });
+        }], propDecorators: { saved: [{ type: i0.Output, args: ["saved"] }], editModeChange: [{ type: i0.Output, args: ["editModeChange"] }], externalSaveCall: [{ type: i0.Output, args: ["externalSaveCall"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class EditableGroupComponent {
-    editModeChange = new EventEmitter();
-    saved = new EventEmitter();
-    requestEditorClose = new EventEmitter();
-    editables;
-    subscriptions = [];
-    _inEditMode = false;
-    saveSubject = new Subject();
-    ngAfterContentInit() {
-        this.saveSubject
+    editModeChange = output();
+    saved = output();
+    requestEditorClose = output();
+    editables = contentChildren(EditableDirective, { ...(ngDevMode ? { debugName: "editables" } : {}), descendants: true });
+    _subscriptions = [];
+    inEditMode = signal(false, ...(ngDevMode ? [{ debugName: "inEditMode" }] : []));
+    _saveSubject = new Subject(); // todo: use signal
+    constructor() {
+        const saveSubscription = this._saveSubject
             .asObservable()
-            .pipe(debounceTime(100))
-            .subscribe(() => this.saved.emit());
-        this.updateSubscriptions();
-        this.editables.changes.subscribe(() => {
-            this.clearSubscribtions();
+            .pipe(debounceTime(100), takeUntilDestroyed())
+            .subscribe(() => this.saved.emit(undefined));
+        effect(() => {
+            this.clearSubscriptions();
             this.updateSubscriptions();
         });
-    }
-    get inEditMode() {
-        return this._inEditMode;
+        inject(DestroyRef).onDestroy(() => {
+            saveSubscription.unsubscribe();
+            this.clearSubscriptions();
+        });
     }
     saveAll() {
-        this.editables.forEach(x => x.requestSave());
+        this.editables().forEach((x) => x.requestSave());
     }
     cancelAll() {
-        this.editables.forEach(x => x.cancel());
+        this.editables().forEach((x) => x.cancel());
     }
     closeAll() {
         this.requestEditorClose.emit(true);
-        this.editables.forEach(x => x.close());
+        this.editables().forEach((x) => x.close());
     }
-    clearSubscribtions() {
-        this.subscriptions.forEach(x => x.unsubscribe());
-        this.subscriptions.splice(0, this.subscriptions.length);
+    clearSubscriptions() {
+        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)
-            }));
+        this.editables().forEach((editable) => {
+            this._subscriptions.push(editable.saved.subscribe(this.onSave.bind(this)), editable.editModeChange.subscribe(this.updateEditMode.bind(this)));
         });
     }
     onSave() {
-        this.saveSubject.next();
+        this._saveSubject.next();
     }
     updateEditMode() {
-        const newEditMode = this.editables
-            .filter(x => x.inEditMode)
-            .length > 0;
-        if (newEditMode === this._inEditMode)
+        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();
+        this.inEditMode.set(newEditMode);
+        this.editModeChange.emit(newEditMode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EditableGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: EditableGroupComponent, isStandalone: true, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: EditableGroupComponent, isStandalone: true, selector: "bonc-editable-group", outputs: { editModeChange: "editModeChange", saved: "saved", requestEditorClose: "requestEditorClose" }, queries: [{ propertyName: "editables", predicate: EditableDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EditableGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'bonc-editable-group',
-                    standalone: true,
-                    template: '<ng-content></ng-content>'
+                    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 }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { editModeChange: [{ type: i0.Output, args: ["editModeChange"] }], saved: [{ type: i0.Output, args: ["saved"] }], requestEditorClose: [{ type: i0.Output, args: ["requestEditorClose"] }], editables: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EditableDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class FormBaseComponent {
-    static inputs = ['locale'];
-    name = '';
-    _locale = '';
+    name = "";
     editable = inject((EditableDirective), { host: true });
-    set locale(value) {
-        this._locale = value;
-    }
-    get locale() {
-        return this._locale;
-    }
+    locale = input("", ...(ngDevMode ? [{ debugName: "locale" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FormBaseComponent, isStandalone: true, selector: "ng-component", inputs: { locale: "locale" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: FormBaseComponent, isStandalone: true, selector: "ng-component", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormBaseComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: "",
                 }]
-        }], propDecorators: { locale: [{
-                type: Input
-            }] } });
+        }], propDecorators: { locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
 
 class TranslationInputComponent {
-    text;
-    locale;
-    device = DeviceType.NotSet;
-    startEditing = new EventEmitter();
-    changed = new EventEmitter();
-    blurred = new EventEmitter();
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    device = input(DeviceType.NotSet, ...(ngDevMode ? [{ debugName: "device" }] : []));
+    startEditing = output();
+    changed = output();
+    blurred = output();
     onClick() {
         this.startEditing.emit();
     }
@@ -419,42 +476,35 @@ class TranslationInputComponent {
         this.blurred.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TranslationInputComponent, isStandalone: true, 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]\"\n       (click)=\"onClick()\"\n       (keyup)=\"onKeyPress()\"\n       (blur)=\"onBlur()\" />\n", styles: [":host{padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host{display:block}:host input{display:block;border:none;background-color:#8080801a;color:var(--text-color)}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}:host input{display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TranslationInputComponent, isStandalone: true, selector: "bonc-translation-input", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text()[locale()]\"\n       (click)=\"onClick()\"\n       (keyup)=\"onKeyPress()\"\n       (blur)=\"onBlur()\" />\n", styles: [":host{padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host{display:block}:host input{display:block;border:none;background-color:#8080801a;color:var(--text-color)}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}:host input{display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "21.0.6", ngImport: i0, type: TranslationInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-input', standalone: true, imports: [FormsModule], template: "<input [(ngModel)]=\"text[locale]\"\n       (click)=\"onClick()\"\n       (keyup)=\"onKeyPress()\"\n       (blur)=\"onBlur()\" />\n", styles: [":host{padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host{display:block}:host input{display:block;border:none;background-color:#8080801a;color:var(--text-color)}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}:host input{display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}\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
-            }] } });
+            args: [{ selector: "bonc-translation-input", imports: [FormsModule], template: "<input [(ngModel)]=\"text()[locale()]\"\n       (click)=\"onClick()\"\n       (keyup)=\"onKeyPress()\"\n       (blur)=\"onBlur()\" />\n", styles: [":host{padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host{display:block}:host input{display:block;border:none;background-color:#8080801a;color:var(--text-color)}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}:host input{display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], startEditing: [{ type: i0.Output, args: ["startEditing"] }], changed: [{ type: i0.Output, args: ["changed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 class TranslationTextareaComponent {
-    autosizeList;
-    minRows;
-    maxRows;
-    text;
-    locale;
-    device = DeviceType.NotSet;
-    startEditing = new EventEmitter();
-    changed = new EventEmitter();
-    blurred = new EventEmitter();
-    ngAfterViewInit() {
-        setTimeout(this.triggerResize.bind(this));
-    }
-    ngOnChanges() {
-        setTimeout(this.triggerResize.bind(this), 500);
+    autosizeList = viewChildren(CdkTextareaAutosize, ...(ngDevMode ? [{ debugName: "autosizeList" }] : []));
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    minRows = input(...(ngDevMode ? [undefined, { debugName: "minRows" }] : []));
+    maxRows = input(...(ngDevMode ? [undefined, { debugName: "maxRows" }] : []));
+    device = input(DeviceType.NotSet, ...(ngDevMode ? [{ debugName: "device" }] : []));
+    startEditing = output();
+    changed = output();
+    blurred = output();
+    constructor() {
+        // todo: check if it still necessary
+        effect((onCleanup) => {
+            this.text();
+            this.locale();
+            this.minRows();
+            this.maxRows();
+            const timer = setTimeout(() => this.triggerResize(), 500);
+            onCleanup(() => {
+                clearTimeout(timer);
+            });
+        });
     }
     onClick() {
         this.startEditing.emit();
@@ -466,63 +516,36 @@ class TranslationTextareaComponent {
         this.blurred.emit();
     }
     triggerResize() {
-        // console.log('trigger resize!');
-        // todo: investigate is it working or not
-        // this.ngZone.onStable.pipe(take(1))
-        //   .subscribe(() => {
-        //     this.autosizeList.forEach(x => x.resizeToFitContent(true));
-        //   });
+        this.autosizeList().forEach((x) => x.resizeToFitContent(true));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TranslationTextareaComponent, isStandalone: true, 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]\"\n          [cdkAutosizeMinRows]=\"minRows\"\n          [cdkAutosizeMaxRows]=\"maxRows\"\n          (click)=\"onClick()\"\n          (keyup)=\"onKeyPress()\"\n          (blur)=\"onBlur()\"\n          matInput\n          cdkTextareaAutosize>\n</textarea>\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}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,#cf00,#cf00 10px,#000 10px 20px) fixed bottom;color:#000}textarea{color:silver;background-color:transparent}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: TranslationTextareaComponent, isStandalone: true, selector: "bonc-translation-textarea", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, viewQueries: [{ propertyName: "autosizeList", predicate: CdkTextareaAutosize, descendants: true, isSignal: true }], ngImport: i0, template: "<textarea [(ngModel)]=\"text()[locale()]\"\n          [cdkAutosizeMinRows]=\"minRows()\"\n          [cdkAutosizeMaxRows]=\"maxRows()\"\n          (click)=\"onClick()\"\n          (keyup)=\"onKeyPress()\"\n          (blur)=\"onBlur()\"\n          matInput\n          cdkTextareaAutosize>\n</textarea>\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}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,#cf00,#cf00 10px,#000 10px 20px) fixed bottom;color:#000}textarea{color:silver;background-color:transparent}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-textarea', standalone: true, imports: [FormsModule, CdkTextareaAutosize], template: "<textarea [(ngModel)]=\"text[locale]\"\n          [cdkAutosizeMinRows]=\"minRows\"\n          [cdkAutosizeMaxRows]=\"maxRows\"\n          (click)=\"onClick()\"\n          (keyup)=\"onKeyPress()\"\n          (blur)=\"onBlur()\"\n          matInput\n          cdkTextareaAutosize>\n</textarea>\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}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,#cf00,#cf00 10px,#000 10px 20px) fixed bottom;color:#000}textarea{color:silver;background-color:transparent}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"] }]
-        }], 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
-            }] } });
+            args: [{ selector: "bonc-translation-textarea", imports: [FormsModule, CdkTextareaAutosize], template: "<textarea [(ngModel)]=\"text()[locale()]\"\n          [cdkAutosizeMinRows]=\"minRows()\"\n          [cdkAutosizeMaxRows]=\"maxRows()\"\n          (click)=\"onClick()\"\n          (keyup)=\"onKeyPress()\"\n          (blur)=\"onBlur()\"\n          matInput\n          cdkTextareaAutosize>\n</textarea>\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}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,#cf00,#cf00 10px,#000 10px 20px) fixed bottom;color:#000}textarea{color:silver;background-color:transparent}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autosizeList: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CdkTextareaAutosize), { isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], startEditing: [{ type: i0.Output, args: ["startEditing"] }], changed: [{ type: i0.Output, args: ["changed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 class LinkPopupComponent {
     TextEditorField = TextEditorField;
-    linkChange = new EventEmitter();
-    startEditing = new EventEmitter();
-    changed = new EventEmitter();
-    blurred = new EventEmitter();
-    open = new EventEmitter();
-    closed = new EventEmitter();
-    field;
     LinkPopupField = TextEditorField;
-    maxRows;
-    minRows;
-    linkTitle; // todo: allready in weblink
-    locale;
-    link;
+    linkChange = output();
+    startEditing = output();
+    changed = output();
+    blurred = output();
+    open = output();
+    closed = output();
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    maxRows = input(...(ngDevMode ? [undefined, { debugName: "maxRows" }] : []));
+    minRows = input(...(ngDevMode ? [undefined, { debugName: "minRows" }] : []));
+    linkTitle = input.required(...(ngDevMode ? [{ debugName: "linkTitle" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
     popupIsShown = false;
     onClick() {
         this.startEditing.emit();
     }
     onChange() {
-        console.log('change link pop up');
         this.changed.emit();
     }
     onBlur() {
@@ -537,121 +560,66 @@ class LinkPopupComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinkPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LinkPopupComponent, isStandalone: true, 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\"\n                        (click)=\"showPopup()\"\n                        [text]=\"linkTitle\"\n                        [locale]=\"locale\"\n                        (startEditing)=\"onClick()\"\n                        (changed)=\"onChange()\"\n                        (blurred)=\"onBlur()\">\n</bonc-translation-input>\n\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\n                           (click)=\"showPopup()\"\n                           [text]=\"linkTitle\"\n                           [locale]=\"locale\"\n                           [minRows]=\"minRows\"\n                           [maxRows]=\"maxRows\"\n                           (startEditing)=\"onClick()\"\n                           (changed)=\"onChange()\"\n                           (blurred)=\"onBlur()\">\n</bonc-translation-textarea>\n\n<div *ngIf=\"popupIsShown\">\n  <div class=\"popup\">\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\n\n    <label>Link\n      <input [(ngModel)]=\"link[locale]\"\n             (click)=\"onClick()\"\n             (keyup)=\"onChange()\"\n             (blur)=\"onBlur()\">\n    </label>\n\n  </div>\n</div>\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;cursor:pointer;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button{color:#000;cursor:pointer}button:hover{background-color:#cf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LinkPopupComponent, isStandalone: true, selector: "bonc-link-popup", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, linkTitle: { classPropertyName: "linkTitle", publicName: "linkTitle", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { linkChange: "linkChange", startEditing: "startEditing", changed: "changed", blurred: "blurred", open: "open", closed: "closed" }, ngImport: i0, template: "@switch (field()) {\n  @case (TextEditorField.Input) {\n    <bonc-translation-input (click)=\"showPopup()\"\n                            [text]=\"linkTitle()\"\n                            [locale]=\"locale()\"\n                            (startEditing)=\"onClick()\"\n                            (changed)=\"onChange()\"\n                            (blurred)=\"onBlur()\">\n    </bonc-translation-input>\n  }\n  @case (TextEditorField.Textarea) {\n    <bonc-translation-textarea (click)=\"showPopup()\"\n                               [text]=\"linkTitle()\"\n                               [locale]=\"locale()\"\n                               [minRows]=\"minRows()\"\n                               [maxRows]=\"maxRows()\"\n                               (startEditing)=\"onClick()\"\n                               (changed)=\"onChange()\"\n                               (blurred)=\"onBlur()\">\n    </bonc-translation-textarea>\n  }\n}\n\n@if (popupIsShown) {\n  <div>\n    <div class=\"popup\">\n      <a (click)=\"hidePopup()\" class=\"close\">close</a>\n\n      <label>Link\n        <input [(ngModel)]=\"link()[locale()]\"\n               (click)=\"onClick()\"\n               (keyup)=\"onChange()\"\n               (blur)=\"onBlur()\">\n      </label>\n\n    </div>\n  </div>\n}\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;cursor:pointer;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button{color:#000;cursor:pointer}button:hover{background-color:#cf0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: ["text", "locale", "minRows", "maxRows", "device"], outputs: ["startEditing", "changed", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinkPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-link-popup', standalone: true, imports: [CommonModule, FormsModule, TranslationInputComponent, TranslationTextareaComponent], template: "<bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\n                        (click)=\"showPopup()\"\n                        [text]=\"linkTitle\"\n                        [locale]=\"locale\"\n                        (startEditing)=\"onClick()\"\n                        (changed)=\"onChange()\"\n                        (blurred)=\"onBlur()\">\n</bonc-translation-input>\n\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\n                           (click)=\"showPopup()\"\n                           [text]=\"linkTitle\"\n                           [locale]=\"locale\"\n                           [minRows]=\"minRows\"\n                           [maxRows]=\"maxRows\"\n                           (startEditing)=\"onClick()\"\n                           (changed)=\"onChange()\"\n                           (blurred)=\"onBlur()\">\n</bonc-translation-textarea>\n\n<div *ngIf=\"popupIsShown\">\n  <div class=\"popup\">\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\n\n    <label>Link\n      <input [(ngModel)]=\"link[locale]\"\n             (click)=\"onClick()\"\n             (keyup)=\"onChange()\"\n             (blur)=\"onBlur()\">\n    </label>\n\n  </div>\n</div>\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;cursor:pointer;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button{color:#000;cursor:pointer}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 FormControlsComponent {
-    editable;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FormControlsComponent, isStandalone: true, selector: "bonc-form-controls", inputs: { editable: "editable" }, ngImport: i0, template: "<div [class.edit]=\"editable.inEditMode\" class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\n    <ng-container *ngIf=\"editable.isDirty\">\n        <a (click)=\"editable.cancel()\">reset</a>\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\n    </ng-container>\n</div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-form-controls', standalone: true, imports: [CommonModule], template: "<div [class.edit]=\"editable.inEditMode\" class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\n    <ng-container *ngIf=\"editable.isDirty\">\n        <a (click)=\"editable.cancel()\">reset</a>\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\n    </ng-container>\n</div>\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 }]
-            }] } });
+            args: [{ selector: "bonc-link-popup", imports: [FormsModule, TranslationInputComponent, TranslationTextareaComponent], template: "@switch (field()) {\n  @case (TextEditorField.Input) {\n    <bonc-translation-input (click)=\"showPopup()\"\n                            [text]=\"linkTitle()\"\n                            [locale]=\"locale()\"\n                            (startEditing)=\"onClick()\"\n                            (changed)=\"onChange()\"\n                            (blurred)=\"onBlur()\">\n    </bonc-translation-input>\n  }\n  @case (TextEditorField.Textarea) {\n    <bonc-translation-textarea (click)=\"showPopup()\"\n                               [text]=\"linkTitle()\"\n                               [locale]=\"locale()\"\n                               [minRows]=\"minRows()\"\n                               [maxRows]=\"maxRows()\"\n                               (startEditing)=\"onClick()\"\n                               (changed)=\"onChange()\"\n                               (blurred)=\"onBlur()\">\n    </bonc-translation-textarea>\n  }\n}\n\n@if (popupIsShown) {\n  <div>\n    <div class=\"popup\">\n      <a (click)=\"hidePopup()\" class=\"close\">close</a>\n\n      <label>Link\n        <input [(ngModel)]=\"link()[locale()]\"\n               (click)=\"onClick()\"\n               (keyup)=\"onChange()\"\n               (blur)=\"onBlur()\">\n      </label>\n\n    </div>\n  </div>\n}\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;cursor:pointer;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button{color:#000;cursor:pointer}button:hover{background-color:#cf0}\n"] }]
+        }], propDecorators: { linkChange: [{ type: i0.Output, args: ["linkChange"] }], startEditing: [{ type: i0.Output, args: ["startEditing"] }], changed: [{ type: i0.Output, args: ["changed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], open: [{ type: i0.Output, args: ["open"] }], closed: [{ type: i0.Output, args: ["closed"] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], linkTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTitle", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }] } });
 
 class FileUploaderComponent {
-    fileInput;
-    srcChange = new EventEmitter();
-    uploadUrlMap;
-    progress = 0;
-    isUploading = false;
-    autoplay = true;
-    clipStyle;
-    fileTypeMask = undefined;
-    _uploadTypes = [];
-    _src;
+    fileInput = viewChild.required("fileInput");
+    srcChange = output();
+    uploadUrlMap = input.required(...(ngDevMode ? [{ debugName: "uploadUrlMap" }] : []));
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    uploadTypes = input([], ...(ngDevMode ? [{ debugName: "uploadTypes" }] : []));
+    fileTypeMask = computed(() => {
+        const types = this.uploadTypes();
+        return types.length === 0 ? undefined : types.join(",");
+    }, ...(ngDevMode ? [{ debugName: "fileTypeMask" }] : []));
+    progress = signal(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
+    clipStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "clipStyle" }] : []));
     sanitizer = inject(DomSanitizer);
     http = inject(HttpClient);
-    cd = inject(ChangeDetectorRef);
-    set src(newSrc) {
-        if (this._src === newSrc)
-            return;
-        this._src = newSrc;
-    }
-    get src() {
-        return this._src;
-    }
-    set uploadTypes(newUploadType) {
-        this._uploadTypes.splice(0, this._uploadTypes.length);
-        this._uploadTypes.push(...newUploadType);
-        this.fileTypeMask = this._uploadTypes.length === 0 ? undefined : this._uploadTypes.join(',');
-        this.cd.detectChanges();
-    }
-    get uploadTypes() {
-        return this._uploadTypes;
-    }
     onFileSelect(fileInput) {
         if (fileInput.files === undefined || fileInput.files === null || fileInput.files.length !== 1)
             return;
         const file = fileInput.files[0];
-        const uploadUrl = this.uploadUrlMap.get(file.type) ?? this.uploadUrlMap.get("");
+        const uploadUrl = this.uploadUrlMap().get(file.type) ?? this.uploadUrlMap().get("");
         if (uploadUrl === undefined || uploadUrl === null) {
             console.error(`upload map doesn't have url for type '${file.type}'`);
             return;
         }
         const formData = new FormData();
-        formData.append('file', file);
-        this.progress = 0;
-        this.isUploading = true;
+        formData.append("file", file);
+        this.progress.set(0);
+        this.isUploading.set(true);
         this.updateClip();
-        const request = new HttpRequest('POST', uploadUrl, formData, {
-            reportProgress: true
+        const request = new HttpRequest("POST", uploadUrl, formData, {
+            reportProgress: true,
         });
         this.http
             .request(request)
-            .pipe(map(event => this.getEventMessage(event)), 
+            .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; });
+        catchError(this.handleError(file)))
+            .subscribe(() => {
+            this.isUploading.set(false);
+        });
     }
     selectFile(event) {
-        // ignore buble click on file picker
-        if (event.target === this.fileInput.nativeElement)
+        if (event.target === this.fileInput().nativeElement)
             return;
-        this.fileInput.nativeElement.click();
+        this.fileInput().nativeElement.click();
     }
     getEventMessage(event) {
         switch (event.type) {
             case HttpEventType.Sent:
                 break;
             case HttpEventType.UploadProgress:
-                this.progress = event.total === undefined ? 0.5 : event.loaded / event.total;
+                this.progress.set(event.total === undefined ? 0.5 : event.loaded / event.total);
                 this.updateClip();
                 break;
             case HttpEventType.Response:
@@ -664,10 +632,9 @@ class FileUploaderComponent {
             default:
                 break;
         }
-        this.cd.detectChanges();
     }
     updateClip() {
-        this.clipStyle = this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`);
+        this.clipStyle.set(this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`));
     }
     handleError(file) {
         const func = (error, p2) => {
@@ -679,85 +646,62 @@ class FileUploaderComponent {
         return func;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FileUploaderComponent, isStandalone: true, selector: "bonc-file-uploader", inputs: { uploadUrlMap: "uploadUrlMap", src: "src", uploadTypes: "uploadTypes" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"src === undefined || src.url === undefined || src?.url?.length === 0\">Upload file</div>\n\n<ng-content></ng-content>\n\n<div (click)=\"selectFile($event)\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  <span *ngIf=\"isUploading\"\n        [style.clip-path]=\"clipStyle\"\n        [style.-webkit-clip-path]=\"clipStyle\"\n        class=\"loader\"></span>\n\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\n    <span *ngIf=\"progress >= 1\">converting</span>\n  </span>\n</div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FileUploaderComponent, isStandalone: true, selector: "bonc-file-uploader", inputs: { uploadUrlMap: { classPropertyName: "uploadUrlMap", publicName: "uploadUrlMap", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadTypes: { classPropertyName: "uploadTypes", publicName: "uploadTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (src() === undefined || src()?.url === undefined || src()?.url?.length === 0) {\n  <div>Upload file</div>\n}\n\n<ng-content></ng-content>\n\n<div (click)=\"selectFile($event)\" (keydown.enter)=\"selectFile($event)\" role=\"button\" tabindex=\"0\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask()\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  @if (isUploading()) {\n    <span [style.clip-path]=\"clipStyle()\"\n          [style.-webkit-clip-path]=\"clipStyle()\"\n          class=\"loader\"></span>\n    <span class=\"loader-text\">\n      @if (progress() < 1) {\n        <span>{{100 * progress() | number: '1.0-0'}}%</span>\n      } @else {\n        <span>converting</span>\n      }\n    </span>\n  }\n</div>\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: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-file-uploader', standalone: true, imports: [CommonModule, DecimalPipe], template: "<div *ngIf=\"src === undefined || src.url === undefined || src?.url?.length === 0\">Upload file</div>\n\n<ng-content></ng-content>\n\n<div (click)=\"selectFile($event)\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  <span *ngIf=\"isUploading\"\n        [style.clip-path]=\"clipStyle\"\n        [style.-webkit-clip-path]=\"clipStyle\"\n        class=\"loader\"></span>\n\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\n    <span *ngIf=\"progress >= 1\">converting</span>\n  </span>\n</div>\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"] }]
-        }], propDecorators: { fileInput: [{
-                type: ViewChild,
-                args: ['fileInput', { static: true }]
-            }], srcChange: [{
-                type: Output
-            }], uploadUrlMap: [{
-                type: Input,
-                args: [{ required: true }]
-            }], src: [{
-                type: Input
-            }], uploadTypes: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-file-uploader", imports: [DecimalPipe], template: "@if (src() === undefined || src()?.url === undefined || src()?.url?.length === 0) {\n  <div>Upload file</div>\n}\n\n<ng-content></ng-content>\n\n<div (click)=\"selectFile($event)\" (keydown.enter)=\"selectFile($event)\" role=\"button\" tabindex=\"0\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask()\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  @if (isUploading()) {\n    <span [style.clip-path]=\"clipStyle()\"\n          [style.-webkit-clip-path]=\"clipStyle()\"\n          class=\"loader\"></span>\n    <span class=\"loader-text\">\n      @if (progress() < 1) {\n        <span>{{100 * progress() | number: '1.0-0'}}%</span>\n      } @else {\n        <span>converting</span>\n      }\n    </span>\n  }\n</div>\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"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ["fileInput", { isSignal: true }] }], srcChange: [{ type: i0.Output, args: ["srcChange"] }], uploadUrlMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrlMap", required: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTypes", required: false }] }] } });
 
-const uploadMap = new Map();
-uploadMap.set('', `/api/admin/upload/image?width=${1200}&height=${630}&format=image/jpeg`);
-class SeoFormComponent extends FormBaseComponent {
-    uploadMap = uploadMap;
-    _pageId = '';
-    ogImageUploadUrl = '';
-    label = '';
-    ngOnInit() {
+class FormControlsComponent {
+    editable = input.required(...(ngDevMode ? [{ debugName: "editable" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FormControlsComponent, isStandalone: true, selector: "bonc-form-controls", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class.edit]=\"editable().inEditMode()\" class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div [class.hidden]=\"!editable().inEditMode()\" class=\"controls\">\n  @if (!editable().isDirty()) {\n    <a (click)=\"editable().cancel()\" class=\"close\">close</a>\n  } @else {\n    <a (click)=\"editable().cancel()\">reset</a>\n    <a (click)=\"editable().requestSave()\" class=\"apply\">apply</a>\n  }\n</div>\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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "bonc-form-controls", template: "<div [class.edit]=\"editable().inEditMode()\" class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div [class.hidden]=\"!editable().inEditMode()\" class=\"controls\">\n  @if (!editable().isDirty()) {\n    <a (click)=\"editable().cancel()\" class=\"close\">close</a>\n  } @else {\n    <a (click)=\"editable().cancel()\">reset</a>\n    <a (click)=\"editable().requestSave()\" class=\"apply\">apply</a>\n  }\n</div>\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: i0.Input, args: [{ isSignal: true, alias: "editable", required: true }] }] } });
+
+class FileFormComponent extends FormBaseComponent {
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    uploadTypes = input.required(...(ngDevMode ? [{ debugName: "uploadTypes" }] : []));
+    uploadMap = input.required(...(ngDevMode ? [{ debugName: "uploadMap" }] : []));
+    constructor() {
+        super();
         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;
-    }
-    replaceImage($event) {
+    onFileUploaded(fileSrc) {
         this.editable.startEditing();
-        if (this.editable.value !== undefined) {
-            this.editable.value.image[this.locale] = $event;
-        }
+        const svgSrc = fileSrc;
+        this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SeoFormComponent, isStandalone: true, 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\">\n  <h2 *ngIf=\"label\">{{label}}</h2>\n\n  <div class=\"form-group\">\n    <label>Title</label>\n    <bonc-translation-input [text]=\"editable.value.title\"\n                            [locale]=\"locale\"\n                            (startEditing)=\"editable.startEditing()\"\n                            (changed)=\"editable.updateDirty()\"\n                            (blurred)=\"editable.updateDirty()\">\n    </bonc-translation-input>\n  </div>\n\n  <div class=\"form-group\">\n    <label>Description</label>\n    <bonc-translation-textarea [text]=\"editable.value.description\"\n                               [locale]=\"locale\"\n                               (startEditing)=\"editable.startEditing()\"\n                               (changed)=\"editable.updateDirty()\"\n                               (blurred)=\"editable.updateDirty()\">\n    </bonc-translation-textarea>\n  </div>\n\n  <div class=\"form-group\">\n    <label>Share image | 1200x630</label>\n\n    <bonc-file-uploader [src]=\"editable.value.image[locale]\"\n                        [uploadTypes]=\"['image/png', 'image/jpeg']\"\n                        [uploadUrlMap]=\"uploadMap\"\n                        (srcChange)=\"replaceImage($event)\">\n      <img *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [src]=\"editable.value.image[locale].url\" />\n    </bonc-file-uploader>\n\n    <a *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [href]=\"editable.value.image[locale].url\" download target=\"_blank\">Download</a>\n  </div>\n\n</bonc-form-controls>\n\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { 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: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FileFormComponent, isStandalone: true, selector: "bonc-file-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, uploadTypes: { classPropertyName: "uploadTypes", publicName: "uploadTypes", isSignal: true, isRequired: true, transformFunction: null }, uploadMap: { classPropertyName: "uploadMap", publicName: "uploadMap", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"uploadTypes()\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @let url = editable.value?.url;\n    @if (url) {\n      <div>{{ url }}</div>\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block}a{color:silver}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SeoFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-seo-form', standalone: true, imports: [CommonModule, FormControlsComponent, TranslationInputComponent, TranslationTextareaComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\n  <h2 *ngIf=\"label\">{{label}}</h2>\n\n  <div class=\"form-group\">\n    <label>Title</label>\n    <bonc-translation-input [text]=\"editable.value.title\"\n                            [locale]=\"locale\"\n                            (startEditing)=\"editable.startEditing()\"\n                            (changed)=\"editable.updateDirty()\"\n                            (blurred)=\"editable.updateDirty()\">\n    </bonc-translation-input>\n  </div>\n\n  <div class=\"form-group\">\n    <label>Description</label>\n    <bonc-translation-textarea [text]=\"editable.value.description\"\n                               [locale]=\"locale\"\n                               (startEditing)=\"editable.startEditing()\"\n                               (changed)=\"editable.updateDirty()\"\n                               (blurred)=\"editable.updateDirty()\">\n    </bonc-translation-textarea>\n  </div>\n\n  <div class=\"form-group\">\n    <label>Share image | 1200x630</label>\n\n    <bonc-file-uploader [src]=\"editable.value.image[locale]\"\n                        [uploadTypes]=\"['image/png', 'image/jpeg']\"\n                        [uploadUrlMap]=\"uploadMap\"\n                        (srcChange)=\"replaceImage($event)\">\n      <img *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [src]=\"editable.value.image[locale].url\" />\n    </bonc-file-uploader>\n\n    <a *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [href]=\"editable.value.image[locale].url\" download target=\"_blank\">Download</a>\n  </div>\n\n</bonc-form-controls>\n\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], pageId: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-file-form", imports: [FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"uploadTypes()\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @let url = editable.value?.url;\n    @if (url) {\n      <div>{{ url }}</div>\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block}a{color:silver}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], uploadTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTypes", required: true }] }], uploadMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMap", required: true }] }] } });
 
-class SvgFormComponent extends FormBaseComponent {
-    cd = inject(ChangeDetectorRef);
-    SvgMime = 'image/svg+xml';
-    label = '';
-    uploadMap = new Map();
-    _uploadUrl = '/api/admin/upload/image/svg';
+class LottieFormComponent extends FormBaseComponent {
+    LottieMimeType = "application/json";
+    // todo: convert to signal
+    animOptions;
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    uploadMap = input.required(...(ngDevMode ? [{ debugName: "uploadMap" }] : []));
     constructor() {
         super();
-        this.uploadMap.set(this.SvgMime, this._uploadUrl);
-    }
-    ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
-    }
-    set uploadUrl(newValue) {
-        this._uploadUrl = newValue;
-        this.uploadMap.set(this.SvgMime, this._uploadUrl);
-        this.cd.detectChanges();
+        this.editable.valueChange.subscribe((x) => {
+            const url = x?.url ?? "";
+            this.animOptions = url.length === 0 ? undefined : { path: url };
+        });
     }
     onFileUploaded(fileSrc) {
         this.editable.startEditing();
@@ -765,51 +709,31 @@ class SvgFormComponent extends FormBaseComponent {
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SvgFormComponent, isStandalone: true, selector: "bonc-svg-form", inputs: { label: "label", uploadUrl: "uploadUrl" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[SvgMime]\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LottieFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LottieFormComponent, isStandalone: true, selector: "bonc-lottie-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, uploadMap: { classPropertyName: "uploadMap", publicName: "uploadMap", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"[LottieMimeType]\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @if (animOptions) {\n      <ng-lottie [options]=\"animOptions\"></ng-lottie>\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block;max-width:600px}a{color:silver}ng-lottie{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }, { kind: "component", type: LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LottieFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-svg-form', standalone: true, imports: [CommonModule, FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[SvgMime]\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], uploadUrl: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-lottie-form", imports: [FormControlsComponent, FileUploaderComponent, LottieComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"[LottieMimeType]\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @if (animOptions) {\n      <ng-lottie [options]=\"animOptions\"></ng-lottie>\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block;max-width:600px}a{color:silver}ng-lottie{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], uploadMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMap", required: true }] }] } });
 
-const DefaultImageMimeTypes = ['image/png', 'image/jpeg'];
+const DefaultImageMimeTypes = ["image/png", "image/jpeg"];
 class OneImageFormComponent extends FormBaseComponent {
-    cd = inject(ChangeDetectorRef);
-    uploadMap = new Map();
-    _mimeTypes = DefaultImageMimeTypes;
-    _uploadUrl = '/api/admin/upload/image';
-    _label = '';
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    uploadUrl = input("/api/admin/upload/image", ...(ngDevMode ? [{ debugName: "uploadUrl" }] : []));
+    mimeTypes = input(DefaultImageMimeTypes, ...(ngDevMode ? [{ debugName: "mimeTypes" }] : []));
+    uploadMap = computed(() => {
+        const m = new Map();
+        m.set("", this.uploadUrl());
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "uploadMap" }] : []));
+    destroyRef = inject(DestroyRef);
     constructor() {
         super();
-        this.uploadMap.set('', this._uploadUrl);
-    }
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
+        const sub = this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
-    }
-    set label(newValue) {
-        this._label = newValue;
-    }
-    get label() {
-        return this._label;
-    }
-    set uploadUrl(newValue) {
-        this._uploadUrl = newValue;
-        this.uploadMap.set('', this._uploadUrl);
-        this.cd.detectChanges();
-    }
-    set mimeTypes(newValue) {
-        this._mimeTypes = newValue.length === 0 ? DefaultImageMimeTypes : newValue;
-        this.cd.detectChanges();
-    }
-    get mimeTypes() {
-        return this._mimeTypes;
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
     onFileUploaded(fileSrc) {
         this.editable.startEditing();
@@ -818,50 +742,77 @@ class OneImageFormComponent extends FormBaseComponent {
         this.editable.updateDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OneImageFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: OneImageFormComponent, isStandalone: true, selector: "bonc-one-image-form", inputs: { label: "label", uploadUrl: "uploadUrl", mimeTypes: "mimeTypes" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"mimeTypes\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OneImageFormComponent, isStandalone: true, selector: "bonc-one-image-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, uploadUrl: { classPropertyName: "uploadUrl", publicName: "uploadUrl", isSignal: true, isRequired: false, transformFunction: null }, mimeTypes: { classPropertyName: "mimeTypes", publicName: "mimeTypes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"mimeTypes()\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @let url = editable.value?.url;\n    @if (url) {\n      <img [src]=\"url\" />\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OneImageFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-one-image-form', standalone: true, imports: [CommonModule, FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"mimeTypes\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], uploadUrl: [{
-                type: Input
-            }], mimeTypes: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-one-image-form", imports: [FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{ label() }}</label>\n  }\n  <bonc-file-uploader\n    [src]=\"editable.value\"\n    [uploadTypes]=\"mimeTypes()\"\n    [uploadUrlMap]=\"uploadMap()\"\n    (srcChange)=\"onFileUploaded($event)\"\n  >\n    @let url = editable.value?.url;\n    @if (url) {\n      <img [src]=\"url\" />\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], uploadUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrl", required: false }] }], mimeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "mimeTypes", required: false }] }] } });
 
-class FileFormComponent extends FormBaseComponent {
-    label = '';
-    ngOnInit() {
+const defaultUploadMap = new Map();
+defaultUploadMap.set("", `/api/admin/upload/image?width=${1200}&height=${630}&format=image/jpeg`);
+class SeoFormComponent extends FormBaseComponent {
+    uploadMap = defaultUploadMap;
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    pageId = input("", ...(ngDevMode ? [{ debugName: "pageId" }] : []));
+    ogImageUploadUrl = computed(() => `/api/admin/page/Og-Image?pageId=${this.pageId()}`, ...(ngDevMode ? [{ debugName: "ogImageUploadUrl" }] : []));
+    constructor() {
+        super();
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    ResToSrc(res) {
+        return res.url;
+    }
+    replaceImage($event) {
+        this.editable.startEditing();
+        if (this.editable.value !== undefined) {
+            this.editable.value.image[this.locale()] = $event;
+        }
+        this.editable.updateDirty();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SeoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SeoFormComponent, isStandalone: true, selector: "bonc-seo-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "@if (editable.value !== undefined && editable.value !== null) {\n  <bonc-form-controls [editable]=\"editable\">\n    @if (label()) {\n      <h2>{{label()}}</h2>\n    }\n\n    <div class=\"form-group\">\n      <label>Title</label>\n      <bonc-translation-input [text]=\"editable.value.title\"\n                              [locale]=\"locale()\"\n                              (startEditing)=\"editable.startEditing()\"\n                              (changed)=\"editable.updateDirty()\"\n                              (blurred)=\"editable.updateDirty()\">\n      </bonc-translation-input>\n    </div>\n\n    <div class=\"form-group\">\n      <label>Description</label>\n      <bonc-translation-textarea [text]=\"editable.value.description\"\n                                 [locale]=\"locale()\"\n                                 (startEditing)=\"editable.startEditing()\"\n                                 (changed)=\"editable.updateDirty()\"\n                                 (blurred)=\"editable.updateDirty()\">\n      </bonc-translation-textarea>\n    </div>\n\n    <div class=\"form-group\">\n      <label>Share image | 1200x630</label>\n\n      <bonc-file-uploader [src]=\"editable.value.image[locale()]\"\n                          [uploadTypes]=\"['image/png', 'image/jpeg']\"\n                          [uploadUrlMap]=\"uploadMap\"\n                          (srcChange)=\"replaceImage($event)\">\n        @let imageUrl = editable.value.image[locale()]?.url;\n        @if (imageUrl) {\n          <img [src]=\"imageUrl\" />\n        }\n      </bonc-file-uploader>\n\n      @let downloadUrl = editable.value.image[locale()]?.url;\n      @if (downloadUrl) {\n        <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n      }\n    </div>\n\n  </bonc-form-controls>\n} @else {\n  <div>Editable Value canot be null or undefined</div>\n}\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { 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: ["text", "locale", "minRows", "maxRows", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SeoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "bonc-seo-form", imports: [
+                        FormControlsComponent,
+                        TranslationInputComponent,
+                        TranslationTextareaComponent,
+                        FileUploaderComponent,
+                    ], hostDirectives: [EditableDirective], template: "@if (editable.value !== undefined && editable.value !== null) {\n  <bonc-form-controls [editable]=\"editable\">\n    @if (label()) {\n      <h2>{{label()}}</h2>\n    }\n\n    <div class=\"form-group\">\n      <label>Title</label>\n      <bonc-translation-input [text]=\"editable.value.title\"\n                              [locale]=\"locale()\"\n                              (startEditing)=\"editable.startEditing()\"\n                              (changed)=\"editable.updateDirty()\"\n                              (blurred)=\"editable.updateDirty()\">\n      </bonc-translation-input>\n    </div>\n\n    <div class=\"form-group\">\n      <label>Description</label>\n      <bonc-translation-textarea [text]=\"editable.value.description\"\n                                 [locale]=\"locale()\"\n                                 (startEditing)=\"editable.startEditing()\"\n                                 (changed)=\"editable.updateDirty()\"\n                                 (blurred)=\"editable.updateDirty()\">\n      </bonc-translation-textarea>\n    </div>\n\n    <div class=\"form-group\">\n      <label>Share image | 1200x630</label>\n\n      <bonc-file-uploader [src]=\"editable.value.image[locale()]\"\n                          [uploadTypes]=\"['image/png', 'image/jpeg']\"\n                          [uploadUrlMap]=\"uploadMap\"\n                          (srcChange)=\"replaceImage($event)\">\n        @let imageUrl = editable.value.image[locale()]?.url;\n        @if (imageUrl) {\n          <img [src]=\"imageUrl\" />\n        }\n      </bonc-file-uploader>\n\n      @let downloadUrl = editable.value.image[locale()]?.url;\n      @if (downloadUrl) {\n        <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n      }\n    </div>\n\n  </bonc-form-controls>\n} @else {\n  <div>Editable Value canot be null or undefined</div>\n}\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }] } });
+
+class SvgFormComponent extends FormBaseComponent {
+    SvgMime = "image/svg+xml";
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    uploadUrl = input("/api/admin/upload/image/svg", ...(ngDevMode ? [{ debugName: "uploadUrl" }] : []));
+    uploadMap = computed(() => {
+        const m = new Map();
+        m.set(this.SvgMime, this.uploadUrl());
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "uploadMap" }] : []));
+    constructor() {
+        super();
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    uploadTypes = [];
-    uploadMap = new Map();
-    ;
     onFileUploaded(fileSrc) {
         this.editable.startEditing();
         const svgSrc = fileSrc;
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FileFormComponent, isStandalone: true, selector: "bonc-file-form", inputs: { label: "label", uploadTypes: "uploadTypes", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"uploadTypes\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n</bonc-form-controls>\n", styles: [":host{display:block}a{color:silver}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SvgFormComponent, isStandalone: true, selector: "bonc-svg-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, uploadUrl: { classPropertyName: "uploadUrl", publicName: "uploadUrl", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[SvgMime]\"\n                      [uploadUrlMap]=\"uploadMap()\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    @let url = editable.value?.url;\n    @if (url) {\n      <img [src]=\"url\" alt=\"\" />\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-file-form', standalone: true, imports: [CommonModule, FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"uploadTypes\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n</bonc-form-controls>\n", styles: [":host{display:block}a{color:silver}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], uploadTypes: [{
-                type: Input,
-                args: [{ required: true }]
-            }], uploadMap: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+            args: [{ selector: "bonc-svg-form", imports: [FormControlsComponent, FileUploaderComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[SvgMime]\"\n                      [uploadUrlMap]=\"uploadMap()\"\n                      (srcChange)=\"onFileUploaded($event)\">\n    @let url = editable.value?.url;\n    @if (url) {\n      <img [src]=\"url\" alt=\"\" />\n    }\n  </bonc-file-uploader>\n\n  @let downloadUrl = editable.value?.url;\n  @if (downloadUrl) {\n    <a [href]=\"downloadUrl\" download target=\"_blank\">Download</a>\n  }\n\n</bonc-form-controls>\n", styles: [":host{display:block}img{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block;width:100%}a{color:silver}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], uploadUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrl", required: false }] }] } });
 
 var TextInputStyle;
 (function (TextInputStyle) {
@@ -872,336 +823,218 @@ var TextInputStyle;
 
 class TextFormComponent extends FormBaseComponent {
     TextInputStyle = TextInputStyle;
-    label = '';
-    type = TextInputStyle.SingleLine;
-    ngOnInit() {
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    type = input(TextInputStyle.SingleLine, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    constructor() {
+        super();
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TextFormComponent, isStandalone: true, selector: "bonc-text-form", inputs: { label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n    <label *ngIf=\"label\">{{label}}</label>\n\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\n           [(ngModel)]=\"editable.value\"\n           (click)=\"editable.startEditing()\"\n           (keyup)=\"editable.updateDirty()\"\n           (blur)=\"editable.updateDirty()\" />\n\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\n              [(ngModel)]=\"editable.value\"\n              (click)=\"editable.startEditing()\"\n              (keyup)=\"editable.updateDirty()\"\n              (blur)=\"editable.updateDirty()\">\n    </textarea>\n</bonc-form-controls>\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}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}input,textarea{font-size:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TextFormComponent, isStandalone: true, selector: "bonc-text-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  @if (editable) {\n    @switch (type()) {\n      @case (TextInputStyle.SingleLine) {\n          <input [(ngModel)]=\"editable.value\"\n                [attr.aria-label]=\"label()\"\n                (click)=\"editable.startEditing()\"\n                (keyup)=\"editable.updateDirty()\"\n                (blur)=\"editable.updateDirty()\" />\n      }\n      @case (TextInputStyle.MultiLine) {\n          <textarea [(ngModel)]=\"editable.value\"\n                    [attr.aria-label]=\"label()\"\n                    (click)=\"editable.startEditing()\"\n                    (keyup)=\"editable.updateDirty()\"\n                    (blur)=\"editable.updateDirty()\">\n          </textarea>\n      }\n    }\n  }\n</bonc-form-controls>\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}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}input,textarea{font-size:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "21.0.6", ngImport: i0, type: TextFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-text-form', standalone: true, imports: [CommonModule, FormsModule, FormControlsComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n    <label *ngIf=\"label\">{{label}}</label>\n\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\n           [(ngModel)]=\"editable.value\"\n           (click)=\"editable.startEditing()\"\n           (keyup)=\"editable.updateDirty()\"\n           (blur)=\"editable.updateDirty()\" />\n\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\n              [(ngModel)]=\"editable.value\"\n              (click)=\"editable.startEditing()\"\n              (keyup)=\"editable.updateDirty()\"\n              (blur)=\"editable.updateDirty()\">\n    </textarea>\n</bonc-form-controls>\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}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}input,textarea{font-size:inherit}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-class LottieFormComponent extends FormBaseComponent {
-    LottieMimeType = 'application/json';
-    animOptions;
-    label = '';
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
-            this.editable.save();
-        });
-        this.editable.valueChange.subscribe(x => {
-            const url = x?.url ?? '';
-            this.animOptions = url.length === 0 ? undefined : { path: url };
-        });
-    }
-    uploadMap = new Map();
-    ;
-    onFileUploaded(fileSrc) {
-        this.editable.startEditing();
-        const svgSrc = fileSrc;
-        this.editable.value = svgSrc;
-        this.editable.updateDirty();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LottieFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LottieFormComponent, isStandalone: true, selector: "bonc-lottie-form", inputs: { label: "label", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[LottieMimeType]\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n\n    <ng-lottie *ngIf=\"animOptions\"\n               [options]=\"animOptions\"></ng-lottie>\n\n\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n</bonc-form-controls>\n", styles: [":host{display:block;max-width:600px}a{color:silver}ng-lottie{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }, { kind: "component", type: LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LottieFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-lottie-form', standalone: true, imports: [CommonModule, FormControlsComponent, FileUploaderComponent, LottieComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n  <bonc-file-uploader [src]=\"editable.value\"\n                      [uploadTypes]=\"[LottieMimeType]\"\n                      [uploadUrlMap]=\"uploadMap\"\n                      (srcChange)=\"onFileUploaded($event)\">\n\n    <ng-lottie *ngIf=\"animOptions\"\n               [options]=\"animOptions\"></ng-lottie>\n\n\n  </bonc-file-uploader>\n\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\n</bonc-form-controls>\n", styles: [":host{display:block;max-width:600px}a{color:silver}ng-lottie{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:block}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], uploadMap: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+            args: [{ selector: "bonc-text-form", imports: [FormsModule, FormControlsComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  @if (editable) {\n    @switch (type()) {\n      @case (TextInputStyle.SingleLine) {\n          <input [(ngModel)]=\"editable.value\"\n                [attr.aria-label]=\"label()\"\n                (click)=\"editable.startEditing()\"\n                (keyup)=\"editable.updateDirty()\"\n                (blur)=\"editable.updateDirty()\" />\n      }\n      @case (TextInputStyle.MultiLine) {\n          <textarea [(ngModel)]=\"editable.value\"\n                    [attr.aria-label]=\"label()\"\n                    (click)=\"editable.startEditing()\"\n                    (keyup)=\"editable.updateDirty()\"\n                    (blur)=\"editable.updateDirty()\">\n          </textarea>\n      }\n    }\n  }\n</bonc-form-controls>\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}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}input,textarea{font-size:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 class TranslationFormComponent extends FormBaseComponent {
     TextEditorField = TextEditorField;
-    field;
-    label;
-    ngOnInit() {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    constructor() {
+        super();
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TranslationFormComponent, isStandalone: true, selector: "bonc-translation-form", inputs: { field: "field", label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\n                          [text]=\"editable.value\"\n                          [locale]=\"locale\"\n                          (startEditing)=\"editable.startEditing()\"\n                          (changed)=\"editable.updateDirty()\"\n                          (blurred)=\"editable.updateDirty()\">\n  </bonc-translation-input>\n\n\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\n                             [text]=\"editable.value\"\n                             [minRows]=\"2\"\n                             [locale]=\"locale\"\n                             (startEditing)=\"editable.startEditing()\"\n                             (changed)=\"editable.updateDirty()\"\n                             (blurred)=\"editable.updateDirty()\">\n  </bonc-translation-textarea>\n</bonc-form-controls>\n\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TranslationFormComponent, isStandalone: true, selector: "bonc-translation-form", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "@if (editable.value) {\n  <bonc-form-controls [editable]=\"editable\">\n    @if (label()) {\n      <label>{{label()}}</label>\n    }\n\n    @switch (field()) {\n      @case (TextEditorField.Input) {\n        <bonc-translation-input [text]=\"editable.value\"\n                                [locale]=\"locale()\"\n                                (startEditing)=\"editable.startEditing()\"\n                                (changed)=\"editable.updateDirty()\"\n                                (blurred)=\"editable.updateDirty()\">\n        </bonc-translation-input>\n      }\n      @case (TextEditorField.Textarea) {\n        <bonc-translation-textarea [text]=\"editable.value\"\n                                   [minRows]=\"2\"\n                                   [locale]=\"locale()\"\n                                   (startEditing)=\"editable.startEditing()\"\n                                   (changed)=\"editable.updateDirty()\"\n                                   (blurred)=\"editable.updateDirty()\">\n        </bonc-translation-textarea>\n      }\n    }\n  </bonc-form-controls>\n} @else {\n  <div>Editable value canot be undefined</div>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { 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: ["text", "locale", "minRows", "maxRows", "device"], outputs: ["startEditing", "changed", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-form', standalone: true, imports: [CommonModule, FormControlsComponent, TranslationInputComponent, TranslationTextareaComponent], hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\n  <label *ngIf=\"label\">{{label}}</label>\n\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\n                          [text]=\"editable.value\"\n                          [locale]=\"locale\"\n                          (startEditing)=\"editable.startEditing()\"\n                          (changed)=\"editable.updateDirty()\"\n                          (blurred)=\"editable.updateDirty()\">\n  </bonc-translation-input>\n\n\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\n                             [text]=\"editable.value\"\n                             [minRows]=\"2\"\n                             [locale]=\"locale\"\n                             (startEditing)=\"editable.startEditing()\"\n                             (changed)=\"editable.updateDirty()\"\n                             (blurred)=\"editable.updateDirty()\">\n  </bonc-translation-textarea>\n</bonc-form-controls>\n\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { field: [{
-                type: Input,
-                args: [{ required: true }]
-            }], label: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-translation-form", imports: [FormControlsComponent, TranslationInputComponent, TranslationTextareaComponent], hostDirectives: [EditableDirective], template: "@if (editable.value) {\n  <bonc-form-controls [editable]=\"editable\">\n    @if (label()) {\n      <label>{{label()}}</label>\n    }\n\n    @switch (field()) {\n      @case (TextEditorField.Input) {\n        <bonc-translation-input [text]=\"editable.value\"\n                                [locale]=\"locale()\"\n                                (startEditing)=\"editable.startEditing()\"\n                                (changed)=\"editable.updateDirty()\"\n                                (blurred)=\"editable.updateDirty()\">\n        </bonc-translation-input>\n      }\n      @case (TextEditorField.Textarea) {\n        <bonc-translation-textarea [text]=\"editable.value\"\n                                   [minRows]=\"2\"\n                                   [locale]=\"locale()\"\n                                   (startEditing)=\"editable.startEditing()\"\n                                   (changed)=\"editable.updateDirty()\"\n                                   (blurred)=\"editable.updateDirty()\">\n        </bonc-translation-textarea>\n      }\n    }\n  </bonc-form-controls>\n} @else {\n  <div>Editable value canot be undefined</div>\n}\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class UnknownFormComponent extends FormBaseComponent {
-    label = '';
-    ngOnInit() {
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    constructor() {
+        super();
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnknownFormComponent, isStandalone: true, selector: "bonc-unknown-form", inputs: { label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<label>Unknown form:<b>{{label}}</b></label>\n<pre><ng-content></ng-content></pre>\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: UnknownFormComponent, isStandalone: true, selector: "bonc-unknown-form", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<label>Unknown form:<b>{{label()}}</b></label>\n<pre><ng-content></ng-content></pre>\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-unknown-form', standalone: true, imports: [CommonModule], hostDirectives: [EditableDirective], template: "<label>Unknown form:<b>{{label}}</b></label>\n<pre><ng-content></ng-content></pre>\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bonc-unknown-form", hostDirectives: [EditableDirective], template: "<label>Unknown form:<b>{{label()}}</b></label>\n<pre><ng-content></ng-content></pre>\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
-const API_BASE_URL = new InjectionToken('ApiBaseUrl');
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
 
-class DataService {
-    http = inject(HttpClient);
-    baseHref = inject(API_BASE_URL);
-    getView(viewCode) {
-        const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
-        return pageOb;
-    }
-    getPage(pageRoute) {
-        const pageUrl = `/${pageRoute}`;
-        const pageOb = this.getSkeleton(`${this.baseHref}api/pages/?url=${encodeURIComponent(pageUrl)}`);
-        return pageOb;
-    }
-    getSettings(ids) {
-        const pageOb = this.http.get(`${this.baseHref}api/settings`, {
-            params: { ids: ids }
-        });
-        return pageOb;
-    }
-    getSkeleton(url) {
-        const skeletonOb = this.http.get(url);
-        const routeDataObs = skeletonOb
-            .pipe(map(x => {
-            const notEmptyDataRoutes = x.bones
-                .map(b => ('dataRoute' in b) && typeof (b.dataRoute) === 'string' ? b.dataRoute : '')
-                .filter(x => x.length > 0);
-            if (notEmptyDataRoutes.length === 0) {
-                const emptyData = {};
-                return { page: of(x), data: of(emptyData) };
-            }
-            return {
-                page: of(x),
-                data: combineLatest(notEmptyDataRoutes
-                    .map(dataRoute => {
-                    const url = `${this.baseHref}api/Pages/Children/?url=${dataRoute}`;
-                    return {
-                        route: dataRoute,
-                        json: this.http.get(url)
-                    };
-                })
-                    .reduce((prev, curr) => {
-                    prev[curr.route] = curr.json;
-                    return prev;
-                }, {}))
-            };
-        }), map(x => combineLatest(x)), mergeMap(res => merge(res)), map(x => {
-            for (const bone of x.page.bones) {
-                if (!('dataRoute' in bone) || typeof bone.dataRoute !== 'string' || bone.dataRoute.length === 0)
-                    continue;
-                const data = x.data[bone.dataRoute];
-                if (data === undefined || data === null)
-                    throw new Error(`Data ${bone.dataRoute} have not been preloaded`);
-                bone.data = data; // todo: fix
-            }
-            return x.page;
-        }));
-        return routeDataObs;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService, decorators: [{
-            type: Injectable
-        }] });
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
 
-class AdminDataService {
-    http = inject(HttpClient);
-    baseHref = inject(API_BASE_URL);
-    constructor() {
-        console.log('baseHref: ' + this.baseHref);
-    }
-    getSettingGroups() {
-        const pageOb = this.http.get(`${this.baseHref}api/admin/settings`);
-        return pageOb;
-    }
-    getPage(url) {
-        const pageOb = this.http.get(`${this.baseHref}api/admin/pages/${url}`);
-        return pageOb;
-    }
-    storePage(page) {
-        const ob = this.http.post(`${this.baseHref}api/admin/pages`, page);
-        return ob;
-    }
-    updateSettings(settings) {
-        const ob = this.http.post(`${this.baseHref}api/admin/settings`, settings);
-        return ob;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
 
-class AdminControlsComponent {
-    DeviceType = DeviceType;
-    editableGroup;
-    deviceControls = false;
-    locale = 'en';
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AdminControlsComponent, isStandalone: true, selector: "bonc-admin-controls", inputs: { editableGroup: "editableGroup", deviceControls: "deviceControls" }, ngImport: i0, template: "<div class=\"page-controls\">\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\n\n  <!-- todo: return this functionality -->\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\n  </a> -->\n\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\n     (click)=\"editableGroup.saveAll()\"\n     class=\"save\">Save all</a>\n\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\n     (click)=\"editableGroup.cancelAll()\"\n     class=\"cancel\">Cancel all</a>\n</div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-admin-controls', standalone: true, imports: [CommonModule], template: "<div class=\"page-controls\">\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\n\n  <!-- todo: return this functionality -->\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\n  </a> -->\n\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\n     (click)=\"editableGroup.saveAll()\"\n     class=\"save\">Save all</a>\n\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\n     (click)=\"editableGroup.cancelAll()\"\n     class=\"cancel\">Cancel all</a>\n</div>\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
-            }] } });
+/**
+ * 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.
+ */
 
-const imageMimeTypes = ['image/png', 'image/jpeg'];
-const videoMimeTypes = ['video/mp4'];
-const imageFileTypes = imageMimeTypes.join(',');
-const videoFileTypes = videoMimeTypes.join(',');
+/**
+ * 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.
+ */
+
+const imageMimeTypes = ["image/png", "image/jpeg"];
+const videoMimeTypes = ["video/mp4"];
+const imageFileTypes = imageMimeTypes.join(",");
+const videoFileTypes = videoMimeTypes.join(",");
 const allMediaFileTypes = `${imageFileTypes},${videoFileTypes}`;
 class MediaUploaderComponent {
     MediaObjectFit = MediaObjectFit;
-    fileInput;
-    srcChange = new EventEmitter();
-    uploadUrlMap;
-    forceRatio;
-    progress = 0;
-    isUploading = false;
-    autoplay = true;
-    clipStyle;
-    fileTypeMask = allMediaFileTypes;
-    _uploadType;
-    _src;
-    sanitizer = inject(DomSanitizer);
-    http = inject(HttpClient);
-    cd = inject(ChangeDetectorRef);
-    set src(newSrc) {
-        if (this._src === newSrc)
-            return;
-        this._src = newSrc;
-    }
-    get src() {
-        return this._src;
-    }
-    set uploadType(newUploadType) {
-        switch (newUploadType) {
+    fileInput = viewChild.required("fileInput");
+    srcChange = output();
+    uploadUrlMap = input.required(...(ngDevMode ? [{ debugName: "uploadUrlMap" }] : []));
+    forceRatio = input(...(ngDevMode ? [undefined, { debugName: "forceRatio" }] : []));
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    uploadType = input(...(ngDevMode ? [undefined, { debugName: "uploadType" }] : []));
+    fileTypeMask = computed(() => {
+        switch (this.uploadType()) {
             case "image":
-                this._uploadType = newUploadType;
-                this.fileTypeMask = imageFileTypes;
-                break;
+                return imageFileTypes;
             case "video":
-                this._uploadType = newUploadType;
-                this.fileTypeMask = videoFileTypes;
-                break;
-            case undefined:
+                return videoFileTypes;
             default:
-                this._uploadType = newUploadType;
-                this.fileTypeMask = allMediaFileTypes;
-                break;
+                return allMediaFileTypes;
         }
-    }
-    get uploadType() {
-        return this._uploadType;
-    }
+    }, ...(ngDevMode ? [{ debugName: "fileTypeMask" }] : []));
+    progress = signal(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
+    clipStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "clipStyle" }] : []));
+    sanitizer = inject(DomSanitizer);
+    http = inject(HttpClient);
     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;
+        const uploadType = this.uploadType();
+        if (uploadType !== undefined && uploadType !== null) {
+            uploadingMediaType = uploadType;
         }
         else if (imageMimeTypes.includes(file.type)) {
-            uploadingMediaType = 'image';
+            uploadingMediaType = "image";
         }
         else if (videoMimeTypes.includes(file.type)) {
-            uploadingMediaType = 'video';
+            uploadingMediaType = "video";
         }
         else {
             console.error(`unknown media type ${file.type} (${file.name})`);
             return;
         }
-        const uploadUrl = this.uploadUrlMap.get(uploadingMediaType);
+        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;
+        formData.append("file", file);
+        formData.append("ratio", `${this.forceRatio() ?? 0}`);
+        this.progress.set(0);
+        this.isUploading.set(true);
         this.updateClip();
-        const request = new HttpRequest('POST', uploadUrl, formData, {
-            reportProgress: true
+        const request = new HttpRequest("POST", uploadUrl, formData, {
+            reportProgress: true,
         });
         this.http
             .request(request)
-            .pipe(map(event => this.getEventMessage(event)), 
+            .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; });
+        catchError(this.handleError(file)))
+            .subscribe(() => {
+            this.isUploading.set(false);
+        });
     }
     selectFile(event) {
-        // ignore buble click on file picker
-        if (event.target === this.fileInput.nativeElement)
+        if (event.target === this.fileInput().nativeElement)
             return;
-        this.fileInput.nativeElement.click();
+        this.fileInput().nativeElement.click();
     }
     getEventMessage(event) {
         switch (event.type) {
             case HttpEventType.Sent:
                 break;
             case HttpEventType.UploadProgress:
-                this.progress = event.total === undefined ? 0.5 : event.loaded / event.total;
+                this.progress.set(event.total === undefined ? 0.5 : event.loaded / event.total);
                 this.updateClip();
                 break;
             case HttpEventType.Response:
                 if (event.body === undefined || event.body === null) {
-                    console.error('media deserialization error. Response body in undefined');
+                    console.error("media deserialization error. Response body in undefined");
                 }
                 else {
                     // remove this
@@ -1216,10 +1049,9 @@ class MediaUploaderComponent {
             default:
                 break;
         }
-        this.cd.detectChanges();
     }
     updateClip() {
-        this.clipStyle = this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`);
+        this.clipStyle.set(this.sanitizer.bypassSecurityTrustStyle(`inset(0px 100% 0px 0%)`));
     }
     handleError(file) {
         const func = (error, p2) => {
@@ -1231,256 +1063,180 @@ class MediaUploaderComponent {
         return func;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MediaUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MediaUploaderComponent, isStandalone: true, 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>\n\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\n\n<div (click)=\"selectFile($event)\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  <span *ngIf=\"isUploading\"\n        [style.clip-path]=\"clipStyle\"\n        [style.-webkit-clip-path]=\"clipStyle\"\n        class=\"loader\"></span>\n\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\n    <span *ngIf=\"progress >= 1\">converting</span>\n  </span>\n</div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MediaUploaderComponent, isStandalone: true, selector: "bonc-media-uploader", inputs: { uploadUrlMap: { classPropertyName: "uploadUrlMap", publicName: "uploadUrlMap", isSignal: true, isRequired: true, transformFunction: null }, forceRatio: { classPropertyName: "forceRatio", publicName: "forceRatio", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadType: { classPropertyName: "uploadType", publicName: "uploadType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<bon-media [src]=\"src()\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\n\n@if (src()?.sources?.length===0) {\n  <div>Upload media</div>\n}\n\n<div (click)=\"selectFile($event)\" (keydown.enter)=\"selectFile($event)\" role=\"button\" tabindex=\"0\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask()\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  @if (isUploading()) {\n    <span [style.clip-path]=\"clipStyle()\"\n          [style.-webkit-clip-path]=\"clipStyle()\"\n          class=\"loader\"></span>\n    <span class=\"loader-text\">\n      @if (progress() < 1) {\n        <span>{{100 * progress() | number: '1.0-0'}}%</span>\n      } @else {\n        <span>converting</span>\n      }\n    </span>\n  }\n</div>\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: "component", type: MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MediaUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-media-uploader', standalone: true, imports: [CommonModule, DecimalPipe, MarcyMediaComponent], template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\n\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\n\n<div (click)=\"selectFile($event)\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  <span *ngIf=\"isUploading\"\n        [style.clip-path]=\"clipStyle\"\n        [style.-webkit-clip-path]=\"clipStyle\"\n        class=\"loader\"></span>\n\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\n    <span *ngIf=\"progress >= 1\">converting</span>\n  </span>\n</div>\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"] }]
-        }], 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
-            }] } });
+            args: [{ selector: "bonc-media-uploader", imports: [DecimalPipe, MarcyMediaComponent], template: "<bon-media [src]=\"src()\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\n\n@if (src()?.sources?.length===0) {\n  <div>Upload media</div>\n}\n\n<div (click)=\"selectFile($event)\" (keydown.enter)=\"selectFile($event)\" role=\"button\" tabindex=\"0\" class=\"media-container\">\n  <input #fileInput [accept]=\"fileTypeMask()\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\n  @if (isUploading()) {\n    <span [style.clip-path]=\"clipStyle()\"\n          [style.-webkit-clip-path]=\"clipStyle()\"\n          class=\"loader\"></span>\n    <span class=\"loader-text\">\n      @if (progress() < 1) {\n        <span>{{100 * progress() | number: '1.0-0'}}%</span>\n      } @else {\n        <span>converting</span>\n      }\n    </span>\n  }\n</div>\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"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ["fileInput", { isSignal: true }] }], srcChange: [{ type: i0.Output, args: ["srcChange"] }], uploadUrlMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrlMap", required: true }] }], forceRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceRatio", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadType: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadType", required: false }] }] } });
 
-class SkeletonEditorAnchorDirective {
-    viewContainerRef = inject(ViewContainerRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SkeletonEditorAnchorDirective, isStandalone: true, selector: "[boncSkeletonEditorAnchor]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorAnchorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[boncSkeletonEditorAnchor]',
-                    standalone: true
-                }]
-        }] });
+const API_BASE_URL = new InjectionToken("ApiBaseUrl");
 
-class BoneEditorBaseComponent {
-    editing = new EventEmitter();
-    saved = new EventEmitter();
-    removed = new EventEmitter();
-    noPresets;
-    locale;
-    device = DeviceType.NotSet;
-    _bone;
-    _storedData = '';
-    _currentPreset;
-    presets;
-    _isDirty = false;
-    _isEditing = false;
+class AdminDataService {
+    _http = inject(HttpClient);
+    _baseHref = inject(API_BASE_URL);
     constructor() {
-        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;
+        console.log(`baseHref: ${this._baseHref}`);
     }
-    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;
+    getSettingGroups() {
+        const pageOb = this._http.get(`${this._baseHref}api/admin/settings`);
+        return pageOb;
     }
-    markAsDirty() {
-        this._isDirty = true;
+    getPage(url) {
+        const pageOb = this._http.get(`${this._baseHref}api/admin/pages/${url}`);
+        return pageOb;
     }
-    remove() {
-        this.removed.next();
+    storePage(page) {
+        const ob = this._http.post(`${this._baseHref}api/admin/pages`, page);
+        return ob;
     }
-    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);
+    updateSettings(settings) {
+        const ob = this._http.post(`${this._baseHref}api/admin/settings`, settings);
+        return ob;
     }
-    startEditing() {
-        if (this._isEditing) {
-            this.updateDirty();
-            return;
-        }
-        this._isEditing = true;
-        this.updateDirty();
-        this.editing.emit(true);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DataService {
+    http = inject(HttpClient);
+    baseHref = inject(API_BASE_URL);
+    getView(viewCode) {
+        const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
+        return pageOb;
     }
-    finishEditing() {
-        if (this._isDirty)
-            throw new Error('Нельзя закрывать редактирование когда есть изменения. Надо сохранить либо зарезетить.');
-        if (this.onFinishEditing !== undefined)
-            this.onFinishEditing();
-        this._isEditing = false;
+    getPage(pageRoute) {
+        const pageUrl = `/${pageRoute}`;
+        const pageOb = this.getSkeleton(`${this.baseHref}api/pages/?url=${encodeURIComponent(pageUrl)}`);
+        return pageOb;
     }
-    nextPreset() {
-        const newIndex = this._currentPreset === undefined ? 0 : this.presets.indexOf(this._currentPreset) + 1;
-        this.applyPresetAtIndex(newIndex);
+    getSettings(ids) {
+        const pageOb = this.http.get(`${this.baseHref}api/settings`, {
+            params: { ids: ids },
+        });
+        return pageOb;
     }
-    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();
-    };
-    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;
+    getSkeleton(url) {
+        const skeletonOb = this.http.get(url);
+        const routeDataObs = skeletonOb.pipe(map((x) => {
+            const notEmptyDataRoutes = x.bones
+                .map((b) => ("dataRoute" in b && typeof b.dataRoute === "string" ? b.dataRoute : ""))
+                .filter((x) => x.length > 0);
+            if (notEmptyDataRoutes.length === 0) {
+                const emptyData = {};
+                return { page: of(x), data: of(emptyData) };
             }
-        }
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BoneEditorBaseComponent, isStandalone: true, 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 });
+            return {
+                page: of(x),
+                data: combineLatest(notEmptyDataRoutes
+                    .map((dataRoute) => {
+                    const url = `${this.baseHref}api/Pages/Children/?url=${dataRoute}`;
+                    return {
+                        route: dataRoute,
+                        json: this.http.get(url),
+                    };
+                })
+                    .reduce((prev, curr) => {
+                    prev[curr.route] = curr.json;
+                    return prev;
+                }, {})),
+            };
+        }), map((x) => combineLatest(x)), mergeMap((res) => merge(res)), map((x) => {
+            for (const bone of x.page.bones) {
+                if (!("dataRoute" in bone) ||
+                    typeof bone.dataRoute !== "string" ||
+                    bone.dataRoute.length === 0)
+                    continue;
+                const data = x.data[bone.dataRoute];
+                if (data === undefined || data === null)
+                    throw new Error(`Data ${bone.dataRoute} have not been preloaded`);
+                bone.data = data; // todo: fix
+            }
+            return x.page;
+        }));
+        return routeDataObs;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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 }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService, decorators: [{
+            type: Injectable
+        }] });
 
-class UnknownBoneEditorComponent extends BoneEditorBaseComponent {
-    onFinishEditing() { }
-    onReset() { }
-    getPresets() {
-        return [];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnknownBoneEditorComponent, isStandalone: true, selector: "bonc-unknown-bone-editor", usesInheritance: true, ngImport: i0, template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\n<pre>{{bone | json}}</pre>\n", styles: [":host{display:block;background-color:#dc143c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.JsonPipe, name: "json" }] });
+class SkeletonEditorAnchorDirective {
+    viewContainerRef = inject(ViewContainerRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SkeletonEditorAnchorDirective, isStandalone: true, selector: "[boncSkeletonEditorAnchor]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-unknown-bone-editor', standalone: true, imports: [CommonModule, JsonPipe], template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\n<pre>{{bone | json}}</pre>\n", styles: [":host{display:block;background-color:#dc143c}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[boncSkeletonEditorAnchor]",
+                }]
         }] });
 
-// todo: rename class
 class BoneEditorContainerComponent {
-    anchor;
-    removed = new EventEmitter();
-    saved = new EventEmitter();
-    editing = new EventEmitter();
+    anchor = viewChild.required(SkeletonEditorAnchorDirective);
+    removed = output();
+    saved = output();
+    editing = output();
     DeviceType = DeviceType;
     editor;
     themePopupIsShown = false;
-    _bone;
+    bone = input.required(...(ngDevMode ? [{ debugName: "bone" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    device = input(DeviceType.NotSet, ...(ngDevMode ? [{ debugName: "device" }] : []));
+    map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
+    boneEditorRef;
     removeSubscription;
     saveSubscription;
     changedSubscription;
-    locale;
-    device = DeviceType.NotSet;
-    componentFactoryResolver = inject(ComponentFactoryResolver);
-    ngOnChanges() {
-        if (this.editor === undefined || this.editor === null)
-            return;
-        this.editor.locale = this.locale;
-        this.editor.device = this.device;
-    }
-    map;
-    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);
+    viewReady = signal(false, ...(ngDevMode ? [{ debugName: "viewReady" }] : []));
+    constructor() {
+        afterNextRender(() => this.viewReady.set(true));
+        effect(() => {
+            if (!this.viewReady()) {
+                return;
+            }
+            const newBone = this.bone();
+            const editorMap = this.map();
+            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 = editorMap.get(newBone.type) ?? UnknownBoneEditorComponent;
+            this.boneEditorRef = viewContainerRef.createComponent(componentType);
+            this.editor = this.boneEditorRef.instance;
+            this.boneEditorRef.setInput("boneEtalon", newBone);
+            this.boneEditorRef.setInput("locale", this.locale());
+            this.boneEditorRef.setInput("device", this.device());
+            this.removeSubscription = this.editor.removed.subscribe(() => {
+                this.removed.emit();
+            });
+            this.changedSubscription = this.editor.editing.subscribe((isEditing) => this.editing.emit(isEditing));
+            this.saveSubscription = this.editor.saved.subscribe((newBoneValue) => this.saved.emit(newBoneValue));
         });
-        this.saveSubscription = this.editor.saved.subscribe((newBoneValue) => {
-            this.saved.next(newBoneValue);
+        effect(() => {
+            const locale = this.locale();
+            const device = this.device();
+            if (this.boneEditorRef) {
+                this.boneEditorRef.setInput("locale", locale);
+                this.boneEditorRef.setInput("device", device);
+            }
         });
-        this.ngOnChanges();
     }
     nextPreset = () => {
         if (this.editor === undefined || this.editor === null)
@@ -1500,9 +1256,13 @@ class BoneEditorContainerComponent {
     //     this.editor.bone.visibility = setOrRemoveFlag(this.editor.bone.visibility, DeviceVisibility.Mobile, !disabled);
     //   this.editor.updateDirty();
     // }
+    // todo: use this feature
+    // its not working now
     get disabled() {
-        if (this.editor === undefined || this.editor === null)
-            throw new Error('editor should have been set');
+        if (this.editor === undefined || this.editor === null) {
+            console.warn("editor should have been set before disabled is called");
+            return false;
+        }
         return false;
         // todo: add or remove visibility feature
         // const visibility = this.editor.bone.visibility;
@@ -1515,59 +1275,51 @@ class BoneEditorContainerComponent {
         // return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BoneEditorContainerComponent, isStandalone: true, 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\">\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\n</div>\n\n<div class=\"editor-container\"\n     [class.disabled]=\"disabled\"\n     [style.width]=\"\n                      device === DeviceType.Desktop ? '75vw'\n                      : device === DeviceType.Tablet ? '55vw'\n                      : device === DeviceType.Mobile ? '35vw'\n                      : '75vw' \">\n  <ng-template boncSkeletonEditorAnchor>\n  </ng-template>\n</div>\n\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\n</div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BoneEditorContainerComponent, isStandalone: true, selector: "bonc-bone-editor-container", inputs: { bone: { classPropertyName: "bone", publicName: "bone", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { removed: "removed", saved: "saved", editing: "editing" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: SkeletonEditorAnchorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (editor) {\n  <div class=\"left bar\" [class.inactive]=\"editor.noPresets()\">\n    <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\n    <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\n    @if (editor.currentPreset() && !editor.noPresets()) {\n      <a (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset()?.title}}</a>\n    }\n  </div>\n}@else {\n  EDITOR COMPONENTS IS NOT DEFINED\n}\n\n<div class=\"editor-container\"\n     [class.disabled]=\"disabled\"\n     [style.width]=\"\n                      device() === DeviceType.Desktop ? '75vw'\n                      : device() === DeviceType.Tablet ? '55vw'\n                      : device() === DeviceType.Mobile ? '35vw'\n                      : '75vw' \">\n  <ng-template boncSkeletonEditorAnchor>\n  </ng-template>\n</div>\n\n@if (editor) {\n  <div [class.active]=\"editor.isEditing() || editor.isDirty()\" class=\"right bar\">\n    <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\n    @if (editor.isDirty()) {\n      <a (click)=\"editor.resetData()\" class=\"reset\">reset</a>\n      <a (click)=\"editor.save()\" class=\"save\">apply</a>\n    } @else if (editor.isEditing()) {\n      <a (click)=\"editor.finishEditing()\" class=\"close\">close</a>\n    }\n  </div>\n}\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: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-bone-editor-container', standalone: true, imports: [CommonModule, SkeletonEditorAnchorDirective], template: "<div *ngIf=\"editor\" class=\"left bar\" [class.inactive]=\"editor.noPresets\">\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\n</div>\n\n<div class=\"editor-container\"\n     [class.disabled]=\"disabled\"\n     [style.width]=\"\n                      device === DeviceType.Desktop ? '75vw'\n                      : device === DeviceType.Tablet ? '55vw'\n                      : device === DeviceType.Mobile ? '35vw'\n                      : '75vw' \">\n  <ng-template boncSkeletonEditorAnchor>\n  </ng-template>\n</div>\n\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\n</div>\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"] }]
-        }], 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 }]
-            }] } });
+            args: [{ selector: "bonc-bone-editor-container", imports: [SkeletonEditorAnchorDirective], template: "@if (editor) {\n  <div class=\"left bar\" [class.inactive]=\"editor.noPresets()\">\n    <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\n    <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\n    @if (editor.currentPreset() && !editor.noPresets()) {\n      <a (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset()?.title}}</a>\n    }\n  </div>\n}@else {\n  EDITOR COMPONENTS IS NOT DEFINED\n}\n\n<div class=\"editor-container\"\n     [class.disabled]=\"disabled\"\n     [style.width]=\"\n                      device() === DeviceType.Desktop ? '75vw'\n                      : device() === DeviceType.Tablet ? '55vw'\n                      : device() === DeviceType.Mobile ? '35vw'\n                      : '75vw' \">\n  <ng-template boncSkeletonEditorAnchor>\n  </ng-template>\n</div>\n\n@if (editor) {\n  <div [class.active]=\"editor.isEditing() || editor.isDirty()\" class=\"right bar\">\n    <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\n    @if (editor.isDirty()) {\n      <a (click)=\"editor.resetData()\" class=\"reset\">reset</a>\n      <a (click)=\"editor.save()\" class=\"save\">apply</a>\n    } @else if (editor.isEditing()) {\n      <a (click)=\"editor.finishEditing()\" class=\"close\">close</a>\n    }\n  </div>\n}\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: () => [], propDecorators: { anchor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SkeletonEditorAnchorDirective), { isSignal: true }] }], removed: [{ type: i0.Output, args: ["removed"] }], saved: [{ type: i0.Output, args: ["saved"] }], editing: [{ type: i0.Output, args: ["editing"] }], bone: [{ type: i0.Input, args: [{ isSignal: true, alias: "bone", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", 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),
+    };
+}
 
-// todo: rename class
 class SkeletonEditorComponent {
-    boneEditorContainerList;
-    locale;
-    device = DeviceType.NotSet;
+    boneEditorContainerList = viewChildren("boneEditorContainer", ...(ngDevMode ? [{ debugName: "boneEditorContainerList" }] : []));
+    locale = input.required(...(ngDevMode ? [{ debugName: "locale" }] : []));
+    device = input(DeviceType.NotSet, ...(ngDevMode ? [{ debugName: "device" }] : []));
+    map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
+    templates = input.required(...(ngDevMode ? [{ debugName: "templates" }] : []));
     templatesAreShown = [];
     editable = inject((EditableDirective), { host: true });
-    ngOnInit() {
+    constructor() {
+        effect(() => {
+            this.map();
+            this.templates();
+            this.templatesAreShown.splice(0, this.templatesAreShown.length);
+            const bones = this.editable.value ?? [];
+            if (bones === undefined) {
+                return;
+            }
+            bones.forEach(() => this.templatesAreShown.push(false));
+            this.templatesAreShown.push(false);
+        });
         this.editable.externalSaveCall.subscribe(() => {
-            this.boneEditorContainerList.forEach(editorContainer => editorContainer.editor?.save());
+            this.boneEditorContainerList().forEach((editorContainer) => editorContainer.editor?.save());
             this.editable.save();
         });
         this.editable.canceled.subscribe(() => {
-            this.boneEditorContainerList.forEach(editorContainer => editorContainer.editor?.resetData());
+            this.boneEditorContainerList().forEach((editorContainer) => editorContainer.editor?.resetData());
             this.editable.save();
         });
     }
-    map;
-    ngOnChanges() {
-        this.templatesAreShown.splice(0, this.templatesAreShown.length);
-        if (this.bones === undefined)
-            return;
-        this.bones.forEach(() => this.templatesAreShown.push(false));
-        this.templatesAreShown.push(false);
-    }
-    templates;
     get bones() {
         return this.editable?.value ?? [];
     }
@@ -1575,11 +1327,9 @@ class SkeletonEditorComponent {
         if (isEditing)
             this.editable.startEditing();
         else {
-            const allClosed = this.boneEditorContainerList
-                .filter(x => x.editor !== undefined && x.editor.isEditing)
-                .length === 0;
+            const allClosed = this.boneEditorContainerList().filter((x) => x.editor?.isEditing).length === 0;
             this.editable.updateDirty();
-            if (!this.editable.isDirty && allClosed)
+            if (!this.editable.isDirty() && allClosed)
                 this.editable.close();
         }
     }
@@ -1592,10 +1342,10 @@ class SkeletonEditorComponent {
     removeBone(boneIndex) {
         if (this.bones === undefined || this.bones === null)
             return;
-        if (!confirm('Вы уверены, что хотите удалить компонент?'))
+        if (!confirm("Вы уверены, что хотите удалить компонент?"))
             return;
         this.bones.splice(boneIndex, 1);
-        if (!this.editable.inEditMode)
+        if (!this.editable.inEditMode())
             this.editable.startEditing();
         this.editable.save();
     }
@@ -1621,35 +1371,12 @@ class SkeletonEditorComponent {
         this.bones[index2] = tempBone;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SkeletonEditorComponent, isStandalone: true, 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'>\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\n    </div>\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\n  </div>\n\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\n  </div>\n</ng-template>\n\n<!-- todo: add trackby -->\n<ng-container *ngFor=\"let bone of bones; let i = index\">\n  <ng-container>\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\n  </ng-container>\n\n  <bonc-bone-editor-container #boneEditorContainer\n                              [map]=\"map\"\n                              [bone]=\"bone\"\n                              [locale]=\"locale\"\n                              [device]=\"device\"\n                              (removed)=\"removeBone(i)\"\n                              (editing)=\"boneEditHandler($event)\"\n                              (saved)=\"boneChangeHandler(i, $event)\">\n  </bonc-bone-editor-container>\n\n</ng-container>\n\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\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 *{opacity:1}.controls.appearable:hover{background-color:#222}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: ["locale", "device", "map", "bone"], outputs: ["removed", "saved", "editing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SkeletonEditorComponent, isStandalone: true, selector: "bonc-skeleton-editor", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: true, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "boneEditorContainerList", predicate: ["boneEditorContainer"], descendants: true, isSignal: true }], hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<ng-template #controls let-index='index'>\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\n    @if (index < bones.length) {\n      <div class=\"up-down\">\n        @if (index > 0) {\n          <a (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\n          <a (click)=\"moveUp(index)\" class=\"up\">move up</a>\n        }\n      </div>\n    }\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\n    @if (index < bones.length) {\n      <a (click)=\"removeBone(index)\" class=\"remove\">remove</a>\n    }\n  </div>\n\n  @if (templatesAreShown[index]) {\n    <div class=\"templates\">\n      @for (template of templates(); track template.title) {\n        <a (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\n      }\n      <a (click)=\"templatesAreShown[index] = false\">Close</a>\n    </div>\n  }\n</ng-template>\n\n<!-- todo: add trackby -->\n@for (bone of bones; track $index) {\n  <ng-container>\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: $index}\"></ng-container>\n  </ng-container>\n\n  <bonc-bone-editor-container #boneEditorContainer\n                              [map]=\"map()\"\n                              [bone]=\"bone\"\n                              [locale]=\"locale()\"\n                              [device]=\"device()\"\n                              (removed)=\"removeBone($index)\"\n                              (editing)=\"boneEditHandler($event)\"\n                              (saved)=\"boneChangeHandler($index, $event)\">\n  </bonc-bone-editor-container>\n}\n\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\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 *{opacity:1}.controls.appearable:hover{background-color:#222}.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: ["bone", "locale", "device", "map"], outputs: ["removed", "saved", "editing"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-skeleton-editor', standalone: true, imports: [CommonModule, BoneEditorContainerComponent], hostDirectives: [EditableDirective], template: "<ng-template #controls let-index='index'>\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\n    </div>\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\n  </div>\n\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\n  </div>\n</ng-template>\n\n<!-- todo: add trackby -->\n<ng-container *ngFor=\"let bone of bones; let i = index\">\n  <ng-container>\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\n  </ng-container>\n\n  <bonc-bone-editor-container #boneEditorContainer\n                              [map]=\"map\"\n                              [bone]=\"bone\"\n                              [locale]=\"locale\"\n                              [device]=\"device\"\n                              (removed)=\"removeBone(i)\"\n                              (editing)=\"boneEditHandler($event)\"\n                              (saved)=\"boneChangeHandler(i, $event)\">\n  </bonc-bone-editor-container>\n\n</ng-container>\n\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\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 *{opacity:1}.controls.appearable:hover{background-color:#222}.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"] }]
-        }], 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,
-    };
-}
+            args: [{ selector: "bonc-skeleton-editor", imports: [NgTemplateOutlet, BoneEditorContainerComponent], hostDirectives: [EditableDirective], template: "<ng-template #controls let-index='index'>\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\n    @if (index < bones.length) {\n      <div class=\"up-down\">\n        @if (index > 0) {\n          <a (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\n          <a (click)=\"moveUp(index)\" class=\"up\">move up</a>\n        }\n      </div>\n    }\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\n    @if (index < bones.length) {\n      <a (click)=\"removeBone(index)\" class=\"remove\">remove</a>\n    }\n  </div>\n\n  @if (templatesAreShown[index]) {\n    <div class=\"templates\">\n      @for (template of templates(); track template.title) {\n        <a (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\n      }\n      <a (click)=\"templatesAreShown[index] = false\">Close</a>\n    </div>\n  }\n</ng-template>\n\n<!-- todo: add trackby -->\n@for (bone of bones; track $index) {\n  <ng-container>\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: $index}\"></ng-container>\n  </ng-container>\n\n  <bonc-bone-editor-container #boneEditorContainer\n                              [map]=\"map()\"\n                              [bone]=\"bone\"\n                              [locale]=\"locale()\"\n                              [device]=\"device()\"\n                              (removed)=\"removeBone($index)\"\n                              (editing)=\"boneEditHandler($event)\"\n                              (saved)=\"boneChangeHandler($index, $event)\">\n  </bonc-bone-editor-container>\n}\n\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\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 *{opacity:1}.controls.appearable:hover{background-color:#222}.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: () => [], propDecorators: { boneEditorContainerList: [{ type: i0.ViewChildren, args: ["boneEditorContainer", { isSignal: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: true }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.