turbogui-angular 13.0.1 → 13.0.2

package/fesm2022/turbogui-angular.mjs

@@ -99,20 +99,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * This is the base class for all the dialog components that can be loaded by the dialog service class
  */
 class DialogBaseComponent {
-}
-
-/**
- * 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
- */
-/**
- * This is the base class for all the dialog components that show one or more options for the user to select
- */
-class DialogOptionsBaseComponent extends DialogBaseComponent {
+    /**
+     * Method to be called by the dialogs that extend this base component when they want to close themselves.
+     * It will perform the close of that dialog and also send an object to the addDialog() callback with the index and value
+     * that the user may have selected.
+     *
+     * @param dialogRef The reference to the dialogRef object that is available at the extended dialog component. It is
+     *        required to perform the closing operation
+     * @param index The numeric index of the user option selection. It will be specific for each dialog and it's different available options
+     * @param value Any value that may be provided to the callback regarding the user selected option.
+     *
+     * @return void
+     */
+    closeDialog(dialogRef, index, value = null) {
+        dialogRef.close({ index: index, value: value });
+    }
 }
 
 /**
@@ -126,27 +127,18 @@ class DialogOptionsBaseComponent extends DialogBaseComponent {
 /**
  * A dialog component with a calendar that allows us to select a single date value
  */
-class DialogDateSelectionComponent extends DialogOptionsBaseComponent {
+class DialogDateSelectionComponent extends DialogBaseComponent {
     constructor(dialogRef, data) {
         super();
         this.dialogRef = dialogRef;
         this.data = data;
-        //        if (data.texts.length < 1) {
-        //
-        //            throw new Error('DialogErrorComponent expects 2 texts: The title and optionally a description');
-        //        }
-        //
-        //        if (data.options.length !== 1) {
-        //
-        //            throw new Error('DialogErrorComponent expects only one option');
-        //        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogDateSelectionComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogDateSelectionComponent, selector: "tg-dialog-date-selection", usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"dialogRef.close({index: 0, value: $event})\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"], dependencies: [{ kind: "component", type: i2.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogDateSelectionComponent, selector: "tg-dialog-date-selection", usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(dialogRef, 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: "component", type: i2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogDateSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-date-selection', template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"dialogRef.close({index: 0, value: $event})\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"] }]
+            args: [{ selector: 'tg-dialog-date-selection', template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(dialogRef, 0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -362,35 +354,34 @@ class DialogService {
     }
     /**
      * Show a dialog with one or more options that can be used to close it. We can use any of the predefined dialog types that are bundled with
-     * this library or extend DialogOptionsBaseComponent to create our own custom ones.
+     * this library or extend DialogBaseComponent to create our own custom ones.
+     *
+     * @param dialogComponentClass A class for a component that extends DialogBaseComponent, which will be the dialog that is shown to the user.
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - 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
+     *            - texts: A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should
+     *              be placed first, subtitle second and so (Each dialog may accept different number of texts).
+     *            - options: A list of strings that will be used as button captions for each one of the accepted dialog options
      *
-     * @param width Specify the css value for the maximum width the dialog will have. 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. Note that height will be adapted to the contents
-              of the dialog and cannot be specified here. We can set a pixels, % or any other css accepted value. For example: '400px', '50%', etc.
-     * @param texts A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should
-     *        be placed first, subtitle second and so (Each dialog may accept different number of texts).
-     * @param options A list of strings that will be used as button captions for each one of the accepted dialog options
-     * @param dialogComponentClass A class for a component that extends DialogOptionsBaseComponent, which will be the
-     *        dialog visual element that is shown to the user.
-     * @param callback A function that will be called after the dialog is closed and will receive an object with the numeric index and value for
-     *        the option that's been selected by the user. if no option was selected, the value will be -1
-     * @param modal True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
-     *        by the user by clicking outside it
-     * @param 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
+     * @param callback A function that will be called after the dialog is closed and will receive a selection object with the numeric index and value for
+     *        the option that's been selected by the user. if no option was selected, index will be -1 and value null
      */
     addDialog(dialogComponentClass, properties, callback = null) {
         if (!this._isEnabled) {
             return;
         }
-        // Set the default values for all non specified properties
-        properties.width = properties.hasOwnProperty('width') ? properties.width : "50%";
-        properties.maxWidth = properties.hasOwnProperty('maxWidth') ? properties.maxWidth : "96vw";
-        properties.height = properties.hasOwnProperty('height') ? properties.height : "50%";
-        properties.maxHeight = properties.hasOwnProperty('maxHeight') ? properties.maxHeight : "92vw";
-        properties.modal = properties.hasOwnProperty('modal') ? properties.modal : true;
-        properties.texts = properties.hasOwnProperty('texts') ? properties.texts : [];
-        properties.options = properties.hasOwnProperty('options') ? properties.options : [];
+        // Set the default values for non specified properties
+        properties.modal = properties.modal ?? true;
+        properties.texts = properties.texts ?? [];
+        properties.options = properties.options ?? [];
         // Generate a string to uniquely identify this dialog on the list of active dialogs
         const dialogHash = properties.texts.join('') + properties.options.join('') + dialogComponentClass.name;
         // identical dialogs won't be allowed at the same time
@@ -398,8 +389,8 @@ class DialogService {
             return;
         }
         const dialogRef = this.matDialog.open(dialogComponentClass, {
-            width: properties.width,
-            maxWidth: properties.maxWidth,
+            width: properties.width ?? "50%",
+            maxWidth: properties.maxWidth ?? "96vw",
             disableClose: properties.modal,
             autoFocus: false,
             closeOnNavigation: !properties.modal,
@@ -407,22 +398,20 @@ class DialogService {
         });
         this._activeDialogs.push(dialogHash);
         this._activeDialogInstances.push(dialogRef);
-        dialogRef.beforeClosed().subscribe((selectedOption) => {
+        dialogRef.beforeClosed().subscribe((selection) => {
             this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
             this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
-            if (!NumericUtils.isInteger(selectedOption.index)) {
-                if (properties.modal) {
-                    throw new Error(`dialogRef.close() expects int value`);
-                }
-                else {
-                    selectedOption.index = -1;
-                }
+            if (!properties.modal && selection === undefined) {
+                selection = { index: -1 };
+            }
+            else if (!NumericUtils.isInteger(selection.index)) {
+                throw new Error(`closeDialog() expects index to be an integer`);
             }
             if (callback !== null) {
-                if (selectedOption.index >= 0) {
-                    selectedOption.value = properties.options[selectedOption.index];
+                if (selection.index >= 0 && selection.value === null) {
+                    selection.value = properties.options[selection.index];
                 }
-                callback(selectedOption);
+                callback(selection);
             }
         });
     }
@@ -436,24 +425,40 @@ class DialogService {
             return;
         }
         for (const dialogRef of this._activeDialogInstances) {
-            dialogRef.close(-1);
+            dialogRef.close({ index: -1 });
         }
         this._activeDialogs = [];
         this._activeDialogInstances = [];
     }
-    addDateSelectionDialog(properties, title, callback) {
+    /**
+     * 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:
+     *            - 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
+     * @param callback A function to be called after the dialog is closed. It will receive a Date() object selected by the user or null if no selection happened
+     */
+    addDateSelectionDialog(properties, callback) {
         if (!this._isEnabled) {
             return;
         }
         this.addDialog(DialogDateSelectionComponent, {
-            width: properties.width,
-            maxWidth: properties.maxWidth,
-            height: properties.height,
-            maxHeight: properties.maxHeight,
-            modal: properties.modal,
-            texts: [title]
-        }, (selectedOption) => {
-            callback(selectedOption.value);
+            width: properties.width ?? "50%",
+            maxWidth: properties.maxWidth ?? "96vw",
+            height: properties.height ?? "50%",
+            maxHeight: properties.maxHeight ?? "92vw",
+            modal: properties.modal ?? false,
+            texts: [properties.title ?? '']
+        }, (selection) => {
+            callback(selection.index === -1 ? null : selection.value);
         });
     }
     /**
@@ -524,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 /**
  * A dialog component with a single option button, to be used for error notifications
  */
-class DialogErrorComponent extends DialogOptionsBaseComponent {
+class DialogErrorComponent extends DialogBaseComponent {
     constructor(dialogRef, data) {
         super();
         this.dialogRef = dialogRef;
@@ -537,11 +542,11 @@ class DialogErrorComponent extends DialogOptionsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogErrorComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogErrorComponent, selector: "tg-dialog-error", usesInheritance: true, ngImport: i0, template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogErrorComponent, selector: "tg-dialog-error", usesInheritance: true, ngImport: i0, template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(dialogRef, 0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-error', template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"] }]
+            args: [{ selector: 'tg-dialog-error', template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(dialogRef, 0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1241,7 +1246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 /**
  * A dialog component with a single option button, to be used with dialog service
  */
-class DialogSingleOptionComponent extends DialogOptionsBaseComponent {
+class DialogSingleOptionComponent extends DialogBaseComponent {
     constructor(dialogRef, data) {
         super();
         this.dialogRef = dialogRef;
@@ -1254,11 +1259,11 @@ class DialogSingleOptionComponent extends DialogOptionsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleOptionComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleOptionComponent, selector: "tg-dialog-single-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleOptionComponent, selector: "tg-dialog-single-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"closeDialog(dialogRef, 0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-single-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"] }]
+            args: [{ selector: 'tg-dialog-single-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"closeDialog(dialogRef, 0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1276,7 +1281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * A dialog component with two option buttons, to be used with dialog service.
  * The first of the options is considered to be the primary one and will therefore have more visual accent
  */
-class DialogTwoOptionComponent extends DialogOptionsBaseComponent {
+class DialogTwoOptionComponent extends DialogBaseComponent {
     constructor(dialogRef, data) {
         super();
         this.dialogRef = dialogRef;
@@ -1289,11 +1294,11 @@ class DialogTwoOptionComponent extends DialogOptionsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogTwoOptionComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogTwoOptionComponent, selector: "tg-dialog-two-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogTwoOptionComponent, selector: "tg-dialog-two-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"closeDialog(dialogRef, 0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"closeDialog(dialogRef, 1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogTwoOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-two-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"] }]
+            args: [{ selector: 'tg-dialog-two-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"closeDialog(dialogRef, 0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"closeDialog(dialogRef, 1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1400,7 +1405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  *
  * options parameter must contain the list of elements that will be displayed to the user
  */
-class DialogSingleSelectionListComponent extends DialogOptionsBaseComponent {
+class DialogSingleSelectionListComponent extends DialogBaseComponent {
     constructor(dialogRef, browserService, data) {
         super();
         this.dialogRef = dialogRef;
@@ -1470,11 +1475,11 @@ class DialogSingleSelectionListComponent extends DialogOptionsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleSelectionListComponent, deps: [{ token: i1.MatDialogRef }, { token: BrowserService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleSelectionListComponent, selector: "tg-dialog-single-selection-list", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"], dependencies: [{ kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleSelectionListComponent, selector: "tg-dialog-single-selection-list", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(dialogRef, i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(dialogRef, selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"], dependencies: [{ kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleSelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-single-selection-list', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"] }]
+            args: [{ selector: 'tg-dialog-single-selection-list', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(dialogRef, i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(dialogRef, selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: BrowserService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1491,7 +1496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 /**
  * A dialog component that is designed to show more than one option buttons (usually more than two), to be used with dialog service
  */
-class DialogMultipleOptionComponent extends DialogOptionsBaseComponent {
+class DialogMultipleOptionComponent extends DialogBaseComponent {
     constructor(dialogRef, data) {
         super();
         this.dialogRef = dialogRef;
@@ -1501,11 +1506,11 @@ class DialogMultipleOptionComponent extends DialogOptionsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogMultipleOptionComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogMultipleOptionComponent, selector: "tg-dialog-multiple-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogMultipleOptionComponent, selector: "tg-dialog-multiple-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"closeDialog(dialogRef, i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogMultipleOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-multiple-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"] }]
+            args: [{ selector: 'tg-dialog-multiple-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"closeDialog(dialogRef, i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2016,5 +2021,5 @@ class DelayedMethodCallManager {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogDateSelectionComponent, DialogErrorComponent, DialogMultipleOptionComponent, DialogOptionsBaseComponent, DialogService, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalizationService, NotificationService, TurboGuiAngularModule, UserService, View, ViewModel, ViewService, ViewsContainerComponent, ViewsService };
+export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogMultipleOptionComponent, DialogService, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalizationService, NotificationService, TurboGuiAngularModule, UserService, View, ViewModel, ViewService, ViewsContainerComponent, ViewsService };
 //# sourceMappingURL=turbogui-angular.mjs.map