@ngstarter-ui/components 21.0.46 → 21.0.48
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/ai/component-registry.json +14 -4
- package/fesm2022/ngstarter-ui-components-card.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-form-builder.mjs +1013 -320
- package/fesm2022/ngstarter-ui-components-form-builder.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_common.scss +1 -0
- package/types/ngstarter-ui-components-form-builder.d.ts +43 -20
|
@@ -1311,8 +1311,8 @@
|
|
|
1311
1311
|
"--ngs-card-title-font-weight",
|
|
1312
1312
|
"--ngs-card-title-letter-spacing",
|
|
1313
1313
|
"--ngs-card-title-line-height",
|
|
1314
|
+
"--ngs-color-border",
|
|
1314
1315
|
"--ngs-color-on-surface",
|
|
1315
|
-
"--ngs-color-subtle",
|
|
1316
1316
|
"--ngs-color-surface-container",
|
|
1317
1317
|
"--ngs-radius-xl",
|
|
1318
1318
|
"--ngs-shadow-sm"
|
|
@@ -4368,11 +4368,11 @@
|
|
|
4368
4368
|
"FormBuilderSchema shape: { title?: string; fields?: FormBuilderField[]; layout?: FormBuilderLayoutItem[]; sections: FormBuilderSection[] }.",
|
|
4369
4369
|
"Root-level fields live in schema.fields and can be placed outside sections. Sections live in schema.sections and contain section.fields. The optional schema.layout array controls top-level canvas order with items like { kind: \"field\" | \"section\", id }.",
|
|
4370
4370
|
"FormBuilderSection shape: { id: string; title: string; description?: string; collapsed?: boolean; fields: FormBuilderField[] }.",
|
|
4371
|
-
"FormBuilderField shape: { id: string; name: string; type: string; kind?: \"field\" | \"layout\" | \"static\"; label: string; placeholder?: string; hint?: string; defaultValue?: any; width?: 1..12; multiple?: boolean; clearable?: boolean; required?: boolean; disabled?: boolean; readonly?: boolean; options?: FormBuilderOption[]; validation?: FormBuilderValidationRule[];
|
|
4371
|
+
"FormBuilderField shape: { id: string; name: string; type: string; kind?: \"field\" | \"layout\" | \"static\"; label: string; placeholder?: string; hint?: string; defaultValue?: any; width?: 1..12; multiple?: boolean; clearable?: boolean; required?: boolean; disabled?: boolean; readonly?: boolean; options?: FormBuilderOption[]; validation?: FormBuilderValidationRule[]; settings?: Record<string, any>; children?: FormBuilderField[] }.",
|
|
4372
4372
|
"Layout blocks are represented as fields with kind: \"layout\". The built-in group block uses type: \"group\", width: 12, and children: FormBuilderField[]. Section is a top-level FormBuilderSection, not a child field, and should not be nested inside another section/group.",
|
|
4373
4373
|
"Static blocks are represented as fields with kind: \"static\". The built-in spacer block uses type: \"spacer\", width: 12, and settings.height with one of 8, 16, 24, 32, 48, or 64.",
|
|
4374
4374
|
"Use width as a 12-column span. Default fields are 12 columns unless a narrower width is set. Nested children in group are sorted and rendered inside that group container.",
|
|
4375
|
-
"Option fields use options entries { label: string; value: any; selected?: boolean }. For select, multiple controls array values; clearable enables the clear action. For radio, settings.orientation is \"vertical\" by default and can be \"horizontal\". Date and time fields include type: \"date\" for a single date, type: \"time\" for HH:mm time values, and type: \"date-range\" for a DateRange-like value with start/end dates. Upload fields use type: \"upload\", multiple for File[] values, and settings.accept for comma-separated MIME types such as \"*/*\" or \"image/*,application/pdf\". Upload handling can be provided with [uploadCallback] on ngs-form-builder/ngs-form-renderer or globally through provideFormBuilder({ uploadCallback }). The callback receives { field, control, event, files, fileList, multiple } and may return sync/async value stored in the form control.",
|
|
4375
|
+
"Option fields use options entries { label: string; value: any; selected?: boolean }. For select, multiple controls array values; clearable enables the clear action. For radio, settings.orientation is \"vertical\" by default and can be \"horizontal\". Hidden fields use type: \"hidden\" and render as native <input type=\"hidden\"> controls included in raw form values. Date and time fields include type: \"date\" for a single date, type: \"time\" for HH:mm time values, and type: \"date-range\" for a DateRange-like value with start/end dates. Upload fields use type: \"upload\", multiple for File[] values, and settings.accept for comma-separated MIME types such as \"*/*\" or \"image/*,application/pdf\". Upload handling can be provided with [uploadCallback] on ngs-form-builder/ngs-form-renderer or globally through provideFormBuilder({ uploadCallback }). The callback receives { field, control, event, files, fileList, multiple } and may return sync/async value stored in the form control.",
|
|
4376
4376
|
"Use <ngs-form-renderer> from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormBuilderRenderer.",
|
|
4377
4377
|
"Register custom placeholders through provideFormBuilder({ fields/items/settings }) using formBuilderField(), formBuilderItem(), and formBuilderSettings(). Custom field definitions can provide defaults, renderer, settings, validators, acceptsChildren, group, icon, and kind."
|
|
4378
4378
|
],
|
|
@@ -4419,9 +4419,15 @@
|
|
|
4419
4419
|
"createDefaultFormBuilderSchema",
|
|
4420
4420
|
"DEFAULT_FORM_BUILDER_FIELDS",
|
|
4421
4421
|
"DEFAULT_FORM_BUILDER_ITEMS",
|
|
4422
|
+
"FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA",
|
|
4422
4423
|
"FORM_BUILDER_FIELDS",
|
|
4424
|
+
"FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA",
|
|
4423
4425
|
"FORM_BUILDER_ITEMS",
|
|
4426
|
+
"FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA",
|
|
4427
|
+
"FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA",
|
|
4428
|
+
"FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA",
|
|
4424
4429
|
"FORM_BUILDER_SETTINGS",
|
|
4430
|
+
"FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA",
|
|
4425
4431
|
"FORM_BUILDER_UPLOAD_CALLBACK",
|
|
4426
4432
|
"FormBuilder",
|
|
4427
4433
|
"FormBuilderComponentImporter",
|
|
@@ -4443,14 +4449,18 @@
|
|
|
4443
4449
|
"FormBuilderSection",
|
|
4444
4450
|
"FormBuilderSectionSettingsContext",
|
|
4445
4451
|
"formBuilderSettings",
|
|
4452
|
+
"FormBuilderSettingsConfig",
|
|
4446
4453
|
"FormBuilderSettingsContext",
|
|
4447
4454
|
"FormBuilderSettingsDefinition",
|
|
4448
4455
|
"FormBuilderSettingsHost",
|
|
4456
|
+
"FormBuilderSettingsInheritance",
|
|
4457
|
+
"FormBuilderSettingsSchemaFactory",
|
|
4449
4458
|
"FormBuilderUploadCallback",
|
|
4450
4459
|
"FormBuilderUploadContext",
|
|
4451
4460
|
"FormBuilderValidationRule",
|
|
4452
|
-
"FormBuilderVisibility",
|
|
4453
4461
|
"provideFormBuilder",
|
|
4462
|
+
"provideFormBuilderField",
|
|
4463
|
+
"provideFormBuilderFields",
|
|
4454
4464
|
"validatorsFromRules"
|
|
4455
4465
|
],
|
|
4456
4466
|
"inputs": [
|
|
@@ -27,7 +27,7 @@ class Card {
|
|
|
27
27
|
return !!this._footer();
|
|
28
28
|
}
|
|
29
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Card, isStandalone: true, selector: "ngs-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-card-outlined": "appearance() === \"outlined\"", "class.ngs-card-filled": "appearance() === \"filled\"", "class.ngs-card-raised": "appearance() === \"raised\"" }, classAttribute: "ngs-card not-prose" }, queries: [{ propertyName: "_footer", first: true, predicate: CardFooter, descendants: true, isSignal: true }], exportAs: ["ngsCard"], ngImport: i0, template: "<ng-content/>\n@if (hasFooter) {\n <ng-content select=\"ngs-card-footer\"/>\n}\n", styles: [":host{--ngs-card-bg: var(--ngs-color-surface-container);--ngs-card-color: var(--ngs-color-on-surface);--ngs-card-radius: var(--ngs-radius-xl);--ngs-card-border-color: var(--ngs-color-
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Card, isStandalone: true, selector: "ngs-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-card-outlined": "appearance() === \"outlined\"", "class.ngs-card-filled": "appearance() === \"filled\"", "class.ngs-card-raised": "appearance() === \"raised\"" }, classAttribute: "ngs-card not-prose" }, queries: [{ propertyName: "_footer", first: true, predicate: CardFooter, descendants: true, isSignal: true }], exportAs: ["ngsCard"], ngImport: i0, template: "<ng-content/>\n@if (hasFooter) {\n <ng-content select=\"ngs-card-footer\"/>\n}\n", styles: [":host{--ngs-card-bg: var(--ngs-color-surface-container);--ngs-card-color: var(--ngs-color-on-surface);--ngs-card-radius: var(--ngs-radius-xl);--ngs-card-border-color: var(--ngs-color-border);--ngs-card-shadow: none;--ngs-card-padding: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-radius:var(--ngs-card-radius);background:var(--ngs-card-bg);color:var(--ngs-card-color);box-shadow:var(--ngs-card-shadow);border-width:0;border-style:solid;border-color:var(--ngs-card-border-color)}:host(.ngs-card-outlined){--ngs-card-shadow: none;--ngs-card-bg: transparent;border-width:1px}:host(.ngs-card-raised){--ngs-card-shadow: var(--ngs-shadow-sm);--ngs-card-bg: var(--ngs-color-surface-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Card, decorators: [{
|
|
33
33
|
type: Component,
|
|
@@ -36,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
36
36
|
'[class.ngs-card-outlined]': 'appearance() === "outlined"',
|
|
37
37
|
'[class.ngs-card-filled]': 'appearance() === "filled"',
|
|
38
38
|
'[class.ngs-card-raised]': 'appearance() === "raised"',
|
|
39
|
-
}, template: "<ng-content/>\n@if (hasFooter) {\n <ng-content select=\"ngs-card-footer\"/>\n}\n", styles: [":host{--ngs-card-bg: var(--ngs-color-surface-container);--ngs-card-color: var(--ngs-color-on-surface);--ngs-card-radius: var(--ngs-radius-xl);--ngs-card-border-color: var(--ngs-color-
|
|
39
|
+
}, template: "<ng-content/>\n@if (hasFooter) {\n <ng-content select=\"ngs-card-footer\"/>\n}\n", styles: [":host{--ngs-card-bg: var(--ngs-color-surface-container);--ngs-card-color: var(--ngs-color-on-surface);--ngs-card-radius: var(--ngs-radius-xl);--ngs-card-border-color: var(--ngs-color-border);--ngs-card-shadow: none;--ngs-card-padding: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-radius:var(--ngs-card-radius);background:var(--ngs-card-bg);color:var(--ngs-card-color);box-shadow:var(--ngs-card-shadow);border-width:0;border-style:solid;border-color:var(--ngs-card-border-color)}:host(.ngs-card-outlined){--ngs-card-shadow: none;--ngs-card-bg: transparent;border-width:1px}:host(.ngs-card-raised){--ngs-card-shadow: var(--ngs-shadow-sm);--ngs-card-bg: var(--ngs-color-surface-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
40
40
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], _footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardFooter), { isSignal: true }] }] } });
|
|
41
41
|
|
|
42
42
|
class CardHeader {
|