@ngstarter-ui/components 21.0.38 → 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",
@@ -8093,9 +8220,10 @@
       "docsPath": "/navigation/sidebar",
       "docsOverviewSource": "projects/docs/src/app/navigation/sidebar/overview/overview.html",
       "purpose": "Provide a complete vertical app or workspace sidebar with its own navigation system.",
-      "useWhen": "Use ngs-sidebar as the content inside a shell sidebar region, usually inside Sidenav or LayoutSidebar, when an admin app or workspace needs persistent sidebar navigation and supporting sidebar content. Compose it with ngs-sidebar-header, ngs-sidebar-body, ngs-sidebar-footer, ngs-sidebar-nav, ngs-sidebar-nav-item, ngs-sidebar-nav-group, ngs-sidebar-nav-group-toggle, ngs-sidebar-nav-group-menu, ngs-sidebar-nav-heading, ngs-sidebar-divider, ngsSidebarNavItemIcon, ngsSidebarNavItemBadge, and ngsSidebarNavGroupToggleIcon. Good for brand or workspace header, main app navigation, grouped routes, badges, active item state through activeKey, autoScrollToActiveItem, and data-driven nav templates. Sidebar owns navigation; when ngs-sidebar is not used and persistent navigation is needed, use Navigation. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay shell behavior, RailNav for compact icon navigation, SidePanel for secondary tabbed tools, Drawer for temporary overlay side content, and Panel or Card for content grouping.",
+      "useWhen": "Use ngs-sidebar as the content inside a shell sidebar region, usually inside Sidenav or LayoutSidebar, when an admin app or workspace needs persistent sidebar navigation and supporting sidebar content. Compose it with ngs-sidebar-header, ngs-sidebar-body, ngs-sidebar-footer, ngs-sidebar-nav, ngs-sidebar-nav-item, ngs-sidebar-nav-group, ngs-sidebar-nav-group-toggle, ngs-sidebar-nav-group-menu, ngs-sidebar-heading, ngs-sidebar-divider, ngsSidebarNavItemIcon, ngsSidebarNavItemBadge, and ngsSidebarNavGroupToggleIcon. Good for brand or workspace header, main app navigation, grouped routes, badges, active item state through activeKey, autoScrollToActiveItem, and data-driven nav templates. Sidebar owns navigation; when ngs-sidebar is not used and persistent navigation is needed, use Navigation. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay shell behavior, RailNav for compact icon navigation, SidePanel for secondary tabbed tools, Drawer for temporary overlay side content, and Panel or Card for content grouping.",
       "exampleTopics": [
         "Basic sidebar",
+        "Sidebar structure helpers",
         "Dynamic compact sidebar",
         "Only compact sidebar",
         "Sidebar with custom icons"
@@ -8134,12 +8262,13 @@
         "ngs-sidebar-divider",
         "ngs-sidebar-footer",
         "ngs-sidebar-header",
+        "ngs-sidebar-heading",
         "ngs-sidebar-nav",
         "ngs-sidebar-nav-group",
         "ngs-sidebar-nav-group-menu",
         "ngs-sidebar-nav-group-toggle",
-        "ngs-sidebar-nav-heading",
-        "ngs-sidebar-nav-item"
+        "ngs-sidebar-nav-item",
+        "ngs-sidebar-spacer"
       ],
       "exportedSymbols": [
         "Sidebar",
@@ -8149,19 +8278,20 @@
         "SidebarDivider",
         "SidebarFooter",
         "SidebarHeader",
+        "SidebarHeading",
         "SidebarNav",
         "SidebarNavGroup",
         "SidebarNavGroupMenu",
         "SidebarNavGroupToggle",
         "SidebarNavGroupToggleIconDirective",
-        "SidebarNavHeading",
         "SidebarNavItem",
         "SidebarNavItemBadgeDirective",
         "SidebarNavItemDefDirective",
         "SidebarNavItemIconDirective",
         "SidebarNavItemInterface",
         "SidebarNavState",
-        "SidebarNavStore"
+        "SidebarNavStore",
+        "SidebarSpacer"
       ],
       "inputs": [
         "activeKey",
@@ -8177,11 +8307,11 @@
         "itemClicked"
       ],
       "cssTokens": [
+        "--ngs-color-border",
         "--ngs-color-emphasis",
         "--ngs-color-on-primary",
         "--ngs-color-on-surface-variant",
         "--ngs-color-outline",
-        "--ngs-color-outline-variant",
         "--ngs-color-primary",
         "--ngs-color-subtle",
         "--ngs-font-size-xs",
@@ -8234,6 +8364,16 @@
         "--ngs-sidebar-divider-height",
         "--ngs-sidebar-divider-margin",
         "--ngs-sidebar-header-compact-padding",
+        "--ngs-sidebar-heading-after-margin",
+        "--ngs-sidebar-heading-color",
+        "--ngs-sidebar-heading-font-size",
+        "--ngs-sidebar-heading-font-weight",
+        "--ngs-sidebar-heading-height",
+        "--ngs-sidebar-heading-margin-bottom",
+        "--ngs-sidebar-heading-margin-top",
+        "--ngs-sidebar-heading-padding",
+        "--ngs-sidebar-heading-text-align",
+        "--ngs-sidebar-heading-text-transform",
         "--ngs-sidebar-nav-bg",
         "--ngs-sidebar-nav-divider-bg",
         "--ngs-sidebar-nav-divider-height",
@@ -8256,6 +8396,7 @@
         "--ngs-sidebar-nav-heading-color",
         "--ngs-sidebar-nav-heading-font-size",
         "--ngs-sidebar-nav-heading-font-weight",
+        "--ngs-sidebar-nav-heading-height",
         "--ngs-sidebar-nav-heading-margin-bottom",
         "--ngs-sidebar-nav-heading-margin-top",
         "--ngs-sidebar-nav-heading-padding",
@@ -10383,6 +10524,7 @@
         "[ngsTreeNodeOutlet]",
         "[ngsTreeNodePadding]",
         "[ngsTreeNodeToggle]",
+        "ng-template[ngsTreeDragPlaceholder]",
         "ngs-nested-tree-node",
         "ngs-tree",
         "ngs-tree-node"
@@ -10390,12 +10532,18 @@
       "exportedSymbols": [
         "NestedTreeNode",
         "Tree",
+        "TreeDragPlaceholder",
+        "TreeDragPreview",
         "TreeFilterMode",
         "TreeFilterPredicate",
         "TreeNode",
         "TreeNodeDef",
+        "TreeNodeDragPlaceholderContext",
+        "TreeNodeDragPredicate",
         "TreeNodeDrop",
+        "TreeNodeDropContext",
         "TreeNodeDropPosition",
+        "TreeNodeDropPredicate",
         "TreeNodeOutlet",
         "TreeNodePadding",
         "TreeNodeToggle"
@@ -10405,6 +10553,7 @@
         "childrenKey",
         "disabled",
         "draggable",
+        "dragPreview",
         "filterMode",
         "filterValue",
         "ngsNestedTreeNode",
@@ -10414,6 +10563,7 @@
         "ngsTreeNodePaddingIndent",
         "ngsTreeNodeToggleRecursive",
         "recursive",
+        "reorderOnDrop",
         "selectable",
         "tabIndex",
         "value",
@@ -10429,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",
@@ -10439,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",
@@ -10446,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",