turbogui-angular
Version:
A library that tries to help with the most common user interface elements on several frameworks and platforms
1 lines • 232 kB
Source Map (JSON)
{"version":3,"file":"turbogui-angular.mjs","sources":["../../../projects/turbogui-angular/src/main/view/directives/ElementClickOutsideDirective.ts","../../../projects/turbogui-angular/src/main/view/directives/ElementCreatedDirective.ts","../../../projects/turbogui-angular/src/main/view/directives/ElementDestroyedDirective.ts","../../../projects/turbogui-angular/src/main/view/directives/AutoFocusOnDisplayDirective.ts","../../../projects/turbogui-angular/src/main/view/directives/AutoSelectTextOnFocusDirective.ts","../../../projects/turbogui-angular/src/main/model/modules/turbogui-angular.module.ts","../../../projects/turbogui-angular/src/main/model/classes/SingletoneStrictClass.ts","../../../projects/turbogui-angular/src/main/controller/notification.service.ts","../../../projects/turbogui-angular/src/main/controller/globalerror.service.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-base/dialog-base.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-error/dialog-error.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-error/dialog-error.component.html","../../../projects/turbogui-angular/src/main/view/animations/fade.animation.ts","../../../projects/turbogui-angular/src/main/view/components/busy-state-base/busy-state-base.component.ts","../../../projects/turbogui-angular/src/main/view/components/busy-state-base/busy-state-base.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-date-selection/dialog-date-selection.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-date-selection/dialog-date-selection.component.html","../../../projects/turbogui-angular/src/main/controller/dialog.service.ts","../../../projects/turbogui-angular/src/main/controller/http.service.ts","../../../projects/turbogui-angular/src/main/controller/httpservice/HTTPServiceGetRequest.ts","../../../projects/turbogui-angular/src/main/controller/httpservice/HTTPServicePostRequest.ts","../../../projects/turbogui-angular/src/main/controller/browser.service.ts","../../../projects/turbogui-angular/src/main/controller/turbo-api.service.ts","../../../projects/turbogui-angular/src/main/controller/router-base.service.ts","../../../projects/turbogui-angular/src/main/controller/locales-base.service.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-iframe/dialog-iframe.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-iframe/dialog-iframe.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-single-option/dialog-single-option.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-single-option/dialog-single-option.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-two-option/dialog-two-option.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-two-option/dialog-two-option.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-multiple-option/dialog-multiple-option.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-multiple-option/dialog-multiple-option.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-single-selection-list/dialog-single-selection-list.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-single-selection-list/dialog-single-selection-list.component.html","../../../projects/turbogui-angular/src/main/view/components/dialog-single-input/dialog-single-input.component.ts","../../../projects/turbogui-angular/src/main/view/components/dialog-single-input/dialog-single-input.component.html","../../../projects/turbogui-angular/src/main/view/components/button-base/button-base.component.ts","../../../projects/turbogui-angular/src/main/view/components/button-image/button-image.component.ts","../../../projects/turbogui-angular/src/main/view/components/button-image/button-image.component.html","../../../projects/turbogui-angular/src/main/view/components/button-container/button-container.component.ts","../../../projects/turbogui-angular/src/main/view/components/button-container/button-container.component.html","../../../projects/turbogui-angular/src/main/model/classes/GUINotification.ts","../../../projects/turbogui-angular/src/main/model/classes/View.ts","../../../projects/turbogui-angular/src/main/model/classes/ViewService.ts","../../../projects/turbogui-angular/src/main/managers/DelayedMethodCallManager.ts","../../../projects/turbogui-angular/src/main/view/forms/ValidatorsPlus.ts","../../../projects/turbogui-angular/src/public_api.ts","../../../projects/turbogui-angular/src/turbogui-angular.ts"],"sourcesContent":["/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';\r\n\r\n\r\n/** This directive is used to trigger an event when the user clicks outside of an element */\r\n@Directive({\r\n selector: '[elementClickOutside]',\r\n standalone: false\r\n})\r\n\r\n\r\n/**\r\n * This directive is used to execute an action when the user clicks outside of an element.\r\n * If we set the elementClickOutside tag to the html element and set the onClickOutside event to a function: <element elementClickOutside (onClickOutside)=\"onClickedOutside()\" ...,\r\n * this function will be executed when the user clicks outside of the element.\r\n */\r\nexport class ElementClickOutsideDirective {\r\n \r\n \r\n @Output() onClickOutside = new EventEmitter<void>();\r\n \r\n\r\n constructor(private readonly elementRef: ElementRef) {\r\n \r\n }\r\n \r\n\r\n @HostListener('document:click', ['$event.target']) onClick(targetElement: HTMLElement): void {\r\n \r\n const clickedInside = this.elementRef.nativeElement.contains(targetElement);\r\n \r\n if (!clickedInside) {\r\n \r\n this.onClickOutside.emit();\r\n }\r\n } \r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Directive, EventEmitter, Output, OnInit } from '@angular/core';\r\n\r\n\r\n/** This directive is used to listen for onInit events on raw html elements */\r\n@Directive({\n selector: '[elementCreated]',\n standalone: false\n})\r\n\r\n\r\n/**\r\n * This directive is used to listen for onInit events on raw html elements\r\n * If we place (elementCreated)=\"someMethod()\" on the element at the html template part, when the element\r\n * that uses this directive is visually created, someMethod() will be called.\r\n */\r\nexport class ElementCreatedDirective implements OnInit {\r\n\r\n\r\n /**\r\n * Event that will be dispatched once element is created\r\n */\r\n @Output('elementCreated')\r\n public elementCreated: EventEmitter<ElementCreatedDirective> = new EventEmitter();\r\n\r\n\r\n /**\r\n * Listen for the on init event\r\n */\r\n ngOnInit() {\r\n\r\n this.elementCreated.next(this);\r\n }\r\n\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Directive, OnDestroy, EventEmitter, Output } from '@angular/core';\r\n\r\n\r\n/** This directive is used to listen for onDestroy events on raw html elements */\r\n@Directive({\n selector: '[elementDestroyed]',\n standalone: false\n})\r\n\r\n\r\n/**\r\n * This directive is used to listen for onDestroy events on raw html elements\r\n * If we place (elementDestroyed)=\"someMethod()\" on the element at the html template part, when the element\r\n * that uses this directive is visually destroyed from the screen, someMethod() will be called.\r\n */\r\nexport class ElementDestroyedDirective implements OnDestroy {\r\n\r\n\r\n /**\r\n * Event that will be dispatched once element is destroyed\r\n */\r\n @Output('elementDestroyed')\r\n public elementDestroyed: EventEmitter<ElementDestroyedDirective> = new EventEmitter();\r\n\r\n\r\n /**\r\n * Listen for the on destroy event\r\n */\r\n ngOnDestroy() {\r\n\r\n this.elementDestroyed.next(this);\r\n }\r\n\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Directive, ElementRef, NgZone, Renderer2, AfterContentInit } from '@angular/core';\r\n\r\n\r\n/** This directive is used to perform an autofocus on an element every time it is displayed */\r\n@Directive({\n selector: '[autoFocusOnDisplay]',\n standalone: false\n})\r\n\r\n\r\n/**\r\n * This directive is used to perform an autofocus on an element every time it is displayed\r\n * If we set the autoFocusOnDisplay tag to the html element, it will be automatically focused after it is shown.\r\n */\r\nexport class AutoFocusOnDisplayDirective implements AfterContentInit {\r\n \r\n \r\n constructor(private el: ElementRef, private zone: NgZone, private renderer: Renderer2) {\r\n \r\n if (!el.nativeElement['focus']) {\r\n \r\n throw new Error('Element does not accept focus');\r\n }\r\n }\r\n \r\n ngAfterContentInit() {\r\n \r\n this.zone.runOutsideAngular(() => setTimeout(() => {\r\n \r\n this.renderer.selectRootElement(this.el.nativeElement).focus();\r\n \r\n }, 0));\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';\r\n\r\n\r\n/** This directive is used to perform an automatic select all text on an element every time it is focused */\r\n@Directive({\n selector: '[autoSelectTextOnFocus]',\n standalone: false\n})\r\n\r\n\r\n/**\r\n * This directive is used to perform an an automatic select all text on an element every time it is focused.\r\n * If we set the autoSelectTextOnFocus tag to the html element, its text will be automatically selected after it gets the focus.\r\n */\r\nexport class AutoSelectTextOnFocusDirective {\r\n \r\n \r\n constructor(private el: ElementRef, private renderer: Renderer2) {\r\n \r\n if (!el.nativeElement['select']) {\r\n \r\n throw new Error('Element does not accept select');\r\n }\r\n }\r\n \r\n \r\n @HostListener('focus', ['$event']) onFocus() {\r\n \r\n this.renderer.selectRootElement(this.el.nativeElement).select();\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { NgModule } from '@angular/core';\r\nimport { ElementClickOutsideDirective } from '../../view/directives/ElementClickOutsideDirective';\r\nimport { ElementCreatedDirective } from '../../view/directives/ElementCreatedDirective';\r\nimport { ElementDestroyedDirective } from '../../view/directives/ElementDestroyedDirective';\r\nimport { AutoFocusOnDisplayDirective } from '../../view/directives/AutoFocusOnDisplayDirective';\r\nimport { AutoSelectTextOnFocusDirective } from '../../view/directives/AutoSelectTextOnFocusDirective';\r\n\r\n\r\n/**\r\n * This file contains the root module that contains all the library declarations and exports.\r\n */\r\n@NgModule({\r\n\r\n imports: [\r\n ],\r\n\r\n declarations: [\r\n ElementClickOutsideDirective,\r\n ElementCreatedDirective,\r\n ElementDestroyedDirective,\r\n AutoFocusOnDisplayDirective,\r\n AutoSelectTextOnFocusDirective\r\n ],\r\n\r\n providers: [\r\n ],\r\n\r\n exports: [\r\n ElementClickOutsideDirective,\r\n ElementCreatedDirective,\r\n ElementDestroyedDirective,\r\n AutoFocusOnDisplayDirective,\r\n AutoSelectTextOnFocusDirective\r\n ]\r\n})\r\n\r\nexport class TurboGuiAngularModule { }\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\nimport { Type, inject } from \"@angular/core\";\n\r\n\r\n/**\r\n * Defines a base class that can be used to create singleton services which cannot be instantiated more than one time\r\n * during the whole application lifetime.\r\n * \r\n * To use it, simply extend this class and pass the parent class type to this constructor via super() \r\n */\r\nexport class SingletoneStrictClass {\r\n \r\n\tconstructor(classType: Type<any>) {\r\n\t\t\r\n\t const parent = inject(classType, { skipSelf: true, optional: true});\r\n\t \r\n\t if (parent) {\r\n\t\t\t\r\n\t throw Error(`[${classType.name}]: Can not create more than one instance`);\r\n\t }\r\n\t}\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Injectable } from '@angular/core';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { GUINotification } from '../model/classes/GUINotification';\r\nimport { SingletoneStrictClass } from '../model/classes/SingletoneStrictClass';\n\r\n\r\n/**\r\n * This is the main application event bus.\r\n * All global events that happen on the application are broadcasted by this service, and\r\n * can be listened by any application element who previously subscribed\r\n */\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class NotificationService extends SingletoneStrictClass {\r\n\r\n\r\n /**\r\n * The Observable instance that handles subscriptions and notifications\r\n */\r\n private readonly _notifications = new Subject<GUINotification>();\r\n\r\n\r\n\tconstructor(){\r\n\t\t\r\n\t\tsuper(NotificationService);\r\n\t}\r\n\t\r\n\r\n /**\r\n * used by other services or components to subscribe to all notifications that are generated by this service\r\n *\r\n * @param notificationHandler A method that will be used to receive each notification as a GUINotification instance\r\n *\r\n * @returns The new subscription object. Make sure to unsubscribe when not required anymore\r\n */\r\n subscribe(notificationHandler: (notification: GUINotification) => any) {\r\n\r\n return this._notifications.subscribe(notificationHandler);\r\n }\r\n\r\n\r\n /**\r\n * Launch a notification to anyone who may be listening\r\n *\r\n * @param notification A notification instance to launch\r\n */\r\n send(notification: GUINotification) {\r\n\r\n this._notifications.next(notification);\r\n }\r\n\r\n\r\n /**\r\n * End a previously initiated subscription\r\n *\r\n * @param subscription A previously created subscription instance from which we want to unsubscribe\r\n */\r\n unsubscribe(subscription: Subscription) {\r\n\r\n return subscription.unsubscribe();\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Injectable, ErrorHandler } from '@angular/core';\r\nimport { SingletoneStrictClass } from '../model/classes/SingletoneStrictClass';\r\n\r\n\r\n/**\r\n * Captures all the application exceptions and performs any required action.\r\n * It also contains multiple general error management features.\r\n *\r\n * To define this class as your application error handler, you must add the following to your\r\n * Application providers:\r\n * {\r\n * provide: ErrorHandler,\r\n * useClass: GlobalErrorService\r\n * },\r\n * GlobalErrorService\r\n *\r\n * You cannot access the error handler at runtime. If you need to modify any of the behaviours\r\n * or implement your custom ones, you must extend this class and set your new one as the error\r\n * handler provider.\r\n */\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class GlobalErrorService extends SingletoneStrictClass implements ErrorHandler {\r\n\r\n\r\n /**\r\n * Enables or disables the error notification to user via an alert box\r\n * Extend this class and override this value on your custom error handle to change it\r\n */\r\n private readonly showExceptionsToUser = true;\r\n\r\n\r\n /**\r\n * Enables or disables the error notification to user via an alert box\r\n * Extend this class and override this value on your custom error handle to change it\r\n */\r\n private readonly showExceptionsOnConsole = true;\r\n\r\n\r\n /**\r\n * Defines the text that will be used for the alert that is shown to the user when an exception happens\r\n * and showExceptionsToUser is true\r\n * Extend this class and override this value on your custom error handle to change it\r\n */\r\n private readonly errorAlertMessage = 'Application exception:\\n\\n';\r\n\r\n\r\n\tconstructor(){\r\n\t\t\r\n\t\tsuper(GlobalErrorService);\r\n\t}\r\n\r\n /**\r\n * Show an alert with the received error detail and also log it to the js console.\r\n *\r\n * Angular expects at least this method to be implemented on any class that is used as a global exception handler.\r\n *\r\n * @param error An error instance\r\n */\r\n handleError(error: any) {\r\n\r\n if (this.showExceptionsToUser) {\r\n\r\n alert(this.errorAlertMessage + (error as string));\r\n }\r\n\r\n if (this.showExceptionsOnConsole) {\r\n\r\n console.log(error);\r\n }\r\n\r\n throw error;\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\n\r\nimport { AfterViewInit, Component, ElementRef } from '@angular/core';\nimport { MatDialogRef } from '@angular/material/dialog';\r\n\r\n\r\n/**\r\n * This is the base class for all the dialog components that can be loaded by the dialog service class\r\n */\r\n@Component({\n template: '',\n standalone: false\n})\r\nexport abstract class DialogBaseComponent implements AfterViewInit {\r\n\r\n\r\n /*\r\n * The name of the superclass must be set into this constant as it is required by the dialog service to identify dialogs as different.\r\n * \r\n * When you extend the dialog base class, simply declare this static constant with the exact same name as your class and you're done.\r\n * If this value is not set on the extended dialog component, a runtime exception will happen when trying to show the dialog.\r\n * \r\n * The root cause of this requirement is that when apps are compiled for production, class names are minified and this causes problems \r\n * when creating a dialog hash to uniquely identify a dialog instance. Therefore, a hardcoded class name is necesary.\r\n */ \r\n static readonly DIALOG_CLASS_NAME:string = '';\r\n\r\n\r\n\tconstructor(public elementRef: ElementRef,\r\n\t\t\t\tpublic dialogRef: MatDialogRef<DialogBaseComponent>) {\r\n \r\n }\r\n\r\n\r\n ngAfterViewInit() {\r\n\t \r\n\t // Assign the component HTML identifier if it is specifically assigned to the dialogref instance\r\n\t if(this.dialogRef.id !== undefined && this.dialogRef.id !== ''){\r\n \r\n\t\t\tthis.elementRef.nativeElement.id = this.dialogRef.id;\r\n\t\t}\r\n\t}\r\n\r\n \r\n /**\r\n * Method to be called by the dialogs that extend this base component when they want to close themselves.\r\n * It will perform the close of that dialog and also send an object to the addDialog() callback with the index and value\r\n * that the user may have selected.\r\n *\r\n * @param index The numeric index of the user option selection. It will be specific for each dialog and it's different available options\r\n * @param value Any value that may be provided to the callback regarding the user selected option.\r\n *\r\n * @return void\r\n */\r\n closeDialog(index:number, value:any = null){\r\n \r\n this.dialogRef.close({index: index, value: value});\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Component, ElementRef, Inject } from '@angular/core';\r\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\r\nimport { DialogBaseComponent } from '../dialog-base/dialog-base.component';\r\nimport { MatButtonModule } from '@angular/material/button';\nimport { CommonModule } from '@angular/common';\n\r\n\r\n@Component({\n selector: 'tg-dialog-error',\n imports: [CommonModule, MatButtonModule],\n providers: [],\n templateUrl: './dialog-error.component.html',\n styleUrls: ['./dialog-error.component.scss']\n})\r\n\r\n\r\n/**\r\n * A dialog component with a single option button, to be used for error notifications\r\n */\r\nexport class DialogErrorComponent extends DialogBaseComponent {\r\n\r\n\r\n static readonly DIALOG_CLASS_NAME = 'DialogErrorComponent';\r\n \r\n\r\n constructor(public elementRef: ElementRef, public dialogRef: MatDialogRef<DialogBaseComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {\r\n\r\n super(elementRef, dialogRef);\r\n \r\n if (data.texts.length < 1) {\r\n\r\n throw new Error('DialogErrorComponent expects 2 texts: The title and optionally a description');\r\n }\r\n\r\n if (data.options.length !== 1) {\r\n\r\n throw new Error('DialogErrorComponent expects only one option');\r\n }\r\n \r\n if(data.texts.length > 1){\r\n\t\t\t\r\n\t\t\tdata.texts[1] = data.texts[1].replace(/\\n/g, \"<br/>\");\r\n\t\t}\r\n }\r\n}\r\n","<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<div class=\"textContainer\">\r\n <p *ngIf=\"data.texts.length > 1\" [innerHTML]=\"data.texts[1]\">\r\n </p>\r\n</div>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n (click)=\"closeDialog(0)\">\r\n \r\n {{data.options[0]}}\r\n \r\n</button>","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Injectable } from '@angular/core';\r\nimport { trigger, animate, transition, style } from '@angular/animations';\r\n\r\n\r\n/**\r\n * Fade animations\r\n */\r\n@Injectable()\r\nexport class FadeAnimationClass {\r\n\r\n /**\r\n * Get a custom trigger to create fade animations when components are added or removed from the application\r\n *\r\n * @param triggerName The name for the trigger we want to create\r\n * @param enter The time and easing that we want to use for the enter state\r\n * @param leave The time and easing that we want to use for the leave state\r\n */\r\n static getTrigger(triggerName: string, enter = '1s ease', leave = '300ms ease') {\r\n\r\n return trigger(triggerName, [\r\n transition('void => *', [style({opacity: 0}), animate(enter, style({ opacity: 1 }))]),\r\n transition('* => void', [animate(leave, style({opacity: 0}))])\r\n ]);\r\n }\r\n}\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Component, HostBinding } from '@angular/core';\r\nimport { FadeAnimationClass } from '../../animations/fade.animation';\r\n\r\n\r\n@Component({\n selector: 'tg-busy-state-base',\n imports: [],\n providers: [],\n templateUrl: './busy-state-base.component.html',\n animations: [FadeAnimationClass.getTrigger('busyStateBaseFade', '1s ease', '400ms ease')],\n styleUrls: ['./busy-state-base.component.scss']\n})\r\n\r\n\r\n/**\r\n * This component is used by turboGUI angular library to show the busy state to the user.\r\n * It is used to block all the user input and progressively shows a busy cursor to notify that the application\r\n * is waiting for something.\r\n *\r\n * We can (should) override this component with our own one to adapt its visual appearance to our application.\r\n * We can then set dialogService.busyStateComponentClass to our component class at the application start to to\r\n * override the default one.\r\n */\r\nexport class BusyStateBaseComponent {\r\n\r\n\r\n /**\r\n * This is used to attach the fade animation directly to this component so it fades in and out when created and removed from the app\r\n */\r\n @HostBinding('@busyStateBaseFade') busyStateBaseFade = true;\r\n}\r\n","<div class=\"darkBg\">\r\n\r\n</div>\r\n\r\n<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#fff\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(1 1)\" stroke-width=\"1\">\r\n <circle stroke-opacity=\".2\" cx=\"18\" cy=\"18\" r=\"18\"/>\r\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n from=\"0 18 18\"\r\n to=\"360 18 18\"\r\n dur=\"1s\"\r\n repeatCount=\"indefinite\"/>\r\n </path>\r\n </g>\r\n </g>\r\n</svg>\r\n","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { Component, ElementRef, Inject } from '@angular/core';\r\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\r\nimport { DialogBaseComponent } from '../dialog-base/dialog-base.component';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport { MatNativeDateModule } from '@angular/material/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n\r\n@Component({\r\n selector: 'tg-dialog-date-selection',\r\n imports: [CommonModule, MatDatepickerModule, MatNativeDateModule],\r\n providers: [],\r\n templateUrl: './dialog-date-selection.component.html',\r\n styleUrls: ['./dialog-date-selection.component.scss']\r\n})\r\n\r\n\r\n/**\r\n * A dialog component with a calendar that allows us to select a single date value\r\n */\r\nexport class DialogDateSelectionComponent extends DialogBaseComponent {\r\n\r\n\r\n static readonly DIALOG_CLASS_NAME = 'DialogDateSelectionComponent';\r\n \r\n \r\n selectedDate:Date;\r\n\r\n\r\n constructor(public elementRef: ElementRef, public dialogRef: MatDialogRef<DialogBaseComponent>,\r\n @Inject(MAT_DIALOG_DATA) public data: any) {\r\n \r\n super(elementRef, dialogRef);\r\n }\r\n}\r\n","<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>","/**\r\n * TurboGUI is A library that helps with the most common and generic UI elements and functionalities\r\n *\r\n * Website : -> http://www.turbogui.org\r\n * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.\r\n * License Url : -> http://www.apache.org/licenses/LICENSE-2.0\r\n * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com\r\n */\r\n\r\nimport { take } from 'rxjs/operators';\r\nimport { ArrayUtils, NumericUtils } from 'turbocommons-ts';\r\nimport { Type, Injectable, Injector, ApplicationRef, Renderer2, RendererFactory2, ViewContainerRef, EnvironmentInjector } from '@angular/core';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';\r\nimport { BusyStateBaseComponent } from '../view/components/busy-state-base/busy-state-base.component';\r\nimport { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';\r\nimport { DialogBaseComponent } from '../view/components/dialog-base/dialog-base.component';\r\nimport { DialogDateSelectionComponent } from '../view/components/dialog-date-selection/dialog-date-selection.component';\nimport { SingletoneStrictClass } from '../model/classes/SingletoneStrictClass';\n\r\n\r\n/**\r\n * Manages the application modal and non modal floating elements\r\n */\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class DialogService extends SingletoneStrictClass {\r\n\r\n\r\n /**\r\n * Used to modify the busy state component that is shown by default by the addModalBusyState() method.\r\n *\r\n * @see this.addModalBusyState()\r\n */\r\n customBusyStateComponentClass: Type<BusyStateBaseComponent> = BusyStateBaseComponent;\r\n\r\n\r\n /**\r\n * Check public getter for docs\r\n */\r\n private _isEnabled = true;\r\n\r\n\r\n /**\r\n * Tells if the main application is currently showing a busy state that blocks all user interaction\r\n */\r\n private _isShowingBusyState = false;\r\n\r\n\r\n /**\r\n * A reference to the modal busy state component that is initialized only the first time it is called.\r\n *\r\n * (To append the busy state dynamically, we use the Portal concept from the angular material library)\r\n */\r\n private _componentPortal: ComponentPortal<BusyStateBaseComponent> | null = null;\r\n\r\n\r\n /**\r\n * A reference to the modal busy state container where the component will be added\r\n */\r\n private _modalBusyStateHost: DomPortalOutlet | null = null;\r\n\r\n\r\n /**\r\n * Tells if the manager is currently showing a snackbar element or not\r\n */\r\n private _isShowingSnackBar = false;\r\n\r\n\r\n /**\r\n * Contains a list of the dialogs (MODAL AND NON MODAL) that are currently visible to the user.\r\n * Each item in this list is a hash that is computed when dialog is created to uniquely identify it.\r\n *\r\n * Empty list means no dialogs are currently visible\r\n */\r\n private _activeDialogs: string[] = [];\r\n\r\n\r\n /**\r\n * Contains a list with all the MatDialog instances that are currently visible to the user.\r\n * The list uses the same order as the list of _activeDialogs hash values\r\n */\r\n private _activeDialogInstances: MatDialogRef<DialogBaseComponent>[] = [];\r\n\r\n\r\n /**\r\n * Counts the number of dialogs that are currently open and that can be closed by the user by navigating with the browser\r\n */\r\n private _activeCloseableDialogs = 0;\r\n\r\n\r\n /**\r\n * Used to store the initialized Renderer 2 instance that is used by this class\r\n */\r\n private readonly _renderer: Renderer2;\r\n\r\n\r\n /**\r\n * Method that is used to delete the window beforeunload event listener once not used anymore\r\n */\r\n private _windowBeforeUnloadUnListen: (() => void) | null = null;\r\n\r\n\r\n /**\r\n * Method that is used to delete the document keydown event listener once not used anymore\r\n */\r\n private _documentKeydownUnlisten: (() => void) | null = null;\r\n\r\n\r\n /**\r\n * Method that is used to delete the document mousedown event listener once not used anymore\r\n */\r\n private _documentMousedownUnlisten: (() => void) | null = null;\r\n\r\n\r\n /**\r\n * Method that is used to delete the document pointerdown event listener once not used anymore\r\n */\r\n private _documentPointerdownUnlisten: (() => void) | null = null;\r\n\r\n\r\n constructor(rendererFactory: RendererFactory2,\r\n private readonly matSnackBar: MatSnackBar,\r\n private readonly matDialog: MatDialog,\r\n private readonly injector: Injector,\r\n private readonly applicationRef: ApplicationRef,\r\n private readonly environmentInjector: EnvironmentInjector) {\r\n\r\n\t\tsuper(DialogService);\r\n\r\n this._renderer = rendererFactory.createRenderer(null, null);\r\n }\r\n\r\n\r\n /**\r\n * Tells if this dialog service is enabled or not. If dialog service is disabled, none of it's features will work\r\n * This is used to block all dialog features normally when shutting down the application\r\n *\r\n * Use with caution. When this is set to false, dialog service stops working.\r\n */\r\n set isEnabled(v: boolean) {\r\n\r\n if (v === this._isEnabled) {\r\n\r\n return;\r\n }\r\n\r\n this._isEnabled = v;\r\n }\r\n\r\n\r\n /**\r\n * Enables a warning that will be shown to the user when he/she tries to close the application.\r\n * This warning will prompt the user to continue with the exit process or cancel it.\r\n * The specific texts of this message are a generic ones and cannot be changed.\r\n *\r\n * IMPORTANT: This method must be called after the main application has been initialized in order to work,\r\n * otherwise it will do nothing.\r\n */\r\n addCloseApplicationWarning() {\r\n\r\n this._windowBeforeUnloadUnListen ??= this._renderer.listen('window', 'beforeunload', (event) => event.returnValue = true);\r\n }\r\n\r\n\r\n /**\r\n * Remove the close application warning message if previously assigned\r\n */\r\n removeCloseApplicationWarning() {\r\n\r\n if (this._windowBeforeUnloadUnListen !== null) {\r\n\r\n this._windowBeforeUnloadUnListen();\r\n this._windowBeforeUnloadUnListen = null;\r\n }\r\n }\r\n\r\n\r\n /**\r\n * Change the application visual appearance so the user perceives that the application is\r\n * currently busy. While modal busy state is enabled, no user input is possible neither via\r\n * keyboard, mouse or touch. Use this state when performing server requests or operations that\r\n * must block the user interaction with the application. To allow user interaction again, you must\r\n * call removeModalBusyState()\r\n *\r\n * Notice: We can modify the busy state visual component that is shown by this method. To do it, we must\r\n * set this.customBusyStateComponentClass property with our own custom busy state component class. (We can do it at\r\n * our main application component constructor for example). Our custom component must extend the\r\n * BusyStateBaseComponent one to add its own visual appearance.\r\n *\r\n * @see this.customBusyStateComponentClass\r\n */\r\n addModalBusyState() {\r\n\r\n if (!this._isEnabled || this._isShowingBusyState) {\r\n\r\n return;\r\n }\r\n\r\n this._disableUserInteraction();\r\n\r\n // Dynamically create the busy state component reference if this is the first time\r\n if (this._componentPortal === null) {\r\n\r\n this._componentPortal = new ComponentPortal(this.customBusyStateComponentClass);\r\n\r\n // Create a PortalHost with document.body as its anchor element\r\n this._modalBusyStateHost = new DomPortalOutlet(\r\n document.body,\r\n this.environmentInjector,\r\n this.applicationRef,\r\n this.injector);\r\n }\r\n\r\n (this._modalBusyStateHost as DomPortalOutlet).attach(this._componentPortal);\r\n\r\n this._isShowingBusyState = true;\r\n }\r\n\r\n\r\n /**\r\n * Tells if the application is currently locked in a modal busy state (caused by an addModalBusyState() call)\r\n */\r\n get isShowingBusyState() {\r\n\r\n return this._isShowingBusyState;\r\n }\r\n\r\n\r\n /**\r\n * Cancel the application busy state and restore it back to normal so user interaction is allowed again\r\n */\r\n removeModalBusyState() {\r\n\r\n if (!this._isEnabled || !this._isShowingBusyState) {\r\n\r\n return;\r\n }\r\n\r\n if (this._componentPortal !== null) {\r\n\r\n (this._modalBusyStateHost as DomPortalOutlet).detach();\r\n }\r\n\r\n this._enableUserInteraction();\r\n\r\n this._isShowingBusyState = false;\r\n }\r\n \r\n \r\n /**\r\n * TODO - adapt from TS version\r\n */\r\n addToolTip() {\r\n\r\n // TODO - adapt from TS version\r\n }\r\n\r\n\r\n /**\r\n * Show a non modal snackbar notification to the user (Only one snack-bar can ever be opened at the same time).\r\n *\r\n * Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom or top of the screen.\r\n * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.\r\n *\r\n * @param config A MatSnackBarConfig instance with the customizations we want for this snackbar\r\n * @param message The message to show on the snackbar\r\n * @param action If not empty, the text to place on the snackbar confirmation button\r\n * @param actionCallback A method to execute once the user clicks into the action button.\r\n *\r\n * @return A promise that will be resolved once the snackbar is closed.\r\n */\r\n addSnackBar(config: MatSnackBarConfig, message: string, action = '') {\r\n\r\n if (!this._isEnabled) {\r\n \r\n return Promise.reject(new Error('Dialog service is disabled'));\r\n }\r\n\r\n if (this._isShowingSnackBar) {\r\n \r\n throw new Error('Trying to show a snackbar while another one is still visible');\r\n }\r\n\r\n this._isShowingSnackBar = true;\r\n\r\n return new Promise((resolve) => {\r\n \r\n const snackBarRef = this.matSnackBar.open(message, action === '' ? undefined : action, config);\r\n\r\n // Handle action button click\r\n snackBarRef.onAction().pipe(take(1)).subscribe(() => {\r\n this._isShowingSnackBar = false;\r\n resolve(true);\r\n });\r\n\r\n // Handle dismiss\r\n snackBarRef.afterDismissed().pipe(take(1)).subscribe(() => {\r\n this._isShowingSnackBar = false;\r\n resolve(false);\r\n });\r\n });\r\n }\r\n\r\n\r\n /**\r\n * Tells if the application is currently showing a snackbar or not\r\n */\r\n get isShowingSnackBar() {\r\n\r\n return this._isShowingSnackBar;\r\n }\r\n\r\n\r\n /**\r\n * Force the removal of the snack bar dialog if it exists.\r\n *\r\n * If no snackbar is currently visible, this method will do nothing\r\n */\r\n removeSnackBar() {\r\n\r\n if (!this._isEnabled || !this._isShowingSnackBar) {\r\n\r\n return;\r\n }\r\n\r\n this.matSnackBar.dismiss();\r\n\r\n this._isShowingSnackBar = false;\r\n }\r\n\r\n\r\n /**\r\n * 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\r\n * this library or extend DialogBaseComponent to create our own custom ones.\r\n *\r\n * @param dialogComponentClass A class for a component that extends DialogBaseComponent, which will be the dialog that is shown to the user.\r\n * @param properties An object containing the different visual and textual options that this dialog allows.\r\n * IMPORTANT: texts, options and data values need to be read at the dialog component by declaring \"@Inject(MAT_DIALOG_DATA) public data: any\"\r\n * at the dialog component constructor. This data object will contain the texts, options and data properties\r\n * \r\n * - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set\r\n * - width: 50% by default. Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically\r\n * reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels, \r\n * %, vh, vw, or any other. For example: '400px', '50%', etc.\r\n * - maxWidth: Defines the maximum width that the dialog will have. We can specify it in % or vw, just like is done in\r\n * css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices\r\n * - height: Unset by default. Specify the css value for the dialog height.\r\n * - maxHeight: Defines the maximum height that the dialog will have. We can specify it in % or vh, just like is done in\r\n * css. By default it is defined as 96vh, which will fit 96% of the viewport\r\n * - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed\r\n * by the user clicking outside it \r\n * - closeOnNavigation: Tells if the dialog should be closed when the user navigates with the browser. By default is true for non modal and false for modal dialogs. \r\n * - texts: A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should\r\n * be placed first, subtitle second and so (Each dialog may accept a different custom number of texts).\r\n * (add \"@Inject(MAT_DIALOG_DATA) public data: any\" to dialog constructor and read it with data.texts)\r\n * - options: A list of strings that will be used as button captions for each one of the accepted dialog options \r\n * (add \"@Inject(MAT_DIALOG_DATA) public data: any\" to dialog constructor and read it with data.options)\r\n * - data: An object to pass any extra data we want to the dialog.\r\n * (add \"@Inject(MAT_DIALOG_DATA) public data: any\" to dialog constructor and read it with data.data)\r\n * - viewContainerRef: This is important if we want to propagate providers from a parent component to this dialog. We must specify \r\n\t * this reference to make sure the same services injected on the parent are available too at the child dialog \r\n * \r\n * @return A promise that will be resolved once the dialog is closed.\r\n * The promise will receive a selection object with two properties which will correspond to the index and value from the options \r\n * array that's selected by the user. If no option selected, index will be -1 and value null\r\n */\r\n addDialog(dialogComponentClass: Type<DialogBaseComponent>,\r\n properties: {id?: string,\r\n width?: string,\r\n maxWidth?: string,\r\n height?: string,\r\n maxHeight?: string,\r\n modal?: boolean,\r\n closeOnNavigation?: boolean,\r\n texts?: string[],\r\n options?: string[],\r\n data?: any,\r\n viewContainerRef?: ViewContainerRef}): Promise<{index: number, value?: any}> {\r\n\r\n if (!this._isEnabled) {\r\n \r\n return Promise.reject(new Error('Dialog service is disabled'));\r\n }\r\n \r\n return new Promise((resolve) => {\r\n \r\n // Set the default values for non specified properties\r\n properties.modal = properties.modal ?? true;\r\n properties.closeOnNavigation = properties.closeOnNavigation ?? !properties.modal;\r\n properties.texts = properties.texts ?? [];\r\n properties.options = properties.options ?? [];\r\n properties.data = properties.data ?? {};\r\n\r\n // Generate a string to uniquely identify this dialog on the list of active dialogs\r\n // A dialog is considered as unique if the dialog id and texts are exactly the same. We do not take options into consideration\r\n // as there may be dialogs with a big amount of options available.\r\n let className = (dialogComponentClass as any).DIALOG_CLASS_NAME;\r\n \r\n if(className === '') {\r\n \r\n throw new Error(`The static property DIALOG_CLASS_NAME is not defined or is empty for this dialog component (${dialogComponentClass})`); \r\n }\r\n \r\n const dialogHash = className + properties.texts.join('');\r\n\r\n \t// identical dialogs won't be allowed at the same time\r\n if (this._activeDialogs.includes(dialogHash))