chore(style-editor): Refactor style editor components for improved configuration and typing.

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-checkbox-group/uve-style-editor-field-checkbox-group.component.html

@@ -1,8 +1,8 @@
 <div class="form-field">
     <label class="field-label">{{ $field().label }}</label>
-    <div class="checkbox-group" [formGroupName]="$field().id">
+    <div class="checkbox-group flex flex-column" [formGroupName]="$field().id">
         @for (option of $options(); track option.value) {
-            <div class="checkbox-item">
+            <div class="flex items-center">
                 <p-checkbox
                     [formControlName]="option.value"
                     [binary]="true"

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-checkbox-group/uve-style-editor-field-checkbox-group.component.scss

@@ -1,12 +1,5 @@
 @use "variables" as *;
 
 .checkbox-group {
-    display: flex;
-    flex-direction: column;
     gap: $spacing-2;
 }
-
-.checkbox-item {
-    display: flex;
-    align-items: center;
-}

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-input/uve-style-editor-field-input.component.html

@@ -1,4 +1,9 @@
 <div class="form-field">
     <label class="field-label" [attr.for]="$field().id">{{ $field().label }}</label>
-    <input pInputText [formControlName]="$field().id" [id]="$field().id" class="uve-input" />
+    <input
+        pInputText
+        [formControlName]="$field().id"
+        [id]="$field().id"
+        class="uve-input"
+        [placeholder]="$field().config.placeholder" />
 </div>

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-radio/uve-style-editor-field-radio.component.html

@@ -13,17 +13,21 @@
                         [formControlName]="$field().id"
                         [value]="option.value"
                         class="radio-image-input" />
-                    <label [for]="$field().id + '-' + option.value" class="radio-image-label">
-                        <img [src]="option.imageURL" [alt]="option.label" class="radio-image" />
+                    <label
+                        [for]="$field().id + '-' + option.value"
+                        class="radio-image-label flex flex-column items-start">
+                        <div class="radio-image-container">
+                            <img [src]="option.imageURL" [alt]="option.label" class="radio-image" />
+                        </div>
                         <span class="radio-image-text">{{ option.label }}</span>
                     </label>
                 </div>
             }
         </div>
     } @else {
-        <div class="radio-group">
+        <div class="radio-group flex flex-column">
             @for (option of $options(); track option.value) {
-                <div class="radio-item">
+                <div class="flex items-center">
                     <p-radioButton
                         [formControlName]="$field().id"
                         [value]="option.value"

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-radio/uve-style-editor-field-radio.component.scss

@@ -2,16 +2,9 @@
 
 /* Regular Radio Styles */
 .radio-group {
-    display: flex;
-    flex-direction: column;
     gap: $spacing-2;
 }
 
-.radio-item {
-    display: flex;
-    align-items: center;
-}
-
 /* Radio Image Styles */
 .field-radio-image {
     margin-bottom: $spacing-4;
@@ -33,34 +26,33 @@
 }
 
 .radio-image-label {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     gap: $spacing-1;
-    padding: $spacing-2;
+    cursor: pointer;
+}
+
+.radio-image-container {
+    max-width: 100%;
+    height: 5.75rem;
+    display: block;
+    width: 100%;
     border: 1px solid $color-palette-surface-500;
     border-radius: $spacing-1;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
     background: $white;
-}
+    transition: all 0.15s ease-in-out;
+    padding: $spacing-1;
 
-.radio-image-label:hover {
-    border-color: $color-palette-surface-800;
-    box-shadow: $shadow-m;
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 }
 
-.radio-image-input:checked + .radio-image-label {
+.radio-image-container:hover {
     border-color: $color-palette-primary-500;
+    box-shadow: $shadow-m;
 }
 
-.radio-image {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    width: 100%;
-}
-
-.radio-image-input:checked + .radio-image-label .radio-image-text {
-    color: $color-palette-primary-500;
+.radio-image-input:checked + .radio-image-label .radio-image-container {
+    border-color: $color-palette-primary-500;
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

@@ -112,7 +112,8 @@ export class DotUveStyleEditorFormComponent {
         if (typeof config?.defaultValue === 'string') {
             return config.defaultValue.trim();
         }
-        return config?.options?.[0]?.value || '';
+
+        return null;
     }
 
     #getCheckboxGroupDefaultValue(

core-web/libs/sdk/uve/src/lib/style-editor/internal.ts

@@ -6,7 +6,8 @@ import {
     StyleEditorForm,
     StyleEditorSection,
     StyleEditorFieldInputType,
-    StyleEditorCheckboxDefaultValue
+    StyleEditorCheckboxDefaultValue,
+    StyleEditorCheckboxOption
 } from './types';
 
 /**
@@ -22,7 +23,8 @@ import {
  *   extracts `placeholder` and `defaultValue` into config
  * - **Radio fields**: Normalizes options (preserves image properties like `imageURL`, `width`, `height`),
  *   extracts `defaultValue` into config
- * - **Checkbox group fields**: Normalizes options and extracts `defaultValue` (as Record<string, boolean>) into config
+ * - **Checkbox group fields**: Normalizes options and derives `defaultValue` from option values
+ *   (creates Record<string, boolean> mapping option keys to their boolean values)
  *
  * @experimental This method is experimental and may be subject to change.
  *
@@ -83,7 +85,6 @@ function normalizeField(field: StyleEditorField): StyleEditorFieldSchema {
         config.options = field.options.map((opt) =>
             typeof opt === 'string' ? { label: opt, value: opt } : opt
         );
-        config.placeholder = field.type === 'dropdown' ? field.placeholder : undefined;
         config.defaultValue = field.defaultValue;
 
         // Handle radio-specific properties
@@ -93,11 +94,18 @@ function normalizeField(field: StyleEditorField): StyleEditorFieldSchema {
     }
 
     if (field.type === 'checkboxGroup') {
-        // Normalize options to consistent format
-        config.options = field.options.map((opt) =>
-            typeof opt === 'string' ? { label: opt, value: opt } : opt
-        );
-        config.defaultValue = field.defaultValue;
+        // Normalize checkbox options - convert to format expected by UVE
+        // Options already have label, key, and value (boolean)
+        config.options = field.options.map((opt: StyleEditorCheckboxOption) => ({
+            label: opt.label,
+            value: opt.key // UVE expects 'value' to be the key identifier
+        }));
+
+        // Derive defaultValue from options - map key to boolean value
+        config.defaultValue = field.options.reduce((acc, opt: StyleEditorCheckboxOption) => {
+            acc[opt.key] = opt.value;
+            return acc;
+        }, {} as StyleEditorCheckboxDefaultValue);
     }
 
     return { ...base, config };