@3kles/kles-material-dynamicforms 22.0.2 → 22.0.3
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.
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ Check out the [changelog](./CHANGELOG.md) to check all the latest changes.
|
|
|
14
14
|
|
|
15
15
|
Add `layout` to an individual root field to enable CSS Grid automatically.
|
|
16
16
|
`direction="grid"` remains available to force it when no field declares a layout.
|
|
17
|
-
The defaults are a 12-column grid,
|
|
17
|
+
The defaults are a 12-column grid, no gap, `colSpan: 12`, and `rowSpan: 1`.
|
|
18
18
|
|
|
19
19
|
```typescript
|
|
20
20
|
const fields: KlesFormElement[] = [
|
|
@@ -674,7 +674,7 @@ function flattenKlesFields(elements) {
|
|
|
674
674
|
}
|
|
675
675
|
|
|
676
676
|
const DEFAULT_COLUMNS = 12;
|
|
677
|
-
const DEFAULT_GAP = '
|
|
677
|
+
const DEFAULT_GAP = '0';
|
|
678
678
|
class KlesFormElementsComponent {
|
|
679
679
|
constructor() {
|
|
680
680
|
this._elements = [];
|
|
@@ -786,7 +786,7 @@ class KlesFormElementsComponent {
|
|
|
786
786
|
</div>
|
|
787
787
|
}
|
|
788
788
|
}
|
|
789
|
-
`, isInline: true, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
789
|
+
`, isInline: true, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}.kles-form-section-header{margin-bottom:14px}.kles-form-section-title{display:flex;align-items:center;gap:8px}.kles-form-section-title mat-icon{width:24px;height:24px;font-size:24px;color:var(--mat-sys-primary, currentColor)}.kles-form-section-header h3{margin:0;font-size:1.25rem;line-height:1.5rem;font-weight:500}.kles-form-section-header p{margin:4px 0 0}.kles-form-divider{border:0;border-top:1px solid currentColor;margin:8px 0;opacity:.2}@media(max-width:599.98px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xs, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-xs, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-xs, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-xs, var(--kles-row-start, auto))}}@media(min-width:600px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-sm, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-sm, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-sm, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-sm, var(--kles-row-start, auto))}}@media(min-width:960px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)));--kles-effective-row-span: var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)));--kles-effective-col-start: var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)));--kles-effective-row-start: var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))}}@media(min-width:1280px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12))));--kles-effective-row-span: var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1))));--kles-effective-col-start: var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto))));--kles-effective-row-start: var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto))))}}@media(min-width:1920px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xl, var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)))));--kles-effective-row-span: var(--kles-row-span-xl, var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)))));--kles-effective-col-start: var(--kles-col-start-xl, var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)))));--kles-effective-row-start: var(--kles-row-start-xl, var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))))}}\n"], dependencies: [{ kind: "component", type: KlesFormElementsComponent, selector: "kles-form-elements", inputs: ["elements", "group", "ui", "context", "layoutConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
790
790
|
}
|
|
791
791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormElementsComponent, decorators: [{
|
|
792
792
|
type: Component,
|
|
@@ -827,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
827
827
|
</div>
|
|
828
828
|
}
|
|
829
829
|
}
|
|
830
|
-
`, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
830
|
+
`, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}.kles-form-section-header{margin-bottom:14px}.kles-form-section-title{display:flex;align-items:center;gap:8px}.kles-form-section-title mat-icon{width:24px;height:24px;font-size:24px;color:var(--mat-sys-primary, currentColor)}.kles-form-section-header h3{margin:0;font-size:1.25rem;line-height:1.5rem;font-weight:500}.kles-form-section-header p{margin:4px 0 0}.kles-form-divider{border:0;border-top:1px solid currentColor;margin:8px 0;opacity:.2}@media(max-width:599.98px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xs, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-xs, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-xs, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-xs, var(--kles-row-start, auto))}}@media(min-width:600px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-sm, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-sm, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-sm, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-sm, var(--kles-row-start, auto))}}@media(min-width:960px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)));--kles-effective-row-span: var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)));--kles-effective-col-start: var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)));--kles-effective-row-start: var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))}}@media(min-width:1280px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12))));--kles-effective-row-span: var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1))));--kles-effective-col-start: var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto))));--kles-effective-row-start: var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto))))}}@media(min-width:1920px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xl, var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)))));--kles-effective-row-span: var(--kles-row-span-xl, var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)))));--kles-effective-col-start: var(--kles-col-start-xl, var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)))));--kles-effective-row-start: var(--kles-row-start-xl, var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))))}}\n"] }]
|
|
831
831
|
}], propDecorators: { elements: [{
|
|
832
832
|
type: Input,
|
|
833
833
|
args: [{ required: true }]
|
|
@@ -843,6 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
843
843
|
type: Input
|
|
844
844
|
}] } });
|
|
845
845
|
|
|
846
|
+
const DEFAULT_GRID_GAP = '0';
|
|
846
847
|
class KlesDynamicFormComponent {
|
|
847
848
|
get orientationClass() {
|
|
848
849
|
if (this.hasRootElementLayout && this.direction !== 'inline-grid')
|
|
@@ -867,7 +868,7 @@ class KlesDynamicFormComponent {
|
|
|
867
868
|
return null;
|
|
868
869
|
return {
|
|
869
870
|
'--kles-grid-columns': this.normalizeColumns(this.layout.columns),
|
|
870
|
-
'--kles-grid-gap': this.layout.gap?.trim() ||
|
|
871
|
+
'--kles-grid-gap': this.layout.gap?.trim() || DEFAULT_GRID_GAP,
|
|
871
872
|
};
|
|
872
873
|
}
|
|
873
874
|
get hasRootElementLayout() {
|
|
@@ -1036,7 +1037,7 @@ class KlesDynamicFormComponent {
|
|
|
1036
1037
|
<mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
|
|
1037
1038
|
}
|
|
1038
1039
|
</form>
|
|
1039
|
-
`, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
1040
|
+
`, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n", ".dynamic-form-inline-grid{display:inline-grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "component", type: KlesFormElementsComponent, selector: "kles-form-elements", inputs: ["elements", "group", "ui", "context", "layoutConfig"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
|
|
1040
1041
|
}
|
|
1041
1042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
|
|
1042
1043
|
type: Component,
|
|
@@ -1055,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1055
1056
|
<mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
|
|
1056
1057
|
}
|
|
1057
1058
|
</form>
|
|
1058
|
-
`, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, KlesFormElementsComponent, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
1059
|
+
`, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, KlesFormElementsComponent, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n", ".dynamic-form-inline-grid{display:inline-grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n"] }]
|
|
1059
1060
|
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
|
|
1060
1061
|
type: Input
|
|
1061
1062
|
}], fields: [{
|