turbogui-angular 20.8.0 → 20.10.0

package/fesm2022/turbogui-angular.mjs

@@ -620,6 +620,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     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 with an image that can be used to display any picture url
+ *
+ * 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 DialogImageComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogImageComponent'; }
+    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: DialogImageComponent, 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: DialogImageComponent, isStandalone: true, selector: "tg-dialog-image", providers: [], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<img [src]=\"safeUrl\" title=\"title\" alt=\"{{title}}\" />", 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: DialogImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-image', imports: [CommonModule], providers: [], template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<img [src]=\"safeUrl\" title=\"title\" alt=\"{{title}}\" />", 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
  *
@@ -1003,7 +1042,7 @@ class DialogService extends SingletoneStrictClass {
      */
     addDialog(dialogComponentClass, properties) {
         if (!this._isEnabled) {
-            return Promise.reject(new Error('Dialog service is disabled'));
+            return Promise.resolve({ index: -1 });
         }
         return new Promise((resolve) => {
             // Set the default values for non specified properties
@@ -1075,6 +1114,130 @@ class DialogService extends SingletoneStrictClass {
             });
         });
     }
+    /**
+     * Shows a native OS file browser dialog to let the user select a single file from their local file system.
+     *
+     * @param options An object containing options for the file browser dialog:
+     *   - accept: A string that defines the file types the file input should accept. For example: '.csv,.xlsx', 'image/*', '.pdf', 'image/jpeg, image/png'.
+     *   - maxFileSize: (Optional) The maximum file size in bytes allowed for the selected file. If the selected file exceeds this size, the promise will be rejected with an error
+     *   - loadData: (Optional) Defines how the file content should be read and returned.
+     *             'no' (default): Returns the raw File object without its data.
+     *             'ArrayBuffer': Returns the File object with its content read as a raw binary `ArrayBuffer` in the `data` property.
+     *             'text': Returns the File object with its content read as a text string in the `data` property.
+     *             'base64': Returns the File object with its content read as a Base64 encoded string in the `data` property.
+     *
+     * @returns A Promise that resolves with the selected `File` object (which may have an added `data` property), or `null` if the user cancels the dialog.
+     *          The promise will be rejected with an Error if the selected file exceeds the specified size limits.
+     */
+    async addFileBrowserDialog(options) {
+        const files = await this._addFileBrowserDialogInternal({
+            multiple: false,
+            accept: options.accept,
+            maxFileSize: options.maxFileSize,
+            loadData: options.loadData
+        });
+        return files ? files[0] : null;
+    }
+    /**
+     * Shows a native OS file browser dialog to let the user select one or more files from their local file system.
+     *
+     * @param options An object containing options for the file browser dialog:
+     *   - accept: A string that defines the file types the file input should accept. For example: '.csv,.xlsx', 'image/*', '.pdf', 'image/jpeg, image/png'.
+     *   - maxFileSize: (Optional) The maximum file size in bytes allowed for any single selected file. If a selected file exceeds this size, the promise will be rejected with an error.
+     *   - maxTotalSize: (Optional) The maximum total size in bytes for all selected files combined. If the total size of all files exceeds this limit, the promise will be rejected with an error.
+     *   - loadData: (Optional) Defines how the file content should be read and returned.
+     *             'no' (default): Returns an array of `File` objects without their data.
+     *             'ArrayBuffer': Returns an array of `File` objects, each with its content read as a raw binary `ArrayBuffer` in the `data` property.
+     *             'text': Returns an array of `File` objects, each with its content read as a text string in the `data` property.
+     *             'base64': Returns an array of `File` objects, each with its content read as a Base64 encoded string in the `data` property.
+     *
+     * @returns A Promise that resolves with an array of `File` objects (which may have an added `data` property), or `null` if the user cancels the dialog.
+     *          The promise will be rejected with an Error if the selected files exceed the specified size limits.
+     */
+    addFilesBrowserDialog(options) {
+        return this._addFileBrowserDialogInternal({
+            multiple: true,
+            accept: options.accept,
+            maxFileSize: options.maxFileSize,
+            maxTotalSize: options.maxTotalSize,
+            loadData: options.loadData
+        });
+    }
+    /**
+     * Auxiliary method that combines the logic for addFileBrowserDialog and addFilesBrowserDialog
+     */
+    async _addFileBrowserDialogInternal(options) {
+        if (!this._isEnabled) {
+            return null;
+        }
+        // Create a hidden input element to show the file browser dialog
+        const input = this._renderer.createElement('input');
+        this._renderer.setAttribute(input, 'type', 'file');
+        this._renderer.setAttribute(input, 'accept', options.accept);
+        this._renderer.setAttribute(input, 'id', 'turbogui-file-browser-input-hidden-dialog');
+        if (options.multiple) {
+            this._renderer.setAttribute(input, 'multiple', 'true');
+        }
+        this._renderer.setStyle(input, 'display', 'none');
+        this._renderer.appendChild(document.body, input);
+        try {
+            const files = await new Promise((resolve) => {
+                const onFocus = () => {
+                    setTimeout(() => {
+                        if (!input.files || input.files.length === 0) {
+                            resolve(null);
+                        }
+                    }, 600);
+                };
+                const onChange = (event) => {
+                    const fileList = event.target.files;
+                    resolve(fileList ? Array.from(fileList) : null);
+                };
+                input.addEventListener('change', onChange);
+                window.addEventListener('focus', onFocus, { once: true });
+                input.click();
+            });
+            if (!files || files.length === 0) {
+                return null;
+            }
+            let totalSize = 0;
+            for (const file of files) {
+                if (options.maxFileSize !== undefined && file.size > options.maxFileSize) {
+                    throw new Error(`Max file size exceeded: "${file.name}" exceeds ${options.maxFileSize} bytes`);
+                }
+                totalSize += file.size;
+            }
+            if (options.maxTotalSize !== undefined && totalSize > options.maxTotalSize) {
+                throw new Error(`Max total size exceeded: ${options.maxTotalSize} bytes`);
+            }
+            if (!options.loadData || options.loadData === 'no') {
+                return files;
+            }
+            const fileReadPromises = files.map(async (file) => {
+                switch (options.loadData) {
+                    case 'ArrayBuffer':
+                        file.data = await file.arrayBuffer();
+                        break;
+                    case 'text':
+                        file.data = await file.text();
+                        break;
+                    case 'base64':
+                        file.data = await new Promise((resolve, reject) => {
+                            const reader = new FileReader();
+                            reader.onload = () => resolve(reader.result.split(',')[1]);
+                            reader.onerror = () => reject(reader.error ?? new Error('Unknown FileReader error'));
+                            reader.readAsDataURL(file);
+                        });
+                        break;
+                }
+                return file;
+            });
+            return await Promise.all(fileReadPromises);
+        }
+        finally {
+            this._renderer.removeChild(document.body, input);
+        }
+    }
     /**
      * Show a dialog with an iframe inside it, to show external web pages or web applications.
      *
@@ -1107,6 +1270,38 @@ class DialogService extends SingletoneStrictClass {
         }
         return null;
     }
+    /**
+     * Show a dialog with an image inside it, to load image files from a url.
+     *
+     * This method is a shortcut for addDialog() method using DialogImageComponent 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 image
+     *            - 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 addImageDialog(properties) {
+        if (this._isEnabled) {
+            await this.addDialog(DialogImageComponent, {
+                id: properties.id ?? undefined,
+                data: properties.url,
+                texts: properties.title ? [properties.title] : undefined,
+                width: properties.width ?? "85vw",
+                maxWidth: properties.maxWidth ?? "1200px",
+                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.
      *
@@ -1151,7 +1346,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxHeight: see addDialog() docs
      *            - modal: see addDialog() docs
      *            - title: The title to show at the top of the dialog
-     *            - viewContainerRef: see addDialog() docs
+     *            - viewContainerRef: MANDATORY! or the component won't render. see addDialog() docs
      *
      * @returns A Promise that resolves to a Date() object selected by the user or null if no selection was made
      */
@@ -1972,6 +2167,38 @@ class RouterBaseService {
         }
         return currentRoute.params[key];
     }
+    /**
+     * Gets the value of a specific query parameter by its key from the current route.
+     * For example, if the current route is `/search?query=angular`, and you call this method with `key` as `query`, it will return `angular`.
+     *
+     * @param key The key of the query parameter to retrieve.
+     */
+    getQueryParamValue(key) {
+        let currentRoute = this.router.routerState.snapshot.root;
+        while (currentRoute.firstChild) {
+            currentRoute = currentRoute.firstChild;
+        }
+        return currentRoute.queryParams[key];
+    }
+    /**
+     * Sets or updates the value of a specific query parameter in the current route.
+     * For example, if the current route is `/search?query=angular`, and you call this method with `key` as `page` and `value` as `2`,
+     * it will navigate to `/search?query=angular&page=2`.
+     *
+     * @param key The key of the query parameter to set or update.
+     * @param value The value to set for the specified query parameter.
+     */
+    setQueryParamValue(key, value) {
+        let currentRoute = this.router.routerState.root;
+        while (currentRoute.firstChild) {
+            currentRoute = currentRoute.firstChild;
+        }
+        this.router.navigate([], {
+            relativeTo: currentRoute,
+            queryParams: { [key]: value },
+            queryParamsHandling: 'merge'
+        });
+    }
     /**
      * Initializes the title management feature to automatically refresh the browser title based on the current
      * URL route. It Must be called once, typically at application startup
@@ -3414,5 +3641,5 @@ class ValidatorsPlus extends Validators {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogIFrameComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementClickOutsideDirective, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesBaseService, NotificationService, RouterBaseService, SingletoneStrictClass, TurboApiService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
+export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogIFrameComponent, DialogImageComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementClickOutsideDirective, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesBaseService, NotificationService, RouterBaseService, SingletoneStrictClass, TurboApiService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
 //# sourceMappingURL=turbogui-angular.mjs.map