@vendure/admin-ui 1.3.2 → 1.4.0

package/core/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.d.ts

@@ -5,6 +5,14 @@ import { Observable } from 'rxjs';
 import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
 import { FacetWithValues } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+/**
+ * @description
+ * Allows the selection of multiple FacetValues via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent FacetValue IDs.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class FacetValueFormInputComponent implements FormInputComponent, OnInit {
     private dataService;
     static readonly id: DefaultFormComponentId;

package/core/shared/dynamic-form-inputs/number-form-input/number-form-input.component.d.ts

@@ -1,9 +1,21 @@
 import { FormControl } from '@angular/forms';
 import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { FormInputComponent } from '../../../common/component-registry-types';
+/**
+ * @description
+ * Displays a number input. Default input for `int` and `float` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class NumberFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;
     formControl: FormControl;
     config: DefaultFormComponentConfig<'number-form-input'>;
+    get prefix(): string | undefined;
+    get suffix(): string | undefined;
+    get min(): number | undefined;
+    get max(): number | undefined;
+    get step(): number | undefined;
 }

package/core/shared/dynamic-form-inputs/password-form-input/password-form-input.component.d.ts

@@ -1,6 +1,13 @@
 import { FormControl } from '@angular/forms';
 import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
+/**
+ * @description
+ * Displays a password text input. Should be used with `string` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class PasswordFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;

package/core/shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component.d.ts

@@ -5,6 +5,14 @@ import { Observable } from 'rxjs';
 import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
 import { GetProductVariant, ProductSelectorSearch } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+/**
+ * @description
+ * Allows the selection of multiple ProductVariants via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {
     private dataService;
     static readonly id: DefaultFormComponentId;

package/core/shared/dynamic-form-inputs/register-dynamic-input-components.d.ts

@@ -1,16 +1,18 @@
 import { FactoryProvider, Type } from '@angular/core';
 import { FormInputComponent } from '../../common/component-registry-types';
 import { CustomFieldControl, CustomFieldEntityName } from '../../providers/custom-field-component/custom-field-component.service';
+import { JsonEditorFormInputComponent } from './code-editor-form-input/json-editor-form-input.component';
 import { CurrencyFormInputComponent } from './currency-form-input/currency-form-input.component';
 import { CustomerGroupFormInputComponent } from './customer-group-form-input/customer-group-form-input.component';
 import { FacetValueFormInputComponent } from './facet-value-form-input/facet-value-form-input.component';
+import { PasswordFormInputComponent } from './password-form-input/password-form-input.component';
 import { ProductSelectorFormInputComponent } from './product-selector-form-input/product-selector-form-input.component';
-import { TextFormInputComponent } from './text-form-input/text-form-input.component';
-export declare const defaultFormInputs: (typeof ProductSelectorFormInputComponent | typeof CustomerGroupFormInputComponent | typeof TextFormInputComponent | typeof CurrencyFormInputComponent | typeof FacetValueFormInputComponent)[];
+export declare const defaultFormInputs: (typeof ProductSelectorFormInputComponent | typeof CustomerGroupFormInputComponent | typeof PasswordFormInputComponent | typeof CurrencyFormInputComponent | typeof FacetValueFormInputComponent | typeof JsonEditorFormInputComponent)[];
 /**
  * @description
  * Registers a custom FormInputComponent which can be used to control the argument inputs
- * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc)
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * a custom field.
  *
  * @example
  * ```TypeScript
@@ -23,10 +25,41 @@ export declare const defaultFormInputs: (typeof ProductSelectorFormInputComponen
  * })
  * 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;
 /**
  * @description
+ * **Deprecated** use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
  * Registers a custom component to act as the form input control for the given custom field.
  * This should be used in the NgModule `providers` array of your ui extension module.
  *
@@ -41,6 +74,10 @@ export declare function registerFormInputComponent(id: string, component: Type<F
  * })
  * export class MyUiExtensionModule {}
  * ```
+ *
+ * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
+ * @docsCategory custom-input-components
  */
 export declare function registerCustomFieldComponent(entity: CustomFieldEntityName, fieldName: string, component: Type<CustomFieldControl>): FactoryProvider;
 /**

package/core/shared/dynamic-form-inputs/relation-form-input/relation-form-input.component.d.ts

@@ -2,6 +2,15 @@ import { FormControl } from '@angular/forms';
 import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { FormInputComponent } from '../../../common/component-registry-types';
 import { RelationCustomFieldConfig } from '../../../common/generated-types';
+/**
+ * @description
+ * 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 {@link registerFormInputComponent}.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class RelationFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;

package/core/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.d.ts

@@ -0,0 +1,16 @@
+import { FormControl } from '@angular/forms';
+import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+import { FormInputComponent } from '../../../common/component-registry-types';
+/**
+ * @description
+ * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+export declare class RichTextFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId;
+    readonly: boolean;
+    formControl: FormControl;
+    config: DefaultFormComponentConfig<'rich-text-form-input'>;
+}

package/core/shared/dynamic-form-inputs/select-form-input/select-form-input.component.d.ts

@@ -2,9 +2,18 @@ import { FormControl } from '@angular/forms';
 import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { FormInputComponent } from '../../../common/component-registry-types';
 import { CustomFieldConfigFragment } from '../../../common/generated-types';
+/**
+ * @description
+ * Uses a select input to allow the selection of a string value. Should be used with
+ * `string` type fields with options.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class SelectFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;
     formControl: FormControl;
     config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
+    get options(): any;
 }

package/core/shared/dynamic-form-inputs/text-form-input/text-form-input.component.d.ts

@@ -1,9 +1,18 @@
 import { FormControl } from '@angular/forms';
-import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
-import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
+import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+import { FormInputComponent } from '../../../common/component-registry-types';
+/**
+ * @description
+ * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class TextFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;
     formControl: FormControl;
-    config: InputComponentConfig;
+    config: DefaultFormComponentConfig<'text-form-input'>;
+    get prefix(): string | undefined;
+    get suffix(): string | undefined;
 }

package/core/shared/dynamic-form-inputs/textarea-form-input/textarea-form-input.component.d.ts

@@ -1,6 +1,13 @@
 import { FormControl } from '@angular/forms';
 import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { FormInputComponent } from '../../../common/component-registry-types';
+/**
+ * @description
+ * Uses textarea form input. This is the default input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 export declare class TextareaFormInputComponent implements FormInputComponent {
     static readonly id: DefaultFormComponentId;
     readonly: boolean;

package/core/shared/pipes/asset-preview.pipe.d.ts

@@ -1,5 +1,19 @@
 import { PipeTransform } from '@angular/core';
 import { AssetFragment } from '../../common/generated-types';
+/**
+ * @description
+ * 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" />
+ * ```
+ *
+ * @docsCategory pipes
+ */
 export declare class AssetPreviewPipe implements PipeTransform {
     transform(asset?: AssetFragment, preset?: string | number): string;
 }

package/core/shared/pipes/duration.pipe.d.ts

@@ -1,8 +1,16 @@
 import { PipeTransform } from '@angular/core';
 import { I18nService } from '../../providers/i18n/i18n.service';
 /**
+ * @description
  * Displays a number of milliseconds in a more human-readable format,
  * e.g. "12ms", "33s", "2:03m"
+ *
+ * @example
+ * ```TypeScript
+ * {{ timeInMs | duration }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class DurationPipe implements PipeTransform {
     private i18nService;

package/core/shared/pipes/file-size.pipe.d.ts

@@ -1,6 +1,14 @@
 import { PipeTransform } from '@angular/core';
 /**
+ * @description
  * Formats a number into a human-readable file size string.
+ *
+ * @example
+ * ```TypeScript
+ * {{ fileSizeInBytes | filesize }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class FileSizePipe implements PipeTransform {
     transform(value: number, useSiUnits?: boolean): any;

package/core/shared/pipes/has-permission.pipe.d.ts

@@ -1,13 +1,15 @@
 import { ChangeDetectorRef, OnDestroy, PipeTransform } from '@angular/core';
 import { DataService } from '../../data/providers/data.service';
 /**
+ * @description
  * 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>
  * ```
+ * @docsCategory pipes
  */
 export declare class HasPermissionPipe implements PipeTransform, OnDestroy {
     private dataService;

package/core/shared/pipes/locale-currency-name.pipe.d.ts

@@ -2,7 +2,15 @@ import { ChangeDetectorRef, PipeTransform } from '@angular/core';
 import { DataService } from '../../data/providers/data.service';
 import { LocaleBasePipe } from './locale-base.pipe';
 /**
+ * @description
  * Displays a human-readable name for a given ISO 4217 currency code.
+ *
+ * @example
+ * ```HTML
+ * {{ order.currencyCode | localeCurrencyName }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransform {
     constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef);

package/core/shared/pipes/locale-currency.pipe.d.ts

@@ -1,6 +1,18 @@
 import { ChangeDetectorRef, PipeTransform } from '@angular/core';
 import { DataService } from '../../data/providers/data.service';
 import { LocaleBasePipe } from './locale-base.pipe';
+/**
+ * @description
+ * Formats a Vendure monetary value (in cents) into the correct format for the configured currency and display
+ * locale.
+ *
+ * @example
+ * ```HTML
+ * {{ variant.priceWithTax | localeCurrency }}
+ * ```
+ *
+ * @docsCategory pipes
+ */
 export declare class LocaleCurrencyPipe extends LocaleBasePipe implements PipeTransform {
     constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef);
     transform(value: unknown, ...args: unknown[]): string | unknown;

package/core/shared/pipes/locale-date.pipe.d.ts

@@ -5,6 +5,13 @@ import { LocaleBasePipe } from './locale-base.pipe';
  * @description
  * 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 }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class LocaleDatePipe extends LocaleBasePipe implements PipeTransform {
     constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef);

package/core/shared/pipes/locale-language-name.pipe.d.ts

@@ -2,7 +2,15 @@ import { ChangeDetectorRef, PipeTransform } from '@angular/core';
 import { DataService } from '../../data/providers/data.service';
 import { LocaleBasePipe } from './locale-base.pipe';
 /**
- * Displays a human-readable name for a given ISO 4217 currency code.
+ * @description
+ * Displays a human-readable name for a given ISO 639-1 language code.
+ *
+ * @example
+ * ```HTML
+ * {{ 'zh_Hant' | localeLanguageName }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class LocaleLanguageNamePipe extends LocaleBasePipe implements PipeTransform {
     constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef);

package/core/shared/pipes/locale-region-name.pipe.d.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectorRef, PipeTransform } from '@angular/core';
+import { DataService } from '../../data/providers/data.service';
+import { LocaleBasePipe } from './locale-base.pipe';
+/**
+ * @description
+ * Displays a human-readable name for a given region.
+ *
+ * @example
+ * ```HTML
+ * {{ 'GB' | localeRegionName }}
+ * ```
+ *
+ * @docsCategory pipes
+ */
+export declare class LocaleRegionNamePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef);
+    transform(value: any, locale?: unknown): string;
+}

package/core/shared/pipes/time-ago.pipe.d.ts

@@ -1,7 +1,15 @@
 import { PipeTransform } from '@angular/core';
 import { I18nService } from '../../providers/i18n/i18n.service';
 /**
+ * @description
  * Converts a date into the format "3 minutes ago", "5 hours ago" etc.
+ *
+ * @example
+ * ```HTML
+ * {{ order.orderPlacedAt | timeAgo }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 export declare class TimeAgoPipe implements PipeTransform {
     private i18nService;