@ngstarter-ui/components 21.0.39 → 21.0.40

package/ai/component-registry.json

@@ -3,7 +3,7 @@
   "generatedBy": "scripts/generate-ai-metadata.mjs",
   "package": "@ngstarter-ui/components",
   "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
-  "componentCount": 126,
+  "componentCount": 127,
   "conventions": {
     "importPattern": "@ngstarter-ui/components/<component>",
     "selectorPrefix": "ngs",
@@ -4333,6 +4333,133 @@
       ],
       "example": null
     },
+    {
+      "name": "form-builder",
+      "title": "Form Builder",
+      "overviewName": "Form Builder",
+      "category": "libraries",
+      "package": "@ngstarter-ui/components",
+      "importPath": "@ngstarter-ui/components/form-builder",
+      "publicApi": "projects/components/form-builder/public-api.ts",
+      "sourceRoot": "projects/components/form-builder/src",
+      "docsPath": "/libraries/form-builder",
+      "docsOverviewSource": "projects/docs/src/app/libraries/form-builder/overview/overview.html",
+      "purpose": "The NgStarter Angular Form Builder library provides a drag-and-drop form designer, schema model, runtime renderer, and provider registration API for custom field types and field-specific settings.",
+      "useWhen": "Choose Form Builder when the workflow matches examples such as Basic form builder, Custom field registration, Form builder renderer.",
+      "exampleTopics": [
+        "Basic form builder",
+        "Custom field registration",
+        "Form builder renderer"
+      ],
+      "minimalExample": "<div class=\"flex flex-col gap-6\">\n  <ngs-form-builder [(schema)]=\"schema\"/>\n  <ngs-card>\n    <ngs-card-header>\n      <ngs-card-title>Current schema</ngs-card-title>\n    </ngs-card-header>\n    <ngs-card-content>\n      <ngs-code-highlighter\n        [code]=\"schemaCode()\"\n        language=\"json\"\n        appearance=\"none\"\n        disableOverflow/>\n    </ngs-card-content>\n  </ngs-card>\n</div>",
+      "exampleFiles": [
+        {
+          "name": "basic-form-builder-example",
+          "title": "Basic form builder",
+          "file": "projects/docs/src/app/libraries/form-builder/_examples/basic-form-builder-example/basic-form-builder-example.html",
+          "source": "<div class=\"flex flex-col gap-6\">\n  <ngs-form-builder [(schema)]=\"schema\"/>\n  <ngs-card>\n    <ngs-card-header>\n      <ngs-card-title>Current schema</ngs-card-title>\n    </ngs-card-header>\n    <ngs-card-content>\n      <ngs-code-highlighter\n        [code]=\"schemaCode()\"\n        language=\"json\"\n        appearance=\"none\"\n        disableOverflow/>\n    </ngs-card-content>\n  </ngs-card>\n</div>"
+        },
+        {
+          "name": "custom-field-registration-example",
+          "title": "Custom field registration",
+          "file": "projects/docs/src/app/libraries/form-builder/_examples/custom-field-registration-example/custom-field-registration-example.html",
+          "source": "<ngs-form-builder [(schema)]=\"schema\"/>"
+        },
+        {
+          "name": "form-builder-renderer-example",
+          "title": "Form builder renderer",
+          "file": "projects/docs/src/app/libraries/form-builder/_examples/form-builder-renderer-example/form-builder-renderer-example.html",
+          "source": "<div class=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]\">\n  <ngs-form-builder-renderer\n    [schema]=\"schema\"\n    [(value)]=\"value\"\n    submitLabel=\"Save profile\"\n    (formSubmit)=\"submittedValue.set($event)\"/>\n  <ngs-card>\n    <ngs-card-header>\n      <ngs-card-title>Submitted value</ngs-card-title>\n    </ngs-card-header>\n    <ngs-card-content>\n      <pre>{{ submittedValue() || value() | json }}</pre>\n    </ngs-card-content>\n  </ngs-card>\n</div>"
+        }
+      ],
+      "previewAsset": null,
+      "selectors": [
+        "ngs-basic-form-builder-field-settings",
+        "ngs-form-builder",
+        "ngs-form-builder-field-host",
+        "ngs-form-builder-renderer",
+        "ngs-form-builder-settings-host"
+      ],
+      "exportedSymbols": [
+        "BasicFormBuilderFieldSettings",
+        "createDefaultFormBuilderSchema",
+        "DEFAULT_FORM_BUILDER_FIELDS",
+        "FORM_BUILDER_FIELDS",
+        "FORM_BUILDER_SETTINGS",
+        "FormBuilder",
+        "FormBuilderComponentImporter",
+        "formBuilderField",
+        "FormBuilderField",
+        "FormBuilderFieldChange",
+        "FormBuilderFieldDefinition",
+        "FormBuilderFieldHost",
+        "FormBuilderFieldRenderContext",
+        "FormBuilderFieldWidth",
+        "FormBuilderLayoutItem",
+        "FormBuilderOption",
+        "FormBuilderRenderer",
+        "FormBuilderSchema",
+        "FormBuilderSection",
+        "formBuilderSettings",
+        "FormBuilderSettingsContext",
+        "FormBuilderSettingsDefinition",
+        "FormBuilderSettingsHost",
+        "FormBuilderValidationRule",
+        "FormBuilderVisibility",
+        "provideFormBuilder",
+        "validatorsFromRules"
+      ],
+      "inputs": [
+        "control",
+        "definitions",
+        "editableCanvas",
+        "field",
+        "inspectorTitle",
+        "paletteTitle",
+        "readonly",
+        "schema",
+        "settingsDefinitions",
+        "showSubmit",
+        "submitLabel"
+      ],
+      "outputs": [
+        "fieldAdded",
+        "fieldRemoved",
+        "fieldSelected",
+        "formReady"
+      ],
+      "cssTokens": [
+        "--ngs-button-height",
+        "--ngs-card-padding",
+        "--ngs-color-danger",
+        "--ngs-color-on-primary-container",
+        "--ngs-color-on-surface",
+        "--ngs-color-on-surface-variant",
+        "--ngs-color-outline-variant",
+        "--ngs-color-primary",
+        "--ngs-color-primary-container",
+        "--ngs-color-surface",
+        "--ngs-color-surface-container-low",
+        "--ngs-color-surface-container-lowest",
+        "--ngs-font-size-base",
+        "--ngs-font-size-lg",
+        "--ngs-font-size-sm",
+        "--ngs-font-size-xs",
+        "--ngs-line-height-base",
+        "--ngs-radius-full",
+        "--ngs-radius-lg",
+        "--ngs-radius-md",
+        "--ngs-radius-sm",
+        "--ngs-shadow-lg",
+        "--ngs-state-focus-ring",
+        "--ngs-tab-label-height",
+        "--ngs-tree-node-drop-line-color",
+        "--ngs-tree-node-drop-target-bg",
+        "--ngs-tree-node-drop-target-outline",
+        "--ngs-tree-node-gap"
+      ],
+      "example": null
+    },
     {
       "name": "form-field",
       "title": "Form Field",
@@ -10397,6 +10524,7 @@
         "[ngsTreeNodeOutlet]",
         "[ngsTreeNodePadding]",
         "[ngsTreeNodeToggle]",
+        "ng-template[ngsTreeDragPlaceholder]",
         "ngs-nested-tree-node",
         "ngs-tree",
         "ngs-tree-node"
@@ -10404,12 +10532,18 @@
       "exportedSymbols": [
         "NestedTreeNode",
         "Tree",
+        "TreeDragPlaceholder",
+        "TreeDragPreview",
         "TreeFilterMode",
         "TreeFilterPredicate",
         "TreeNode",
         "TreeNodeDef",
+        "TreeNodeDragPlaceholderContext",
+        "TreeNodeDragPredicate",
         "TreeNodeDrop",
+        "TreeNodeDropContext",
         "TreeNodeDropPosition",
+        "TreeNodeDropPredicate",
         "TreeNodeOutlet",
         "TreeNodePadding",
         "TreeNodeToggle"
@@ -10419,6 +10553,7 @@
         "childrenKey",
         "disabled",
         "draggable",
+        "dragPreview",
         "filterMode",
         "filterValue",
         "ngsNestedTreeNode",
@@ -10428,6 +10563,7 @@
         "ngsTreeNodePaddingIndent",
         "ngsTreeNodeToggleRecursive",
         "recursive",
+        "reorderOnDrop",
         "selectable",
         "tabIndex",
         "value",
@@ -10443,6 +10579,7 @@
         "--ngs-checkbox-gap",
         "--ngs-color-neutral",
         "--ngs-color-primary",
+        "--ngs-color-surface",
         "--ngs-nav-item-active-bg",
         "--ngs-nav-item-active-color",
         "--ngs-nav-item-color",
@@ -10453,6 +10590,7 @@
         "--ngs-nav-item-hover-color",
         "--ngs-nav-item-padding",
         "--ngs-nav-item-radius",
+        "--ngs-shadow-md",
         "--ngs-tree-container-background-color",
         "--ngs-tree-gap",
         "--ngs-tree-node-active-bg",
@@ -10460,6 +10598,10 @@
         "--ngs-tree-node-checkbox-gap",
         "--ngs-tree-node-color",
         "--ngs-tree-node-disabled-opacity",
+        "--ngs-tree-node-drag-image-bg",
+        "--ngs-tree-node-drag-image-opacity",
+        "--ngs-tree-node-drag-image-shadow",
+        "--ngs-tree-node-dragging-source-opacity",
         "--ngs-tree-node-drop-line-color",
         "--ngs-tree-node-drop-line-radius",
         "--ngs-tree-node-drop-line-size",