@cuby-ui/core 0.0.493 → 0.0.495

package/fesm2022/cuby-ui-core.mjs

@@ -9375,6 +9375,7 @@ class CuiUtilityThumbnailComponent {
         this.translocoService = inject(TranslocoService);
         this.frameApiService = inject(CuiFrameApiService);
         this.MAX_FILE_SIZE = 20971520;
+        this.context = input();
         this.thumbnailUrl = computed(() => {
             const thumbnail = this.thumbnail();
             if (!thumbnail?.resource) {
@@ -9402,7 +9403,7 @@ class CuiUtilityThumbnailComponent {
         if (!frameId || !fragmentId) {
             return;
         }
-        this.frameApiService.deleteResource(frameId, fragmentId).subscribe(() => {
+        this.frameApiService.deleteResource(frameId, fragmentId, this.context()).subscribe(() => {
             this.thumbnail.update((prev) => ({ ...prev, fileId: null, name: null, resource: null }));
         });
     }
@@ -9437,7 +9438,7 @@ class CuiUtilityThumbnailComponent {
         }
         const formData = new FormData();
         formData.append('resource', file);
-        this.frameApiService.uploadResource(formData, frameId, fragmentId).subscribe();
+        this.frameApiService.uploadResource(formData, frameId, fragmentId, this.context()).subscribe();
     }
     getCaptureFromVideo(url, file) {
         takeCaptureFromVideo(url).then((capture) => {
@@ -9449,7 +9450,7 @@ class CuiUtilityThumbnailComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUtilityThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUtilityThumbnailComponent, isStandalone: true, selector: "cui-utility-thumbnail", inputs: { thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { thumbnail: "thumbnailChange" }, ngImport: i0, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUtilityThumbnailComponent, isStandalone: true, selector: "cui-utility-thumbnail", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { thumbnail: "thumbnailChange" }, ngImport: i0, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUtilityThumbnailComponent, decorators: [{
             type: Component,
@@ -9551,6 +9552,7 @@ class CuiCriterionInfoFormComponent {
     }
     setResourceFile(resource) {
         if (!resource.fileId) {
+            this.thumbnail.set({ ...resource });
             return;
         }
         this.resourceApiService.get(resource.fileId, this.config().requestOptions)
@@ -9576,7 +9578,7 @@ class CuiCriterionInfoFormComponent {
         return !this.isDescriptionEmpty() && !this.form.invalid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCriterionInfoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCriterionInfoFormComponent, isStandalone: true, selector: "cui-criterion-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n\n        <cui-utility-thumbnail\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCriterionInfoFormComponent, isStandalone: true, selector: "cui-criterion-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n\n        <cui-utility-thumbnail\n            [context]=\"config().requestOptions\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["context", "thumbnail", "framerId"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCriterionInfoFormComponent, decorators: [{
             type: Component,
@@ -9592,7 +9594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiUtilityThumbnailComponent,
                         ReactiveFormsModule,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n\n        <cui-utility-thumbnail\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n\n        <cui-utility-thumbnail\n            [context]=\"config().requestOptions\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
         }], ctorParameters: () => [] });
 
 const UTILITY_MODAL_SERVICE_TOKEN = new InjectionToken('UTILITY_MODAL_SERVICE_TOKEN');
@@ -9773,6 +9775,7 @@ class CuiInstructionInfoFormComponent {
     }
     setResourceFile(resource) {
         if (!resource.fileId) {
+            this.thumbnail.set({ ...resource });
             return;
         }
         this.resourceApiService.get(resource.fileId, this.config().requestOptions)
@@ -9798,7 +9801,7 @@ class CuiInstructionInfoFormComponent {
         return !this.isDescriptionEmpty() && !this.form.invalid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiInstructionInfoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiInstructionInfoFormComponent, isStandalone: true, selector: "cui-instruction-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiInstructionInfoFormComponent, isStandalone: true, selector: "cui-instruction-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [context]=\"config().requestOptions\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["context", "thumbnail", "framerId"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiInstructionInfoFormComponent, decorators: [{
             type: Component,
@@ -9814,7 +9817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiUtilityThumbnailComponent,
                         ReactiveFormsModule,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"descriptionId\"\n            >\n                {{ t('SHORT_DESCRIPTION') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"descriptionId\"\n                cuiTextFieldPlaceholder=\"{{ t('SHORT_DESCRIPTION') }}...\"\n                [cuiTextFieldIsError]=\"isDescriptionError\"\n                [formControl]=\"form.controls.description\"\n            />\n\n            @if (isDescriptionError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.description\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [context]=\"config().requestOptions\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiInstructionInfoComponent {