turbogui-angular 20.3.0 → 20.5.0

package/fesm2022/turbogui-angular.mjs

@@ -11,13 +11,13 @@ import { CommonModule } from '@angular/common';
 import { take, filter } from 'rxjs/operators';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
-import * as i2$1 from '@angular/material/datepicker';
+import * as i2$1 from '@angular/platform-browser';
+import * as i2$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i1$1 from '@angular/material/snack-bar';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
-import * as i2$2 from '@angular/platform-browser';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -581,6 +581,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 args: ['@busyStateBaseFade']
             }] } });
 
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * A dialog component with an iframe that can be used to display any url or content.
+ *
+ * We must specify the url in the data parameter when opening the dialog, and we can also specify the title
+ * by placing it at the first position of the texts array.
+ */
+class DialogIFrameComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogIFrameComponent'; }
+    constructor(elementRef, dialogRef, sanitizer, data) {
+        super(elementRef, dialogRef);
+        this.elementRef = elementRef;
+        this.dialogRef = dialogRef;
+        this.sanitizer = sanitizer;
+        this.data = data;
+        this.title = '';
+        if (data.texts.length > 0) {
+            this.title = data.texts[0];
+        }
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: i2$1.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogIFrameComponent, isStandalone: true, selector: "tg-dialog-iframe", providers: [], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"title\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-iframe', imports: [CommonModule], providers: [], template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"title\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: i2$1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * A dialog component that shows a blob (pdf, image, etc) inside an iframe.
+ *
+ * We must specify the blol in the data parameter when opening the dialog, and we can also specify the title
+ * by placing it at the first position of the texts array.
+ */
+class DialogBlobComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogBlobComponent'; }
+    constructor(elementRef, sanitizer, dialogRef, data) {
+        super(elementRef, dialogRef);
+        this.elementRef = elementRef;
+        this.sanitizer = sanitizer;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.title = '';
+        this.mimeType = '';
+        this.objectUrl = '';
+        this.blobUrl = '';
+        if (data.texts.length > 0) {
+            this.title = data.texts[0];
+        }
+    }
+    ngOnInit() {
+        let blob = null;
+        let blobInput = this.data?.data?.blob;
+        this.mimeType = this.data?.data?.mimeType || 'application/octet-stream';
+        if (typeof blobInput === 'string') {
+            blob = new Blob([blobInput], { type: this.mimeType });
+        }
+        else if (blobInput instanceof Blob) {
+            blob = blobInput;
+        }
+        if (blob instanceof Blob) {
+            this.objectUrl = URL.createObjectURL(blob);
+            this.blobUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl);
+        }
+    }
+    ngOnDestroy() {
+        if (this.blobUrl !== '') {
+            URL.revokeObjectURL(this.objectUrl);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBlobComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.DomSanitizer }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogBlobComponent, isStandalone: true, selector: "tg-dialog-blob", providers: [], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<!-- For images -->\r\n<img *ngIf=\"mimeType.startsWith('image/')\" [src]=\"blobUrl\" [alt]=\"title\" />\r\n\r\n<!-- For PDFs and other types -->\r\n<iframe *ngIf=\"!mimeType.startsWith('image/')\" [src]=\"blobUrl\" [title]=\"title\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe,img{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBlobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-blob', imports: [CommonModule], providers: [], template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<!-- For images -->\r\n<img *ngIf=\"mimeType.startsWith('image/')\" [src]=\"blobUrl\" [alt]=\"title\" />\r\n\r\n<!-- For PDFs and other types -->\r\n<iframe *ngIf=\"!mimeType.startsWith('image/')\" [src]=\"blobUrl\" [title]=\"title\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe,img{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.DomSanitizer }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
  *
@@ -601,7 +701,7 @@ class DialogDateSelectionComponent extends DialogBaseComponent {
         this.data = data;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogDateSelectionComponent, isStandalone: true, selector: "tg-dialog-date-selection", providers: [], usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogDateSelectionComponent, isStandalone: true, selector: "tg-dialog-date-selection", providers: [], usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, decorators: [{
             type: Component,
@@ -939,23 +1039,83 @@ class DialogService extends SingletoneStrictClass {
             });
         });
     }
+    /**
+     * Show a dialog with an iframe inside it, to show external web pages or web applications.
+     *
+     * This method is a shortcut for addDialog() method using DialogIFrameComponent as the dialog component class
+     *
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - url (mandatory): The url to load in the iframe
+     *            - title: The title to show at the top of the dialog
+     *            - id: see addDialog() docs
+     *            - width: see addDialog() docs
+     *            - maxWidth: see addDialog() docs
+     *            - height: see addDialog() docs
+     *            - maxHeight: see addDialog() docs
+     *            - modal: see addDialog() docs
+     *
+     * @returns A Promise that resolves once the user closes the dialog
+     */
+    async addIFrameDialog(properties) {
+        if (this._isEnabled) {
+            await this.addDialog(DialogIFrameComponent, {
+                id: properties.id ?? undefined,
+                data: properties.url,
+                texts: properties.title ? [properties.title] : undefined,
+                width: properties.width ?? "98vw",
+                maxWidth: properties.maxWidth ?? "1000px",
+                height: properties.height ?? "98vh",
+                maxHeight: properties.maxHeight ?? "3000px",
+                modal: properties.modal ?? false
+            });
+        }
+        return null;
+    }
+    /**
+     * Show a dialog with a pdf from a binary blob data.
+     *
+     * This method is a shortcut for addDialog() method using DialogBlobComponent as the dialog component class, using the received blob
+     * data with a mime type of 'application/pdf'
+     *
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - blob (mandatory): The binary data containing the pdf file to show. It can be a Blob, an ArrayBuffer or a raw binary string
+     *            - title: The title to show at the top of the dialog
+     *            - id: see addDialog() docs
+     *            - width: see addDialog() docs
+     *            - maxWidth: see addDialog() docs
+     *            - height: see addDialog() docs
+     *            - maxHeight: see addDialog() docs
+     *            - modal: see addDialog() docs
+     *
+     * @returns A Promise that resolves once the user closes the dialog
+     */
+    async addPdfDialog(properties) {
+        if (this._isEnabled) {
+            await this.addDialog(DialogBlobComponent, {
+                id: properties.id ?? undefined,
+                data: { blob: properties.blob, mimeType: 'application/pdf' },
+                texts: properties.title ? [properties.title] : undefined,
+                width: properties.width ?? "98vw",
+                maxWidth: properties.maxWidth ?? "1000px",
+                height: properties.height ?? "98vh",
+                maxHeight: properties.maxHeight ?? "3000px",
+                modal: properties.modal ?? false
+            });
+        }
+        return null;
+    }
     /**
      * Show a dialog with a calendar to let the user pick a date.
      *
      * @param properties An object containing the different visual and textual options that this dialog allows:
-     *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
-     *            - width: Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
-     *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
-     *              %, vh, vw, or any other. For example: '400px', '50%', etc.
-     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
-     *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
-     *            - height: TODO docs
-     *            - maxHeight: TODO docs
-     *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
-     *              by the user clicking outside it
-     *            - title: An optional dialog title
-     *            - viewContainerRef: This is important to propagate providers from a parent component to this dialog. We must specify
-     *              this reference to make sure the same services injected on the parent are available too at the child dialog
+     *            - id: see addDialog() docs
+     *            - width: see addDialog() docs
+     *            - maxWidth: see addDialog() docs
+     *            - height: see addDialog() docs
+     *            - maxHeight: see addDialog() docs
+     *            - modal: see addDialog() docs
+     *            - title: The title to show at the top of the dialog
+     *            - viewContainerRef: see addDialog() docs
      *
      * @returns A Promise that resolves to a Date() object selected by the user or null if no selection was made
      */
@@ -975,6 +1135,44 @@ class DialogService extends SingletoneStrictClass {
         });
         return selection.index === -1 ? null : selection.value;
     }
+    /**
+     * Show a dialog with an error message and a single option button to close it.
+     *
+     * This method is a shortcut for addDialog() method using DialogErrorComponent as the dialog component class
+     *
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - title (mandatory): The dialog title
+     *            - option (mandatory): The text to place on the single option button
+     *            - description: An optional description text to show below the title
+     *            - id: see addDialog() docs
+     *            - width: see addDialog() docs
+     *            - maxWidth: see addDialog() docs
+     *            - height: see addDialog() docs
+     *            - maxHeight: see addDialog() docs
+     *            - modal: see addDialog() docs
+     *            - dialogErrorComponentClass: A custom component class to use instead of the default DialogErrorComponent. This custom component must extend DialogErrorComponent
+     *
+     * @returns A Promise that resolves once the user selects the button with the option caption
+     */
+    async addErrorDialog(properties) {
+        if (this._isEnabled) {
+            let texts = [properties.title];
+            if (properties.description && properties.description !== undefined) {
+                texts.push(properties.description);
+            }
+            await this.addDialog(properties.dialogErrorComponentClass ?? DialogErrorComponent, {
+                id: properties.id ?? undefined,
+                width: properties.width ?? "70%",
+                maxWidth: properties.maxWidth ?? "500px",
+                height: properties.height ?? "auto",
+                maxHeight: properties.maxHeight ?? "92vw",
+                modal: properties.modal ?? false,
+                texts: texts,
+                options: [properties.option]
+            });
+        }
+        return null;
+    }
     /**
      * Force the removal of all the dialogs that are currently visible.
      *
@@ -1787,7 +1985,7 @@ class RouterBaseService {
         // Clean up BehaviorSubject
         this._currentRoute.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, deps: [{ token: i1$2.Router }, { token: i2$2.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, deps: [{ token: i1$2.Router }, { token: i2$1.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, decorators: [{
@@ -1795,7 +1993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i2$2.Title }] });
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i2$1.Title }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -2314,45 +2512,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-/**
- * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
- *
- * Website : -> http://www.turbogui.org
- * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
- * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
- * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
- */
-/**
- * A dialog component with an iframe that can be used to display any url or content.
- *
- * We must specify the url in the data parameter when opening the dialog, and we can also specify the title
- * bi placing it at the first position of the texts array.
- */
-class DialogIFrameComponent extends DialogBaseComponent {
-    static { this.DIALOG_CLASS_NAME = 'DialogIFrameComponent'; }
-    constructor(elementRef, dialogRef, sanitizer, data) {
-        super(elementRef, dialogRef);
-        this.elementRef = elementRef;
-        this.dialogRef = dialogRef;
-        this.sanitizer = sanitizer;
-        this.data = data;
-        this.title = '';
-        if (data.texts.length > 0) {
-            this.title = data.texts[0];
-        }
-        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: i2$2.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogIFrameComponent, isStandalone: true, selector: "tg-dialog-iframe", providers: [], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"data.texts[0]\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-iframe', imports: [CommonModule], providers: [], template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"data.texts[0]\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: i2$2.DomSanitizer }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
-
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
  *