@elle96/ng-json-schema-manager 0.1.4 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +7 -7
  2. package/fesm2022/elle96-ng-json-schema-manager.mjs +945 -654
  3. package/fesm2022/elle96-ng-json-schema-manager.mjs.map +1 -1
  4. package/index.d.ts +78 -15
  5. package/package.json +1 -1
package/fesm2022/elle96-ng-json-schema-manager.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, PLATFORM_ID, Inject, NgModule } from '@angular/core';
3
- import * as i4 from '@angular/forms';
4
- import { FormGroup, FormArray, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
2
+ import { Injectable, forwardRef, Input, Directive, EventEmitter, Output, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, PLATFORM_ID, Inject, NgModule } from '@angular/core';
3
+ import * as i5 from '@angular/forms';
4
+ import { FormGroup, FormArray, FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import Ajv from 'ajv';
6
6
  import Ajv2019 from 'ajv/dist/2019';
7
7
  import Ajv2020 from 'ajv/dist/2020';
8
8
  import addFormats from 'ajv-formats';
9
9
  import AjvDraft04 from 'ajv-draft-04';
10
- import * as i3 from '@angular/common';
10
+ import * as i4 from '@angular/common';
11
11
  import { CommonModule, isPlatformBrowser } from '@angular/common';
12
12
 
13
13
  class JsonSchemaFormService {
@@ -579,10 +579,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
579
579
  }]
580
580
  }] });
581
581
 
582
+ /**
583
+ * Options shared by every node of a form. Provided by `jsm-json-schema-form`, so each form instance has its own.
584
+ */
585
+ class JsonSchemaFormOptions {
586
+ decimalSeparator = '.';
587
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
588
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions });
589
+ }
590
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions, decorators: [{
591
+ type: Injectable
592
+ }] });
593
+ const COMPLETE_NUMBER = /^-?(\d+[.,]?\d*|[.,]\d+)$/;
594
+ /**
595
+ * Keeps digits, a leading minus and a single decimal separator (written with `separator`);
596
+ * `,` and `.` are both accepted as input.
597
+ */
598
+ function sanitizeNumericText(text, separator) {
599
+ let result = '';
600
+ let hasDecimal = false;
601
+ for (const char of text) {
602
+ if (char >= '0' && char <= '9') {
603
+ result += char;
604
+ }
605
+ else if (char === '-' && result === '') {
606
+ result += char;
607
+ }
608
+ else if ((char === ',' || char === '.') && !hasDecimal) {
609
+ hasDecimal = true;
610
+ result += separator;
611
+ }
612
+ }
613
+ return result;
614
+ }
615
+ /** Text → model: empty → `null`, a complete number → number, anything else stays a string (validation reports it). */
616
+ function parseNumericText(text) {
617
+ const trimmed = text.trim();
618
+ if (trimmed === '') {
619
+ return null;
620
+ }
621
+ if (COMPLETE_NUMBER.test(trimmed)) {
622
+ return Number(trimmed.replace(',', '.'));
623
+ }
624
+ return trimmed;
625
+ }
626
+ /** Model → text shown in the input. */
627
+ function formatNumeric(value, separator) {
628
+ if (value === null || value === undefined) {
629
+ return '';
630
+ }
631
+ return typeof value === 'number' ? String(value).replace('.', separator) : String(value);
632
+ }
633
+ /** Shows decimals with the configured separator inside messages ("must be >= 0.1" → "must be >= 0,1"). */
634
+ function localizeNumbers(message, separator) {
635
+ return separator === ',' ? message.replace(/(\d)\.(\d)/g, '$1,$2') : message;
636
+ }
637
+ const toParsed = (value) => (typeof value === 'string' ? parseNumericText(value) : (value ?? null));
638
+ /**
639
+ * `ControlValueAccessor` for `number`/`integer` fields. The input is a text field (`inputmode="decimal"`), so the
640
+ * decimal comma is accepted, and the model always holds a JSON number once the text is a complete number.
641
+ * It never writes to the control while rendering or when the text is unchanged.
642
+ */
643
+ class NumericInputDirective {
644
+ _el;
645
+ _renderer;
646
+ jsmDecimalSeparator = '.';
647
+ _model = null;
648
+ _onChange = () => undefined;
649
+ _onTouched = () => undefined;
650
+ constructor(_el, _renderer) {
651
+ this._el = _el;
652
+ this._renderer = _renderer;
653
+ }
654
+ _show(text) {
655
+ this._renderer.setProperty(this._el.nativeElement, 'value', text);
656
+ }
657
+ ngOnChanges(changes) {
658
+ if (changes['jsmDecimalSeparator'] && !changes['jsmDecimalSeparator'].firstChange && typeof this._model === 'number') {
659
+ this._show(formatNumeric(this._model, this.jsmDecimalSeparator));
660
+ }
661
+ }
662
+ writeValue(value) {
663
+ this._model = value ?? null;
664
+ // Keep the text being typed when it already means this number ("45," for 45): rewriting it would drop the separator.
665
+ if (typeof value === 'number' && parseNumericText(this._el.nativeElement.value) === value) {
666
+ return;
667
+ }
668
+ this._show(formatNumeric(value, this.jsmDecimalSeparator));
669
+ }
670
+ registerOnChange(fn) {
671
+ this._onChange = fn;
672
+ }
673
+ registerOnTouched(fn) {
674
+ this._onTouched = fn;
675
+ }
676
+ setDisabledState(isDisabled) {
677
+ this._renderer.setProperty(this._el.nativeElement, 'disabled', isDisabled);
678
+ }
679
+ onInput() {
680
+ const input = this._el.nativeElement;
681
+ const raw = input.value;
682
+ const cleaned = sanitizeNumericText(raw, this.jsmDecimalSeparator);
683
+ if (cleaned !== raw) {
684
+ const caret = Math.max(0, (input.selectionStart ?? raw.length) - (raw.length - cleaned.length));
685
+ input.value = cleaned;
686
+ input.setSelectionRange(caret, caret);
687
+ }
688
+ this._model = parseNumericText(cleaned);
689
+ this._onChange(this._model);
690
+ }
691
+ onBlur() {
692
+ const input = this._el.nativeElement;
693
+ let text = input.value.trim();
694
+ if (text.endsWith(',') || text.endsWith('.')) {
695
+ text = text.slice(0, -1);
696
+ }
697
+ if (text === '-') {
698
+ text = '';
699
+ }
700
+ const parsed = parseNumericText(text);
701
+ this._show(typeof parsed === 'number' ? formatNumeric(parsed, this.jsmDecimalSeparator) : text);
702
+ // Update the model only when the value really changed ("13" and 13 are the same value).
703
+ if (parsed !== toParsed(this._model)) {
704
+ this._model = parsed;
705
+ this._onChange(parsed);
706
+ }
707
+ this._onTouched();
708
+ }
709
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
710
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: NumericInputDirective, isStandalone: true, selector: "input[jsmNumeric]", inputs: { jsmDecimalSeparator: "jsmDecimalSeparator" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericInputDirective), multi: true }], usesOnChanges: true, ngImport: i0 });
711
+ }
712
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericInputDirective, decorators: [{
713
+ type: Directive,
714
+ args: [{
715
+ selector: 'input[jsmNumeric]',
716
+ standalone: true,
717
+ host: { '(input)': 'onInput()', '(blur)': 'onBlur()' },
718
+ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericInputDirective), multi: true }],
719
+ }]
720
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { jsmDecimalSeparator: [{
721
+ type: Input
722
+ }] } });
723
+
582
724
  class JsonSchemaNodeComponent {
583
725
  schemaService;
584
726
  validation;
585
727
  cdr;
728
+ options;
586
729
  schema;
587
730
  control;
588
731
  label = '';
@@ -602,10 +745,11 @@ class JsonSchemaNodeComponent {
602
745
  /** Tracks whether this primitive control has been touched (for OnPush CD). */
603
746
  isTouched = false;
604
747
  valueSub;
605
- constructor(schemaService, validation, cdr) {
748
+ constructor(schemaService, validation, cdr, options) {
606
749
  this.schemaService = schemaService;
607
750
  this.validation = validation;
608
751
  this.cdr = cdr;
752
+ this.options = options;
609
753
  }
610
754
  ngOnInit() {
611
755
  if (this.schema.anyOf?.length)
@@ -657,11 +801,20 @@ class JsonSchemaNodeComponent {
657
801
  get resolvedType() {
658
802
  return this.schemaService.resolveType(this.effectiveSchema) ?? 'string';
659
803
  }
804
+ get decimalSeparator() {
805
+ return this.options?.decimalSeparator ?? '.';
806
+ }
807
+ /** `multipleOf` of this node's own schema, exposed as step metadata. */
808
+ get numericStep() {
809
+ return this.effectiveSchema.multipleOf ? String(this.effectiveSchema.multipleOf) : 'any';
810
+ }
660
811
  get inputKind() {
661
812
  if (this.effectiveSchema.enum)
662
813
  return 'select';
663
814
  if (this.resolvedType === 'boolean')
664
815
  return 'checkbox';
816
+ if (this.resolvedType === 'number' || this.resolvedType === 'integer')
817
+ return 'number';
665
818
  if (this.effectiveSchema.format === 'textarea' || (this.effectiveSchema.maxLength ?? 0) > 200)
666
819
  return 'textarea';
667
820
  return 'text';
@@ -731,7 +884,8 @@ class JsonSchemaNodeComponent {
731
884
  if (errs['uniqueItems'])
732
885
  angularErrors.push('Items must be unique');
733
886
  // Merge: prefer Ajv messages, fall back to Angular messages for errors not covered by Ajv
734
- return ajvErrors.length > 0 ? ajvErrors : angularErrors;
887
+ const messages = ajvErrors.length > 0 ? ajvErrors : angularErrors;
888
+ return messages.map((message) => localizeNumbers(message, this.decimalSeparator));
735
889
  }
736
890
  get metaBadges() {
737
891
  const b = [];
@@ -910,505 +1064,521 @@ class JsonSchemaNodeComponent {
910
1064
  } : {}),
911
1065
  }), {});
912
1066
  }
913
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
914
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey", allowAdditionalProperties: "allowAdditionalProperties", showErrors: "showErrors" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
915
- <ng-container [ngSwitch]="nodeKind">
916
-
917
- <!-- ═══ oneOf ═══ -->
918
- <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
919
- <div class="jsm-combinator-header">
920
- <div>
921
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
922
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
923
- </div>
924
- <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
925
- </div>
926
- <div class="jsm-oneof-tabs">
927
- <button *ngFor="let option of schema.oneOf; let i = index" type="button"
928
- class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
929
- (click)="selectedOneOf = i; onOneOfChange()">
930
- {{ option.title || ('Option ' + (i + 1)) }}
931
- </button>
932
- </div>
933
- <div class="jsm-combinator-body" *ngIf="activeVariant">
934
- <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
935
- [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
936
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
937
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
938
- </div>
939
- </div>
940
-
941
- <!-- ═══ anyOf ═══ -->
942
- <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
943
- <div class="jsm-combinator-header">
944
- <div>
945
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
946
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
947
- </div>
948
- <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
949
- </div>
950
- <div class="jsm-anyof-options">
951
- <label *ngFor="let option of schema.anyOf; let i = index"
952
- class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
953
- <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
954
- {{ option.title || ('Option ' + (i + 1)) }}
955
- </label>
956
- </div>
957
- <div class="jsm-combinator-body" *ngIf="activeVariant">
958
- <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
959
- [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
960
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
961
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
962
- </div>
963
- </div>
964
-
965
- <!-- ═══ allOf ═══ -->
966
- <div *ngSwitchCase="'allOf'" class="jsm-combinator">
967
- <div class="jsm-combinator-header">
968
- <div>
969
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
970
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
971
- </div>
972
- <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
973
- </div>
974
- <div class="jsm-combinator-body">
975
- <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
976
- <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
977
- [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
978
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
979
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
980
- </div>
981
- </div>
982
- </div>
983
-
984
- <!-- ═══ object ═══ -->
985
- <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
986
- <legend class="jsm-legend">{{ schema.title || label }}</legend>
987
- <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
988
-
989
- <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
990
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
991
- </div>
992
-
993
- <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
994
- <ng-container *ngFor="let key of simpleKeys">
995
- <div style="display:flex;flex-direction:column;gap:.25rem;">
996
- <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
997
- <span class="jsm-dynamic-key-label">{{ key }}</span>
998
- <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
999
- </div>
1000
- <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1001
- [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1002
- [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1003
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1004
- </div>
1005
- </ng-container>
1006
- </div>
1007
-
1008
- <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
1009
- <ng-container *ngFor="let key of complexKeys">
1010
- <div style="display:flex;flex-direction:column;gap:.25rem;">
1011
- <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1012
- <span class="jsm-dynamic-key-label">{{ key }}</span>
1013
- <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1014
- </div>
1015
- <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1016
- [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1017
- [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1018
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1019
- </div>
1020
- </ng-container>
1021
- </div>
1022
-
1023
- <div *ngIf="canAddProperty" class="jsm-add-prop">
1024
- <p class="jsm-add-prop-label">Add property</p>
1025
- <div class="jsm-add-prop-row">
1026
- <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
1027
- <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
1028
- </div>
1029
- <p *ngIf="propertyError" class="jsm-error-msg">
1030
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1031
- {{ propertyError }}
1032
- </p>
1033
- </div>
1034
-
1035
- <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
1036
- <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1037
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1038
- {{ error }}
1039
- </p>
1040
- </div>
1041
- </fieldset>
1042
-
1043
- <!-- ═══ array ═══ -->
1044
- <div *ngSwitchCase="'array'" class="jsm-array-block">
1045
- <div class="jsm-array-header">
1046
- <div>
1047
- <p class="jsm-array-title">
1048
- {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
1049
- </p>
1050
- <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1051
- </div>
1052
- <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
1053
- <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1054
- Add item
1055
- </button>
1056
- </div>
1057
-
1058
- <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
1059
- Must contain matching item(s)
1060
- <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
1061
- <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
1062
- </div>
1063
-
1064
- <div *ngIf="metaBadges.length" class="jsm-badge-row">
1065
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1066
- </div>
1067
-
1068
- <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
1069
- <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
1070
- <div class="jsm-array-item-header">
1071
- <span class="jsm-array-index">{{ i + 1 }}</span>
1072
- <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
1073
- </div>
1074
- <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
1075
- [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
1076
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1077
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1078
- </div>
1079
- </div>
1080
-
1081
- <ng-template #emptyArray>
1082
- <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
1083
- </ng-template>
1084
-
1085
- <div *ngIf="errorsForPath.length" class="jsm-error-list">
1086
- <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1087
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1088
- {{ error }}
1089
- </p>
1090
- </div>
1091
- </div>
1092
-
1093
- <!-- ═══ primitive ═══ -->
1094
- <div *ngSwitchDefault class="jsm-field">
1095
- <ng-container *ngIf="inputKind !== 'checkbox'">
1096
- <label class="jsm-field-label">
1097
- {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1098
- </label>
1099
- <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1100
- </ng-container>
1101
-
1102
- <div *ngIf="metaBadges.length" class="jsm-badge-row">
1103
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1104
- </div>
1105
-
1106
- <ng-container>
1107
- <input *ngIf="inputKind === 'text'" class="jsm-input"
1108
- [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1109
- [attr.type]="inputType" [attr.placeholder]="schema.title || label"
1110
- [formControl]="controlAsFormControl"
1111
- (blur)="onBlur()" />
1112
-
1113
- <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
1114
- [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1115
- [attr.placeholder]="schema.title || label"
1116
- [formControl]="controlAsFormControl"
1117
- (blur)="onBlur()"></textarea>
1118
-
1119
- <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
1120
- <select class="jsm-select"
1121
- [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1122
- [formControl]="controlAsFormControl"
1123
- (blur)="onBlur()">
1124
- <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
1125
- </select>
1126
- <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
1127
- <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1128
- </svg>
1129
- </div>
1130
-
1131
- <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
1132
- <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
1133
- <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
1134
- <span class="jsm-toggle-thumb"></span>
1135
- </span>
1136
- <span class="jsm-toggle-text">
1137
- {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1138
- </span>
1139
- </label>
1140
- </ng-container>
1141
-
1142
- <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1143
- <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
1144
- <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
1145
- {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
1146
- </p>
1147
-
1148
- <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
1149
- <p *ngFor="let error of allErrors" class="jsm-error-msg">
1150
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
1151
- <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
1152
- <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1153
- </svg>
1154
- {{ error }}
1155
- </p>
1156
- </div>
1157
- </div>
1158
-
1159
- </ng-container>
1160
- `, isInline: true, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1067
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }, { token: JsonSchemaFormOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1068
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey", allowAdditionalProperties: "allowAdditionalProperties", showErrors: "showErrors" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
1069
+ <ng-container [ngSwitch]="nodeKind">
1070
+
1071
+ <!-- ═══ oneOf ═══ -->
1072
+ <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
1073
+ <div class="jsm-combinator-header">
1074
+ <div>
1075
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1076
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1077
+ </div>
1078
+ <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
1079
+ </div>
1080
+ <div class="jsm-oneof-tabs">
1081
+ <button *ngFor="let option of schema.oneOf; let i = index" type="button"
1082
+ class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
1083
+ (click)="selectedOneOf = i; onOneOfChange()">
1084
+ {{ option.title || ('Option ' + (i + 1)) }}
1085
+ </button>
1086
+ </div>
1087
+ <div class="jsm-combinator-body" *ngIf="activeVariant">
1088
+ <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1089
+ [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1090
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1091
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1092
+ </div>
1093
+ </div>
1094
+
1095
+ <!-- ═══ anyOf ═══ -->
1096
+ <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
1097
+ <div class="jsm-combinator-header">
1098
+ <div>
1099
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1100
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1101
+ </div>
1102
+ <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
1103
+ </div>
1104
+ <div class="jsm-anyof-options">
1105
+ <label *ngFor="let option of schema.anyOf; let i = index"
1106
+ class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
1107
+ <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
1108
+ {{ option.title || ('Option ' + (i + 1)) }}
1109
+ </label>
1110
+ </div>
1111
+ <div class="jsm-combinator-body" *ngIf="activeVariant">
1112
+ <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1113
+ [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1114
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1115
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1116
+ </div>
1117
+ </div>
1118
+
1119
+ <!-- ═══ allOf ═══ -->
1120
+ <div *ngSwitchCase="'allOf'" class="jsm-combinator">
1121
+ <div class="jsm-combinator-header">
1122
+ <div>
1123
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1124
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1125
+ </div>
1126
+ <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
1127
+ </div>
1128
+ <div class="jsm-combinator-body">
1129
+ <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
1130
+ <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
1131
+ [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
1132
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1133
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <!-- ═══ object ═══ -->
1139
+ <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
1140
+ <legend class="jsm-legend">{{ schema.title || label }}</legend>
1141
+ <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
1142
+
1143
+ <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
1144
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1145
+ </div>
1146
+
1147
+ <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
1148
+ <ng-container *ngFor="let key of simpleKeys">
1149
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
1150
+ <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1151
+ <span class="jsm-dynamic-key-label">{{ key }}</span>
1152
+ <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1153
+ </div>
1154
+ <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1155
+ [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1156
+ [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1157
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1158
+ </div>
1159
+ </ng-container>
1160
+ </div>
1161
+
1162
+ <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
1163
+ <ng-container *ngFor="let key of complexKeys">
1164
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
1165
+ <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1166
+ <span class="jsm-dynamic-key-label">{{ key }}</span>
1167
+ <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1168
+ </div>
1169
+ <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1170
+ [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1171
+ [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1172
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1173
+ </div>
1174
+ </ng-container>
1175
+ </div>
1176
+
1177
+ <div *ngIf="canAddProperty" class="jsm-add-prop">
1178
+ <p class="jsm-add-prop-label">Add property</p>
1179
+ <div class="jsm-add-prop-row">
1180
+ <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
1181
+ <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
1182
+ </div>
1183
+ <p *ngIf="propertyError" class="jsm-error-msg">
1184
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1185
+ {{ propertyError }}
1186
+ </p>
1187
+ </div>
1188
+
1189
+ <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
1190
+ <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1191
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1192
+ {{ error }}
1193
+ </p>
1194
+ </div>
1195
+ </fieldset>
1196
+
1197
+ <!-- ═══ array ═══ -->
1198
+ <div *ngSwitchCase="'array'" class="jsm-array-block">
1199
+ <div class="jsm-array-header">
1200
+ <div>
1201
+ <p class="jsm-array-title">
1202
+ {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
1203
+ </p>
1204
+ <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1205
+ </div>
1206
+ <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
1207
+ <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1208
+ Add item
1209
+ </button>
1210
+ </div>
1211
+
1212
+ <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
1213
+ Must contain matching item(s)
1214
+ <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
1215
+ <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
1216
+ </div>
1217
+
1218
+ <div *ngIf="metaBadges.length" class="jsm-badge-row">
1219
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1220
+ </div>
1221
+
1222
+ <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
1223
+ <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
1224
+ <div class="jsm-array-item-header">
1225
+ <span class="jsm-array-index">{{ i + 1 }}</span>
1226
+ <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
1227
+ </div>
1228
+ <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
1229
+ [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
1230
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1231
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <ng-template #emptyArray>
1236
+ <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
1237
+ </ng-template>
1238
+
1239
+ <div *ngIf="errorsForPath.length" class="jsm-error-list">
1240
+ <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1241
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1242
+ {{ error }}
1243
+ </p>
1244
+ </div>
1245
+ </div>
1246
+
1247
+ <!-- ═══ primitive ═══ -->
1248
+ <div *ngSwitchDefault class="jsm-field">
1249
+ <ng-container *ngIf="inputKind !== 'checkbox'">
1250
+ <label class="jsm-field-label">
1251
+ {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1252
+ </label>
1253
+ <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1254
+ </ng-container>
1255
+
1256
+ <div *ngIf="metaBadges.length" class="jsm-badge-row">
1257
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1258
+ </div>
1259
+
1260
+ <ng-container>
1261
+ <input *ngIf="inputKind === 'number'" jsmNumeric type="text" inputmode="decimal" class="jsm-input"
1262
+ [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1263
+ [jsmDecimalSeparator]="decimalSeparator" [attr.data-step]="numericStep"
1264
+ [attr.placeholder]="schema.title || label"
1265
+ [formControl]="controlAsFormControl"
1266
+ (blur)="onBlur()" />
1267
+
1268
+ <input *ngIf="inputKind === 'text'" class="jsm-input"
1269
+ [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1270
+ [attr.type]="inputType" [attr.placeholder]="schema.title || label"
1271
+ [formControl]="controlAsFormControl"
1272
+ (blur)="onBlur()" />
1273
+
1274
+ <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
1275
+ [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1276
+ [attr.placeholder]="schema.title || label"
1277
+ [formControl]="controlAsFormControl"
1278
+ (blur)="onBlur()"></textarea>
1279
+
1280
+ <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
1281
+ <select class="jsm-select"
1282
+ [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1283
+ [formControl]="controlAsFormControl"
1284
+ (blur)="onBlur()">
1285
+ <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
1286
+ </select>
1287
+ <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
1288
+ <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1289
+ </svg>
1290
+ </div>
1291
+
1292
+ <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
1293
+ <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
1294
+ <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
1295
+ <span class="jsm-toggle-thumb"></span>
1296
+ </span>
1297
+ <span class="jsm-toggle-text">
1298
+ {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1299
+ </span>
1300
+ </label>
1301
+ </ng-container>
1302
+
1303
+ <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1304
+ <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
1305
+ <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
1306
+ {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
1307
+ </p>
1308
+
1309
+ <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
1310
+ <p *ngFor="let error of allErrors" class="jsm-error-msg">
1311
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
1312
+ <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
1313
+ <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1314
+ </svg>
1315
+ {{ error }}
1316
+ </p>
1317
+ </div>
1318
+ </div>
1319
+
1320
+ </ng-container>
1321
+ `, isInline: true, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NumericInputDirective, selector: "input[jsmNumeric]", inputs: ["jsmDecimalSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1161
1322
  }
1162
1323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
1163
1324
  type: Component,
1164
- args: [{ selector: 'jsm-schema-node', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, template: `
1165
- <ng-container [ngSwitch]="nodeKind">
1166
-
1167
- <!-- ═══ oneOf ═══ -->
1168
- <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
1169
- <div class="jsm-combinator-header">
1170
- <div>
1171
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1172
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1173
- </div>
1174
- <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
1175
- </div>
1176
- <div class="jsm-oneof-tabs">
1177
- <button *ngFor="let option of schema.oneOf; let i = index" type="button"
1178
- class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
1179
- (click)="selectedOneOf = i; onOneOfChange()">
1180
- {{ option.title || ('Option ' + (i + 1)) }}
1181
- </button>
1182
- </div>
1183
- <div class="jsm-combinator-body" *ngIf="activeVariant">
1184
- <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1185
- [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1186
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1187
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1188
- </div>
1189
- </div>
1190
-
1191
- <!-- ═══ anyOf ═══ -->
1192
- <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
1193
- <div class="jsm-combinator-header">
1194
- <div>
1195
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1196
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1197
- </div>
1198
- <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
1199
- </div>
1200
- <div class="jsm-anyof-options">
1201
- <label *ngFor="let option of schema.anyOf; let i = index"
1202
- class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
1203
- <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
1204
- {{ option.title || ('Option ' + (i + 1)) }}
1205
- </label>
1206
- </div>
1207
- <div class="jsm-combinator-body" *ngIf="activeVariant">
1208
- <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1209
- [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1210
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1211
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1212
- </div>
1213
- </div>
1214
-
1215
- <!-- ═══ allOf ═══ -->
1216
- <div *ngSwitchCase="'allOf'" class="jsm-combinator">
1217
- <div class="jsm-combinator-header">
1218
- <div>
1219
- <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1220
- <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1221
- </div>
1222
- <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
1223
- </div>
1224
- <div class="jsm-combinator-body">
1225
- <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
1226
- <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
1227
- [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
1228
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1229
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1230
- </div>
1231
- </div>
1232
- </div>
1233
-
1234
- <!-- ═══ object ═══ -->
1235
- <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
1236
- <legend class="jsm-legend">{{ schema.title || label }}</legend>
1237
- <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
1238
-
1239
- <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
1240
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1241
- </div>
1242
-
1243
- <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
1244
- <ng-container *ngFor="let key of simpleKeys">
1245
- <div style="display:flex;flex-direction:column;gap:.25rem;">
1246
- <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1247
- <span class="jsm-dynamic-key-label">{{ key }}</span>
1248
- <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1249
- </div>
1250
- <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1251
- [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1252
- [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1253
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1254
- </div>
1255
- </ng-container>
1256
- </div>
1257
-
1258
- <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
1259
- <ng-container *ngFor="let key of complexKeys">
1260
- <div style="display:flex;flex-direction:column;gap:.25rem;">
1261
- <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1262
- <span class="jsm-dynamic-key-label">{{ key }}</span>
1263
- <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1264
- </div>
1265
- <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1266
- [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1267
- [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1268
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1269
- </div>
1270
- </ng-container>
1271
- </div>
1272
-
1273
- <div *ngIf="canAddProperty" class="jsm-add-prop">
1274
- <p class="jsm-add-prop-label">Add property</p>
1275
- <div class="jsm-add-prop-row">
1276
- <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
1277
- <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
1278
- </div>
1279
- <p *ngIf="propertyError" class="jsm-error-msg">
1280
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1281
- {{ propertyError }}
1282
- </p>
1283
- </div>
1284
-
1285
- <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
1286
- <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1287
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1288
- {{ error }}
1289
- </p>
1290
- </div>
1291
- </fieldset>
1292
-
1293
- <!-- ═══ array ═══ -->
1294
- <div *ngSwitchCase="'array'" class="jsm-array-block">
1295
- <div class="jsm-array-header">
1296
- <div>
1297
- <p class="jsm-array-title">
1298
- {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
1299
- </p>
1300
- <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1301
- </div>
1302
- <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
1303
- <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1304
- Add item
1305
- </button>
1306
- </div>
1307
-
1308
- <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
1309
- Must contain matching item(s)
1310
- <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
1311
- <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
1312
- </div>
1313
-
1314
- <div *ngIf="metaBadges.length" class="jsm-badge-row">
1315
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1316
- </div>
1317
-
1318
- <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
1319
- <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
1320
- <div class="jsm-array-item-header">
1321
- <span class="jsm-array-index">{{ i + 1 }}</span>
1322
- <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
1323
- </div>
1324
- <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
1325
- [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
1326
- [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1327
- (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1328
- </div>
1329
- </div>
1330
-
1331
- <ng-template #emptyArray>
1332
- <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
1333
- </ng-template>
1334
-
1335
- <div *ngIf="errorsForPath.length" class="jsm-error-list">
1336
- <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1337
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1338
- {{ error }}
1339
- </p>
1340
- </div>
1341
- </div>
1342
-
1343
- <!-- ═══ primitive ═══ -->
1344
- <div *ngSwitchDefault class="jsm-field">
1345
- <ng-container *ngIf="inputKind !== 'checkbox'">
1346
- <label class="jsm-field-label">
1347
- {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1348
- </label>
1349
- <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1350
- </ng-container>
1351
-
1352
- <div *ngIf="metaBadges.length" class="jsm-badge-row">
1353
- <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1354
- </div>
1355
-
1356
- <ng-container>
1357
- <input *ngIf="inputKind === 'text'" class="jsm-input"
1358
- [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1359
- [attr.type]="inputType" [attr.placeholder]="schema.title || label"
1360
- [formControl]="controlAsFormControl"
1361
- (blur)="onBlur()" />
1362
-
1363
- <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
1364
- [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1365
- [attr.placeholder]="schema.title || label"
1366
- [formControl]="controlAsFormControl"
1367
- (blur)="onBlur()"></textarea>
1368
-
1369
- <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
1370
- <select class="jsm-select"
1371
- [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1372
- [formControl]="controlAsFormControl"
1373
- (blur)="onBlur()">
1374
- <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
1375
- </select>
1376
- <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
1377
- <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1378
- </svg>
1379
- </div>
1380
-
1381
- <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
1382
- <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
1383
- <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
1384
- <span class="jsm-toggle-thumb"></span>
1385
- </span>
1386
- <span class="jsm-toggle-text">
1387
- {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1388
- </span>
1389
- </label>
1390
- </ng-container>
1391
-
1392
- <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1393
- <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
1394
- <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
1395
- {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
1396
- </p>
1397
-
1398
- <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
1399
- <p *ngFor="let error of allErrors" class="jsm-error-msg">
1400
- <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
1401
- <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
1402
- <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1403
- </svg>
1404
- {{ error }}
1405
- </p>
1406
- </div>
1407
- </div>
1408
-
1409
- </ng-container>
1325
+ args: [{ selector: 'jsm-schema-node', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NumericInputDirective], encapsulation: ViewEncapsulation.None, template: `
1326
+ <ng-container [ngSwitch]="nodeKind">
1327
+
1328
+ <!-- ═══ oneOf ═══ -->
1329
+ <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
1330
+ <div class="jsm-combinator-header">
1331
+ <div>
1332
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1333
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1334
+ </div>
1335
+ <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
1336
+ </div>
1337
+ <div class="jsm-oneof-tabs">
1338
+ <button *ngFor="let option of schema.oneOf; let i = index" type="button"
1339
+ class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
1340
+ (click)="selectedOneOf = i; onOneOfChange()">
1341
+ {{ option.title || ('Option ' + (i + 1)) }}
1342
+ </button>
1343
+ </div>
1344
+ <div class="jsm-combinator-body" *ngIf="activeVariant">
1345
+ <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1346
+ [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1347
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1348
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1349
+ </div>
1350
+ </div>
1351
+
1352
+ <!-- ═══ anyOf ═══ -->
1353
+ <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
1354
+ <div class="jsm-combinator-header">
1355
+ <div>
1356
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1357
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1358
+ </div>
1359
+ <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
1360
+ </div>
1361
+ <div class="jsm-anyof-options">
1362
+ <label *ngFor="let option of schema.anyOf; let i = index"
1363
+ class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
1364
+ <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
1365
+ {{ option.title || ('Option ' + (i + 1)) }}
1366
+ </label>
1367
+ </div>
1368
+ <div class="jsm-combinator-body" *ngIf="activeVariant">
1369
+ <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
1370
+ [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
1371
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1372
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1373
+ </div>
1374
+ </div>
1375
+
1376
+ <!-- ═══ allOf ═══ -->
1377
+ <div *ngSwitchCase="'allOf'" class="jsm-combinator">
1378
+ <div class="jsm-combinator-header">
1379
+ <div>
1380
+ <p class="jsm-combinator-title">{{ schema.title || label }}</p>
1381
+ <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
1382
+ </div>
1383
+ <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
1384
+ </div>
1385
+ <div class="jsm-combinator-body">
1386
+ <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
1387
+ <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
1388
+ [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
1389
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1390
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1391
+ </div>
1392
+ </div>
1393
+ </div>
1394
+
1395
+ <!-- ═══ object ═══ -->
1396
+ <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
1397
+ <legend class="jsm-legend">{{ schema.title || label }}</legend>
1398
+ <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
1399
+
1400
+ <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
1401
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1402
+ </div>
1403
+
1404
+ <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
1405
+ <ng-container *ngFor="let key of simpleKeys">
1406
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
1407
+ <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1408
+ <span class="jsm-dynamic-key-label">{{ key }}</span>
1409
+ <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1410
+ </div>
1411
+ <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1412
+ [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1413
+ [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1414
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1415
+ </div>
1416
+ </ng-container>
1417
+ </div>
1418
+
1419
+ <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
1420
+ <ng-container *ngFor="let key of complexKeys">
1421
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
1422
+ <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
1423
+ <span class="jsm-dynamic-key-label">{{ key }}</span>
1424
+ <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
1425
+ </div>
1426
+ <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
1427
+ [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
1428
+ [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1429
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1430
+ </div>
1431
+ </ng-container>
1432
+ </div>
1433
+
1434
+ <div *ngIf="canAddProperty" class="jsm-add-prop">
1435
+ <p class="jsm-add-prop-label">Add property</p>
1436
+ <div class="jsm-add-prop-row">
1437
+ <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
1438
+ <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
1439
+ </div>
1440
+ <p *ngIf="propertyError" class="jsm-error-msg">
1441
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1442
+ {{ propertyError }}
1443
+ </p>
1444
+ </div>
1445
+
1446
+ <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
1447
+ <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1448
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1449
+ {{ error }}
1450
+ </p>
1451
+ </div>
1452
+ </fieldset>
1453
+
1454
+ <!-- ═══ array ═══ -->
1455
+ <div *ngSwitchCase="'array'" class="jsm-array-block">
1456
+ <div class="jsm-array-header">
1457
+ <div>
1458
+ <p class="jsm-array-title">
1459
+ {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
1460
+ </p>
1461
+ <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1462
+ </div>
1463
+ <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
1464
+ <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1465
+ Add item
1466
+ </button>
1467
+ </div>
1468
+
1469
+ <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
1470
+ Must contain matching item(s)
1471
+ <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
1472
+ <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
1473
+ </div>
1474
+
1475
+ <div *ngIf="metaBadges.length" class="jsm-badge-row">
1476
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1477
+ </div>
1478
+
1479
+ <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
1480
+ <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
1481
+ <div class="jsm-array-item-header">
1482
+ <span class="jsm-array-index">{{ i + 1 }}</span>
1483
+ <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
1484
+ </div>
1485
+ <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
1486
+ [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
1487
+ [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
1488
+ (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
1489
+ </div>
1490
+ </div>
1491
+
1492
+ <ng-template #emptyArray>
1493
+ <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
1494
+ </ng-template>
1495
+
1496
+ <div *ngIf="errorsForPath.length" class="jsm-error-list">
1497
+ <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
1498
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
1499
+ {{ error }}
1500
+ </p>
1501
+ </div>
1502
+ </div>
1503
+
1504
+ <!-- ═══ primitive ═══ -->
1505
+ <div *ngSwitchDefault class="jsm-field">
1506
+ <ng-container *ngIf="inputKind !== 'checkbox'">
1507
+ <label class="jsm-field-label">
1508
+ {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1509
+ </label>
1510
+ <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1511
+ </ng-container>
1512
+
1513
+ <div *ngIf="metaBadges.length" class="jsm-badge-row">
1514
+ <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
1515
+ </div>
1516
+
1517
+ <ng-container>
1518
+ <input *ngIf="inputKind === 'number'" jsmNumeric type="text" inputmode="decimal" class="jsm-input"
1519
+ [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1520
+ [jsmDecimalSeparator]="decimalSeparator" [attr.data-step]="numericStep"
1521
+ [attr.placeholder]="schema.title || label"
1522
+ [formControl]="controlAsFormControl"
1523
+ (blur)="onBlur()" />
1524
+
1525
+ <input *ngIf="inputKind === 'text'" class="jsm-input"
1526
+ [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1527
+ [attr.type]="inputType" [attr.placeholder]="schema.title || label"
1528
+ [formControl]="controlAsFormControl"
1529
+ (blur)="onBlur()" />
1530
+
1531
+ <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
1532
+ [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1533
+ [attr.placeholder]="schema.title || label"
1534
+ [formControl]="controlAsFormControl"
1535
+ (blur)="onBlur()"></textarea>
1536
+
1537
+ <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
1538
+ <select class="jsm-select"
1539
+ [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
1540
+ [formControl]="controlAsFormControl"
1541
+ (blur)="onBlur()">
1542
+ <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
1543
+ </select>
1544
+ <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
1545
+ <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1546
+ </svg>
1547
+ </div>
1548
+
1549
+ <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
1550
+ <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
1551
+ <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
1552
+ <span class="jsm-toggle-thumb"></span>
1553
+ </span>
1554
+ <span class="jsm-toggle-text">
1555
+ {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
1556
+ </span>
1557
+ </label>
1558
+ </ng-container>
1559
+
1560
+ <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
1561
+ <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
1562
+ <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
1563
+ {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
1564
+ </p>
1565
+
1566
+ <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
1567
+ <p *ngFor="let error of allErrors" class="jsm-error-msg">
1568
+ <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
1569
+ <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
1570
+ <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1571
+ </svg>
1572
+ {{ error }}
1573
+ </p>
1574
+ </div>
1575
+ </div>
1576
+
1577
+ </ng-container>
1410
1578
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"] }]
1411
- }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }], propDecorators: { schema: [{
1579
+ }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }, { type: JsonSchemaFormOptions, decorators: [{
1580
+ type: Optional
1581
+ }] }], propDecorators: { schema: [{
1412
1582
  type: Input,
1413
1583
  args: [{ required: true }]
1414
1584
  }], control: [{
@@ -1434,8 +1604,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
1434
1604
  type: Output
1435
1605
  }] } });
1436
1606
 
1607
+ const OMIT = Symbol('omit');
1608
+ /** Complete decimal numbers only: "13", "-0.5", "0,5", "3," (comma or dot as separator). */
1609
+ const NUMERIC_STRING = /^[+-]?(\d+([.,]\d*)?|[.,]\d+)$/;
1610
+ const isSchema = (schema) => !!schema && typeof schema === 'object';
1611
+ const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
1612
+ const primaryType = (schema) => {
1613
+ const type = schema.type;
1614
+ if (Array.isArray(type)) {
1615
+ return type.find((item) => item !== 'null') ?? type[0];
1616
+ }
1617
+ return type;
1618
+ };
1619
+ const isNumericType = (type) => type === 'number' || type === 'integer';
1620
+ /** Converts a numeric string to a number; empty values are omitted; anything else is left as typed. */
1621
+ function normalizeNumber(value) {
1622
+ if (value === null || value === undefined) {
1623
+ return OMIT;
1624
+ }
1625
+ if (typeof value !== 'string') {
1626
+ return value;
1627
+ }
1628
+ const text = value.trim();
1629
+ if (text === '') {
1630
+ return OMIT;
1631
+ }
1632
+ if (NUMERIC_STRING.test(text)) {
1633
+ return Number(text.replace(',', '.'));
1634
+ }
1635
+ return value;
1636
+ }
1637
+ /** Picks the oneOf/anyOf variant that declares the most of the object's keys. */
1638
+ function pickVariant(variants, value) {
1639
+ let best;
1640
+ let bestScore = 0;
1641
+ for (const variant of variants) {
1642
+ const declared = Object.keys(variant.properties ?? {});
1643
+ const score = declared.filter((key) => key in value).length;
1644
+ if (score > bestScore) {
1645
+ best = variant;
1646
+ bestScore = score;
1647
+ }
1648
+ }
1649
+ return best;
1650
+ }
1651
+ function normalizeObject(schema, value) {
1652
+ const result = { ...value };
1653
+ const patterns = Object.entries(schema.patternProperties ?? {}).map(([pattern, sub]) => [new RegExp(pattern), sub]);
1654
+ for (const key of Object.keys(result)) {
1655
+ let sub = schema.properties?.[key];
1656
+ if (sub === undefined) {
1657
+ sub = patterns.find(([regex]) => regex.test(key))?.[1];
1658
+ }
1659
+ if (sub === undefined && isSchema(schema.additionalProperties)) {
1660
+ sub = schema.additionalProperties;
1661
+ }
1662
+ if (sub === undefined) {
1663
+ continue;
1664
+ }
1665
+ const next = normalizeNode(sub, result[key]);
1666
+ if (next === OMIT) {
1667
+ delete result[key];
1668
+ }
1669
+ else {
1670
+ result[key] = next;
1671
+ }
1672
+ }
1673
+ return result;
1674
+ }
1675
+ function normalizeArray(schema, value) {
1676
+ const prefixItems = schema.prefixItems ?? [];
1677
+ return value.map((item, index) => {
1678
+ const sub = (prefixItems[index] ?? schema.items);
1679
+ const next = normalizeNode(sub, item);
1680
+ // Array positions cannot be dropped without shifting the others.
1681
+ return next === OMIT ? null : next;
1682
+ });
1683
+ }
1684
+ function normalizeNode(schema, value) {
1685
+ if (!isSchema(schema)) {
1686
+ return value;
1687
+ }
1688
+ const type = primaryType(schema);
1689
+ if (isNumericType(type)) {
1690
+ return normalizeNumber(value);
1691
+ }
1692
+ let result = value;
1693
+ for (const sub of schema.allOf ?? []) {
1694
+ if (result === OMIT) {
1695
+ return OMIT;
1696
+ }
1697
+ result = normalizeNode(sub, result);
1698
+ }
1699
+ if (result === OMIT) {
1700
+ return OMIT;
1701
+ }
1702
+ const variants = [...(schema.oneOf ?? []), ...(schema.anyOf ?? [])];
1703
+ if (variants.length > 0 && type === undefined) {
1704
+ if (isRecord(result)) {
1705
+ const variant = pickVariant(variants, result);
1706
+ if (variant) {
1707
+ result = normalizeNode(variant, result);
1708
+ }
1709
+ }
1710
+ else if (!Array.isArray(result)) {
1711
+ // Primitive: convert only when the variants are numeric and none accepts a string.
1712
+ const types = variants.map((variant) => primaryType(variant));
1713
+ if (types.some(isNumericType) && !types.includes('string')) {
1714
+ result = normalizeNumber(result);
1715
+ }
1716
+ }
1717
+ }
1718
+ if (isRecord(result)) {
1719
+ return normalizeObject(schema, result);
1720
+ }
1721
+ if (Array.isArray(result)) {
1722
+ return normalizeArray(schema, result);
1723
+ }
1724
+ return result;
1725
+ }
1726
+ /**
1727
+ * Coerces values to the types declared by the schema so that the emitted value respects it:
1728
+ * - `number`/`integer` numeric strings become JSON numbers (comma or dot as separator);
1729
+ * - empty numeric values (`""`, whitespace, `null`) leave the key absent, never `""` or `0`;
1730
+ * - integers with decimals are converted to their number but never truncated (validation reports them);
1731
+ * - non-numeric strings are left unchanged (validation reports them).
1732
+ * Descends into properties, patternProperties, additionalProperties, items, prefixItems and combinators.
1733
+ * The same function feeds both the Ajv validation and the emitted value.
1734
+ */
1735
+ function normalizeValue(schema, value) {
1736
+ const normalized = normalizeNode(schema, value);
1737
+ return normalized === OMIT ? null : normalized;
1738
+ }
1739
+
1437
1740
  // AUTO-GENERATED — do not edit manually. Run: node scripts/generate-lib-styles.mjs
1438
- const JSM_CSS = "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-red-900: oklch(39.6% 0.141 25.723);\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-600: oklch(66.6% 0.179 58.318);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-amber-800: oklch(47.3% 0.137 46.201);\n --color-amber-900: oklch(41.4% 0.112 45.904);\n --color-emerald-50: oklch(97.9% 0.021 166.113);\n --color-emerald-400: oklch(76.5% 0.177 163.223);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-emerald-900: oklch(37.8% 0.077 168.94);\n --color-indigo-50: oklch(96.2% 0.018 272.314);\n --color-indigo-100: oklch(93% 0.034 272.788);\n --color-indigo-200: oklch(87% 0.065 274.039);\n --color-indigo-300: oklch(78.5% 0.115 274.713);\n --color-indigo-400: oklch(67.3% 0.182 276.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-indigo-600: oklch(51.1% 0.262 276.966);\n --color-indigo-700: oklch(45.7% 0.24 277.023);\n --color-indigo-900: oklch(35.9% 0.144 278.697);\n --color-rose-50: oklch(96.9% 0.015 12.422);\n --color-rose-400: oklch(71.2% 0.194 13.428);\n --color-rose-500: oklch(64.5% 0.246 16.439);\n --color-rose-600: oklch(58.6% 0.253 17.585);\n --color-rose-700: oklch(51.4% 0.222 16.935);\n --color-rose-900: oklch(41% 0.159 10.272);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-2xl: 42rem;\n --container-3xl: 48rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --tracking-wide: 0.025em;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n }\n .relative {\n position: relative;\n }\n .start {\n inset-inline-start: var(--spacing);\n }\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-56 {\n height: calc(var(--spacing) * 56);\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-3xl {\n max-width: var(--container-3xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0\\.5 {\n --tw-translate-x: calc(var(--spacing) * 0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-4 {\n --tw-translate-x: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .space-y-0 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-10 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-amber-200 {\n border-color: var(--color-amber-200);\n }\n .border-amber-300 {\n border-color: var(--color-amber-300);\n }\n .border-indigo-200 {\n border-color: var(--color-indigo-200);\n }\n .border-red-300 {\n border-color: var(--color-red-300);\n }\n .border-red-700 {\n border-color: var(--color-red-700);\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-t-slate-900 {\n border-top-color: var(--color-slate-900);\n }\n .bg-amber-50 {\n background-color: var(--color-amber-50);\n }\n .bg-emerald-50 {\n background-color: var(--color-emerald-50);\n }\n .bg-indigo-50 {\n background-color: var(--color-indigo-50);\n }\n .bg-indigo-600 {\n background-color: var(--color-indigo-600);\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-900 {\n background-color: var(--color-red-900);\n }\n .bg-red-900\\/20 {\n background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);\n }\n }\n .bg-rose-50 {\n background-color: var(--color-rose-50);\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-300 {\n background-color: var(--color-slate-300);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/70 {\n background-color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n .bg-white\\/90 {\n background-color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-10 {\n padding-block: calc(var(--spacing) * 10);\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.2em\\] {\n --tw-tracking: 0.2em;\n letter-spacing: 0.2em;\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-amber-600 {\n color: var(--color-amber-600);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-amber-800 {\n color: var(--color-amber-800);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n .text-indigo-700 {\n color: var(--color-indigo-700);\n }\n .text-rose-500 {\n color: var(--color-rose-500);\n }\n .text-rose-600 {\n color: var(--color-rose-600);\n }\n .text-rose-700 {\n color: var(--color-rose-700);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .underline {\n text-decoration-line: underline;\n }\n .opacity-25 {\n opacity: 25%;\n }\n .opacity-75 {\n opacity: 75%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .focus-within\\:border-indigo-300 {\n &:focus-within {\n border-color: var(--color-indigo-300);\n }\n }\n .focus-within\\:ring-2 {\n &:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .hover\\:-translate-y-0\\.5 {\n &:hover {\n @media (hover: hover) {\n --tw-translate-y: calc(var(--spacing) * -0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n }\n .hover\\:border-slate-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-300);\n }\n }\n }\n .hover\\:border-slate-400 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-400);\n }\n }\n }\n .hover\\:bg-indigo-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-indigo-100);\n }\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-800 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-800);\n }\n }\n }\n .hover\\:text-rose-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-700);\n }\n }\n }\n .hover\\:shadow {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-lg {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-md {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .focus\\:border-indigo-400 {\n &:focus {\n border-color: var(--color-indigo-400);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-indigo-100 {\n &:focus {\n --tw-ring-color: var(--color-indigo-100);\n }\n }\n .focus\\:ring-indigo-500 {\n &:focus {\n --tw-ring-color: var(--color-indigo-500);\n }\n }\n .focus\\:ring-slate-900 {\n &:focus {\n --tw-ring-color: var(--color-slate-900);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:flex-row {\n @media (width >= 48rem) {\n flex-direction: row;\n }\n }\n .md\\:items-center {\n @media (width >= 48rem) {\n align-items: center;\n }\n }\n .md\\:justify-between {\n @media (width >= 48rem) {\n justify-content: space-between;\n }\n }\n .md\\:p-6 {\n @media (width >= 48rem) {\n padding: calc(var(--spacing) * 6);\n }\n }\n .md\\:text-4xl {\n @media (width >= 48rem) {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n }\n .lg\\:grid-cols-\\[360px\\,1fr\\] {\n @media (width >= 64rem) {\n grid-template-columns: 360px,1fr;\n }\n }\n .dark\\:border-amber-700 {\n &:where(.dark, .dark *) {\n border-color: var(--color-amber-700);\n }\n }\n .dark\\:border-amber-800 {\n &:where(.dark, .dark *) {\n border-color: var(--color-amber-800);\n }\n }\n .dark\\:border-indigo-700 {\n &:where(.dark, .dark *) {\n border-color: var(--color-indigo-700);\n }\n }\n .dark\\:border-slate-600 {\n &:where(.dark, .dark *) {\n border-color: var(--color-slate-600);\n }\n }\n .dark\\:border-slate-700 {\n &:where(.dark, .dark *) {\n border-color: var(--color-slate-700);\n }\n }\n .dark\\:border-t-indigo-400 {\n &:where(.dark, .dark *) {\n border-top-color: var(--color-indigo-400);\n }\n }\n .dark\\:bg-amber-900\\/20 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-900\\/30 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-600 {\n &:where(.dark, .dark *) {\n background-color: var(--color-indigo-600);\n }\n }\n .dark\\:bg-indigo-900\\/30 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-rose-900\\/30 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-slate-600 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-600);\n }\n }\n .dark\\:bg-slate-700 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-700);\n }\n }\n .dark\\:bg-slate-800 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-800);\n }\n }\n .dark\\:bg-slate-800\\/50 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);\n }\n }\n }\n .dark\\:bg-slate-800\\/60 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-900);\n }\n }\n .dark\\:bg-slate-900\\/90 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n }\n }\n }\n .dark\\:bg-slate-950 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-950);\n }\n }\n .dark\\:text-amber-300 {\n &:where(.dark, .dark *) {\n color: var(--color-amber-300);\n }\n }\n .dark\\:text-amber-400 {\n &:where(.dark, .dark *) {\n color: var(--color-amber-400);\n }\n }\n .dark\\:text-emerald-400 {\n &:where(.dark, .dark *) {\n color: var(--color-emerald-400);\n }\n }\n .dark\\:text-indigo-300 {\n &:where(.dark, .dark *) {\n color: var(--color-indigo-300);\n }\n }\n .dark\\:text-indigo-400 {\n &:where(.dark, .dark *) {\n color: var(--color-indigo-400);\n }\n }\n .dark\\:text-rose-400 {\n &:where(.dark, .dark *) {\n color: var(--color-rose-400);\n }\n }\n .dark\\:text-slate-100 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-100);\n }\n }\n .dark\\:text-slate-200 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-200);\n }\n }\n .dark\\:text-slate-300 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-300);\n }\n }\n .dark\\:text-slate-400 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-400);\n }\n }\n .dark\\:text-slate-500 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-500);\n }\n }\n .dark\\:text-white {\n &:where(.dark, .dark *) {\n color: var(--color-white);\n }\n }\n .dark\\:hover\\:border-slate-500 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-500);\n }\n }\n }\n }\n .dark\\:hover\\:bg-indigo-700 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-indigo-700);\n }\n }\n }\n }\n .dark\\:hover\\:bg-indigo-900\\/50 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-900) 50%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-slate-700 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-700);\n }\n }\n }\n }\n .dark\\:focus\\:ring-indigo-900\\/40 {\n &:where(.dark, .dark *) {\n &:focus {\n --tw-ring-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--color-indigo-900) 40%, transparent);\n }\n }\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n }\n }\n}\n";
1741
+ const JSM_CSS = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-red-900: oklch(39.6% 0.141 25.723);\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-600: oklch(66.6% 0.179 58.318);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-amber-800: oklch(47.3% 0.137 46.201);\n --color-amber-900: oklch(41.4% 0.112 45.904);\n --color-emerald-50: oklch(97.9% 0.021 166.113);\n --color-emerald-400: oklch(76.5% 0.177 163.223);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-emerald-900: oklch(37.8% 0.077 168.94);\n --color-indigo-100: oklch(93% 0.034 272.788);\n --color-indigo-300: oklch(78.5% 0.115 274.713);\n --color-indigo-400: oklch(67.3% 0.182 276.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-indigo-600: oklch(51.1% 0.262 276.966);\n --color-indigo-700: oklch(45.7% 0.24 277.023);\n --color-indigo-900: oklch(35.9% 0.144 278.697);\n --color-rose-50: oklch(96.9% 0.015 12.422);\n --color-rose-400: oklch(71.2% 0.194 13.428);\n --color-rose-500: oklch(64.5% 0.246 16.439);\n --color-rose-600: oklch(58.6% 0.253 17.585);\n --color-rose-700: oklch(51.4% 0.222 16.935);\n --color-rose-900: oklch(41% 0.159 10.272);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-2xl: 42rem;\n --container-3xl: 48rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --tracking-wide: 0.025em;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n }\n .relative {\n position: relative;\n }\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-56 {\n height: calc(var(--spacing) * 56);\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-3xl {\n max-width: var(--container-3xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0\\.5 {\n --tw-translate-x: calc(var(--spacing) * 0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-4 {\n --tw-translate-x: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .space-y-0 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-10 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-amber-200 {\n border-color: var(--color-amber-200);\n }\n .border-amber-300 {\n border-color: var(--color-amber-300);\n }\n .border-red-300 {\n border-color: var(--color-red-300);\n }\n .border-red-700 {\n border-color: var(--color-red-700);\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-t-slate-900 {\n border-top-color: var(--color-slate-900);\n }\n .bg-amber-50 {\n background-color: var(--color-amber-50);\n }\n .bg-emerald-50 {\n background-color: var(--color-emerald-50);\n }\n .bg-indigo-600 {\n background-color: var(--color-indigo-600);\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-900 {\n background-color: var(--color-red-900);\n }\n .bg-red-900\\/20 {\n background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);\n }\n }\n .bg-rose-50 {\n background-color: var(--color-rose-50);\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-300 {\n background-color: var(--color-slate-300);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/70 {\n background-color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n .bg-white\\/90 {\n background-color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-10 {\n padding-block: calc(var(--spacing) * 10);\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.2em\\] {\n --tw-tracking: 0.2em;\n letter-spacing: 0.2em;\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-amber-600 {\n color: var(--color-amber-600);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-amber-800 {\n color: var(--color-amber-800);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n .text-rose-500 {\n color: var(--color-rose-500);\n }\n .text-rose-600 {\n color: var(--color-rose-600);\n }\n .text-rose-700 {\n color: var(--color-rose-700);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .underline {\n text-decoration-line: underline;\n }\n .opacity-25 {\n opacity: 25%;\n }\n .opacity-75 {\n opacity: 75%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .focus-within\\:border-indigo-300 {\n &:focus-within {\n border-color: var(--color-indigo-300);\n }\n }\n .focus-within\\:ring-2 {\n &:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .hover\\:-translate-y-0\\.5 {\n &:hover {\n @media (hover: hover) {\n --tw-translate-y: calc(var(--spacing) * -0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n }\n .hover\\:border-slate-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-300);\n }\n }\n }\n .hover\\:border-slate-400 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-400);\n }\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-800 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-800);\n }\n }\n }\n .hover\\:text-rose-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-700);\n }\n }\n }\n .hover\\:shadow {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-lg {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-md {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n }\n .focus\\:border-indigo-400 {\n &:focus {\n border-color: var(--color-indigo-400);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-indigo-100 {\n &:focus {\n --tw-ring-color: var(--color-indigo-100);\n }\n }\n .focus\\:ring-indigo-500 {\n &:focus {\n --tw-ring-color: var(--color-indigo-500);\n }\n }\n .focus\\:ring-slate-900 {\n &:focus {\n --tw-ring-color: var(--color-slate-900);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:flex-row {\n @media (width >= 48rem) {\n flex-direction: row;\n }\n }\n .md\\:items-center {\n @media (width >= 48rem) {\n align-items: center;\n }\n }\n .md\\:justify-between {\n @media (width >= 48rem) {\n justify-content: space-between;\n }\n }\n .md\\:p-6 {\n @media (width >= 48rem) {\n padding: calc(var(--spacing) * 6);\n }\n }\n .md\\:text-4xl {\n @media (width >= 48rem) {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n }\n .lg\\:grid-cols-\\[360px\\,1fr\\] {\n @media (width >= 64rem) {\n grid-template-columns: 360px,1fr;\n }\n }\n .dark\\:border-amber-700 {\n &:where(.dark, .dark *) {\n border-color: var(--color-amber-700);\n }\n }\n .dark\\:border-amber-800 {\n &:where(.dark, .dark *) {\n border-color: var(--color-amber-800);\n }\n }\n .dark\\:border-slate-600 {\n &:where(.dark, .dark *) {\n border-color: var(--color-slate-600);\n }\n }\n .dark\\:border-slate-700 {\n &:where(.dark, .dark *) {\n border-color: var(--color-slate-700);\n }\n }\n .dark\\:border-t-indigo-400 {\n &:where(.dark, .dark *) {\n border-top-color: var(--color-indigo-400);\n }\n }\n .dark\\:bg-amber-900\\/20 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-900\\/30 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-600 {\n &:where(.dark, .dark *) {\n background-color: var(--color-indigo-600);\n }\n }\n .dark\\:bg-rose-900\\/30 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-slate-600 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-600);\n }\n }\n .dark\\:bg-slate-700 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-700);\n }\n }\n .dark\\:bg-slate-800 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-800);\n }\n }\n .dark\\:bg-slate-800\\/50 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);\n }\n }\n }\n .dark\\:bg-slate-800\\/60 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-900);\n }\n }\n .dark\\:bg-slate-900\\/90 {\n &:where(.dark, .dark *) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n }\n }\n }\n .dark\\:bg-slate-950 {\n &:where(.dark, .dark *) {\n background-color: var(--color-slate-950);\n }\n }\n .dark\\:text-amber-300 {\n &:where(.dark, .dark *) {\n color: var(--color-amber-300);\n }\n }\n .dark\\:text-amber-400 {\n &:where(.dark, .dark *) {\n color: var(--color-amber-400);\n }\n }\n .dark\\:text-emerald-400 {\n &:where(.dark, .dark *) {\n color: var(--color-emerald-400);\n }\n }\n .dark\\:text-indigo-400 {\n &:where(.dark, .dark *) {\n color: var(--color-indigo-400);\n }\n }\n .dark\\:text-rose-400 {\n &:where(.dark, .dark *) {\n color: var(--color-rose-400);\n }\n }\n .dark\\:text-slate-100 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-100);\n }\n }\n .dark\\:text-slate-200 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-200);\n }\n }\n .dark\\:text-slate-300 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-300);\n }\n }\n .dark\\:text-slate-400 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-400);\n }\n }\n .dark\\:text-slate-500 {\n &:where(.dark, .dark *) {\n color: var(--color-slate-500);\n }\n }\n .dark\\:text-white {\n &:where(.dark, .dark *) {\n color: var(--color-white);\n }\n }\n .dark\\:hover\\:border-slate-500 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-500);\n }\n }\n }\n }\n .dark\\:hover\\:bg-indigo-700 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-indigo-700);\n }\n }\n }\n }\n .dark\\:hover\\:bg-slate-700 {\n &:where(.dark, .dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-700);\n }\n }\n }\n }\n .dark\\:focus\\:ring-indigo-900\\/40 {\n &:where(.dark, .dark *) {\n &:focus {\n --tw-ring-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--color-indigo-900) 40%, transparent);\n }\n }\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n }\n }\n}\n";
1439
1742
 
1440
1743
  const STYLE_ID = 'jsm-tailwind-styles';
1441
1744
  class JsonSchemaStylesService {
@@ -1475,10 +1778,16 @@ class JsonSchemaFormComponent {
1475
1778
  resolver;
1476
1779
  validation;
1477
1780
  cdr;
1781
+ options;
1478
1782
  schema;
1479
1783
  value;
1480
1784
  data;
1481
1785
  allowAdditionalProperties = false;
1786
+ /**
1787
+ * Decimal separator of number/integer fields. `,` shows and accepts `0,5` (both `,` and `.` are accepted as input
1788
+ * either way); the emitted value is always a JSON number.
1789
+ */
1790
+ decimalSeparator = '.';
1482
1791
  formReady = new EventEmitter();
1483
1792
  valueChange = new EventEmitter();
1484
1793
  schemaReady = new EventEmitter();
@@ -1492,14 +1801,20 @@ class JsonSchemaFormComponent {
1492
1801
  /** When true, all field errors are shown regardless of touched/dirty state. */
1493
1802
  showErrors = false;
1494
1803
  valueSub;
1495
- constructor(schemaService, resolver, validation, cdr, stylesService) {
1804
+ /** Last value emitted through valueChange (same reference the parent gets back through `data`/`value`). */
1805
+ lastEmitted;
1806
+ constructor(schemaService, resolver, validation, cdr, options, stylesService) {
1496
1807
  this.schemaService = schemaService;
1497
1808
  this.resolver = resolver;
1498
1809
  this.validation = validation;
1499
1810
  this.cdr = cdr;
1811
+ this.options = options;
1500
1812
  stylesService.inject();
1501
1813
  }
1502
1814
  ngOnChanges(changes) {
1815
+ if (changes['decimalSeparator']) {
1816
+ this.options.decimalSeparator = this.decimalSeparator;
1817
+ }
1503
1818
  if (changes['schema']) {
1504
1819
  // Schema changed — full rebuild required
1505
1820
  void this.buildForm();
@@ -1507,7 +1822,11 @@ class JsonSchemaFormComponent {
1507
1822
  else if ((changes['value'] || changes['data']) && this.form) {
1508
1823
  // Only data changed and form already exists — patch values without rebuilding
1509
1824
  const newData = this.value !== undefined ? this.value : this.data;
1510
- this.form.patchValue(newData, { emitEvent: false });
1825
+ // The parent usually feeds back what valueChange just emitted: patching it would overwrite the text being
1826
+ // typed (e.g. "45," would become "45"), so a round trip of the emitted value is ignored.
1827
+ if (newData !== this.lastEmitted) {
1828
+ this.form.patchValue(newData, { emitEvent: false });
1829
+ }
1511
1830
  }
1512
1831
  else if (changes['value'] || changes['data']) {
1513
1832
  // Form not built yet — build it
@@ -1558,48 +1877,17 @@ class JsonSchemaFormComponent {
1558
1877
  this.errorsMap = new Map();
1559
1878
  return;
1560
1879
  }
1561
- const normalized = this.normalizeValue(this.resolvedSchema, this.rootControl.value);
1880
+ const normalized = normalizeValue(this.resolvedSchema, this.rootControl.value);
1562
1881
  const errors = this.validation.validate(this.resolvedSchema, normalized);
1563
1882
  const map = new Map();
1564
1883
  for (const error of errors) {
1565
1884
  const path = error.instancePath ?? '';
1566
1885
  const messages = map.get(path) ?? [];
1567
- messages.push(error.message ?? error.keyword);
1886
+ messages.push(localizeNumbers(error.message ?? error.keyword, this.decimalSeparator));
1568
1887
  map.set(path, messages);
1569
1888
  }
1570
1889
  this.errorsMap = map;
1571
1890
  }
1572
- /**
1573
- * Recursively coerces string values to numbers/booleans where the schema declares
1574
- * type "number" or "integer". This is needed because <input type="number"> always
1575
- * returns a string to Angular's FormControl, but Ajv validates against the JSON type.
1576
- */
1577
- normalizeValue(schema, value) {
1578
- if (value === null || value === undefined)
1579
- return value;
1580
- const type = Array.isArray(schema.type)
1581
- ? schema.type.find((t) => t !== 'null') ?? schema.type[0]
1582
- : schema.type;
1583
- if ((type === 'number' || type === 'integer') && typeof value === 'string') {
1584
- const n = Number(value);
1585
- return isNaN(n) ? value : n;
1586
- }
1587
- if (type === 'object' && schema.properties && typeof value === 'object' && !Array.isArray(value)) {
1588
- const obj = value;
1589
- const result = { ...obj };
1590
- for (const [key, propSchema] of Object.entries(schema.properties)) {
1591
- if (key in result) {
1592
- result[key] = this.normalizeValue(propSchema, result[key]);
1593
- }
1594
- }
1595
- return result;
1596
- }
1597
- if (type === 'array' && Array.isArray(value)) {
1598
- const itemSchema = schema.items ?? {};
1599
- return value.map((item) => this.normalizeValue(itemSchema, item));
1600
- }
1601
- return value;
1602
- }
1603
1891
  onRootReplaced(control) {
1604
1892
  this.rootControl = control;
1605
1893
  if (control instanceof FormGroup) {
@@ -1620,128 +1908,129 @@ class JsonSchemaFormComponent {
1620
1908
  this.updateErrors();
1621
1909
  this.valueSub = this.form.valueChanges.subscribe(() => {
1622
1910
  this.updateErrors();
1623
- this.valueChange.emit(this.rootControl.value);
1911
+ this.lastEmitted = this.resolvedSchema ? normalizeValue(this.resolvedSchema, this.rootControl.value) : this.rootControl.value;
1912
+ this.valueChange.emit(this.lastEmitted);
1624
1913
  });
1625
1914
  }
1626
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }, { token: JsonSchemaStylesService }], target: i0.ɵɵFactoryTarget.Component });
1627
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data", allowAdditionalProperties: "allowAdditionalProperties" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady", schemaErrors: "schemaErrors" }, usesOnChanges: true, ngImport: i0, template: `
1628
- <div class="jsm-root">
1629
- <form class="w-full space-y-5">
1630
- <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
1631
- <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
1632
- <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
1633
- </div>
1634
-
1635
- <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
1636
- <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
1637
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
1638
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
1639
- </svg>
1640
- Resolving schema&hellip;
1641
- </div>
1642
-
1643
- <!-- schema structural errors panel -->
1644
- <div *ngIf="schemaErrorList.length > 0 && !loading"
1645
- class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
1646
- role="alert">
1647
- <div class="flex items-center gap-2">
1648
- <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
1649
- <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
1650
- <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1651
- </svg>
1652
- <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
1653
- Schema errors ({{ schemaErrorList.length }})
1654
- </span>
1655
- </div>
1656
- <p class="text-xs text-amber-700 dark:text-amber-400">
1657
- The schema has structural issues. Fix them to get a valid form.
1658
- </p>
1659
- <div class="space-y-2">
1660
- <div *ngFor="let err of schemaErrorList"
1661
- class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
1662
- <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
1663
- <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
1664
- <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
1665
- </div>
1666
- </div>
1667
- </div>
1668
-
1669
- <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
1670
- <jsm-schema-node
1671
- [schema]="resolvedSchema"
1672
- [control]="rootControl"
1673
- [path]="''"
1674
- [errorsMap]="errorsMap"
1675
- [allowAdditionalProperties]="allowAdditionalProperties"
1676
- [showErrors]="showErrors"
1677
- label="Root"
1678
- (controlReplaced)="onRootReplaced($event)"
1679
- ></jsm-schema-node>
1680
- </div>
1681
- </form>
1682
- </div>
1683
- `, isInline: true, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1915
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }, { token: JsonSchemaFormOptions }, { token: JsonSchemaStylesService }], target: i0.ɵɵFactoryTarget.Component });
1916
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data", allowAdditionalProperties: "allowAdditionalProperties", decimalSeparator: "decimalSeparator" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady", schemaErrors: "schemaErrors" }, providers: [JsonSchemaFormOptions], usesOnChanges: true, ngImport: i0, template: `
1917
+ <div class="jsm-root">
1918
+ <form class="w-full space-y-5">
1919
+ <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
1920
+ <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
1921
+ <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
1922
+ </div>
1923
+
1924
+ <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
1925
+ <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
1926
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
1927
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
1928
+ </svg>
1929
+ Resolving schema&hellip;
1930
+ </div>
1931
+
1932
+ <!-- schema structural errors panel -->
1933
+ <div *ngIf="schemaErrorList.length > 0 && !loading"
1934
+ class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
1935
+ role="alert">
1936
+ <div class="flex items-center gap-2">
1937
+ <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
1938
+ <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
1939
+ <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1940
+ </svg>
1941
+ <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
1942
+ Schema errors ({{ schemaErrorList.length }})
1943
+ </span>
1944
+ </div>
1945
+ <p class="text-xs text-amber-700 dark:text-amber-400">
1946
+ The schema has structural issues. Fix them to get a valid form.
1947
+ </p>
1948
+ <div class="space-y-2">
1949
+ <div *ngFor="let err of schemaErrorList"
1950
+ class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
1951
+ <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
1952
+ <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
1953
+ <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
1954
+ </div>
1955
+ </div>
1956
+ </div>
1957
+
1958
+ <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
1959
+ <jsm-schema-node
1960
+ [schema]="resolvedSchema"
1961
+ [control]="rootControl"
1962
+ [path]="''"
1963
+ [errorsMap]="errorsMap"
1964
+ [allowAdditionalProperties]="allowAdditionalProperties"
1965
+ [showErrors]="showErrors"
1966
+ label="Root"
1967
+ (controlReplaced)="onRootReplaced($event)"
1968
+ ></jsm-schema-node>
1969
+ </div>
1970
+ </form>
1971
+ </div>
1972
+ `, isInline: true, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1684
1973
  }
1685
1974
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
1686
1975
  type: Component,
1687
- args: [{ selector: 'jsm-json-schema-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent], encapsulation: ViewEncapsulation.None, template: `
1688
- <div class="jsm-root">
1689
- <form class="w-full space-y-5">
1690
- <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
1691
- <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
1692
- <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
1693
- </div>
1694
-
1695
- <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
1696
- <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
1697
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
1698
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
1699
- </svg>
1700
- Resolving schema&hellip;
1701
- </div>
1702
-
1703
- <!-- schema structural errors panel -->
1704
- <div *ngIf="schemaErrorList.length > 0 && !loading"
1705
- class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
1706
- role="alert">
1707
- <div class="flex items-center gap-2">
1708
- <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
1709
- <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
1710
- <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
1711
- </svg>
1712
- <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
1713
- Schema errors ({{ schemaErrorList.length }})
1714
- </span>
1715
- </div>
1716
- <p class="text-xs text-amber-700 dark:text-amber-400">
1717
- The schema has structural issues. Fix them to get a valid form.
1718
- </p>
1719
- <div class="space-y-2">
1720
- <div *ngFor="let err of schemaErrorList"
1721
- class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
1722
- <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
1723
- <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
1724
- <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
1725
- </div>
1726
- </div>
1727
- </div>
1728
-
1729
- <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
1730
- <jsm-schema-node
1731
- [schema]="resolvedSchema"
1732
- [control]="rootControl"
1733
- [path]="''"
1734
- [errorsMap]="errorsMap"
1735
- [allowAdditionalProperties]="allowAdditionalProperties"
1736
- [showErrors]="showErrors"
1737
- label="Root"
1738
- (controlReplaced)="onRootReplaced($event)"
1739
- ></jsm-schema-node>
1740
- </div>
1741
- </form>
1742
- </div>
1976
+ args: [{ selector: 'jsm-json-schema-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent], providers: [JsonSchemaFormOptions], encapsulation: ViewEncapsulation.None, template: `
1977
+ <div class="jsm-root">
1978
+ <form class="w-full space-y-5">
1979
+ <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
1980
+ <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
1981
+ <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
1982
+ </div>
1983
+
1984
+ <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
1985
+ <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
1986
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
1987
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
1988
+ </svg>
1989
+ Resolving schema&hellip;
1990
+ </div>
1991
+
1992
+ <!-- schema structural errors panel -->
1993
+ <div *ngIf="schemaErrorList.length > 0 && !loading"
1994
+ class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
1995
+ role="alert">
1996
+ <div class="flex items-center gap-2">
1997
+ <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
1998
+ <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
1999
+ <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
2000
+ </svg>
2001
+ <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
2002
+ Schema errors ({{ schemaErrorList.length }})
2003
+ </span>
2004
+ </div>
2005
+ <p class="text-xs text-amber-700 dark:text-amber-400">
2006
+ The schema has structural issues. Fix them to get a valid form.
2007
+ </p>
2008
+ <div class="space-y-2">
2009
+ <div *ngFor="let err of schemaErrorList"
2010
+ class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
2011
+ <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
2012
+ <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
2013
+ <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
2014
+ </div>
2015
+ </div>
2016
+ </div>
2017
+
2018
+ <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
2019
+ <jsm-schema-node
2020
+ [schema]="resolvedSchema"
2021
+ [control]="rootControl"
2022
+ [path]="''"
2023
+ [errorsMap]="errorsMap"
2024
+ [allowAdditionalProperties]="allowAdditionalProperties"
2025
+ [showErrors]="showErrors"
2026
+ label="Root"
2027
+ (controlReplaced)="onRootReplaced($event)"
2028
+ ></jsm-schema-node>
2029
+ </div>
2030
+ </form>
2031
+ </div>
1743
2032
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"] }]
1744
- }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }, { type: JsonSchemaStylesService }], propDecorators: { schema: [{
2033
+ }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }, { type: JsonSchemaFormOptions }, { type: JsonSchemaStylesService }], propDecorators: { schema: [{
1745
2034
  type: Input,
1746
2035
  args: [{ required: true }]
1747
2036
  }], value: [{
@@ -1750,6 +2039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
1750
2039
  type: Input
1751
2040
  }], allowAdditionalProperties: [{
1752
2041
  type: Input
2042
+ }], decimalSeparator: [{
2043
+ type: Input
1753
2044
  }], formReady: [{
1754
2045
  type: Output
1755
2046
  }], valueChange: [{
@@ -1777,5 +2068,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
1777
2068
  * Generated bundle index. Do not edit.
1778
2069
  */
1779
2070
 
1780
- export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaStylesService, JsonSchemaValidationService };
2071
+ export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormOptions, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaStylesService, JsonSchemaValidationService, NumericInputDirective, formatNumeric, localizeNumbers, normalizeValue, parseNumericText, sanitizeNumericText };
1781
2072
  //# sourceMappingURL=elle96-ng-json-schema-manager.mjs.map