@candy-kingdom/bonnie-cms 0.9.0 → 0.11.0

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

@@ -66,11 +66,6 @@ import { MediaObjectFit, BonnieModule } from '@candy-kingdom/bonnie';
  * Any changes made to this file can be lost when this file is regenerated.
  */
 
-/**
- * This is a TypeGen auto-generated file.
- * Any changes made to this file can be lost when this file is regenerated.
- */
-
 /**
  * This is a TypeGen auto-generated file.
  * Any changes made to this file can be lost when this file is regenerated.
@@ -81,6 +76,16 @@ var TextSettingType;
     TextSettingType[TextSettingType["MultiLine"] = 1] = "MultiLine";
 })(TextSettingType || (TextSettingType = {}));
 
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
+/**
+ * This is a TypeGen auto-generated file.
+ * Any changes made to this file can be lost when this file is regenerated.
+ */
+
 /**
  * This is a TypeGen auto-generated file.
  * Any changes made to this file can be lost when this file is regenerated.
@@ -580,40 +585,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: [{ required: true }]
             }] } });
 
-class SeoFormComponent extends FormBaseComponent {
-    constructor() {
-        super(...arguments);
-        this._pageId = '';
-        this.ogImageUploadUrl = '';
-        this.label = '';
-    }
-    ngOnInit() {
-        this.editable.externalSaveCall.subscribe(() => {
-            this.editable.save();
-        });
-    }
-    set pageId(value) {
-        this._pageId = value;
-        this.ogImageUploadUrl = `/api/admin/page/Og-Image?pageId=${this.pageId}`; // todo: replace with link to single image api
-    }
-    get pageId() {
-        return this._pageId;
-    }
-    ResToSrc(res) {
-        return res.url;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SeoFormComponent, selector: "bonc-seo-form", inputs: { label: "label", pageId: "pageId" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bonc-seo-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630px</label>\r\n    <!-- <simple-file-uploader *ngIf=\"locale === 'en'\"\r\n                          [(src)]=\"editable.value.ogImage.en\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader>\r\n\r\n    <simple-file-uploader *ngIf=\"locale === 'ru'\"\r\n                          [(src)]=\"editable.value.ogImage.ru\"\r\n                          [forceUploadUrl]=\"ogImageUploadUrl\"\r\n                          [uploadType]=\"MediaType.Image\"\r\n                          [needDelete]=\"true\"\r\n                          (deleteFile)=\"deleteOgImage()\"\r\n                          [ratio]=\"1200/630\"\r\n                          [resToSrc]=\"ResToSrc\"\r\n                          (srcChange)=\"editable.startEditing(); editable.patchSave('ogImage',editable.value.ogImage)\">\r\n    </simple-file-uploader> -->\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], pageId: [{
-                type: Input
-            }] } });
-
 class FileUploaderComponent {
     constructor(sanitizer, http, cd) {
         this.sanitizer = sanitizer;
@@ -705,11 +676,11 @@ 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?.url?.length === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-file-uploader', template: "<div *ngIf=\"src?.url?.length === undefined || src?.url?.length === 0\">Upload file</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div (click)=\"selectFile($event)\" class=\"media-container\">\r\n  <input #fileInput [accept]=\"fileTypeMask\" (change)=\"onFileSelect(fileInput)\" name=\"media\" type=\"file\" />\r\n  <span *ngIf=\"isUploading\"\r\n        [style.clip-path]=\"clipStyle\"\r\n        [style.-webkit-clip-path]=\"clipStyle\"\r\n        class=\"loader\"></span>\r\n\r\n  <span *ngIf=\"isUploading\" class=\"loader-text\">\r\n    <span *ngIf=\"progress < 1\">{{100 * progress | number: '1.0-0'}}%</span>\r\n    <span *ngIf=\"progress >= 1\">converting</span>\r\n  </span>\r\n</div>\r\n", styles: [":host{display:block;background-color:#000;position:relative}.media-container{display:block;position:absolute;inset:0;cursor:pointer}.media-container:hover:hover:after{display:flex;justify-content:center;align-items:center;content:\"\";position:absolute;color:silver;inset:0;font-weight:700;font-size:50pt;pointer-events:none;background-color:#ccff00b3}.media-container img,.media-container video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}input[type=file]{display:none}.loader{position:absolute;inset:0;background-color:#cf0}.loader-text{background-color:#000;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:20pt;margin-top:-10pt;color:#fff}\n"] }]
+            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: [{
                 type: ViewChild,
                 args: ['fileInput', { static: true }]
@@ -724,6 +695,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Input
             }] } });
 
+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 = '';
+        this.uploadMap.set('', this._uploadUrl);
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    set label(newValue) {
+        this._label = newValue;
+    }
+    get label() {
+        return this._label;
+    }
+    set uploadUrl(newValue) {
+        this._uploadUrl = newValue;
+        this.uploadMap.set('', this._uploadUrl);
+        this.cd.detectChanges();
+    }
+    set mimeTypes(newValue) {
+        this._mimeTypes = newValue.length === 0 ? DefaultImageMimeTypes : newValue;
+        this.cd.detectChanges();
+    }
+    get mimeTypes() {
+        return this._mimeTypes;
+    }
+    onFileUploaded(fileSrc) {
+        this.editable.startEditing();
+        const svgSrc = fileSrc;
+        this.editable.value = svgSrc;
+        this.editable.updateDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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: [{
+                type: Input
+            }], uploadUrl: [{
+                type: Input
+            }], mimeTypes: [{
+                type: Input
+            }] } });
+
+class SeoFormComponent extends FormBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.imageWidth = 1200;
+        this.imageHeight = 630;
+        this._pageId = '';
+        this.ogImageUploadUrl = '';
+        this.label = '';
+    }
+    ngOnInit() {
+        this.editable.externalSaveCall.subscribe(() => {
+            this.editable.save();
+        });
+    }
+    set pageId(value) {
+        this._pageId = value;
+        this.ogImageUploadUrl = `/api/admin/page/Og-Image?pageId=${this.pageId}`; // todo: replace with link to single image api
+    }
+    get pageId() {
+        return this._pageId;
+    }
+    ResToSrc(res) {
+        return res.url;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SeoFormComponent, selector: "bonc-seo-form", inputs: { label: "label", pageId: "pageId" }, usesInheritance: true, hostDirectives: [{ directive: EditableDirective }], ngImport: i0, template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630</label>\r\n\r\n    <bonc-one-image-form [(ngModel)]=\"editable.value.image\"\r\n                         [uploadUrl]=\"'/api/admin/upload/image?width=' + imageWidth + '&height='+imageHeight + '&format=image/jpeg'\"\r\n                         [locale]=\"locale\">\r\n    </bonc-one-image-form>\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: OneImageFormComponent, selector: "bonc-one-image-form", inputs: ["label", "uploadUrl", "mimeTypes"] }, { kind: "component", type: TranslationInputComponent, selector: "bonc-translation-input", inputs: ["text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: TranslationTextareaComponent, selector: "bonc-translation-textarea", inputs: ["minRows", "maxRows", "text", "locale", "device"], outputs: ["startEditing", "changed", "blurred"] }, { kind: "component", type: FormControlsComponent, selector: "bonc-form-controls", inputs: ["editable"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SeoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bonc-seo-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls *ngIf=\"editable.value\" [editable]=\"editable\">\r\n  <h2 *ngIf=\"label\">{{label}}</h2>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Title</label>\r\n    <bonc-translation-input [text]=\"editable.value.title\"\r\n                            [locale]=\"locale\"\r\n                            (startEditing)=\"editable.startEditing()\"\r\n                            (changed)=\"editable.updateDirty()\"\r\n                            (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-input>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Description</label>\r\n    <bonc-translation-textarea [text]=\"editable.value.description\"\r\n                               [locale]=\"locale\"\r\n                               (startEditing)=\"editable.startEditing()\"\r\n                               (changed)=\"editable.updateDirty()\"\r\n                               (blurred)=\"editable.updateDirty()\">\r\n    </bonc-translation-textarea>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n    <label>Share image | 1200x630</label>\r\n\r\n    <bonc-one-image-form [(ngModel)]=\"editable.value.image\"\r\n                         [uploadUrl]=\"'/api/admin/upload/image?width=' + imageWidth + '&height='+imageHeight + '&format=image/jpeg'\"\r\n                         [locale]=\"locale\">\r\n    </bonc-one-image-form>\r\n\r\n  </div>\r\n\r\n</bonc-form-controls>\r\n\r\n<div *ngIf=\"!editable.value\">Editable Value canot be null or undefined</div>\r\n", styles: [":host{display:block}bonc-one-image-form{max-width:600px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], pageId: [{
+                type: Input
+            }] } });
+
 class SvgFormComponent extends FormBaseComponent {
     constructor(editable) {
         super(editable);
@@ -751,11 +814,11 @@ class SvgFormComponent extends FormBaseComponent {
         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}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 { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SvgFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bonc-svg-form', hostDirectives: [EditableDirective], template: "<bonc-form-controls [editable]=\"editable\">\r\n  <label *ngIf=\"label\">{{label}}</label>\r\n  <bonc-file-uploader [src]=\"editable.value\"\r\n                      [uploadTypes]=\"[SvgMime]\"\r\n                      [uploadUrlMap]=\"uploadMap\"\r\n                      (srcChange)=\"onFileUploaded($event)\">\r\n    <img *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [src]=\"editable.value?.url\" />\r\n  </bonc-file-uploader>\r\n\r\n  <a *ngIf=\"editable.value?.url?.length ?? 0 > 0\" [href]=\"editable.value!.url\" download target=\"_blank\">Download</a>\r\n\r\n</bonc-form-controls>\r\n", styles: [":host{display:block}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}a{color:silver}\n"] }]
+            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: [{
@@ -1594,6 +1657,7 @@ const formComponents = [
     TextFormComponent,
     SeoFormComponent,
     SvgFormComponent,
+    OneImageFormComponent,
     FileFormComponent,
     LottieFormComponent,
     UnknownFormComponent
@@ -1622,6 +1686,7 @@ class BonnieCmsModule {
             TextFormComponent,
             SeoFormComponent,
             SvgFormComponent,
+            OneImageFormComponent,
             FileFormComponent,
             LottieFormComponent,
             UnknownFormComponent, TranslationInputComponent,
@@ -1646,6 +1711,7 @@ class BonnieCmsModule {
             TextFormComponent,
             SeoFormComponent,
             SvgFormComponent,
+            OneImageFormComponent,
             FileFormComponent,
             LottieFormComponent,
             UnknownFormComponent, TranslationInputComponent,
@@ -1703,5 +1769,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * 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, 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, 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 };
 //# sourceMappingURL=candy-kingdom-bonnie-cms.mjs.map