@fuentis/phoenix-ui 0.0.9-alpha.632 → 0.0.9-alpha.633
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.
|
@@ -10263,16 +10263,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
10263
10263
|
type: Input
|
|
10264
10264
|
}] } });
|
|
10265
10265
|
|
|
10266
|
+
/**
|
|
10267
|
+
* Splits a flat list of fields into row chunks for grid rendering.
|
|
10268
|
+
* A field with `style.newRow === true` always starts a fresh row,
|
|
10269
|
+
* regardless of how much space is left in the current row.
|
|
10270
|
+
* Fields without `newRow` keep flowing into the current row (existing
|
|
10271
|
+
* PrimeFlex wrap-by-colWidth behavior is preserved within each chunk).
|
|
10272
|
+
*/
|
|
10273
|
+
function splitControlsIntoRows(controls) {
|
|
10274
|
+
if (!controls || !controls.length)
|
|
10275
|
+
return [];
|
|
10276
|
+
const rows = [];
|
|
10277
|
+
let current = [];
|
|
10278
|
+
for (const field of controls) {
|
|
10279
|
+
if (field?.style?.newRow && current.length) {
|
|
10280
|
+
rows.push(current);
|
|
10281
|
+
current = [];
|
|
10282
|
+
}
|
|
10283
|
+
current.push(field);
|
|
10284
|
+
}
|
|
10285
|
+
if (current.length)
|
|
10286
|
+
rows.push(current);
|
|
10287
|
+
return rows;
|
|
10288
|
+
}
|
|
10289
|
+
|
|
10266
10290
|
class MetaFormGroupV2Component {
|
|
10267
10291
|
group;
|
|
10268
10292
|
form;
|
|
10269
10293
|
readOnly = false;
|
|
10294
|
+
/** Group's fields split into row chunks, honoring `style.newRow` hard breaks. */
|
|
10295
|
+
get rows() {
|
|
10296
|
+
return splitControlsIntoRows(this.group?.ctrl);
|
|
10297
|
+
}
|
|
10270
10298
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n <div class=\"grid\">\n
|
|
10299
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n @for (row of rows; track $index) {\n <div class=\"grid\">\n @for (f of row; track f?.configuration?.key) {\n <div [ngClass]=\"f.style.colWidth || '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</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10272
10300
|
}
|
|
10273
10301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, decorators: [{
|
|
10274
10302
|
type: Component,
|
|
10275
|
-
args: [{ selector: 'phoenix-meta-form-group-v2', standalone: true, imports: [CommonModule, ReactiveFormsModule, MetaFormFieldV2Component], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n <div class=\"grid\">\n
|
|
10303
|
+
args: [{ selector: 'phoenix-meta-form-group-v2', standalone: true, imports: [CommonModule, ReactiveFormsModule, MetaFormFieldV2Component], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n @for (row of rows; track $index) {\n <div class=\"grid\">\n @for (f of row; track f?.configuration?.key) {\n <div [ngClass]=\"f.style.colWidth || '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</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"] }]
|
|
10276
10304
|
}], propDecorators: { group: [{
|
|
10277
10305
|
type: Input,
|
|
10278
10306
|
args: [{ required: true }]
|
|
@@ -10885,6 +10913,13 @@ class MetaFormV2Component {
|
|
|
10885
10913
|
get flatControls() {
|
|
10886
10914
|
return this.config?.controls ?? [];
|
|
10887
10915
|
}
|
|
10916
|
+
/**
|
|
10917
|
+
* Flat schema split into row chunks, honoring `style.newRow` hard breaks.
|
|
10918
|
+
* Used by the non-grouped grid template.
|
|
10919
|
+
*/
|
|
10920
|
+
get controlRows() {
|
|
10921
|
+
return splitControlsIntoRows(this.flatControls);
|
|
10922
|
+
}
|
|
10888
10923
|
/** TrackBy for group rendering */
|
|
10889
10924
|
groupTrack(g, idx) {
|
|
10890
10925
|
return g?.id ?? idx;
|
|
@@ -10992,7 +11027,7 @@ class MetaFormV2Component {
|
|
|
10992
11027
|
this.depCleanup?.();
|
|
10993
11028
|
}
|
|
10994
11029
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10995
|
-
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
|
|
11030
|
+
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 @for (row of controlRows; track $index) {\n <div class=\"grid\">\n @for (f of row; track f.configuration.key) {\n <div [ngClass]=\"f.style.colWidth ?? '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 }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$1.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: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10996
11031
|
}
|
|
10997
11032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, decorators: [{
|
|
10998
11033
|
type: Component,
|
|
@@ -11003,7 +11038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
11003
11038
|
TranslateModule,
|
|
11004
11039
|
MetaFormFieldV2Component,
|
|
11005
11040
|
MetaFormGroupV2Component,
|
|
11006
|
-
], 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
|
|
11041
|
+
], 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 @for (row of controlRows; track $index) {\n <div class=\"grid\">\n @for (f of row; track f.configuration.key) {\n <div [ngClass]=\"f.style.colWidth ?? '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 }\n</div>", styles: [":host{display:block}\n"] }]
|
|
11007
11042
|
}], propDecorators: { form: [{
|
|
11008
11043
|
type: Input,
|
|
11009
11044
|
args: [{ required: true }]
|