@vendure/admin-ui 2.1.0-next.2 → 2.1.0-next.4

package/catalog/components/collection-detail/collection-detail.component.d.ts

@@ -20,7 +20,9 @@ export declare class CollectionDetailComponent extends TypedBaseDetailComponent<
         visible: import("@angular/forms").FormControl<boolean | null>;
         inheritFilters: import("@angular/forms").FormControl<boolean | null>;
         filters: import("@angular/forms").FormArray<import("@angular/forms").FormControl<unknown>>;
-        customFields: import("@angular/forms").FormGroup<{}>;
+        customFields: import("@angular/forms").FormGroup<{
+            [x: string]: import("@angular/forms").FormControl<false | "" | 0 | Date | null>;
+        }>;
     }>;
     assetChanges: {
         assets?: Asset[];

package/catalog/components/create-product-variant-dialog/create-product-variant-dialog.component.d.ts

@@ -1,19 +1,21 @@
 import { OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
-import { CreateProductVariantInput, Dialog, GetProductVariantOptionsQuery } from '@vendure/admin-ui/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { CreateProductVariantInput, CurrencyCode, Dialog, GetProductVariantOptionsQuery } from '@vendure/admin-ui/core';
 import * as i0 from "@angular/core";
 export declare class CreateProductVariantDialogComponent implements Dialog<CreateProductVariantInput>, OnInit {
     private formBuilder;
     resolveWith: (result?: CreateProductVariantInput) => void;
     product: NonNullable<GetProductVariantOptionsQuery['product']>;
-    form: import("@angular/forms").FormGroup<{
+    form: FormGroup<{
         name: FormControl<string | null>;
         sku: FormControl<string | null>;
-        options: import("@angular/forms").FormGroup<{
+        price: FormControl<string | null>;
+        options: FormGroup<{
             [key: string]: FormControl<string | null>;
         }>;
     }>;
     existingVariant: NonNullable<GetProductVariantOptionsQuery['product']>['variants'][number] | undefined;
+    currencyCode: CurrencyCode;
     constructor(formBuilder: FormBuilder);
     ngOnInit(): void;
     confirm(): void;

package/catalog/components/facet-detail/facet-detail.component.d.ts

@@ -16,7 +16,9 @@ export declare class FacetDetailComponent extends TypedBaseDetailComponent<typeo
             code: import("@angular/forms").FormControl<string | null>;
             name: import("@angular/forms").FormControl<string | null>;
             visible: import("@angular/forms").FormControl<boolean | null>;
-            customFields: import("@angular/forms").FormGroup<{}>;
+            customFields: import("@angular/forms").FormGroup<{
+                [x: string]: import("@angular/forms").FormControl<false | "" | 0 | Date | null>;
+            }>;
         }>;
         values: import("@angular/forms").FormArray<import("@angular/forms").FormControl<{
             id: string;

package/catalog/components/product-detail/product-detail.component.d.ts

@@ -26,7 +26,9 @@ export declare class ProductDetailComponent extends TypedBaseDetailComponent<typ
         slug: import("@angular/forms").FormControl<string | null>;
         description: import("@angular/forms").FormControl<string | null>;
         facetValueIds: import("@angular/forms").FormControl<string[] | null>;
-        customFields: import("@angular/forms").FormGroup<{}>;
+        customFields: import("@angular/forms").FormGroup<{
+            [x: string]: import("@angular/forms").FormControl<false | "" | 0 | Date | null>;
+        }>;
     }>;
     assetChanges: SelectedAssets;
     productChannels$: Observable<ProductDetailFragment['channels']>;

package/catalog/components/product-list/product-list.component.d.ts

@@ -9,7 +9,7 @@ export declare class ProductListComponent extends TypedBaseListComponent<typeof
     pendingSearchIndexUpdates: number;
     readonly customFields: import("@vendure/admin-ui/core").CustomFieldConfig[];
     readonly filters: import("@vendure/admin-ui/core").DataTableFilterCollection<import("@vendure/admin-ui/core").ProductFilterParameter>;
-    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").ProductSortParameter, ["name" | "id" | "createdAt" | "updatedAt" | "slug"]>;
+    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").ProductSortParameter, ["name" | "createdAt" | "id" | "updatedAt" | "slug"]>;
     constructor(dataService: DataService, modalService: ModalService, notificationService: NotificationService, jobQueueService: JobQueueService);
     rebuildSearchIndex(): void;
     deleteProduct(productId: string): void;

package/catalog/components/product-variant-list/product-variant-list.component.d.ts

@@ -6,7 +6,7 @@ export declare class ProductVariantListComponent extends TypedBaseListComponent<
     hideLanguageSelect: boolean;
     readonly customFields: import("@vendure/admin-ui/core").CustomFieldConfig[];
     readonly filters: import("@vendure/admin-ui/core").DataTableFilterCollection<import("@vendure/admin-ui/core").ProductVariantFilterParameter>;
-    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").ProductVariantSortParameter, ["name" | "price" | "sku" | "id" | "createdAt" | "updatedAt" | "priceWithTax"]>;
+    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").ProductVariantSortParameter, ["name" | "sku" | "price" | "createdAt" | "id" | "updatedAt" | "priceWithTax"]>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ProductVariantListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ProductVariantListComponent, "vdr-product-variant-list", never, { "productId": { "alias": "productId"; "required": false; }; "hideLanguageSelect": { "alias": "hideLanguageSelect"; "required": false; }; }, {}, never, never, false, never>;

package/catalog/components/stock-location-detail/stock-location-detail.component.d.ts

@@ -14,7 +14,9 @@ export declare class StockLocationDetailComponent extends TypedBaseDetailCompone
     detailForm: import("@angular/forms").FormGroup<{
         name: import("@angular/forms").FormControl<string | null>;
         description: import("@angular/forms").FormControl<string | null>;
-        customFields: import("@angular/forms").FormGroup<{}>;
+        customFields: import("@angular/forms").FormGroup<{
+            [x: string]: import("@angular/forms").FormControl<false | "" | 0 | Date | null>;
+        }>;
     }>;
     constructor(changeDetector: ChangeDetectorRef, dataService: DataService, formBuilder: FormBuilder, notificationService: NotificationService);
     ngOnInit(): void;

package/catalog/components/stock-location-list/stock-location-list.component.d.ts

@@ -5,7 +5,7 @@ export declare const GET_STOCK_LOCATION_LIST: import("apollo-angular").TypedDocu
 export declare class StockLocationListComponent extends TypedBaseListComponent<typeof GetStockLocationListDocument, 'stockLocations'> implements OnInit {
     readonly customFields: import("@vendure/admin-ui/core").CustomFieldConfig[];
     readonly filters: import("@vendure/admin-ui/core").DataTableFilterCollection<import("@vendure/admin-ui/core").StockLocationFilterParameter>;
-    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").StockLocationSortParameter, ["name" | "id" | "createdAt" | "updatedAt" | "description"]>;
+    readonly sorts: import("@vendure/admin-ui/core").DataTableSortCollection<import("@vendure/admin-ui/core").StockLocationSortParameter, ["name" | "createdAt" | "description" | "id" | "updatedAt"]>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<StockLocationListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StockLocationListComponent, "vdr-stock-location-list", never, {}, {}, never, never, false, never>;

package/catalog/providers/product-detail/product-detail.service.d.ts

@@ -278,7 +278,7 @@ export declare class ProductDetailService {
         autoUpdate: boolean;
         productInput?: UpdateProductInput;
         variantsInput?: UpdateProductVariantInput[];
-    }): Observable<(UpdateProductMutation | UpdateProductVariantsMutation)[]>;
+    }): Observable<(UpdateProductVariantsMutation | UpdateProductMutation)[]>;
     updateProductOption(input: UpdateProductOptionInput & {
         autoUpdate: boolean;
     }, product: NonNullable<GetProductDetailQuery['product']>, languageCode: LanguageCode): Observable<any>;

package/core/common/base-detail.component.d.ts

@@ -126,9 +126,19 @@ export declare function detailComponentWithResolver<T extends TypedDocumentNode<
     variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
 }): {
     resolveFn: ResolveFn<{
-        entity: Observable<ResultOf<T>[Field] | null>;
+        entity: Observable<ResultOf<T>[keyof ResultOf<T>] | null>;
         result?: ResultOf<T> | undefined;
     }>;
     breadcrumbFn: (result: any) => string | import("../providers/breadcrumb/breadcrumb.service").BreadcrumbLabelLinkPair | BreadcrumbValue[];
     component: Type<TypedBaseDetailComponent<T, Field>>;
 };
+export declare function createBaseDetailResolveFn<T extends TypedDocumentNode<any, {
+    id: string;
+}>, Field extends keyof ResultOf<T>, R extends Field>(config: {
+    query: T;
+    entityKey: R;
+    variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
+}): ResolveFn<{
+    entity: Observable<ResultOf<T>[Field] | null>;
+    result?: ResultOf<T>;
+}>;

package/core/common/component-registry-types.d.ts

@@ -1,4 +1,5 @@
 import { FormControl } from '@angular/forms';
+import { DataTableLocationId } from '../shared/components/data-table-2/data-table-custom-component.service';
 /**
  * @description
  * This interface should be implemented by any component being used as a custom input. For example,
@@ -60,4 +61,4 @@ export type ActionBarLocationId = PageLocationId;
  * @docsCategory custom-detail-components
  */
 export 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';
-export type UIExtensionLocationId = ActionBarLocationId | CustomDetailComponentLocationId;
+export type UIExtensionLocationId = ActionBarLocationId | CustomDetailComponentLocationId | DataTableLocationId;

package/core/common/utilities/custom-field-default-value.d.ts

@@ -0,0 +1,6 @@
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
+import { CustomFieldConfig } from '../generated-types';
+export declare function getCustomFieldsDefaults(customFieldConfig: CustomFieldConfig[]): {
+    [key: string]: ReturnType<typeof getDefaultValue>;
+};
+export declare function getDefaultValue(type: CustomFieldType, isNullable?: boolean): false | 0 | "" | Date | null;

package/core/common/version.d.ts

@@ -1 +1 @@
-export declare const ADMIN_UI_VERSION = "2.1.0-next.2";
+export declare const ADMIN_UI_VERSION = "2.1.0-next.4";

package/core/components/app-shell/app-shell.component.d.ts

@@ -17,6 +17,7 @@ export declare class AppShellComponent implements OnInit {
     private modalService;
     private localStorageService;
     private breadcrumbService;
+    version: string;
     userName$: Observable<string>;
     uiLanguageAndLocale$: Observable<[LanguageCode, string | undefined]>;
     direction$: Observable<'ltr' | 'rtl'>;
@@ -24,6 +25,7 @@ export declare class AppShellComponent implements OnInit {
     hideVendureBranding: boolean | undefined;
     pageTitle$: Observable<string>;
     mainNavExpanded$: Observable<boolean>;
+    devMode: boolean;
     constructor(authService: AuthService, dataService: DataService, router: Router, i18nService: I18nService, modalService: ModalService, localStorageService: LocalStorageService, breadcrumbService: BreadcrumbService);
     ngOnInit(): void;
     selectUiLanguage(): void;

package/core/extension/add-action-bar-item.d.ts

@@ -0,0 +1,28 @@
+import { Provider } from '@angular/core';
+import { ActionBarItem } from '../providers/nav-builder/nav-builder-types';
+/**
+ * @description
+ * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
+ * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
+ * `data-location-id` attribute.
+ *
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addActionBarItem({
+ *      id: 'print-invoice'
+ *      label: 'Print Invoice',
+ *      locationId: 'order-detail',
+ *      routerLink: ['/extensions/invoicing'],
+ *     }),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory action-bar
+ */
+export declare function addActionBarItem(config: ActionBarItem): Provider;

package/core/extension/add-nav-menu-item.d.ts

@@ -0,0 +1,60 @@
+import { Provider } from '@angular/core';
+import { NavMenuItem, NavMenuSection } from '../providers/nav-builder/nav-builder-types';
+/**
+ * @description
+ * 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
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuSection({
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       items: [{
+ *           // ...
+ *       }],
+ *     },
+ *     'settings'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory nav-menu
+ */
+export declare function addNavMenuSection(config: NavMenuSection, before?: string): Provider;
+/**
+ * @description
+ * 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
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuItem({
+ *       id: 'reviews',
+ *       label: 'Product Reviews',
+ *       routerLink: ['/extensions/reviews'],
+ *       icon: 'star',
+ *     },
+ *     'marketing'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ``
+ *
+ * @docsCategory nav-menu
+ */
+export declare function addNavMenuItem(config: NavMenuItem, sectionId: string, before?: string): Provider;

package/core/extension/components/angular-route.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class AngularRouteComponent {
+    protected component: import("@angular/core").Type<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AngularRouteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AngularRouteComponent, "vdr-angular-route-component", never, {}, {}, never, never, true, never>;
+}

package/core/extension/components/route.component.d.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AngularRouteComponentOptions } from '../types';
+import * as i0 from "@angular/core";
+export declare const ROUTE_COMPONENT_OPTIONS: InjectionToken<AngularRouteComponentOptions>;
+export declare class RouteComponent {
+    private route;
+    protected title$: Observable<string | undefined>;
+    constructor(route: ActivatedRoute);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RouteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RouteComponent, "vdr-route-component", never, {}, {}, never, ["*"], true, never>;
+}

package/core/extension/providers/page-metadata.service.d.ts

@@ -0,0 +1,9 @@
+import { BreadcrumbValue } from '../../providers/breadcrumb/breadcrumb.service';
+import * as i0 from "@angular/core";
+export declare class PageMetadataService {
+    private readonly routeComponentOptions;
+    setTitle(title: string): void;
+    setBreadcrumbs(value: BreadcrumbValue): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageMetadataService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PageMetadataService>;
+}

package/core/{providers/bulk-action-registry → extension}/register-bulk-action.d.ts

@@ -1,5 +1,5 @@
 import { FactoryProvider } from '@angular/core';
-import { BulkAction } from './bulk-action-types';
+import { BulkAction } from '../providers/bulk-action-registry/bulk-action-types';
 /**
  * @description
  * Registers a custom {@link BulkAction} which can be invoked from the bulk action menu

package/core/extension/register-custom-detail-component.d.ts

@@ -0,0 +1,10 @@
+import { Provider } from '@angular/core';
+import { CustomDetailComponentConfig } from '../providers/custom-detail-component/custom-detail-component-types';
+/**
+ * @description
+ * Registers a {@link CustomDetailComponent} 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.
+ *
+ * @docsCategory custom-detail-components
+ */
+export declare function registerCustomDetailComponent(config: CustomDetailComponentConfig): Provider;

package/core/{providers/dashboard-widget → extension}/register-dashboard-widget.d.ts

@@ -1,13 +1,17 @@
 import { FactoryProvider } from '@angular/core';
-import { DashboardWidgetConfig, WidgetLayoutDefinition } from './dashboard-widget-types';
+import { DashboardWidgetConfig, WidgetLayoutDefinition } from '../providers/dashboard-widget/dashboard-widget-types';
 /**
  * @description
  * Registers a dashboard widget. Once registered, the widget can be set as part of the default
  * (using {@link setDashboardWidgetLayout}).
+ *
+ * @docsCategory dashboard-widgets
  */
 export declare function registerDashboardWidget(id: string, config: DashboardWidgetConfig): FactoryProvider;
 /**
  * @description
  * Sets the default widget layout for the Admin UI dashboard.
+ *
+ * @docsCategory dashboard-widgets
  */
 export declare function setDashboardWidgetLayout(layoutDef: WidgetLayoutDefinition): FactoryProvider;

package/core/extension/register-data-table-component.d.ts

@@ -0,0 +1,44 @@
+import { DataTableComponentConfig, DataTableCustomComponentService } from '../shared/components/data-table-2/data-table-custom-component.service';
+/**
+ * @description
+ * Allows you to override the default component used to render the data of a particular column in a DataTable.
+ * The component should implement the {@link CustomDataTableColumnComponent} interface.
+ *
+ * @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',
+ *     }),
+ * ];
+ * ```
+ *
+ * @docsCategory custom-table-components
+ */
+export declare function registerDataTableComponent(config: DataTableComponentConfig): {
+    provide: import("@angular/core").InjectionToken<readonly (() => void | import("rxjs").Observable<unknown> | Promise<unknown>)[]>;
+    multi: boolean;
+    useFactory: (dataTableCustomComponentService: DataTableCustomComponentService) => () => void;
+    deps: (typeof DataTableCustomComponentService)[];
+};

package/core/extension/register-form-input-component.d.ts

@@ -0,0 +1,50 @@
+import { FactoryProvider, Type } from '@angular/core';
+import { FormInputComponent } from '../common/component-registry-types';
+/**
+ * @description
+ * Registers a custom FormInputComponent which can be used to control the argument inputs
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * a custom field.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   declarations: [MyCustomFieldControl],
+ *   providers: [
+ *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ *
+ * This input component can then be used in a custom field:
+ *
+ * @example
+ * ```TypeScript
+ * const config = {
+ *   // ...
+ *   customFields: {
+ *     ProductVariant: [
+ *       {
+ *         name: 'rrp',
+ *         type: 'int',
+ *         ui: { component: 'my-custom-input' },
+ *       },
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * or with an argument of a {@link ConfigurableOperationDef}:
+ *
+ * @example
+ * ```TypeScript
+ * args: {
+ *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+ * }
+ * ```
+ *
+ * @docsCategory custom-input-components
+ */
+export declare function registerFormInputComponent(id: string, component: Type<FormInputComponent>): FactoryProvider;

package/core/extension/register-history-entry-component.d.ts

@@ -0,0 +1,11 @@
+import { Provider } from '@angular/core';
+import { HistoryEntryConfig } from '../providers/custom-history-entry-component/history-entry-component-types';
+/**
+ * @description
+ * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
+ * history timeline.
+ *
+ * @since 1.9.0
+ * @docsCategory custom-history-entry-components
+ */
+export declare function registerHistoryEntryComponent(config: HistoryEntryConfig): Provider;

package/core/extension/register-route-component.d.ts

@@ -0,0 +1,59 @@
+import { Type } from '@angular/core';
+import { ResolveFn, Route } from '@angular/router';
+import { ResultOf, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { DocumentNode } from 'graphql';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { BaseDetailComponent } from '../common/base-detail.component';
+import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
+import { RouteComponent } from './components/route.component';
+export type RegisterRouteComponentOptions<Component extends any | BaseDetailComponent<Entity>, Entity extends {
+    id: string;
+    updatedAt?: string;
+}, T extends DocumentNode | TypedDocumentNode<any, {
+    id: string;
+}>, Field extends keyof ResultOf<T>, R extends Field> = {
+    component: Type<Component> | Component;
+    title?: string;
+    breadcrumb?: BreadcrumbValue;
+    path?: string;
+    query?: T;
+    getBreadcrumbs?: (entity: Exclude<ResultOf<T>[R], 'Query'>) => BreadcrumbValue;
+    entityKey?: Component extends BaseDetailComponent<Entity> ? R : undefined;
+    variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
+    routeConfig?: Route;
+} & (Component extends BaseDetailComponent<Entity> ? {
+    entityKey: R;
+} : unknown);
+export declare function registerRouteComponent<Component extends any | BaseDetailComponent<Entity>, Entity extends {
+    id: string;
+    updatedAt?: string;
+}, T extends DocumentNode | TypedDocumentNode<any, {
+    id: string;
+}>, Field extends keyof ResultOf<T>, R extends Field>(options: RegisterRouteComponentOptions<Component, Entity, T, Field, R>): {
+    resolve: {
+        detail?: ResolveFn<{
+            entity: Observable<ResultOf<T>[Field] | null>;
+            result?: ResultOf<T> | undefined;
+        }> | undefined;
+    };
+    data: {
+        breadcrumb: BehaviorSubject<BreadcrumbValue> | ((data: any) => any);
+    };
+    component: typeof RouteComponent;
+    title?: string | Type<import("@angular/router").Resolve<string>> | ResolveFn<string> | undefined;
+    path: string;
+    pathMatch?: "full" | "prefix" | undefined;
+    matcher?: import("@angular/router").UrlMatcher | undefined;
+    loadComponent?: (() => Type<unknown> | Observable<Type<unknown> | import("@angular/router").DefaultExport<Type<unknown>>> | Promise<Type<unknown> | import("@angular/router").DefaultExport<Type<unknown>>>) | undefined;
+    redirectTo?: string | undefined;
+    outlet?: string | undefined;
+    canActivate?: any[] | undefined;
+    canMatch?: any[] | undefined;
+    canActivateChild?: any[] | undefined;
+    canDeactivate?: any[] | undefined;
+    canLoad?: any[] | undefined;
+    children?: import("@angular/router").Routes | undefined;
+    loadChildren?: import("@angular/router").LoadChildrenCallback | undefined;
+    runGuardsAndResolvers?: import("@angular/router").RunGuardsAndResolvers | undefined;
+    providers: (import("@angular/core").Provider | import("@angular/core").EnvironmentProviders)[];
+};

package/core/extension/types.d.ts

@@ -0,0 +1,11 @@
+import { Type } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
+export interface RouteComponentOptions {
+    component: any;
+    title$: Subject<string | undefined>;
+    breadcrumb$: Subject<BreadcrumbValue>;
+}
+export interface AngularRouteComponentOptions extends RouteComponentOptions {
+    component: Type<any>;
+}

package/core/providers/component-registry/component-registry.service.d.ts

@@ -1,10 +1,13 @@
-import { Type } from '@angular/core';
+import { Provider, Type } from '@angular/core';
 import { FormInputComponent } from '../../common/component-registry-types';
 import * as i0 from "@angular/core";
 export declare class ComponentRegistryService {
     private inputComponentMap;
-    registerInputComponent(id: string, component: Type<FormInputComponent<any>>): void;
-    getInputComponent(id: string): Type<FormInputComponent<any>> | undefined;
+    registerInputComponent(id: string, component: Type<FormInputComponent<any>>, providers?: Provider[]): void;
+    getInputComponent(id: string): {
+        type: Type<FormInputComponent<any>>;
+        providers: Provider[];
+    } | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentRegistryService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ComponentRegistryService>;
 }

package/core/providers/custom-detail-component/custom-detail-component-types.d.ts

@@ -1,4 +1,4 @@
-import { Type } from '@angular/core';
+import { Provider, Type } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { CustomDetailComponentLocationId } from '../../common/component-registry-types';
@@ -22,4 +22,5 @@ export interface CustomDetailComponent {
 export interface CustomDetailComponentConfig {
     locationId: CustomDetailComponentLocationId;
     component: Type<CustomDetailComponent>;
+    providers?: Provider[];
 }

package/core/providers/custom-detail-component/custom-detail-component.service.d.ts

@@ -1,14 +1,5 @@
-import { Provider } from '@angular/core';
 import { CustomDetailComponentConfig } from './custom-detail-component-types';
 import * as i0 from "@angular/core";
-/**
- * @description
- * Registers a {@link CustomDetailComponent} 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.
- *
- * @docsCategory custom-detail-components
- */
-export declare function registerCustomDetailComponent(config: CustomDetailComponentConfig): Provider;
 export declare class CustomDetailComponentService {
     private customDetailComponents;
     registerCustomDetailComponent(config: CustomDetailComponentConfig): void;

package/core/providers/custom-history-entry-component/history-entry-component.service.d.ts

@@ -1,15 +1,6 @@
-import { Provider, Type } from '@angular/core';
+import { Type } from '@angular/core';
 import { HistoryEntryComponent, HistoryEntryConfig } from './history-entry-component-types';
 import * as i0 from "@angular/core";
-/**
- * @description
- * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
- * history timeline.
- *
- * @since 1.9.0
- * @docsCategory custom-history-entry-components
- */
-export declare function registerHistoryEntryComponent(config: HistoryEntryConfig): Provider;
 export declare class HistoryEntryComponentService {
     private customEntryComponents;
     registerComponent(config: HistoryEntryConfig): void;