@candy-kingdom/bonnie-cms 0.24.0 → 0.25.0

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

@@ -1,20 +1,16 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Directive, Output, Component, ContentChildren, Host, Input, ViewChildren, ViewChild, ChangeDetectorRef, inject, InjectionToken, Injectable, Inject, HostBinding, NgModule } from '@angular/core';
-import { Subject, debounceTime, map, last, catchError, Observable, of, combineLatest, merge, mergeMap } from 'rxjs';
+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 * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { take } from 'rxjs/operators';
-import * as i1$1 from '@angular/platform-browser';
-import * as i1$2 from '@angular/common/http';
-import { HttpRequest, HttpEventType } from '@angular/common/http';
-import * as i3 from 'ngx-lottie';
+import { DomSanitizer } from '@angular/platform-browser';
+import { HttpClient, HttpRequest, HttpEventType } from '@angular/common/http';
 import { LottieComponent } from 'ngx-lottie';
-import * as i4 from '@candy-kingdom/bonnie';
-import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
+import { MediaObjectFit, MarcyMediaComponent } from '@candy-kingdom/bonnie';
 
 /**
  * This is a TypeGen auto-generated file.
@@ -134,25 +130,17 @@ var DeviceVisibility;
 })(DeviceVisibility || (DeviceVisibility = {}));
 
 class EditableDirective {
-    constructor() {
-        this.saved = new EventEmitter();
-        this.editModeChange = new EventEmitter();
-        this.externalSaveCall = new EventEmitter();
-        this.canceled = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.propagateChange = () => { };
-        this._inEditMode = false;
-        this._isDirty = false;
-        this.startEditing = () => {
-            if (this._inEditMode) {
-                this.updateDirty();
-                return;
-            }
-            this._inEditMode = true;
-            this.updateDirty();
-            this.editModeChange.emit(true);
-        };
-    }
+    saved = new EventEmitter();
+    editModeChange = new EventEmitter();
+    externalSaveCall = new EventEmitter();
+    canceled = new EventEmitter();
+    valueChange = new EventEmitter();
+    propagateChange = () => { };
+    _inEditMode = false;
+    _isDirty = false;
+    _value;
+    _originalValue;
+    _storedData;
     get inEditMode() {
         return this._inEditMode;
     }
@@ -181,6 +169,15 @@ class EditableDirective {
     requestSave() {
         this.externalSaveCall.emit();
     }
+    startEditing = () => {
+        if (this._inEditMode) {
+            this.updateDirty();
+            return;
+        }
+        this._inEditMode = true;
+        this.updateDirty();
+        this.editModeChange.emit(true);
+    };
     save(newData) {
         if (!this._inEditMode) {
             console.warn('save before edit mode'); //todo: fix that
@@ -281,10 +278,10 @@ class EditableDirective {
     }
     registerOnTouched() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: EditableDirective, isStandalone: true, selector: "[boncEditable]", outputs: { saved: "saved", editModeChange: "editModeChange", externalSaveCall: "externalSaveCall", canceled: "canceled", valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableDirective), multi: true }], ngImport: i0 }); }
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EditableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -304,14 +301,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class EditableGroupComponent {
-    constructor() {
-        this.editModeChange = new EventEmitter();
-        this.saved = new EventEmitter();
-        this.requestEditorClose = new EventEmitter();
-        this.subscriptions = [];
-        this._inEditMode = false;
-        this.saveSubject = new Subject();
-    }
+    editModeChange = new EventEmitter();
+    saved = new EventEmitter();
+    requestEditorClose = new EventEmitter();
+    editables;
+    subscriptions = [];
+    _inEditMode = false;
+    saveSubject = new Subject();
     ngAfterContentInit() {
         this.saveSubject
             .asObservable()
@@ -363,13 +359,14 @@ class EditableGroupComponent {
     ngOnDestroy() {
         this.clearSubscribtions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EditableGroupComponent, selector: "bonc-editable-group", outputs: { editModeChange: "editModeChange", saved: "saved", requestEditorClose: "requestEditorClose" }, queries: [{ propertyName: "editables", predicate: EditableDirective, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditableGroupComponent, decorators: [{
+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>'
                 }]
         }], propDecorators: { editModeChange: [{
@@ -384,39 +381,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class FormBaseComponent {
-    static { this.inputs = ['locale']; }
-    constructor(editable) {
-        this.editable = editable;
-        this.name = '';
-        this._locale = '';
-    }
+    static inputs = ['locale'];
+    name = '';
+    _locale = '';
+    editable = inject((EditableDirective), { host: true });
     set locale(value) {
         this._locale = value;
     }
     get locale() {
         return this._locale;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormBaseComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FormBaseComponent, selector: "ng-component", inputs: { locale: "locale" }, ngImport: i0, template: '', isInline: true }); }
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
-                    type: Host
-                }] }], propDecorators: { locale: [{
+        }], propDecorators: { locale: [{
                 type: Input
             }] } });
 
 class TranslationInputComponent {
-    constructor() {
-        this.device = DeviceType.NotSet;
-        this.startEditing = new EventEmitter();
-        this.changed = new EventEmitter();
-        this.blurred = new EventEmitter();
-    }
+    text;
+    locale;
+    device = DeviceType.NotSet;
+    startEditing = new EventEmitter();
+    changed = new EventEmitter();
+    blurred = new EventEmitter();
     onClick() {
         this.startEditing.emit();
     }
@@ -426,12 +419,12 @@ class TranslationInputComponent {
     onBlur() {
         this.blurred.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: { text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, ngImport: i0, template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-input', template: "<input [(ngModel)]=\"text[locale]\"\r\n       (click)=\"onClick()\"\r\n       (keyup)=\"onKeyPress()\"\r\n       (blur)=\"onBlur()\" />\r\n", styles: [":host{padding:6px 12px;border:1px solid silver;display:block}:host:hover{background-color:#333}:host:focus-within{background-color:#555}:host input{background-color:#8080801a;color:var(--text-color);padding:6px;color:silver;border:1px solid silver;background-color:transparent;display:block;box-sizing:border-box;font-family:inherit;width:100%;border:none}:host input:hover{background-color:#d3d3d3;cursor:pointer}:host input:focus{outline:none;color:#000;background-color:#cf0}:host input:hover{border-color:transparent;background-color:#333;cursor:pointer}:host input:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"] }]
+            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 }]
@@ -449,12 +442,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class TranslationTextareaComponent {
+    ngZone;
+    autosizeList;
+    minRows;
+    maxRows;
+    text;
+    locale;
+    device = DeviceType.NotSet;
+    startEditing = new EventEmitter();
+    changed = new EventEmitter();
+    blurred = new EventEmitter();
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.device = DeviceType.NotSet;
-        this.startEditing = new EventEmitter();
-        this.changed = new EventEmitter();
-        this.blurred = new EventEmitter();
     }
     ngAfterViewInit() {
         setTimeout(this.triggerResize.bind(this));
@@ -478,12 +477,12 @@ class TranslationTextareaComponent {
             this.autosizeList.forEach(x => x.resizeToFitContent(true));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: { minRows: "minRows", maxRows: "maxRows", text: "text", locale: "locale", device: "device" }, outputs: { startEditing: "startEditing", changed: "changed", blurred: "blurred" }, viewQueries: [{ propertyName: "autosizeList", predicate: CdkTextareaAutosize, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea [(ngModel)]=\"text[locale]\"\r\n          [cdkAutosizeMinRows]=\"minRows\"\r\n          [cdkAutosizeMaxRows]=\"maxRows\"\r\n          (click)=\"onClick()\"\r\n          (keyup)=\"onKeyPress()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          cdkTextareaAutosize>\r\n</textarea>\r\n", styles: [":host{display:block;padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}textarea{display:block;width:100%;line-height:140%;padding:2px 0;margin:0;box-sizing:content-box;border:none;resize:none;color:silver;background-color:transparent}textarea:focus{outline:none}textarea[readonly]{cursor:pointer}textarea[readonly]::selection{-webkit-user-select:none;user-select:none}textarea[readonly]:hover{background:repeating-linear-gradient(-45deg,#ccff00,#ccff00 10px,rgba(0,0,0,0) 10px,rgba(0,0,0,0) 20px) fixed bottom;color:#000}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationTextareaComponent, deps: [{ token: i0.NgZone }], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-textarea', template: "<textarea [(ngModel)]=\"text[locale]\"\r\n          [cdkAutosizeMinRows]=\"minRows\"\r\n          [cdkAutosizeMaxRows]=\"maxRows\"\r\n          (click)=\"onClick()\"\r\n          (keyup)=\"onKeyPress()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          cdkTextareaAutosize>\r\n</textarea>\r\n", styles: [":host{display:block;padding:6px 12px;border:1px solid silver}:host:hover{background-color:#333}:host:focus-within{background-color:#555}textarea{display:block;width:100%;line-height:140%;padding:2px 0;margin:0;box-sizing:content-box;border:none;resize:none;color:silver;background-color:transparent}textarea:focus{outline:none}textarea[readonly]{cursor:pointer}textarea[readonly]::selection{-webkit-user-select:none;user-select:none}textarea[readonly]:hover{background:repeating-linear-gradient(-45deg,#ccff00,#ccff00 10px,rgba(0,0,0,0) 10px,rgba(0,0,0,0) 20px) fixed bottom;color:#000}textarea:hover{cursor:pointer}textarea:focus{outline:none;color:#fff;cursor:default}\n"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { autosizeList: [{
                 type: ViewChildren,
                 args: [CdkTextareaAutosize]
@@ -508,17 +507,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class LinkPopupComponent {
-    constructor() {
-        this.TextEditorField = TextEditorField;
-        this.linkChange = new EventEmitter();
-        this.startEditing = new EventEmitter();
-        this.changed = new EventEmitter();
-        this.blurred = new EventEmitter();
-        this.open = new EventEmitter();
-        this.closed = new EventEmitter();
-        this.LinkPopupField = TextEditorField;
-        this.popupIsShown = false;
-    }
+    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;
+    popupIsShown = false;
     onClick() {
         this.startEditing.emit();
     }
@@ -537,12 +540,12 @@ class LinkPopupComponent {
         this.popupIsShown = false;
         this.closed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LinkPopupComponent, selector: "bonc-link-popup", inputs: { field: "field", maxRows: "maxRows", minRows: "minRows", linkTitle: "linkTitle", locale: "locale", link: "link" }, outputs: { linkChange: "linkChange", startEditing: "startEditing", changed: "changed", blurred: "blurred", open: "open", closed: "closed" }, ngImport: i0, template: "<bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                        (click)=\"showPopup()\"\r\n                        [text]=\"linkTitle\"\r\n                        [locale]=\"locale\"\r\n                        (startEditing)=\"onClick()\"\r\n                        (changed)=\"onChange()\"\r\n                        (blurred)=\"onBlur()\">\r\n</bonc-translation-input>\r\n\r\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                           (click)=\"showPopup()\"\r\n                           [text]=\"linkTitle\"\r\n                           [locale]=\"locale\"\r\n                           [minRows]=\"minRows\"\r\n                           [maxRows]=\"maxRows\"\r\n                           (startEditing)=\"onClick()\"\r\n                           (changed)=\"onChange()\"\r\n                           (blurred)=\"onBlur()\">\r\n</bonc-translation-textarea>\r\n\r\n<div *ngIf=\"popupIsShown\">\r\n  <div class=\"popup\">\r\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\r\n\r\n    <label>Link\r\n      <input [(ngModel)]=\"link[locale]\"\r\n             (click)=\"onClick()\"\r\n             (keyup)=\"onChange()\"\r\n             (blur)=\"onBlur()\">\r\n    </label>\r\n\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host translation-input{z-index:1}.popup{position:absolute;display:flex;flex-direction:column;justify-content:center;width:350px;padding:20px;box-sizing:border-box;color:#000;background-color:#fff;z-index:5;border:2px solid black}.popup a{cursor:pointer}.popup a:hover{background-color:#cf0}.popup a.close{position:absolute;top:10px;right:10px}.popup label+label{margin-top:20px}.popup input{width:100%;margin-top:5px;padding:6px;font-size:12px;box-sizing:border-box;border:1px solid #222}.popup input:hover,.popup input:focus{background-color:silver;color:#333;border-color:silver;outline:none}button{display:block;color:#fff;background-color:transparent;box-shadow:none;border:none;outline:none;text-decoration:none;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none;color:#000;cursor:pointer}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button:hover{background-color:#cf0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LinkPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinkPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-link-popup', template: "<bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                        (click)=\"showPopup()\"\r\n                        [text]=\"linkTitle\"\r\n                        [locale]=\"locale\"\r\n                        (startEditing)=\"onClick()\"\r\n                        (changed)=\"onChange()\"\r\n                        (blurred)=\"onBlur()\">\r\n</bonc-translation-input>\r\n\r\n<bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                           (click)=\"showPopup()\"\r\n                           [text]=\"linkTitle\"\r\n                           [locale]=\"locale\"\r\n                           [minRows]=\"minRows\"\r\n                           [maxRows]=\"maxRows\"\r\n                           (startEditing)=\"onClick()\"\r\n                           (changed)=\"onChange()\"\r\n                           (blurred)=\"onBlur()\">\r\n</bonc-translation-textarea>\r\n\r\n<div *ngIf=\"popupIsShown\">\r\n  <div class=\"popup\">\r\n    <a (click)=\"hidePopup()\" class=\"close\">close</a>\r\n\r\n    <label>Link\r\n      <input [(ngModel)]=\"link[locale]\"\r\n             (click)=\"onClick()\"\r\n             (keyup)=\"onChange()\"\r\n             (blur)=\"onBlur()\">\r\n    </label>\r\n\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host translation-input{z-index:1}.popup{position:absolute;display:flex;flex-direction:column;justify-content:center;width:350px;padding:20px;box-sizing:border-box;color:#000;background-color:#fff;z-index:5;border:2px solid black}.popup a{cursor:pointer}.popup a:hover{background-color:#cf0}.popup a.close{position:absolute;top:10px;right:10px}.popup label+label{margin-top:20px}.popup input{width:100%;margin-top:5px;padding:6px;font-size:12px;box-sizing:border-box;border:1px solid #222}.popup input:hover,.popup input:focus{background-color:silver;color:#333;border-color:silver;outline:none}button{display:block;color:#fff;background-color:transparent;box-shadow:none;border:none;outline:none;text-decoration:none;padding:3pt 10pt;text-align:center;-webkit-user-select:none;user-select:none;color:#000;cursor:pointer}button:hover{border-color:#333;background-color:#333}button:disabled{color:gray}button:hover{background-color:#cf0}\n"] }]
+            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: [{
@@ -574,29 +577,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class FormControlsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FormControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FormControlsComponent, selector: "bonc-form-controls", inputs: { editable: "editable" }, ngImport: i0, template: "<div [class.edit]=\"editable.inEditMode\" class=\"content\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\r\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\r\n    <ng-container *ngIf=\"editable.isDirty\">\r\n        <a (click)=\"editable.cancel()\">reset</a>\r\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;background-color:#222;color:silver}.content{flex:1;padding:10px}.content.edit{background-color:#111}.controls{display:flex;flex-direction:column;width:100px;background-color:#111}.controls.hidden{opacity:0;pointer-events:none}.controls a{display:block}.controls a.apply{flex:1}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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: "17.0.8", ngImport: i0, type: FormControlsComponent, decorators: [{
+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\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div [class.hidden]=\"!editable.inEditMode\" class=\"controls\">\r\n    <a *ngIf=\"!editable.isDirty\" (click)=\"editable.cancel()\" class=\"close\">close</a>\r\n    <ng-container *ngIf=\"editable.isDirty\">\r\n        <a (click)=\"editable.cancel()\">reset</a>\r\n        <a (click)=\"editable.requestSave()\" class=\"apply\">apply</a>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;background-color:#222;color:silver}.content{flex:1;padding:10px}.content.edit{background-color:#111}.controls{display:flex;flex-direction:column;width:100px;background-color:#111}.controls.hidden{opacity:0;pointer-events:none}.controls a{display:block}.controls a.apply{flex:1}\n"] }]
+            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 }]
             }] } });
 
 class FileUploaderComponent {
-    constructor(sanitizer, http, cd) {
-        this.sanitizer = sanitizer;
-        this.http = http;
-        this.cd = cd;
-        this.srcChange = new EventEmitter();
-        this.progress = 0;
-        this.isUploading = false;
-        this.autoplay = true;
-        this.fileTypeMask = undefined;
-        this._uploadTypes = [];
-    }
+    fileInput;
+    srcChange = new EventEmitter();
+    uploadUrlMap;
+    progress = 0;
+    isUploading = false;
+    autoplay = true;
+    clipStyle;
+    fileTypeMask = undefined;
+    _uploadTypes = [];
+    _src;
+    sanitizer = inject(DomSanitizer);
+    http = inject(HttpClient);
+    cd = inject(ChangeDetectorRef);
     set src(newSrc) {
         if (this._src === newSrc)
             return;
@@ -676,13 +682,13 @@ class FileUploaderComponent {
         };
         return func;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileUploaderComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i1$2.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: { uploadUrlMap: "uploadUrlMap", src: "src", uploadTypes: "uploadTypes" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"src === undefined || src.url === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-file-uploader', template: "<div *ngIf=\"src === undefined || src.url === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
+            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: [{
@@ -699,13 +705,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 const uploadMap = new Map();
 uploadMap.set('', `/api/admin/upload/image?width=${1200}&height=${630}&format=image/jpeg`);
 class SeoFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.uploadMap = uploadMap;
-        this._pageId = '';
-        this.ogImageUploadUrl = '';
-        this.label = '';
-    }
+    uploadMap = uploadMap;
+    _pageId = '';
+    ogImageUploadUrl = '';
+    label = '';
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
@@ -728,12 +731,12 @@ class SeoFormComponent extends FormBaseComponent {
         }
         this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SeoFormComponent, selector: "bonc-seo-form", inputs: { label: "label", pageId: "pageId" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630</label>\r\n\r\n    <bonc-file-uploader [src]=\"editable.value.image[locale]\"\r\n                        [uploadTypes]=\"['image/png', 'image/jpeg']\"\r\n                        [uploadUrlMap]=\"uploadMap\"\r\n                        (srcChange)=\"replaceImage($event)\">\r\n      <img *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [src]=\"editable.value.image[locale].url\" />\r\n    </bonc-file-uploader>\r\n\r\n    <a *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [href]=\"editable.value.image[locale].url\" download target=\"_blank\">Download</a>\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { 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: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SeoFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-seo-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630</label>\r\n\r\n    <bonc-file-uploader [src]=\"editable.value.image[locale]\"\r\n                        [uploadTypes]=\"['image/png', 'image/jpeg']\"\r\n                        [uploadUrlMap]=\"uploadMap\"\r\n                        (srcChange)=\"replaceImage($event)\">\r\n      <img *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [src]=\"editable.value.image[locale].url\" />\r\n    </bonc-file-uploader>\r\n\r\n    <a *ngIf=\"editable.value.image[locale]?.url?.length ?? 0 > 0\" [href]=\"editable.value.image[locale].url\" download target=\"_blank\">Download</a>\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}img{display:block;width:100%}\n"] }]
+            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: [{
@@ -741,13 +744,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class SvgFormComponent extends FormBaseComponent {
-    constructor(editable) {
-        super(editable);
-        this.cd = inject(ChangeDetectorRef);
-        this.SvgMime = 'image/svg+xml';
-        this.label = '';
-        this.uploadMap = new Map();
-        this._uploadUrl = '/api/admin/upload/image/svg';
+    cd = inject(ChangeDetectorRef);
+    SvgMime = 'image/svg+xml';
+    label = '';
+    uploadMap = new Map();
+    _uploadUrl = '/api/admin/upload/image/svg';
+    constructor() {
+        super();
         this.uploadMap.set(this.SvgMime, this._uploadUrl);
     }
     ngOnInit() {
@@ -766,15 +769,13 @@ class SvgFormComponent extends FormBaseComponent {
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SvgFormComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SvgFormComponent, selector: "bonc-svg-form", inputs: { label: "label", uploadUrl: "uploadUrl" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[SvgMime]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}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: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SvgFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-svg-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[SvgMime]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}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: () => [{ type: EditableDirective, decorators: [{
-                    type: Host
-                }] }], propDecorators: { label: [{
+            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
@@ -782,13 +783,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 
 const DefaultImageMimeTypes = ['image/png', 'image/jpeg'];
 class OneImageFormComponent extends FormBaseComponent {
-    constructor(editable) {
-        super(editable);
-        this.cd = inject(ChangeDetectorRef);
-        this.uploadMap = new Map();
-        this._mimeTypes = DefaultImageMimeTypes;
-        this._uploadUrl = '/api/admin/upload/image';
-        this._label = '';
+    cd = inject(ChangeDetectorRef);
+    uploadMap = new Map();
+    _mimeTypes = DefaultImageMimeTypes;
+    _uploadUrl = '/api/admin/upload/image';
+    _label = '';
+    constructor() {
+        super();
         this.uploadMap.set('', this._uploadUrl);
     }
     ngOnInit() {
@@ -820,15 +821,13 @@ class OneImageFormComponent extends FormBaseComponent {
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OneImageFormComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: OneImageFormComponent, 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\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"mimeTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}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: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OneImageFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OneImageFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-one-image-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"mimeTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}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: () => [{ type: EditableDirective, decorators: [{
-                    type: Host
-                }] }], propDecorators: { label: [{
+            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
@@ -837,17 +836,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class FileFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.uploadTypes = [];
-        this.uploadMap = new Map();
-    }
+    label = '';
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
+    uploadTypes = [];
+    uploadMap = new Map();
     ;
     onFileUploaded(fileSrc) {
         this.editable.startEditing();
@@ -855,12 +851,12 @@ class FileFormComponent extends FormBaseComponent {
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FileFormComponent, selector: "bonc-file-form", inputs: { label: "label", uploadTypes: "uploadTypes", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"uploadTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-file-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"uploadTypes\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <div *ngIf=\"editable.value?.url?.length ?? 0 > 0\">{{editable.value?.url}}</div>\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}a{color:silver}\n"] }]
+            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: [{
@@ -879,23 +875,20 @@ var TextInputStyle;
 })(TextInputStyle || (TextInputStyle = {}));
 
 class TextFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.TextInputStyle = TextInputStyle;
-        this.label = '';
-        this.type = TextInputStyle.SingleLine;
-    }
+    TextInputStyle = TextInputStyle;
+    label = '';
+    type = TextInputStyle.SingleLine;
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TextFormComponent, selector: "bonc-text-form", inputs: { label: "label", type: "type" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-text-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n    <label *ngIf=\"label\">{{label}}</label>\r\n\r\n    <input *ngIf=\"editable && type === TextInputStyle.SingleLine\"\r\n           [(ngModel)]=\"editable.value\"\r\n           (click)=\"editable.startEditing()\"\r\n           (keyup)=\"editable.updateDirty()\"\r\n           (blur)=\"editable.updateDirty()\" />\r\n\r\n    <textarea *ngIf=\"editable && type === TextInputStyle.MultiLine\"\r\n              [(ngModel)]=\"editable.value\"\r\n              (click)=\"editable.startEditing()\"\r\n              (keyup)=\"editable.updateDirty()\"\r\n              (blur)=\"editable.updateDirty()\">\r\n    </textarea>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}input,textarea{display:block;width:100%;padding:6px;color:silver;border:1px solid silver;background-color:transparent;box-sizing:border-box;font-size:inherit}input:hover,textarea:hover{border-color:transparent;background-color:#333;cursor:pointer}input:focus,textarea:focus{outline:none;color:#fff;border-color:transparent;background-color:#555}\n"] }]
+            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: [{
@@ -903,12 +896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class LottieFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.LottieMimeType = 'application/json';
-        this.label = '';
-        this.uploadMap = new Map();
-    }
+    LottieMimeType = 'application/json';
+    animOptions;
+    label = '';
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
@@ -918,6 +908,7 @@ class LottieFormComponent extends FormBaseComponent {
             this.animOptions = url.length === 0 ? undefined : { path: url };
         });
     }
+    uploadMap = new Map();
     ;
     onFileUploaded(fileSrc) {
         this.editable.startEditing();
@@ -925,12 +916,12 @@ class LottieFormComponent extends FormBaseComponent {
         this.editable.value = svgSrc;
         this.editable.updateDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LottieFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LottieFormComponent, selector: "bonc-lottie-form", inputs: { label: "label", uploadMap: "uploadMap" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[LottieMimeType]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n\r\n    <ng-lottie *ngIf=\"animOptions\"\r\n               [options]=\"animOptions\"></ng-lottie>\r\n\r\n\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block;max-width:600px}a{color:silver}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: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }, { kind: "component", type: FileUploaderComponent, selector: "bonc-file-uploader", inputs: ["uploadUrlMap", "src", "uploadTypes"], outputs: ["srcChange"] }] }); }
+    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: "17.0.8", ngImport: i0, type: LottieFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LottieFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-lottie-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[LottieMimeType]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n\r\n    <ng-lottie *ngIf=\"animOptions\"\r\n               [options]=\"animOptions\"></ng-lottie>\r\n\r\n\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n</bonc-form-controls>\r\n", styles: [":host{display:block;max-width:600px}a{color:silver}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"] }]
+            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: [{
@@ -939,21 +930,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class TranslationFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.TextEditorField = TextEditorField;
-    }
+    TextEditorField = TextEditorField;
+    field;
+    label;
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TranslationFormComponent, selector: "bonc-translation-form", inputs: { field: "field", label: "label" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-translation-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n\r\n  <bonc-translation-input *ngIf=\"field === TextEditorField.Input\"\r\n                          [text]=\"editable.value\"\r\n                          [locale]=\"locale\"\r\n                          (startEditing)=\"editable.startEditing()\"\r\n                          (changed)=\"editable.updateDirty()\"\r\n                          (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-input>\r\n\r\n\r\n  <bonc-translation-textarea *ngIf=\"field === TextEditorField.Textarea\"\r\n                             [text]=\"editable.value\"\r\n                             [minRows]=\"2\"\r\n                             [locale]=\"locale\"\r\n                             (startEditing)=\"editable.startEditing()\"\r\n                             (changed)=\"editable.updateDirty()\"\r\n                             (blurred)=\"editable.updateDirty()\">\r\n  </bonc-translation-textarea>\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"editable.value===undefined\">Editable value canot be undefined</div>\r\n", styles: [":host{display:block}\n"] }]
+            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 }]
@@ -962,21 +952,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class UnknownFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-    }
+    label = '';
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.editable.save();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownFormComponent, selector: "bonc-unknown-form", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }); }
+    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 }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-unknown-form', template: "<label>Unknown form:<b>{{label}}</b></label>\r\n<pre><ng-content></ng-content></pre>\r\n", styles: [":host{display:block;color:#000;padding:20px;background-color:#dc143c;margin-bottom:10px}\n"] }]
+            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
             }] } });
@@ -984,10 +971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 const API_BASE_URL = new InjectionToken('ApiBaseUrl');
 
 class DataService {
-    constructor(http, baseHref) {
-        this.http = http;
-        this.baseHref = baseHref;
-    }
+    http = inject(HttpClient);
+    baseHref = inject(API_BASE_URL);
     getView(viewCode) {
         const pageOb = this.getSkeleton(`${this.baseHref}api/views/${viewCode}`);
         return pageOb;
@@ -1042,21 +1027,18 @@ class DataService {
         }));
         return routeDataObs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService, deps: [{ token: i1$2.HttpClient }, { token: API_BASE_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataService }); }
+    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: "17.0.8", ngImport: i0, type: DataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [API_BASE_URL]
-                }] }] });
+        }] });
 
 class AdminDataService {
-    constructor(http, baseHref) {
-        this.http = http;
-        this.baseHref = baseHref;
-        console.log('baseHref: ' + baseHref);
+    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`);
@@ -1074,23 +1056,19 @@ class AdminDataService {
         const ob = this.http.post(`${this.baseHref}api/admin/settings`, settings);
         return ob;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService, deps: [{ token: i1$2.HttpClient }, { token: API_BASE_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminDataService }); }
+    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: "17.0.8", ngImport: i0, type: AdminDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdminDataService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [API_BASE_URL]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class AdminControlsComponent {
-    constructor() {
-        this.DeviceType = DeviceType;
-        this.deviceControls = false;
-        this.locale = 'en';
-        this.device = this.DeviceType.Desktop;
-    }
+    DeviceType = DeviceType;
+    editableGroup;
+    deviceControls = false;
+    locale = 'en';
+    device = this.DeviceType.Desktop;
     changeLocale() {
         this.locale = this.locale === 'en' ? 'ru' : 'en';
     }
@@ -1110,12 +1088,12 @@ class AdminControlsComponent {
                 return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AdminControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AdminControlsComponent, selector: "bonc-admin-controls", inputs: { editableGroup: "editableGroup", deviceControls: "deviceControls" }, ngImport: i0, template: "<div class=\"page-controls\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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: "17.0.8", ngImport: i0, type: AdminControlsComponent, decorators: [{
+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\">\r\n  <a (click)=\"changeLocale()\" class=\"locale\">Locale: {{locale}}</a>\r\n\r\n  <!-- todo: return this functionality -->\r\n  <!-- <a *ngIf=\"deviceControls\" (click)=\"changeDevice()\" class=\"device\">\r\n    <span *ngIf=\"device === DeviceType.Desktop\">DESKTOP</span>\r\n    <span *ngIf=\"device === DeviceType.Tablet\">TABLET</span>\r\n    <span *ngIf=\"device === DeviceType.Mobile\">MOBILE</span>\r\n  </a> -->\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.saveAll()\"\r\n     class=\"save\">Save all</a>\r\n\r\n  <a *ngIf=\"editableGroup && editableGroup.inEditMode\"\r\n     (click)=\"editableGroup.cancelAll()\"\r\n     class=\"cancel\">Cancel all</a>\r\n</div>\r\n", styles: [":host{display:block;position:sticky;top:0;width:100%;z-index:1000}.page-controls{background-color:#111;height:60px;display:flex;align-items:center;justify-content:center}.page-controls a{color:silver;padding:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.page-controls a:hover{color:#000;background-color:#cf0}.page-controls a.device{width:80px}.page-controls a+a{margin-left:6px}\n"] }]
+            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 }]
@@ -1129,17 +1107,21 @@ const imageFileTypes = imageMimeTypes.join(',');
 const videoFileTypes = videoMimeTypes.join(',');
 const allMediaFileTypes = `${imageFileTypes},${videoFileTypes}`;
 class MediaUploaderComponent {
-    constructor(sanitizer, http, cd) {
-        this.sanitizer = sanitizer;
-        this.http = http;
-        this.cd = cd;
-        this.MediaObjectFit = MediaObjectFit;
-        this.srcChange = new EventEmitter();
-        this.progress = 0;
-        this.isUploading = false;
-        this.autoplay = true;
-        this.fileTypeMask = allMediaFileTypes;
-    }
+    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;
@@ -1252,13 +1234,13 @@ class MediaUploaderComponent {
         };
         return func;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i1$2.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MediaUploaderComponent, selector: "bonc-media-uploader", inputs: { uploadUrlMap: "uploadUrlMap", forceRatio: "forceRatio", src: "src", uploadType: "uploadType" }, outputs: { srcChange: "srcChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MarcyMediaComponent, selector: "bon-media", inputs: ["src", "objectFit"], outputs: ["isLoaded"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MediaUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MediaUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-media-uploader', template: "<bon-media [src]=\"src\" [objectFit]=\"MediaObjectFit.Cover\"></bon-media>\r\n\r\n<div *ngIf=\"src?.sources?.length===0\">Upload media</div>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
+            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: [{
@@ -1275,49 +1257,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class SkeletonEditorAnchorDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorAnchorDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]", ngImport: i0 }); }
+    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: "17.0.8", ngImport: i0, type: SkeletonEditorAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorAnchorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[boncSkeletonEditorAnchor]'
+                    selector: '[boncSkeletonEditorAnchor]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+        }] });
 
 class BoneEditorBaseComponent {
+    editing = new EventEmitter();
+    saved = new EventEmitter();
+    removed = new EventEmitter();
+    noPresets;
+    locale;
+    device = DeviceType.NotSet;
+    _bone;
+    _storedData = '';
+    _currentPreset;
+    presets;
+    _isDirty = false;
+    _isEditing = false;
     constructor() {
-        this.editing = new EventEmitter();
-        this.saved = new EventEmitter();
-        this.removed = new EventEmitter();
-        this.device = DeviceType.NotSet;
-        this._storedData = '';
-        this._isDirty = false;
-        this._isEditing = false;
-        this.applyPresetAtIndex = (newIndex) => {
-            newIndex = newIndex < 0 ? 0 : newIndex % this.presets.length;
-            const currentIndex = this._currentPreset === undefined ? -1 : this.presets.indexOf(this._currentPreset);
-            if (currentIndex === newIndex)
-                return;
-            this._currentPreset = this.presets[newIndex];
-            this._currentPreset.transformer(this._bone);
-            this.updateDirty();
-        };
-        this.updatePresetByData = () => {
-            const countOfActive = this.presets.map(p => p.isActive(this._bone)).filter(p => p).length;
-            if (countOfActive !== 1)
-                throw new Error(`active preset count should be equal 1, but it was: ${countOfActive}. ${this.constructor.name}`);
-            for (let i = 0; this.presets.length; i++) {
-                const preset = this.presets[i];
-                if (preset.isActive(this._bone)) {
-                    this.applyPresetAtIndex(i);
-                    break;
-                }
-            }
-        };
         this.presets = this.getPresets();
         if (this.presets === undefined || this.presets === null)
             throw new Error('presets cannot be undefined in ContentPreset constructor');
@@ -1405,10 +1370,31 @@ class BoneEditorBaseComponent {
         const newIndex = this._currentPreset === undefined ? 0 : this.presets.indexOf(this._currentPreset) + 1;
         this.applyPresetAtIndex(newIndex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BoneEditorBaseComponent, selector: "ng-component", inputs: { locale: "locale", bone: "bone" }, host: { properties: { "class.mobile": "this.isMobile", "class.tablet": "this.isTablet", "class.desktop": "this.isDesktop" } }, ngImport: i0, template: '', isInline: true }); }
+    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;
+            }
+        }
+    };
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorBaseComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: () => [], propDecorators: { locale: [{
@@ -1434,36 +1420,37 @@ class UnknownBoneEditorComponent extends BoneEditorBaseComponent {
     getPresets() {
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnknownBoneEditorComponent, selector: "bonc-unknown-bone-editor", usesInheritance: true, ngImport: i0, template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\r\n<pre>{{bone | json}}</pre>\r\n", styles: [":host{display:block;background-color:#dc143c}\n"], dependencies: [{ kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownBoneEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-unknown-bone-editor', template: "<p>Unknown Bone Editor | bone type: {{bone.type}}</p>\r\n<pre>{{bone | json}}</pre>\r\n", styles: [":host{display:block;background-color:#dc143c}\n"] }]
+            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"] }]
         }] });
 
 // todo: rename class
 class BoneEditorContainerComponent {
-    constructor(componentFactoryResolver) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.removed = new EventEmitter();
-        this.saved = new EventEmitter();
-        this.editing = new EventEmitter();
-        this.DeviceType = DeviceType;
-        this.themePopupIsShown = false;
-        this.device = DeviceType.NotSet;
-        this.nextPreset = () => {
-            if (this.editor === undefined || this.editor === null)
-                return;
-            this.editor.nextPreset();
-        };
-    }
+    anchor;
+    removed = new EventEmitter();
+    saved = new EventEmitter();
+    editing = new EventEmitter();
+    DeviceType = DeviceType;
+    editor;
+    themePopupIsShown = false;
+    _bone;
+    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;
     }
@@ -1499,6 +1486,11 @@ class BoneEditorContainerComponent {
         });
         this.ngOnChanges();
     }
+    nextPreset = () => {
+        if (this.editor === undefined || this.editor === null)
+            return;
+        this.editor.nextPreset();
+    };
     // todo: add or remove visibility feature
     // public setDisabled = (disabled: boolean): void => {
     //   if (this.editor === undefined || this.editor === null)
@@ -1526,13 +1518,13 @@ class BoneEditorContainerComponent {
         //   return false;
         // return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorContainerComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: { locale: "locale", device: "device", map: "map", bone: "bone" }, outputs: { removed: "removed", saved: "saved", editing: "editing" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: SkeletonEditorAnchorDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editor\" class=\"left bar\" [class.inactive]=\"editor.noPresets\">\r\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\r\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\r\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\r\n</div>\r\n\r\n<div class=\"editor-container\"\r\n     [class.disabled]=\"disabled\"\r\n     [style.width]=\"\r\n                      device === DeviceType.Desktop ? '75vw'\r\n                      : device === DeviceType.Tablet ? '55vw'\r\n                      : device === DeviceType.Mobile ? '35vw'\r\n                      : '75vw' \">\r\n  <ng-template boncSkeletonEditorAnchor>\r\n  </ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\r\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\r\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\r\n</div>\r\n", styles: [":host{display:flex}.editor-container{background-color:var(--bg-color)}.editor-container.disabled{opacity:.1;pointer-events:none}.editor-container.mobile{width:350px}.preset{white-space:pre-line}.bar{width:120px;display:flex;flex-direction:column;pointer-events:all}.bar.left:hover,.bar.active{background-color:#111}.bar.hidden{opacity:.2}.bar.left{position:relative;border-right:none}.bar.right{border-left:none;text-align:right}.bar.right .delete{display:none}.bar.right .delete:hover{color:#ff355e}.bar.right.active .delete,.bar.right:hover .delete{display:block}.left.bar.inactive a:hover{cursor:initial;color:#444}.popup{position:absolute;top:0;right:-350px;display:flex;flex-direction:column;width:350px;padding:20px;color:#222;background-color:#fff;border:2px solid black;box-sizing:border-box;z-index:3}.popup a{padding:0!important;cursor:pointer!important}.popup a.close{position:absolute;top:10px;right:10px;color:#666}.popup a.close:hover{background-color:#cf0!important}.popup a.reset{align-self:flex-start;margin-top:30px}.popup a.reset:hover{background-color:#cf0!important}.color-group{display:flex}.color-group:first-of-type{margin-top:20px}.color-group label{flex:1}.color-group input{border:1px solid #222;padding:6px;cursor:pointer}.color-group input:hover,.color-group input:focus{outline:none}.color-group+.color-group{margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SkeletonEditorAnchorDirective, selector: "[boncSkeletonEditorAnchor]" }] }); }
+    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]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BoneEditorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BoneEditorContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-bone-editor-container', template: "<div *ngIf=\"editor\" class=\"left bar\" [class.inactive]=\"editor.noPresets\">\r\n  <!-- <a *ngFor=\"let control of editor.controls\" (click)=\"control.activate()\">{{control.label}}</a> -->\r\n  <!-- <a (click)=\"setDisabled(!disabled)\" class=\"disabled\">block {{disabled ? 'disabled' : 'enabled'}} ({{editor.bone.visibility}})</a> -->\r\n  <a *ngIf=\"editor.currentPreset && !editor.noPresets\" (click)=\"nextPreset()\" class=\"preset\">style:<br />{{editor.currentPreset.title}}</a>\r\n</div>\r\n\r\n<div class=\"editor-container\"\r\n     [class.disabled]=\"disabled\"\r\n     [style.width]=\"\r\n                      device === DeviceType.Desktop ? '75vw'\r\n                      : device === DeviceType.Tablet ? '55vw'\r\n                      : device === DeviceType.Mobile ? '35vw'\r\n                      : '75vw' \">\r\n  <ng-template boncSkeletonEditorAnchor>\r\n  </ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"editor\" [class.active]=\"editor.isEditing || editor.isDirty\" class=\"right bar\">\r\n  <!-- <a *ngIf=\"!editor.isEditing\" (click)=\"editor.remove()\" class=\"delete\">!!! remove</a> -->\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.resetData()\" class=\"reset\">reset</a>\r\n  <a *ngIf=\"editor.isEditing && !editor.isDirty\" (click)=\"editor.finishEditing()\" class=\"close\">close</a>\r\n  <a *ngIf=\"editor.isDirty\" (click)=\"editor.save()\" class=\"save\">apply</a>\r\n</div>\r\n", styles: [":host{display:flex}.editor-container{background-color:var(--bg-color)}.editor-container.disabled{opacity:.1;pointer-events:none}.editor-container.mobile{width:350px}.preset{white-space:pre-line}.bar{width:120px;display:flex;flex-direction:column;pointer-events:all}.bar.left:hover,.bar.active{background-color:#111}.bar.hidden{opacity:.2}.bar.left{position:relative;border-right:none}.bar.right{border-left:none;text-align:right}.bar.right .delete{display:none}.bar.right .delete:hover{color:#ff355e}.bar.right.active .delete,.bar.right:hover .delete{display:block}.left.bar.inactive a:hover{cursor:initial;color:#444}.popup{position:absolute;top:0;right:-350px;display:flex;flex-direction:column;width:350px;padding:20px;color:#222;background-color:#fff;border:2px solid black;box-sizing:border-box;z-index:3}.popup a{padding:0!important;cursor:pointer!important}.popup a.close{position:absolute;top:10px;right:10px;color:#666}.popup a.close:hover{background-color:#cf0!important}.popup a.reset{align-self:flex-start;margin-top:30px}.popup a.reset:hover{background-color:#cf0!important}.color-group{display:flex}.color-group:first-of-type{margin-top:20px}.color-group label{flex:1}.color-group input{border:1px solid #222;padding:6px;cursor:pointer}.color-group input:hover,.color-group input:focus{outline:none}.color-group+.color-group{margin-top:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { anchor: [{
+            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: [{
@@ -1556,11 +1548,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 
 // todo: rename class
 class SkeletonEditorComponent {
-    constructor(editable) {
-        this.editable = editable;
-        this.device = DeviceType.NotSet;
-        this.templatesAreShown = [];
-    }
+    boneEditorContainerList;
+    locale;
+    device = DeviceType.NotSet;
+    templatesAreShown = [];
+    editable = inject((EditableDirective), { host: true });
     ngOnInit() {
         this.editable.externalSaveCall.subscribe(() => {
             this.boneEditorContainerList.forEach(editorContainer => editorContainer.editor?.save());
@@ -1571,6 +1563,7 @@ class SkeletonEditorComponent {
             this.editable.save();
         });
     }
+    map;
     ngOnChanges() {
         this.templatesAreShown.splice(0, this.templatesAreShown.length);
         if (this.bones === undefined)
@@ -1578,6 +1571,7 @@ class SkeletonEditorComponent {
         this.bones.forEach(() => this.templatesAreShown.push(false));
         this.templatesAreShown.push(false);
     }
+    templates;
     get bones() {
         return this.editable?.value ?? [];
     }
@@ -1630,15 +1624,13 @@ class SkeletonEditorComponent {
         this.bones[index1] = this.bones[index2];
         this.bones[index2] = tempBone;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorComponent, deps: [{ token: EditableDirective, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SkeletonEditorComponent, selector: "bonc-skeleton-editor", inputs: { locale: "locale", device: "device", map: "map", templates: "templates" }, viewQueries: [{ propertyName: "boneEditorContainerList", predicate: ["boneEditorContainer"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<ng-template #controls let-index='index'>\r\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\r\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\r\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\r\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\r\n    </div>\r\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\r\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\r\n  </div>\r\n\r\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\r\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\r\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- todo: add trackby -->\r\n<ng-container *ngFor=\"let bone of bones; let i = index\">\r\n  <ng-container>\r\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\r\n  </ng-container>\r\n\r\n  <bonc-bone-editor-container #boneEditorContainer\r\n                              [map]=\"map\"\r\n                              [bone]=\"bone\"\r\n                              [locale]=\"locale\"\r\n                              [device]=\"device\"\r\n                              (removed)=\"removeBone(i)\"\r\n                              (editing)=\"boneEditHandler($event)\"\r\n                              (saved)=\"boneChangeHandler(i, $event)\">\r\n  </bonc-bone-editor-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\r\n", styles: [":host{display:block}.controls{height:62px;display:flex;align-items:center;justify-content:space-between;margin:0 120px}.controls.appearable{background-color:var(--bg-color)}.controls.appearable *{opacity:0}.controls.appearable:hover{background-color:#222}.controls.appearable:hover *{opacity:1}.controls .up-down{width:100px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.controls a{display:flex;align-items:center;justify-content:center;color:#000;background-color:#cf0;-webkit-user-select:none;user-select:none;cursor:pointer}.controls a.add{padding:10px 30px}.controls a.up,.controls a.down,.controls a.remove{padding:4px 8px}.controls a.remove{align-self:flex-end}.controls a:hover{color:#cf0;background-color:#333}.controls a.remove:hover{color:#fff;background-color:#ff355e}.templates{width:220px;height:380px;position:absolute;left:50%;display:flex;flex-direction:column;margin-left:-110px;margin-top:-190px;z-index:10;padding:6px;background-color:#cf0;box-shadow:0 0 78px #000000bf}.templates a{display:flex;flex:1;align-items:center;justify-content:center;background-color:#cf0;text-align:center;cursor:pointer;text-transform:lowercase}.templates a:hover{text-decoration:underline;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BoneEditorContainerComponent, selector: "bonc-bone-editor-container", inputs: ["locale", "device", "map", "bone"], outputs: ["removed", "saved", "editing"] }] }); }
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SkeletonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkeletonEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-skeleton-editor', hostDirectives: [EditableDirective], template: "<ng-template #controls let-index='index'>\r\n  <div [class.appearable]=\"index > 0 && index < bones.length\" class=\"controls\">\r\n    <div *ngIf=\"index < bones.length\" class=\"up-down\">\r\n      <a *ngIf=\"index > 0\" (click)=\"moveDown(index - 1)\" class=\"down\">move down</a>\r\n      <a *ngIf=\"index > 0\" (click)=\"moveUp(index)\" class=\"up\">move up</a>\r\n    </div>\r\n    <a (click)=\"templatesAreShown[index] = true\" class=\"add\">create</a>\r\n    <a *ngIf=\"index < bones.length\" (click)=\"removeBone(index)\" class=\"remove\">remove</a>\r\n  </div>\r\n\r\n  <div *ngIf=\"templatesAreShown[index]\" class=\"templates\">\r\n    <a *ngFor=\"let template of templates\" (click)=\"templatesAreShown[index] = false; createBone(index,template);\">{{template.title}}</a>\r\n    <a (click)=\"templatesAreShown[index] = false\">Close</a>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- todo: add trackby -->\r\n<ng-container *ngFor=\"let bone of bones; let i = index\">\r\n  <ng-container>\r\n    <ng-container *ngTemplateOutlet=\"controls; context: {index: i}\"></ng-container>\r\n  </ng-container>\r\n\r\n  <bonc-bone-editor-container #boneEditorContainer\r\n                              [map]=\"map\"\r\n                              [bone]=\"bone\"\r\n                              [locale]=\"locale\"\r\n                              [device]=\"device\"\r\n                              (removed)=\"removeBone(i)\"\r\n                              (editing)=\"boneEditHandler($event)\"\r\n                              (saved)=\"boneChangeHandler(i, $event)\">\r\n  </bonc-bone-editor-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"controls; context: {index: bones.length}\"></ng-container>\r\n", styles: [":host{display:block}.controls{height:62px;display:flex;align-items:center;justify-content:space-between;margin:0 120px}.controls.appearable{background-color:var(--bg-color)}.controls.appearable *{opacity:0}.controls.appearable:hover{background-color:#222}.controls.appearable:hover *{opacity:1}.controls .up-down{width:100px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.controls a{display:flex;align-items:center;justify-content:center;color:#000;background-color:#cf0;-webkit-user-select:none;user-select:none;cursor:pointer}.controls a.add{padding:10px 30px}.controls a.up,.controls a.down,.controls a.remove{padding:4px 8px}.controls a.remove{align-self:flex-end}.controls a:hover{color:#cf0;background-color:#333}.controls a.remove:hover{color:#fff;background-color:#ff355e}.templates{width:220px;height:380px;position:absolute;left:50%;display:flex;flex-direction:column;margin-left:-110px;margin-top:-190px;z-index:10;padding:6px;background-color:#cf0;box-shadow:0 0 78px #000000bf}.templates a{display:flex;flex:1;align-items:center;justify-content:center;background-color:#cf0;text-align:center;cursor:pointer;text-transform:lowercase}.templates a:hover{text-decoration:underline;font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: EditableDirective, decorators: [{
-                    type: Host
-                }] }], propDecorators: { boneEditorContainerList: [{
+            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: [{
@@ -1663,122 +1655,9 @@ function createPreset(params) {
     };
 }
 
-const formComponents = [
-    TranslationFormComponent,
-    TextFormComponent,
-    SeoFormComponent,
-    SvgFormComponent,
-    OneImageFormComponent,
-    FileFormComponent,
-    LottieFormComponent,
-    UnknownFormComponent
-];
-const components = [
-    ...formComponents,
-    TranslationInputComponent,
-    TranslationTextareaComponent,
-    AdminControlsComponent,
-    EditableGroupComponent,
-    FormControlsComponent,
-    SkeletonEditorComponent,
-    SkeletonEditorAnchorDirective,
-    BoneEditorContainerComponent,
-    UnknownBoneEditorComponent,
-    MediaUploaderComponent,
-    FileUploaderComponent,
-    LinkPopupComponent
-];
-const standaloneDirectives = [
-    EditableDirective
-];
-class BonnieCmsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, declarations: [TranslationFormComponent,
-            TextFormComponent,
-            SeoFormComponent,
-            SvgFormComponent,
-            OneImageFormComponent,
-            FileFormComponent,
-            LottieFormComponent,
-            UnknownFormComponent, TranslationInputComponent,
-            TranslationTextareaComponent,
-            AdminControlsComponent,
-            EditableGroupComponent,
-            FormControlsComponent,
-            SkeletonEditorComponent,
-            SkeletonEditorAnchorDirective,
-            BoneEditorContainerComponent,
-            UnknownBoneEditorComponent,
-            MediaUploaderComponent,
-            FileUploaderComponent,
-            LinkPopupComponent], imports: [CommonModule,
-            FormsModule,
-            CdkTextareaAutosize,
-            BonnieModule,
-            LottieComponent, EditableDirective], exports: [CommonModule,
-            FormsModule,
-            BonnieModule,
-            LottieFormComponent, TranslationFormComponent,
-            TextFormComponent,
-            SeoFormComponent,
-            SvgFormComponent,
-            OneImageFormComponent,
-            FileFormComponent,
-            LottieFormComponent,
-            UnknownFormComponent, TranslationInputComponent,
-            TranslationTextareaComponent,
-            AdminControlsComponent,
-            EditableGroupComponent,
-            FormControlsComponent,
-            SkeletonEditorComponent,
-            SkeletonEditorAnchorDirective,
-            BoneEditorContainerComponent,
-            UnknownBoneEditorComponent,
-            MediaUploaderComponent,
-            FileUploaderComponent,
-            LinkPopupComponent, EditableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, providers: [
-            DataService,
-            AdminDataService
-        ], imports: [CommonModule,
-            FormsModule,
-            BonnieModule,
-            LottieComponent, CommonModule,
-            FormsModule,
-            BonnieModule] }); }
-} // todo: move to standalone
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BonnieCmsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...components,
-                    ],
-                    providers: [
-                        DataService,
-                        AdminDataService
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CdkTextareaAutosize,
-                        BonnieModule,
-                        LottieComponent,
-                        ...standaloneDirectives
-                    ],
-                    exports: [
-                        CommonModule,
-                        FormsModule,
-                        BonnieModule,
-                        LottieFormComponent,
-                        ...components,
-                        ...standaloneDirectives
-                    ]
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, AdminControlsComponent, AdminDataService, BoneEditorBaseComponent, BoneEditorContainerComponent, BonnieCmsModule, DataService, DeviceType, DeviceVisibility, EditableDirective, EditableGroupComponent, FileFormComponent, FileUploaderComponent, FormBaseComponent, FormControlsComponent, LinkPopupComponent, LottieFormComponent, MediaUploaderComponent, OneImageFormComponent, SeoFormComponent, SkeletonEditorAnchorDirective, SkeletonEditorComponent, SvgFormComponent, TextEditorField, TextFormComponent, TextInputStyle, TextSettingType, TranslationFormComponent, TranslationInputComponent, TranslationTextareaComponent, UnknownBoneEditorComponent, UnknownFormComponent, createPreset, hasFlag, isLocalUrlString, regExpIsMobile, setOrRemoveFlag };
+export { API_BASE_URL, AdminControlsComponent, AdminDataService, BoneEditorBaseComponent, BoneEditorContainerComponent, DataService, DeviceType, DeviceVisibility, EditableDirective, EditableGroupComponent, FileFormComponent, FileUploaderComponent, FormBaseComponent, FormControlsComponent, LinkPopupComponent, LottieFormComponent, MediaUploaderComponent, OneImageFormComponent, SeoFormComponent, SkeletonEditorAnchorDirective, SkeletonEditorComponent, SvgFormComponent, TextEditorField, TextFormComponent, TextInputStyle, TextSettingType, TranslationFormComponent, TranslationInputComponent, TranslationTextareaComponent, UnknownBoneEditorComponent, UnknownFormComponent, createPreset, hasFlag, isLocalUrlString, regExpIsMobile, setOrRemoveFlag };
 //# sourceMappingURL=candy-kingdom-bonnie-cms.mjs.map