@ngstarter-ui/components 21.0.47 → 21.0.49

package/ai/component-registry.json

@@ -3080,6 +3080,7 @@
         "Data view pinning pagination",
         "Data view refresh",
         "Data view resizable columns",
+        "Data view row click selection",
         "Data view server side empty state",
         "Data view server side",
         "Data view sticky columns",
@@ -3142,10 +3143,12 @@
         "DataViewPinAlign",
         "DataViewRowModelType",
         "DataViewRowSelectionEvent",
+        "DataViewRowSelectionEventSource",
         "DataViewState",
         "provideDataView"
       ],
       "inputs": [
+        "allowSingleRowSelectionByClick",
         "autoHeight",
         "bodyScroll",
         "bufferRows",
@@ -4185,13 +4188,13 @@
           "name": "file-type-gallery-example",
           "title": "File type gallery",
           "file": "projects/docs/src/app/components/file-type/_examples/file-type-gallery-example/file-type-gallery-example.html",
-          "source": "<div class=\"grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5\">\n  @for (type of types(); track type) {\n    <div class=\"flex flex-col items-center gap-2 rounded-lg border border-subtle p-4\">\n      <ngs-file-type [extension]=\"type\" class=\"size-16\"/>\n      <div class=\"text-xs uppercase text-secondary\">{{ type }}</div>\n    </div>\n  }\n</div>"
+          "source": "<div class=\"grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5\">\n  @for (type of types(); track type) {\n    <div class=\"flex flex-col items-center gap-2 rounded-lg border border-border p-4\">\n      <ngs-file-type [extension]=\"type\" class=\"size-16\"/>\n      <div class=\"text-xs uppercase text-secondary\">{{ type }}</div>\n    </div>\n  }\n</div>"
         },
         {
           "name": "file-type-mime-example",
           "title": "File type mime",
           "file": "projects/docs/src/app/components/file-type/_examples/file-type-mime-example/file-type-mime-example.html",
-          "source": "<div class=\"grid gap-4 sm:grid-cols-2\">\n  @for (file of files(); track file.name) {\n    <div class=\"flex items-center gap-4 rounded-lg border border-subtle p-4\">\n      <ngs-file-type [mimeType]=\"file.mimeType\" [fallback]=\"file.fallback\" class=\"size-12\"/>\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-sm\">{{ file.name }}</div>\n        <div class=\"truncate text-xs text-secondary\">{{ file.mimeType }}</div>\n      </div>\n    </div>\n  }\n</div>"
+          "source": "<div class=\"grid gap-4 sm:grid-cols-2\">\n  @for (file of files(); track file.name) {\n    <div class=\"flex items-center gap-4 rounded-lg border border-border p-4\">\n      <ngs-file-type [mimeType]=\"file.mimeType\" [fallback]=\"file.fallback\" class=\"size-12\"/>\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-sm\">{{ file.name }}</div>\n        <div class=\"truncate text-xs text-secondary\">{{ file.mimeType }}</div>\n      </div>\n    </div>\n  }\n</div>"
         }
       ],
       "previewAsset": "projects/components/file-type/preview.svg",
@@ -4368,12 +4371,12 @@
         "FormBuilderSchema shape: { title?: string; fields?: FormBuilderField[]; layout?: FormBuilderLayoutItem[]; sections: FormBuilderSection[] }.",
         "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 }.",
         "FormBuilderSection shape: { id: string; title: string; description?: string; collapsed?: boolean; fields: FormBuilderField[] }.",
-        "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[]; visibility?: { form?: boolean; email?: boolean; pdf?: boolean; condition?: string }; settings?: Record<string, any>; children?: FormBuilderField[] }.",
+        "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[] }.",
         "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.",
         "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.",
         "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.",
-        "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.",
-        "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.",
+        "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.",
+        "Use <ngs-form-renderer> from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormRenderer.",
         "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."
       ],
       "exampleTopics": [
@@ -4444,7 +4447,6 @@
         "FormBuilderItemKind",
         "FormBuilderLayoutItem",
         "FormBuilderOption",
-        "FormBuilderRenderer",
         "FormBuilderSchema",
         "FormBuilderSection",
         "FormBuilderSectionSettingsContext",
@@ -4458,13 +4460,14 @@
         "FormBuilderUploadCallback",
         "FormBuilderUploadContext",
         "FormBuilderValidationRule",
-        "FormBuilderVisibility",
+        "FormRenderer",
         "provideFormBuilder",
         "provideFormBuilderField",
         "provideFormBuilderFields",
         "validatorsFromRules"
       ],
       "inputs": [
+        "canvasDropPlaceholderDelay",
         "control",
         "definitions",
         "editableCanvas",
@@ -4487,6 +4490,7 @@
       ],
       "cssTokens": [
         "--ngs-card-padding",
+        "--ngs-color-border",
         "--ngs-color-danger",
         "--ngs-color-on-primary-container",
         "--ngs-color-on-surface",
@@ -4495,7 +4499,6 @@
         "--ngs-color-primary",
         "--ngs-color-primary-container",
         "--ngs-color-surface",
-        "--ngs-color-surface-container-low",
         "--ngs-color-surface-container-lowest",
         "--ngs-field-radius",
         "--ngs-font-size-base",
@@ -4503,6 +4506,7 @@
         "--ngs-font-size-sm",
         "--ngs-font-size-xs",
         "--ngs-line-height-base",
+        "--ngs-radius-current",
         "--ngs-radius-lg",
         "--ngs-radius-md",
         "--ngs-radius-sm",
@@ -5721,13 +5725,13 @@
         "Layout with nested layouts example",
         "Layout with nested layouts"
       ],
-      "minimalExample": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-l border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>",
+      "minimalExample": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-s border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>",
       "exampleFiles": [
         {
           "name": "layout-aside-example",
           "title": "Layout aside",
           "file": "projects/docs/src/app/components/layout/_examples/layout-aside-example/layout-aside-example.html",
-          "source": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-l border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>"
+          "source": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-s border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>"
         },
         {
           "name": "layout-footer-example",
@@ -9427,7 +9431,7 @@
           "name": "tab-panel-with-panels-inside-example",
           "title": "Tab panel with panels inside",
           "file": "projects/docs/src/app/navigation/tab-panel/_examples/tab-panel-with-panels-inside-example/tab-panel-with-panels-inside-example.html",
-          "source": "<div class=\"flex gap-10\">\n  <ngs-tab-panel activeItemId=\"home\" class=\"h-[500px]\">\n    <ngs-tab-panel-content>\n      <ngs-tab-panel-nav>\n        <ngs-tab-panel-item for=\"home\">\n          <ngs-icon name=\"fluent:home-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Home</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n        <ngs-tab-panel-item for=\"code\">\n          <ngs-icon name=\"fluent:code-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Code</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n      </ngs-tab-panel-nav>\n    </ngs-tab-panel-content>\n    <ngs-tab-panel-aside class=\"bg-surface-container-low rounded-xl\">\n      <ng-template ngsTabPanelAsideContent=\"home\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-subtle flex items-center px-4\">Home Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Home Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-subtle flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-template>\n      <ng-template ngsTabPanelAsideContent=\"code\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-subtle flex items-center px-4\">Code Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Code Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-subtle flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-\n..."
+          "source": "<div class=\"flex gap-10\">\n  <ngs-tab-panel activeItemId=\"home\" class=\"h-[500px]\">\n    <ngs-tab-panel-content>\n      <ngs-tab-panel-nav>\n        <ngs-tab-panel-item for=\"home\">\n          <ngs-icon name=\"fluent:home-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Home</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n        <ngs-tab-panel-item for=\"code\">\n          <ngs-icon name=\"fluent:code-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Code</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n      </ngs-tab-panel-nav>\n    </ngs-tab-panel-content>\n    <ngs-tab-panel-aside class=\"bg-surface-container-low rounded-xl\">\n      <ng-template ngsTabPanelAsideContent=\"home\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Home Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Home Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-border flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-template>\n      <ng-template ngsTabPanelAsideContent=\"code\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Code Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Code Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-border flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-\n..."
         }
       ],
       "previewAsset": "projects/components/tab-panel/preview.svg",
@@ -9732,12 +9736,12 @@
         "--ngs-color-border",
         "--ngs-color-on-surface-variant",
         "--ngs-color-primary",
-        "--ngs-color-subtle",
         "--ngs-color-surface-container-high",
         "--ngs-tab-content-padding",
         "--ngs-tab-group-animation-duration",
         "--ngs-tab-group-header-border-bottom",
         "--ngs-tab-group-header-border-top",
+        "--ngs-tab-group-header-height",
         "--ngs-tab-group-pagination-control-after-border-left",
         "--ngs-tab-group-pagination-control-before-border-right",
         "--ngs-tab-label-active-border-bottom",
@@ -10301,25 +10305,25 @@
         "Toolbar overflow",
         "Toolbar nav"
       ],
-      "minimalExample": "<ngs-toolbar>\n  <ngs-toolbar-title>My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>",
+      "minimalExample": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>",
       "exampleFiles": [
         {
           "name": "basic-toolbar-example",
           "title": "Basic toolbar",
           "file": "projects/docs/src/app/components/toolbar/_examples/basic-toolbar-example/basic-toolbar-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-title>My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>"
         },
         {
           "name": "multi-row-toolbar-example",
           "title": "Multi row toolbar",
           "file": "projects/docs/src/app/components/toolbar/_examples/multi-row-toolbar-example/multi-row-toolbar-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-row>\n    <ngs-toolbar-title>Multi-row Toolbar</ngs-toolbar-title>\n    <ngs-toolbar-spacer></ngs-toolbar-spacer>\n    <ngs-toolbar-item>Menu</ngs-toolbar-item>\n  </ngs-toolbar-row>\n  <ngs-toolbar-row>\n    <ngs-toolbar-item>Second row content</ngs-toolbar-item>\n  </ngs-toolbar-row>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-row>\n    <ngs-toolbar-title appearance=\"large\">Multi-row Toolbar</ngs-toolbar-title>\n    <ngs-toolbar-spacer></ngs-toolbar-spacer>\n    <ngs-toolbar-item>Menu</ngs-toolbar-item>\n  </ngs-toolbar-row>\n  <ngs-toolbar-row>\n    <ngs-toolbar-item>Second row content</ngs-toolbar-item>\n  </ngs-toolbar-row>\n</ngs-toolbar>"
         },
         {
           "name": "toolbar-nav-example",
           "title": "Toolbar nav",
           "file": "projects/docs/src/app/components/toolbar/_examples/toolbar-nav-example/toolbar-nav-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-title>Nav Example</ngs-toolbar-title>\n  <ngs-toolbar-nav>\n    <ngs-toolbar-nav-link [active]=\"true\">Home</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>About</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>Contact</ngs-toolbar-nav-link>\n  </ngs-toolbar-nav>\n  <ngs-toolbar-spacer />\n  <ngs-toolbar-nav>\n    <a ngs-toolbar-nav-link [routerLink]=\"['/dashboard']\">Dashboard</a>\n  </ngs-toolbar-nav>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">Nav Example</ngs-toolbar-title>\n  <ngs-toolbar-nav>\n    <ngs-toolbar-nav-link [active]=\"true\">Home</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>About</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>Contact</ngs-toolbar-nav-link>\n  </ngs-toolbar-nav>\n  <ngs-toolbar-spacer />\n  <ngs-toolbar-nav>\n    <a ngs-toolbar-nav-link [routerLink]=\"['/dashboard']\">Dashboard</a>\n  </ngs-toolbar-nav>\n</ngs-toolbar>"
         }
       ],
       "previewAsset": "projects/components/toolbar/preview.svg",
@@ -10343,10 +10347,12 @@
         "ToolbarRow",
         "ToolbarSpacer",
         "ToolbarSubtitle",
-        "ToolbarTitle"
+        "ToolbarTitle",
+        "ToolbarTitleAppearance"
       ],
       "inputs": [
         "active",
+        "appearance",
         "hidden"
       ],
       "outputs": [],
@@ -10361,6 +10367,7 @@
         "--ngs-nav-item-hover-color",
         "--ngs-nav-item-padding",
         "--ngs-nav-item-radius",
+        "--ngs-toolbar-gap",
         "--ngs-toolbar-nav-link-active-color",
         "--ngs-toolbar-nav-link-color",
         "--ngs-toolbar-nav-link-font-size",
@@ -10370,7 +10377,9 @@
         "--ngs-toolbar-nav-link-radius",
         "--ngs-toolbar-subtitle-color",
         "--ngs-toolbar-subtitle-font-size",
-        "--ngs-toolbar-subtitle-weight"
+        "--ngs-toolbar-subtitle-weight",
+        "--ngs-toolbar-title-font-size",
+        "--ngs-toolbar-title-font-weight"
       ],
       "example": null
     },