@expeed/ngx-data-mapper 1.2.3 → 1.2.4

package/fesm2022/expeed-ngx-data-mapper.mjs

@@ -2952,6 +2952,7 @@ class SchemaEditorComponent {
     }
     showJsonToggle = true;
     showSchemaName = true;
+    showDisplayType = false;
     schemaChange = new EventEmitter();
     save = new EventEmitter();
     schemaName = signal('New Schema', ...(ngDevMode ? [{ debugName: "schemaName" }] : []));
@@ -2968,6 +2969,12 @@ class SchemaEditorComponent {
         { value: 'object', label: 'Object', icon: 'data_object' },
         { value: 'array', label: 'Array', icon: 'data_array' },
     ];
+    displayTypes = [
+        { value: 'textbox', label: 'Textbox', icon: 'edit' },
+        { value: 'dropdown', label: 'Dropdown', icon: 'arrow_drop_down_circle' },
+        { value: 'textarea', label: 'Textarea', icon: 'notes' },
+        { value: 'richtext', label: 'Rich Text', icon: 'format_color_text' },
+    ];
     generateId() {
         return `field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     }
@@ -2986,6 +2993,7 @@ class SchemaEditorComponent {
             id: this.generateId(),
             name: '',
             type: 'string',
+            displayType: 'textbox',
             isEditing: true,
             expanded: false,
         };
@@ -3002,6 +3010,7 @@ class SchemaEditorComponent {
             id: this.generateId(),
             name: '',
             type: 'string',
+            displayType: 'textbox',
             isEditing: true,
         };
         parent.children.push(newField);
@@ -3073,6 +3082,19 @@ class SchemaEditorComponent {
         if ((type === 'object' || type === 'array') && !field.children) {
             field.children = [];
         }
+        // Set default display type for string, clear for other types
+        if (type === 'string') {
+            field.displayType = field.displayType || 'textbox';
+        }
+        else {
+            field.displayType = undefined;
+        }
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Handle display type change
+    onDisplayTypeChange(field, displayType) {
+        field.displayType = displayType;
         this.fields.update(fields => [...fields]);
         this.emitChange();
     }
@@ -3082,10 +3104,12 @@ class SchemaEditorComponent {
         this.fields.update(fields => [...fields]);
         this.emitChange();
     }
-    // Update field description
+    // Update field description (only update the field, don't trigger re-render)
     onDescriptionChange(field, description) {
         field.description = description;
-        this.fields.update(fields => [...fields]);
+    }
+    // Emit change when description input loses focus
+    onDescriptionBlur() {
         this.emitChange();
     }
     // Toggle allowed values editor
@@ -3344,6 +3368,7 @@ class SchemaEditorComponent {
             id: this.generateId(),
             name,
             type: this.jsonSchemaTypeToEditorType(schema),
+            displayType: schema['x-display-type'],
             description: schema.description,
             required: isRequired,
             allowedValues: schema.enum,
@@ -3470,6 +3495,10 @@ class SchemaEditorComponent {
         if (field.defaultValue !== undefined) {
             schema['default'] = field.defaultValue;
         }
+        // Add display type (custom extension)
+        if (field.displayType) {
+            schema['x-display-type'] = field.displayType;
+        }
         return schema;
     }
     stripEditingState(fields) {
@@ -3534,7 +3563,7 @@ class SchemaEditorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaEditorComponent, isStandalone: true, selector: "schema-editor", inputs: { schema: "schema", showJsonToggle: "showJsonToggle", showSchemaName: "showSchemaName" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Left section: field controls -->\n              <div class=\"field-left\">\n                <!-- Drag Handle -->\n                <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n\n                <!-- Indent/Outdent Buttons -->\n                <div class=\"indent-buttons\">\n                  <button\n                    class=\"indent-btn\"\n                    [disabled]=\"!canIndent(field, fields())\"\n                    (click)=\"indentField(field, fields())\"\n                    matTooltip=\"Move into previous object/array\"\n                  >\n                    <mat-icon>chevron_right</mat-icon>\n                  </button>\n                  <button\n                    class=\"indent-btn\"\n                    disabled\n                    matTooltip=\"Move out of parent\"\n                  >\n                    <mat-icon>chevron_left</mat-icon>\n                  </button>\n                </div>\n\n                <!-- Expand/Collapse -->\n                @if (field.type === 'object' || field.type === 'array') {\n                  <button\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(field)\"\n                    [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\"\n                  >\n                    <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n                  </button>\n                } @else {\n                  <span class=\"expand-placeholder\"></span>\n                }\n\n                <!-- Type Icon -->\n                <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n                <!-- Field Name -->\n                @if (field.isEditing) {\n                  <input\n                    class=\"field-name-input\"\n                    [value]=\"field.name\"\n                    (input)=\"onFieldNameChange(field, $event)\"\n                    (blur)=\"stopEdit(field)\"\n                    (keydown)=\"onFieldNameKeydown($event, field)\"\n                    placeholder=\"Field name\"\n                    autofocus\n                  />\n                } @else {\n                  <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n                    {{ field.name || 'unnamed' }}\n                    @if (field.type === 'array') {\n                      <span class=\"array-indicator\">[]</span>\n                    }\n                  </span>\n                }\n\n                <!-- Required Toggle -->\n                <button\n                  class=\"required-btn\"\n                  [class.is-required]=\"field.required\"\n                  (click)=\"toggleRequired(field)\"\n                  [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n                >\n                  <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n                </button>\n              </div>\n\n              <!-- Middle section: description (flexible) -->\n              <input\n                class=\"description-input\"\n                [value]=\"field.description || ''\"\n                (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                placeholder=\"Description...\"\n              />\n\n              <!-- Right section: type and actions (fixed position) -->\n              <div class=\"field-right\">\n                <!-- Type Selector -->\n                <mat-form-field appearance=\"outline\" class=\"type-selector\">\n                  <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n                    @for (type of fieldTypes; track type.value) {\n                      <mat-option [value]=\"type.value\">\n                        <mat-icon>{{ type.icon }}</mat-icon>\n                        {{ type.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <!-- Actions -->\n                <div class=\"field-actions\">\n                  @if (field.type === 'object' || field.type === 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"addChildField(field)\"\n                      matTooltip=\"Add child field\"\n                    >\n                      <mat-icon>add_circle_outline</mat-icon>\n                    </button>\n                  }\n                  @if (field.type === 'string' || field.type === 'number') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleValuesEditor(field)\"\n                      [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n                      [class.has-values]=\"field.allowedValues?.length\"\n                    >\n                      <mat-icon>list</mat-icon>\n                    </button>\n                  }\n                  @if (field.type !== 'object' && field.type !== 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleDefaultEditor(field)\"\n                      [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                      [class.has-default]=\"field.defaultValue !== undefined\"\n                    >\n                      <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n                    </button>\n                  }\n                  <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #fieldMenu=\"matMenu\">\n                    <button mat-menu-item (click)=\"startEdit(field)\">\n                      <mat-icon>edit</mat-icon>\n                      <span>Rename</span>\n                    </button>\n                    <button mat-menu-item (click)=\"duplicateField(field, fields())\">\n                      <mat-icon>content_copy</mat-icon>\n                      <span>Duplicate</span>\n                    </button>\n                    <button mat-menu-item (click)=\"deleteField(field, fields())\" class=\"delete-action\">\n                      <mat-icon>delete</mat-icon>\n                      <span>Delete</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </div>\n            </div>\n\n            <!-- Allowed Values Editor -->\n            @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n              <div class=\"allowed-values-editor\">\n                <div class=\"values-header\">\n                  <span class=\"values-label\">Allowed values:</span>\n                  <input\n                    #valueInput\n                    class=\"value-input\"\n                    type=\"text\"\n                    placeholder=\"Type value and press Enter\"\n                    (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n                  />\n                  <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, $event)\" matTooltip=\"Add value\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </div>\n                @if (field.allowedValues && field.allowedValues.length > 0) {\n                  <div class=\"values-list\">\n                    @for (value of field.allowedValues; track value; let vi = $index) {\n                      <span class=\"value-chip\">\n                        {{ value }}\n                        <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                          <mat-icon>close</mat-icon>\n                        </button>\n                      </span>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"no-values\">No values defined yet</div>\n                }\n              </div>\n            }\n\n            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, vi)\" matTooltip=\"Remove\">\n                                    <mat-icon>close</mat-icon>\n                                  </button>\n                                </span>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"no-values\">No values defined yet</div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"empty-nested\">\n                    <span>No child fields</span>\n                    <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n                      <mat-icon>add</mat-icon>\n                      Add field\n                    </button>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      @if (field.type === 'object' || field.type === 'array') {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Middle section: description (flexible) -->\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n      placeholder=\"Description...\"\n    />\n\n    <!-- Right section: type and actions (fixed position) -->\n    <div class=\"field-right\">\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor(field)\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #nestedMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;box-sizing:border-box}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;max-width:100%;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector{width:140px;flex-shrink:0;margin-right:8px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:128px;flex-shrink:0;margin-left:8px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{display:block;min-height:30px;margin-top:4px;margin-bottom:8px;padding-left:32px}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor{margin-left:16px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i9$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i10.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i10.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaEditorComponent, isStandalone: true, selector: "schema-editor", inputs: { schema: "schema", showJsonToggle: "showJsonToggle", showSchemaName: "showSchemaName", showDisplayType: "showDisplayType" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Left section: field controls -->\n              <div class=\"field-left\">\n                <!-- Drag Handle -->\n                <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n\n                <!-- Indent/Outdent Buttons -->\n                <div class=\"indent-buttons\">\n                  <button\n                    class=\"indent-btn\"\n                    [disabled]=\"!canIndent(field, fields())\"\n                    (click)=\"indentField(field, fields())\"\n                    matTooltip=\"Move into previous object/array\"\n                  >\n                    <mat-icon>chevron_right</mat-icon>\n                  </button>\n                  <button\n                    class=\"indent-btn\"\n                    disabled\n                    matTooltip=\"Move out of parent\"\n                  >\n                    <mat-icon>chevron_left</mat-icon>\n                  </button>\n                </div>\n\n                <!-- Expand/Collapse -->\n                @if (field.type === 'object' || field.type === 'array') {\n                  <button\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(field)\"\n                    [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\"\n                  >\n                    <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n                  </button>\n                } @else {\n                  <span class=\"expand-placeholder\"></span>\n                }\n\n                <!-- Type Icon -->\n                <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n                <!-- Field Name -->\n                @if (field.isEditing) {\n                  <input\n                    class=\"field-name-input\"\n                    [value]=\"field.name\"\n                    (input)=\"onFieldNameChange(field, $event)\"\n                    (blur)=\"stopEdit(field)\"\n                    (keydown)=\"onFieldNameKeydown($event, field)\"\n                    placeholder=\"Field name\"\n                    autofocus\n                  />\n                } @else {\n                  <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n                    {{ field.name || 'unnamed' }}\n                    @if (field.type === 'array') {\n                      <span class=\"array-indicator\">[]</span>\n                    }\n                  </span>\n                }\n\n                <!-- Required Toggle -->\n                <button\n                  class=\"required-btn\"\n                  [class.is-required]=\"field.required\"\n                  (click)=\"toggleRequired(field)\"\n                  [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n                >\n                  <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n                </button>\n              </div>\n\n              <!-- Middle section: description (flexible) -->\n              <input\n                class=\"description-input\"\n                [value]=\"field.description || ''\"\n                (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                (blur)=\"onDescriptionBlur()\"\n                placeholder=\"Description...\"\n              />\n\n              <!-- Right section: type and actions (fixed position) -->\n              <div class=\"field-right\">\n                <!-- Type Selector -->\n                <mat-form-field appearance=\"outline\" class=\"type-selector\">\n                  <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n                    @for (type of fieldTypes; track type.value) {\n                      <mat-option [value]=\"type.value\">\n                        <mat-icon>{{ type.icon }}</mat-icon>\n                        {{ type.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <!-- Display Type Selector (only for string type) -->\n                @if (showDisplayType && field.type === 'string') {\n                  <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n                    <mat-select [value]=\"field.displayType || 'textbox'\" (selectionChange)=\"onDisplayTypeChange(field, $event.value)\">\n                      @for (displayType of displayTypes; track displayType.value) {\n                        <mat-option [value]=\"displayType.value\">\n                          <mat-icon>{{ displayType.icon }}</mat-icon>\n                          {{ displayType.label }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                }\n\n                <!-- Actions -->\n                <div class=\"field-actions\">\n                  @if (field.type === 'object' || field.type === 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"addChildField(field)\"\n                      matTooltip=\"Add child field\"\n                    >\n                      <mat-icon>add_circle_outline</mat-icon>\n                    </button>\n                  }\n                  @if (field.type === 'string' || field.type === 'number') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleValuesEditor(field)\"\n                      [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n                      [class.has-values]=\"field.allowedValues?.length\"\n                    >\n                      <mat-icon>list</mat-icon>\n                    </button>\n                  }\n                  @if (field.type !== 'object' && field.type !== 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleDefaultEditor(field)\"\n                      [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                      [class.has-default]=\"field.defaultValue !== undefined\"\n                    >\n                      <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n                    </button>\n                  }\n                  <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #fieldMenu=\"matMenu\">\n                    <button mat-menu-item (click)=\"startEdit(field)\">\n                      <mat-icon>edit</mat-icon>\n                      <span>Rename</span>\n                    </button>\n                    <button mat-menu-item (click)=\"duplicateField(field, fields())\">\n                      <mat-icon>content_copy</mat-icon>\n                      <span>Duplicate</span>\n                    </button>\n                    <button mat-menu-item (click)=\"deleteField(field, fields())\" class=\"delete-action\">\n                      <mat-icon>delete</mat-icon>\n                      <span>Delete</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </div>\n            </div>\n\n            <!-- Allowed Values Editor -->\n            @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n              <div class=\"allowed-values-editor\">\n                <div class=\"values-header\">\n                  <span class=\"values-label\">Allowed values:</span>\n                  <input\n                    #valueInput\n                    class=\"value-input\"\n                    type=\"text\"\n                    placeholder=\"Type value and press Enter\"\n                    (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n                  />\n                  <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, $event)\" matTooltip=\"Add value\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </div>\n                @if (field.allowedValues && field.allowedValues.length > 0) {\n                  <div class=\"values-list\">\n                    @for (value of field.allowedValues; track value; let vi = $index) {\n                      <span class=\"value-chip\">\n                        {{ value }}\n                        <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                          <mat-icon>close</mat-icon>\n                        </button>\n                      </span>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"no-values\">No values defined yet</div>\n                }\n              </div>\n            }\n\n            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, vi)\" matTooltip=\"Remove\">\n                                    <mat-icon>close</mat-icon>\n                                  </button>\n                                </span>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"no-values\">No values defined yet</div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"empty-nested\">\n                    <span>No child fields</span>\n                    <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n                      <mat-icon>add</mat-icon>\n                      Add field\n                    </button>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      @if (field.type === 'object' || field.type === 'array') {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Middle section: description (flexible) -->\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                (blur)=\"onDescriptionBlur()\"\n      placeholder=\"Description...\"\n    />\n\n    <!-- Right section: type and actions (fixed position) -->\n    <div class=\"field-right\">\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <!-- Display Type Selector (only for string type) -->\n      @if (showDisplayType && field.type === 'string') {\n        <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n          <mat-select [value]=\"field.displayType || 'textbox'\" (selectionChange)=\"onDisplayTypeChange(field, $event.value)\">\n            @for (displayType of displayTypes; track displayType.value) {\n              <mat-option [value]=\"displayType.value\">\n                <mat-icon>{{ displayType.icon }}</mat-icon>\n                {{ displayType.label }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor(field)\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #nestedMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;box-sizing:border-box}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;max-width:100%;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:140px;flex-shrink:0;margin-right:8px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:130px}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:128px;flex-shrink:0;margin-left:8px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{display:block;min-height:30px;margin-top:4px;margin-bottom:8px;padding-left:32px}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor{margin-left:16px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i9$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i10.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i10.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, decorators: [{
             type: Component,
@@ -3550,13 +3579,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatMenuModule,
                         MatButtonToggleModule,
                         DragDropModule,
-                    ], template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Left section: field controls -->\n              <div class=\"field-left\">\n                <!-- Drag Handle -->\n                <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n\n                <!-- Indent/Outdent Buttons -->\n                <div class=\"indent-buttons\">\n                  <button\n                    class=\"indent-btn\"\n                    [disabled]=\"!canIndent(field, fields())\"\n                    (click)=\"indentField(field, fields())\"\n                    matTooltip=\"Move into previous object/array\"\n                  >\n                    <mat-icon>chevron_right</mat-icon>\n                  </button>\n                  <button\n                    class=\"indent-btn\"\n                    disabled\n                    matTooltip=\"Move out of parent\"\n                  >\n                    <mat-icon>chevron_left</mat-icon>\n                  </button>\n                </div>\n\n                <!-- Expand/Collapse -->\n                @if (field.type === 'object' || field.type === 'array') {\n                  <button\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(field)\"\n                    [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\"\n                  >\n                    <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n                  </button>\n                } @else {\n                  <span class=\"expand-placeholder\"></span>\n                }\n\n                <!-- Type Icon -->\n                <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n                <!-- Field Name -->\n                @if (field.isEditing) {\n                  <input\n                    class=\"field-name-input\"\n                    [value]=\"field.name\"\n                    (input)=\"onFieldNameChange(field, $event)\"\n                    (blur)=\"stopEdit(field)\"\n                    (keydown)=\"onFieldNameKeydown($event, field)\"\n                    placeholder=\"Field name\"\n                    autofocus\n                  />\n                } @else {\n                  <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n                    {{ field.name || 'unnamed' }}\n                    @if (field.type === 'array') {\n                      <span class=\"array-indicator\">[]</span>\n                    }\n                  </span>\n                }\n\n                <!-- Required Toggle -->\n                <button\n                  class=\"required-btn\"\n                  [class.is-required]=\"field.required\"\n                  (click)=\"toggleRequired(field)\"\n                  [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n                >\n                  <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n                </button>\n              </div>\n\n              <!-- Middle section: description (flexible) -->\n              <input\n                class=\"description-input\"\n                [value]=\"field.description || ''\"\n                (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                placeholder=\"Description...\"\n              />\n\n              <!-- Right section: type and actions (fixed position) -->\n              <div class=\"field-right\">\n                <!-- Type Selector -->\n                <mat-form-field appearance=\"outline\" class=\"type-selector\">\n                  <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n                    @for (type of fieldTypes; track type.value) {\n                      <mat-option [value]=\"type.value\">\n                        <mat-icon>{{ type.icon }}</mat-icon>\n                        {{ type.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <!-- Actions -->\n                <div class=\"field-actions\">\n                  @if (field.type === 'object' || field.type === 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"addChildField(field)\"\n                      matTooltip=\"Add child field\"\n                    >\n                      <mat-icon>add_circle_outline</mat-icon>\n                    </button>\n                  }\n                  @if (field.type === 'string' || field.type === 'number') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleValuesEditor(field)\"\n                      [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n                      [class.has-values]=\"field.allowedValues?.length\"\n                    >\n                      <mat-icon>list</mat-icon>\n                    </button>\n                  }\n                  @if (field.type !== 'object' && field.type !== 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleDefaultEditor(field)\"\n                      [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                      [class.has-default]=\"field.defaultValue !== undefined\"\n                    >\n                      <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n                    </button>\n                  }\n                  <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #fieldMenu=\"matMenu\">\n                    <button mat-menu-item (click)=\"startEdit(field)\">\n                      <mat-icon>edit</mat-icon>\n                      <span>Rename</span>\n                    </button>\n                    <button mat-menu-item (click)=\"duplicateField(field, fields())\">\n                      <mat-icon>content_copy</mat-icon>\n                      <span>Duplicate</span>\n                    </button>\n                    <button mat-menu-item (click)=\"deleteField(field, fields())\" class=\"delete-action\">\n                      <mat-icon>delete</mat-icon>\n                      <span>Delete</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </div>\n            </div>\n\n            <!-- Allowed Values Editor -->\n            @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n              <div class=\"allowed-values-editor\">\n                <div class=\"values-header\">\n                  <span class=\"values-label\">Allowed values:</span>\n                  <input\n                    #valueInput\n                    class=\"value-input\"\n                    type=\"text\"\n                    placeholder=\"Type value and press Enter\"\n                    (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n                  />\n                  <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, $event)\" matTooltip=\"Add value\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </div>\n                @if (field.allowedValues && field.allowedValues.length > 0) {\n                  <div class=\"values-list\">\n                    @for (value of field.allowedValues; track value; let vi = $index) {\n                      <span class=\"value-chip\">\n                        {{ value }}\n                        <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                          <mat-icon>close</mat-icon>\n                        </button>\n                      </span>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"no-values\">No values defined yet</div>\n                }\n              </div>\n            }\n\n            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, vi)\" matTooltip=\"Remove\">\n                                    <mat-icon>close</mat-icon>\n                                  </button>\n                                </span>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"no-values\">No values defined yet</div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"empty-nested\">\n                    <span>No child fields</span>\n                    <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n                      <mat-icon>add</mat-icon>\n                      Add field\n                    </button>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      @if (field.type === 'object' || field.type === 'array') {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Middle section: description (flexible) -->\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n      placeholder=\"Description...\"\n    />\n\n    <!-- Right section: type and actions (fixed position) -->\n    <div class=\"field-right\">\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor(field)\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #nestedMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;box-sizing:border-box}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;max-width:100%;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector{width:140px;flex-shrink:0;margin-right:8px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:128px;flex-shrink:0;margin-left:8px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{display:block;min-height:30px;margin-top:4px;margin-bottom:8px;padding-left:32px}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor{margin-left:16px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"] }]
+                    ], template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Left section: field controls -->\n              <div class=\"field-left\">\n                <!-- Drag Handle -->\n                <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n\n                <!-- Indent/Outdent Buttons -->\n                <div class=\"indent-buttons\">\n                  <button\n                    class=\"indent-btn\"\n                    [disabled]=\"!canIndent(field, fields())\"\n                    (click)=\"indentField(field, fields())\"\n                    matTooltip=\"Move into previous object/array\"\n                  >\n                    <mat-icon>chevron_right</mat-icon>\n                  </button>\n                  <button\n                    class=\"indent-btn\"\n                    disabled\n                    matTooltip=\"Move out of parent\"\n                  >\n                    <mat-icon>chevron_left</mat-icon>\n                  </button>\n                </div>\n\n                <!-- Expand/Collapse -->\n                @if (field.type === 'object' || field.type === 'array') {\n                  <button\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(field)\"\n                    [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\"\n                  >\n                    <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n                  </button>\n                } @else {\n                  <span class=\"expand-placeholder\"></span>\n                }\n\n                <!-- Type Icon -->\n                <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n                <!-- Field Name -->\n                @if (field.isEditing) {\n                  <input\n                    class=\"field-name-input\"\n                    [value]=\"field.name\"\n                    (input)=\"onFieldNameChange(field, $event)\"\n                    (blur)=\"stopEdit(field)\"\n                    (keydown)=\"onFieldNameKeydown($event, field)\"\n                    placeholder=\"Field name\"\n                    autofocus\n                  />\n                } @else {\n                  <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n                    {{ field.name || 'unnamed' }}\n                    @if (field.type === 'array') {\n                      <span class=\"array-indicator\">[]</span>\n                    }\n                  </span>\n                }\n\n                <!-- Required Toggle -->\n                <button\n                  class=\"required-btn\"\n                  [class.is-required]=\"field.required\"\n                  (click)=\"toggleRequired(field)\"\n                  [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n                >\n                  <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n                </button>\n              </div>\n\n              <!-- Middle section: description (flexible) -->\n              <input\n                class=\"description-input\"\n                [value]=\"field.description || ''\"\n                (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                (blur)=\"onDescriptionBlur()\"\n                placeholder=\"Description...\"\n              />\n\n              <!-- Right section: type and actions (fixed position) -->\n              <div class=\"field-right\">\n                <!-- Type Selector -->\n                <mat-form-field appearance=\"outline\" class=\"type-selector\">\n                  <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n                    @for (type of fieldTypes; track type.value) {\n                      <mat-option [value]=\"type.value\">\n                        <mat-icon>{{ type.icon }}</mat-icon>\n                        {{ type.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <!-- Display Type Selector (only for string type) -->\n                @if (showDisplayType && field.type === 'string') {\n                  <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n                    <mat-select [value]=\"field.displayType || 'textbox'\" (selectionChange)=\"onDisplayTypeChange(field, $event.value)\">\n                      @for (displayType of displayTypes; track displayType.value) {\n                        <mat-option [value]=\"displayType.value\">\n                          <mat-icon>{{ displayType.icon }}</mat-icon>\n                          {{ displayType.label }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                }\n\n                <!-- Actions -->\n                <div class=\"field-actions\">\n                  @if (field.type === 'object' || field.type === 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"addChildField(field)\"\n                      matTooltip=\"Add child field\"\n                    >\n                      <mat-icon>add_circle_outline</mat-icon>\n                    </button>\n                  }\n                  @if (field.type === 'string' || field.type === 'number') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleValuesEditor(field)\"\n                      [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n                      [class.has-values]=\"field.allowedValues?.length\"\n                    >\n                      <mat-icon>list</mat-icon>\n                    </button>\n                  }\n                  @if (field.type !== 'object' && field.type !== 'array') {\n                    <button\n                      mat-icon-button\n                      (click)=\"toggleDefaultEditor(field)\"\n                      [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                      [class.has-default]=\"field.defaultValue !== undefined\"\n                    >\n                      <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n                    </button>\n                  }\n                  <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #fieldMenu=\"matMenu\">\n                    <button mat-menu-item (click)=\"startEdit(field)\">\n                      <mat-icon>edit</mat-icon>\n                      <span>Rename</span>\n                    </button>\n                    <button mat-menu-item (click)=\"duplicateField(field, fields())\">\n                      <mat-icon>content_copy</mat-icon>\n                      <span>Duplicate</span>\n                    </button>\n                    <button mat-menu-item (click)=\"deleteField(field, fields())\" class=\"delete-action\">\n                      <mat-icon>delete</mat-icon>\n                      <span>Delete</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </div>\n            </div>\n\n            <!-- Allowed Values Editor -->\n            @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n              <div class=\"allowed-values-editor\">\n                <div class=\"values-header\">\n                  <span class=\"values-label\">Allowed values:</span>\n                  <input\n                    #valueInput\n                    class=\"value-input\"\n                    type=\"text\"\n                    placeholder=\"Type value and press Enter\"\n                    (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n                  />\n                  <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, $event)\" matTooltip=\"Add value\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </div>\n                @if (field.allowedValues && field.allowedValues.length > 0) {\n                  <div class=\"values-list\">\n                    @for (value of field.allowedValues; track value; let vi = $index) {\n                      <span class=\"value-chip\">\n                        {{ value }}\n                        <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                          <mat-icon>close</mat-icon>\n                        </button>\n                      </span>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"no-values\">No values defined yet</div>\n                }\n              </div>\n            }\n\n            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, vi)\" matTooltip=\"Remove\">\n                                    <mat-icon>close</mat-icon>\n                                  </button>\n                                </span>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"no-values\">No values defined yet</div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"empty-nested\">\n                    <span>No child fields</span>\n                    <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n                      <mat-icon>add</mat-icon>\n                      Add field\n                    </button>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      @if (field.type === 'object' || field.type === 'array') {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Middle section: description (flexible) -->\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n                (blur)=\"onDescriptionBlur()\"\n      placeholder=\"Description...\"\n    />\n\n    <!-- Right section: type and actions (fixed position) -->\n    <div class=\"field-right\">\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <!-- Display Type Selector (only for string type) -->\n      @if (showDisplayType && field.type === 'string') {\n        <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n          <mat-select [value]=\"field.displayType || 'textbox'\" (selectionChange)=\"onDisplayTypeChange(field, $event.value)\">\n            @for (displayType of displayTypes; track displayType.value) {\n              <mat-option [value]=\"displayType.value\">\n                <mat-icon>{{ displayType.icon }}</mat-icon>\n                {{ displayType.label }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor(field)\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #nestedMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;box-sizing:border-box}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;max-width:100%;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:140px;flex-shrink:0;margin-right:8px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:130px}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:128px;flex-shrink:0;margin-left:8px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{display:block;min-height:30px;margin-top:4px;margin-bottom:8px;padding-left:32px}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor{margin-left:16px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:48px;margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], showJsonToggle: [{
                 type: Input
             }], showSchemaName: [{
                 type: Input
+            }], showDisplayType: [{
+                type: Input
             }], schemaChange: [{
                 type: Output
             }], save: [{