data-status-message 0.0.4

package/README.md

@@ -0,0 +1,24 @@
+# DataStatusMessage
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project data-status-message` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project data-status-message`.
+> Note: Don't forget to add `--project data-status-message` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build data-status-message` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build data-status-message`, go to the dist folder `cd dist/data-status-message` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test data-status-message` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/esm2022/data-status-message.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1zdGF0dXMtbWVzc2FnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RhdGEtc3RhdHVzLW1lc3NhZ2Uvc3JjL2RhdGEtc3RhdHVzLW1lc3NhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2022/lib/display-status-message-demo/display-status-message-demo.component.mjs

@@ -0,0 +1,91 @@
+import { Component, inject } from '@angular/core';
+import { delay, EMPTY, of, startWith, tap } from 'rxjs';
+import { FormBuilder } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/slide-toggle";
+import * as i5 from "@angular/material/divider";
+import * as i6 from "../display-status-message.component";
+export class DisplayStatusMessageDemoComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.options = this.fb.group({
+            hasData: false,
+            apiError: false,
+            isValid: false,
+            displayOverlay: false,
+        });
+        this.translations$ = of({
+            loading: 'Loading...',
+            error: 'This is an Error has Occurred',
+            noData: 'No Data Available',
+        });
+        this.hint = 'This is a hint';
+        this.overlay = false;
+        this.hasData = () => true;
+        this.simulatedData = [];
+        this.sampleData = [
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+        ];
+        this.errorRetrySample$ = EMPTY;
+        this.sampleData$ = EMPTY;
+        this.isPendingSample$ = of(false);
+    }
+    ngOnInit() {
+    }
+    onSetData() {
+        this.options.patchValue({
+            apiError: false,
+        });
+    }
+    onCallAPI() {
+        this.isPendingSample$ = of(false)
+            .pipe(tap(() => {
+            this.sampleData$ = EMPTY;
+            this.overlay = (this.options.value.displayOverlay) ? true : false;
+        }), delay(1000 * 5), tap(() => {
+            if (this.options.value.apiError) {
+                this.errorRetrySample$ = of({ message: 'An Error has Occured' });
+                this.sampleData$ = EMPTY;
+            }
+            else {
+                this.simulatedData = this.options.value.hasData ? this.sampleData : [];
+                this.sampleData$ = of(this.simulatedData);
+                if (this.simulatedData.length > 0)
+                    this.overlay = false;
+            }
+            this.hasData = (this.options.value.isValid) ? (data) => data?.length > 0 : () => true;
+        }), startWith(true));
+    }
+    onSetError() {
+        this.options.patchValue({
+            hasData: false,
+            isValid: false,
+        });
+    }
+    onSetValidate() {
+        this.options.patchValue({
+            apiError: false,
+        });
+    }
+    onAction(type) {
+        console.log('Action:', type);
+        this.overlay = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DisplayStatusMessageDemoComponent, selector: "app-display-status-message-demo", ngImport: i0, template: "<h1>Display Status Message Demo</h1>\n\n<div style=\"margin: 2rem;\">\n\n  <h3>Labels</h3>\n  {{ (translations$ | async) | json }}\n\n  <h3>Has Data</h3>\n\n  <div style=\"display: flex; gap: 2rem;\" [formGroup]=\"options\">\n    <mat-slide-toggle formControlName=\"hasData\" (click)=\"onSetData()\">Has Data</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"apiError\" (click)=\"onSetError()\">Throw api Error</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"isValid\" #useFunc (click)=\"onSetValidate()\">Validate Data Set</mat-slide-toggle>\n    <span style=\"flex: 1\"></span>\n    <mat-slide-toggle formControlName=\"displayOverlay\">Overlay</mat-slide-toggle>\n  </div>\n\n  <div *ngIf=\"useFunc.checked\" style=\"margin-top: 1rem;\">\n    Use function to determine if data is an array > 0 records\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem; display: flex; gap: 1rem\">\n    <!-- <button mat-stroked-button (click)=\"onReset()\">Reset</button> -->\n    <span style=\"flex:1\"></span>\n    <button mat-stroked-button (click)=\"onCallAPI()\">Call API</button>\n  </div>\n\n</div>\n\n<div style=\"height: 50%;\">\n  <app-display-status-message\n    style=\"display: grid; height: 100%;\"\n    [loading]=\"(isPendingSample$ | async)\"\n    [validateWith]=\"hasData\"\n    [overlay]=\"overlay\"\n    [labels]=\"(translations$ | async)\"\n    [error]=\"(errorRetrySample$ | async)\"\n    [data]=\"(sampleData$ | async)\"\n  >\n      <ng-container NO_DATA>\n        <div *ngIf=\"!hasData((sampleData$ | async))\" style=\"margin-bottom: 1rem;\">{{ hint }}</div>\n        <div style=\"display: flex; gap: 8\">\n          <button mat-stroked-button (click)=\"onAction('retry')\">Retry</button>\n        </div>\n      </ng-container>\n\n      <ng-container ERROR>\n        <button mat-stroked-button (click)=\"onAction('reset-filters')\">\n          Try Again\n        </button>\n      </ng-container>\n  </app-display-status-message>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.DisplayStatusMessageComponent, selector: "app-display-status-message", inputs: ["delayBy", "overlay", "display", "labels", "error", "loading", "data", "validateWith"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-display-status-message-demo', template: "<h1>Display Status Message Demo</h1>\n\n<div style=\"margin: 2rem;\">\n\n  <h3>Labels</h3>\n  {{ (translations$ | async) | json }}\n\n  <h3>Has Data</h3>\n\n  <div style=\"display: flex; gap: 2rem;\" [formGroup]=\"options\">\n    <mat-slide-toggle formControlName=\"hasData\" (click)=\"onSetData()\">Has Data</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"apiError\" (click)=\"onSetError()\">Throw api Error</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"isValid\" #useFunc (click)=\"onSetValidate()\">Validate Data Set</mat-slide-toggle>\n    <span style=\"flex: 1\"></span>\n    <mat-slide-toggle formControlName=\"displayOverlay\">Overlay</mat-slide-toggle>\n  </div>\n\n  <div *ngIf=\"useFunc.checked\" style=\"margin-top: 1rem;\">\n    Use function to determine if data is an array > 0 records\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem; display: flex; gap: 1rem\">\n    <!-- <button mat-stroked-button (click)=\"onReset()\">Reset</button> -->\n    <span style=\"flex:1\"></span>\n    <button mat-stroked-button (click)=\"onCallAPI()\">Call API</button>\n  </div>\n\n</div>\n\n<div style=\"height: 50%;\">\n  <app-display-status-message\n    style=\"display: grid; height: 100%;\"\n    [loading]=\"(isPendingSample$ | async)\"\n    [validateWith]=\"hasData\"\n    [overlay]=\"overlay\"\n    [labels]=\"(translations$ | async)\"\n    [error]=\"(errorRetrySample$ | async)\"\n    [data]=\"(sampleData$ | async)\"\n  >\n      <ng-container NO_DATA>\n        <div *ngIf=\"!hasData((sampleData$ | async))\" style=\"margin-bottom: 1rem;\">{{ hint }}</div>\n        <div style=\"display: flex; gap: 8\">\n          <button mat-stroked-button (click)=\"onAction('retry')\">Retry</button>\n        </div>\n      </ng-container>\n\n      <ng-container ERROR>\n        <button mat-stroked-button (click)=\"onAction('reset-filters')\">\n          Try Again\n        </button>\n      </ng-container>\n  </app-display-status-message>\n</div>\n" }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1kZW1vLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGEtc3RhdHVzLW1lc3NhZ2Uvc3JjL2xpYi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWRlbW8vZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1kZW1vLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGEtc3RhdHVzLW1lc3NhZ2Uvc3JjL2xpYi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWRlbW8vZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1kZW1vLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzFELE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFjLEVBQUUsRUFBRSxTQUFTLEVBQWEsR0FBRyxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBRTNGLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7QUFPN0MsTUFBTSxPQUFPLGlDQUFpQztJQUw5QztRQU9FLE9BQUUsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUE7UUFFeEIsWUFBTyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDO1lBQ3RCLE9BQU8sRUFBRSxLQUFLO1lBQ2QsUUFBUSxFQUFFLEtBQUs7WUFDZixPQUFPLEVBQUUsS0FBSztZQUNkLGNBQWMsRUFBRSxLQUFLO1NBQ3RCLENBQUMsQ0FBQTtRQUVGLGtCQUFhLEdBQTJDLEVBQUUsQ0FBQztZQUN6RCxPQUFPLEVBQUUsWUFBWTtZQUNyQixLQUFLLEVBQUUsK0JBQStCO1lBQ3RDLE1BQU0sRUFBRSxtQkFBbUI7U0FDNUIsQ0FBQyxDQUFBO1FBRUYsU0FBSSxHQUFHLGdCQUFnQixDQUFBO1FBQ3ZCLFlB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O1lBQ2QsT0FBTyxFQUFFLEtBQUs7U0FDZixDQUFDLENBQUE7SUFFSixDQUFDO0lBRUQsYUFBYTtRQUVYLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDO1lBQ3RCLFFBQVEsRUFBRSxLQUFLO1NBQ2hCLENBQUMsQ0FBQTtJQUVKLENBQUM7SUFFRCxRQUFRLENBQUMsSUFBWTtRQUNuQixPQUFPLENBQUMsR0FBRyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsQ0FBQTtRQUM1QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQTtJQUN0QixDQUFDOytHQXJHVSxpQ0FBaUM7bUdBQWpDLGlDQUFpQyx1RUNWOUMsbWhFQXlEQTs7NEZEL0NhLGlDQUFpQztrQkFMN0MsU0FBUzsrQkFDRSxpQ0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGluamVjdCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBkZWxheSwgRU1QVFksIE9ic2VydmFibGUsIG9mLCBzdGFydFdpdGgsIHN3aXRjaE1hcCwgdGFwLCB0aHJvd0Vycm9yIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBEaXNwbGF5U3RhdHVzTWVzc2FnZUxhYmVscyB9IGZyb20gJy4uL21vZGVscy9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWxhYmVscy5tb2RlbCc7XG5pbXBvcnQgeyBGb3JtQnVpbGRlciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWRpc3BsYXktc3RhdHVzLW1lc3NhZ2UtZGVtbycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWRlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWRlbW8uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEaXNwbGF5U3RhdHVzTWVzc2FnZURlbW9Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIGZiID0gaW5qZWN0KEZvcm1CdWlsZGVyKVxuXG4gIG9wdGlvbnMgPSB0aGlzLmZiLmdyb3VwKHtcbiAgICBoYXNEYXRhOiBmYWxzZSxcbiAgICBhcGlFcnJvcjogZmFsc2UsXG4gICAgaXNWYWxpZDogZmFsc2UsXG4gICAgZGlzcGxheU92ZXJsYXk6IGZhbHNlLFxuICB9KVxuXG4gIHRyYW5zbGF0aW9ucyQ6IE9ic2VydmFibGU8RGlzcGxheVN0YXR1c01lc3NhZ2VMYWJlbHM+ID0gb2Yoe1xuICAgIGxvYWRpbmc6ICdMb2FkaW5nLi4uJyxcbiAgICBlcnJvcjogJ1RoaXMgaXMgYW4gRXJyb3IgaGFzIE9jY3VycmVkJyxcbiAgICBub0RhdGE6ICdObyBEYXRhIEF2YWlsYWJsZScsXG4gIH0pXG5cbiAgaGludCA9ICdUaGlzIGlzIGEgaGludCdcbiAgb3ZlcmxheSA9IGZhbHNlXG5cbiAgaGFzRGF0YTogYW55ID0gKCkgPT4gdHJ1ZVxuXG4gIHNpbXVsYXRlZERhdGE6IGFueVtdID0gW11cblxuICBzYW1wbGVEYXRhID0gW1xuICAgIHsgaWQ6IDEsIG5hbWU6ICdKb2huIERvZScgfSxcbiAgICB7IGlkOiAyLCBuYW1lOiAnSmFuZSBEb2UnIH0sXG4gICAgeyBpZDogMSwgbmFtZTogJ0pvaG4gRG9lJyB9LFxuICAgIHsgaWQ6IDIsIG5hbWU6ICdKYW5lIERvZScgfSxcbiAgICB7IGlkOiAxLCBuYW1lOiAnSm9obiBEb2UnIH0sXG4gICAgeyBpZDogMiwgbmFtZTogJ0phbmUgRG9lJyB9LFxuICAgIHsgaWQ6IDEsIG5hbWU6ICdKb2huIERvZScgfSxcbiAgICB7IGlkOiAyLCBuYW1lOiAnSmFuZSBEb2UnIH0sXG4gIF1cblxuICBlcnJvclJldHJ5U2FtcGxlJDogYW55ID0gRU1QVFlcblxuICBzYW1wbGVEYXRhJDogYW55ID0gRU1QVFlcblxuICBpc1BlbmRpbmdTYW1wbGUkID0gb2YoZmFsc2UpXG5cbiAgbmdPbkluaXQoKSB7XG5cbiAgfVxuXG4gIG9uU2V0RGF0YSgpIHtcblxuICAgIHRoaXMub3B0aW9ucy5wYXRjaFZhbHVlKHtcbiAgICAgIGFwaUVycm9yOiBmYWxzZSxcbiAgICB9KVxuXG4gIH1cblxuICBvbkNhbGxBUEkoKSB7XG5cbiAgICB0aGlzLmlzUGVuZGluZ1NhbXBsZSQgPSBvZihmYWxzZSlcbiAgICAucGlwZShcbiAgICAgIHRhcCgoKSA9PiB7XG4gICAgICAgIHRoaXMuc2FtcGxlRGF0YSQgPSBFTVBUWVxuICAgICAgICB0aGlzLm92ZXJsYXkgPSAodGhpcy5vcHRpb25zLnZhbHVlLmRpc3BsYXlPdmVybGF5KSA/IHRydWUgOiBmYWxzZVxuICAgICAgfSksXG4gICAgICBkZWxheSgxMDAwICogNSksXG4gICAgICB0YXAoKCkgPT4ge1xuXG4gICAgICAgIGlmICh0aGlzLm9wdGlvbnMudmFsdWUuYXBpRXJyb3IpIHtcbiAgICAgICAgICB0aGlzLmVycm9yUmV0cnlTYW1wbGUkID0gb2YoeyBtZXNzYWdlOiAnQW4gRXJyb3IgaGFzIE9jY3VyZWQnIH0pXG4gICAgICAgICAgdGhpcy5zYW1wbGVEYXRhJCA9IEVNUFRZXG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5zaW11bGF0ZWREYXRhID0gdGhpcy5vcHRpb25zLnZhbHVlLmhhc0RhdGEgPyB0aGlzLnNhbXBsZURhdGEgOiBbXTtcbiAgICAgICAgICB0aGlzLnNhbXBsZURhdGEkID0gb2YodGhpcy5zaW11bGF0ZWREYXRhKTtcbiAgICAgICAgICBpZih0aGlzLnNpbXVsYXRlZERhdGEubGVuZ3RoID4gMCkgdGhpcy5vdmVybGF5ID0gZmFsc2VcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuaGFzRGF0YSA9ICh0aGlzLm9wdGlvbnMudmFsdWUuaXNWYWxpZCkgPyAoZGF0YTogYW55W10pID0+IGRhdGE/Lmxlbmd0aCA+IDAgOiAoKSA9PiB0cnVlXG5cbiAgICAgIH0pLFxuICAgICAgc3RhcnRXaXRoKHRydWUpXG4gICAgKTtcblxuICB9XG5cbiAgb25TZXRFcnJvcigpIHtcblxuICAgIHRoaXMub3B0aW9ucy5wYXRjaFZhbHVlKHtcbiAgICAgIGhhc0RhdGE6IGZhbHNlLFxuICAgICAgaXNWYWxpZDogZmFsc2UsXG4gICAgfSlcblxuICB9XG5cbiAgb25TZXRWYWxpZGF0ZSgpIHtcblxuICAgIHRoaXMub3B0aW9ucy5wYXRjaFZhbHVlKHtcbiAgICAgIGFwaUVycm9yOiBmYWxzZSxcbiAgICB9KVxuXG4gIH1cblxuICBvbkFjdGlvbih0eXBlOiBzdHJpbmcpIHtcbiAgICBjb25zb2xlLmxvZygnQWN0aW9uOicsIHR5cGUpXG4gICAgdGhpcy5vdmVybGF5ID0gZmFsc2VcbiAgfVxuXG59XG4iLCI8aDE+RGlzcGxheSBTdGF0dXMgTWVzc2FnZSBEZW1vPC9oMT5cblxuPGRpdiBzdHlsZT1cIm1hcmdpbjogMnJlbTtcIj5cblxuICA8aDM+TGFiZWxzPC9oMz5cbiAge3sgKHRyYW5zbGF0aW9ucyQgfCBhc3luYykgfCBqc29uIH19XG5cbiAgPGgzPkhhcyBEYXRhPC9oMz5cblxuICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAycmVtO1wiIFtmb3JtR3JvdXBdPVwib3B0aW9uc1wiPlxuICAgIDxtYXQtc2xpZGUtdG9nZ2xlIGZvcm1Db250cm9sTmFtZT1cImhhc0RhdGFcIiAoY2xpY2spPVwib25TZXREYXRhKClcIj5IYXMgRGF0YTwvbWF0LXNsaWRlLXRvZ2dsZT5cbiAgICA8bWF0LXNsaWRlLXRvZ2dsZSBmb3JtQ29udHJvbE5hbWU9XCJhcGlFcnJvclwiIChjbGljayk9XCJvblNldEVycm9yKClcIj5UaHJvdyBhcGkgRXJyb3I8L21hdC1zbGlkZS10b2dnbGU+XG4gICAgPG1hdC1zbGlkZS10b2dnbGUgZm9ybUNvbnRyb2xOYW1lPVwiaXNWYWxpZFwiICN1c2VGdW5jIChjbGljayk9XCJvblNldFZhbGlkYXRlKClcIj5WYWxpZGF0ZSBEYXRhIFNldDwvbWF0LXNsaWRlLXRvZ2dsZT5cbiAgICA8c3BhbiBzdHlsZT1cImZsZXg6IDFcIj48L3NwYW4+XG4gICAgPG1hdC1zbGlkZS10b2dnbGUgZm9ybUNvbnRyb2xOYW1lPVwiZGlzcGxheU92ZXJsYXlcIj5PdmVybGF5PC9tYXQtc2xpZGUtdG9nZ2xlPlxuICA8L2Rpdj5cblxuICA8ZGl2ICpuZ0lmPVwidXNlRnVuYy5jaGVja2VkXCIgc3R5bGU9XCJtYXJnaW4tdG9wOiAxcmVtO1wiPlxuICAgIFVzZSBmdW5jdGlvbiB0byBkZXRlcm1pbmUgaWYgZGF0YSBpcyBhbiBhcnJheSA+IDAgcmVjb3Jkc1xuICA8L2Rpdj5cblxuICA8ZGl2IHN0eWxlPVwibWFyZ2luLXRvcDogMXJlbTsgbWFyZ2luLWJvdHRvbTogMXJlbTtcIj5cbiAgICA8bWF0LWRpdmlkZXI+PC9tYXQtZGl2aWRlcj5cbiAgPC9kaXY+XG5cbiAgPGRpdiBzdHlsZT1cIm1hcmdpbi10b3A6IDFyZW07IGRpc3BsYXk6IGZsZXg7IGdhcDogMXJlbVwiPlxuICAgIDwhLS0gPGJ1dHRvbiBtYXQtc3Ryb2tlZC1idXR0b24gKGNsaWNrKT1cIm9uUmVzZXQoKVwiPlJlc2V0PC9idXR0b24+IC0tPlxuICAgIDxzcGFuIHN0eWxlPVwiZmxleDoxXCI+PC9zcGFuPlxuICAgIDxidXR0b24gbWF0LXN0cm9rZWQtYnV0dG9uIChjbGljayk9XCJvbkNhbGxBUEkoKVwiPkNhbGwgQVBJPC9idXR0b24+XG4gIDwvZGl2PlxuXG48L2Rpdj5cblxuPGRpdiBzdHlsZT1cImhlaWdodDogNTAlO1wiPlxuICA8YXBwLWRpc3BsYXktc3RhdHVzLW1lc3NhZ2VcbiAgICBzdHlsZT1cImRpc3BsYXk6IGdyaWQ7IGhlaWdodDogMTAwJTtcIlxuICAgIFtsb2FkaW5nXT1cIihpc1BlbmRpbmdTYW1wbGUkIHwgYXN5bmMpXCJcbiAgICBbdmFsaWRhdGVXaXRoXT1cImhhc0RhdGFcIlxuICAgIFtvdmVybGF5XT1cIm92ZXJsYXlcIlxuICAgIFtsYWJlbHNdPVwiKHRyYW5zbGF0aW9ucyQgfCBhc3luYylcIlxuICAgIFtlcnJvcl09XCIoZXJyb3JSZXRyeVNhbXBsZSQgfCBhc3luYylcIlxuICAgIFtkYXRhXT1cIihzYW1wbGVEYXRhJCB8IGFzeW5jKVwiXG4gID5cbiAgICAgIDxuZy1jb250YWluZXIgTk9fREFUQT5cbiAgICAgICAgPGRpdiAqbmdJZj1cIiFoYXNEYXRhKChzYW1wbGVEYXRhJCB8IGFzeW5jKSlcIiBzdHlsZT1cIm1hcmdpbi1ib3R0b206IDFyZW07XCI+e3sgaGludCB9fTwvZGl2PlxuICAgICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiA4XCI+XG4gICAgICAgICAgPGJ1dHRvbiBtYXQtc3Ryb2tlZC1idXR0b24gKGNsaWNrKT1cIm9uQWN0aW9uKCdyZXRyeScpXCI+UmV0cnk8L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgPG5nLWNvbnRhaW5lciBFUlJPUj5cbiAgICAgICAgPGJ1dHRvbiBtYXQtc3Ryb2tlZC1idXR0b24gKGNsaWNrKT1cIm9uQWN0aW9uKCdyZXNldC1maWx0ZXJzJylcIj5cbiAgICAgICAgICBUcnkgQWdhaW5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9hcHAtZGlzcGxheS1zdGF0dXMtbWVzc2FnZT5cbjwvZGl2PlxuIl19

package/esm2022/lib/display-status-message.component.mjs

@@ -0,0 +1,100 @@
+import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject, concat, of, timer } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { DisplayStatusMessageLabels } from './models/display-status-message-labels.model';
+import { DisplayStatusMessage } from './models/display-status-message.model';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/progress-spinner";
+export class DisplayStatusMessageComponent {
+    constructor() {
+        this.delayBy = 3; //seconds
+        this._overlay = false;
+        this.display = false;
+        this.disabled = false;
+        this.loadingSubject$ = new BehaviorSubject(false);
+        this.loadingDisplay$ = this.loadingSubject$.pipe(switchMap(loading => {
+            if (loading) {
+                return concat(of(false), timer(1000 * this.delayBy).pipe(map(() => true)));
+            }
+            return of(false);
+        }));
+        this._labels = DisplayStatusMessageLabels.adapt();
+        this._loading = false;
+    }
+    set overlay(value) {
+        this._overlay = (value) ? value : false;
+    }
+    get overlay() {
+        return this._overlay;
+    }
+    set labels(value) {
+        this._labels = (value) ? DisplayStatusMessageLabels.adapt(value) : DisplayStatusMessageLabels.adapt();
+    }
+    get labels() {
+        return this._labels;
+    }
+    set error(value) {
+        this._error = (value) ? DisplayStatusMessage.adapt(value) : null;
+    }
+    get error() {
+        return this._error;
+    }
+    get hasProjectedContent() {
+        return this.projectedContent ? true : false;
+    }
+    set loading(value) {
+        value = (value) ? value : false;
+        this._loading = (value);
+        this.loadingSubject$.next(value);
+    }
+    get loading() {
+        return this._loading;
+    }
+    set data(value) {
+        this._data = value;
+        this.error = null;
+    }
+    get data() {
+        return this._data;
+    }
+    set validateWith(validateWith) {
+        this._validateWith = (validateWith) ? validateWith : null;
+    }
+    get validateWith() {
+        return this._validateWith;
+    }
+    get isValid() {
+        const canValidate = (this.validateWith && this.data) ? true : false;
+        return (canValidate && this.validateWith) ? this.validateWith(this.data) : true;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DisplayStatusMessageComponent, selector: "app-display-status-message", inputs: { delayBy: "delayBy", overlay: "overlay", display: "display", labels: "labels", error: "error", loading: "loading", data: "data", validateWith: "validateWith" }, queries: [{ propertyName: "projectedContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "\n<div class=\"state-container\" id=\"overlay\" [class.overlay]=\"overlay\">\n  <div *ngIf=\"loading; else CHECK_DATA\" class=\"loading-state-container box\">\n    <div id=\"border-spinner\" *ngIf=\"(loadingDisplay$ | async) === false; else labelSpinner\">\n      <mat-spinner [diameter]=\"22\"></mat-spinner>\n    </div>\n    <ng-template #labelSpinner>\n      <div id=\"loading-with-text\">\n        <div id=\"loading-text\">\n          <mat-spinner [diameter]=\"22\"></mat-spinner>\n          <span class=\"loading\">{{ labels.loading }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <ng-template #CHECK_DATA>\n    <div *ngIf=\"error; else HAS_ERROR\" class=\"error-state-container\">\n\n      <div>\n        <mat-icon class=\"state-icon warn-icon\">error</mat-icon>\n      </div>\n      <div class=\"state-text\">\n        {{ error?.message || labels.error }}\n      </div>\n\n      <ng-container *ngIf=\"!loading && error\">\n        <div style=\"margin-top: 1rem;\">\n          <ng-content select=\"[ERROR]\"></ng-content>\n        </div>\n      </ng-container>\n    </div>\n\n    <ng-template #HAS_ERROR>\n\n      <ng-container *ngIf=\"data\" class=\"vert-container\">\n\n        <ng-container *ngIf=\"!isValid;\">\n          <mat-icon class=\"state-icon error-icon\">warning</mat-icon>\n          <div class=\"state-text\">{{ labels.noData }}</div>\n\n          <div style=\"margin-top: 1rem;\" *ngIf=\"!isValid\">\n            <ng-content select=\"[NO_DATA]\"></ng-content>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-template>\n\n  </ng-template>\n</div>\n", styles: [".state-container{text-align:center;margin:0 auto;padding:.5rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;z-index:1;cursor:default}.state-container .state-text{margin-top:.5rem;font-weight:700;font-style:normal;font-size:1.125rem;text-align:center}.state-container .state-icon{height:1.875rem;width:1.875rem;font-size:1.875rem}.state-container .link{font-size:1rem!important;color:#286fad}.state-container .retry{font-size:1.25rem}.loading-state-container #border-spinner{border:.0625rem solid #a8a7a7;border-radius:50%;padding:.8rem;justify-content:center;align-items:center;display:flex;transition:all .3s ease-in}.loading-state-container #loading-text{display:flex;padding:.8125rem;font-size:1rem;color:#333}.loading-state-container .loading{margin-left:.625rem}.loading-state-container #loading-with-text{border:.0625rem solid #a8a7a7;border-radius:2rem;transition:all .3s ease-in}.spc-top{margin-top:1rem}.vert-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.box{height:50px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fffc}.error-icon{color:#ccc}.warn-icon{color:red;opacity:.8}.mat-progress-spinner circle,.mat-spinner circle{stroke:#cb4814}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-display-status-message', encapsulation: ViewEncapsulation.None, template: "\n<div class=\"state-container\" id=\"overlay\" [class.overlay]=\"overlay\">\n  <div *ngIf=\"loading; else CHECK_DATA\" class=\"loading-state-container box\">\n    <div id=\"border-spinner\" *ngIf=\"(loadingDisplay$ | async) === false; else labelSpinner\">\n      <mat-spinner [diameter]=\"22\"></mat-spinner>\n    </div>\n    <ng-template #labelSpinner>\n      <div id=\"loading-with-text\">\n        <div id=\"loading-text\">\n          <mat-spinner [diameter]=\"22\"></mat-spinner>\n          <span class=\"loading\">{{ labels.loading }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <ng-template #CHECK_DATA>\n    <div *ngIf=\"error; else HAS_ERROR\" class=\"error-state-container\">\n\n      <div>\n        <mat-icon class=\"state-icon warn-icon\">error</mat-icon>\n      </div>\n      <div class=\"state-text\">\n        {{ error?.message || labels.error }}\n      </div>\n\n      <ng-container *ngIf=\"!loading && error\">\n        <div style=\"margin-top: 1rem;\">\n          <ng-content select=\"[ERROR]\"></ng-content>\n        </div>\n      </ng-container>\n    </div>\n\n    <ng-template #HAS_ERROR>\n\n      <ng-container *ngIf=\"data\" class=\"vert-container\">\n\n        <ng-container *ngIf=\"!isValid;\">\n          <mat-icon class=\"state-icon error-icon\">warning</mat-icon>\n          <div class=\"state-text\">{{ labels.noData }}</div>\n\n          <div style=\"margin-top: 1rem;\" *ngIf=\"!isValid\">\n            <ng-content select=\"[NO_DATA]\"></ng-content>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-template>\n\n  </ng-template>\n</div>\n", styles: [".state-container{text-align:center;margin:0 auto;padding:.5rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;z-index:1;cursor:default}.state-container .state-text{margin-top:.5rem;font-weight:700;font-style:normal;font-size:1.125rem;text-align:center}.state-container .state-icon{height:1.875rem;width:1.875rem;font-size:1.875rem}.state-container .link{font-size:1rem!important;color:#286fad}.state-container .retry{font-size:1.25rem}.loading-state-container #border-spinner{border:.0625rem solid #a8a7a7;border-radius:50%;padding:.8rem;justify-content:center;align-items:center;display:flex;transition:all .3s ease-in}.loading-state-container #loading-text{display:flex;padding:.8125rem;font-size:1rem;color:#333}.loading-state-container .loading{margin-left:.625rem}.loading-state-container #loading-with-text{border:.0625rem solid #a8a7a7;border-radius:2rem;transition:all .3s ease-in}.spc-top{margin-top:1rem}.vert-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.box{height:50px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fffc}.error-icon{color:#ccc}.warn-icon{color:red;opacity:.8}.mat-progress-spinner circle,.mat-spinner circle{stroke:#cb4814}\n"] }]
+        }], propDecorators: { projectedContent: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: false }]
+            }], delayBy: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], validateWith: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhLXN0YXR1cy1tZXNzYWdlL3NyYy9saWIvZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhLXN0YXR1cy1tZXNzYWdlL3NyYy9saWIvZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZHLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDMUQsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVoRCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUMxRixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQzs7Ozs7QUFRN0UsTUFBTSxPQUFPLDZCQUE2QjtJQU4xQztRQVVXLFlBQU8sR0FBRyxDQUFDLENBQUEsQ0FBQyxTQUFTO1FBRXRCLGFBQVEsR0FBRyxLQUFLLENBQUE7UUFTZixZQUFPLEdBQUcsS0FBSyxDQUFBO1FBRXhCLGFBQVEsR0FBRyxLQUFLLENBQUE7UUFFUixvQkFBZSxHQUFHLElBQUksZUFBZSxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRTlELG9CQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQ3pDLFNBQVMsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUNsQixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLE1BQU0sQ0FDWCxFQUFFLENBQUMsS0FB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QUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQTtJQUNqRixDQUFDO0lBRUQsUUFBUTtJQUVSLENBQUM7K0dBNUZVLDZCQUE2QjttR0FBN0IsNkJBQTZCLDBSQUUxQixXQUFXLGdEQ2YzQiw4bERBb0RBOzs0RkR2Q2EsNkJBQTZCO2tCQU56QyxTQUFTOytCQUNFLDRCQUE0QixpQkFHdkIsaUJBQWlCLENBQUMsSUFBSTs4QkFJUyxnQkFBZ0I7c0JBQTdELFlBQVk7dUJBQUMsV0FBVyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFFbkMsT0FBTztzQkFBZixLQUFLO2dCQUdPLE9BQU87c0JBQW5CLEtBQUs7Z0JBUUcsT0FBTztzQkFBZixLQUFLO2dCQW1CTyxNQUFNO3NCQUFsQixLQUFLO2dCQVNPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBYU8sT0FBTztzQkFBbkIsS0FBSztnQkFXTyxJQUFJO3NCQUFoQixLQUFLO2dCQVVPLFlBQVk7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIE9uSW5pdCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGNvbmNhdCwgb2YsIHRpbWVyIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHsgRGlzcGxheVN0YXR1c01lc3NhZ2VMYWJlbHMgfSBmcm9tICcuL21vZGVscy9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWxhYmVscy5tb2RlbCc7XG5pbXBvcnQgeyBEaXNwbGF5U3RhdHVzTWVzc2FnZSB9IGZyb20gJy4vbW9kZWxzL2Rpc3BsYXktc3RhdHVzLW1lc3NhZ2UubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtZGlzcGxheS1zdGF0dXMtbWVzc2FnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBEaXNwbGF5U3RhdHVzTWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZiwgeyBzdGF0aWM6IGZhbHNlIH0pIHByb2plY3RlZENvbnRlbnQ/OiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBJbnB1dCgpIGRlbGF5QnkgPSAzIC8vc2Vjb25kc1xuXG4gIHByaXZhdGUgX292ZXJsYXkgPSBmYWxzZVxuICBASW5wdXQoKSBzZXQgb3ZlcmxheSh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuX292ZXJsYXkgPSAodmFsdWUpID8gdmFsdWUgOiBmYWxzZVxuICB9XG5cbiAgZ2V0IG92ZXJsYXkoKSB7XG4gICAgcmV0dXJuIHRoaXMuX292ZXJsYXlcbiAgfVxuXG4gIEBJbnB1dCgpIGRpc3BsYXkgPSBmYWxzZVxuXG4gIGRpc2FibGVkID0gZmFsc2VcblxuICBwcml2YXRlIGxvYWRpbmdTdWJqZWN0JCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gIGxvYWRpbmdEaXNwbGF5JCA9IHRoaXMubG9hZGluZ1N1YmplY3QkLnBpcGUoXG4gICAgc3dpdGNoTWFwKGxvYWRpbmcgPT4ge1xuICAgICAgaWYgKGxvYWRpbmcpIHtcbiAgICAgICAgcmV0dXJuIGNvbmNhdChcbiAgICAgICAgICBvZihmYWxzZSksXG4gICAgICAgICAgdGltZXIoMTAwMCAqIHRoaXMuZGVsYXlCeSkucGlwZShtYXAoKCkgPT4gdHJ1ZSkpXG4gICAgICAgICk7XG4gICAgICB9XG4gICAgICByZXR1cm4gb2YoZmFsc2UpO1xuICAgIH0pXG4gICk7XG5cbiAgX2xhYmVscyA9IERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzLmFkYXB0KClcbiAgQElucHV0KCkgc2V0IGxhYmVscyh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5fbGFiZWxzID0gKHZhbHVlKSA/IERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzLmFkYXB0KHZhbHVlKSA6IERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzLmFkYXB0KClcbiAgfVxuXG4gIGdldCBsYWJlbHMoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2xhYmVsc1xuICB9XG5cbiAgcHJpdmF0ZSBfZXJyb3I6IERpc3BsYXlTdGF0dXNNZXNzYWdlfGFueVxuICBASW5wdXQoKSBzZXQgZXJyb3IodmFsdWU6IERpc3BsYXlTdGF0dXNNZXNzYWdlIHwgbnVsbCkge1xuICAgIHRoaXMuX2Vycm9yID0gKHZhbHVlKSA/IERpc3BsYXlTdGF0dXNNZXNzYWdlLmFkYXB0KHZhbHVlKSA6IG51bGxcbiAgfVxuXG4gIGdldCBlcnJvcigpIHtcbiAgICByZXR1cm4gdGhpcy5fZXJyb3I7XG4gIH1cblxuICBnZXQgaGFzUHJvamVjdGVkQ29udGVudCgpIHtcbiAgICByZXR1cm4gdGhpcy5wcm9qZWN0ZWRDb250ZW50ID8gdHJ1ZSA6IGZhbHNlXG4gIH1cblxuICBwcml2YXRlIF9sb2FkaW5nID0gZmFsc2VcbiAgQElucHV0KCkgc2V0IGxvYWRpbmcodmFsdWU6IGJvb2xlYW58bnVsbCkge1xuICAgIHZhbHVlID0gKHZhbHVlKSA/IHZhbHVlIDogZmFsc2VcbiAgICB0aGlzLl9sb2FkaW5nID0gKHZhbHVlKTtcbiAgICB0aGlzLmxvYWRpbmdTdWJqZWN0JC5uZXh0KHZhbHVlKTtcbiAgfVxuXG4gIGdldCBsb2FkaW5nKCkge1xuICAgIHJldHVybiB0aGlzLl9sb2FkaW5nO1xuICB9XG5cbiAgcHJpdmF0ZSBfZGF0YTogYW55O1xuICBASW5wdXQoKSBzZXQgZGF0YSh2YWx1ZSkge1xuICAgIHRoaXMuX2RhdGEgPSB2YWx1ZTtcbiAgICB0aGlzLmVycm9yID0gbnVsbFxuICB9XG5cbiAgZ2V0IGRhdGEoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2RhdGE7XG4gIH1cblxuICBwcml2YXRlIF92YWxpZGF0ZVdpdGg6IEZ1bmN0aW9ufGFueVxuICBASW5wdXQoKSBzZXQgdmFsaWRhdGVXaXRoKHZhbGlkYXRlV2l0aDogRnVuY3Rpb258bnVsbCkge1xuICAgIHRoaXMuX3ZhbGlkYXRlV2l0aCA9ICh2YWxpZGF0ZVdpdGgpID8gdmFsaWRhdGVXaXRoIDogbnVsbFxuICB9XG5cbiAgZ2V0IHZhbGlkYXRlV2l0aCgpIHtcbiAgICByZXR1cm4gdGhpcy5fdmFsaWRhdGVXaXRoXG4gIH1cblxuICBnZXQgaXNWYWxpZCgpIHtcbiAgICBjb25zdCBjYW5WYWxpZGF0ZSA9ICh0aGlzLnZhbGlkYXRlV2l0aCAmJiB0aGlzLmRhdGEpID8gdHJ1ZSA6IGZhbHNlXG4gICAgcmV0dXJuIChjYW5WYWxpZGF0ZSAmJiB0aGlzLnZhbGlkYXRlV2l0aCkgPyB0aGlzLnZhbGlkYXRlV2l0aCh0aGlzLmRhdGEpIDogdHJ1ZVxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG5cbiAgfVxuXG59XG4iLCJcbjxkaXYgY2xhc3M9XCJzdGF0ZS1jb250YWluZXJcIiBpZD1cIm92ZXJsYXlcIiBbY2xhc3Mub3ZlcmxheV09XCJvdmVybGF5XCI+XG4gIDxkaXYgKm5nSWY9XCJsb2FkaW5nOyBlbHNlIENIRUNLX0RBVEFcIiBjbGFzcz1cImxvYWRpbmctc3RhdGUtY29udGFpbmVyIGJveFwiPlxuICAgIDxkaXYgaWQ9XCJib3JkZXItc3Bpbm5lclwiICpuZ0lmPVwiKGxvYWRpbmdEaXNwbGF5JCB8IGFzeW5jKSA9PT0gZmFsc2U7IGVsc2UgbGFiZWxTcGlubmVyXCI+XG4gICAgICA8bWF0LXNwaW5uZXIgW2RpYW1ldGVyXT1cIjIyXCI+PC9tYXQtc3Bpbm5lcj5cbiAgICA8L2Rpdj5cbiAgICA8bmctdGVtcGxhdGUgI2xhYmVsU3Bpbm5lcj5cbiAgICAgIDxkaXYgaWQ9XCJsb2FkaW5nLXdpdGgtdGV4dFwiPlxuICAgICAgICA8ZGl2IGlkPVwibG9hZGluZy10ZXh0XCI+XG4gICAgICAgICAgPG1hdC1zcGlubmVyIFtkaWFtZXRlcl09XCIyMlwiPjwvbWF0LXNwaW5uZXI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJsb2FkaW5nXCI+e3sgbGFiZWxzLmxvYWRpbmcgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9kaXY+XG5cbiAgPG5nLXRlbXBsYXRlICNDSEVDS19EQVRBPlxuICAgIDxkaXYgKm5nSWY9XCJlcnJvcjsgZWxzZSBIQVNfRVJST1JcIiBjbGFzcz1cImVycm9yLXN0YXRlLWNvbnRhaW5lclwiPlxuXG4gICAgICA8ZGl2PlxuICAgICAgICA8bWF0LWljb24gY2xhc3M9XCJzdGF0ZS1pY29uIHdhcm4taWNvblwiPmVycm9yPC9tYXQtaWNvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInN0YXRlLXRleHRcIj5cbiAgICAgICAge3sgZXJyb3I/Lm1lc3NhZ2UgfHwgbGFiZWxzLmVycm9yIH19XG4gICAgICA8L2Rpdj5cblxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFsb2FkaW5nICYmIGVycm9yXCI+XG4gICAgICAgIDxkaXYgc3R5bGU9XCJtYXJnaW4tdG9wOiAxcmVtO1wiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltFUlJPUl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctdGVtcGxhdGUgI0hBU19FUlJPUj5cblxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImRhdGFcIiBjbGFzcz1cInZlcnQtY29udGFpbmVyXCI+XG5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1ZhbGlkO1wiPlxuICAgICAgICAgIDxtYXQtaWNvbiBjbGFzcz1cInN0YXRlLWljb24gZXJyb3ItaWNvblwiPndhcm5pbmc8L21hdC1pY29uPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdGF0ZS10ZXh0XCI+e3sgbGFiZWxzLm5vRGF0YSB9fTwvZGl2PlxuXG4gICAgICAgICAgPGRpdiBzdHlsZT1cIm1hcmdpbi10b3A6IDFyZW07XCIgKm5nSWY9XCIhaXNWYWxpZFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW05PX0RBVEFdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8L25nLXRlbXBsYXRlPlxuXG4gIDwvbmctdGVtcGxhdGU+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/display-status-message.module.mjs

@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DisplayStatusMessageDemoComponent } from './display-status-message-demo/display-status-message-demo.component';
+import { DisplayStatusMessageComponent } from './display-status-message.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i0 from "@angular/core";
+export class DisplayStatusMessageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, declarations: [DisplayStatusMessageComponent,
+            DisplayStatusMessageDemoComponent], imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatCheckboxModule], exports: [DisplayStatusMessageComponent,
+            DisplayStatusMessageDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatCheckboxModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        MatDividerModule,
+                        MatCheckboxModule
+                    ],
+                    declarations: [
+                        DisplayStatusMessageComponent,
+                        DisplayStatusMessageDemoComponent,
+                    ],
+                    exports: [
+                        DisplayStatusMessageComponent,
+                        DisplayStatusMessageDemoComponent,
+                    ]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhLXN0YXR1cy1tZXNzYWdlL3NyYy9saWIvZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGlDQUFpQyxFQUFFLE1BQU0scUVBQXFFLENBQUM7QUFDeEgsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFbkYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN0RSxPQUFPLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7O0FBeUIvRCxNQUFNLE9BQU8sMEJBQTBCOytHQUExQiwwQkFBMEI7Z0hBQTFCLDBCQUEwQixpQkFUbkMsNkJBQTZCO1lBQzdCLGlDQUFpQyxhQWJqQyxZQUFZO1lBQ1osYUFBYTtZQUNiLHdCQUF3QjtZQUN4QixXQUFXO1lBQ1gsbUJBQW1CO1lBQ25CLHdCQUF3QjtZQUN4QixlQUFlO1lBQ2Ysb0JBQW9CO1lBQ3BCLGdCQUFnQjtZQUNoQixpQkFBaUIsYUFPakIsNkJBQTZCO1lBQzdCLGlDQUFpQztnSEFJeEIsMEJBQTBCLFlBckJuQyxZQUFZO1lBQ1osYUFBYTtZQUNiLHdCQUF3QjtZQUN4QixXQUFXO1lBQ1gsbUJBQW1CO1lBQ25CLHdCQUF3QjtZQUN4QixlQUFlO1lBQ2Ysb0JBQW9CO1lBQ3BCLGdCQUFnQjtZQUNoQixpQkFBaUI7OzRGQVlSLDBCQUEwQjtrQkF2QnRDLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osYUFBYTt3QkFDYix3QkFBd0I7d0JBQ3hCLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQix3QkFBd0I7d0JBQ3hCLGVBQWU7d0JBQ2Ysb0JBQW9CO3dCQUNwQixnQkFBZ0I7d0JBQ2hCLGlCQUFpQjtxQkFDbEI7b0JBQ0QsWUFBWSxFQUFFO3dCQUNaLDZCQUE2Qjt3QkFDN0IsaUNBQWlDO3FCQUNsQztvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsNkJBQTZCO3dCQUM3QixpQ0FBaUM7cUJBQ2xDO2lCQUVGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmltcG9ydCB7IERpc3BsYXlTdGF0dXNNZXNzYWdlRGVtb0NvbXBvbmVudCB9IGZyb20gJy4vZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1kZW1vL2Rpc3BsYXktc3RhdHVzLW1lc3NhZ2UtZGVtby5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGlzcGxheVN0YXR1c01lc3NhZ2VDb21wb25lbnQgfSBmcm9tICcuL2Rpc3BsYXktc3RhdHVzLW1lc3NhZ2UuY29tcG9uZW50JztcblxuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgTWF0UHJvZ3Jlc3NTcGlubmVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcHJvZ3Jlc3Mtc3Bpbm5lcic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0U2xpZGVUb2dnbGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zbGlkZS10b2dnbGUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBNYXREaXZpZGVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGl2aWRlcic7XG5pbXBvcnQgeyBNYXRDaGVja2JveE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NoZWNrYm94JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBNYXRJY29uTW9kdWxlLFxuICAgIE1hdFByb2dyZXNzU3Bpbm5lck1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgIE1hdFByb2dyZXNzU3Bpbm5lck1vZHVsZSxcbiAgICBNYXRCdXR0b25Nb2R1bGUsXG4gICAgTWF0U2xpZGVUb2dnbGVNb2R1bGUsXG4gICAgTWF0RGl2aWRlck1vZHVsZSxcbiAgICBNYXRDaGVja2JveE1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBEaXNwbGF5U3RhdHVzTWVzc2FnZUNvbXBvbmVudCxcbiAgICBEaXNwbGF5U3RhdHVzTWVzc2FnZURlbW9Db21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBEaXNwbGF5U3RhdHVzTWVzc2FnZUNvbXBvbmVudCxcbiAgICBEaXNwbGF5U3RhdHVzTWVzc2FnZURlbW9Db21wb25lbnQsXG4gIF1cblxufSlcbmV4cG9ydCBjbGFzcyBEaXNwbGF5U3RhdHVzTWVzc2FnZU1vZHVsZSB7IH1cbiJdfQ==

package/esm2022/lib/models/display-status-message-labels.model.mjs

@@ -0,0 +1,11 @@
+export class DisplayStatusMessageLabels {
+    constructor(loading = 'Loading...', error = 'Error Message', noData = 'No Data') {
+        this.loading = loading;
+        this.error = error;
+        this.noData = noData;
+    }
+    static adapt(item) {
+        return new DisplayStatusMessageLabels(item?.loading, item?.error, item?.noData);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1sYWJlbHMubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhLXN0YXR1cy1tZXNzYWdlL3NyYy9saWIvbW9kZWxzL2Rpc3BsYXktc3RhdHVzLW1lc3NhZ2UtbGFiZWxzLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1BLE1BQU0sT0FBTywwQkFBMEI7SUFFckMsWUFDUyxVQUFVLFlBQVksRUFDdEIsUUFBUSxlQUFlLEVBQ3ZCLFNBQVMsU0FBUztRQUZsQixZQUFPLEdBQVAsT0FBTyxDQUFlO1FBQ3RCLFVBQUssR0FBTCxLQUFLLENBQWtCO1FBQ3ZCLFdBQU0sR0FBTixNQUFNLENBQVk7SUFDeEIsQ0FBQztJQUVKLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBVTtRQUVyQixPQUFPLElBQUksMEJBQTBCLENBQ25DLElBQUksRUFBRSxPQUFPLEVBQ2IsSUFBSSxFQUFFLEtBQUssRUFDWCxJQUFJLEVBQUUsTUFBTSxDQUNiLENBQUE7SUFFSCxDQUFDO0NBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzSW50ZXJmYWNlIHtcbiAgbG9hZGluZzogc3RyaW5nXG4gIGVycm9yOiBzdHJpbmdcbiAgbm9EYXRhOiBzdHJpbmdcbn1cblxuZXhwb3J0IGNsYXNzIERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzIGltcGxlbWVudHMgRGlzcGxheVN0YXR1c01lc3NhZ2VMYWJlbHNJbnRlcmZhY2Uge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBsb2FkaW5nID0gJ0xvYWRpbmcuLi4nLFxuICAgIHB1YmxpYyBlcnJvciA9ICdFcnJvciBNZXNzYWdlJyxcbiAgICBwdWJsaWMgbm9EYXRhID0gJ05vIERhdGEnLFxuICApIHt9XG5cbiAgc3RhdGljIGFkYXB0KGl0ZW0/OiBhbnkpOiBEaXNwbGF5U3RhdHVzTWVzc2FnZUxhYmVscyB7XG5cbiAgICByZXR1cm4gbmV3IERpc3BsYXlTdGF0dXNNZXNzYWdlTGFiZWxzKFxuICAgICAgaXRlbT8ubG9hZGluZyxcbiAgICAgIGl0ZW0/LmVycm9yLFxuICAgICAgaXRlbT8ubm9EYXRhLFxuICAgIClcblxuICB9XG5cbn1cbiJdfQ==

package/esm2022/lib/models/display-status-message.model.mjs

@@ -0,0 +1,10 @@
+export class DisplayStatusMessage {
+    constructor(message) {
+        this.message = message;
+    }
+    static adapt(item) {
+        item = (typeof item === 'string') ? { message: item } : item;
+        return new DisplayStatusMessage(item?.message);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGEtc3RhdHVzLW1lc3NhZ2Uvc3JjL2xpYi9tb2RlbHMvZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJQSxNQUFNLE9BQU8sb0JBQW9CO0lBRS9CLFlBQ1MsT0FBZ0I7UUFBaEIsWUFBTyxHQUFQLE9BQU8sQ0FBUztJQUN0QixDQUFDO0lBRUosTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFVO1FBRXJCLElBQUksR0FBRyxDQUFDLE9BQU8sSUFBSSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBO1FBRTVELE9BQU8sSUFBSSxvQkFBb0IsQ0FDN0IsSUFBSSxFQUFFLE9BQU8sQ0FDZCxDQUFBO0lBRUgsQ0FBQztDQUVGIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBEaXNwbGF5U3RhdHVzTWVzc2FnZUludGVyZmFjZSB7XG4gIG1lc3NhZ2U/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNsYXNzIERpc3BsYXlTdGF0dXNNZXNzYWdlIGltcGxlbWVudHMgRGlzcGxheVN0YXR1c01lc3NhZ2VJbnRlcmZhY2Uge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBtZXNzYWdlPzogc3RyaW5nLFxuICApIHt9XG5cbiAgc3RhdGljIGFkYXB0KGl0ZW0/OiBhbnkpOiBEaXNwbGF5U3RhdHVzTWVzc2FnZSB7XG5cbiAgICBpdGVtID0gKHR5cGVvZiBpdGVtID09PSAnc3RyaW5nJykgPyB7IG1lc3NhZ2U6IGl0ZW0gfSA6IGl0ZW1cblxuICAgIHJldHVybiBuZXcgRGlzcGxheVN0YXR1c01lc3NhZ2UoXG4gICAgICBpdGVtPy5tZXNzYWdlLFxuICAgIClcblxuICB9XG5cbn1cbiJdfQ==

package/esm2022/lib/models/index.mjs

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of data-status-message
+ */
+export * from './display-status-message-labels.model';
+export * from './display-status-message.model';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhLXN0YXR1cy1tZXNzYWdlL3NyYy9saWIvbW9kZWxzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBkYXRhLXN0YXR1cy1tZXNzYWdlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWxhYmVscy5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL2Rpc3BsYXktc3RhdHVzLW1lc3NhZ2UubW9kZWwnO1xuIl19

package/esm2022/public-api.mjs

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of data-status-message
+ */
+export * from './lib/display-status-message.module';
+export * from './lib/display-status-message.component';
+export * from './lib/display-status-message-demo/display-status-message-demo.component';
+export * from './lib/models/index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RhdGEtc3RhdHVzLW1lc3NhZ2Uvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLHFDQUFxQyxDQUFDO0FBRXBELGNBQWMsd0NBQXdDLENBQUM7QUFDdkQsY0FBYyx5RUFBeUUsQ0FBQztBQUN4RixjQUFjLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBkYXRhLXN0YXR1cy1tZXNzYWdlXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlzcGxheS1zdGF0dXMtbWVzc2FnZS5tb2R1bGUnO1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXNwbGF5LXN0YXR1cy1tZXNzYWdlLWRlbW8vZGlzcGxheS1zdGF0dXMtbWVzc2FnZS1kZW1vLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RlbHMvaW5kZXgnO1xuIl19

package/fesm2022/data-status-message.mjs

@@ -0,0 +1,278 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, ViewEncapsulation, ContentChild, Input, inject, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject, concat, of, timer, EMPTY, tap, delay, startWith } from 'rxjs';
+import * as i2$1 from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { switchMap, map } from 'rxjs/operators';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+class DisplayStatusMessageLabels {
+    constructor(loading = 'Loading...', error = 'Error Message', noData = 'No Data') {
+        this.loading = loading;
+        this.error = error;
+        this.noData = noData;
+    }
+    static adapt(item) {
+        return new DisplayStatusMessageLabels(item?.loading, item?.error, item?.noData);
+    }
+}
+
+class DisplayStatusMessage {
+    constructor(message) {
+        this.message = message;
+    }
+    static adapt(item) {
+        item = (typeof item === 'string') ? { message: item } : item;
+        return new DisplayStatusMessage(item?.message);
+    }
+}
+
+class DisplayStatusMessageComponent {
+    constructor() {
+        this.delayBy = 3; //seconds
+        this._overlay = false;
+        this.display = false;
+        this.disabled = false;
+        this.loadingSubject$ = new BehaviorSubject(false);
+        this.loadingDisplay$ = this.loadingSubject$.pipe(switchMap(loading => {
+            if (loading) {
+                return concat(of(false), timer(1000 * this.delayBy).pipe(map(() => true)));
+            }
+            return of(false);
+        }));
+        this._labels = DisplayStatusMessageLabels.adapt();
+        this._loading = false;
+    }
+    set overlay(value) {
+        this._overlay = (value) ? value : false;
+    }
+    get overlay() {
+        return this._overlay;
+    }
+    set labels(value) {
+        this._labels = (value) ? DisplayStatusMessageLabels.adapt(value) : DisplayStatusMessageLabels.adapt();
+    }
+    get labels() {
+        return this._labels;
+    }
+    set error(value) {
+        this._error = (value) ? DisplayStatusMessage.adapt(value) : null;
+    }
+    get error() {
+        return this._error;
+    }
+    get hasProjectedContent() {
+        return this.projectedContent ? true : false;
+    }
+    set loading(value) {
+        value = (value) ? value : false;
+        this._loading = (value);
+        this.loadingSubject$.next(value);
+    }
+    get loading() {
+        return this._loading;
+    }
+    set data(value) {
+        this._data = value;
+        this.error = null;
+    }
+    get data() {
+        return this._data;
+    }
+    set validateWith(validateWith) {
+        this._validateWith = (validateWith) ? validateWith : null;
+    }
+    get validateWith() {
+        return this._validateWith;
+    }
+    get isValid() {
+        const canValidate = (this.validateWith && this.data) ? true : false;
+        return (canValidate && this.validateWith) ? this.validateWith(this.data) : true;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DisplayStatusMessageComponent, selector: "app-display-status-message", inputs: { delayBy: "delayBy", overlay: "overlay", display: "display", labels: "labels", error: "error", loading: "loading", data: "data", validateWith: "validateWith" }, queries: [{ propertyName: "projectedContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "\n<div class=\"state-container\" id=\"overlay\" [class.overlay]=\"overlay\">\n  <div *ngIf=\"loading; else CHECK_DATA\" class=\"loading-state-container box\">\n    <div id=\"border-spinner\" *ngIf=\"(loadingDisplay$ | async) === false; else labelSpinner\">\n      <mat-spinner [diameter]=\"22\"></mat-spinner>\n    </div>\n    <ng-template #labelSpinner>\n      <div id=\"loading-with-text\">\n        <div id=\"loading-text\">\n          <mat-spinner [diameter]=\"22\"></mat-spinner>\n          <span class=\"loading\">{{ labels.loading }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <ng-template #CHECK_DATA>\n    <div *ngIf=\"error; else HAS_ERROR\" class=\"error-state-container\">\n\n      <div>\n        <mat-icon class=\"state-icon warn-icon\">error</mat-icon>\n      </div>\n      <div class=\"state-text\">\n        {{ error?.message || labels.error }}\n      </div>\n\n      <ng-container *ngIf=\"!loading && error\">\n        <div style=\"margin-top: 1rem;\">\n          <ng-content select=\"[ERROR]\"></ng-content>\n        </div>\n      </ng-container>\n    </div>\n\n    <ng-template #HAS_ERROR>\n\n      <ng-container *ngIf=\"data\" class=\"vert-container\">\n\n        <ng-container *ngIf=\"!isValid;\">\n          <mat-icon class=\"state-icon error-icon\">warning</mat-icon>\n          <div class=\"state-text\">{{ labels.noData }}</div>\n\n          <div style=\"margin-top: 1rem;\" *ngIf=\"!isValid\">\n            <ng-content select=\"[NO_DATA]\"></ng-content>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-template>\n\n  </ng-template>\n</div>\n", styles: [".state-container{text-align:center;margin:0 auto;padding:.5rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;z-index:1;cursor:default}.state-container .state-text{margin-top:.5rem;font-weight:700;font-style:normal;font-size:1.125rem;text-align:center}.state-container .state-icon{height:1.875rem;width:1.875rem;font-size:1.875rem}.state-container .link{font-size:1rem!important;color:#286fad}.state-container .retry{font-size:1.25rem}.loading-state-container #border-spinner{border:.0625rem solid #a8a7a7;border-radius:50%;padding:.8rem;justify-content:center;align-items:center;display:flex;transition:all .3s ease-in}.loading-state-container #loading-text{display:flex;padding:.8125rem;font-size:1rem;color:#333}.loading-state-container .loading{margin-left:.625rem}.loading-state-container #loading-with-text{border:.0625rem solid #a8a7a7;border-radius:2rem;transition:all .3s ease-in}.spc-top{margin-top:1rem}.vert-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.box{height:50px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fffc}.error-icon{color:#ccc}.warn-icon{color:red;opacity:.8}.mat-progress-spinner circle,.mat-spinner circle{stroke:#cb4814}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-display-status-message', encapsulation: ViewEncapsulation.None, template: "\n<div class=\"state-container\" id=\"overlay\" [class.overlay]=\"overlay\">\n  <div *ngIf=\"loading; else CHECK_DATA\" class=\"loading-state-container box\">\n    <div id=\"border-spinner\" *ngIf=\"(loadingDisplay$ | async) === false; else labelSpinner\">\n      <mat-spinner [diameter]=\"22\"></mat-spinner>\n    </div>\n    <ng-template #labelSpinner>\n      <div id=\"loading-with-text\">\n        <div id=\"loading-text\">\n          <mat-spinner [diameter]=\"22\"></mat-spinner>\n          <span class=\"loading\">{{ labels.loading }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <ng-template #CHECK_DATA>\n    <div *ngIf=\"error; else HAS_ERROR\" class=\"error-state-container\">\n\n      <div>\n        <mat-icon class=\"state-icon warn-icon\">error</mat-icon>\n      </div>\n      <div class=\"state-text\">\n        {{ error?.message || labels.error }}\n      </div>\n\n      <ng-container *ngIf=\"!loading && error\">\n        <div style=\"margin-top: 1rem;\">\n          <ng-content select=\"[ERROR]\"></ng-content>\n        </div>\n      </ng-container>\n    </div>\n\n    <ng-template #HAS_ERROR>\n\n      <ng-container *ngIf=\"data\" class=\"vert-container\">\n\n        <ng-container *ngIf=\"!isValid;\">\n          <mat-icon class=\"state-icon error-icon\">warning</mat-icon>\n          <div class=\"state-text\">{{ labels.noData }}</div>\n\n          <div style=\"margin-top: 1rem;\" *ngIf=\"!isValid\">\n            <ng-content select=\"[NO_DATA]\"></ng-content>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-template>\n\n  </ng-template>\n</div>\n", styles: [".state-container{text-align:center;margin:0 auto;padding:.5rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;z-index:1;cursor:default}.state-container .state-text{margin-top:.5rem;font-weight:700;font-style:normal;font-size:1.125rem;text-align:center}.state-container .state-icon{height:1.875rem;width:1.875rem;font-size:1.875rem}.state-container .link{font-size:1rem!important;color:#286fad}.state-container .retry{font-size:1.25rem}.loading-state-container #border-spinner{border:.0625rem solid #a8a7a7;border-radius:50%;padding:.8rem;justify-content:center;align-items:center;display:flex;transition:all .3s ease-in}.loading-state-container #loading-text{display:flex;padding:.8125rem;font-size:1rem;color:#333}.loading-state-container .loading{margin-left:.625rem}.loading-state-container #loading-with-text{border:.0625rem solid #a8a7a7;border-radius:2rem;transition:all .3s ease-in}.spc-top{margin-top:1rem}.vert-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.box{height:50px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fffc}.error-icon{color:#ccc}.warn-icon{color:red;opacity:.8}.mat-progress-spinner circle,.mat-spinner circle{stroke:#cb4814}\n"] }]
+        }], propDecorators: { projectedContent: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: false }]
+            }], delayBy: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], validateWith: [{
+                type: Input
+            }] } });
+
+class DisplayStatusMessageDemoComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.options = this.fb.group({
+            hasData: false,
+            apiError: false,
+            isValid: false,
+            displayOverlay: false,
+        });
+        this.translations$ = of({
+            loading: 'Loading...',
+            error: 'This is an Error has Occurred',
+            noData: 'No Data Available',
+        });
+        this.hint = 'This is a hint';
+        this.overlay = false;
+        this.hasData = () => true;
+        this.simulatedData = [];
+        this.sampleData = [
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+            { id: 1, name: 'John Doe' },
+            { id: 2, name: 'Jane Doe' },
+        ];
+        this.errorRetrySample$ = EMPTY;
+        this.sampleData$ = EMPTY;
+        this.isPendingSample$ = of(false);
+    }
+    ngOnInit() {
+    }
+    onSetData() {
+        this.options.patchValue({
+            apiError: false,
+        });
+    }
+    onCallAPI() {
+        this.isPendingSample$ = of(false)
+            .pipe(tap(() => {
+            this.sampleData$ = EMPTY;
+            this.overlay = (this.options.value.displayOverlay) ? true : false;
+        }), delay(1000 * 5), tap(() => {
+            if (this.options.value.apiError) {
+                this.errorRetrySample$ = of({ message: 'An Error has Occured' });
+                this.sampleData$ = EMPTY;
+            }
+            else {
+                this.simulatedData = this.options.value.hasData ? this.sampleData : [];
+                this.sampleData$ = of(this.simulatedData);
+                if (this.simulatedData.length > 0)
+                    this.overlay = false;
+            }
+            this.hasData = (this.options.value.isValid) ? (data) => data?.length > 0 : () => true;
+        }), startWith(true));
+    }
+    onSetError() {
+        this.options.patchValue({
+            hasData: false,
+            isValid: false,
+        });
+    }
+    onSetValidate() {
+        this.options.patchValue({
+            apiError: false,
+        });
+    }
+    onAction(type) {
+        console.log('Action:', type);
+        this.overlay = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DisplayStatusMessageDemoComponent, selector: "app-display-status-message-demo", ngImport: i0, template: "<h1>Display Status Message Demo</h1>\n\n<div style=\"margin: 2rem;\">\n\n  <h3>Labels</h3>\n  {{ (translations$ | async) | json }}\n\n  <h3>Has Data</h3>\n\n  <div style=\"display: flex; gap: 2rem;\" [formGroup]=\"options\">\n    <mat-slide-toggle formControlName=\"hasData\" (click)=\"onSetData()\">Has Data</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"apiError\" (click)=\"onSetError()\">Throw api Error</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"isValid\" #useFunc (click)=\"onSetValidate()\">Validate Data Set</mat-slide-toggle>\n    <span style=\"flex: 1\"></span>\n    <mat-slide-toggle formControlName=\"displayOverlay\">Overlay</mat-slide-toggle>\n  </div>\n\n  <div *ngIf=\"useFunc.checked\" style=\"margin-top: 1rem;\">\n    Use function to determine if data is an array > 0 records\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem; display: flex; gap: 1rem\">\n    <!-- <button mat-stroked-button (click)=\"onReset()\">Reset</button> -->\n    <span style=\"flex:1\"></span>\n    <button mat-stroked-button (click)=\"onCallAPI()\">Call API</button>\n  </div>\n\n</div>\n\n<div style=\"height: 50%;\">\n  <app-display-status-message\n    style=\"display: grid; height: 100%;\"\n    [loading]=\"(isPendingSample$ | async)\"\n    [validateWith]=\"hasData\"\n    [overlay]=\"overlay\"\n    [labels]=\"(translations$ | async)\"\n    [error]=\"(errorRetrySample$ | async)\"\n    [data]=\"(sampleData$ | async)\"\n  >\n      <ng-container NO_DATA>\n        <div *ngIf=\"!hasData((sampleData$ | async))\" style=\"margin-bottom: 1rem;\">{{ hint }}</div>\n        <div style=\"display: flex; gap: 8\">\n          <button mat-stroked-button (click)=\"onAction('retry')\">Retry</button>\n        </div>\n      </ng-container>\n\n      <ng-container ERROR>\n        <button mat-stroked-button (click)=\"onAction('reset-filters')\">\n          Try Again\n        </button>\n      </ng-container>\n  </app-display-status-message>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DisplayStatusMessageComponent, selector: "app-display-status-message", inputs: ["delayBy", "overlay", "display", "labels", "error", "loading", "data", "validateWith"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-display-status-message-demo', template: "<h1>Display Status Message Demo</h1>\n\n<div style=\"margin: 2rem;\">\n\n  <h3>Labels</h3>\n  {{ (translations$ | async) | json }}\n\n  <h3>Has Data</h3>\n\n  <div style=\"display: flex; gap: 2rem;\" [formGroup]=\"options\">\n    <mat-slide-toggle formControlName=\"hasData\" (click)=\"onSetData()\">Has Data</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"apiError\" (click)=\"onSetError()\">Throw api Error</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"isValid\" #useFunc (click)=\"onSetValidate()\">Validate Data Set</mat-slide-toggle>\n    <span style=\"flex: 1\"></span>\n    <mat-slide-toggle formControlName=\"displayOverlay\">Overlay</mat-slide-toggle>\n  </div>\n\n  <div *ngIf=\"useFunc.checked\" style=\"margin-top: 1rem;\">\n    Use function to determine if data is an array > 0 records\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem; display: flex; gap: 1rem\">\n    <!-- <button mat-stroked-button (click)=\"onReset()\">Reset</button> -->\n    <span style=\"flex:1\"></span>\n    <button mat-stroked-button (click)=\"onCallAPI()\">Call API</button>\n  </div>\n\n</div>\n\n<div style=\"height: 50%;\">\n  <app-display-status-message\n    style=\"display: grid; height: 100%;\"\n    [loading]=\"(isPendingSample$ | async)\"\n    [validateWith]=\"hasData\"\n    [overlay]=\"overlay\"\n    [labels]=\"(translations$ | async)\"\n    [error]=\"(errorRetrySample$ | async)\"\n    [data]=\"(sampleData$ | async)\"\n  >\n      <ng-container NO_DATA>\n        <div *ngIf=\"!hasData((sampleData$ | async))\" style=\"margin-bottom: 1rem;\">{{ hint }}</div>\n        <div style=\"display: flex; gap: 8\">\n          <button mat-stroked-button (click)=\"onAction('retry')\">Retry</button>\n        </div>\n      </ng-container>\n\n      <ng-container ERROR>\n        <button mat-stroked-button (click)=\"onAction('reset-filters')\">\n          Try Again\n        </button>\n      </ng-container>\n  </app-display-status-message>\n</div>\n" }]
+        }] });
+
+class DisplayStatusMessageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, declarations: [DisplayStatusMessageComponent,
+            DisplayStatusMessageDemoComponent], imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatCheckboxModule], exports: [DisplayStatusMessageComponent,
+            DisplayStatusMessageDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatCheckboxModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisplayStatusMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        MatDividerModule,
+                        MatCheckboxModule
+                    ],
+                    declarations: [
+                        DisplayStatusMessageComponent,
+                        DisplayStatusMessageDemoComponent,
+                    ],
+                    exports: [
+                        DisplayStatusMessageComponent,
+                        DisplayStatusMessageDemoComponent,
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of data-status-message
+ */
+
+/*
+ * Public API Surface of data-status-message
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DisplayStatusMessage, DisplayStatusMessageComponent, DisplayStatusMessageDemoComponent, DisplayStatusMessageLabels, DisplayStatusMessageModule };
+//# sourceMappingURL=data-status-message.mjs.map

package/fesm2022/data-status-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-status-message.mjs","sources":["../../../projects/data-status-message/src/lib/models/display-status-message-labels.model.ts","../../../projects/data-status-message/src/lib/models/display-status-message.model.ts","../../../projects/data-status-message/src/lib/display-status-message.component.ts","../../../projects/data-status-message/src/lib/display-status-message.component.html","../../../projects/data-status-message/src/lib/display-status-message-demo/display-status-message-demo.component.ts","../../../projects/data-status-message/src/lib/display-status-message-demo/display-status-message-demo.component.html","../../../projects/data-status-message/src/lib/display-status-message.module.ts","../../../projects/data-status-message/src/lib/models/index.ts","../../../projects/data-status-message/src/public-api.ts","../../../projects/data-status-message/src/data-status-message.ts"],"sourcesContent":["export interface DisplayStatusMessageLabelsInterface {\n  loading: string\n  error: string\n  noData: string\n}\n\nexport class DisplayStatusMessageLabels implements DisplayStatusMessageLabelsInterface {\n\n  constructor(\n    public loading = 'Loading...',\n    public error = 'Error Message',\n    public noData = 'No Data',\n  ) {}\n\n  static adapt(item?: any): DisplayStatusMessageLabels {\n\n    return new DisplayStatusMessageLabels(\n      item?.loading,\n      item?.error,\n      item?.noData,\n    )\n\n  }\n\n}\n","export interface DisplayStatusMessageInterface {\n  message?: string\n}\n\nexport class DisplayStatusMessage implements DisplayStatusMessageInterface {\n\n  constructor(\n    public message?: string,\n  ) {}\n\n  static adapt(item?: any): DisplayStatusMessage {\n\n    item = (typeof item === 'string') ? { message: item } : item\n\n    return new DisplayStatusMessage(\n      item?.message,\n    )\n\n  }\n\n}\n","import { Component, ContentChild, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BehaviorSubject, concat, of, timer } from 'rxjs';\nimport { map, switchMap } from 'rxjs/operators';\n\nimport { DisplayStatusMessageLabels } from './models/display-status-message-labels.model';\nimport { DisplayStatusMessage } from './models/display-status-message.model';\n\n@Component({\n  selector: 'app-display-status-message',\n  templateUrl: './display-status-message.component.html',\n  styleUrls: ['./display-status-message.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DisplayStatusMessageComponent implements OnInit {\n\n  @ContentChild(TemplateRef, { static: false }) projectedContent?: TemplateRef<any>;\n\n  @Input() delayBy = 3 //seconds\n\n  private _overlay = false\n  @Input() set overlay(value: boolean) {\n    this._overlay = (value) ? value : false\n  }\n\n  get overlay() {\n    return this._overlay\n  }\n\n  @Input() display = false\n\n  disabled = false\n\n  private loadingSubject$ = new BehaviorSubject<boolean>(false);\n\n  loadingDisplay$ = this.loadingSubject$.pipe(\n    switchMap(loading => {\n      if (loading) {\n        return concat(\n          of(false),\n          timer(1000 * this.delayBy).pipe(map(() => true))\n        );\n      }\n      return of(false);\n    })\n  );\n\n  _labels = DisplayStatusMessageLabels.adapt()\n  @Input() set labels(value: any) {\n    this._labels = (value) ? DisplayStatusMessageLabels.adapt(value) : DisplayStatusMessageLabels.adapt()\n  }\n\n  get labels() {\n    return this._labels\n  }\n\n  private _error: DisplayStatusMessage|any\n  @Input() set error(value: DisplayStatusMessage | null) {\n    this._error = (value) ? DisplayStatusMessage.adapt(value) : null\n  }\n\n  get error() {\n    return this._error;\n  }\n\n  get hasProjectedContent() {\n    return this.projectedContent ? true : false\n  }\n\n  private _loading = false\n  @Input() set loading(value: boolean|null) {\n    value = (value) ? value : false\n    this._loading = (value);\n    this.loadingSubject$.next(value);\n  }\n\n  get loading() {\n    return this._loading;\n  }\n\n  private _data: any;\n  @Input() set data(value) {\n    this._data = value;\n    this.error = null\n  }\n\n  get data() {\n    return this._data;\n  }\n\n  private _validateWith: Function|any\n  @Input() set validateWith(validateWith: Function|null) {\n    this._validateWith = (validateWith) ? validateWith : null\n  }\n\n  get validateWith() {\n    return this._validateWith\n  }\n\n  get isValid() {\n    const canValidate = (this.validateWith && this.data) ? true : false\n    return (canValidate && this.validateWith) ? this.validateWith(this.data) : true\n  }\n\n  ngOnInit() {\n\n  }\n\n}\n","\n<div class=\"state-container\" id=\"overlay\" [class.overlay]=\"overlay\">\n  <div *ngIf=\"loading; else CHECK_DATA\" class=\"loading-state-container box\">\n    <div id=\"border-spinner\" *ngIf=\"(loadingDisplay$ | async) === false; else labelSpinner\">\n      <mat-spinner [diameter]=\"22\"></mat-spinner>\n    </div>\n    <ng-template #labelSpinner>\n      <div id=\"loading-with-text\">\n        <div id=\"loading-text\">\n          <mat-spinner [diameter]=\"22\"></mat-spinner>\n          <span class=\"loading\">{{ labels.loading }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <ng-template #CHECK_DATA>\n    <div *ngIf=\"error; else HAS_ERROR\" class=\"error-state-container\">\n\n      <div>\n        <mat-icon class=\"state-icon warn-icon\">error</mat-icon>\n      </div>\n      <div class=\"state-text\">\n        {{ error?.message || labels.error }}\n      </div>\n\n      <ng-container *ngIf=\"!loading && error\">\n        <div style=\"margin-top: 1rem;\">\n          <ng-content select=\"[ERROR]\"></ng-content>\n        </div>\n      </ng-container>\n    </div>\n\n    <ng-template #HAS_ERROR>\n\n      <ng-container *ngIf=\"data\" class=\"vert-container\">\n\n        <ng-container *ngIf=\"!isValid;\">\n          <mat-icon class=\"state-icon error-icon\">warning</mat-icon>\n          <div class=\"state-text\">{{ labels.noData }}</div>\n\n          <div style=\"margin-top: 1rem;\" *ngIf=\"!isValid\">\n            <ng-content select=\"[NO_DATA]\"></ng-content>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-template>\n\n  </ng-template>\n</div>\n","import { Component, inject, OnInit } from '@angular/core';\nimport { delay, EMPTY, Observable, of, startWith, switchMap, tap, throwError } from 'rxjs';\nimport { DisplayStatusMessageLabels } from '../models/display-status-message-labels.model';\nimport { FormBuilder } from '@angular/forms';\n\n@Component({\n  selector: 'app-display-status-message-demo',\n  templateUrl: './display-status-message-demo.component.html',\n  styleUrls: ['./display-status-message-demo.component.scss']\n})\nexport class DisplayStatusMessageDemoComponent implements OnInit {\n\n  fb = inject(FormBuilder)\n\n  options = this.fb.group({\n    hasData: false,\n    apiError: false,\n    isValid: false,\n    displayOverlay: false,\n  })\n\n  translations$: Observable<DisplayStatusMessageLabels> = of({\n    loading: 'Loading...',\n    error: 'This is an Error has Occurred',\n    noData: 'No Data Available',\n  })\n\n  hint = 'This is a hint'\n  overlay = false\n\n  hasData: any = () => true\n\n  simulatedData: any[] = []\n\n  sampleData = [\n    { id: 1, name: 'John Doe' },\n    { id: 2, name: 'Jane Doe' },\n    { id: 1, name: 'John Doe' },\n    { id: 2, name: 'Jane Doe' },\n    { id: 1, name: 'John Doe' },\n    { id: 2, name: 'Jane Doe' },\n    { id: 1, name: 'John Doe' },\n    { id: 2, name: 'Jane Doe' },\n  ]\n\n  errorRetrySample$: any = EMPTY\n\n  sampleData$: any = EMPTY\n\n  isPendingSample$ = of(false)\n\n  ngOnInit() {\n\n  }\n\n  onSetData() {\n\n    this.options.patchValue({\n      apiError: false,\n    })\n\n  }\n\n  onCallAPI() {\n\n    this.isPendingSample$ = of(false)\n    .pipe(\n      tap(() => {\n        this.sampleData$ = EMPTY\n        this.overlay = (this.options.value.displayOverlay) ? true : false\n      }),\n      delay(1000 * 5),\n      tap(() => {\n\n        if (this.options.value.apiError) {\n          this.errorRetrySample$ = of({ message: 'An Error has Occured' })\n          this.sampleData$ = EMPTY\n        } else {\n          this.simulatedData = this.options.value.hasData ? this.sampleData : [];\n          this.sampleData$ = of(this.simulatedData);\n          if(this.simulatedData.length > 0) this.overlay = false\n        }\n\n        this.hasData = (this.options.value.isValid) ? (data: any[]) => data?.length > 0 : () => true\n\n      }),\n      startWith(true)\n    );\n\n  }\n\n  onSetError() {\n\n    this.options.patchValue({\n      hasData: false,\n      isValid: false,\n    })\n\n  }\n\n  onSetValidate() {\n\n    this.options.patchValue({\n      apiError: false,\n    })\n\n  }\n\n  onAction(type: string) {\n    console.log('Action:', type)\n    this.overlay = false\n  }\n\n}\n","<h1>Display Status Message Demo</h1>\n\n<div style=\"margin: 2rem;\">\n\n  <h3>Labels</h3>\n  {{ (translations$ | async) | json }}\n\n  <h3>Has Data</h3>\n\n  <div style=\"display: flex; gap: 2rem;\" [formGroup]=\"options\">\n    <mat-slide-toggle formControlName=\"hasData\" (click)=\"onSetData()\">Has Data</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"apiError\" (click)=\"onSetError()\">Throw api Error</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"isValid\" #useFunc (click)=\"onSetValidate()\">Validate Data Set</mat-slide-toggle>\n    <span style=\"flex: 1\"></span>\n    <mat-slide-toggle formControlName=\"displayOverlay\">Overlay</mat-slide-toggle>\n  </div>\n\n  <div *ngIf=\"useFunc.checked\" style=\"margin-top: 1rem;\">\n    Use function to determine if data is an array > 0 records\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem; display: flex; gap: 1rem\">\n    <!-- <button mat-stroked-button (click)=\"onReset()\">Reset</button> -->\n    <span style=\"flex:1\"></span>\n    <button mat-stroked-button (click)=\"onCallAPI()\">Call API</button>\n  </div>\n\n</div>\n\n<div style=\"height: 50%;\">\n  <app-display-status-message\n    style=\"display: grid; height: 100%;\"\n    [loading]=\"(isPendingSample$ | async)\"\n    [validateWith]=\"hasData\"\n    [overlay]=\"overlay\"\n    [labels]=\"(translations$ | async)\"\n    [error]=\"(errorRetrySample$ | async)\"\n    [data]=\"(sampleData$ | async)\"\n  >\n      <ng-container NO_DATA>\n        <div *ngIf=\"!hasData((sampleData$ | async))\" style=\"margin-bottom: 1rem;\">{{ hint }}</div>\n        <div style=\"display: flex; gap: 8\">\n          <button mat-stroked-button (click)=\"onAction('retry')\">Retry</button>\n        </div>\n      </ng-container>\n\n      <ng-container ERROR>\n        <button mat-stroked-button (click)=\"onAction('reset-filters')\">\n          Try Again\n        </button>\n      </ng-container>\n  </app-display-status-message>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { DisplayStatusMessageDemoComponent } from './display-status-message-demo/display-status-message-demo.component';\nimport { DisplayStatusMessageComponent } from './display-status-message.component';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatProgressSpinnerModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatProgressSpinnerModule,\n    MatButtonModule,\n    MatSlideToggleModule,\n    MatDividerModule,\n    MatCheckboxModule\n  ],\n  declarations: [\n    DisplayStatusMessageComponent,\n    DisplayStatusMessageDemoComponent,\n  ],\n  exports: [\n    DisplayStatusMessageComponent,\n    DisplayStatusMessageDemoComponent,\n  ]\n\n})\nexport class DisplayStatusMessageModule { }\n","/*\n * Public API Surface of data-status-message\n */\n\nexport * from './display-status-message-labels.model';\nexport * from './display-status-message.model';\n","/*\n * Public API Surface of data-status-message\n */\n\nexport * from './lib/display-status-message.module';\n\nexport * from './lib/display-status-message.component';\nexport * from './lib/display-status-message-demo/display-status-message-demo.component';\nexport * from './lib/models/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i3","i6.DisplayStatusMessageComponent"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="data-status-message" />
+export * from './public-api';

package/lib/display-status-message-demo/display-status-message-demo.component.d.ts

@@ -0,0 +1,34 @@
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DisplayStatusMessageLabels } from '../models/display-status-message-labels.model';
+import { FormBuilder } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class DisplayStatusMessageDemoComponent implements OnInit {
+    fb: FormBuilder;
+    options: import("@angular/forms").FormGroup<{
+        hasData: import("@angular/forms").FormControl<boolean | null>;
+        apiError: import("@angular/forms").FormControl<boolean | null>;
+        isValid: import("@angular/forms").FormControl<boolean | null>;
+        displayOverlay: import("@angular/forms").FormControl<boolean | null>;
+    }>;
+    translations$: Observable<DisplayStatusMessageLabels>;
+    hint: string;
+    overlay: boolean;
+    hasData: any;
+    simulatedData: any[];
+    sampleData: {
+        id: number;
+        name: string;
+    }[];
+    errorRetrySample$: any;
+    sampleData$: any;
+    isPendingSample$: Observable<boolean>;
+    ngOnInit(): void;
+    onSetData(): void;
+    onCallAPI(): void;
+    onSetError(): void;
+    onSetValidate(): void;
+    onAction(type: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayStatusMessageDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplayStatusMessageDemoComponent, "app-display-status-message-demo", never, {}, {}, never, never, false, never>;
+}

package/lib/display-status-message.component.d.ts

@@ -0,0 +1,35 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { DisplayStatusMessageLabels } from './models/display-status-message-labels.model';
+import { DisplayStatusMessage } from './models/display-status-message.model';
+import * as i0 from "@angular/core";
+export declare class DisplayStatusMessageComponent implements OnInit {
+    projectedContent?: TemplateRef<any>;
+    delayBy: number;
+    private _overlay;
+    set overlay(value: boolean);
+    get overlay(): boolean;
+    display: boolean;
+    disabled: boolean;
+    private loadingSubject$;
+    loadingDisplay$: import("rxjs").Observable<boolean>;
+    _labels: DisplayStatusMessageLabels;
+    set labels(value: any);
+    get labels(): any;
+    private _error;
+    set error(value: DisplayStatusMessage | null);
+    get error(): DisplayStatusMessage | null;
+    get hasProjectedContent(): boolean;
+    private _loading;
+    set loading(value: boolean | null);
+    get loading(): boolean | null;
+    private _data;
+    set data(value: any);
+    get data(): any;
+    private _validateWith;
+    set validateWith(validateWith: Function | null);
+    get validateWith(): Function | null;
+    get isValid(): any;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayStatusMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplayStatusMessageComponent, "app-display-status-message", never, { "delayBy": { "alias": "delayBy"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "display": { "alias": "display"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "error": { "alias": "error"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "data": { "alias": "data"; "required": false; }; "validateWith": { "alias": "validateWith"; "required": false; }; }, {}, ["projectedContent"], ["[ERROR]", "[NO_DATA]"], false, never>;
+}

package/lib/display-status-message.module.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./display-status-message.component";
+import * as i2 from "./display-status-message-demo/display-status-message-demo.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "@angular/material/progress-spinner";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/material/button";
+import * as i8 from "@angular/material/slide-toggle";
+import * as i9 from "@angular/material/divider";
+import * as i10 from "@angular/material/checkbox";
+export declare class DisplayStatusMessageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayStatusMessageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DisplayStatusMessageModule, [typeof i1.DisplayStatusMessageComponent, typeof i2.DisplayStatusMessageDemoComponent], [typeof i3.CommonModule, typeof i4.MatIconModule, typeof i5.MatProgressSpinnerModule, typeof i6.FormsModule, typeof i6.ReactiveFormsModule, typeof i5.MatProgressSpinnerModule, typeof i7.MatButtonModule, typeof i8.MatSlideToggleModule, typeof i9.MatDividerModule, typeof i10.MatCheckboxModule], [typeof i1.DisplayStatusMessageComponent, typeof i2.DisplayStatusMessageDemoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DisplayStatusMessageModule>;
+}

package/lib/models/display-status-message-labels.model.d.ts

@@ -0,0 +1,12 @@
+export interface DisplayStatusMessageLabelsInterface {
+    loading: string;
+    error: string;
+    noData: string;
+}
+export declare class DisplayStatusMessageLabels implements DisplayStatusMessageLabelsInterface {
+    loading: string;
+    error: string;
+    noData: string;
+    constructor(loading?: string, error?: string, noData?: string);
+    static adapt(item?: any): DisplayStatusMessageLabels;
+}

package/lib/models/display-status-message.model.d.ts

@@ -0,0 +1,8 @@
+export interface DisplayStatusMessageInterface {
+    message?: string;
+}
+export declare class DisplayStatusMessage implements DisplayStatusMessageInterface {
+    message?: string | undefined;
+    constructor(message?: string | undefined);
+    static adapt(item?: any): DisplayStatusMessage;
+}

package/lib/models/index.d.ts

@@ -0,0 +1,2 @@
+export * from './display-status-message-labels.model';
+export * from './display-status-message.model';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "data-status-message",
+  "version": "0.0.4",
+  "homepage": "https://wavecoders.ca",
+  "author": "Mike Bonifacio <wavecoders@gmail.com> (http://wavecoders@gmail.com/)",
+  "description": "This is an Angular Module containing Components/Services using Material",
+  "funding": [
+    {
+      "type": "individual",
+      "url": "http://wavecoders.ca/donate"
+    }
+  ],
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/data-status-message.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/data-status-message.mjs",
+      "esm": "./esm2022/data-status-message.mjs",
+      "default": "./fesm2022/data-status-message.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/display-status-message.module';
+export * from './lib/display-status-message.component';
+export * from './lib/display-status-message-demo/display-status-message-demo.component';
+export * from './lib/models/index';