Merge branch 'main' into issue-30399-analytics-rename-to-order

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html

@@ -0,0 +1,60 @@
+<form (ngSubmit)="onSubmit()" [formGroup]="form" class="editor-mode__form">
+    @if (store.allowFileNameEdit()) {
+        <div class="editor-mode__input-container">
+            <label class="p-label-input-required" data-testId="editor-label" for="file-name">
+                {{ 'dot.file.field.action.create.new.file.label' | dm }}
+            </label>
+            <input
+                id="file-name"
+                autocomplete="off"
+                formControlName="name"
+                pInputText
+                placeholder="Ex. template.html"
+                type="text"
+                data-testId="editor-file-name" />
+            <div class="error-message">
+                @let error = store.error();
+                @if (error) {
+                    <small class="p-invalid" data-testId="error-msg">
+                        {{ error | dm: [store.allowFiles()] }}
+                    </small>
+                } @else {
+                    <dot-field-validation-message
+                        [field]="nameField"
+                        [patternErrorMessage]="'dot.file.field.error.type.file.not.extension'"
+                        data-testId="error-message" />
+                }
+            </div>
+        </div>
+    }
+    <div class="file-field__editor-container">
+        <ngx-monaco-editor
+            [class.file-field__code-editor--disabled]="form.disabled"
+            [options]="store.monacoConfig()"
+            (init)="onEditorInit($event)"
+            class="file-field__code-editor"
+            data-testId="code-editor"
+            formControlName="content" />
+
+        @let file = store.file();
+        <div [class.editor-mode__helper--visible]="file.mimeType" class="editor-mode__helper">
+            <i class="pi pi-info-circle"></i>
+            <small>Mime Type: {{ file.mimeType }}</small>
+        </div>
+    </div>
+    <div class="editor-mode__actions">
+        <p-button
+            (click)="cancelUpload()"
+            [label]="'dot.common.cancel' | dm"
+            aria-label="Cancel button"
+            data-testId="cancel-button"
+            styleClass="p-button-outlined"
+            type="button" />
+
+        <p-button
+            [label]="'dot.common.save' | dm"
+            aria-label="Import button"
+            data-testId="import-button"
+            type="submit" />
+    </div>
+</form>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss

@@ -0,0 +1,93 @@
+@use "variables" as *;
+
+:host ::ng-deep {
+    .editor-container {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.file-field__editor-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    gap: $spacing-1;
+}
+
+.file-field__code-editor {
+    border: 1px solid $color-palette-gray-400; // Input
+    display: block;
+    flex-grow: 1;
+    width: 100%;
+    min-height: 30rem;
+    border-radius: $border-radius-md;
+    overflow: auto;
+    position: relative;
+}
+
+.file-field__code-editor--disabled {
+    background-color: $color-palette-gray-200;
+    opacity: 0.5;
+
+    &::ng-deep {
+        .monaco-mouse-cursor-text,
+        .overflow-guard {
+            cursor: not-allowed;
+        }
+    }
+}
+
+.editor-mode__form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.editor-mode__input-container {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+}
+
+.editor-mode__input {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-mode__actions {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.editor-mode__helper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-1;
+    color: $color-palette-gray-700;
+    font-weight: $font-size-sm;
+    visibility: hidden;
+}
+
+.editor-mode__helper--visible {
+    visibility: visible;
+}
+
+.error-message {
+    min-height: $spacing-4; // Fix height to avoid jumping
+    justify-content: flex-start;
+    display: flex;
+}