Browse Source

docs(docs): Regenerate API documentation

Regenerate TypeScript API, Admin UI API, Dashboard, and core plugins
documentation with fixed angle bracket encoding.
David Höck 7 hours ago
parent
commit
bd1ed546c5
100 changed files with 6653 additions and 0 deletions
  1. 81 0
      docs/docs/reference/admin-ui-api/action-bar/action-bar-context.mdx
  2. 92 0
      docs/docs/reference/admin-ui-api/action-bar/action-bar-dropdown-menu-item.mdx
  3. 105 0
      docs/docs/reference/admin-ui-api/action-bar/action-bar-item.mdx
  4. 16 0
      docs/docs/reference/admin-ui-api/action-bar/action-bar-location-id.mdx
  5. 37 0
      docs/docs/reference/admin-ui-api/action-bar/add-action-bar-dropdown-menu-item.mdx
  6. 35 0
      docs/docs/reference/admin-ui-api/action-bar/add-action-bar-item.mdx
  7. 4 0
      docs/docs/reference/admin-ui-api/action-bar/index.mdx
  8. 60 0
      docs/docs/reference/admin-ui-api/action-bar/page-location-id.mdx
  9. 15 0
      docs/docs/reference/admin-ui-api/action-bar/router-link-definition.mdx
  10. 87 0
      docs/docs/reference/admin-ui-api/alerts/alert-config.mdx
  11. 51 0
      docs/docs/reference/admin-ui-api/alerts/alert-context.mdx
  12. 4 0
      docs/docs/reference/admin-ui-api/alerts/index.mdx
  13. 22 0
      docs/docs/reference/admin-ui-api/alerts/register-alert.mdx
  14. 228 0
      docs/docs/reference/admin-ui-api/bulk-actions/bulk-action.mdx
  15. 4 0
      docs/docs/reference/admin-ui-api/bulk-actions/index.mdx
  16. 62 0
      docs/docs/reference/admin-ui-api/bulk-actions/register-bulk-action.mdx
  17. 159 0
      docs/docs/reference/admin-ui-api/components/asset-picker-dialog-component.mdx
  18. 62 0
      docs/docs/reference/admin-ui-api/components/chip-component.mdx
  19. 173 0
      docs/docs/reference/admin-ui-api/components/currency-input-component.mdx
  20. 237 0
      docs/docs/reference/admin-ui-api/components/data-table-component.mdx
  21. 353 0
      docs/docs/reference/admin-ui-api/components/data-table2component.mdx
  22. 261 0
      docs/docs/reference/admin-ui-api/components/datetime-picker-component.mdx
  23. 85 0
      docs/docs/reference/admin-ui-api/components/dropdown-component.mdx
  24. 154 0
      docs/docs/reference/admin-ui-api/components/facet-value-selector-component.mdx
  25. 4 0
      docs/docs/reference/admin-ui-api/components/index.mdx
  26. 85 0
      docs/docs/reference/admin-ui-api/components/object-tree-component.mdx
  27. 40 0
      docs/docs/reference/admin-ui-api/components/order-state-label-component.mdx
  28. 74 0
      docs/docs/reference/admin-ui-api/components/product-variant-selector-component.mdx
  29. 107 0
      docs/docs/reference/admin-ui-api/components/rich-text-editor-component.mdx
  30. 123 0
      docs/docs/reference/admin-ui-api/components/zone-selector-component.mdx
  31. 40 0
      docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component-config.mdx
  32. 35 0
      docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component-location-id.mdx
  33. 35 0
      docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component.mdx
  34. 4 0
      docs/docs/reference/admin-ui-api/custom-detail-components/index.mdx
  35. 68 0
      docs/docs/reference/admin-ui-api/custom-detail-components/register-custom-detail-component.mdx
  36. 31 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/customer-history-entry-component.mdx
  37. 56 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/history-entry-component.mdx
  38. 34 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/history-entry-config.mdx
  39. 4 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/index.mdx
  40. 31 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/order-history-entry-component.mdx
  41. 78 0
      docs/docs/reference/admin-ui-api/custom-history-entry-components/register-history-entry-component.mdx
  42. 1033 0
      docs/docs/reference/admin-ui-api/custom-input-components/default-inputs.mdx
  43. 55 0
      docs/docs/reference/admin-ui-api/custom-input-components/form-input-component.mdx
  44. 4 0
      docs/docs/reference/admin-ui-api/custom-input-components/index.mdx
  45. 70 0
      docs/docs/reference/admin-ui-api/custom-input-components/register-form-input-component.mdx
  46. 31 0
      docs/docs/reference/admin-ui-api/custom-table-components/custom-column-component.mdx
  47. 47 0
      docs/docs/reference/admin-ui-api/custom-table-components/data-table-component-config.mdx
  48. 4 0
      docs/docs/reference/admin-ui-api/custom-table-components/index.mdx
  49. 54 0
      docs/docs/reference/admin-ui-api/custom-table-components/register-data-table-component.mdx
  50. 59 0
      docs/docs/reference/admin-ui-api/dashboard-widgets/dashboard-widget-config.mdx
  51. 4 0
      docs/docs/reference/admin-ui-api/dashboard-widgets/index.mdx
  52. 26 0
      docs/docs/reference/admin-ui-api/dashboard-widgets/register-dashboard-widget.mdx
  53. 21 0
      docs/docs/reference/admin-ui-api/dashboard-widgets/set-dashboard-widget-layout.mdx
  54. 15 0
      docs/docs/reference/admin-ui-api/dashboard-widgets/widget-layout-definition.mdx
  55. 40 0
      docs/docs/reference/admin-ui-api/directives/if-multichannel-directive.mdx
  56. 42 0
      docs/docs/reference/admin-ui-api/directives/if-permissions-directive.mdx
  57. 4 0
      docs/docs/reference/admin-ui-api/directives/index.mdx
  58. 167 0
      docs/docs/reference/admin-ui-api/list-detail-views/base-detail-component.mdx
  59. 53 0
      docs/docs/reference/admin-ui-api/list-detail-views/base-entity-resolver.mdx
  60. 154 0
      docs/docs/reference/admin-ui-api/list-detail-views/base-list-component.mdx
  61. 51 0
      docs/docs/reference/admin-ui-api/list-detail-views/detail-component-with-resolver.mdx
  62. 4 0
      docs/docs/reference/admin-ui-api/list-detail-views/index.mdx
  63. 50 0
      docs/docs/reference/admin-ui-api/list-detail-views/typed-base-detail-component.mdx
  64. 124 0
      docs/docs/reference/admin-ui-api/list-detail-views/typed-base-list-component.mdx
  65. 51 0
      docs/docs/reference/admin-ui-api/nav-menu/add-nav-menu-item.mdx
  66. 46 0
      docs/docs/reference/admin-ui-api/nav-menu/add-nav-menu-section.mdx
  67. 4 0
      docs/docs/reference/admin-ui-api/nav-menu/index.mdx
  68. 65 0
      docs/docs/reference/admin-ui-api/nav-menu/nav-menu-item.mdx
  69. 82 0
      docs/docs/reference/admin-ui-api/nav-menu/nav-menu-section.mdx
  70. 37 0
      docs/docs/reference/admin-ui-api/nav-menu/navigation-types.mdx
  71. 40 0
      docs/docs/reference/admin-ui-api/pipes/asset-preview-pipe.mdx
  72. 44 0
      docs/docs/reference/admin-ui-api/pipes/duration-pipe.mdx
  73. 37 0
      docs/docs/reference/admin-ui-api/pipes/file-size-pipe.mdx
  74. 50 0
      docs/docs/reference/admin-ui-api/pipes/has-permission-pipe.mdx
  75. 4 0
      docs/docs/reference/admin-ui-api/pipes/index.mdx
  76. 46 0
      docs/docs/reference/admin-ui-api/pipes/locale-currency-name-pipe.mdx
  77. 53 0
      docs/docs/reference/admin-ui-api/pipes/locale-currency-pipe.mdx
  78. 47 0
      docs/docs/reference/admin-ui-api/pipes/locale-date-pipe.mdx
  79. 46 0
      docs/docs/reference/admin-ui-api/pipes/locale-language-name-pipe.mdx
  80. 46 0
      docs/docs/reference/admin-ui-api/pipes/locale-region-name-pipe.mdx
  81. 43 0
      docs/docs/reference/admin-ui-api/pipes/time-ago-pipe.mdx
  82. 35 0
      docs/docs/reference/admin-ui-api/react-components/action-bar.mdx
  83. 35 0
      docs/docs/reference/admin-ui-api/react-components/card.mdx
  84. 33 0
      docs/docs/reference/admin-ui-api/react-components/cds-icon.mdx
  85. 41 0
      docs/docs/reference/admin-ui-api/react-components/form-field.mdx
  86. 4 0
      docs/docs/reference/admin-ui-api/react-components/index.mdx
  87. 33 0
      docs/docs/reference/admin-ui-api/react-components/link.mdx
  88. 35 0
      docs/docs/reference/admin-ui-api/react-components/page-block.mdx
  89. 35 0
      docs/docs/reference/admin-ui-api/react-components/page-detail-layout.mdx
  90. 41 0
      docs/docs/reference/admin-ui-api/react-components/rich-text-editor.mdx
  91. 4 0
      docs/docs/reference/admin-ui-api/react-extensions/index.mdx
  92. 40 0
      docs/docs/reference/admin-ui-api/react-extensions/react-custom-detail-component-config.mdx
  93. 47 0
      docs/docs/reference/admin-ui-api/react-extensions/react-data-table-component-config.mdx
  94. 22 0
      docs/docs/reference/admin-ui-api/react-extensions/register-react-custom-detail-component.mdx
  95. 54 0
      docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.mdx
  96. 25 0
      docs/docs/reference/admin-ui-api/react-extensions/register-react-form-input-component.mdx
  97. 17 0
      docs/docs/reference/admin-ui-api/react-extensions/register-react-route-component-options.mdx
  98. 21 0
      docs/docs/reference/admin-ui-api/react-extensions/register-react-route-component.mdx
  99. 4 0
      docs/docs/reference/admin-ui-api/react-hooks/index.mdx
  100. 38 0
      docs/docs/reference/admin-ui-api/react-hooks/use-detail-component-data.mdx

+ 81 - 0
docs/docs/reference/admin-ui-api/action-bar/action-bar-context.mdx

@@ -0,0 +1,81 @@
+---
+title: "ActionBarContext"
+generated: true
+---
+
+
+## ActionBarContext
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="90" packageName="@vendure/admin-ui" />
+
+Providers & data available to the `onClick` & `buttonState` functions of an <a href='/reference/admin-ui-api/action-bar/action-bar-item#actionbaritem'>ActionBarItem</a>,
+<a href='/reference/admin-ui-api/action-bar/action-bar-dropdown-menu-item#actionbardropdownmenuitem'>ActionBarDropdownMenuItem</a> or <a href='/reference/admin-ui-api/nav-menu/nav-menu-item#navmenuitem'>NavMenuItem</a>.
+
+```ts title="Signature"
+interface ActionBarContext {
+    route: ActivatedRoute;
+    injector: Injector;
+    dataService: DataService;
+    notificationService: NotificationService;
+    entity$: Observable<Record<string, any> | undefined>;
+}
+```
+
+<div className="members-wrapper">
+
+### route
+
+<MemberInfo kind="property" type={`ActivatedRoute`}   />
+
+The router's [ActivatedRoute](https://angular.dev/guide/routing/router-reference#activated-route) object for
+the current route. This object contains information about the route, its parameters, and additional data
+associated with the route.
+### injector
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/common/injector#injector'>Injector</a>`}   />
+
+The Angular [Injector](https://angular.dev/api/core/Injector) which can be used to get instances
+of services and other providers available in the application.
+### dataService
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>`}   />
+
+The [DataService](/reference/admin-ui-api/services/data-service), which provides methods for querying the
+server-side data.
+### notificationService
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/services/notification-service#notificationservice'>NotificationService</a>`}   />
+
+The [NotificationService](/reference/admin-ui-api/services/notification-service), which provides methods for
+displaying notifications to the user.
+### entity$
+
+<MemberInfo kind="property" type={`Observable<Record<string, any> | undefined>`}  since="2.2.0"  />
+
+An observable of the current entity in a detail view. In a list view the observable will not emit any values.
+
+*Example*
+
+```ts
+addActionBarDropdownMenuItem({
+    id: 'print-invoice',
+    locationId: 'order-detail',
+    label: 'Print Invoice',
+    icon: 'printer',
+    buttonState: context => {
+        // highlight-start
+        return context.entity$.pipe(
+            map((order) => {
+                return order?.state === 'PaymentSettled'
+                    ? { disabled: false, visible: true }
+                    : { disabled: true, visible: true };
+            }),
+        );
+        // highlight-end
+    },
+    requiresPermission: ['UpdateOrder'],
+}),
+```
+
+
+</div>

+ 92 - 0
docs/docs/reference/admin-ui-api/action-bar/action-bar-dropdown-menu-item.mdx

@@ -0,0 +1,92 @@
+---
+title: "ActionBarDropdownMenuItem"
+generated: true
+---
+
+
+## ActionBarDropdownMenuItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="227" packageName="@vendure/admin-ui" since="2.2.0" />
+
+A dropdown menu item in the ActionBar area at the top of one of the list or detail views.
+
+```ts title="Signature"
+interface ActionBarDropdownMenuItem {
+    id: string;
+    label: string;
+    locationId: ActionBarLocationId;
+    hasDivider?: boolean;
+    buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState | undefined>;
+    onClick?: (event: MouseEvent, context: ActionBarContext) => void;
+    routerLink?: RouterLinkDefinition;
+    icon?: string;
+    requiresPermission?: string | string[];
+}
+```
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+A unique identifier for the item.
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+The label to display for the item. This can also be a translation token,
+e.g. `invoice-plugin.print-invoice`.
+### locationId
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/action-bar/action-bar-location-id#actionbarlocationid'>ActionBarLocationId</a>`}   />
+
+The location in the UI where this menu item should be displayed.
+### hasDivider
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+Whether to render a divider above this item.
+### buttonState
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => Observable<ActionBarButtonState | undefined>`}   />
+
+A function which returns an observable of the button state, allowing you to
+dynamically enable/disable or show/hide the button.
+### onClick
+
+<MemberInfo kind="property" type={`(event: MouseEvent, context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => void`}   />
+
+
+### routerLink
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/action-bar/router-link-definition#routerlinkdefinition'>RouterLinkDefinition</a>`}   />
+
+
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+An optional icon to display with the item. The icon
+should be a valid shape name from the [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/)
+set.
+### requiresPermission
+
+<MemberInfo kind="property" type={`string | string[]`}   />
+
+Control the display of this item based on the user permissions. Note: if you attempt to pass a
+<a href='/reference/typescript-api/auth/permission-definition#permissiondefinition'>PermissionDefinition</a> object, you will get a compilation error. Instead, pass the plain
+string version. For example, if the permission is defined as:
+
+```ts
+export const MyPermission = new PermissionDefinition('ProductReview');
+```
+then the generated permission strings will be:
+
+- `CreateProductReview`
+- `ReadProductReview`
+- `UpdateProductReview`
+- `DeleteProductReview`
+
+
+</div>

+ 105 - 0
docs/docs/reference/admin-ui-api/action-bar/action-bar-item.mdx

@@ -0,0 +1,105 @@
+---
+title: "ActionBarItem"
+generated: true
+---
+
+
+## ActionBarItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="158" packageName="@vendure/admin-ui" />
+
+A button in the ActionBar area at the top of one of the list or detail views.
+
+```ts title="Signature"
+interface ActionBarItem {
+    id: string;
+    label: string;
+    locationId: ActionBarLocationId;
+    disabled?: Observable<boolean>;
+    buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState>;
+    onClick?: (event: MouseEvent, context: ActionBarContext) => void;
+    routerLink?: RouterLinkDefinition;
+    buttonColor?: 'primary' | 'success' | 'warning';
+    buttonStyle?: 'solid' | 'outline' | 'link';
+    icon?: string;
+    requiresPermission?: string | string[];
+}
+```
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+A unique identifier for the item.
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+The label to display for the item. This can also be a translation token,
+e.g. `invoice-plugin.print-invoice`.
+### locationId
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/action-bar/action-bar-location-id#actionbarlocationid'>ActionBarLocationId</a>`}   />
+
+The location in the UI where this button should be displayed.
+### disabled
+
+<MemberInfo kind="property" type={`Observable<boolean>`}   />
+
+Deprecated since v2.1.0 - use `buttonState` instead.
+### buttonState
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => Observable<ActionBarButtonState>`}  since="2.1.0"  />
+
+A function which returns an observable of the button state, allowing you to
+dynamically enable/disable or show/hide the button.
+### onClick
+
+<MemberInfo kind="property" type={`(event: MouseEvent, context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => void`}   />
+
+
+### routerLink
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/action-bar/router-link-definition#routerlinkdefinition'>RouterLinkDefinition</a>`}   />
+
+
+### buttonColor
+
+<MemberInfo kind="property" type={`'primary' | 'success' | 'warning'`}   />
+
+
+### buttonStyle
+
+<MemberInfo kind="property" type={`'solid' | 'outline' | 'link'`}   />
+
+
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+An optional icon to display in the button. The icon
+should be a valid shape name from the [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/)
+set.
+### requiresPermission
+
+<MemberInfo kind="property" type={`string | string[]`}   />
+
+Control the display of this item based on the user permissions. Note: if you attempt to pass a
+<a href='/reference/typescript-api/auth/permission-definition#permissiondefinition'>PermissionDefinition</a> object, you will get a compilation error. Instead, pass the plain
+string version. For example, if the permission is defined as:
+
+```ts
+export const MyPermission = new PermissionDefinition('ProductReview');
+```
+
+then the generated permission strings will be:
+
+- `CreateProductReview`
+- `ReadProductReview`
+- `UpdateProductReview`
+- `DeleteProductReview`
+
+
+</div>

+ 16 - 0
docs/docs/reference/admin-ui-api/action-bar/action-bar-location-id.mdx

@@ -0,0 +1,16 @@
+---
+title: "ActionBarLocationId"
+generated: true
+---
+
+
+## ActionBarLocationId
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/component-registry-types.ts" sourceLine="107" packageName="@vendure/admin-ui" />
+
+The valid locationIds for registering action bar items. For a list of
+values, see <a href='/reference/admin-ui-api/action-bar/page-location-id#pagelocationid'>PageLocationId</a>.
+
+```ts title="Signature"
+type ActionBarLocationId = PageLocationId
+```

+ 37 - 0
docs/docs/reference/admin-ui-api/action-bar/add-action-bar-dropdown-menu-item.mdx

@@ -0,0 +1,37 @@
+---
+title: "AddActionBarDropdownMenuItem"
+generated: true
+---
+
+
+## addActionBarDropdownMenuItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/add-action-bar-dropdown-menu-item.ts" sourceLine="27" packageName="@vendure/admin-ui" since="2.2.0" />
+
+Adds a dropdown menu item to the ActionBar at the top right of each list or detail view. The locationId can
+be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
+
+*Example*
+
+```ts title="providers.ts"
+import { addActionBarDropdownMenuItem } from '@vendure/admin-ui/core';
+
+export default [
+    addActionBarDropdownMenuItem({
+        id: 'print-invoice',
+        label: 'Print Invoice',
+        locationId: 'order-detail',
+        routerLink: ['/extensions/invoicing'],
+    }),
+];
+```
+
+```ts title="Signature"
+function addActionBarDropdownMenuItem(config: ActionBarDropdownMenuItem): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/action-bar/action-bar-dropdown-menu-item#actionbardropdownmenuitem'>ActionBarDropdownMenuItem</a>`} />
+

+ 35 - 0
docs/docs/reference/admin-ui-api/action-bar/add-action-bar-item.mdx

@@ -0,0 +1,35 @@
+---
+title: "AddActionBarItem"
+generated: true
+---
+
+
+## addActionBarItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/add-action-bar-item.ts" sourceLine="23" packageName="@vendure/admin-ui" />
+
+Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
+be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
+
+*Example*
+
+```ts title="providers.ts"
+export default [
+    addActionBarItem({
+        id: 'print-invoice',
+        label: 'Print Invoice',
+        locationId: 'order-detail',
+        routerLink: ['/extensions/invoicing'],
+    }),
+];
+```
+
+```ts title="Signature"
+function addActionBarItem(config: ActionBarItem): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/action-bar/action-bar-item#actionbaritem'>ActionBarItem</a>`} />
+

+ 4 - 0
docs/docs/reference/admin-ui-api/action-bar/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Action Bar"
+generated: true
+---

+ 60 - 0
docs/docs/reference/admin-ui-api/action-bar/page-location-id.mdx

@@ -0,0 +1,60 @@
+---
+title: "PageLocationId"
+generated: true
+---
+
+
+## PageLocationId
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/component-registry-types.ts" sourceLine="52" packageName="@vendure/admin-ui" />
+
+The valid locationIds for registering action bar items or tabs.
+
+```ts title="Signature"
+type PageLocationId = | 'administrator-detail'
+    | 'administrator-list'
+    | 'asset-detail'
+    | 'asset-list'
+    | 'channel-detail'
+    | 'channel-list'
+    | 'collection-detail'
+    | 'collection-list'
+    | 'country-detail'
+    | 'country-list'
+    | 'customer-detail'
+    | 'customer-list'
+    | 'customer-group-list'
+    | 'customer-group-detail'
+    | 'draft-order-detail'
+    | 'facet-detail'
+    | 'facet-list'
+    | 'global-setting-detail'
+    | 'system-status'
+    | 'job-list'
+    | 'order-detail'
+    | 'order-list'
+    | 'modify-order'
+    | 'payment-method-detail'
+    | 'payment-method-list'
+    | 'product-detail'
+    | 'product-list'
+    | 'product-variant-detail'
+    | 'product-variant-list'
+    | 'profile'
+    | 'promotion-detail'
+    | 'promotion-list'
+    | 'role-detail'
+    | 'role-list'
+    | 'seller-detail'
+    | 'seller-list'
+    | 'shipping-method-detail'
+    | 'shipping-method-list'
+    | 'stock-location-detail'
+    | 'stock-location-list'
+    | 'tax-category-detail'
+    | 'tax-category-list'
+    | 'tax-rate-detail'
+    | 'tax-rate-list'
+    | 'zone-detail'
+    | 'zone-list'
+```

+ 15 - 0
docs/docs/reference/admin-ui-api/action-bar/router-link-definition.mdx

@@ -0,0 +1,15 @@
+---
+title: "RouterLinkDefinition"
+generated: true
+---
+
+
+## RouterLinkDefinition
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="289" packageName="@vendure/admin-ui" />
+
+A function which returns the router link for an <a href='/reference/admin-ui-api/action-bar/action-bar-item#actionbaritem'>ActionBarItem</a> or <a href='/reference/admin-ui-api/nav-menu/nav-menu-item#navmenuitem'>NavMenuItem</a>.
+
+```ts title="Signature"
+type RouterLinkDefinition = ((route: ActivatedRoute, context: ActionBarContext) => any[]) | any[]
+```

+ 87 - 0
docs/docs/reference/admin-ui-api/alerts/alert-config.mdx

@@ -0,0 +1,87 @@
+---
+title: "AlertConfig"
+generated: true
+---
+
+
+## AlertConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/alerts/alerts.service.ts" sourceLine="63" packageName="@vendure/admin-ui" since="2.2.0" />
+
+A configuration object for an Admin UI alert.
+
+```ts title="Signature"
+interface AlertConfig<T = any> {
+    id: string;
+    check: (context: AlertContext) => T | Promise<T> | Observable<T>;
+    recheck?: (context: AlertContext) => Observable<any>;
+    isAlert: (data: T, context: AlertContext) => boolean;
+    action: (data: T, context: AlertContext) => void;
+    label: (
+        data: T,
+        context: AlertContext,
+    ) => { text: string; translationVars?: { [key: string]: string | number } };
+    requiredPermissions?: Permission[];
+}
+```
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+A unique identifier for the alert.
+### check
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/alerts/alert-context#alertcontext'>AlertContext</a>) => T | Promise<T> | Observable<T>`}   />
+
+A function which is gets the data used to determine whether the alert should be shown.
+Typically, this function will query the server or some other remote data source.
+
+This function will be called once when the Admin UI app bootstraps, and can be also
+set to run at regular intervals by setting the `recheckIntervalMs` property.
+### recheck
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/alerts/alert-context#alertcontext'>AlertContext</a>) => Observable<any>`} default={`undefined`}   />
+
+A function which returns an Observable which is used to determine when to re-run the `check`
+function. Whenever the observable emits, the `check` function will be called again.
+
+A basic time-interval-based recheck can be achieved by using the `interval` function from RxJS.
+
+*Example*
+
+```ts
+import { interval } from 'rxjs';
+
+// ...
+recheck: () => interval(60_000)
+```
+
+If this is not set, the `check` function will only be called once when the Admin UI app bootstraps.
+### isAlert
+
+<MemberInfo kind="property" type={`(data: T, context: <a href='/reference/admin-ui-api/alerts/alert-context#alertcontext'>AlertContext</a>) => boolean`}   />
+
+A function which determines whether the alert should be shown based on the data returned by the `check`
+function.
+### action
+
+<MemberInfo kind="property" type={`(data: T, context: <a href='/reference/admin-ui-api/alerts/alert-context#alertcontext'>AlertContext</a>) => void`}   />
+
+A function which is called when the alert is clicked in the Admin UI.
+### label
+
+<MemberInfo kind="property" type={`(         data: T,         context: <a href='/reference/admin-ui-api/alerts/alert-context#alertcontext'>AlertContext</a>,     ) => { text: string; translationVars?: { [key: string]: string | number } }`}   />
+
+A function which returns the text used in the UI to describe the alert.
+### requiredPermissions
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/common/permission#permission'>Permission</a>[]`}   />
+
+A list of permissions which the current Administrator must have in order. If the current
+Administrator does not have these permissions, none of the other alert functions will be called.
+
+
+</div>

+ 51 - 0
docs/docs/reference/admin-ui-api/alerts/alert-context.mdx

@@ -0,0 +1,51 @@
+---
+title: "AlertContext"
+generated: true
+---
+
+
+## AlertContext
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/alerts/alerts.service.ts" sourceLine="29" packageName="@vendure/admin-ui" since="2.2.0" />
+
+The context object which is passed to the `check`, `isAlert`, `label` and `action` functions of an
+<a href='/reference/admin-ui-api/alerts/alert-config#alertconfig'>AlertConfig</a> object.
+
+```ts title="Signature"
+interface AlertContext {
+    injector: Injector;
+    dataService: DataService;
+    notificationService: NotificationService;
+    modalService: ModalService;
+}
+```
+
+<div className="members-wrapper">
+
+### injector
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/common/injector#injector'>Injector</a>`}   />
+
+The Angular [Injector](https://angular.dev/api/core/Injector) which can be used to get instances
+of services and other providers available in the application.
+### dataService
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>`}   />
+
+The [DataService](/reference/admin-ui-api/services/data-service), which provides methods for querying the
+server-side data.
+### notificationService
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/services/notification-service#notificationservice'>NotificationService</a>`}   />
+
+The [NotificationService](/reference/admin-ui-api/services/notification-service), which provides methods for
+displaying notifications to the user.
+### modalService
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/services/modal-service#modalservice'>ModalService</a>`}   />
+
+The [ModalService](/reference/admin-ui-api/services/modal-service), which provides methods for
+opening modal dialogs.
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/alerts/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Alerts"
+generated: true
+---

+ 22 - 0
docs/docs/reference/admin-ui-api/alerts/register-alert.mdx

@@ -0,0 +1,22 @@
+---
+title: "RegisterAlert"
+generated: true
+---
+
+
+## registerAlert
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-alert.ts" sourceLine="12" packageName="@vendure/admin-ui" since="2.2.0" />
+
+Registers an alert which can be displayed in the Admin UI alert dropdown in the top bar.
+The alert is configured using the <a href='/reference/admin-ui-api/alerts/alert-config#alertconfig'>AlertConfig</a> object.
+
+```ts title="Signature"
+function registerAlert(config: AlertConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/alerts/alert-config#alertconfig'>AlertConfig</a>`} />
+

+ 228 - 0
docs/docs/reference/admin-ui-api/bulk-actions/bulk-action.mdx

@@ -0,0 +1,228 @@
+---
+title: "BulkAction"
+generated: true
+---
+
+
+## BulkAction
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="99" packageName="@vendure/admin-ui" since="1.8.0" />
+
+Configures a bulk action which can be performed on all selected items in a list view.
+
+For a full example, see the <a href='/reference/admin-ui-api/bulk-actions/register-bulk-action#registerbulkaction'>registerBulkAction</a> docs.
+
+```ts title="Signature"
+interface BulkAction<ItemType = any, ComponentType = any> {
+    location: BulkActionLocationId;
+    label: string;
+    getTranslationVars?: (
+        context: BulkActionFunctionContext<ItemType, ComponentType>,
+    ) => Record<string, string | number> | Promise<Record<string, string | number>>;
+    icon?: string;
+    iconClass?: string;
+    onClick: (context: BulkActionClickContext<ItemType, ComponentType>) => void;
+    isVisible?: (context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>;
+    requiresPermission?: string | ((userPermissions: string[]) => boolean);
+}
+```
+
+<div className="members-wrapper">
+
+### location
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkactionlocationid'>BulkActionLocationId</a>`}   />
+
+
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### getTranslationVars
+
+<MemberInfo kind="property" type={`(         context: <a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkactionfunctioncontext'>BulkActionFunctionContext</a><ItemType, ComponentType>,     ) => Record<string, string | number> | Promise<Record<string, string | number>>`}   />
+
+An optional function that should resolve to a map of translation variables which can be
+used when translating the `label` string.
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+A valid [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/) icon shape, e.g.
+"cog", "user", "info-standard".
+### iconClass
+
+<MemberInfo kind="property" type={`string`}   />
+
+A class to be added to the icon element. Examples:
+
+- is-success
+- is-danger
+- is-warning
+- is-info
+- is-highlight
+### onClick
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkactionclickcontext'>BulkActionClickContext</a><ItemType, ComponentType>) => void`}   />
+
+Defines the logic that executes when the bulk action button is clicked.
+### isVisible
+
+<MemberInfo kind="property" type={`(context: <a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkactionfunctioncontext'>BulkActionFunctionContext</a><ItemType, ComponentType>) => boolean | Promise<boolean>`}   />
+
+A function that determines whether this bulk action item should be displayed in the menu.
+If not defined, the item will always be displayed.
+
+This function will be invoked each time the selection is changed, so try to avoid expensive code
+running here.
+
+*Example*
+
+```ts
+import { registerBulkAction, DataService } from '@vendure/admin-ui/core';
+
+registerBulkAction({
+  location: 'product-list',
+  label: 'Assign to channel',
+  // Only display this action if there are multiple channels
+  isVisible: ({ injector }) => injector.get(DataService).client
+    .userStatus()
+    .mapSingle(({ userStatus }) => 1 < userStatus.channels.length)
+    .toPromise(),
+  // ...
+});
+```
+### requiresPermission
+
+<MemberInfo kind="property" type={`string | ((userPermissions: string[]) => boolean)`}   />
+
+Control the display of this item based on the user permissions.
+
+*Example*
+
+```ts
+registerBulkAction({
+  // Can be specified as a simple string
+  requiresPermission: Permission.UpdateProduct,
+
+  // Or as a function that returns a boolean if permissions are satisfied
+  requiresPermission: userPermissions =>
+    userPermissions.includes(Permission.UpdateCatalog) ||
+    userPermissions.includes(Permission.UpdateProduct),
+  // ...
+})
+```
+
+
+</div>
+
+
+## BulkActionLocationId
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="12" packageName="@vendure/admin-ui" since="1.8.0" />
+
+A valid location of a list view that supports the bulk actions API.
+
+```ts title="Signature"
+type BulkActionLocationId = | 'product-list'
+    | 'facet-list'
+    | 'collection-list'
+    | 'customer-list'
+    | 'customer-group-list'
+    | 'customer-group-members-list'
+    | 'customer-group-members-picker-list'
+    | 'promotion-list'
+    | 'seller-list'
+    | 'channel-list'
+    | 'administrator-list'
+    | 'role-list'
+    | 'shipping-method-list'
+    | 'stock-location-list'
+    | 'payment-method-list'
+    | 'tax-category-list'
+    | 'tax-rate-list'
+    | 'zone-list'
+    | 'zone-members-list'
+    | string
+```
+
+
+## BulkActionFunctionContext
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="43" packageName="@vendure/admin-ui" since="1.8.0" />
+
+This is the argument which gets passed to the `getTranslationVars` and `isVisible` functions
+of the BulkAction definition.
+
+```ts title="Signature"
+interface BulkActionFunctionContext<ItemType, ComponentType> {
+    selection: ItemType[];
+    hostComponent: ComponentType;
+    injector: Injector;
+    route: ActivatedRoute;
+}
+```
+
+<div className="members-wrapper">
+
+### selection
+
+<MemberInfo kind="property" type={`ItemType[]`}   />
+
+An array of the selected items from the list.
+### hostComponent
+
+<MemberInfo kind="property" type={`ComponentType`}   />
+
+The component instance that is hosting the list view. For instance,
+`ProductListComponent`. This can be used to call methods on the instance,
+e.g. calling `hostComponent.refresh()` to force a list refresh after
+deleting the selected items.
+### injector
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/common/injector#injector'>Injector</a>`}   />
+
+The Angular [Injector](https://angular.io/api/core/Injector) which can be used
+to get service instances which might be needed in the click handler.
+### route
+
+<MemberInfo kind="property" type={`ActivatedRoute`}   />
+
+
+
+
+</div>
+
+
+## BulkActionClickContext
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="74" packageName="@vendure/admin-ui" since="1.8.0" />
+
+This is the argument which gets passed to the `onClick` function of a BulkAction.
+
+```ts title="Signature"
+interface BulkActionClickContext<ItemType, ComponentType> extends BulkActionFunctionContext<ItemType, ComponentType> {
+    clearSelection: () => void;
+    event: MouseEvent;
+}
+```
+* Extends: <code><a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkactionfunctioncontext'>BulkActionFunctionContext</a><ItemType, ComponentType></code>
+
+
+
+<div className="members-wrapper">
+
+### clearSelection
+
+<MemberInfo kind="property" type={`() => void`}   />
+
+Clears the selection in the active list view.
+### event
+
+<MemberInfo kind="property" type={`MouseEvent`}   />
+
+The click event itself.
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/bulk-actions/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Bulk Actions"
+generated: true
+---

+ 62 - 0
docs/docs/reference/admin-ui-api/bulk-actions/register-bulk-action.mdx

@@ -0,0 +1,62 @@
+---
+title: "RegisterBulkAction"
+generated: true
+---
+
+
+## registerBulkAction
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-bulk-action.ts" sourceLine="52" packageName="@vendure/admin-ui" since="1.8.0" />
+
+Registers a custom <a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkaction'>BulkAction</a> which can be invoked from the bulk action menu
+of any supported list view.
+
+This allows you to provide custom functionality that can operate on any of the selected
+items in the list view.
+
+In this example, imagine we have an integration with a 3rd-party text translation service. This
+bulk action allows us to select multiple products from the product list view, and send them for
+translation via a custom service which integrates with the translation service's API.
+
+*Example*
+
+```ts title="providers.ts"
+import { ModalService, registerBulkAction, SharedModule } from '@vendure/admin-ui/core';
+import { ProductDataTranslationService } from './product-data-translation.service';
+
+export default [
+    ProductDataTranslationService,
+    registerBulkAction({
+        location: 'product-list',
+        label: 'Send to translation service',
+        icon: 'language',
+        onClick: ({ injector, selection }) => {
+            const modalService = injector.get(ModalService);
+            const translationService = injector.get(ProductDataTranslationService);
+            modalService
+                .dialog({
+                    title: `Send ${selection.length} products for translation?`,
+                    buttons: [
+                        { type: 'secondary', label: 'cancel' },
+                        { type: 'primary', label: 'send', returnValue: true },
+                    ],
+                })
+                .subscribe(response => {
+                    if (response) {
+                        translationService.sendForTranslation(selection.map(item => item.productId));
+                    }
+                });
+        },
+    }),
+];
+```
+
+```ts title="Signature"
+function registerBulkAction(bulkAction: BulkAction): void
+```
+Parameters
+
+### bulkAction
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/bulk-actions/bulk-action#bulkaction'>BulkAction</a>`} />
+

+ 159 - 0
docs/docs/reference/admin-ui-api/components/asset-picker-dialog-component.mdx

@@ -0,0 +1,159 @@
+---
+title: "AssetPickerDialogComponent"
+generated: true
+---
+
+
+## AssetPickerDialogComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts" sourceLine="51" packageName="@vendure/admin-ui" />
+
+A dialog which allows the creation and selection of assets.
+
+*Example*
+
+```ts
+selectAssets() {
+  this.modalService
+    .fromComponent(AssetPickerDialogComponent, {
+        size: 'xl',
+    })
+    .subscribe(result => {
+        if (result && result.length) {
+            // ...
+        }
+    });
+}
+```
+
+```ts title="Signature"
+class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDestroy, Dialog<Asset[]> {
+    assets$: Observable<AssetLike[]>;
+    allTags$: Observable<TagFragment[]>;
+    paginationConfig: PaginationInstance = {
+        currentPage: 1,
+        itemsPerPage: 25,
+        totalItems: 1,
+    };
+    multiSelect = true;
+    initialTags: string[] = [];
+    resolveWith: (result?: Asset[]) => void;
+    selection: Asset[] = [];
+    searchTerm$ = new BehaviorSubject<string | undefined>(undefined);
+    filterByTags$ = new BehaviorSubject<TagFragment[] | undefined>(undefined);
+    uploading = false;
+    constructor(dataService: DataService, notificationService: NotificationService)
+    ngOnInit() => ;
+    ngAfterViewInit() => ;
+    ngOnDestroy() => void;
+    pageChange(page: number) => ;
+    itemsPerPageChange(itemsPerPage: number) => ;
+    cancel() => ;
+    select() => ;
+    createAssets(files: File[]) => ;
+}
+```
+* Implements: <code>OnInit</code>, <code>AfterViewInit</code>, <code>OnDestroy</code>, <code><a href='/reference/admin-ui-api/services/modal-service#dialog'>Dialog</a><<a href='/reference/typescript-api/entities/asset#asset'>Asset</a>[]></code>
+
+
+
+<div className="members-wrapper">
+
+### assets$
+
+<MemberInfo kind="property" type={`Observable<AssetLike[]>`}   />
+
+
+### allTags$
+
+<MemberInfo kind="property" type={`Observable<TagFragment[]>`}   />
+
+
+### paginationConfig
+
+<MemberInfo kind="property" type={`PaginationInstance`}   />
+
+
+### multiSelect
+
+<MemberInfo kind="property" type={``}   />
+
+
+### initialTags
+
+<MemberInfo kind="property" type={`string[]`}   />
+
+
+### resolveWith
+
+<MemberInfo kind="property" type={`(result?: <a href='/reference/typescript-api/entities/asset#asset'>Asset</a>[]) => void`}   />
+
+
+### selection
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/entities/asset#asset'>Asset</a>[]`}   />
+
+
+### searchTerm$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### filterByTags$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### uploading
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, notificationService: <a href='/reference/admin-ui-api/services/notification-service#notificationservice'>NotificationService</a>) => AssetPickerDialogComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngAfterViewInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### pageChange
+
+<MemberInfo kind="method" type={`(page: number) => `}   />
+
+
+### itemsPerPageChange
+
+<MemberInfo kind="method" type={`(itemsPerPage: number) => `}   />
+
+
+### cancel
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### select
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### createAssets
+
+<MemberInfo kind="method" type={`(files: File[]) => `}   />
+
+
+
+
+</div>

+ 62 - 0
docs/docs/reference/admin-ui-api/components/chip-component.mdx

@@ -0,0 +1,62 @@
+---
+title: "ChipComponent"
+generated: true
+---
+
+
+## ChipComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.ts" sourceLine="16" packageName="@vendure/admin-ui" />
+
+A chip component for displaying a label with an optional action icon.
+
+*Example*
+
+```HTML
+<vdr-chip [colorFrom]="item.value"
+          icon="close"
+          (iconClick)="clear(item)">
+{{ item.value }}</vdr-chip>
+```
+
+```ts title="Signature"
+class ChipComponent {
+    @Input() icon: string;
+    @Input() invert = false;
+    @Input() colorFrom = '';
+    @Input() colorType: 'error' | 'success' | 'warning';
+    @Output() iconClick = new EventEmitter<MouseEvent>();
+}
+```
+
+<div className="members-wrapper">
+
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+The icon should be the name of one of the available Clarity icons: https://clarity.design/foundation/icons/shapes/
+### invert
+
+<MemberInfo kind="property" type={``}   />
+
+
+### colorFrom
+
+<MemberInfo kind="property" type={``}   />
+
+If set, the chip will have an auto-generated background
+color based on the string value passed in.
+### colorType
+
+<MemberInfo kind="property" type={`'error' | 'success' | 'warning'`}   />
+
+The color of the chip can also be one of the standard status colors.
+### iconClick
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>

+ 173 - 0
docs/docs/reference/admin-ui-api/components/currency-input-component.mdx

@@ -0,0 +1,173 @@
+---
+title: "CurrencyInputComponent"
+generated: true
+---
+
+
+## CurrencyInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts" sourceLine="33" packageName="@vendure/admin-ui" />
+
+A form input control which displays currency in decimal format, whilst working
+with the integer cent value in the background.
+
+*Example*
+
+```HTML
+<vdr-currency-input
+    [(ngModel)]="entityPrice"
+    [currencyCode]="currencyCode"
+></vdr-currency-input>
+```
+
+```ts title="Signature"
+class CurrencyInputComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
+    @Input() disabled = false;
+    @Input() readonly = false;
+    @Input() value: number;
+    @Input() currencyCode = '';
+    @Output() valueChange = new EventEmitter();
+    prefix$: Observable<string>;
+    suffix$: Observable<string>;
+    hasFractionPart = true;
+    onChange: (val: any) => void;
+    onTouch: () => void;
+    _inputValue: string;
+    readonly precision: number;
+    readonly precisionFactor: number;
+    constructor(dataService: DataService, currencyService: CurrencyService)
+    ngOnInit() => ;
+    ngOnChanges(changes: SimpleChanges) => ;
+    ngOnDestroy() => ;
+    registerOnChange(fn: any) => ;
+    registerOnTouched(fn: any) => ;
+    setDisabledState(isDisabled: boolean) => ;
+    onInput(value: string) => ;
+    onFocus() => ;
+    writeValue(value: any) => void;
+}
+```
+* Implements: <code>ControlValueAccessor</code>, <code>OnInit</code>, <code>OnChanges</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### disabled
+
+<MemberInfo kind="property" type={``}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={``}   />
+
+
+### value
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### currencyCode
+
+<MemberInfo kind="property" type={``}   />
+
+
+### valueChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### prefix$
+
+<MemberInfo kind="property" type={`Observable<string>`}   />
+
+
+### suffix$
+
+<MemberInfo kind="property" type={`Observable<string>`}   />
+
+
+### hasFractionPart
+
+<MemberInfo kind="property" type={``}   />
+
+
+### onChange
+
+<MemberInfo kind="property" type={`(val: any) => void`}   />
+
+
+### onTouch
+
+<MemberInfo kind="property" type={`() => void`}   />
+
+
+### _inputValue
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### precision
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### precisionFactor
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, currencyService: CurrencyService) => CurrencyInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngOnChanges
+
+<MemberInfo kind="method" type={`(changes: SimpleChanges) => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### registerOnChange
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### registerOnTouched
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### setDisabledState
+
+<MemberInfo kind="method" type={`(isDisabled: boolean) => `}   />
+
+
+### onInput
+
+<MemberInfo kind="method" type={`(value: string) => `}   />
+
+
+### onFocus
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### writeValue
+
+<MemberInfo kind="method" type={`(value: any) => void`}   />
+
+
+
+
+</div>

+ 237 - 0
docs/docs/reference/admin-ui-api/components/data-table-component.mdx

@@ -0,0 +1,237 @@
+---
+title: "DataTableComponent"
+generated: true
+---
+
+
+## DataTableComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.ts" sourceLine="86" packageName="@vendure/admin-ui" />
+
+A table for displaying PaginatedList results. It is designed to be used inside components which
+extend the <a href='/reference/admin-ui-api/list-detail-views/base-list-component#baselistcomponent'>BaseListComponent</a> class.
+
+**Deprecated** This component is deprecated. Use the <a href='/reference/admin-ui-api/components/data-table2component#datatable2component'>DataTable2Component</a> instead.
+
+*Example*
+
+```HTML
+<vdr-data-table
+  [items]="items$ | async"
+  [itemsPerPage]="itemsPerPage$ | async"
+  [totalItems]="totalItems$ | async"
+  [currentPage]="currentPage$ | async"
+  (pageChange)="setPageNumber($event)"
+  (itemsPerPageChange)="setItemsPerPage($event)"
+>
+  <!-- The header columns are defined first -->
+  <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
+  <vdr-dt-column></vdr-dt-column>
+  <vdr-dt-column></vdr-dt-column>
+
+  <!-- Then we define how a row is rendered -->
+  <ng-template let-taxRate="item">
+    <td class="left align-middle">{{ taxRate.name }}</td>
+    <td class="left align-middle">{{ taxRate.category.name }}</td>
+    <td class="left align-middle">{{ taxRate.zone.name }}</td>
+    <td class="left align-middle">{{ taxRate.value }}%</td>
+    <td class="right align-middle">
+      <vdr-table-row-action
+        iconShape="edit"
+        [label]="'common.edit' | translate"
+        [linkTo]="['./', taxRate.id]"
+      ></vdr-table-row-action>
+    </td>
+    <td class="right align-middle">
+      <vdr-dropdown>
+        <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+          {{ 'common.actions' | translate }}
+          <clr-icon shape="caret down"></clr-icon>
+        </button>
+        <vdr-dropdown-menu vdrPosition="bottom-right">
+          <button
+              type="button"
+              class="delete-button"
+              (click)="deleteTaxRate(taxRate)"
+              [disabled]="!(['DeleteSettings', 'DeleteTaxRate'] | hasPermission)"
+              vdrDropdownItem
+          >
+              <clr-icon shape="trash" class="is-danger"></clr-icon>
+              {{ 'common.delete' | translate }}
+          </button>
+        </vdr-dropdown-menu>
+      </vdr-dropdown>
+    </td>
+  </ng-template>
+</vdr-data-table>
+```
+
+```ts title="Signature"
+class DataTableComponent<T> implements AfterContentInit, OnChanges, OnInit, OnDestroy {
+    @Input() items: T[];
+    @Input() itemsPerPage: number;
+    @Input() currentPage: number;
+    @Input() totalItems: number;
+    @Input() emptyStateLabel: string;
+    @Input() selectionManager?: SelectionManager<T>;
+    @Output() pageChange = new EventEmitter<number>();
+    @Output() itemsPerPageChange = new EventEmitter<number>();
+    @Input() allSelected: boolean;
+    @Input() isRowSelectedFn: ((item: T) => boolean) | undefined;
+    @Output() allSelectChange = new EventEmitter<void>();
+    @Output() rowSelectChange = new EventEmitter<{ event: MouseEvent; item: T }>();
+    @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;
+    @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
+    rowTemplate: TemplateRef<any>;
+    currentStart: number;
+    currentEnd: number;
+    disableSelect = false;
+    constructor(changeDetectorRef: ChangeDetectorRef)
+    ngOnInit() => ;
+    ngOnChanges(changes: SimpleChanges) => ;
+    ngOnDestroy() => ;
+    ngAfterContentInit() => void;
+    trackByFn(index: number, item: any) => ;
+    onToggleAllClick() => ;
+    onRowClick(item: T, event: MouseEvent) => ;
+}
+```
+* Implements: <code>AfterContentInit</code>, <code>OnChanges</code>, <code>OnInit</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### items
+
+<MemberInfo kind="property" type={`T[]`}   />
+
+
+### itemsPerPage
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### currentPage
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### totalItems
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### emptyStateLabel
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### selectionManager
+
+<MemberInfo kind="property" type={`SelectionManager<T>`}   />
+
+
+### pageChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### itemsPerPageChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### allSelected
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### isRowSelectedFn
+
+<MemberInfo kind="property" type={`((item: T) => boolean) | undefined`}   />
+
+
+### allSelectChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### rowSelectChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### columns
+
+<MemberInfo kind="property" type={`QueryList<DataTableColumnComponent>`}   />
+
+
+### templateRefs
+
+<MemberInfo kind="property" type={`QueryList<TemplateRef<any>>`}   />
+
+
+### rowTemplate
+
+<MemberInfo kind="property" type={`TemplateRef<any>`}   />
+
+
+### currentStart
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### currentEnd
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### disableSelect
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetectorRef: ChangeDetectorRef) => DataTableComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngOnChanges
+
+<MemberInfo kind="method" type={`(changes: SimpleChanges) => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngAfterContentInit
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### trackByFn
+
+<MemberInfo kind="method" type={`(index: number, item: any) => `}   />
+
+
+### onToggleAllClick
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### onRowClick
+
+<MemberInfo kind="method" type={`(item: T, event: MouseEvent) => `}   />
+
+
+
+
+</div>

+ 353 - 0
docs/docs/reference/admin-ui-api/components/data-table2component.mdx

@@ -0,0 +1,353 @@
+---
+title: "DataTable2Component"
+generated: true
+---
+
+
+## DataTable2Component
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts" sourceLine="101" packageName="@vendure/admin-ui" />
+
+A table for displaying PaginatedList results. It is designed to be used inside components which
+extend the <a href='/reference/admin-ui-api/list-detail-views/base-list-component#baselistcomponent'>BaseListComponent</a> or <a href='/reference/admin-ui-api/list-detail-views/typed-base-list-component#typedbaselistcomponent'>TypedBaseListComponent</a> class.
+
+*Example*
+
+```html
+<vdr-data-table-2
+    id="product-review-list"
+    [items]="items$ | async"
+    [itemsPerPage]="itemsPerPage$ | async"
+    [totalItems]="totalItems$ | async"
+    [currentPage]="currentPage$ | async"
+    [filters]="filters"
+    (pageChange)="setPageNumber($event)"
+    (itemsPerPageChange)="setItemsPerPage($event)"
+>
+    <vdr-bulk-action-menu
+        locationId="product-review-list"
+        [hostComponent]="this"
+        [selectionManager]="selectionManager"
+    />
+    <vdr-dt2-search
+        [searchTermControl]="searchTermControl"
+        searchTermPlaceholder="Filter by title"
+    />
+    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+        <ng-template let-review="item">
+            {{ review.id }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column
+        [heading]="'common.created-at' | translate"
+        [hiddenByDefault]="true"
+        [sort]="sorts.get('createdAt')"
+    >
+        <ng-template let-review="item">
+            {{ review.createdAt | localeDate : 'short' }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column
+        [heading]="'common.updated-at' | translate"
+        [hiddenByDefault]="true"
+        [sort]="sorts.get('updatedAt')"
+    >
+        <ng-template let-review="item">
+            {{ review.updatedAt | localeDate : 'short' }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+        <ng-template let-review="item">
+            <a class="button-ghost" [routerLink]="['./', review.id]"
+                ><span>{{ review.name }}</span>
+                <clr-icon shape="arrow right"></clr-icon>
+            </a>
+        </ng-template>
+    </vdr-dt2-column>
+</vdr-data-table-2>
+```
+
+```ts title="Signature"
+class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDestroy {
+    @Input() id: DataTableLocationId;
+    @Input() items: T[];
+    @Input() itemsPerPage: number;
+    @Input() currentPage: number;
+    @Input() totalItems: number;
+    @Input() emptyStateLabel: string;
+    @Input() filters: DataTableFilterCollection;
+    @Input() activeIndex = -1;
+    @Input() trackByPath = 'id';
+    @Output() pageChange = new EventEmitter<number>();
+    @Output() itemsPerPageChange = new EventEmitter<number>();
+    @Output() visibleColumnsChange = new EventEmitter<Array<DataTable2ColumnComponent<T>>>();
+    @ContentChildren(DataTable2ColumnComponent) columns: QueryList<DataTable2ColumnComponent<T>>;
+    @ContentChildren(DataTableCustomFieldColumnComponent)
+    customFieldColumns: QueryList<DataTableCustomFieldColumnComponent<T>>;
+    @ContentChild(DataTable2SearchComponent) searchComponent: DataTable2SearchComponent;
+    @ContentChild(BulkActionMenuComponent) bulkActionMenuComponent: BulkActionMenuComponent;
+    @ContentChild('vdrDt2CustomSearch') customSearchTemplate: TemplateRef<any>;
+    @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
+    injector = inject(Injector);
+    route = inject(ActivatedRoute);
+    filterPresetService = inject(FilterPresetService);
+    dataTableCustomComponentService = inject(DataTableCustomComponentService);
+    dataTableConfigService = inject(DataTableConfigService);
+    protected customComponents = new Map<string, { config: DataTableComponentConfig; injector: Injector }>();
+    rowTemplate: TemplateRef<any>;
+    currentStart: number;
+    currentEnd: number;
+    disableSelect = false;
+    showSearchFilterRow = false;
+    protected uiLanguage$: Observable<LanguageCode>;
+    protected destroy$ = new Subject<void>();
+    constructor(changeDetectorRef: ChangeDetectorRef, dataService: DataService)
+    selectionManager: void
+    allColumns: void
+    visibleSortedColumns: void
+    sortedColumns: void
+    ngOnChanges(changes: SimpleChanges) => ;
+    ngOnDestroy() => ;
+    ngAfterContentInit() => void;
+    onColumnReorder(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) => ;
+    onColumnsReset() => ;
+    toggleSearchFilterRow() => ;
+    trackByFn(index: number, item: any) => ;
+    onToggleAllClick() => ;
+    onRowClick(item: T, event: MouseEvent) => ;
+}
+```
+* Implements: <code>AfterContentInit</code>, <code>OnChanges</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`DataTableLocationId`}   />
+
+
+### items
+
+<MemberInfo kind="property" type={`T[]`}   />
+
+
+### itemsPerPage
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### currentPage
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### totalItems
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### emptyStateLabel
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### filters
+
+<MemberInfo kind="property" type={`DataTableFilterCollection`}   />
+
+
+### activeIndex
+
+<MemberInfo kind="property" type={``}   />
+
+
+### trackByPath
+
+<MemberInfo kind="property" type={``}   />
+
+
+### pageChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### itemsPerPageChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### visibleColumnsChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### columns
+
+<MemberInfo kind="property" type={`QueryList<DataTable2ColumnComponent<T>>`}   />
+
+
+### customFieldColumns
+
+<MemberInfo kind="property" type={`QueryList<DataTableCustomFieldColumnComponent<T>>`}   />
+
+
+### searchComponent
+
+<MemberInfo kind="property" type={`DataTable2SearchComponent`}   />
+
+
+### bulkActionMenuComponent
+
+<MemberInfo kind="property" type={`BulkActionMenuComponent`}   />
+
+
+### customSearchTemplate
+
+<MemberInfo kind="property" type={`TemplateRef<any>`}   />
+
+
+### templateRefs
+
+<MemberInfo kind="property" type={`QueryList<TemplateRef<any>>`}   />
+
+
+### injector
+
+<MemberInfo kind="property" type={``}   />
+
+
+### route
+
+<MemberInfo kind="property" type={``}   />
+
+
+### filterPresetService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### dataTableCustomComponentService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### dataTableConfigService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### customComponents
+
+<MemberInfo kind="property" type={``}   />
+
+
+### rowTemplate
+
+<MemberInfo kind="property" type={`TemplateRef<any>`}   />
+
+
+### currentStart
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### currentEnd
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### disableSelect
+
+<MemberInfo kind="property" type={``}   />
+
+
+### showSearchFilterRow
+
+<MemberInfo kind="property" type={``}   />
+
+
+### uiLanguage$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>>`}   />
+
+
+### destroy$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetectorRef: ChangeDetectorRef, dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => DataTable2Component`}   />
+
+
+### selectionManager
+
+<MemberInfo kind="property" type={``}   />
+
+
+### allColumns
+
+<MemberInfo kind="property" type={``}   />
+
+
+### visibleSortedColumns
+
+<MemberInfo kind="property" type={``}   />
+
+
+### sortedColumns
+
+<MemberInfo kind="property" type={``}   />
+
+
+### ngOnChanges
+
+<MemberInfo kind="method" type={`(changes: SimpleChanges) => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngAfterContentInit
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### onColumnReorder
+
+<MemberInfo kind="method" type={`(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) => `}   />
+
+
+### onColumnsReset
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### toggleSearchFilterRow
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### trackByFn
+
+<MemberInfo kind="method" type={`(index: number, item: any) => `}   />
+
+
+### onToggleAllClick
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### onRowClick
+
+<MemberInfo kind="method" type={`(item: T, event: MouseEvent) => `}   />
+
+
+
+
+</div>

+ 261 - 0
docs/docs/reference/admin-ui-api/components/datetime-picker-component.mdx

@@ -0,0 +1,261 @@
+---
+title: "DatetimePickerComponent"
+generated: true
+---
+
+
+## DatetimePickerComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/datetime-picker/datetime-picker.component.ts" sourceLine="39" packageName="@vendure/admin-ui" />
+
+A form input for selecting datetime values.
+
+*Example*
+
+```HTML
+<vdr-datetime-picker [(ngModel)]="startDate"></vdr-datetime-picker>
+```
+
+```ts title="Signature"
+class DatetimePickerComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy {
+    @Input() yearRange;
+    @Input() weekStartDay: DayOfWeek = 'mon';
+    @Input() timeGranularityInterval = 5;
+    @Input() min: string | null = null;
+    @Input() max: string | null = null;
+    @Input() readonly = false;
+    @ViewChild('dropdownComponent', { static: true }) dropdownComponent: DropdownComponent;
+    @ViewChild('datetimeInput', { static: true }) datetimeInput: ElementRef<HTMLInputElement>;
+    @ViewChild('calendarTable') calendarTable: ElementRef<HTMLTableElement>;
+    disabled = false;
+    calendarView$: Observable<CalendarView>;
+    current$: Observable<CurrentView>;
+    selected$: Observable<Date | null>;
+    selectedHours$: Observable<number | null>;
+    selectedMinutes$: Observable<number | null>;
+    years: number[];
+    weekdays: string[] = [];
+    hours: number[];
+    minutes: number[];
+    constructor(changeDetectorRef: ChangeDetectorRef, datetimePickerService: DatetimePickerService)
+    ngOnInit() => ;
+    ngAfterViewInit() => void;
+    ngOnDestroy() => void;
+    registerOnChange(fn: any) => ;
+    registerOnTouched(fn: any) => ;
+    setDisabledState(isDisabled: boolean) => ;
+    writeValue(value: string | null) => ;
+    prevMonth() => ;
+    nextMonth() => ;
+    selectToday() => ;
+    setYear(event: Event) => ;
+    setMonth(event: Event) => ;
+    selectDay(day: DayCell) => ;
+    clearValue() => ;
+    handleCalendarKeydown(event: KeyboardEvent) => ;
+    setHour(event: Event) => ;
+    setMinute(event: Event) => ;
+    closeDatepicker() => ;
+}
+```
+* Implements: <code>ControlValueAccessor</code>, <code>AfterViewInit</code>, <code>OnInit</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### yearRange
+
+<MemberInfo kind="property" type={``}   />
+
+The range above and below the current year which is selectable from
+the year select control. If a min or max value is set, these will
+override the yearRange.
+### weekStartDay
+
+<MemberInfo kind="property" type={`DayOfWeek`}   />
+
+The day that the week should start with in the calendar view.
+### timeGranularityInterval
+
+<MemberInfo kind="property" type={``}   />
+
+The granularity of the minutes time picker
+### min
+
+<MemberInfo kind="property" type={`string | null`}   />
+
+The minimum date as an ISO string
+### max
+
+<MemberInfo kind="property" type={`string | null`}   />
+
+The maximum date as an ISO string
+### readonly
+
+<MemberInfo kind="property" type={``}   />
+
+Sets the readonly state
+### dropdownComponent
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/components/dropdown-component#dropdowncomponent'>DropdownComponent</a>`}   />
+
+
+### datetimeInput
+
+<MemberInfo kind="property" type={`ElementRef<HTMLInputElement>`}   />
+
+
+### calendarTable
+
+<MemberInfo kind="property" type={`ElementRef<HTMLTableElement>`}   />
+
+
+### disabled
+
+<MemberInfo kind="property" type={``}   />
+
+
+### calendarView$
+
+<MemberInfo kind="property" type={`Observable<CalendarView>`}   />
+
+
+### current$
+
+<MemberInfo kind="property" type={`Observable<CurrentView>`}   />
+
+
+### selected$
+
+<MemberInfo kind="property" type={`Observable<Date | null>`}   />
+
+
+### selectedHours$
+
+<MemberInfo kind="property" type={`Observable<number | null>`}   />
+
+
+### selectedMinutes$
+
+<MemberInfo kind="property" type={`Observable<number | null>`}   />
+
+
+### years
+
+<MemberInfo kind="property" type={`number[]`}   />
+
+
+### weekdays
+
+<MemberInfo kind="property" type={`string[]`}   />
+
+
+### hours
+
+<MemberInfo kind="property" type={`number[]`}   />
+
+
+### minutes
+
+<MemberInfo kind="property" type={`number[]`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetectorRef: ChangeDetectorRef, datetimePickerService: DatetimePickerService) => DatetimePickerComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngAfterViewInit
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### registerOnChange
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### registerOnTouched
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### setDisabledState
+
+<MemberInfo kind="method" type={`(isDisabled: boolean) => `}   />
+
+
+### writeValue
+
+<MemberInfo kind="method" type={`(value: string | null) => `}   />
+
+
+### prevMonth
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### nextMonth
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### selectToday
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### setYear
+
+<MemberInfo kind="method" type={`(event: Event) => `}   />
+
+
+### setMonth
+
+<MemberInfo kind="method" type={`(event: Event) => `}   />
+
+
+### selectDay
+
+<MemberInfo kind="method" type={`(day: DayCell) => `}   />
+
+
+### clearValue
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### handleCalendarKeydown
+
+<MemberInfo kind="method" type={`(event: KeyboardEvent) => `}   />
+
+
+### setHour
+
+<MemberInfo kind="method" type={`(event: Event) => `}   />
+
+
+### setMinute
+
+<MemberInfo kind="method" type={`(event: Event) => `}   />
+
+
+### closeDatepicker
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>

+ 85 - 0
docs/docs/reference/admin-ui-api/components/dropdown-component.mdx

@@ -0,0 +1,85 @@
+---
+title: "DropdownComponent"
+generated: true
+---
+
+
+## DropdownComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown.component.ts" sourceLine="28" packageName="@vendure/admin-ui" />
+
+Used for building dropdown menus.
+
+*Example*
+
+```HTML
+<vdr-dropdown>
+  <button class="btn btn-outline" vdrDropdownTrigger>
+      <clr-icon shape="plus"></clr-icon>
+      Select type
+  </button>
+  <vdr-dropdown-menu vdrPosition="bottom-left">
+    <button
+      *ngFor="let typeName of allTypes"
+      type="button"
+      vdrDropdownItem
+      (click)="selectType(typeName)"
+    >
+      typeName
+    </button>
+  </vdr-dropdown-menu>
+</vdr-dropdown>
+```
+
+```ts title="Signature"
+class DropdownComponent {
+    isOpen = false;
+    public trigger: ElementRef;
+    @Input() manualToggle = false;
+    onClick() => ;
+    toggleOpen() => ;
+    onOpenChange(callback: (isOpen: boolean) => void) => ;
+    setTriggerElement(elementRef: ElementRef) => ;
+}
+```
+
+<div className="members-wrapper">
+
+### isOpen
+
+<MemberInfo kind="property" type={``}   />
+
+
+### trigger
+
+<MemberInfo kind="property" type={`ElementRef`}   />
+
+
+### manualToggle
+
+<MemberInfo kind="property" type={``}   />
+
+
+### onClick
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### toggleOpen
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### onOpenChange
+
+<MemberInfo kind="method" type={`(callback: (isOpen: boolean) => void) => `}   />
+
+
+### setTriggerElement
+
+<MemberInfo kind="method" type={`(elementRef: ElementRef) => `}   />
+
+
+
+
+</div>

+ 154 - 0
docs/docs/reference/admin-ui-api/components/facet-value-selector-component.mdx

@@ -0,0 +1,154 @@
+---
+title: "FacetValueSelectorComponent"
+generated: true
+---
+
+
+## FacetValueSelectorComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/facet-value-selector/facet-value-selector.component.ts" sourceLine="34" packageName="@vendure/admin-ui" />
+
+A form control for selecting facet values.
+
+*Example*
+
+```HTML
+<vdr-facet-value-selector
+  (selectedValuesChange)="selectedValues = $event"
+></vdr-facet-value-selector>
+```
+The `selectedValuesChange` event will emit an array of `FacetValue` objects.
+
+```ts title="Signature"
+class FacetValueSelectorComponent implements OnInit, OnDestroy, ControlValueAccessor {
+    @Output() selectedValuesChange = new EventEmitter<FacetValueFragment[]>();
+    @Input() readonly = false;
+    @Input() transformControlValueAccessorValue: (value: FacetValueFragment[]) => any[] = value => value;
+    searchInput$ = new Subject<string>();
+    searchLoading = false;
+    searchResults$: Observable<FacetValueFragment[]>;
+    selectedIds$ = new Subject<string[]>();
+    onChangeFn: (val: any) => void;
+    onTouchFn: () => void;
+    disabled = false;
+    value: Array<string | FacetValueFragment>;
+    constructor(dataService: DataService, changeDetectorRef: ChangeDetectorRef)
+    ngOnInit() => void;
+    ngOnDestroy() => ;
+    onChange(selected: FacetValueFragment[]) => ;
+    registerOnChange(fn: any) => ;
+    registerOnTouched(fn: any) => ;
+    setDisabledState(isDisabled: boolean) => void;
+    focus() => ;
+    writeValue(obj: string | FacetValueFragment[] | Array<string | number> | null) => void;
+}
+```
+* Implements: <code>OnInit</code>, <code>OnDestroy</code>, <code>ControlValueAccessor</code>
+
+
+
+<div className="members-wrapper">
+
+### selectedValuesChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={``}   />
+
+
+### transformControlValueAccessorValue
+
+<MemberInfo kind="property" type={`(value: FacetValueFragment[]) => any[]`}   />
+
+
+### searchInput$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### searchLoading
+
+<MemberInfo kind="property" type={``}   />
+
+
+### searchResults$
+
+<MemberInfo kind="property" type={`Observable<FacetValueFragment[]>`}   />
+
+
+### selectedIds$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### onChangeFn
+
+<MemberInfo kind="property" type={`(val: any) => void`}   />
+
+
+### onTouchFn
+
+<MemberInfo kind="property" type={`() => void`}   />
+
+
+### disabled
+
+<MemberInfo kind="property" type={``}   />
+
+
+### value
+
+<MemberInfo kind="property" type={`Array<string | FacetValueFragment>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef: ChangeDetectorRef) => FacetValueSelectorComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### onChange
+
+<MemberInfo kind="method" type={`(selected: FacetValueFragment[]) => `}   />
+
+
+### registerOnChange
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### registerOnTouched
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### setDisabledState
+
+<MemberInfo kind="method" type={`(isDisabled: boolean) => void`}   />
+
+
+### focus
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### writeValue
+
+<MemberInfo kind="method" type={`(obj: string | FacetValueFragment[] | Array<string | number> | null) => void`}   />
+
+
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Components"
+generated: true
+---

+ 85 - 0
docs/docs/reference/admin-ui-api/components/object-tree-component.mdx

@@ -0,0 +1,85 @@
+---
+title: "ObjectTreeComponent"
+generated: true
+---
+
+
+## ObjectTreeComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/object-tree/object-tree.component.ts" sourceLine="22" packageName="@vendure/admin-ui" />
+
+This component displays a plain JavaScript object as an expandable tree.
+
+*Example*
+
+```HTML
+<vdr-object-tree [value]="payment.metadata"></vdr-object-tree>
+```
+
+```ts title="Signature"
+class ObjectTreeComponent implements OnChanges {
+    @Input() value: { [key: string]: any } | string;
+    @Input() isArrayItem = false;
+    depth: number;
+    expanded: boolean;
+    valueIsArray: boolean;
+    entries: Array<{ key: string; value: any }>;
+    constructor(parent: ObjectTreeComponent)
+    ngOnChanges() => ;
+    isObject(value: any) => boolean;
+}
+```
+* Implements: <code>OnChanges</code>
+
+
+
+<div className="members-wrapper">
+
+### value
+
+<MemberInfo kind="property" type={`{ [key: string]: any } | string`}   />
+
+
+### isArrayItem
+
+<MemberInfo kind="property" type={``}   />
+
+
+### depth
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### expanded
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### valueIsArray
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### entries
+
+<MemberInfo kind="property" type={`Array<{ key: string; value: any }>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(parent: <a href='/reference/admin-ui-api/components/object-tree-component#objecttreecomponent'>ObjectTreeComponent</a>) => ObjectTreeComponent`}   />
+
+
+### ngOnChanges
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### isObject
+
+<MemberInfo kind="method" type={`(value: any) => boolean`}   />
+
+
+
+
+</div>

+ 40 - 0
docs/docs/reference/admin-ui-api/components/order-state-label-component.mdx

@@ -0,0 +1,40 @@
+---
+title: "OrderStateLabelComponent"
+generated: true
+---
+
+
+## OrderStateLabelComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.ts" sourceLine="13" packageName="@vendure/admin-ui" />
+
+Displays the state of an order in a colored chip.
+
+*Example*
+
+```HTML
+<vdr-order-state-label [state]="order.state"></vdr-order-state-label>
+```
+
+```ts title="Signature"
+class OrderStateLabelComponent {
+    @Input() state: string;
+    chipColorType: void
+}
+```
+
+<div className="members-wrapper">
+
+### state
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### chipColorType
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>

+ 74 - 0
docs/docs/reference/admin-ui-api/components/product-variant-selector-component.mdx

@@ -0,0 +1,74 @@
+---
+title: "ProductVariantSelectorComponent"
+generated: true
+---
+
+
+## ProductVariantSelectorComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/product-variant-selector/product-variant-selector.component.ts" sourceLine="21" packageName="@vendure/admin-ui" />
+
+A component for selecting product variants via an autocomplete-style select input.
+
+*Example*
+
+```HTML
+<vdr-product-variant-selector
+  (productSelected)="selectResult($event)"></vdr-product-variant-selector>
+```
+
+```ts title="Signature"
+class ProductVariantSelectorComponent implements OnInit {
+    searchInput$ = new Subject<string>();
+    searchLoading = false;
+    searchResults$: Observable<ProductSelectorSearchQuery['search']['items']>;
+    @Output() productSelected = new EventEmitter<ProductSelectorSearchQuery['search']['items'][number]>();
+    constructor(dataService: DataService)
+    ngOnInit() => void;
+    selectResult(product?: ProductSelectorSearchQuery['search']['items'][number]) => ;
+}
+```
+* Implements: <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### searchInput$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### searchLoading
+
+<MemberInfo kind="property" type={``}   />
+
+
+### searchResults$
+
+<MemberInfo kind="property" type={`Observable<ProductSelectorSearchQuery['search']['items']>`}   />
+
+
+### productSelected
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => ProductVariantSelectorComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => void`}   />
+
+
+### selectResult
+
+<MemberInfo kind="method" type={`(product?: ProductSelectorSearchQuery['search']['items'][number]) => `}   />
+
+
+
+
+</div>

+ 107 - 0
docs/docs/reference/admin-ui-api/components/rich-text-editor-component.mdx

@@ -0,0 +1,107 @@
+---
+title: "RichTextEditorComponent"
+generated: true
+---
+
+
+## RichTextEditorComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.ts" sourceLine="32" packageName="@vendure/admin-ui" />
+
+A rich text (HTML) editor based on Prosemirror (https://prosemirror.net/)
+
+*Example*
+
+```HTML
+<vdr-rich-text-editor
+    [(ngModel)]="description"
+    label="Description"
+></vdr-rich-text-editor>
+```
+
+```ts title="Signature"
+class RichTextEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    @Input() label: string;
+    @HostBinding('class.readonly')
+    _readonly = false;
+    onChange: (val: any) => void;
+    onTouch: () => void;
+    constructor(changeDetector: ChangeDetectorRef, prosemirrorService: ProsemirrorService, viewContainerRef: ViewContainerRef, contextMenuService: ContextMenuService)
+    menuElement: HTMLDivElement | null
+    ngAfterViewInit() => ;
+    ngOnDestroy() => ;
+    registerOnChange(fn: any) => ;
+    registerOnTouched(fn: any) => ;
+    setDisabledState(isDisabled: boolean) => ;
+    writeValue(value: any) => ;
+}
+```
+* Implements: <code>ControlValueAccessor</code>, <code>AfterViewInit</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### _readonly
+
+<MemberInfo kind="property" type={``}   />
+
+
+### onChange
+
+<MemberInfo kind="property" type={`(val: any) => void`}   />
+
+
+### onTouch
+
+<MemberInfo kind="property" type={`() => void`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetector: ChangeDetectorRef, prosemirrorService: ProsemirrorService, viewContainerRef: ViewContainerRef, contextMenuService: ContextMenuService) => RichTextEditorComponent`}   />
+
+
+### menuElement
+
+<MemberInfo kind="property" type={`HTMLDivElement | null`}   />
+
+
+### ngAfterViewInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### registerOnChange
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### registerOnTouched
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### setDisabledState
+
+<MemberInfo kind="method" type={`(isDisabled: boolean) => `}   />
+
+
+### writeValue
+
+<MemberInfo kind="method" type={`(value: any) => `}   />
+
+
+
+
+</div>

+ 123 - 0
docs/docs/reference/admin-ui-api/components/zone-selector-component.mdx

@@ -0,0 +1,123 @@
+---
+title: "ZoneSelectorComponent"
+generated: true
+---
+
+
+## ZoneSelectorComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/zone-selector/zone-selector.component.ts" sourceLine="40" packageName="@vendure/admin-ui" />
+
+A form control for selecting zones.
+
+```ts title="Signature"
+class ZoneSelectorComponent implements ControlValueAccessor {
+    @Output() selectedValuesChange = new EventEmitter<Zone>();
+    @Input() readonly = false;
+    @Input() transformControlValueAccessorValue: (value: Zone | undefined) => any = value => value?.id;
+    selectedId$ = new Subject<string>();
+    onChangeFn: (val: any) => void;
+    onTouchFn: () => void;
+    disabled = false;
+    value: string | Zone;
+    zones$ = this.dataService
+        .query(GetZoneSelectorListDocument, { options: { take: 999 } })
+        .mapSingle(result => result.zones.items);
+    constructor(dataService: DataService, changeDetectorRef: ChangeDetectorRef)
+    onChange(selected: Zone) => ;
+    registerOnChange(fn: any) => ;
+    registerOnTouched(fn: any) => ;
+    setDisabledState(isDisabled: boolean) => void;
+    focus() => ;
+    writeValue(obj: string | Zone | null) => void;
+}
+```
+* Implements: <code>ControlValueAccessor</code>
+
+
+
+<div className="members-wrapper">
+
+### selectedValuesChange
+
+<MemberInfo kind="property" type={``}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={``}   />
+
+
+### transformControlValueAccessorValue
+
+<MemberInfo kind="property" type={`(value: <a href='/reference/typescript-api/entities/zone#zone'>Zone</a> | undefined) => any`}   />
+
+
+### selectedId$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### onChangeFn
+
+<MemberInfo kind="property" type={`(val: any) => void`}   />
+
+
+### onTouchFn
+
+<MemberInfo kind="property" type={`() => void`}   />
+
+
+### disabled
+
+<MemberInfo kind="property" type={``}   />
+
+
+### value
+
+<MemberInfo kind="property" type={`string | <a href='/reference/typescript-api/entities/zone#zone'>Zone</a>`}   />
+
+
+### zones$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef: ChangeDetectorRef) => ZoneSelectorComponent`}   />
+
+
+### onChange
+
+<MemberInfo kind="method" type={`(selected: <a href='/reference/typescript-api/entities/zone#zone'>Zone</a>) => `}   />
+
+
+### registerOnChange
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### registerOnTouched
+
+<MemberInfo kind="method" type={`(fn: any) => `}   />
+
+
+### setDisabledState
+
+<MemberInfo kind="method" type={`(isDisabled: boolean) => void`}   />
+
+
+### focus
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### writeValue
+
+<MemberInfo kind="method" type={`(obj: string | <a href='/reference/typescript-api/entities/zone#zone'>Zone</a> | null) => void`}   />
+
+
+
+
+</div>

+ 40 - 0
docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component-config.mdx

@@ -0,0 +1,40 @@
+---
+title: "CustomDetailComponentConfig"
+generated: true
+---
+
+
+## CustomDetailComponentConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-detail-component/custom-detail-component-types.ts" sourceLine="25" packageName="@vendure/admin-ui" />
+
+Configures a <a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a> to be placed in the given location.
+
+```ts title="Signature"
+interface CustomDetailComponentConfig {
+    locationId: CustomDetailComponentLocationId;
+    component: Type<CustomDetailComponent>;
+    providers?: Provider[];
+}
+```
+
+<div className="members-wrapper">
+
+### locationId
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component-location-id#customdetailcomponentlocationid'>CustomDetailComponentLocationId</a>`}   />
+
+
+### component
+
+<MemberInfo kind="property" type={`Type<<a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a>>`}   />
+
+
+### providers
+
+<MemberInfo kind="property" type={`Provider[]`}   />
+
+
+
+
+</div>

+ 35 - 0
docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component-location-id.mdx

@@ -0,0 +1,35 @@
+---
+title: "CustomDetailComponentLocationId"
+generated: true
+---
+
+
+## CustomDetailComponentLocationId
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/component-registry-types.ts" sourceLine="115" packageName="@vendure/admin-ui" />
+
+The valid locations for embedding a <a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a>.
+
+```ts title="Signature"
+type CustomDetailComponentLocationId = | 'administrator-profile'
+    | 'administrator-detail'
+    | 'channel-detail'
+    | 'collection-detail'
+    | 'country-detail'
+    | 'customer-detail'
+    | 'customer-group-detail'
+    | 'draft-order-detail'
+    | 'facet-detail'
+    | 'global-settings-detail'
+    | 'order-detail'
+    | 'payment-method-detail'
+    | 'product-detail'
+    | 'product-variant-detail'
+    | 'promotion-detail'
+    | 'seller-detail'
+    | 'shipping-method-detail'
+    | 'stock-location-detail'
+    | 'tax-category-detail'
+    | 'tax-rate-detail'
+    | 'zone-detail'
+```

+ 35 - 0
docs/docs/reference/admin-ui-api/custom-detail-components/custom-detail-component.mdx

@@ -0,0 +1,35 @@
+---
+title: "CustomDetailComponent"
+generated: true
+---
+
+
+## CustomDetailComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-detail-component/custom-detail-component-types.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+CustomDetailComponents allow any arbitrary Angular components to be embedded in entity detail
+pages of the Admin UI.
+
+```ts title="Signature"
+interface CustomDetailComponent {
+    entity$: Observable<any>;
+    detailForm: UntypedFormGroup;
+}
+```
+
+<div className="members-wrapper">
+
+### entity$
+
+<MemberInfo kind="property" type={`Observable<any>`}   />
+
+
+### detailForm
+
+<MemberInfo kind="property" type={`UntypedFormGroup`}   />
+
+
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/custom-detail-components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Custom Detail Components"
+generated: true
+---

+ 68 - 0
docs/docs/reference/admin-ui-api/custom-detail-components/register-custom-detail-component.mdx

@@ -0,0 +1,68 @@
+---
+title: "RegisterCustomDetailComponent"
+generated: true
+---
+
+
+## registerCustomDetailComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-custom-detail-component.ts" sourceLine="57" packageName="@vendure/admin-ui" />
+
+Registers a <a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a> to be placed in a given location. This allows you
+to embed any type of custom Angular component in the entity detail pages of the Admin UI.
+
+*Example*
+
+```ts
+import { Component, OnInit } from '@angular/core';
+import { switchMap } from 'rxjs';
+import { FormGroup } from '@angular/forms';
+import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
+import {
+    DataService,
+    SharedModule,
+    CustomDetailComponent,
+    registerCustomDetailComponent,
+    GetProductWithVariants
+} from '@vendure/admin-ui/core';
+
+@Component({
+    template: `{{ extraInfo$ | async | json }}`,
+    standalone: true,
+    imports: [SharedModule],
+})
+export class ProductInfoComponent implements CustomDetailComponent, OnInit {
+    // These two properties are provided by Vendure and will vary
+    // depending on the particular detail page you are embedding this
+    // component into.
+    entity$: Observable<GetProductWithVariants.Product>
+    detailForm: FormGroup;
+
+    extraInfo$: Observable<any>;
+
+    constructor(private cmsDataService: CmsDataService) {}
+
+    ngOnInit() {
+        this.extraInfo$ = this.entity$.pipe(
+            switchMap(entity => this.cmsDataService.getDataFor(entity.id))
+        );
+    }
+}
+
+export default [
+    registerCustomDetailComponent({
+        locationId: 'product-detail',
+        component: ProductInfoComponent,
+    }),
+];
+```
+
+```ts title="Signature"
+function registerCustomDetailComponent(config: CustomDetailComponentConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component-config#customdetailcomponentconfig'>CustomDetailComponentConfig</a>`} />
+

+ 31 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/customer-history-entry-component.mdx

@@ -0,0 +1,31 @@
+---
+title: "CustomerHistoryEntryComponent"
+generated: true
+---
+
+
+## CustomerHistoryEntryComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-history-entry-component/history-entry-component-types.ts" sourceLine="64" packageName="@vendure/admin-ui" since="1.9.0" />
+
+Used to implement a <a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a> which requires access to the Customer object.
+
+```ts title="Signature"
+interface CustomerHistoryEntryComponent extends HistoryEntryComponent {
+    customer: CustomerFragment;
+}
+```
+* Extends: <code><a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### customer
+
+<MemberInfo kind="property" type={`CustomerFragment`}   />
+
+
+
+
+</div>

+ 56 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/history-entry-component.mdx

@@ -0,0 +1,56 @@
+---
+title: "HistoryEntryComponent"
+generated: true
+---
+
+
+## HistoryEntryComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-history-entry-component/history-entry-component-types.ts" sourceLine="16" packageName="@vendure/admin-ui" since="1.9.0" />
+
+This interface should be implemented by components intended to display a history entry in the
+Order or Customer history timeline. If the component needs access to the Order or Customer object itself,
+you should implement <a href='/reference/admin-ui-api/custom-history-entry-components/order-history-entry-component#orderhistoryentrycomponent'>OrderHistoryEntryComponent</a> or <a href='/reference/admin-ui-api/custom-history-entry-components/customer-history-entry-component#customerhistoryentrycomponent'>CustomerHistoryEntryComponent</a> respectively.
+
+```ts title="Signature"
+interface HistoryEntryComponent {
+    entry: TimelineHistoryEntry;
+    getDisplayType: (entry: TimelineHistoryEntry) => TimelineDisplayType;
+    isFeatured: (entry: TimelineHistoryEntry) => boolean;
+    getName?: (entry: TimelineHistoryEntry) => string | undefined;
+    getIconShape?: (entry: TimelineHistoryEntry) => string | string[] | undefined;
+}
+```
+
+<div className="members-wrapper">
+
+### entry
+
+<MemberInfo kind="property" type={`TimelineHistoryEntry`}   />
+
+The HistoryEntry data.
+### getDisplayType
+
+<MemberInfo kind="property" type={`(entry: TimelineHistoryEntry) => TimelineDisplayType`}   />
+
+Defines whether this entry is highlighted with a "success", "error" etc. color.
+### isFeatured
+
+<MemberInfo kind="property" type={`(entry: TimelineHistoryEntry) => boolean`}   />
+
+Featured entries are always expanded. Non-featured entries start of collapsed and can be clicked
+to expand.
+### getName
+
+<MemberInfo kind="property" type={`(entry: TimelineHistoryEntry) => string | undefined`}   />
+
+Returns the name of the person who did this action. For example, it could be the Customer's name
+or "Administrator".
+### getIconShape
+
+<MemberInfo kind="property" type={`(entry: TimelineHistoryEntry) => string | string[] | undefined`}   />
+
+Optional Clarity icon shape to display with the entry. Examples: `'note'`, `['success-standard', 'is-solid']`
+
+
+</div>

+ 34 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/history-entry-config.mdx

@@ -0,0 +1,34 @@
+---
+title: "HistoryEntryConfig"
+generated: true
+---
+
+
+## HistoryEntryConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-history-entry-component/history-entry-component-types.ts" sourceLine="75" packageName="@vendure/admin-ui" since="1.9.0" />
+
+Configuration for registering a custom <a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a>.
+
+```ts title="Signature"
+interface HistoryEntryConfig {
+    type: string;
+    component: Type<HistoryEntryComponent>;
+}
+```
+
+<div className="members-wrapper">
+
+### type
+
+<MemberInfo kind="property" type={`string`}   />
+
+The type should correspond to the custom HistoryEntryType string.
+### component
+
+<MemberInfo kind="property" type={`Type<<a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a>>`}   />
+
+The component to be rendered for this history entry type.
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Custom History Entry Components"
+generated: true
+---

+ 31 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/order-history-entry-component.mdx

@@ -0,0 +1,31 @@
+---
+title: "OrderHistoryEntryComponent"
+generated: true
+---
+
+
+## OrderHistoryEntryComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/custom-history-entry-component/history-entry-component-types.ts" sourceLine="53" packageName="@vendure/admin-ui" since="1.9.0" />
+
+Used to implement a <a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a> which requires access to the Order object.
+
+```ts title="Signature"
+interface OrderHistoryEntryComponent extends HistoryEntryComponent {
+    order: OrderDetailFragment;
+}
+```
+* Extends: <code><a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### order
+
+<MemberInfo kind="property" type={`OrderDetailFragment`}   />
+
+
+
+
+</div>

+ 78 - 0
docs/docs/reference/admin-ui-api/custom-history-entry-components/register-history-entry-component.mdx

@@ -0,0 +1,78 @@
+---
+title: "RegisterHistoryEntryComponent"
+generated: true
+---
+
+
+## registerHistoryEntryComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-history-entry-component.ts" sourceLine="68" packageName="@vendure/admin-ui" since="1.9.0" />
+
+Registers a <a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-component#historyentrycomponent'>HistoryEntryComponent</a> for displaying history entries in the Order/Customer
+history timeline.
+
+*Example*
+
+```ts
+import { Component } from '@angular/core';
+import {
+    CustomerFragment,
+    CustomerHistoryEntryComponent,
+    registerHistoryEntryComponent,
+    SharedModule,
+    TimelineDisplayType,
+    TimelineHistoryEntry,
+} from '@vendure/admin-ui/core';
+
+@Component({
+    selector: 'tax-id-verification-component',
+    template: `
+        <div *ngIf="entry.data.valid">
+          Tax ID <strong>{{ entry.data.taxId }}</strong> was verified
+          <vdr-history-entry-detail *ngIf="entry.data">
+            <vdr-object-tree [value]="entry.data"></vdr-object-tree>
+          </vdr-history-entry-detail>
+        </div>
+        <div *ngIf="entry.data.valid">Tax ID {{ entry.data.taxId }} could not be verified</div>
+    `,
+    standalone: true,
+    imports: [SharedModule],
+})
+class TaxIdHistoryEntryComponent implements CustomerHistoryEntryComponent {
+    entry: TimelineHistoryEntry;
+    customer: CustomerFragment;
+
+    getDisplayType(entry: TimelineHistoryEntry): TimelineDisplayType {
+        return entry.data.valid ? 'success' : 'error';
+    }
+
+    getName(entry: TimelineHistoryEntry): string {
+        return 'Tax ID Verification Plugin';
+    }
+
+    isFeatured(entry: TimelineHistoryEntry): boolean {
+        return true;
+    }
+
+    getIconShape(entry: TimelineHistoryEntry) {
+        return entry.data.valid ? 'check-circle' : 'exclamation-circle';
+    }
+}
+
+export default [
+    registerHistoryEntryComponent({
+        type: 'CUSTOMER_TAX_ID_VERIFICATION',
+        component: TaxIdHistoryEntryComponent,
+    }),
+];
+```
+
+```ts title="Signature"
+function registerHistoryEntryComponent(config: HistoryEntryConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/custom-history-entry-components/history-entry-config#historyentryconfig'>HistoryEntryConfig</a>`} />
+

+ 1033 - 0
docs/docs/reference/admin-ui-api/custom-input-components/default-inputs.mdx

@@ -0,0 +1,1033 @@
+---
+title: "Default Inputs"
+generated: true
+---
+
+
+## BooleanFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/boolean-form-input/boolean-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+A checkbox input. The default input component for `boolean` fields.
+
+```ts title="Signature"
+class BooleanFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'boolean-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'boolean-form-input'>;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'boolean-form-input'>`}   />
+
+
+
+
+</div>
+
+
+## HtmlEditorFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/html-editor-form-input.component.ts" sourceLine="23" packageName="@vendure/admin-ui" />
+
+A JSON editor input with syntax highlighting and error detection. Works well
+with `text` type fields.
+
+```ts title="Signature"
+class HtmlEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
+    static readonly id: DefaultFormComponentId = 'html-editor-form-input';
+    constructor(changeDetector: ChangeDetectorRef)
+    ngOnInit() => ;
+}
+```
+* Extends: <code>BaseCodeEditorFormInputComponent</code>
+
+
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>AfterViewInit</code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>
+
+
+## JsonEditorFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/json-editor-form-input.component.ts" sourceLine="33" packageName="@vendure/admin-ui" />
+
+A JSON editor input with syntax highlighting and error detection. Works well
+with `text` type fields.
+
+```ts title="Signature"
+class JsonEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
+    static readonly id: DefaultFormComponentId = 'json-editor-form-input';
+    constructor(changeDetector: ChangeDetectorRef)
+    ngOnInit() => ;
+}
+```
+* Extends: <code>BaseCodeEditorFormInputComponent</code>
+
+
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>AfterViewInit</code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>
+
+
+## CombinationModeFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/combination-mode-form-input/combination-mode-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui" />
+
+A special input used to display the "Combination mode" AND/OR toggle.
+
+```ts title="Signature"
+class CombinationModeFormInputComponent implements FormInputComponent, OnInit {
+    static readonly id: DefaultFormComponentId = 'combination-mode-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'combination-mode-form-input'>;
+    selectable$: Observable<boolean>;
+    constructor(configurableInputComponent: ConfigurableInputComponent)
+    ngOnInit() => ;
+    setCombinationModeAnd() => ;
+    setCombinationModeOr() => ;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'combination-mode-form-input'>`}   />
+
+
+### selectable$
+
+<MemberInfo kind="property" type={`Observable<boolean>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### setCombinationModeAnd
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### setCombinationModeOr
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>
+
+
+## CurrencyFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/currency-form-input/currency-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui" />
+
+An input for monetary values. Should be used with `int` type fields.
+
+```ts title="Signature"
+class CurrencyFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'currency-form-input';
+    @Input() readonly: boolean;
+    formControl: UntypedFormControl;
+    currencyCode$: Observable<CurrencyCode>;
+    config: DefaultFormComponentConfig<'currency-form-input'>;
+    constructor(dataService: DataService)
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### currencyCode$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/currency-code#currencycode'>CurrencyCode</a>>`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'currency-form-input'>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => CurrencyFormInputComponent`}   />
+
+
+
+
+</div>
+
+
+## CustomerGroupFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.ts" sourceLine="20" packageName="@vendure/admin-ui" />
+
+Allows the selection of a Customer via an autocomplete select input.
+Should be used with `ID` type fields which represent Customer IDs.
+
+```ts title="Signature"
+class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {
+    static readonly id: DefaultFormComponentId = 'customer-group-form-input';
+    @Input() readonly: boolean;
+    formControl: FormControl<string | { id: string }>;
+    customerGroups$: Observable<GetCustomerGroupsQuery['customerGroups']['items']>;
+    config: DefaultFormComponentConfig<'customer-group-form-input'>;
+    constructor(dataService: DataService)
+    ngOnInit() => ;
+    selectGroup(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => ;
+    compareWith(o1: T, o2: T) => ;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`FormControl<string | { id: string }>`}   />
+
+
+### customerGroups$
+
+<MemberInfo kind="property" type={`Observable<GetCustomerGroupsQuery['customerGroups']['items']>`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'customer-group-form-input'>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => CustomerGroupFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### selectGroup
+
+<MemberInfo kind="method" type={`(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => `}   />
+
+
+### compareWith
+
+<MemberInfo kind="method" type={`(o1: T, o2: T) => `}   />
+
+
+
+
+</div>
+
+
+## DateFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/date-form-input/date-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Allows selection of a datetime. Default input for `datetime` type fields.
+
+```ts title="Signature"
+class DateFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'date-form-input';
+    @Input() readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'date-form-input'>;
+    min: void
+    max: void
+    yearRange: void
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'date-form-input'>`}   />
+
+
+### min
+
+<MemberInfo kind="property" type={``}   />
+
+
+### max
+
+<MemberInfo kind="property" type={``}   />
+
+
+### yearRange
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>
+
+
+## FacetValueFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.ts" sourceLine="16" packageName="@vendure/admin-ui" />
+
+Allows the selection of multiple FacetValues via an autocomplete select input.
+Should be used with `ID` type **list** fields which represent FacetValue IDs.
+
+```ts title="Signature"
+class FacetValueFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'facet-value-form-input';
+    readonly isListInput = true;
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: InputComponentConfig;
+    valueTransformFn = (values: FacetValueFragment[]) => {
+        const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
+        if (isUsedInConfigArg) {
+            return JSON.stringify(values.map(s => s.id));
+        } else {
+            return values;
+        }
+    };
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### isListInput
+
+<MemberInfo kind="property" type={``}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`InputComponentConfig`}   />
+
+
+### valueTransformFn
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>
+
+
+## NumberFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/number-form-input/number-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Displays a number input. Default input for `int` and `float` type fields.
+
+```ts title="Signature"
+class NumberFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'number-form-input';
+    @Input() readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'number-form-input'>;
+    prefix: void
+    suffix: void
+    min: void
+    max: void
+    step: void
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'number-form-input'>`}   />
+
+
+### prefix
+
+<MemberInfo kind="property" type={``}   />
+
+
+### suffix
+
+<MemberInfo kind="property" type={``}   />
+
+
+### min
+
+<MemberInfo kind="property" type={``}   />
+
+
+### max
+
+<MemberInfo kind="property" type={``}   />
+
+
+### step
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>
+
+
+## PasswordFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/password-form-input/password-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Displays a password text input. Should be used with `string` type fields.
+
+```ts title="Signature"
+class PasswordFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'password-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: InputComponentConfig;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`InputComponentConfig`}   />
+
+
+
+
+</div>
+
+
+## ProductSelectorFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component.ts" sourceLine="20" packageName="@vendure/admin-ui" />
+
+Allows the selection of multiple ProductVariants via an autocomplete select input.
+Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+
+```ts title="Signature"
+class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {
+    static readonly id: DefaultFormComponentId = 'product-selector-form-input';
+    readonly isListInput = true;
+    readonly: boolean;
+    formControl: FormControl<Array<string | { id: string }>>;
+    config: DefaultFormComponentUiConfig<'product-selector-form-input'>;
+    selection$: Observable<Array<GetProductVariantQuery['productVariant']>>;
+    constructor(dataService: DataService)
+    ngOnInit() => ;
+    addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ;
+    removeProductVariant(id: string) => ;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### isListInput
+
+<MemberInfo kind="property" type={``}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`FormControl<Array<string | { id: string }>>`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentUiConfig<'product-selector-form-input'>`}   />
+
+
+### selection$
+
+<MemberInfo kind="property" type={`Observable<Array<GetProductVariantQuery['productVariant']>>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => ProductSelectorFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### addProductVariant
+
+<MemberInfo kind="method" type={`(product: ProductSelectorSearchQuery['search']['items'][number]) => `}   />
+
+
+### removeProductVariant
+
+<MemberInfo kind="method" type={`(id: string) => `}   />
+
+
+
+
+</div>
+
+
+## RelationFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/relation-form-input/relation-form-input.component.ts" sourceLine="17" packageName="@vendure/admin-ui" />
+
+The default input component for `relation` type custom fields. Allows the selection
+of a ProductVariant, Product, Customer or Asset. For other entity types, a custom
+implementation will need to be defined. See <a href='/reference/admin-ui-api/custom-input-components/register-form-input-component#registerforminputcomponent'>registerFormInputComponent</a>.
+
+```ts title="Signature"
+class RelationFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'relation-form-input';
+    @Input() readonly: boolean;
+    formControl: UntypedFormControl;
+    config: RelationCustomFieldConfig;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`RelationCustomFieldConfig`}   />
+
+
+
+
+</div>
+
+
+## RichTextFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Uses the <a href='/reference/admin-ui-api/components/rich-text-editor-component#richtexteditorcomponent'>RichTextEditorComponent</a> as in input for `text` type fields.
+
+```ts title="Signature"
+class RichTextFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'rich-text-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'rich-text-form-input'>;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'rich-text-form-input'>`}   />
+
+
+
+
+</div>
+
+
+## SelectFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Uses a select input to allow the selection of a string value. Should be used with
+`string` type fields with options.
+
+```ts title="Signature"
+class SelectFormInputComponent implements FormInputComponent, OnInit {
+    static readonly id: DefaultFormComponentId = 'select-form-input';
+    @Input() readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
+    uiLanguage$: Observable<LanguageCode>;
+    options: void
+    constructor(dataService: DataService)
+    ngOnInit() => ;
+    trackByFn(index: number, item: any) => ;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'select-form-input'> &#38; CustomFieldConfigFragment`}   />
+
+
+### uiLanguage$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>>`}   />
+
+
+### options
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => SelectFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### trackByFn
+
+<MemberInfo kind="method" type={`(index: number, item: any) => `}   />
+
+
+
+
+</div>
+
+
+## StructFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/struct-form-input/struct-form-input.component.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+A checkbox input. The default input component for `boolean` fields.
+
+```ts title="Signature"
+class StructFormInputComponent implements FormInputComponent, OnInit, OnDestroy {
+    static readonly id: DefaultFormComponentId = 'struct-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'struct-form-input'>;
+    uiLanguage$: Observable<LanguageCode>;
+    protected structFormGroup = new FormGroup({});
+    protected fields: Array<{
+        def: StructCustomFieldFragment['fields'][number];
+        formControl: FormControl;
+    }>;
+    constructor(dataService: DataService)
+    ngOnInit() => ;
+    ngOnDestroy() => ;
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>, <code>OnInit</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'struct-form-input'>`}   />
+
+
+### uiLanguage$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>>`}   />
+
+
+### structFormGroup
+
+<MemberInfo kind="property" type={``}   />
+
+
+### fields
+
+<MemberInfo kind="property" type={`Array<{         def: StructCustomFieldFragment['fields'][number];         formControl: FormControl;     }>`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => StructFormInputComponent`}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>
+
+
+## TextFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/text-form-input/text-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+
+```ts title="Signature"
+class TextFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'text-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'text-form-input'>;
+    prefix: void
+    suffix: void
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'text-form-input'>`}   />
+
+
+### prefix
+
+<MemberInfo kind="property" type={``}   />
+
+
+### suffix
+
+<MemberInfo kind="property" type={``}   />
+
+
+
+
+</div>
+
+
+## TextareaFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/textarea-form-input/textarea-form-input.component.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Uses textarea form input. This is the default input for `text` type fields.
+
+```ts title="Signature"
+class TextareaFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'textarea-form-input';
+    readonly: boolean;
+    formControl: UntypedFormControl;
+    config: DefaultFormComponentConfig<'textarea-form-input'>;
+    spellcheck: boolean
+}
+```
+* Implements: <code><a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a></code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/configurable-operation-def/default-form-component-id#defaultformcomponentid'>DefaultFormComponentId</a>`}   />
+
+
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### formControl
+
+<MemberInfo kind="property" type={`UntypedFormControl`}   />
+
+
+### config
+
+<MemberInfo kind="property" type={`DefaultFormComponentConfig<'textarea-form-input'>`}   />
+
+
+### spellcheck
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+
+
+</div>

+ 55 - 0
docs/docs/reference/admin-ui-api/custom-input-components/form-input-component.mdx

@@ -0,0 +1,55 @@
+---
+title: "FormInputComponent"
+generated: true
+---
+
+
+## FormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/component-registry-types.ts" sourceLine="11" packageName="@vendure/admin-ui" />
+
+This interface should be implemented by any component being used as a custom input. For example,
+inputs for custom fields, or for configurable arguments.
+
+```ts title="Signature"
+interface FormInputComponent<C = InputComponentConfig> {
+    isListInput?: boolean;
+    readonly: boolean;
+    formControl: FormControl;
+    config: C;
+}
+```
+
+<div className="members-wrapper">
+
+### isListInput
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+Should be set to `true` if this component is designed to handle lists.
+If `true` then the formControl value will be an array of all the
+values in the list.
+### readonly
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+This is set by the Admin UI when consuming this component, indicating that the
+component should be rendered in a read-only state.
+### formControl
+
+<MemberInfo kind="property" type={`FormControl`}   />
+
+This controls the actual value of the form item. The current value is available
+as `this.formControl.value`, and an Observable stream of value changes is available
+as `this.formControl.valueChanges`. To update the value, use `.setValue(val)` and then
+`.markAsDirty()`.
+
+Full documentation can be found in the [Angular docs](https://angular.io/api/forms/FormControl).
+### config
+
+<MemberInfo kind="property" type={`C`}   />
+
+The `config` property contains the full configuration object of the custom field or configurable argument.
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/custom-input-components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Custom Input Components"
+generated: true
+---

+ 70 - 0
docs/docs/reference/admin-ui-api/custom-input-components/register-form-input-component.mdx

@@ -0,0 +1,70 @@
+---
+title: "RegisterFormInputComponent"
+generated: true
+---
+
+
+## registerFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-form-input-component.ts" sourceLine="53" packageName="@vendure/admin-ui" />
+
+Registers a custom FormInputComponent which can be used to control the argument inputs
+of a <a href='/reference/typescript-api/configurable-operation-def/#configurableoperationdef'>ConfigurableOperationDef</a> (e.g. CollectionFilter, ShippingMethod etc.) or for
+a custom field.
+
+*Example*
+
+```ts title="providers.ts"
+import { registerFormInputComponent } from '@vendure/admin-ui/core';
+
+export default [
+    // highlight-next-line
+    registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+];
+```
+
+This input component can then be used in a custom field:
+
+*Example*
+
+```ts title="src/vendure-config.ts"
+import { VendureConfig } from '@vendure/core';
+
+const config: VendureConfig = {
+  // ...
+  customFields: {
+    ProductVariant: [
+      {
+        name: 'rrp',
+        type: 'int',
+        // highlight-next-line
+        ui: { component: 'my-custom-input' },
+      },
+    ]
+  }
+}
+```
+
+or with an argument of a <a href='/reference/typescript-api/configurable-operation-def/#configurableoperationdef'>ConfigurableOperationDef</a>:
+
+*Example*
+
+```ts
+args: {
+  rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+}
+```
+
+```ts title="Signature"
+function registerFormInputComponent(id: string, component: Type<FormInputComponent>): void
+```
+Parameters
+
+### id
+
+<MemberInfo kind="parameter" type={`string`} />
+
+### component
+
+<MemberInfo kind="parameter" type={`Type<<a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a>>`} />
+

+ 31 - 0
docs/docs/reference/admin-ui-api/custom-table-components/custom-column-component.mdx

@@ -0,0 +1,31 @@
+---
+title: "CustomColumnComponent"
+generated: true
+---
+
+
+## CustomColumnComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-component.service.ts" sourceLine="44" packageName="@vendure/admin-ui" />
+
+Components which are to be used to render custom cells in a data table should implement this interface.
+
+The `rowItem` property is the data object for the row, e.g. the `Product` object if used
+in the `product-list` table.
+
+```ts title="Signature"
+interface CustomColumnComponent {
+    rowItem: any;
+}
+```
+
+<div className="members-wrapper">
+
+### rowItem
+
+<MemberInfo kind="property" type={`any`}   />
+
+
+
+
+</div>

+ 47 - 0
docs/docs/reference/admin-ui-api/custom-table-components/data-table-component-config.mdx

@@ -0,0 +1,47 @@
+---
+title: "DataTableComponentConfig"
+generated: true
+---
+
+
+## DataTableComponentConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-component.service.ts" sourceLine="54" packageName="@vendure/admin-ui" />
+
+Configures a <a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a> to be placed in the given location.
+
+```ts title="Signature"
+interface DataTableComponentConfig {
+    tableId: DataTableLocationId;
+    columnId: DataTableColumnId;
+    component: Type<CustomColumnComponent>;
+    providers?: Provider[];
+}
+```
+
+<div className="members-wrapper">
+
+### tableId
+
+<MemberInfo kind="property" type={`DataTableLocationId`}   />
+
+The location in the UI where the custom component should be placed.
+### columnId
+
+<MemberInfo kind="property" type={`DataTableColumnId`}   />
+
+The column in the table where the custom component should be placed.
+### component
+
+<MemberInfo kind="property" type={`Type<<a href='/reference/admin-ui-api/custom-table-components/custom-column-component#customcolumncomponent'>CustomColumnComponent</a>>`}   />
+
+The component to render in the table cell. This component should implement the
+<a href='/reference/admin-ui-api/custom-table-components/custom-column-component#customcolumncomponent'>CustomColumnComponent</a> interface.
+### providers
+
+<MemberInfo kind="property" type={`Provider[]`}   />
+
+
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/custom-table-components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Custom Table Components"
+generated: true
+---

+ 54 - 0
docs/docs/reference/admin-ui-api/custom-table-components/register-data-table-component.mdx

@@ -0,0 +1,54 @@
+---
+title: "RegisterDataTableComponent"
+generated: true
+---
+
+
+## registerDataTableComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-data-table-component.ts" sourceLine="45" packageName="@vendure/admin-ui" />
+
+Allows you to override the default component used to render the data of a particular column in a DataTable.
+The component should implement the <a href='/reference/admin-ui-api/custom-table-components/custom-column-component#customcolumncomponent'>CustomColumnComponent</a> interface. The tableId and columnId can
+be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
+
+*Example*
+
+```ts title="components/custom-table.component.ts"
+import { Component, Input } from '@angular/core';
+import { CustomColumnComponent } from '@vendure/admin-ui/core';
+
+@Component({
+    selector: 'custom-slug-component',
+    template: `
+        <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a>
+    `,
+    standalone: true,
+})
+export class CustomTableComponent implements CustomColumnComponent {
+    @Input() rowItem: any;
+}
+```
+
+```ts title="providers.ts"
+import { registerDataTableComponent } from '@vendure/admin-ui/core';
+import { CustomTableComponent } from './components/custom-table.component';
+
+export default [
+    registerDataTableComponent({
+        component: CustomTableComponent,
+        tableId: 'product-list',
+        columnId: 'slug',
+    }),
+];
+```
+
+```ts title="Signature"
+function registerDataTableComponent(config: DataTableComponentConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/custom-table-components/data-table-component-config#datatablecomponentconfig'>DataTableComponentConfig</a>`} />
+

+ 59 - 0
docs/docs/reference/admin-ui-api/dashboard-widgets/dashboard-widget-config.mdx

@@ -0,0 +1,59 @@
+---
+title: "DashboardWidgetConfig"
+generated: true
+---
+
+
+## DashboardWidgetConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts" sourceLine="11" packageName="@vendure/admin-ui" />
+
+A configuration object for a dashboard widget.
+
+```ts title="Signature"
+interface DashboardWidgetConfig {
+    loadComponent: () => Promise<Type<any>> | Type<any>;
+    title?: string;
+    supportedWidths?: DashboardWidgetWidth[];
+    requiresPermissions?: string[];
+}
+```
+
+<div className="members-wrapper">
+
+### loadComponent
+
+<MemberInfo kind="property" type={`() => Promise<Type<any>> | Type<any>`}   />
+
+Used to specify the widget component. Supports both eager- and lazy-loading.
+
+*Example*
+
+```ts
+// eager-loading
+loadComponent: () => MyWidgetComponent,
+
+// lazy-loading
+loadComponent: () => import('./path-to/widget.component').then(m => m.MyWidgetComponent),
+```
+### title
+
+<MemberInfo kind="property" type={`string`}   />
+
+The title of the widget. Can be a translation token as it will get passed
+through the `translate` pipe.
+### supportedWidths
+
+<MemberInfo kind="property" type={`DashboardWidgetWidth[]`}   />
+
+The supported widths of the widget, in terms of a Bootstrap-style 12-column grid.
+If omitted, then it is assumed the widget supports all widths.
+### requiresPermissions
+
+<MemberInfo kind="property" type={`string[]`}   />
+
+If set, the widget will only be displayed if the current user has all the
+specified permissions.
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/dashboard-widgets/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Dashboard Widgets"
+generated: true
+---

+ 26 - 0
docs/docs/reference/admin-ui-api/dashboard-widgets/register-dashboard-widget.mdx

@@ -0,0 +1,26 @@
+---
+title: "RegisterDashboardWidget"
+generated: true
+---
+
+
+## registerDashboardWidget
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-dashboard-widget.ts" sourceLine="16" packageName="@vendure/admin-ui" />
+
+Registers a dashboard widget. Once registered, the widget can be set as part of the default
+(using <a href='/reference/admin-ui-api/dashboard-widgets/set-dashboard-widget-layout#setdashboardwidgetlayout'>setDashboardWidgetLayout</a>).
+
+```ts title="Signature"
+function registerDashboardWidget(id: string, config: DashboardWidgetConfig): void
+```
+Parameters
+
+### id
+
+<MemberInfo kind="parameter" type={`string`} />
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/dashboard-widgets/dashboard-widget-config#dashboardwidgetconfig'>DashboardWidgetConfig</a>`} />
+

+ 21 - 0
docs/docs/reference/admin-ui-api/dashboard-widgets/set-dashboard-widget-layout.mdx

@@ -0,0 +1,21 @@
+---
+title: "SetDashboardWidgetLayout"
+generated: true
+---
+
+
+## setDashboardWidgetLayout
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/register-dashboard-widget.ts" sourceLine="31" packageName="@vendure/admin-ui" />
+
+Sets the default widget layout for the Admin UI dashboard.
+
+```ts title="Signature"
+function setDashboardWidgetLayout(layoutDef: WidgetLayoutDefinition): void
+```
+Parameters
+
+### layoutDef
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/dashboard-widgets/widget-layout-definition#widgetlayoutdefinition'>WidgetLayoutDefinition</a>`} />
+

+ 15 - 0
docs/docs/reference/admin-ui-api/dashboard-widgets/widget-layout-definition.mdx

@@ -0,0 +1,15 @@
+---
+title: "WidgetLayoutDefinition"
+generated: true
+---
+
+
+## WidgetLayoutDefinition
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts" sourceLine="51" packageName="@vendure/admin-ui" />
+
+A configuration object for the default dashboard widget layout.
+
+```ts title="Signature"
+type WidgetLayoutDefinition = Array<{ id: string; width: DashboardWidgetWidth }>
+```

+ 40 - 0
docs/docs/reference/admin-ui-api/directives/if-multichannel-directive.mdx

@@ -0,0 +1,40 @@
+---
+title: "IfMultichannelDirective"
+generated: true
+---
+
+
+## IfMultichannelDirective
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/directives/if-multichannel.directive.ts" sourceLine="21" packageName="@vendure/admin-ui" />
+
+Structural directive that displays the given element if the Vendure instance has multiple channels
+configured.
+
+*Example*
+
+```html
+<div *vdrIfMultichannel class="channel-selector">
+  <!-- ... -->
+</ng-container>
+```
+
+```ts title="Signature"
+class IfMultichannelDirective extends IfDirectiveBase<[]> {
+    constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<any>, dataService: DataService)
+}
+```
+* Extends: <code>IfDirectiveBase<[]></code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(_viewContainer: ViewContainerRef, templateRef: TemplateRef<any>, dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>) => IfMultichannelDirective`}   />
+
+
+
+
+</div>

+ 42 - 0
docs/docs/reference/admin-ui-api/directives/if-permissions-directive.mdx

@@ -0,0 +1,42 @@
+---
+title: "IfPermissionsDirective"
+generated: true
+---
+
+
+## IfPermissionsDirective
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/directives/if-permissions.directive.ts" sourceLine="26" packageName="@vendure/admin-ui" />
+
+Conditionally shows/hides templates based on the current active user having the specified permission.
+Based on the ngIf source. Also support "else" templates:
+
+*Example*
+
+```html
+<button *vdrIfPermissions="'DeleteCatalog'; else unauthorized">Delete Product</button>
+<ng-template #unauthorized>Not allowed!</ng-template>
+```
+
+The permission can be a single string, or an array. If an array is passed, then _all_ of the permissions
+must match (logical AND)
+
+```ts title="Signature"
+class IfPermissionsDirective extends IfDirectiveBase<Array<Permission[] | null>> {
+    constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<any>, changeDetectorRef: ChangeDetectorRef, permissionsService: PermissionsService)
+}
+```
+* Extends: <code>IfDirectiveBase<Array<<a href='/reference/typescript-api/common/permission#permission'>Permission</a>[] | null>></code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(_viewContainer: ViewContainerRef, templateRef: TemplateRef<any>, changeDetectorRef: ChangeDetectorRef, permissionsService: PermissionsService) => IfPermissionsDirective`}   />
+
+
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/directives/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Directives"
+generated: true
+---

+ 167 - 0
docs/docs/reference/admin-ui-api/list-detail-views/base-detail-component.mdx

@@ -0,0 +1,167 @@
+---
+title: "BaseDetailComponent"
+generated: true
+---
+
+
+## BaseDetailComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-detail.component.ts" sourceLine="57" packageName="@vendure/admin-ui" />
+
+A base class for entity detail views. It should be used in conjunction with the
+<a href='/reference/admin-ui-api/list-detail-views/base-entity-resolver#baseentityresolver'>BaseEntityResolver</a>.
+
+*Example*
+
+```ts
+@Component({
+  selector: 'app-my-entity',
+  templateUrl: './my-entity.component.html',
+  styleUrls: ['./my-entity.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GlobalSettingsComponent extends BaseDetailComponent<MyEntityFragment> implements OnInit {
+  detailForm: FormGroup;
+
+  constructor(
+    router: Router,
+    route: ActivatedRoute,
+    serverConfigService: ServerConfigService,
+    protected dataService: DataService,
+    private formBuilder: FormBuilder,
+  ) {
+    super(route, router, serverConfigService, dataService);
+    this.detailForm = this.formBuilder.group({
+      name: [''],
+    });
+  }
+
+  protected setFormValues(entity: MyEntityFragment, languageCode: LanguageCode): void {
+    this.detailForm.patchValue({
+      name: entity.name,
+    });
+  }
+}
+```
+
+```ts title="Signature"
+class BaseDetailComponent<Entity extends { id: string; updatedAt?: string }> implements DeactivateAware {
+    entity$: Observable<Entity>;
+    availableLanguages$: Observable<LanguageCode[]>;
+    languageCode$: Observable<LanguageCode>;
+    languageCode: LanguageCode;
+    isNew$: Observable<boolean>;
+    id: string;
+    abstract detailForm: UntypedFormGroup;
+    protected destroy$ = new Subject<void>();
+    constructor(route: ActivatedRoute, router: Router, serverConfigService: ServerConfigService, dataService: DataService, permissionsService: PermissionsService)
+    init() => ;
+    setUpStreams() => ;
+    destroy() => ;
+    setLanguage(code: LanguageCode) => ;
+    canDeactivate() => boolean;
+    setFormValues(entity: Entity, languageCode: LanguageCode) => void;
+    setCustomFieldFormValues(customFields: CustomFieldConfig[], formGroup: AbstractControl | null, entity: T, currentTranslation?: TranslationOf<T>) => ;
+    getCustomFieldConfig(key: Exclude<keyof CustomFields, '__typename'>) => CustomFieldConfig[];
+    setQueryParam(key: string, value: any) => ;
+}
+```
+* Implements: <code>DeactivateAware</code>
+
+
+
+<div className="members-wrapper">
+
+### entity$
+
+<MemberInfo kind="property" type={`Observable<Entity>`}   />
+
+
+### availableLanguages$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>[]>`}   />
+
+
+### languageCode$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>>`}   />
+
+
+### languageCode
+
+<MemberInfo kind="property" type={`<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>`}   />
+
+
+### isNew$
+
+<MemberInfo kind="property" type={`Observable<boolean>`}   />
+
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### detailForm
+
+<MemberInfo kind="property" type={`UntypedFormGroup`}   />
+
+
+### destroy$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(route: ActivatedRoute, router: Router, serverConfigService: ServerConfigService, dataService: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, permissionsService: PermissionsService) => BaseDetailComponent`}   />
+
+
+### init
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### setUpStreams
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### destroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### setLanguage
+
+<MemberInfo kind="method" type={`(code: <a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>) => `}   />
+
+
+### canDeactivate
+
+<MemberInfo kind="method" type={`() => boolean`}   />
+
+
+### setFormValues
+
+<MemberInfo kind="method" type={`(entity: Entity, languageCode: <a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>) => void`}   />
+
+
+### setCustomFieldFormValues
+
+<MemberInfo kind="method" type={`(customFields: <a href='/reference/typescript-api/custom-fields/custom-field-config#customfieldconfig'>CustomFieldConfig</a>[], formGroup: AbstractControl | null, entity: T, currentTranslation?: TranslationOf<T>) => `}   />
+
+
+### getCustomFieldConfig
+
+<MemberInfo kind="method" type={`(key: Exclude<keyof <a href='/reference/typescript-api/custom-fields/#customfields'>CustomFields</a>, '__typename'>) => <a href='/reference/typescript-api/custom-fields/custom-field-config#customfieldconfig'>CustomFieldConfig</a>[]`}   />
+
+
+### setQueryParam
+
+<MemberInfo kind="method" type={`(key: string, value: any) => `}   />
+
+
+
+
+</div>

+ 53 - 0
docs/docs/reference/admin-ui-api/list-detail-views/base-entity-resolver.mdx

@@ -0,0 +1,53 @@
+---
+title: "BaseEntityResolver"
+generated: true
+---
+
+
+## BaseEntityResolver
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-entity-resolver.ts" sourceLine="55" packageName="@vendure/admin-ui" />
+
+A base resolver for an entity detail route. Resolves to an observable of the given entity, or a "blank"
+version if the route id equals "create". Should be used together with details views which extend the
+<a href='/reference/admin-ui-api/list-detail-views/base-detail-component#basedetailcomponent'>BaseDetailComponent</a>.
+
+*Example*
+
+```ts
+@Injectable({
+  providedIn: 'root',
+})
+export class MyEntityResolver extends BaseEntityResolver<MyEntityFragment> {
+  constructor(router: Router, dataService: DataService) {
+    super(
+      router,
+      {
+        __typename: 'MyEntity',
+        id: '',
+        createdAt: '',
+        updatedAt: '',
+        name: '',
+      },
+      id => dataService.query(GET_MY_ENTITY, { id }).mapStream(data => data.myEntity),
+    );
+  }
+}
+```
+
+```ts title="Signature"
+class BaseEntityResolver<T> {
+    constructor(router: Router, emptyEntity: T, entityStream: (id: string) => Observable<T | null | undefined>)
+}
+```
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(router: Router, emptyEntity: T, entityStream: (id: string) => Observable<T | null | undefined>) => BaseEntityResolver`}   />
+
+
+
+
+</div>

+ 154 - 0
docs/docs/reference/admin-ui-api/list-detail-views/base-list-component.mdx

@@ -0,0 +1,154 @@
+---
+title: "BaseListComponent"
+generated: true
+---
+
+
+## BaseListComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-list.component.ts" sourceLine="43" packageName="@vendure/admin-ui" />
+
+This is a base class which implements the logic required to fetch and manipulate
+a list of data from a query which returns a PaginatedList type.
+
+It is normally used in combination with the <a href='/reference/admin-ui-api/components/data-table2component#datatable2component'>DataTable2Component</a>.
+
+```ts title="Signature"
+class BaseListComponent<ResultType, ItemType, VariableType extends Record<string, any> = any> implements OnInit, OnDestroy {
+    searchTermControl = new FormControl('');
+    selectionManager = new SelectionManager<any>({
+        multiSelect: true,
+        itemsAreEqual: (a, b) => a.id === b.id,
+        additiveMode: true,
+    });
+    result$: Observable<ResultType>;
+    items$: Observable<ItemType[]>;
+    totalItems$: Observable<number>;
+    itemsPerPage$: Observable<number>;
+    currentPage$: Observable<number>;
+    protected destroy$ = new Subject<void>();
+    protected refresh$ = new BehaviorSubject<undefined>(undefined);
+    protected visibleCustomFieldColumnChange$ = new Subject<
+        Array<DataTableCustomFieldColumnComponent<any>>
+    >();
+    constructor(router: Router, route: ActivatedRoute)
+    setQueryFn(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) => ;
+    refreshListOnChanges(streams: Array<Observable<any>>) => ;
+    setPageNumber(page: number) => ;
+    setItemsPerPage(perPage: number) => ;
+    setVisibleColumns(columns: Array<DataTable2ColumnComponent<any>>) => ;
+    refresh() => ;
+    setQueryParam(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
+    setQueryParam(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
+    setQueryParam(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
+}
+```
+* Implements: <code>OnInit</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### searchTermControl
+
+<MemberInfo kind="property" type={``}   />
+
+
+### selectionManager
+
+<MemberInfo kind="property" type={``}   />
+
+
+### result$
+
+<MemberInfo kind="property" type={`Observable<ResultType>`}   />
+
+
+### items$
+
+<MemberInfo kind="property" type={`Observable<ItemType[]>`}   />
+
+
+### totalItems$
+
+<MemberInfo kind="property" type={`Observable<number>`}   />
+
+
+### itemsPerPage$
+
+<MemberInfo kind="property" type={`Observable<number>`}   />
+
+
+### currentPage$
+
+<MemberInfo kind="property" type={`Observable<number>`}   />
+
+
+### destroy$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### refresh$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### visibleCustomFieldColumnChange$
+
+<MemberInfo kind="property" type={``}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(router: Router, route: ActivatedRoute) => BaseListComponent`}   />
+
+
+### setQueryFn
+
+<MemberInfo kind="method" type={`(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) => `}   />
+
+Sets the fetch function for the list being implemented.
+### refreshListOnChanges
+
+<MemberInfo kind="method" type={`(streams: Array<Observable<any>>) => `}   />
+
+Accepts a list of Observables which will trigger a refresh of the list when any of them emit.
+### setPageNumber
+
+<MemberInfo kind="method" type={`(page: number) => `}   />
+
+Sets the current page number in the url.
+### setItemsPerPage
+
+<MemberInfo kind="method" type={`(perPage: number) => `}   />
+
+Sets the number of items per page in the url.
+### setVisibleColumns
+
+<MemberInfo kind="method" type={`(columns: Array<DataTable2ColumnComponent<any>>) => `}   />
+
+
+### refresh
+
+<MemberInfo kind="method" type={`() => `}   />
+
+Re-fetch the current page of results.
+### setQueryParam
+
+<MemberInfo kind="method" type={`(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => `}   />
+
+
+### setQueryParam
+
+<MemberInfo kind="method" type={`(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => `}   />
+
+
+### setQueryParam
+
+<MemberInfo kind="method" type={`(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => `}   />
+
+
+
+
+</div>

+ 51 - 0
docs/docs/reference/admin-ui-api/list-detail-views/detail-component-with-resolver.mdx

@@ -0,0 +1,51 @@
+---
+title: "DetailComponentWithResolver"
+generated: true
+---
+
+
+## detailComponentWithResolver
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-detail.component.ts" sourceLine="256" packageName="@vendure/admin-ui" />
+
+A helper function for creating tabs that point to a <a href='/reference/admin-ui-api/list-detail-views/typed-base-detail-component#typedbasedetailcomponent'>TypedBaseDetailComponent</a>. This takes
+care of the route resolver parts so that the detail component automatically has access to the
+correct resolved detail data.
+
+*Example*
+
+```ts
+@NgModule({
+  imports: [ReviewsSharedModule],
+  declarations: [/* ... *\/],
+  providers: [
+    registerPageTab({
+      location: 'product-detail',
+      tab: 'Specs',
+      route: 'specs',
+      component: detailComponentWithResolver({
+        component: ProductSpecDetailComponent,
+        query: GetProductSpecsDocument,
+        entityKey: 'spec',
+      }),
+    }),
+  ],
+})
+export class ProductSpecsUiExtensionModule {}
+```
+
+```ts title="Signature"
+function detailComponentWithResolver<T extends TypedDocumentNode<any, { id: string }>, Field extends keyof ResultOf<T>, R extends Field>(config: {
+    component: Type<TypedBaseDetailComponent<T, Field>>;
+    query: T;
+    entityKey: R;
+    getBreadcrumbs?: (entity: ResultOf<T>[R]) => BreadcrumbValue;
+    variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
+}): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`{     component: Type<<a href='/reference/admin-ui-api/list-detail-views/typed-base-detail-component#typedbasedetailcomponent'>TypedBaseDetailComponent</a><T, Field>>;     query: T;     entityKey: R;     getBreadcrumbs?: (entity: ResultOf<T>[R]) => BreadcrumbValue;     variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never; }`} />
+

+ 4 - 0
docs/docs/reference/admin-ui-api/list-detail-views/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "List Detail Views"
+generated: true
+---

+ 50 - 0
docs/docs/reference/admin-ui-api/list-detail-views/typed-base-detail-component.mdx

@@ -0,0 +1,50 @@
+---
+title: "TypedBaseDetailComponent"
+generated: true
+---
+
+
+## TypedBaseDetailComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-detail.component.ts" sourceLine="186" packageName="@vendure/admin-ui" />
+
+A version of the <a href='/reference/admin-ui-api/list-detail-views/base-detail-component#basedetailcomponent'>BaseDetailComponent</a> which is designed to be used with a
+[TypedDocumentNode](https://the-guild.dev/graphql/codegen/plugins/typescript/typed-document-node).
+
+```ts title="Signature"
+class TypedBaseDetailComponent<T extends TypedDocumentNode<any, any>, Field extends keyof ResultOf<T>> extends BaseDetailComponent<NonNullable<ResultOf<T>[Field]>> {
+    protected result$: Observable<ResultOf<T>>;
+    protected entity: ResultOf<T>[Field];
+    constructor()
+    init() => ;
+}
+```
+* Extends: <code><a href='/reference/admin-ui-api/list-detail-views/base-detail-component#basedetailcomponent'>BaseDetailComponent</a><NonNullable<ResultOf<T>[Field]>></code>
+
+
+
+<div className="members-wrapper">
+
+### result$
+
+<MemberInfo kind="property" type={`Observable<ResultOf<T>>`}   />
+
+
+### entity
+
+<MemberInfo kind="property" type={`ResultOf<T>[Field]`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`() => TypedBaseDetailComponent`}   />
+
+
+### init
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>

+ 124 - 0
docs/docs/reference/admin-ui-api/list-detail-views/typed-base-list-component.mdx

@@ -0,0 +1,124 @@
+---
+title: "TypedBaseListComponent"
+generated: true
+---
+
+
+## TypedBaseListComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/common/base-list.component.ts" sourceLine="217" packageName="@vendure/admin-ui" />
+
+A version of the <a href='/reference/admin-ui-api/list-detail-views/base-list-component#baselistcomponent'>BaseListComponent</a> which is designed to be used with a
+[TypedDocumentNode](https://the-guild.dev/graphql/codegen/plugins/typescript/typed-document-node).
+
+```ts title="Signature"
+class TypedBaseListComponent<T extends TypedDocumentNode<any, Vars>, Field extends keyof ResultOf<T>, Vars extends { options: { filter: any; sort: any } } = VariablesOf<T>> extends BaseListComponent<ResultOf<T>, ItemOf<ResultOf<T>, Field>, VariablesOf<T>> implements OnInit {
+    availableLanguages$: Observable<LanguageCode[]>;
+    contentLanguage$: Observable<LanguageCode>;
+    protected dataService = inject(DataService);
+    protected router = inject(Router);
+    protected serverConfigService = inject(ServerConfigService);
+    protected permissionsService = inject(PermissionsService);
+    protected dataTableConfigService = inject(DataTableConfigService);
+    protected dataTableListId: string | undefined;
+    constructor()
+    configure(config: {
+        document: T;
+        getItems: (data: ResultOf<T>) => { items: Array<ItemOf<ResultOf<T>, Field>>; totalItems: number };
+        setVariables?: (skip: number, take: number) => VariablesOf<T>;
+        refreshListOnChanges?: Array<Observable<any>>;
+    }) => ;
+    ngOnInit() => ;
+    createFilterCollection() => DataTableFilterCollection<NonNullable<NonNullable<Vars['options']>['filter']>>;
+    createSortCollection() => DataTableSortCollection<NonNullable<NonNullable<Vars['options']>['sort']>>;
+    setLanguage(code: LanguageCode) => ;
+    getCustomFieldConfig(key: Exclude<keyof CustomFields, '__typename'> | string) => CustomFieldConfig[];
+}
+```
+* Extends: <code><a href='/reference/admin-ui-api/list-detail-views/base-list-component#baselistcomponent'>BaseListComponent</a><ResultOf<T>, ItemOf<ResultOf<T>, Field>, VariablesOf<T>></code>
+
+
+* Implements: <code>OnInit</code>
+
+
+
+<div className="members-wrapper">
+
+### availableLanguages$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>[]>`}   />
+
+
+### contentLanguage$
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>>`}   />
+
+
+### dataService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### router
+
+<MemberInfo kind="property" type={``}   />
+
+
+### serverConfigService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### permissionsService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### dataTableConfigService
+
+<MemberInfo kind="property" type={``}   />
+
+
+### dataTableListId
+
+<MemberInfo kind="property" type={`string | undefined`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`() => TypedBaseListComponent`}   />
+
+
+### configure
+
+<MemberInfo kind="method" type={`(config: {         document: T;         getItems: (data: ResultOf<T>) => { items: Array<ItemOf<ResultOf<T>, Field>>; totalItems: number };         setVariables?: (skip: number, take: number) => VariablesOf<T>;         refreshListOnChanges?: Array<Observable<any>>;     }) => `}   />
+
+
+### ngOnInit
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+### createFilterCollection
+
+<MemberInfo kind="method" type={`() => DataTableFilterCollection<NonNullable<NonNullable<Vars['options']>['filter']>>`}   />
+
+
+### createSortCollection
+
+<MemberInfo kind="method" type={`() => DataTableSortCollection<NonNullable<NonNullable<Vars['options']>['sort']>>`}   />
+
+
+### setLanguage
+
+<MemberInfo kind="method" type={`(code: <a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>) => `}   />
+
+
+### getCustomFieldConfig
+
+<MemberInfo kind="method" type={`(key: Exclude<keyof <a href='/reference/typescript-api/custom-fields/#customfields'>CustomFields</a>, '__typename'> | string) => <a href='/reference/typescript-api/custom-fields/custom-field-config#customfieldconfig'>CustomFieldConfig</a>[]`}   />
+
+
+
+
+</div>

+ 51 - 0
docs/docs/reference/admin-ui-api/nav-menu/add-nav-menu-item.mdx

@@ -0,0 +1,51 @@
+---
+title: "AddNavMenuItem"
+generated: true
+---
+
+
+## addNavMenuItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/add-nav-menu-item.ts" sourceLine="66" packageName="@vendure/admin-ui" />
+
+Add a menu item to an existing section specified by `sectionId`. The id of the section
+can be found by inspecting the DOM and finding the `data-section-id` attribute.
+Providing the `before` argument will move the item before any existing item with the specified id.
+If omitted (or if the name is not found) the item will be appended to the
+end of the section.
+
+This should be used in the NgModule `providers` array of your ui extension module.
+
+*Example*
+
+```ts title="providers.ts"
+import { addNavMenuItem } from '@vendure/admin-ui/core';
+
+export default [
+    addNavMenuItem({
+        id: 'reviews',
+        label: 'Product Reviews',
+        routerLink: ['/extensions/reviews'],
+        icon: 'star',
+    },
+    'marketing'),
+];
+```
+
+```ts title="Signature"
+function addNavMenuItem(config: NavMenuItem, sectionId: string, before?: string): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/nav-menu/nav-menu-item#navmenuitem'>NavMenuItem</a>`} />
+
+### sectionId
+
+<MemberInfo kind="parameter" type={`string`} />
+
+### before
+
+<MemberInfo kind="parameter" type={`string`} />
+

+ 46 - 0
docs/docs/reference/admin-ui-api/nav-menu/add-nav-menu-section.mdx

@@ -0,0 +1,46 @@
+---
+title: "AddNavMenuSection"
+generated: true
+---
+
+
+## addNavMenuSection
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/extension/add-nav-menu-item.ts" sourceLine="30" packageName="@vendure/admin-ui" />
+
+Add a section to the main nav menu. Providing the `before` argument will
+move the section before any existing section with the specified id. If
+omitted (or if the id is not found) the section will be appended to the
+existing set of sections.
+This should be used in the NgModule `providers` array of your ui extension module.
+
+*Example*
+
+```ts title="providers.ts"
+import { addNavMenuSection } from '@vendure/admin-ui/core';
+
+export default [
+    addNavMenuSection({
+        id: 'reports',
+        label: 'Reports',
+        items: [{
+            // ...
+        }],
+    },
+    'settings'),
+];
+```
+
+```ts title="Signature"
+function addNavMenuSection(config: NavMenuSection, before?: string): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/nav-menu/nav-menu-section#navmenusection'>NavMenuSection</a>`} />
+
+### before
+
+<MemberInfo kind="parameter" type={`string`} />
+

+ 4 - 0
docs/docs/reference/admin-ui-api/nav-menu/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Nav Menu"
+generated: true
+---

+ 65 - 0
docs/docs/reference/admin-ui-api/nav-menu/nav-menu-item.mdx

@@ -0,0 +1,65 @@
+---
+title: "NavMenuItem"
+generated: true
+---
+
+
+## NavMenuItem
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="37" packageName="@vendure/admin-ui" />
+
+A NavMenuItem is a menu item in the main (left-hand side) nav
+bar.
+
+```ts title="Signature"
+interface NavMenuItem {
+    id: string;
+    label: string;
+    routerLink: RouterLinkDefinition;
+    onClick?: (event: MouseEvent) => void;
+    icon?: string;
+    requiresPermission?: string | ((userPermissions: string[]) => boolean);
+    statusBadge?: Observable<NavMenuBadge>;
+}
+```
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### routerLink
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/action-bar/router-link-definition#routerlinkdefinition'>RouterLinkDefinition</a>`}   />
+
+
+### onClick
+
+<MemberInfo kind="property" type={`(event: MouseEvent) => void`}   />
+
+
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### requiresPermission
+
+<MemberInfo kind="property" type={`string | ((userPermissions: string[]) => boolean)`}   />
+
+
+### statusBadge
+
+<MemberInfo kind="property" type={`Observable<<a href='/reference/admin-ui-api/nav-menu/navigation-types#navmenubadge'>NavMenuBadge</a>>`}   />
+
+
+
+
+</div>

+ 82 - 0
docs/docs/reference/admin-ui-api/nav-menu/nav-menu-section.mdx

@@ -0,0 +1,82 @@
+---
+title: "NavMenuSection"
+generated: true
+---
+
+
+## NavMenuSection
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="57" packageName="@vendure/admin-ui" />
+
+A NavMenuSection is a grouping of links in the main
+(left-hand side) nav bar.
+
+```ts title="Signature"
+interface NavMenuSection {
+    id: string;
+    label: string;
+    items: NavMenuItem[];
+    icon?: string;
+    displayMode?: 'regular' | 'settings';
+    requiresPermission?: string | ((userPermissions: string[]) => boolean);
+    collapsible?: boolean;
+    collapsedByDefault?: boolean;
+}
+```
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### label
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### items
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/nav-menu/nav-menu-item#navmenuitem'>NavMenuItem</a>[]`}   />
+
+
+### icon
+
+<MemberInfo kind="property" type={`string`}   />
+
+
+### displayMode
+
+<MemberInfo kind="property" type={`'regular' | 'settings'`}   />
+
+
+### requiresPermission
+
+<MemberInfo kind="property" type={`string | ((userPermissions: string[]) => boolean)`}   />
+
+Control the display of this item based on the user permissions. Note: if you attempt to pass a
+<a href='/reference/typescript-api/auth/permission-definition#permissiondefinition'>PermissionDefinition</a> object, you will get a compilation error. Instead, pass the plain
+string version. For example, if the permission is defined as:
+```ts
+export const MyPermission = new PermissionDefinition('ProductReview');
+```
+then the generated permission strings will be:
+
+- `CreateProductReview`
+- `ReadProductReview`
+- `UpdateProductReview`
+- `DeleteProductReview`
+### collapsible
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+### collapsedByDefault
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+
+
+</div>

+ 37 - 0
docs/docs/reference/admin-ui-api/nav-menu/navigation-types.mdx

@@ -0,0 +1,37 @@
+---
+title: "Navigation Types"
+generated: true
+---
+
+
+## NavMenuBadge
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts" sourceLine="19" packageName="@vendure/admin-ui" />
+
+A color-coded notification badge which will be displayed by the
+NavMenuItem's icon.
+
+```ts title="Signature"
+interface NavMenuBadge {
+    type: NavMenuBadgeType;
+    propagateToSection?: boolean;
+}
+```
+
+<div className="members-wrapper">
+
+### type
+
+<MemberInfo kind="property" type={`NavMenuBadgeType`}   />
+
+
+### propagateToSection
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+If true, the badge will propagate to the NavMenuItem's
+parent section, displaying a notification badge next
+to the section name.
+
+
+</div>

+ 40 - 0
docs/docs/reference/admin-ui-api/pipes/asset-preview-pipe.mdx

@@ -0,0 +1,40 @@
+---
+title: "AssetPreviewPipe"
+generated: true
+---
+
+
+## AssetPreviewPipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/asset-preview.pipe.ts" sourceLine="19" packageName="@vendure/admin-ui" />
+
+Given an Asset object (an object with `preview` and optionally `focalPoint` properties), this pipe
+returns a string with query parameters designed to work with the image resize capabilities of the
+AssetServerPlugin.
+
+*Example*
+
+```HTML
+<img [src]="asset | assetPreview:'tiny'" />
+<img [src]="asset | assetPreview:150" />
+```
+
+```ts title="Signature"
+class AssetPreviewPipe implements PipeTransform {
+    transform(asset?: AssetFragment, preset: string | number = 'thumb') => string;
+}
+```
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### transform
+
+<MemberInfo kind="method" type={`(asset?: AssetFragment, preset: string | number = 'thumb') => string`}   />
+
+
+
+
+</div>

+ 44 - 0
docs/docs/reference/admin-ui-api/pipes/duration-pipe.mdx

@@ -0,0 +1,44 @@
+---
+title: "DurationPipe"
+generated: true
+---
+
+
+## DurationPipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/duration.pipe.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Displays a number of milliseconds in a more human-readable format,
+e.g. "12ms", "33s", "2:03m"
+
+*Example*
+
+```ts
+{{ timeInMs | duration }}
+```
+
+```ts title="Signature"
+class DurationPipe implements PipeTransform {
+    constructor(i18nService: I18nService)
+    transform(value: number) => string;
+}
+```
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(i18nService: <a href='/reference/typescript-api/common/i18n-service#i18nservice'>I18nService</a>) => DurationPipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: number) => string`}   />
+
+
+
+
+</div>

+ 37 - 0
docs/docs/reference/admin-ui-api/pipes/file-size-pipe.mdx

@@ -0,0 +1,37 @@
+---
+title: "FileSizePipe"
+generated: true
+---
+
+
+## FileSizePipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/file-size.pipe.ts" sourceLine="14" packageName="@vendure/admin-ui" />
+
+Formats a number into a human-readable file size string.
+
+*Example*
+
+```ts
+{{ fileSizeInBytes | filesize }}
+```
+
+```ts title="Signature"
+class FileSizePipe implements PipeTransform {
+    transform(value: number, useSiUnits:  = true) => any;
+}
+```
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### transform
+
+<MemberInfo kind="method" type={`(value: number, useSiUnits:  = true) => any`}   />
+
+
+
+
+</div>

+ 50 - 0
docs/docs/reference/admin-ui-api/pipes/has-permission-pipe.mdx

@@ -0,0 +1,50 @@
+---
+title: "HasPermissionPipe"
+generated: true
+---
+
+
+## HasPermissionPipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/has-permission.pipe.ts" sourceLine="16" packageName="@vendure/admin-ui" />
+
+A pipe which checks the provided permission against all the permissions of the current user.
+Returns `true` if the current user has that permission.
+
+*Example*
+
+```HTML
+<button [disabled]="!('UpdateCatalog' | hasPermission)">Save Changes</button>
+```
+
+```ts title="Signature"
+class HasPermissionPipe implements PipeTransform, OnDestroy {
+    constructor(permissionsService: PermissionsService, changeDetectorRef: ChangeDetectorRef)
+    transform(input: string | string[]) => any;
+    ngOnDestroy() => ;
+}
+```
+* Implements: <code>PipeTransform</code>, <code>OnDestroy</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(permissionsService: PermissionsService, changeDetectorRef: ChangeDetectorRef) => HasPermissionPipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(input: string | string[]) => any`}   />
+
+
+### ngOnDestroy
+
+<MemberInfo kind="method" type={`() => `}   />
+
+
+
+
+</div>

+ 4 - 0
docs/docs/reference/admin-ui-api/pipes/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "Pipes"
+generated: true
+---

+ 46 - 0
docs/docs/reference/admin-ui-api/pipes/locale-currency-name-pipe.mdx

@@ -0,0 +1,46 @@
+---
+title: "LocaleCurrencyNamePipe"
+generated: true
+---
+
+
+## LocaleCurrencyNamePipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Displays a human-readable name for a given ISO 4217 currency code.
+
+*Example*
+
+```HTML
+{{ order.currencyCode | localeCurrencyName }}
+```
+
+```ts title="Signature"
+class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef)
+    transform(value: any, display: 'full' | 'symbol' | 'name' = 'full', locale?: unknown) => any;
+}
+```
+* Extends: <code>LocaleBasePipe</code>
+
+
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService?: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef?: ChangeDetectorRef) => LocaleCurrencyNamePipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: any, display: 'full' | 'symbol' | 'name' = 'full', locale?: unknown) => any`}   />
+
+
+
+
+</div>

+ 53 - 0
docs/docs/reference/admin-ui-api/pipes/locale-currency-pipe.mdx

@@ -0,0 +1,53 @@
+---
+title: "LocaleCurrencyPipe"
+generated: true
+---
+
+
+## LocaleCurrencyPipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.ts" sourceLine="20" packageName="@vendure/admin-ui" />
+
+Formats a Vendure monetary value (in cents) into the correct format for the configured currency and display
+locale.
+
+*Example*
+
+```HTML
+{{ variant.priceWithTax | localeCurrency }}
+```
+
+```ts title="Signature"
+class LocaleCurrencyPipe extends LocaleBasePipe implements PipeTransform {
+    readonly precisionFactor: number;
+    constructor(currencyService: CurrencyService, dataService?: DataService, changeDetectorRef?: ChangeDetectorRef)
+    transform(value: unknown, args: unknown[]) => string | unknown;
+}
+```
+* Extends: <code>LocaleBasePipe</code>
+
+
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### precisionFactor
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### constructor
+
+<MemberInfo kind="method" type={`(currencyService: CurrencyService, dataService?: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef?: ChangeDetectorRef) => LocaleCurrencyPipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: unknown, args: unknown[]) => string | unknown`}   />
+
+
+
+
+</div>

+ 47 - 0
docs/docs/reference/admin-ui-api/pipes/locale-date-pipe.mdx

@@ -0,0 +1,47 @@
+---
+title: "LocaleDatePipe"
+generated: true
+---
+
+
+## LocaleDatePipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts" sourceLine="19" packageName="@vendure/admin-ui" />
+
+A replacement of the Angular DatePipe which makes use of the Intl API
+to format dates according to the selected UI language.
+
+*Example*
+
+```HTML
+{{ order.orderPlacedAt | localeDate }}
+```
+
+```ts title="Signature"
+class LocaleDatePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef)
+    transform(value: unknown, args: unknown[]) => unknown;
+}
+```
+* Extends: <code>LocaleBasePipe</code>
+
+
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService?: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef?: ChangeDetectorRef) => LocaleDatePipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: unknown, args: unknown[]) => unknown`}   />
+
+
+
+
+</div>

+ 46 - 0
docs/docs/reference/admin-ui-api/pipes/locale-language-name-pipe.mdx

@@ -0,0 +1,46 @@
+---
+title: "LocaleLanguageNamePipe"
+generated: true
+---
+
+
+## LocaleLanguageNamePipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/locale-language-name.pipe.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Displays a human-readable name for a given ISO 639-1 language code.
+
+*Example*
+
+```HTML
+{{ 'zh_Hant' | localeLanguageName }}
+```
+
+```ts title="Signature"
+class LocaleLanguageNamePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef)
+    transform(value: any, locale?: unknown) => string;
+}
+```
+* Extends: <code>LocaleBasePipe</code>
+
+
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService?: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef?: ChangeDetectorRef) => LocaleLanguageNamePipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: any, locale?: unknown) => string`}   />
+
+
+
+
+</div>

+ 46 - 0
docs/docs/reference/admin-ui-api/pipes/locale-region-name-pipe.mdx

@@ -0,0 +1,46 @@
+---
+title: "LocaleRegionNamePipe"
+generated: true
+---
+
+
+## LocaleRegionNamePipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/locale-region-name.pipe.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Displays a human-readable name for a given region.
+
+*Example*
+
+```HTML
+{{ 'GB' | localeRegionName }}
+```
+
+```ts title="Signature"
+class LocaleRegionNamePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef)
+    transform(value: any, locale?: unknown) => string;
+}
+```
+* Extends: <code>LocaleBasePipe</code>
+
+
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(dataService?: <a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>, changeDetectorRef?: ChangeDetectorRef) => LocaleRegionNamePipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: any, locale?: unknown) => string`}   />
+
+
+
+
+</div>

+ 43 - 0
docs/docs/reference/admin-ui-api/pipes/time-ago-pipe.mdx

@@ -0,0 +1,43 @@
+---
+title: "TimeAgoPipe"
+generated: true
+---
+
+
+## TimeAgoPipe
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/pipes/time-ago.pipe.ts" sourceLine="18" packageName="@vendure/admin-ui" />
+
+Converts a date into the format "3 minutes ago", "5 hours ago" etc.
+
+*Example*
+
+```HTML
+{{ order.orderPlacedAt | timeAgo }}
+```
+
+```ts title="Signature"
+class TimeAgoPipe implements PipeTransform {
+    constructor(i18nService: I18nService)
+    transform(value: string | Date, nowVal?: string | Date) => string;
+}
+```
+* Implements: <code>PipeTransform</code>
+
+
+
+<div className="members-wrapper">
+
+### constructor
+
+<MemberInfo kind="method" type={`(i18nService: <a href='/reference/typescript-api/common/i18n-service#i18nservice'>I18nService</a>) => TimeAgoPipe`}   />
+
+
+### transform
+
+<MemberInfo kind="method" type={`(value: string | Date, nowVal?: string | Date) => string`}   />
+
+
+
+
+</div>

+ 35 - 0
docs/docs/reference/admin-ui-api/react-components/action-bar.mdx

@@ -0,0 +1,35 @@
+---
+title: "ActionBar"
+generated: true
+---
+
+
+## ActionBar
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/ActionBar.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A container for the primary actions on a list or detail page
+
+*Example*
+
+```ts
+import { ActionBar } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <ActionBar leftContent={<div>Optional left content</div>}>
+      <button className='button primary'>Primary action</button>
+    </ActionBar>
+  );
+}
+```
+
+```ts title="Signature"
+function ActionBar(props: PropsWithChildren<{ leftContent?: ReactNode }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren<{ leftContent?: ReactNode }>`} />
+

+ 35 - 0
docs/docs/reference/admin-ui-api/react-components/card.mdx

@@ -0,0 +1,35 @@
+---
+title: "Card"
+generated: true
+---
+
+
+## Card
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/Card.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A card component which can be used to group related content.
+
+*Example*
+
+```ts
+import { Card } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <Card title='My Title'>
+      <p>Some content</p>
+    </Card>
+  );
+}
+```
+
+```ts title="Signature"
+function Card(props: PropsWithChildren<{ title?: string; paddingX?: boolean }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren<{ title?: string; paddingX?: boolean }>`} />
+

+ 33 - 0
docs/docs/reference/admin-ui-api/react-components/cds-icon.mdx

@@ -0,0 +1,33 @@
+---
+title: "CdsIcon"
+generated: true
+---
+
+
+## CdsIcon
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/CdsIcon.tsx" sourceLine="47" packageName="@vendure/admin-ui" />
+
+A React wrapper for the Clarity UI icon component.
+
+*Example*
+
+```ts
+import { userIcon } from '@cds/core/icon';
+import { CdsIcon } from '@vendure/admin-ui/react';
+
+registerCdsIcon(userIcon);
+export function MyComponent() {
+   return <CdsIcon icon={userIcon} badge="warning" solid size="lg"></CdsIcon>;
+}
+```
+
+```ts title="Signature"
+function CdsIcon(props: { icon: IconShapeTuple; className?: string } & Partial<CdsIconProps>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`{ icon: IconShapeTuple; className?: string } &#38; Partial<CdsIconProps>`} />
+

+ 41 - 0
docs/docs/reference/admin-ui-api/react-components/form-field.mdx

@@ -0,0 +1,41 @@
+---
+title: "FormField"
+generated: true
+---
+
+
+## FormField
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/FormField.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A wrapper around form fields which provides a label, tooltip and error message.
+
+*Example*
+
+```ts
+import { FormField } from '@vendure/admin-ui/react';
+
+export function MyReactComponent() {
+    return (
+       <FormField label="My field" tooltip="This is a tooltip" invalid errorMessage="This field is invalid">
+           <input type="text" />
+       </FormField>
+    );
+}
+```
+
+```ts title="Signature"
+function FormField(props: PropsWithChildren<{
+        for?: string;
+        label?: string;
+        tooltip?: string;
+        invalid?: boolean;
+        errorMessage?: string;
+    }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren<{         for?: string;         label?: string;         tooltip?: string;         invalid?: boolean;         errorMessage?: string;     }>`} />
+

+ 4 - 0
docs/docs/reference/admin-ui-api/react-components/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "React Components"
+generated: true
+---

+ 33 - 0
docs/docs/reference/admin-ui-api/react-components/link.mdx

@@ -0,0 +1,33 @@
+---
+title: "Link"
+generated: true
+---
+
+
+## Link
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/Link.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A React component which renders an anchor tag and navigates to the specified route when clicked.
+This is useful when you want to use a React component in a Vendure UI plugin which navigates to
+a route in the admin-ui.
+
+*Example*
+
+```ts
+import { Link } from '@vendure/admin-ui/react';
+
+export const MyReactComponent = () => {
+    return <Link href="/extensions/my-extension">Go to my extension</Link>;
+}
+```
+
+```ts title="Signature"
+function Link(props: PropsWithChildren<{ href: string; [props: string]: any }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren<{ href: string; [props: string]: any }>`} />
+

+ 35 - 0
docs/docs/reference/admin-ui-api/react-components/page-block.mdx

@@ -0,0 +1,35 @@
+---
+title: "PageBlock"
+generated: true
+---
+
+
+## PageBlock
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/PageBlock.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A container for page content which provides a consistent width and spacing.
+
+*Example*
+
+```ts
+import { PageBlock } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <PageBlock>
+      ...
+    </PageBlock>
+  );
+}
+```
+
+```ts title="Signature"
+function PageBlock(props: PropsWithChildren): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren`} />
+

+ 35 - 0
docs/docs/reference/admin-ui-api/react-components/page-detail-layout.mdx

@@ -0,0 +1,35 @@
+---
+title: "PageDetailLayout"
+generated: true
+---
+
+
+## PageDetailLayout
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/PageDetailLayout.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A responsive container for detail views with a main content area and an optional sidebar.
+
+*Example*
+
+```ts
+import { PageDetailLayout } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <PageDetailLayout sidebar={<div>Sidebar content</div>}>
+      <div>Main content</div>
+    </PageDetailLayout>
+  );
+}
+```
+
+```ts title="Signature"
+function PageDetailLayout(props: PropsWithChildren<{ sidebar?: ReactNode }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren<{ sidebar?: ReactNode }>`} />
+

+ 41 - 0
docs/docs/reference/admin-ui-api/react-components/rich-text-editor.mdx

@@ -0,0 +1,41 @@
+---
+title: "RichTextEditor"
+generated: true
+---
+
+
+## RichTextEditor
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/RichTextEditor.tsx" sourceLine="60" packageName="@vendure/admin-ui" />
+
+A rich text editor component which uses ProseMirror (rich text editor) under the hood.
+
+*Example*
+
+```ts
+import { RichTextEditor } from '@vendure/admin-ui/react';
+import React from 'react';
+
+export function MyComponent() {
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const form = new FormData(e.target as HTMLFormElement);
+    const content = form.get("content");
+    console.log(content);
+  };
+
+  return (
+    <form className="w-full" onSubmit={onSubmit}>
+      <RichTextEditor
+        name="content"
+        readOnly={false}
+        onMount={(e) => console.log("Mounted", e)}
+      />
+      <button type="submit" className="btn btn-primary">
+        Submit
+      </button>
+    </form>
+  );
+}
+```
+

+ 4 - 0
docs/docs/reference/admin-ui-api/react-extensions/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "React Extensions"
+generated: true
+---

+ 40 - 0
docs/docs/reference/admin-ui-api/react-extensions/react-custom-detail-component-config.mdx

@@ -0,0 +1,40 @@
+---
+title: "ReactCustomDetailComponentConfig"
+generated: true
+---
+
+
+## ReactCustomDetailComponentConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-custom-detail-component.ts" sourceLine="15" packageName="@vendure/admin-ui" />
+
+Configures a React-based component to be placed in a detail page in the given location.
+
+```ts title="Signature"
+interface ReactCustomDetailComponentConfig {
+    locationId: CustomDetailComponentLocationId;
+    component: ElementType;
+    props?: Record<string, any>;
+}
+```
+
+<div className="members-wrapper">
+
+### locationId
+
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component-location-id#customdetailcomponentlocationid'>CustomDetailComponentLocationId</a>`}   />
+
+The id of the detail page location in which to place the component.
+### component
+
+<MemberInfo kind="property" type={`ElementType`}   />
+
+The React component to render.
+### props
+
+<MemberInfo kind="property" type={`Record<string, any>`}   />
+
+Optional props to pass to the React component.
+
+
+</div>

+ 47 - 0
docs/docs/reference/admin-ui-api/react-extensions/react-data-table-component-config.mdx

@@ -0,0 +1,47 @@
+---
+title: "ReactDataTableComponentConfig"
+generated: true
+---
+
+
+## ReactDataTableComponentConfig
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts" sourceLine="19" packageName="@vendure/admin-ui" />
+
+Configures a <a href='/reference/admin-ui-api/custom-detail-components/custom-detail-component#customdetailcomponent'>CustomDetailComponent</a> to be placed in the given location.
+
+```ts title="Signature"
+interface ReactDataTableComponentConfig {
+    tableId: DataTableLocationId;
+    columnId: DataTableColumnId;
+    component: ElementType;
+    props?: Record<string, any>;
+}
+```
+
+<div className="members-wrapper">
+
+### tableId
+
+<MemberInfo kind="property" type={`DataTableLocationId`}   />
+
+The location in the UI where the custom component should be placed.
+### columnId
+
+<MemberInfo kind="property" type={`DataTableColumnId`}   />
+
+The column in the table where the custom component should be placed.
+### component
+
+<MemberInfo kind="property" type={`ElementType`}   />
+
+The component to render in the table cell. This component will receive the `rowItem` prop
+which is the data object for the row, e.g. the `Product` object if used in the `product-list` table.
+### props
+
+<MemberInfo kind="property" type={`Record<string, any>`}   />
+
+Optional props to pass to the React component.
+
+
+</div>

+ 22 - 0
docs/docs/reference/admin-ui-api/react-extensions/register-react-custom-detail-component.mdx

@@ -0,0 +1,22 @@
+---
+title: "RegisterReactCustomDetailComponent"
+generated: true
+---
+
+
+## registerReactCustomDetailComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-custom-detail-component.ts" sourceLine="40" packageName="@vendure/admin-ui" />
+
+Registers a React component to be rendered in a detail page in the given location.
+Components used as custom detail components can make use of the <a href='/reference/admin-ui-api/react-hooks/use-detail-component-data#usedetailcomponentdata'>useDetailComponentData</a> hook.
+
+```ts title="Signature"
+function registerReactCustomDetailComponent(config: ReactCustomDetailComponentConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/react-extensions/react-custom-detail-component-config#reactcustomdetailcomponentconfig'>ReactCustomDetailComponentConfig</a>`} />
+

+ 54 - 0
docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.mdx

@@ -0,0 +1,54 @@
+---
+title: "RegisterReactDataTableComponent"
+generated: true
+---
+
+
+## registerReactDataTableComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts" sourceLine="90" packageName="@vendure/admin-ui" />
+
+Registers a React component to be rendered in a data table in the given location.
+The component will receive the `rowItem` prop which is the data object for the row,
+e.g. the `Product` object if used in the `product-list` table.
+
+*Example*
+
+```ts title="components/SlugWithLink.tsx"
+import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
+import React from 'react';
+
+export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
+    return (
+        <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
+            {rowItem.slug}
+        </a>
+    );
+}
+```
+
+```ts title="providers.ts"
+import { registerReactDataTableComponent } from '@vendure/admin-ui/react';
+import { SlugWithLink } from './components/SlugWithLink';
+
+export default [
+    registerReactDataTableComponent({
+        component: SlugWithLink,
+        tableId: 'product-list',
+        columnId: 'slug',
+        props: {
+          foo: 'bar',
+        },
+    }),
+];
+```
+
+```ts title="Signature"
+function registerReactDataTableComponent(config: ReactDataTableComponentConfig): void
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/react-extensions/react-data-table-component-config#reactdatatablecomponentconfig'>ReactDataTableComponentConfig</a>`} />
+

+ 25 - 0
docs/docs/reference/admin-ui-api/react-extensions/register-react-form-input-component.mdx

@@ -0,0 +1,25 @@
+---
+title: "RegisterReactFormInputComponent"
+generated: true
+---
+
+
+## registerReactFormInputComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-form-input-component.ts" sourceLine="15" packageName="@vendure/admin-ui" />
+
+Registers a React component to be used as a <a href='/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent'>FormInputComponent</a>.
+
+```ts title="Signature"
+function registerReactFormInputComponent(id: string, component: ElementType): void
+```
+Parameters
+
+### id
+
+<MemberInfo kind="parameter" type={`string`} />
+
+### component
+
+<MemberInfo kind="parameter" type={`ElementType`} />
+

+ 17 - 0
docs/docs/reference/admin-ui-api/react-extensions/register-react-route-component-options.mdx

@@ -0,0 +1,17 @@
+---
+title: "RegisterReactRouteComponentOptions"
+generated: true
+---
+
+
+## RegisterReactRouteComponentOptions
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-route-component.ts" sourceLine="15" packageName="@vendure/admin-ui" />
+
+Configuration for a React-based route component.
+
+```ts title="Signature"
+type RegisterReactRouteComponentOptions<Entity extends { id: string; updatedAt?: string }, T extends DocumentNode | TypedDocumentNode<any, { id: string }>, Field extends keyof ResultOf<T>, R extends Field> = RegisterRouteComponentOptions<ElementType, Entity, T, Field, R> & {
+    props?: Record<string, any>;
+}
+```

+ 21 - 0
docs/docs/reference/admin-ui-api/react-extensions/register-react-route-component.mdx

@@ -0,0 +1,21 @@
+---
+title: "RegisterReactRouteComponent"
+generated: true
+---
+
+
+## registerReactRouteComponent
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/register-react-route-component.ts" sourceLine="30" packageName="@vendure/admin-ui" />
+
+Registers a React component to be used as a route component.
+
+```ts title="Signature"
+function registerReactRouteComponent<Entity extends { id: string; updatedAt?: string }, T extends DocumentNode | TypedDocumentNode<any, { id: string }>, Field extends keyof ResultOf<T>, R extends Field>(options: RegisterReactRouteComponentOptions<Entity, T, Field, R>): Route
+```
+Parameters
+
+### options
+
+<MemberInfo kind="parameter" type={`<a href='/reference/admin-ui-api/react-extensions/register-react-route-component-options#registerreactroutecomponentoptions'>RegisterReactRouteComponentOptions</a><Entity, T, Field, R>`} />
+

+ 4 - 0
docs/docs/reference/admin-ui-api/react-hooks/index.mdx

@@ -0,0 +1,4 @@
+---
+title: "React Hooks"
+generated: true
+---

+ 38 - 0
docs/docs/reference/admin-ui-api/react-hooks/use-detail-component-data.mdx

@@ -0,0 +1,38 @@
+---
+title: "UseDetailComponentData"
+generated: true
+---
+
+
+## useDetailComponentData
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-hooks/use-detail-component-data.ts" sourceLine="34" packageName="@vendure/admin-ui" />
+
+Provides the data available to React-based CustomDetailComponents.
+
+*Example*
+
+```ts
+import { Card, useDetailComponentData } from '@vendure/admin-ui/react';
+import React from 'react';
+
+export function CustomDetailComponent(props: any) {
+    const { entity, detailForm } = useDetailComponentData();
+    const updateName = () => {
+        detailForm.get('name')?.setValue('New name');
+        detailForm.markAsDirty();
+    };
+    return (
+        <Card title={'Custom Detail Component'}>
+            <button className="button" onClick={updateName}>
+                Update name
+            </button>
+            <pre>{JSON.stringify(entity, null, 2)}</pre>
+        </Card>
+    );
+}
+```
+
+```ts title="Signature"
+function useDetailComponentData<T = any>(): void
+```

Some files were not shown because too many files changed in this diff