@fuentis/phoenix-ui 0.0.9-alpha.534 → 0.0.9-alpha.536

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.
@@ -9302,6 +9302,8 @@ class MetaFormV2Component {
9302
9302
  form;
9303
9303
  config;
9304
9304
  readOnly = false;
9305
+ contentStyle = null; // npr { width:'70%' }
9306
+ contentClass = null; // opcionalno.
9305
9307
  fb = inject(FormBuilder);
9306
9308
  submitValidator = inject(MetaSubmitValidatorService);
9307
9309
  translate = inject(TranslateService);
@@ -9343,13 +9345,13 @@ class MetaFormV2Component {
9343
9345
  }
9344
9346
  });
9345
9347
  }
9346
- // set initial expanded groups (when grouped)
9347
- if (configChanged || metaChanged) {
9348
+ // init expanded only when meta (structure) changed
9349
+ if (metaChanged) {
9348
9350
  if (this.isGrouped) {
9349
9351
  const groups = this.groupedControls ?? [];
9350
9352
  this.expandedGroupIds = groups
9351
9353
  .filter((g) => !g?.collapsed)
9352
- .map((g) => String(g?.id ?? ''))
9354
+ .map((g) => this.panelValue(g))
9353
9355
  .filter((id) => !!id);
9354
9356
  }
9355
9357
  else {
@@ -9370,6 +9372,10 @@ class MetaFormV2Component {
9370
9372
  if (typeof maybeCleanup === 'function')
9371
9373
  this.depCleanup = maybeCleanup;
9372
9374
  }
9375
+ // ✅ auto-expand invalid groups when entering edit
9376
+ if (changes['readOnly'] && changes['readOnly'].previousValue === true && changes['readOnly'].currentValue === false) {
9377
+ this.expandInvalidGroups();
9378
+ }
9373
9379
  this.lastSignature = signature;
9374
9380
  }
9375
9381
  // Template handler (typed exactly for our template usage)
@@ -9414,11 +9420,24 @@ class MetaFormV2Component {
9414
9420
  .filter(Boolean);
9415
9421
  return keys.some((k) => this.form.get(k)?.invalid);
9416
9422
  }
9423
+ expandInvalidGroups() {
9424
+ if (!this.isGrouped)
9425
+ return;
9426
+ const groups = this.groupedControls ?? [];
9427
+ const invalidIds = groups
9428
+ .filter((g) => this.groupHasInvalid(g))
9429
+ .map((g) => this.panelValue(g))
9430
+ .filter(Boolean);
9431
+ if (invalidIds.length) {
9432
+ // keep already opened + open invalid
9433
+ this.expandedGroupIds = Array.from(new Set([...this.expandedGroupIds, ...invalidIds]));
9434
+ }
9435
+ }
9417
9436
  ngOnDestroy() {
9418
9437
  this.depCleanup?.();
9419
9438
  }
9420
9439
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
9421
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n {{ g?.labelKey | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.col ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9440
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n\n <!-- plus/minus toggle icon -->\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n\n {{ g?.groupName | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.col ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9422
9441
  }
9423
9442
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, decorators: [{
9424
9443
  type: Component,
@@ -9429,7 +9448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
9429
9448
  TranslateModule,
9430
9449
  MetaFormFieldV2Component,
9431
9450
  MetaFormGroupV2Component,
9432
- ], template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n {{ g?.labelKey | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.col ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"] }]
9451
+ ], template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n\n <!-- plus/minus toggle icon -->\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n\n {{ g?.groupName | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.col ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"] }]
9433
9452
  }], propDecorators: { form: [{
9434
9453
  type: Input,
9435
9454
  args: [{ required: true }]
@@ -9438,6 +9457,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
9438
9457
  args: [{ required: true }]
9439
9458
  }], readOnly: [{
9440
9459
  type: Input
9460
+ }], contentStyle: [{
9461
+ type: Input
9462
+ }], contentClass: [{
9463
+ type: Input
9441
9464
  }] } });
9442
9465
  function idxSafe(g) {
9443
9466
  // fallback stable id if some group has no id