@smallpearl/ngx-helper 0.29.23

package/README.md

@@ -0,0 +1,230 @@
+# ngx-helper
+
+A library of UI components that covers requirements not met by standard 
+components in `@angular/material` library.
+
+# Components
+
+## qq-mat-file-input
+A File Input Control that shows a thumbnail of the selected file. This can be
+used wherever an <input matInput type='file'> is required.
+
+## qq-mat-tel-input
+A lightweight telephone numner input control that allows country selection by
+typing the country name or country code.
+
+Dependencies:
+  * google-libphonenumber - ^3.2.34
+  * ngx-mat-select-search - ^7.0.5
+
+
+## qq-mat-menu-list-item
+A primitive component for the `qq-mat-menu-pane` component that allows building
+a side menu based UI. This component supports hierarchical relationship with
+itself, in which case the the parent menu item componet will display a chevron
+to indicate child menu items.
+
+Menu item can specified as the `item` attribute value of type `NavItem`.
+
+### Inputs
+
+| Name | Description |
+|------|-------------|
+| item | `NavItem` object representing the menu item. |
+
+### Color customization
+Since application's UI (where this component will be typically used) would
+require color customization, this component uses the following CSS variables
+for its color.
+
+
+| Variable | Description |
+|----------|-------------|
+| --qq-menu-item-bg-color | Menu item background color |
+| --qq-menu-item-fg-color | Menu item foreground color |
+| --qq-highlighted-menu-item-bg-color | Highlighted menu item background color |
+| --qq-highlighted-menu-item-fg-color | Highlighted menu item foreground color |
+
+## qq-mat-menu-pane
+A parent container component that functions as the menu pane for the
+`mat-sidenav` based user interface. The sidenav user interface (or layout),
+consisting of a sidenav and a top toolbar, is wrapped as a component in
+`sp-mat-menu-layout` described below.
+
+This component takes an array of `NavItem` objects and renders it as the menu
+in a container `div`. Typically this `div` will be hosted in a `mat-sidenav` as
+part of an applications primary UI.
+
+### Inputs
+
+| Name | Description |
+|------|-------------|
+| brandingImage | Branding logo (32x32) that will be displayed on the top of the menu pane. |
+| brandingText | Branding text that is displayed next to the logo on the top of the menu pane. |
+| menuItems | Menu items which is an array of `NavItem` objects. |
+| menuPaneFooterContent | `TemplateRef<>` content of which will be used as the footer at the bottom of the pane. |
+| title | Title text displayed above the the menu items. |
+| backButtonHref | If specified, the `href` for the back button displayed on the top. Will not be displayed if not set. |
+| matSideNav | `MatSideNav` instance that will host the menu pane. |
+
+### Example
+
+See `mat-side-menu-layout` implementation for how this component is used.
+
+## mat-side-menu-layout
+A component that helps implement a side menu user interface with a top toolbar.
+The layout is responsive and hides the side menu when run on small screens.
+Toolbar displays the app title and on the right can accommodate buttons or any
+other content (via content projection).
+
+To use this component, initialize it with the branding logo & text, application
+title and menu items (`NavItem[]`). This is the sample code from the example
+in this repo: -
+```
+    <sp-mat-menu-layout
+      brandingImage="assets/angular.png"
+      brandingText="SMALLPEARL"
+      appTitle="QQBOOKS"
+      [menuItems]="menuItems"
+      [menuPaneFooterContent]="versionInfoFooter"
+      [toolbarTitleContent]="toolbarTitle"
+    ></sp-mat-menu-layout>
+    <ng-template #versionInfoFooter>
+      <div style="text-align: center; font-size: 0.8em;">
+        <select name="language" id="language">
+          <option value="en">English</option>
+          <option value="zh">中文</option>
+        </select>
+        <br />
+        <small>2.3.102</small>
+      </div>
+    </ng-template>
+    <ng-template #toolbarTitle>
+      <button mat-button [matMenuTriggerFor]="otherCommunitiesMenu">
+        <h4 class="community-name">Signature Park</h4>
+        <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
+      </button>
+      <mat-menu #otherCommunitiesMenu="matMenu">
+        <button mat-menu-item>Cavenagh Garden</button>
+        <button mat-menu-item>Cashew Heights</button>
+      </mat-menu>
+    </ng-template>
+        <ng-template #toolbarEndContent>
+      <button mat-icon-button (click)="onNotificationsToggle()">
+        <mat-icon>notifications</mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        class="user-button"
+        [matMenuTriggerFor]="userProfileMenu"
+      >
+        <img src="assets/avatar.jpg" alt="" />
+      </button>
+      <mat-menu #userProfileMenu="matMenu">
+        <button mat-menu-item (click)="onUpdateProfile()">
+          <mat-icon>face</mat-icon>
+          <span>Profile</span>
+        </button>
+        <button mat-menu-item (click)="onChangePassword()">
+          <mat-icon>password</mat-icon>
+          <span>Change password</span>
+        </button>
+        <button mat-menu-item (click)="onSignOut()">
+          <mat-icon>logout</mat-icon>
+          <span>Sign out</span>
+        </button>
+      </mat-menu>
+    </ng-template>
+```
+
+### Inputs
+| Name | Type | Description |
+|------|------|-------|
+| showBackButton | boolean | A boolean property that controls if a Back button should be displayed at the top of the side menu. This is useful for secondary menus (note that this is NOT a submenu) from where a navigation path to the parent menu ought to be provided. |
+| defaultBackButtonHref | string | The href for the back button is typically automatically determined. If there's no back history, the back button (if specified) will use this href. |
+| brandingImage | string | Branding logo (32x32) that will be displayed on the top of the menu pane. |
+| brandingText | string | Branding text that is displayed next to the logo on the top of the menu pane. |
+| menuItems | NavItem[] | Menu items which is an array of `NavItem` objects. |
+| appTitle | string | Application title. |
+| menuPaneFooterContent | `TemplateRef<any>` | NgTemplate for the footer displayed below side menu. This will be passed to the `qq-mat-menu-pane`. |
+| toolbarEndContent | `TemplateRef<any>` | NgTemplate for the content displayed at the end of the top toolbar. |
+| infoPaneContent | `TemplateRef<any>` | NgTemplate for the content displayed in the information pane at the end of the page. |
+| toolbarTitleContent | `TemplateRef<any>` | NgTemplate for the toolbar title. If specified, `appTitle` will be ignored. |
+| infoPaneMinWidth | number | Minimum width of the info pane at the end of the page (right on LTR text). |
+| infoPaneMaxWidth | number | Maximum width of the info pane at the end of the page (right on LTR text). |
+| contentContainerClass | string | If specified, the CSS class that is applied to the content container div. This allows global styling of the container class (possibly padding, margin, color, etc) that will be applied to all the compoents corresponding to each menu item's link. |
+| menuTitle | string | A title for the menu pane. Typically used in secondary side-menu layout pages. Defaults to an empty string. |
+
+### CSS
+
+| Variable | Description |
+|----------|-------------|
+| --qq-sidenav-bg-color | Sidenav menu pane background color |
+| --qq-sidenav-fg-color | Sidenav menu pane foreground color |
+| --qq-toolbar-bg-color | Toolbar background color |
+| --qq-toolbar-fg-color | Toolbar foreground color |
+| --qq-sidenav-border-color | Sidemenu border color |
+| --qq-toolbar-border-color | Toolbar border color |
+| --qq-menu-item-fg-color | Menu item foreground color |
+| --qq-menu-item-bg-color | Menu item background color |
+| --qq-highlighted-menu-item-fg-color | Highlighted menu item foreground color |
+| --qq-highlighted-menu-item-bg-color | Highlighted menu item background color |
+
+### Info pane
+
+The component supports an information pane on the end of the pag. But it's
+hidden by default and has to be explicitly shown. One way to do that would be
+to query the `infoPane` member of `SPMatMenuLayoutComponent`
+which is an instance of the `MatSideNav` component. You can toggle its
+visibility by calling its `toggle()` method. An approach could be to show a
+button at the end of the toolbar and then call `infoPane.toggle()` when the
+button is selected.
+
+```
+  export class AppHomeComponent implements OnInit {
+    @ViewChild(SPMatMenuLayoutComponent)
+    sideMenuLayout: SPMatMenuLayoutComponent;
+
+    ngOnInit(): void {}
+
+    ...
+    onNotificationsToggle() {
+      if (this.sideMenuLayout) {
+        this.sideMenuLayout.infoPane.toggle();
+      }
+    }
+    ...
+  }
+```
+
+## NavItem
+
+This is the interface that is used to define the side menu items and pass it
+as the value for the `menuItems` property. It is defined as:-
+
+```
+export interface NavItem {
+  text: string;
+  icon: string;
+  iconType?: 'mat' | 'bi' | 'fa';
+  disabled?: boolean;
+  route?: string;
+  children?: NavItem[];
+  backButton?: boolean;
+  backHref?: string;
+}
+```
+Members are described in the following table:
+
+| Member | Description |
+|-------|----|
+| text | The menu item text |
+| icon | Icon displayed along with the text |
+| iconType | One of {'mat'|'bi'|'fa'}. If not specified, defaults to 'mat' |
+| disabled | Indicates that the menu item is disabled |
+| route | The relative URL to navigate when the item is selected |
+| children | If this item is a container for child menu items, set this to an array of `NavItem` objects |
+| backButton | Used internally |
+| backHref | Used internally |
+
+

package/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/version';
+export * from './src/ngx-helper';

package/core/src/ngx-helper.d.ts

@@ -0,0 +1,7 @@
+/** Version of the ngx-helper library */
+import { InjectionToken } from '@angular/core';
+export interface SPNgxHelperConfig {
+    i18nTranslate: (label: string, context?: any) => string;
+}
+export declare const SP_NGX_HELPER_CONFIG: InjectionToken<SPNgxHelperConfig>;
+export declare function getNgxHelperConfig(): SPNgxHelperConfig;

package/core/src/version.d.ts

@@ -0,0 +1 @@
+export declare const NGX_HELPER_VERSION = "0.1.0";

package/entity-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/entity-field-spec';
+export * from './src/provider';

package/entity-field/src/entity-field-spec.d.ts

@@ -0,0 +1,69 @@
+import { SPNgxHelperConfig } from '@smallpearl/ngx-helper/core';
+import { SPIntlDateFormat } from '@smallpearl/ngx-helper/locale';
+import { SPEntityFieldConfig } from './provider';
+/**
+ * This structure defines the data formatting details for a field of the
+ * entity. All entity fields need not necessarily be actual entity object's
+ * properties. Fields can also be computed fields, in which case the valueFn
+ * should be initialized with a valid function to provide the field's value.
+ */
+export type SPEntityFieldSpec<TEntity extends {
+    [P in IdKey]: PropertyKey;
+}, IdKey extends string = 'id'> = {
+    name: string;
+    label?: string;
+    valueOptions?: {
+        dateTimeFormat?: SPIntlDateFormat;
+        isCurrency?: boolean;
+        currency?: string;
+        class?: string;
+        alignment?: 'start' | 'center' | 'end';
+        routerLink?: ((e: TEntity) => string[]) | [string];
+    };
+    valueFn?: (item: TEntity) => string | number | Date | boolean;
+};
+/**
+ * A class that represents a SPEntityFieldSpec<>. This is typically used
+ * by the library to evaluate a SPEntityFieldSpec<> object.
+ */
+export declare class SPEntityField<TEntity extends {
+    [P in IdKey]: PropertyKey;
+}, IdKey extends string = 'id'> {
+    helperConfig: SPNgxHelperConfig;
+    fieldConfig?: SPEntityFieldConfig | undefined;
+    _fieldSpec: SPEntityFieldSpec<TEntity, IdKey>;
+    constructor(spec: SPEntityFieldSpec<TEntity, IdKey> | string, helperConfig: SPNgxHelperConfig, fieldConfig?: SPEntityFieldConfig | undefined);
+    get spec(): SPEntityFieldSpec<TEntity, IdKey>;
+    /**
+     * Returns the effective fieldValueOptions by merging the global field
+     * options (if one has been spefified) with the local field value options.
+     * @returns SPEntityFieldSpec<any>['valueOptions']
+     */
+    get options(): {
+        dateTimeFormat?: SPIntlDateFormat;
+        isCurrency?: boolean;
+        currency?: string;
+        class?: string;
+        alignment?: "start" | "center" | "end";
+        routerLink?: [string] | ((e: TEntity) => string[]) | undefined;
+    };
+    /**
+     * @returns the label for the field.
+     */
+    label(): string;
+    /**
+     * Given an entity, returns the value of the field matching the
+     * SPEntityFieldSpec<> in fieldSpec.
+     * @param entity TEntity instance which will be evaluated for
+     * SPEntityFieldSpec<>.
+     * @returns
+     */
+    value(entity: TEntity): any;
+    /**
+     * If specified, will be added to the CSS classes of the field's wrapper
+     * element.
+     */
+    get class(): string;
+    hasRouterLink(entity: TEntity): boolean;
+    getRouterLink(entity: TEntity): string[];
+}

package/entity-field/src/provider.d.ts

@@ -0,0 +1,27 @@
+import { InjectionToken } from '@angular/core';
+import { SPEntityFieldSpec } from './entity-field-spec';
+export type FIELD_VALUE_FN = (entity: any, fieldName: string) => string | number | Date | boolean;
+/**
+ * Global config for SPEntityField component.
+ */
+export interface SPEntityFieldConfig {
+    /**
+     * These are global field value functions.
+     *
+     * If a value function for a field is not explicitly specified, this map is
+     * looked up with the field name. If an entry exists in this table, it will
+     * be used to render the field's value.
+     *
+     * This is useful for formatting certain fields which tend to have the
+     * same name across the app. For instance fields such as 'amount', 'total'
+     * or 'balance'. Or 'date', 'timestamp', etc.
+     */
+    fieldValueFns?: Map<string, FIELD_VALUE_FN>;
+    /**
+     * Similar to above, but allows setting the options for certain fields
+     * globally. As in the case of `fieldValueFns`, the per field specification,
+     * if one exists, takes precedence over the global setting.
+     */
+    fieldValueOptions?: Map<string, SPEntityFieldSpec<any>['valueOptions']>;
+}
+export declare const SP_ENTITY_FIELD_CONFIG: InjectionToken<SPEntityFieldConfig>;

package/fesm2022/smallpearl-ngx-helper-core.mjs

@@ -0,0 +1,23 @@
+import { InjectionToken, inject } from '@angular/core';
+
+const NGX_HELPER_VERSION = '0.1.0';
+
+/** Version of the ngx-helper library */
+const SP_NGX_HELPER_CONFIG = new InjectionToken('SPNgxHelperConfig');
+function getNgxHelperConfig() {
+    const defaultNgxHelperConfig = {
+        i18nTranslate: (label, context) => label
+    };
+    const helperConfig = inject(SP_NGX_HELPER_CONFIG, { optional: true });
+    return {
+        ...defaultNgxHelperConfig,
+        ...(helperConfig ?? {}),
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_HELPER_VERSION, SP_NGX_HELPER_CONFIG, getNgxHelperConfig };
+//# sourceMappingURL=smallpearl-ngx-helper-core.mjs.map

package/fesm2022/smallpearl-ngx-helper-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smallpearl-ngx-helper-core.mjs","sources":["../../../../projects/smallpearl/ngx-helper/core/src/version.ts","../../../../projects/smallpearl/ngx-helper/core/src/ngx-helper.ts","../../../../projects/smallpearl/ngx-helper/core/smallpearl-ngx-helper-core.ts"],"sourcesContent":["export const NGX_HELPER_VERSION = '0.1.0';\n","/** Version of the ngx-helper library */\nimport { inject, InjectionToken } from '@angular/core';\n\nexport interface SPNgxHelperConfig {\n  i18nTranslate: (label: string, context?: any) => string;\n}\n\nexport const SP_NGX_HELPER_CONFIG = new InjectionToken<SPNgxHelperConfig>(\n  'SPNgxHelperConfig'\n);\n\nexport function getNgxHelperConfig(): SPNgxHelperConfig {\n  const defaultNgxHelperConfig: SPNgxHelperConfig = {\n    i18nTranslate: (label: string, context?: any) => label\n  }\n  const helperConfig = inject(SP_NGX_HELPER_CONFIG, {optional: true});\n  return {\n    ...defaultNgxHelperConfig,\n    ...(helperConfig ?? {}),\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;;ACAlC;MAOa,oBAAoB,GAAG,IAAI,cAAc,CACpD,mBAAmB;SAGL,kBAAkB,GAAA;AAChC,IAAA,MAAM,sBAAsB,GAAsB;QAChD,aAAa,EAAE,CAAC,KAAa,EAAE,OAAa,KAAK;KAClD;AACD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oBAAoB,EAAE,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC;IACnE,OAAO;AACL,QAAA,GAAG,sBAAsB;AACzB,QAAA,IAAI,YAAY,IAAI,EAAE,CAAC;KACxB;AACH;;ACpBA;;AAEG;;;;"}

package/fesm2022/smallpearl-ngx-helper-entity-field.mjs

@@ -0,0 +1,112 @@
+import { spFormatDate, spFormatCurrency } from '@smallpearl/ngx-helper/locale';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * A class that represents a SPEntityFieldSpec<>. This is typically used
+ * by the library to evaluate a SPEntityFieldSpec<> object.
+ */
+class SPEntityField {
+    helperConfig;
+    fieldConfig;
+    _fieldSpec;
+    constructor(spec, helperConfig, fieldConfig) {
+        this.helperConfig = helperConfig;
+        this.fieldConfig = fieldConfig;
+        if (typeof spec === 'string') {
+            this._fieldSpec = {
+                name: spec,
+            };
+        }
+        else {
+            this._fieldSpec = spec;
+        }
+    }
+    get spec() {
+        return this._fieldSpec;
+    }
+    /**
+     * Returns the effective fieldValueOptions by merging the global field
+     * options (if one has been spefified) with the local field value options.
+     * @returns SPEntityFieldSpec<any>['valueOptions']
+     */
+    get options() {
+        let globalFieldValueOptions = {};
+        if (this.fieldConfig && this.fieldConfig?.fieldValueOptions && this.fieldConfig.fieldValueOptions.has(this._fieldSpec.name)) {
+            globalFieldValueOptions = this.fieldConfig.fieldValueOptions.get(this._fieldSpec.name);
+        }
+        return {
+            ...globalFieldValueOptions,
+            ...(this._fieldSpec?.valueOptions ?? {})
+        };
+    }
+    /**
+     * @returns the label for the field.
+     */
+    label() {
+        return this.helperConfig.i18nTranslate(this._fieldSpec.label ?? this._fieldSpec.name);
+    }
+    /**
+     * Given an entity, returns the value of the field matching the
+     * SPEntityFieldSpec<> in fieldSpec.
+     * @param entity TEntity instance which will be evaluated for
+     * SPEntityFieldSpec<>.
+     * @returns
+     */
+    value(entity) {
+        let val = undefined;
+        if (!this._fieldSpec.valueFn) {
+            if (this.fieldConfig &&
+                this.fieldConfig?.fieldValueFns &&
+                this.fieldConfig.fieldValueFns.has(this._fieldSpec.name)) {
+                val = this.fieldConfig.fieldValueFns.get(this._fieldSpec.name)(entity, this._fieldSpec.name);
+            }
+            else {
+                val = entity[this._fieldSpec.name];
+            }
+        }
+        else {
+            val = this._fieldSpec.valueFn(entity);
+        }
+        const valueOptions = this.options;
+        if (val instanceof Date) {
+            val = spFormatDate(val);
+        }
+        else if (typeof val === 'number' &&
+            valueOptions?.isCurrency) {
+            val = spFormatCurrency(val, this._fieldSpec?.valueOptions?.currency);
+        }
+        else if (typeof val === 'boolean') {
+            val = val ? '✔' : '✖';
+        }
+        return val;
+    }
+    /**
+     * If specified, will be added to the CSS classes of the field's wrapper
+     * element.
+     */
+    get class() {
+        return this._fieldSpec?.valueOptions?.class ?? '';
+    }
+    hasRouterLink(entity) {
+        return !!this._fieldSpec?.valueOptions?.routerLink;
+    }
+    getRouterLink(entity) {
+        const rl = this._fieldSpec?.valueOptions?.routerLink;
+        if (rl) {
+            if (typeof rl == 'function') {
+                return rl(entity);
+            }
+            return rl;
+        }
+        return [];
+    }
+}
+
+const SP_ENTITY_FIELD_CONFIG = new InjectionToken('SPEntityFieldConfig');
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SPEntityField, SP_ENTITY_FIELD_CONFIG };
+//# sourceMappingURL=smallpearl-ngx-helper-entity-field.mjs.map

package/fesm2022/smallpearl-ngx-helper-entity-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smallpearl-ngx-helper-entity-field.mjs","sources":["../../../../projects/smallpearl/ngx-helper/entity-field/src/entity-field-spec.ts","../../../../projects/smallpearl/ngx-helper/entity-field/src/provider.ts","../../../../projects/smallpearl/ngx-helper/entity-field/smallpearl-ngx-helper-entity-field.ts"],"sourcesContent":["import { SPNgxHelperConfig } from '@smallpearl/ngx-helper/core';\nimport {\n  spFormatCurrency,\n  spFormatDate,\n  SPIntlDateFormat,\n} from '@smallpearl/ngx-helper/locale';\nimport { SPEntityFieldConfig } from './provider';\n\n/**\n * This structure defines the data formatting details for a field of the\n * entity. All entity fields need not necessarily be actual entity object's\n * properties. Fields can also be computed fields, in which case the valueFn\n * should be initialized with a valid function to provide the field's value.\n */\nexport type SPEntityFieldSpec<TEntity extends { [P in IdKey]: PropertyKey },  IdKey extends string = 'id'> = {\n  // Column name. If valueFn is not specified, this will be used as the\n  // key name to retrieve the value for the column from TEntity.\n  name: string;\n  // If omitted, 'name' will be used as field label.\n  label?: string;\n  // Column value specific formatting options. Currently, only used for\n  // Date types.\n  valueOptions?: {\n    // Specify the same format string argument that is passed to DatePipe.\n    dateTimeFormat?: SPIntlDateFormat;\n    // If boolean, number field will be formatted using spFormatCurrency()\n    // using the current currency or 'currency' value below.\n    isCurrency?: boolean;\n    // Currency code, if different from default locale.\n    currency?: string;\n    // CSS class name; if provided will be applied to field value's wrapper\n    // element. This will be <td> & <th>.\n    class?: string;\n    // Alignment options. Field's value will be aligned based on this.\n    alignment?: 'start'|'center'|'end';\n    // A fixed string or a function that returns an array of strings\n    // to be used as the routerlink for the column value.\n    routerLink?: ((e: TEntity) => string[])|[string];\n  };\n  // If the column value cannot be derived by simple TEntity[name] lookup,\n  // use this function to return a custom computed or formatted value.\n  valueFn?: (item: TEntity) => string | number | Date | boolean;\n};\n\n/**\n * A class that represents a SPEntityFieldSpec<>. This is typically used\n * by the library to evaluate a SPEntityFieldSpec<> object.\n */\nexport class SPEntityField<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> {\n  public _fieldSpec!: SPEntityFieldSpec<TEntity, IdKey>;\n\n  constructor(\n    spec: SPEntityFieldSpec<TEntity, IdKey> | string,\n    public helperConfig: SPNgxHelperConfig,\n    public fieldConfig?: SPEntityFieldConfig\n  ) {\n    if (typeof spec === 'string') {\n      this._fieldSpec = {\n        name: spec,\n      };\n    } else {\n      this._fieldSpec = spec;\n    }\n  }\n\n  get spec() {\n    return this._fieldSpec;\n  }\n\n  /**\n   * Returns the effective fieldValueOptions by merging the global field\n   * options (if one has been spefified) with the local field value options.\n   * @returns SPEntityFieldSpec<any>['valueOptions']\n   */\n  get options() {\n    let globalFieldValueOptions: SPEntityFieldSpec<any>['valueOptions'] = {};\n    if (this.fieldConfig && this.fieldConfig?.fieldValueOptions && this.fieldConfig.fieldValueOptions.has(this._fieldSpec.name)) {\n      globalFieldValueOptions = this.fieldConfig.fieldValueOptions.get(this._fieldSpec.name);\n    }\n    return {\n      ...globalFieldValueOptions,\n      ...(this._fieldSpec?.valueOptions ?? {})\n    };\n  }\n  /**\n   * @returns the label for the field.\n   */\n  label() {\n    return this.helperConfig.i18nTranslate(\n      this._fieldSpec.label ?? this._fieldSpec.name\n    );\n  }\n\n  /**\n   * Given an entity, returns the value of the field matching the\n   * SPEntityFieldSpec<> in fieldSpec.\n   * @param entity TEntity instance which will be evaluated for\n   * SPEntityFieldSpec<>.\n   * @returns\n   */\n  value(entity: TEntity) {\n    let val = undefined;\n    if (!this._fieldSpec.valueFn) {\n      if (\n        this.fieldConfig &&\n        this.fieldConfig?.fieldValueFns &&\n        this.fieldConfig.fieldValueFns.has(this._fieldSpec.name)\n      ) {\n        val = this.fieldConfig.fieldValueFns.get(this._fieldSpec.name)!(entity, this._fieldSpec.name);\n      } else {\n        val = (entity as any)[this._fieldSpec.name];\n      }\n    } else {\n      val = this._fieldSpec.valueFn(entity);\n    }\n    const valueOptions = this.options;\n    if (val instanceof Date) {\n      val = spFormatDate(val);\n    } else if (\n      typeof val === 'number' &&\n      valueOptions?.isCurrency\n    ) {\n      val = spFormatCurrency(val, this._fieldSpec?.valueOptions?.currency);\n    } else if (typeof val === 'boolean') {\n      val = val ? '✔' : '✖';\n    }\n    return val;\n  }\n\n  /**\n   * If specified, will be added to the CSS classes of the field's wrapper\n   * element.\n   */\n  get class() {\n    return this._fieldSpec?.valueOptions?.class ?? '';\n  }\n\n  hasRouterLink(entity: TEntity) {\n    return !!this._fieldSpec?.valueOptions?.routerLink;\n  }\n\n  getRouterLink(entity: TEntity) {\n    const rl = this._fieldSpec?.valueOptions?.routerLink;\n    if (rl) {\n      if (typeof rl == 'function') {\n        return rl(entity);\n      }\n      return rl\n    }\n    return [];\n  }\n}\n","import { InjectionToken } from '@angular/core';\nimport { SPEntityFieldSpec } from './entity-field-spec';\n\n\nexport type FIELD_VALUE_FN = (entity: any, fieldName: string) => string|number|Date|boolean;\n\n/**\n * Global config for SPEntityField component.\n */\nexport interface SPEntityFieldConfig {\n  /**\n   * These are global field value functions.\n   *\n   * If a value function for a field is not explicitly specified, this map is\n   * looked up with the field name. If an entry exists in this table, it will\n   * be used to render the field's value.\n   *\n   * This is useful for formatting certain fields which tend to have the\n   * same name across the app. For instance fields such as 'amount', 'total'\n   * or 'balance'. Or 'date', 'timestamp', etc.\n   */\n  fieldValueFns?: Map<string, FIELD_VALUE_FN>;\n  /**\n   * Similar to above, but allows setting the options for certain fields\n   * globally. As in the case of `fieldValueFns`, the per field specification,\n   * if one exists, takes precedence over the global setting.\n   */\n  fieldValueOptions?: Map<string, SPEntityFieldSpec<any>['valueOptions']>;\n}\n\nexport const SP_ENTITY_FIELD_CONFIG = new InjectionToken<SPEntityFieldConfig>(\n  'SPEntityFieldConfig'\n);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/smallpearl-ngx-helper-forms.mjs

@@ -0,0 +1,112 @@
+import { of, throwError, catchError } from 'rxjs';
+
+/**
+ * Handle's form validation errors sent from the server by setting the returned
+ * error code in the respective control. Errors not associated with any control
+ * in the form are attached to the form itself.
+ *
+ * These errors can then be rendered using error-tailor. All that needs to be
+ * done is to import errorTailorImports in the respective page's module and set
+ * the 'errorTailor' directive on the <form..> element.
+ *
+ * @param form FormGroup instance
+ * @param error error object
+ */
+function handleValidationErrors(form, error, cdr) {
+    if (error.status == 400) {
+        /**
+         * A helper function that converts the server error codes to an error
+         * object that can be set on the form control. If the error code is a
+         * string with embedded spaces, it is treated as an actual error message
+         * and is set as the 'serverMessage' error code. Otherwise, the error code
+         * is returned as the object { errorCode: true }.
+         * @param errorCode
+         * @returns
+         */
+        const serverErrorsToErrorObject = (errorCode) => {
+            if (!Array.isArray(errorCode)) {
+                errorCode = [errorCode];
+            }
+            const errorsObj = {};
+            errorCode.forEach((code) => {
+                if (code.includes(' ')) {
+                    // errorCode is an actual error message that we forgot to represent
+                    // as a camelcase string. So represent the error as the error code
+                    // 'serverMessage', which will be treated differently by our ErrorTailor
+                    // error's config provider. (see ionic-error-tailor.module.ts)
+                    errorsObj['serverMessage'] = { message: code };
+                }
+                else {
+                    // Real error code
+                    errorsObj[code] = true;
+                }
+            });
+            return errorsObj;
+        };
+        // server form validation errors
+        let pendingDetechChanges = false;
+        for (const controlName in error.error) {
+            const errorsObj = serverErrorsToErrorObject(error.error[controlName]);
+            if (form.contains(controlName)) {
+                const control = form.controls[controlName];
+                control.setErrors(errorsObj);
+                pendingDetechChanges = true;
+            }
+            else {
+                form.setErrors(errorsObj);
+                pendingDetechChanges = true;
+            }
+        }
+        if (pendingDetechChanges && cdr) {
+            cdr.detectChanges();
+        }
+        return of(null);
+    }
+    return throwError(() => error);
+}
+/**
+ * Returns an rxjs operator that would track an http request's error
+ * state and if the return code is 400, would enumerate the error codes
+ * set in the response body and set the error state of corresponding
+ * form controls.
+ *
+ * Use it like below:
+ *
+ *  this.http.get<User>('https://google.com/..').pipe(
+ *    setServerErrorsAsFormErrors(form),
+ *    tap(user => {
+ *      if (user) { // if user = null, it means there was a server validation
+ *                  // error.
+ *        this.user = user;
+ *      }
+ *    })
+ *  ).subscribe();
+ *
+ * Note that setServerErrorsAsFormErrors() is the last operator in
+ * the operators list. This is important because if a server validation
+ * error is encountered, setServerErrorsAsFormErrors(), would place
+ * the error on the respective form control and in the end would
+ * return Observable<null>. Any subsequent opeators that are added
+ * to the list after this should check for this null value in its
+ * handler.
+ *
+ * @param form The FormGroup instance where the controls corresponding
+ * to the errors are looked up and its control.error is set to the
+ * returned error code.
+ * @param cdr ChangeDetectorRef instance. If provided, it would be
+ * used to detect changes after the error codes are set on the form
+ * controls.
+ * @returns An rxjs op that can be added to the pipe() arg list.
+ */
+function setServerErrorsAsFormErrors(form, cdr) {
+    return function (source) {
+        return source.pipe(catchError((error) => handleValidationErrors(form, error, cdr)));
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { handleValidationErrors, setServerErrorsAsFormErrors };
+//# sourceMappingURL=smallpearl-ngx-helper-forms.mjs.map

package/fesm2022/smallpearl-ngx-helper-forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smallpearl-ngx-helper-forms.mjs","sources":["../../../../projects/smallpearl/ngx-helper/forms/src/validation-error-handler.ts","../../../../projects/smallpearl/ngx-helper/forms/smallpearl-ngx-helper-forms.ts"],"sourcesContent":["import { HttpErrorResponse } from '@angular/common/http';\nimport { ChangeDetectorRef } from '@angular/core';\nimport { UntypedFormGroup } from '@angular/forms';\nimport { catchError, Observable, of, throwError } from 'rxjs';\n\n/**\n * Handle's form validation errors sent from the server by setting the returned\n * error code in the respective control. Errors not associated with any control\n * in the form are attached to the form itself.\n *\n * These errors can then be rendered using error-tailor. All that needs to be\n * done is to import errorTailorImports in the respective page's module and set\n * the 'errorTailor' directive on the <form..> element.\n *\n * @param form FormGroup instance\n * @param error error object\n */\nexport function handleValidationErrors(\n  form: UntypedFormGroup,\n  error: HttpErrorResponse,\n  cdr?: ChangeDetectorRef\n): Observable<any> {\n  if (error.status == 400) {\n    /**\n     * A helper function that converts the server error codes to an error\n     * object that can be set on the form control. If the error code is a\n     * string with embedded spaces, it is treated as an actual error message\n     * and is set as the 'serverMessage' error code. Otherwise, the error code\n     * is returned as the object { errorCode: true }.\n     * @param errorCode\n     * @returns\n     */\n    const serverErrorsToErrorObject = (\n      errorCode: string | string[]\n    ): unknown => {\n      if (!Array.isArray(errorCode)) {\n        errorCode = [errorCode];\n      }\n      const errorsObj = {};\n      errorCode.forEach((code) => {\n        if (code.includes(' ')) {\n          // errorCode is an actual error message that we forgot to represent\n          // as a camelcase string. So represent the error as the error code\n          // 'serverMessage', which will be treated differently by our ErrorTailor\n          // error's config provider. (see ionic-error-tailor.module.ts)\n          (errorsObj as any)['serverMessage'] = { message: code };\n        } else {\n          // Real error code\n          (errorsObj as any)[code] = true;\n        }\n      });\n      return errorsObj;\n    };\n\n    // server form validation errors\n    let pendingDetechChanges = false;\n    for (const controlName in error.error) {\n      const errorsObj = serverErrorsToErrorObject(error.error[controlName]);\n      if (form.contains(controlName)) {\n        const control = form.controls[controlName];\n        control.setErrors(errorsObj as any);\n        pendingDetechChanges = true;\n      } else {\n        form.setErrors(errorsObj as any);\n        pendingDetechChanges = true;\n      }\n    }\n    if (pendingDetechChanges && cdr) {\n      cdr.detectChanges();\n    }\n    return of(null);\n  }\n  return throwError(() => error);\n}\n\n/**\n * Returns an rxjs operator that would track an http request's error\n * state and if the return code is 400, would enumerate the error codes\n * set in the response body and set the error state of corresponding\n * form controls.\n *\n * Use it like below:\n *\n *  this.http.get<User>('https://google.com/..').pipe(\n *    setServerErrorsAsFormErrors(form),\n *    tap(user => {\n *      if (user) { // if user = null, it means there was a server validation\n *                  // error.\n *        this.user = user;\n *      }\n *    })\n *  ).subscribe();\n *\n * Note that setServerErrorsAsFormErrors() is the last operator in\n * the operators list. This is important because if a server validation\n * error is encountered, setServerErrorsAsFormErrors(), would place\n * the error on the respective form control and in the end would\n * return Observable<null>. Any subsequent opeators that are added\n * to the list after this should check for this null value in its\n * handler.\n *\n * @param form The FormGroup instance where the controls corresponding\n * to the errors are looked up and its control.error is set to the\n * returned error code.\n * @param cdr ChangeDetectorRef instance. If provided, it would be\n * used to detect changes after the error codes are set on the form\n * controls.\n * @returns An rxjs op that can be added to the pipe() arg list.\n */\nexport function setServerErrorsAsFormErrors(\n  form: UntypedFormGroup,\n  cdr?: ChangeDetectorRef\n) {\n  return function <T>(source: Observable<T>): Observable<T> {\n    return source.pipe(\n      catchError((error) => handleValidationErrors(form, error, cdr))\n    );\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAKA;;;;;;;;;;;AAWG;SACa,sBAAsB,CACpC,IAAsB,EACtB,KAAwB,EACxB,GAAuB,EAAA;AAEvB,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,GAAG,EAAE;AACvB;;;;;;;;AAQG;AACH,QAAA,MAAM,yBAAyB,GAAG,CAChC,SAA4B,KACjB;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AAC7B,gBAAA,SAAS,GAAG,CAAC,SAAS,CAAC;;YAEzB,MAAM,SAAS,GAAG,EAAE;AACpB,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACzB,gBAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;;;;oBAKrB,SAAiB,CAAC,eAAe,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE;;qBAClD;;AAEJ,oBAAA,SAAiB,CAAC,IAAI,CAAC,GAAG,IAAI;;AAEnC,aAAC,CAAC;AACF,YAAA,OAAO,SAAS;AAClB,SAAC;;QAGD,IAAI,oBAAoB,GAAG,KAAK;AAChC,QAAA,KAAK,MAAM,WAAW,IAAI,KAAK,CAAC,KAAK,EAAE;YACrC,MAAM,SAAS,GAAG,yBAAyB,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrE,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;AAC1C,gBAAA,OAAO,CAAC,SAAS,CAAC,SAAgB,CAAC;gBACnC,oBAAoB,GAAG,IAAI;;iBACtB;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,SAAgB,CAAC;gBAChC,oBAAoB,GAAG,IAAI;;;AAG/B,QAAA,IAAI,oBAAoB,IAAI,GAAG,EAAE;YAC/B,GAAG,CAAC,aAAa,EAAE;;AAErB,QAAA,OAAO,EAAE,CAAC,IAAI,CAAC;;AAEjB,IAAA,OAAO,UAAU,CAAC,MAAM,KAAK,CAAC;AAChC;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;AACa,SAAA,2BAA2B,CACzC,IAAsB,EACtB,GAAuB,EAAA;AAEvB,IAAA,OAAO,UAAa,MAAqB,EAAA;QACvC,OAAO,MAAM,CAAC,IAAI,CAChB,UAAU,CAAC,CAAC,KAAK,KAAK,sBAAsB,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,CAChE;AACH,KAAC;AACH;;ACtHA;;AAEG;;;;"}