@smallpearl/ngx-helper 0.33.49 → 20.0.2

package/fesm2022/smallpearl-ngx-helper-stationary-with-line-items.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
 import { AsyncPipe, CommonModule, UpperCasePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { SP_ENTITY_FIELD_CONFIG, SPEntityField } from '@smallpearl/ngx-helper/entity-field';
-import { Observable, of } from 'rxjs';
+import { of, Observable } from 'rxjs';
 
 // @Component({
 //   standalone: true,
@@ -46,9 +46,9 @@ import { Observable, of } from 'rxjs';
 // }
 class FieldsRendererComponent {
     cdr;
-    entity = input.required();
-    fields = input.required();
-    isString = computed(() => typeof this.fields() === 'string');
+    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : []));
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
+    isString = computed(() => typeof this.fields() === 'string', ...(ngDevMode ? [{ debugName: "isString" }] : []));
     // If the field is a single string, looks up entity's properties
     // for matching field name as the string and if it doesn't exist returns
     // the string itself as the value.
@@ -58,13 +58,13 @@ class FieldsRendererComponent {
             return this.entity()[fields] ?? fields;
         }
         return '';
-    });
+    }, ...(ngDevMode ? [{ debugName: "stringValue" }] : []));
     constructor(cdr) {
         this.cdr = cdr;
     }
     ngOnInit() { }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FieldsRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FieldsRendererComponent, isStandalone: true, selector: "sp-fields-renderer", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsRendererComponent, isStandalone: true, selector: "sp-fields-renderer", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (isString()) {
       {{ stringValue() }}
     } @else {
@@ -83,7 +83,7 @@ class FieldsRendererComponent {
     }
   `, isInline: true, styles: [".field-values{padding:.2em 0;text-align:end}tr td:first-of-type{padding-right:1em}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FieldsRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsRendererComponent, decorators: [{
             type: Component,
             args: [{ imports: [AsyncPipe], selector: 'sp-fields-renderer', template: `
     @if (isString()) {
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".field-values{padding:.2em 0;text-align:end}tr td:first-of-type{padding-right:1em}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }] } });
 /**
  * A component that renders a stationary with line items, such as invoice,
  * payment receipt, bill, bill payment record, journal entry, etc. All these
@@ -120,26 +120,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * This is the first towards that long path ahead.
  */
 class StationaryWithLineItemsComponent {
-    entity = input.required();
-    title = input.required();
-    number = input();
-    leftHeader = input();
-    _leftHeaderFields = computed(() => this.getSPEntityFields(this.leftHeader()));
-    leftHeaderTemplate = input();
-    rightHeader = input();
-    _rightHeaderFields = computed(() => this.getSPEntityFields(this.rightHeader()));
-    rightHeaderTemplate = input();
-    items = input();
-    leftFooter = input();
-    _leftFooterFields = computed(() => this.getSPEntityFields(this.leftFooter()));
-    leftFooterTemplate = input();
-    rightFooter = input();
-    _rightFooterFields = computed(() => this.getSPEntityFields(this.rightFooter()));
-    rightFooterTemplate = input();
-    itemFieldName = input('items');
-    itemColumnFields = input();
-    _itemColumnFields = computed(() => this.getSPEntityFields(this.itemColumnFields()));
-    _items = computed(() => this.entity()[this.itemFieldName()]);
+    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    number = input(...(ngDevMode ? [undefined, { debugName: "number" }] : []));
+    leftHeader = input(...(ngDevMode ? [undefined, { debugName: "leftHeader" }] : []));
+    _leftHeaderFields = computed(() => this.getSPEntityFields(this.leftHeader()), ...(ngDevMode ? [{ debugName: "_leftHeaderFields" }] : []));
+    leftHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "leftHeaderTemplate" }] : []));
+    rightHeader = input(...(ngDevMode ? [undefined, { debugName: "rightHeader" }] : []));
+    _rightHeaderFields = computed(() => this.getSPEntityFields(this.rightHeader()), ...(ngDevMode ? [{ debugName: "_rightHeaderFields" }] : []));
+    rightHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "rightHeaderTemplate" }] : []));
+    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+    leftFooter = input(...(ngDevMode ? [undefined, { debugName: "leftFooter" }] : []));
+    _leftFooterFields = computed(() => this.getSPEntityFields(this.leftFooter()), ...(ngDevMode ? [{ debugName: "_leftFooterFields" }] : []));
+    leftFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "leftFooterTemplate" }] : []));
+    rightFooter = input(...(ngDevMode ? [undefined, { debugName: "rightFooter" }] : []));
+    _rightFooterFields = computed(() => this.getSPEntityFields(this.rightFooter()), ...(ngDevMode ? [{ debugName: "_rightFooterFields" }] : []));
+    rightFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "rightFooterTemplate" }] : []));
+    itemFieldName = input('items', ...(ngDevMode ? [{ debugName: "itemFieldName" }] : []));
+    itemColumnFields = input(...(ngDevMode ? [undefined, { debugName: "itemColumnFields" }] : []));
+    _itemColumnFields = computed(() => this.getSPEntityFields(this.itemColumnFields()), ...(ngDevMode ? [{ debugName: "_itemColumnFields" }] : []));
+    _items = computed(() => this.entity()[this.itemFieldName()], ...(ngDevMode ? [{ debugName: "_items" }] : []));
     ngxEntityFieldConfig = inject(SP_ENTITY_FIELD_CONFIG, { optional: true });
     constructor() { }
     ngOnInit() { }
@@ -165,8 +165,8 @@ class StationaryWithLineItemsComponent {
         }
         return of('');
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: StationaryWithLineItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: StationaryWithLineItemsComponent, isStandalone: true, selector: "sp-stationary-with-line-items", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, leftHeader: { classPropertyName: "leftHeader", publicName: "leftHeader", isSignal: true, isRequired: false, transformFunction: null }, leftHeaderTemplate: { classPropertyName: "leftHeaderTemplate", publicName: "leftHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightHeader: { classPropertyName: "rightHeader", publicName: "rightHeader", isSignal: true, isRequired: false, transformFunction: null }, rightHeaderTemplate: { classPropertyName: "rightHeaderTemplate", publicName: "rightHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, leftFooter: { classPropertyName: "leftFooter", publicName: "leftFooter", isSignal: true, isRequired: false, transformFunction: null }, leftFooterTemplate: { classPropertyName: "leftFooterTemplate", publicName: "leftFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightFooter: { classPropertyName: "rightFooter", publicName: "rightFooter", isSignal: true, isRequired: false, transformFunction: null }, rightFooterTemplate: { classPropertyName: "rightFooterTemplate", publicName: "rightFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemFieldName: { classPropertyName: "itemFieldName", publicName: "itemFieldName", isSignal: true, isRequired: false, transformFunction: null }, itemColumnFields: { classPropertyName: "itemColumnFields", publicName: "itemColumnFields", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StationaryWithLineItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StationaryWithLineItemsComponent, isStandalone: true, selector: "sp-stationary-with-line-items", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, leftHeader: { classPropertyName: "leftHeader", publicName: "leftHeader", isSignal: true, isRequired: false, transformFunction: null }, leftHeaderTemplate: { classPropertyName: "leftHeaderTemplate", publicName: "leftHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightHeader: { classPropertyName: "rightHeader", publicName: "rightHeader", isSignal: true, isRequired: false, transformFunction: null }, rightHeaderTemplate: { classPropertyName: "rightHeaderTemplate", publicName: "rightHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, leftFooter: { classPropertyName: "leftFooter", publicName: "leftFooter", isSignal: true, isRequired: false, transformFunction: null }, leftFooterTemplate: { classPropertyName: "leftFooterTemplate", publicName: "leftFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightFooter: { classPropertyName: "rightFooter", publicName: "rightFooter", isSignal: true, isRequired: false, transformFunction: null }, rightFooterTemplate: { classPropertyName: "rightFooterTemplate", publicName: "rightFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemFieldName: { classPropertyName: "itemFieldName", publicName: "itemFieldName", isSignal: true, isRequired: false, transformFunction: null }, itemColumnFields: { classPropertyName: "itemColumnFields", publicName: "itemColumnFields", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
   <div class="stationary-wrapper mat-body">
     <div class="title">{{ title() }}</div>
     @if (number()) {
@@ -268,9 +268,9 @@ class StationaryWithLineItemsComponent {
       </div>
     </div>
   </div>
-  `, isInline: true, styles: [".stationary-wrapper{padding:2em 1em}.title{font-size:1.6em;font-weight:600;text-align:end;margin-bottom:.5em}.number{font-size:1.1em;font-weight:500;text-align:end;margin-bottom:.5em}.header,.footer{display:flex;flex-direction:row;margin-top:1em}.left-header,.left-footer{display:flex;align-items:bottom;text-align:start;padding-right:1em;min-width:50%;overflow-wrap:break-word;text-wrap:wrap}.right-header,.right-footer{display:flex;justify-content:flex-end;min-width:50%;overflow:clip}.items{margin:2em 0}.items table{width:100%;border:0px solid lightgray}.items table thead{background-color:#000;color:#fff}.items table thead th{padding:.4em}.items table td{padding:.8em .4em;border-bottom:1px solid lightgray;border-right:0px solid lightgray}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: FieldsRendererComponent, selector: "sp-fields-renderer", inputs: ["entity", "fields"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".stationary-wrapper{padding:2em 1em}.title{font-size:1.6em;font-weight:600;text-align:end;margin-bottom:.5em}.number{font-size:1.1em;font-weight:500;text-align:end;margin-bottom:.5em}.header,.footer{display:flex;flex-direction:row;margin-top:1em}.left-header,.left-footer{display:flex;align-items:bottom;text-align:start;padding-right:1em;min-width:50%;overflow-wrap:break-word;text-wrap:wrap}.right-header,.right-footer{display:flex;justify-content:flex-end;min-width:50%;overflow:clip}.items{margin:2em 0}.items table{width:100%;border:0px solid lightgray}.items table thead{background-color:#000;color:#fff}.items table thead th{padding:.4em}.items table td{padding:.8em .4em;border-bottom:1px solid lightgray;border-right:0px solid lightgray}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FieldsRendererComponent, selector: "sp-fields-renderer", inputs: ["entity", "fields"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: StationaryWithLineItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StationaryWithLineItemsComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -379,7 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
     </div>
   </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".stationary-wrapper{padding:2em 1em}.title{font-size:1.6em;font-weight:600;text-align:end;margin-bottom:.5em}.number{font-size:1.1em;font-weight:500;text-align:end;margin-bottom:.5em}.header,.footer{display:flex;flex-direction:row;margin-top:1em}.left-header,.left-footer{display:flex;align-items:bottom;text-align:start;padding-right:1em;min-width:50%;overflow-wrap:break-word;text-wrap:wrap}.right-header,.right-footer{display:flex;justify-content:flex-end;min-width:50%;overflow:clip}.items{margin:2em 0}.items table{width:100%;border:0px solid lightgray}.items table thead{background-color:#000;color:#fff}.items table thead th{padding:.4em}.items table td{padding:.8em .4em;border-bottom:1px solid lightgray;border-right:0px solid lightgray}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], leftHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftHeader", required: false }] }], leftHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftHeaderTemplate", required: false }] }], rightHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightHeader", required: false }] }], rightHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightHeaderTemplate", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], leftFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftFooter", required: false }] }], leftFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftFooterTemplate", required: false }] }], rightFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightFooter", required: false }] }], rightFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightFooterTemplate", required: false }] }], itemFieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemFieldName", required: false }] }], itemColumnFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemColumnFields", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/smallpearl-ngx-helper-stationary-with-line-items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"smallpearl-ngx-helper-stationary-with-line-items.mjs","sources":["../../../../projects/smallpearl/ngx-helper/stationary-with-line-items/src/stationary-with-line-items.component.ts","../../../../projects/smallpearl/ngx-helper/stationary-with-line-items/smallpearl-ngx-helper-stationary-with-line-items.ts"],"sourcesContent":["import { AsyncPipe, CommonModule, UpperCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, OnInit, TemplateRef } from '@angular/core';\nimport { SP_ENTITY_FIELD_CONFIG, SPEntityField, SPEntityFieldSpec } from '@smallpearl/ngx-helper/entity-field';\nimport { Observable, of } from 'rxjs';\n\n\n// @Component({\n//   standalone: true,\n//   imports: [],\n//   selector: 'sp-string-or-object-renderer',\n//   template: `\n//     @if (isString()) {\n//       {{ value() }}\n//     } @else {\n//       <table>\n//         @for (row of objectAsArray(); track $index) {\n//           <tr>\n//             @for (col of row; track $index) {\n//               <td [style]=\"'text-align: ' + valueAlignment()\">{{ col }}</td>\n//             }\n//           </tr>\n//         }\n//       </table>\n//     }\n//   `,\n//   changeDetection: ChangeDetectionStrategy.OnPush\n// })\n// export class StringOrObjectRendererComponent implements OnInit {\n//   value = input.required<any>();\n//   valueAlignment = input<string>()\n//   isString = computed(() => typeof this.value() === 'string');\n//   objectAsArray = computed(() => {\n//     const arrayValues = [];\n//     const value = this.value();\n//     if (typeof value !== 'string') {\n//       for (const key in this.value()) {\n//         const keyValue = this.value()[key];\n//         arrayValues.push([key, keyValue]);\n//       }\n//     }\n//     return arrayValues;\n//   });\n\n//   constructor() { }\n\n//   ngOnInit() { }\n// }\n\n@Component({\n    imports: [AsyncPipe],\n    selector: 'sp-fields-renderer',\n    template: `\n    @if (isString()) {\n      {{ stringValue() }}\n    } @else {\n      <div class=\"\">\n        <table>\n          <tbody>\n            @for (field of fields(); track $index) {\n            <tr>\n              <td [class]=\"field.class\">{{ field.label() | async }}&colon;</td>\n              <td [class]=\"field.class\">{{ field.value(entity()) }}</td>\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  `,\n    styles: `\n  .field-values {\n    padding: 0.2em 0;\n    text-align: end;\n  }\n  tr td:first-of-type {\n    padding-right: 1em;\n  }\n  `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FieldsRendererComponent<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> implements OnInit {\n  entity = input.required<TEntity>();\n  fields = input.required<SPEntityField<TEntity, IdKey>[]>();\n\n  isString = computed(() => typeof this.fields() === 'string');\n  // If the field is a single string, looks up entity's properties\n  // for matching field name as the string and if it doesn't exist returns\n  // the string itself as the value.\n  stringValue = computed(() => {\n    const fields = this.fields();\n    if (typeof fields === 'string') {\n      return (this.entity() as any)[fields] ?? fields;\n    }\n    return '';\n  });\n\n  constructor(public cdr: ChangeDetectorRef) {}\n\n  ngOnInit() {}\n}\n\n/**\n * A component that renders a stationary with line items, such as invoice,\n * payment receipt, bill, bill payment record, journal entry, etc. All these\n * documents have a uniform format and this component abstracts out the\n * information displayed in this type of document as properties that the client\n * can provide while it takes care of the rendering.\n *\n * Ideally we would declare this as a wrapper class with the actual rendering\n * to be performed by an inner replaceable component. This way the app will be\n * able to support multiple stationary designs, which eventually can be\n * chosen by the user. Perhaps even providing them a feature to design the\n * stationary.\n *\n * This is the first towards that long path ahead.\n */\n@Component({\n    imports: [\n        CommonModule,\n        UpperCasePipe,\n        FieldsRendererComponent\n    ],\n    selector: 'sp-stationary-with-line-items',\n    template: `\n  <div class=\"stationary-wrapper mat-body\">\n    <div class=\"title\">{{ title() }}</div>\n    @if (number()) {\n      <div class=\"number\">#{{ number() }}</div>\n    }\n    <div class=\"header\">\n      <div class=\"left-header\">\n        @if (leftHeaderTemplate()) {\n          <ng-container *ngTemplateOutlet=\"leftHeaderTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (leftHeader()) {\n            @if (isString(leftHeader())) {\n              {{ leftHeader() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_leftHeaderFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n      <div class=\"right-header\">\n        @if (rightHeaderTemplate()) {\n          <ng-container *ngTemplateOutlet=\"rightHeaderTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (rightHeader()) {\n            @if (isString(rightHeader())) {\n              {{ rightHeader() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_rightHeaderFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n    </div> <!-- end <div class=\"header\"> -->\n\n    <!-- items -->\n    @if (itemColumnFields()) {\n      <div class=\"items\">\n        <table>\n          <thead>\n            @for (field of _itemColumnFields(); track $index) {\n              <th [class]=\"field.class\" [style.text-align]=\"field.spec.valueOptions?.alignment\">{{ (fieldLabel(field) | async) | uppercase }}</th>\n            }\n          </thead>\n          <tbody>\n          <!-- enumerate each element of the 'items' array and render the\n          specified columns for each. -->\n            @for (row of _items(); track $index) {\n              <tr>\n              @for (field of _itemColumnFields(); track $index) {\n                <td [class]=\"field.class\" [style.text-align]=\"field.spec.valueOptions?.alignment\" [innerHtml]=\"field.value(row)\"></td>\n              }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- end items -->\n\n    <!-- footer -->\n    <div class=\"footer\">\n      <div class=\"left-footer\">\n        @if (leftFooterTemplate()) {\n          <ng-container *ngTemplateOutlet=\"leftFooterTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (leftFooter()) {\n            @if (isString(leftFooter())) {\n              {{ leftFooter() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_leftFooterFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n      <div class=\"right-footer\">\n        @if (rightFooterTemplate()) {\n          <ng-container *ngTemplateOutlet=\"rightFooterTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (rightFooter()) {\n            @if (isString(rightFooter())) {\n              {{ rightFooter() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_rightFooterFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n  `,\n    styles: `\n  .stationary-wrapper {\n    padding: 2em 1em;\n  }\n  .title {\n    font-size: 1.6em;\n    font-weight: 600;\n    text-align: end;\n    margin-bottom: 0.5em;\n  }\n  .number {\n    font-size: 1.1em;\n    font-weight: 500;\n    text-align: end;\n    margin-bottom: 0.5em;\n  }\n  .header, .footer {\n    display: flex;\n    flex-direction: row;\n    margin-top: 1em;\n  }\n  .left-header, .left-footer {\n    display: flex;\n    align-items: bottom;\n    text-align: start;\n    padding-right: 1em;\n    min-width: 50%;\n    overflow-wrap: break-word;\n    text-wrap: wrap;\n  }\n  .right-header, .right-footer {\n    display: flex;\n    justify-content: flex-end;\n    min-width: 50%;\n    overflow: clip;\n  }\n  .items {\n    margin: 2em 0;\n  }\n  .items table {\n    width: 100%;\n    border: 0px solid lightgray;\n  }\n  .items table thead {\n    background-color: black;\n    color: white;\n    & th {\n      padding: 0.4em;\n    }\n  }\n  .items table td {\n    padding: 0.8em 0.4em;\n    border-bottom: 1px solid lightgray;\n    border-right: 0px solid lightgray\n  }\n  .footer {\n\n  }\n  `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StationaryWithLineItemsComponent<TEntity extends { [P in IdKey]: PropertyKey }, TEntityLineItem extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> implements OnInit {\n  entity = input.required<TEntity>();\n  title = input.required<string>();\n  number = input<string|number>();\n\n  leftHeader = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _leftHeaderFields = computed(() => this.getSPEntityFields(this.leftHeader()));\n  leftHeaderTemplate = input<TemplateRef<any>>();\n\n  rightHeader = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _rightHeaderFields = computed(() => this.getSPEntityFields(this.rightHeader()));\n  rightHeaderTemplate = input<TemplateRef<any>>();\n\n  items = input<{[key: string]: string}[]>();\n\n  leftFooter = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _leftFooterFields = computed(() => this.getSPEntityFields(this.leftFooter()));\n  leftFooterTemplate = input<TemplateRef<any>>();\n\n  rightFooter = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _rightFooterFields = computed(() => this.getSPEntityFields(this.rightFooter()));\n  rightFooterTemplate = input<TemplateRef<any>>();\n\n  itemFieldName = input<string>('items');\n  itemColumnFields = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>>();\n  _itemColumnFields = computed(() => this.getSPEntityFields(this.itemColumnFields()));\n\n  _items = computed(() => (this.entity() as any)[this.itemFieldName()]);\n\n  ngxEntityFieldConfig = inject(SP_ENTITY_FIELD_CONFIG, { optional: true })!;\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  isString(value: any) {\n    return typeof value === 'string';\n  }\n\n  /**\n   * Make the method a generic as we'll be using it for both TEntity and its\n   * child TEntityLineItem objects.\n   * @param fieldSpecs\n   * @returns\n   */\n  getSPEntityFields<T>(fieldSpecs: Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string|undefined): Array<SPEntityField<TEntity, IdKey>> {\n    if (fieldSpecs && typeof fieldSpecs !== 'string') {\n      return fieldSpecs.map(spec => new SPEntityField<TEntity, IdKey>(spec, this.ngxEntityFieldConfig));\n    }\n    return [];\n  }\n\n  fieldLabel(field: SPEntityField<TEntity, IdKey>): Observable<string> {\n    const label = field.label()\n    if (label) {\n      return label instanceof Observable ? label : of(label as string);\n    }\n    return of('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"smallpearl-ngx-helper-stationary-with-line-items.mjs","sources":["../../../../projects/smallpearl/ngx-helper/stationary-with-line-items/src/stationary-with-line-items.component.ts","../../../../projects/smallpearl/ngx-helper/stationary-with-line-items/smallpearl-ngx-helper-stationary-with-line-items.ts"],"sourcesContent":["import { AsyncPipe, CommonModule, UpperCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, OnInit, TemplateRef } from '@angular/core';\nimport { SP_ENTITY_FIELD_CONFIG, SPEntityField, SPEntityFieldSpec } from '@smallpearl/ngx-helper/entity-field';\nimport { Observable, of } from 'rxjs';\n\n\n// @Component({\n//   standalone: true,\n//   imports: [],\n//   selector: 'sp-string-or-object-renderer',\n//   template: `\n//     @if (isString()) {\n//       {{ value() }}\n//     } @else {\n//       <table>\n//         @for (row of objectAsArray(); track $index) {\n//           <tr>\n//             @for (col of row; track $index) {\n//               <td [style]=\"'text-align: ' + valueAlignment()\">{{ col }}</td>\n//             }\n//           </tr>\n//         }\n//       </table>\n//     }\n//   `,\n//   changeDetection: ChangeDetectionStrategy.OnPush\n// })\n// export class StringOrObjectRendererComponent implements OnInit {\n//   value = input.required<any>();\n//   valueAlignment = input<string>()\n//   isString = computed(() => typeof this.value() === 'string');\n//   objectAsArray = computed(() => {\n//     const arrayValues = [];\n//     const value = this.value();\n//     if (typeof value !== 'string') {\n//       for (const key in this.value()) {\n//         const keyValue = this.value()[key];\n//         arrayValues.push([key, keyValue]);\n//       }\n//     }\n//     return arrayValues;\n//   });\n\n//   constructor() { }\n\n//   ngOnInit() { }\n// }\n\n@Component({\n    imports: [AsyncPipe],\n    selector: 'sp-fields-renderer',\n    template: `\n    @if (isString()) {\n      {{ stringValue() }}\n    } @else {\n      <div class=\"\">\n        <table>\n          <tbody>\n            @for (field of fields(); track $index) {\n            <tr>\n              <td [class]=\"field.class\">{{ field.label() | async }}&colon;</td>\n              <td [class]=\"field.class\">{{ field.value(entity()) }}</td>\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  `,\n    styles: `\n  .field-values {\n    padding: 0.2em 0;\n    text-align: end;\n  }\n  tr td:first-of-type {\n    padding-right: 1em;\n  }\n  `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FieldsRendererComponent<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> implements OnInit {\n  entity = input.required<TEntity>();\n  fields = input.required<SPEntityField<TEntity, IdKey>[]>();\n\n  isString = computed(() => typeof this.fields() === 'string');\n  // If the field is a single string, looks up entity's properties\n  // for matching field name as the string and if it doesn't exist returns\n  // the string itself as the value.\n  stringValue = computed(() => {\n    const fields = this.fields();\n    if (typeof fields === 'string') {\n      return (this.entity() as any)[fields] ?? fields;\n    }\n    return '';\n  });\n\n  constructor(public cdr: ChangeDetectorRef) {}\n\n  ngOnInit() {}\n}\n\n/**\n * A component that renders a stationary with line items, such as invoice,\n * payment receipt, bill, bill payment record, journal entry, etc. All these\n * documents have a uniform format and this component abstracts out the\n * information displayed in this type of document as properties that the client\n * can provide while it takes care of the rendering.\n *\n * Ideally we would declare this as a wrapper class with the actual rendering\n * to be performed by an inner replaceable component. This way the app will be\n * able to support multiple stationary designs, which eventually can be\n * chosen by the user. Perhaps even providing them a feature to design the\n * stationary.\n *\n * This is the first towards that long path ahead.\n */\n@Component({\n    imports: [\n        CommonModule,\n        UpperCasePipe,\n        FieldsRendererComponent\n    ],\n    selector: 'sp-stationary-with-line-items',\n    template: `\n  <div class=\"stationary-wrapper mat-body\">\n    <div class=\"title\">{{ title() }}</div>\n    @if (number()) {\n      <div class=\"number\">#{{ number() }}</div>\n    }\n    <div class=\"header\">\n      <div class=\"left-header\">\n        @if (leftHeaderTemplate()) {\n          <ng-container *ngTemplateOutlet=\"leftHeaderTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (leftHeader()) {\n            @if (isString(leftHeader())) {\n              {{ leftHeader() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_leftHeaderFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n      <div class=\"right-header\">\n        @if (rightHeaderTemplate()) {\n          <ng-container *ngTemplateOutlet=\"rightHeaderTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (rightHeader()) {\n            @if (isString(rightHeader())) {\n              {{ rightHeader() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_rightHeaderFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n    </div> <!-- end <div class=\"header\"> -->\n\n    <!-- items -->\n    @if (itemColumnFields()) {\n      <div class=\"items\">\n        <table>\n          <thead>\n            @for (field of _itemColumnFields(); track $index) {\n              <th [class]=\"field.class\" [style.text-align]=\"field.spec.valueOptions?.alignment\">{{ (fieldLabel(field) | async) | uppercase }}</th>\n            }\n          </thead>\n          <tbody>\n          <!-- enumerate each element of the 'items' array and render the\n          specified columns for each. -->\n            @for (row of _items(); track $index) {\n              <tr>\n              @for (field of _itemColumnFields(); track $index) {\n                <td [class]=\"field.class\" [style.text-align]=\"field.spec.valueOptions?.alignment\" [innerHtml]=\"field.value(row)\"></td>\n              }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- end items -->\n\n    <!-- footer -->\n    <div class=\"footer\">\n      <div class=\"left-footer\">\n        @if (leftFooterTemplate()) {\n          <ng-container *ngTemplateOutlet=\"leftFooterTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (leftFooter()) {\n            @if (isString(leftFooter())) {\n              {{ leftFooter() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_leftFooterFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n      <div class=\"right-footer\">\n        @if (rightFooterTemplate()) {\n          <ng-container *ngTemplateOutlet=\"rightFooterTemplate() ?? null\"></ng-container>\n        } @else {\n          @if (rightFooter()) {\n            @if (isString(rightFooter())) {\n              {{ rightFooter() }}\n            } @else {\n              <sp-fields-renderer\n                [entity]=\"entity()\"\n                [fields]=\"_rightFooterFields()\"\n              ></sp-fields-renderer>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n  `,\n    styles: `\n  .stationary-wrapper {\n    padding: 2em 1em;\n  }\n  .title {\n    font-size: 1.6em;\n    font-weight: 600;\n    text-align: end;\n    margin-bottom: 0.5em;\n  }\n  .number {\n    font-size: 1.1em;\n    font-weight: 500;\n    text-align: end;\n    margin-bottom: 0.5em;\n  }\n  .header, .footer {\n    display: flex;\n    flex-direction: row;\n    margin-top: 1em;\n  }\n  .left-header, .left-footer {\n    display: flex;\n    align-items: bottom;\n    text-align: start;\n    padding-right: 1em;\n    min-width: 50%;\n    overflow-wrap: break-word;\n    text-wrap: wrap;\n  }\n  .right-header, .right-footer {\n    display: flex;\n    justify-content: flex-end;\n    min-width: 50%;\n    overflow: clip;\n  }\n  .items {\n    margin: 2em 0;\n  }\n  .items table {\n    width: 100%;\n    border: 0px solid lightgray;\n  }\n  .items table thead {\n    background-color: black;\n    color: white;\n    & th {\n      padding: 0.4em;\n    }\n  }\n  .items table td {\n    padding: 0.8em 0.4em;\n    border-bottom: 1px solid lightgray;\n    border-right: 0px solid lightgray\n  }\n  .footer {\n\n  }\n  `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StationaryWithLineItemsComponent<TEntity extends { [P in IdKey]: PropertyKey }, TEntityLineItem extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> implements OnInit {\n  entity = input.required<TEntity>();\n  title = input.required<string>();\n  number = input<string|number>();\n\n  leftHeader = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _leftHeaderFields = computed(() => this.getSPEntityFields(this.leftHeader()));\n  leftHeaderTemplate = input<TemplateRef<any>>();\n\n  rightHeader = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _rightHeaderFields = computed(() => this.getSPEntityFields(this.rightHeader()));\n  rightHeaderTemplate = input<TemplateRef<any>>();\n\n  items = input<{[key: string]: string}[]>();\n\n  leftFooter = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _leftFooterFields = computed(() => this.getSPEntityFields(this.leftFooter()));\n  leftFooterTemplate = input<TemplateRef<any>>();\n\n  rightFooter = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string>();\n  _rightFooterFields = computed(() => this.getSPEntityFields(this.rightFooter()));\n  rightFooterTemplate = input<TemplateRef<any>>();\n\n  itemFieldName = input<string>('items');\n  itemColumnFields = input<Array<SPEntityFieldSpec<TEntity, IdKey> | string>>();\n  _itemColumnFields = computed(() => this.getSPEntityFields(this.itemColumnFields()));\n\n  _items = computed(() => (this.entity() as any)[this.itemFieldName()]);\n\n  ngxEntityFieldConfig = inject(SP_ENTITY_FIELD_CONFIG, { optional: true })!;\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  isString(value: any) {\n    return typeof value === 'string';\n  }\n\n  /**\n   * Make the method a generic as we'll be using it for both TEntity and its\n   * child TEntityLineItem objects.\n   * @param fieldSpecs\n   * @returns\n   */\n  getSPEntityFields<T>(fieldSpecs: Array<SPEntityFieldSpec<TEntity, IdKey> | string>|string|undefined): Array<SPEntityField<TEntity, IdKey>> {\n    if (fieldSpecs && typeof fieldSpecs !== 'string') {\n      return fieldSpecs.map(spec => new SPEntityField<TEntity, IdKey>(spec, this.ngxEntityFieldConfig));\n    }\n    return [];\n  }\n\n  fieldLabel(field: SPEntityField<TEntity, IdKey>): Observable<string> {\n    const label = field.label()\n    if (label) {\n      return label instanceof Observable ? label : of(label as string);\n    }\n    return of('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/forms/index.d.ts

@@ -1 +1,55 @@
-export * from './src/validation-error-handler';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ChangeDetectorRef } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { Observable } 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
+ */
+declare function handleValidationErrors(form: UntypedFormGroup, error: HttpErrorResponse, cdr?: ChangeDetectorRef): Observable<any>;
+/**
+ * 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.
+ */
+declare function setServerErrorsAsFormErrors(form: UntypedFormGroup, cdr?: ChangeDetectorRef): <T>(source: Observable<T>) => Observable<T>;
+
+export { handleValidationErrors, setServerErrorsAsFormErrors };

package/hover-dropdown/index.d.ts

@@ -1 +1,44 @@
-export * from './src/hover-dropdown.directive';
+import * as _angular_core from '@angular/core';
+import { OnInit, ElementRef } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+
+/**
+ * A directive to make a button triggered mat-menu open during mouse hover.
+ * Use it like this:
+
+      <button #menuTrigger="matMenuTrigger"
+        mat-icon-button
+        [matMenuTriggerFor]="children"
+        hoverDropDown
+        [menu]="children"
+        [hoverTrigger]="menuTrigger">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #children="matMenu" hasBackdrop="false">
+        <button mat-menu-item (click)="onEdit()">Edit</button>
+        <button mat-menu-item (click)="onDelete()">Delete</button>
+      </mat-menu>
+
+  Note how hoverDropDown and [hoverTrigger] are used to wire up the button
+  and the associated mat-menu to the directive. Once setup like this, the
+  mat-menu will be opened whenever the mouse cursor hovers over the menu
+  trigger button.
+
+  Copied from:
+  https://stackoverflow.com/questions/54301126/how-to-show-the-angular-material-drop-down-on-mouse-over
+ */
+declare class HoverDropDownDirective implements OnInit {
+    private el;
+    static _menuClicked: boolean;
+    isInHoverBlock: boolean;
+    constructor(el: ElementRef);
+    hoverTrigger: _angular_core.InputSignal<MatMenuTrigger | null | undefined>;
+    menu: _angular_core.InputSignal<any>;
+    ngOnInit(): void;
+    private setHoverState;
+    private checkHover;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HoverDropDownDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HoverDropDownDirective, "[hoverDropDown]", never, { "hoverTrigger": { "alias": "hoverTrigger"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { HoverDropDownDirective };

package/index.d.ts

@@ -1,5 +1,4 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@smallpearl/ngx-helper" />
-export * from './public-api';
+/** Version of the ngx-helper library */
+declare const VERSION = "0.1.0";
+
+export { VERSION };

package/locale/index.d.ts

@@ -1,5 +1,55 @@
-export * from './src/providers';
-export * from './src/format-date';
-export * from './src/date.pipe';
-export * from './src/currency.pipe';
-export * from './src/format-currency';
+import * as i0 from '@angular/core';
+import { PipeTransform } from '@angular/core';
+
+type SPIntlDateFormat = 'short' | 'medium' | 'long' | 'full' | 'shortDate' | 'mediumDate' | 'longDate' | 'fullDate' | 'shortTime' | 'mediumTime' | 'longTime' | 'fullTime';
+interface SPNgxI18nConfig {
+    locale: string;
+    currency: string;
+    timezone: string;
+    datetimeFormat: SPIntlDateFormat;
+}
+/**
+ * The object that will hold the mini library config.
+ */
+declare let _config: SPNgxI18nConfig;
+/**
+ * Call this function update the _config dynamically as the need arises.
+ * @param config
+ */
+declare function setSPLocaleConfig(config: Partial<SPNgxI18nConfig>): void;
+/**
+ * @returns Current config object.
+ */
+declare function getSPLocaleConfig(): SPNgxI18nConfig;
+
+declare function spFormatDate(value: Date | number | string, format?: SPIntlDateFormat, timeZone?: string): string;
+
+/**
+ * An alternative to the Angular built-in `DatePipe` based on the native `Intl.DateTimeFormat` API.
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ * https://angular.io/api/common/DatePipe
+ */
+declare class SPDatePipe implements PipeTransform {
+    #private;
+    transform(value: Date | number | string, format?: SPIntlDateFormat, timeZone?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPDatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SPDatePipe, "spDate", true>;
+}
+
+/**
+ * This is a replacement for Angular's native currency pipe. This uses
+ * web standardized Intl.NumberFormat() API to format currency. The advantage
+ * of this over Angular's version is that this pipe allows the locale and
+ * currency parameters to be dynamically changed during runtime.
+ */
+declare class SPCurrencyPipe implements PipeTransform {
+    constructor();
+    transform(value: number | bigint | string, currency?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPCurrencyPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SPCurrencyPipe, "spCurrency", true>;
+}
+
+declare function spFormatCurrency(value: number | bigint | string, currency?: string): string | null;
+
+export { SPCurrencyPipe, SPDatePipe, _config, getSPLocaleConfig, setSPLocaleConfig, spFormatCurrency, spFormatDate };
+export type { SPIntlDateFormat, SPNgxI18nConfig };

package/mat-busy-wheel/index.d.ts

@@ -1,4 +1,165 @@
-export * from './src/busy-wheel-op';
-export * from './src/busy-wheel.component';
-export * from './src/busy-wheel.service';
-export * from './src/host-busy-wheel.directive';
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, ViewContainerRef, Renderer2 } from '@angular/core';
+
+/**
+ * Returns an rxjs operator that would track an http request status
+ * and would use the request status to hide the global busy wheel. The wheel
+ * would be hidden when the request completes or errors.
+ *
+ * Use it like below:
+ *
+ *  this.http.get<User>('https://google.com/..').pipe(
+ *    trackBusyWheelStatus(),
+ *    tap(user => this.user = user)
+ *  ).subscribe();
+ *
+ * Note that the function internally uses a timer to delay showing the busy
+ * wheel. This helps avoid needless screen flicker that can occur when quickly
+ * showing & hiding the wheel when the network connection and server response
+ * are so good that it can exceed natural user reaction time. We set this
+ * delay to 150 milliseconds for now.
+ *
+ * @param id A string value that uniquely identities the the busy wheel host
+ * container within the page. This allows multiple busy wheels to be hosted
+ * within a page, each for a distinct network (or time-consuming) operation.
+ * This is optional and if not specified, will create a busy wheel that
+ * covers the entire app viewport.
+ * @param show A boolean value that says whether to show the wheel as
+ * part of the operator setup. If set to false, the caller is expected
+ * to have displayed the busy wheel explicitly.
+ * @param showImmediate A boolean value that decides whether to show the
+ * busy wheel immediately. If set to false (default), the busy wheel will
+ * only be shown when the HTTP request has not completed within 200ms.
+ * @param hideOnNthEmit Number of emits upon which the busy wheel is to
+ * be hidden. A value of 0 for this means the wheel is hidden only when
+ * the observable completes (errorneously or otherwise).
+ * @returns An rxjs op that can be added to the pipe() arg list.
+ */
+declare function trackBusyWheelStatus(id?: string, show?: boolean, showImmediate?: boolean, hideOnNthEmit?: number): <T>(source: Observable<T>) => Observable<T>;
+/**
+ * Show a busy wheel until the observable is complete. Busy wheel is shown is either viewport global
+ * or localized to the element with the the given id.
+ *
+ * An example use case for this operator are HTTP requests which will complete no matter
+ * what. Either successfully or with an error. Either case will mark the observer as completed.
+ *
+ * See trackBusyWheelStatus() for explanations on arguments
+ *
+ * @param id
+ * @param showImmediate
+ * @returns
+ */
+declare function showBusyWheelUntilComplete(id?: string, showImmediate?: boolean): <T>(source: Observable<T>) => Observable<T>;
+/**
+ * Show a busy wheel until the observable emits n number of values. Busy wheel is shown is
+ * either viewport global or localized to the element with the the given id.
+ *
+ * An example use case for this operator are observables that emit but which do not necessarily
+ * complete.
+ *
+ * See trackBusyWheelStatus() for explanations on arguments
+ *
+ * @param numEmits
+ * @param id
+ * @param showImmediate
+ * @returns
+ */
+declare function showBusyWheelUntilEmits(numEmits: number, id?: string, showImmediate?: boolean): <T>(source: Observable<T>) => Observable<T>;
+
+declare class SPMatBusyWheelComponent implements OnInit, OnDestroy {
+    elRef: ElementRef;
+    wheelId: i0.InputSignal<string>;
+    viewport: i0.InputSignal<boolean>;
+    constructor(elRef: ElementRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatBusyWheelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatBusyWheelComponent, "sp-mat-busy-wheel", never, { "wheelId": { "alias": "wheelId"; "required": false; "isSignal": true; }; "viewport": { "alias": "viewport"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare abstract class SPMatHostBusyWheelDirectiveBase {
+    abstract getBusyWheelId(): string | undefined;
+    abstract getViewContainerRef(): ViewContainerRef;
+    abstract getRenderer2(): Renderer2;
+}
+
+declare class BusyWheelService {
+    private defaultBusyWheelDir;
+    private namedBusyWheelDirs;
+    private wheelComponents;
+    static s_instance: BusyWheelService;
+    constructor();
+    static getInstance(): BusyWheelService;
+    show(id?: string): void;
+    hide(id?: string): void;
+    registerBusyWheelHost(busyWheelDir: SPMatHostBusyWheelDirectiveBase): void;
+    deregisterBusyWheelHost(busyWheelDir: SPMatHostBusyWheelDirectiveBase): void;
+    /**
+     * Creates a div fragment that hosts the busy wheel. The fragment has the following
+     * structure:
+     *
+     *  <div id="id_busy-wheel_{id}">
+     *    <div class="{containerClass}">
+     *      <!-- <div class="busy-wheel"></div> -->
+     *      <mat-spinner></mat-spinner>
+     *    </div>
+     *  </div>
+     * @param containerClass
+     * @param id
+     * @returns
+     */
+    private createViewportBusyWheel;
+    /**
+     * Creates a backdrop overlay, of the same size as the container that it
+     * covers, on which the busy wheel will be positioned.
+     * @returns
+     */
+    private createBackdrop;
+    private removeViewportBusyWheel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BusyWheelService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BusyWheelService>;
+}
+declare function registerBusyWheelHost(busyWheelDir: SPMatHostBusyWheelDirectiveBase): void;
+declare function deregisterBusyWheelHost(busyWheelDir: SPMatHostBusyWheelDirectiveBase): void;
+declare function showBusyWheel(id?: string): void;
+declare function hideBusyWheel(id?: string): void;
+
+/**
+ * Use this directive with a unique value assigned to it to display a busy
+ * wheel over it. This can be used as:-
+ *
+ * import {showBusyWheelUntilComplete} from '@smallpearl/ngx-helper/mat-busy-wheel';
+ *
+ * <div spHostBusyWheel='myDivBusyWheel'>
+ *  ..content
+ * </div>
+ *
+ * Then in your code:
+ *
+ * obs.pipe(
+ *  showBusyWheelUntilComplete('myDivBusyWheel'),
+ *  tap((resp) => {
+ *    ...
+ *  })
+ * ).subscribe();
+ *
+ * This will cover the 'div' above when the obs is waiting to be completed.
+ * (or error). Note that you can also use the trackBusyWheelStatus() function
+ * if you want more control over the busy wheel.
+ */
+declare class SPMatHostBusyWheelDirective extends SPMatHostBusyWheelDirectiveBase implements OnInit, OnDestroy {
+    viewContainerRef: ViewContainerRef;
+    renderer2: Renderer2;
+    spHostBusyWheel: i0.InputSignal<string | undefined>;
+    constructor(viewContainerRef: ViewContainerRef, renderer2: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getBusyWheelId(): string | undefined;
+    getViewContainerRef(): ViewContainerRef;
+    getRenderer2(): Renderer2;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatHostBusyWheelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SPMatHostBusyWheelDirective, "[spHostBusyWheel]", never, { "spHostBusyWheel": { "alias": "spHostBusyWheel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BusyWheelService, SPMatBusyWheelComponent, SPMatHostBusyWheelDirective, deregisterBusyWheelHost, hideBusyWheel, registerBusyWheelHost, showBusyWheel, showBusyWheelUntilComplete, showBusyWheelUntilEmits, trackBusyWheelStatus };