@arsedizioni/ars-utils 22.0.3 → 22.0.5

package/fesm2022/arsedizioni-ars-utils-ui.application.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, computed, Service, NgModule, effect, Input, Optional, Self, booleanAttribute, model } from '@angular/core';
+import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, computed, Service, makeEnvironmentProviders, NgModule, effect, Input, Optional, Self, booleanAttribute, model, NgZone } from '@angular/core';
 import * as i14 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
 import { DialogService, OtpInputComponent, PaginatorIntl, UIService } from '@arsedizioni/ars-utils/ui';
@@ -21,13 +21,13 @@ import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4$1 from '@arsedizioni/ars-utils/core';
-import { EmailsValidatorDirective, SafeHtmlPipe, SystemUtils, ArsCoreModule, DateInterval, DateIntervalChangeDirective, TimeValidatorDirective, SearchFilterPipe, FileInfo, FileSizeValidatorDirective, SafeUrlPipe } from '@arsedizioni/ars-utils/core';
+import { EmailsValidatorDirective, SafeHtmlPipe, SystemUtils, ArsCoreModule, DateInterval, DateIntervalChangeDirective, TimeValidatorDirective, SearchFilterPipe, FileInfo, FileSizeValidatorDirective, SafeUrlPipe, EnvironmentService } from '@arsedizioni/ars-utils/core';
 import * as i1$1 from '@ngbracket/ngx-layout/flex';
 import { FlexModule } from '@ngbracket/ngx-layout/flex';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i9 from '@angular/material/tree';
 import { MatTree, MatTreeModule } from '@angular/material/tree';
-import { BehaviorSubject, Subject, auditTime, animationFrameScheduler } from 'rxjs';
+import { BehaviorSubject, Subject, auditTime, animationFrameScheduler, filter } from 'rxjs';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import * as i2 from '@ngbracket/ngx-layout/extended';
 import { MatOptionModule } from '@angular/material/core';
@@ -49,6 +49,11 @@ import { MatChipsModule } from '@angular/material/chips';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i4$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MsalBroadcastService, MsalService, MSAL_INSTANCE, MSAL_GUARD_CONFIG, MSAL_INTERCEPTOR_CONFIG } from '@azure/msal-angular';
+import { PublicClientApplication, BrowserCacheLocation, InteractionType, EventType } from '@azure/msal-browser';
+import { broadcastResponseToMainFrame } from '@azure/msal-browser/redirect-bridge';
+import * as i2$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 class ResizeTableColumnDirective {
     constructor() {
@@ -155,6 +160,12 @@ var PromptDialogType;
     PromptDialogType[PromptDialogType["List"] = 5] = "List";
     PromptDialogType[PromptDialogType["Time"] = 6] = "Time";
 })(PromptDialogType || (PromptDialogType = {}));
+var LoginOAuthType;
+(function (LoginOAuthType) {
+    LoginOAuthType[LoginOAuthType["None"] = 0] = "None";
+    LoginOAuthType[LoginOAuthType["Microsoft"] = 1] = "Microsoft";
+    LoginOAuthType[LoginOAuthType["Google"] = 2] = "Google";
+})(LoginOAuthType || (LoginOAuthType = {}));
 
 /** Constants identifying each filter group slot and text filter channels. */
 const Filters = {
@@ -1717,11 +1728,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             type: Service
         }] });
 
+/**
+ * Standalone providers for the ars-utils "application" UI layer.
+ *
+ * Single source of truth for the environment-level configuration of this entry point.
+ * Use it in a standalone bootstrap instead of importing {@link ArsUIApplicationModule}:
+ *
+ * @example
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideArsUIApplication()]
+ * });
+ */
+function provideArsUIApplication() {
+    return makeEnvironmentProviders([
+        { provide: MatPaginatorIntl, useClass: PaginatorIntl },
+    ]);
+}
+/**
+ * @deprecated Prefer the standalone {@link provideArsUIApplication} provider together with
+ * direct imports of the standalone components/directives. This module is kept as a thin,
+ * backward-compatible shim so existing NgModule-based applications keep working unchanged.
+ */
 class ArsUIApplicationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ArsUIApplicationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: ArsUIApplicationModule, imports: [ResizeTableColumnDirective], exports: [ResizeTableColumnDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ArsUIApplicationModule, providers: [
-            { provide: MatPaginatorIntl, useClass: PaginatorIntl }
+            provideArsUIApplication(),
         ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ArsUIApplicationModule, decorators: [{
@@ -1734,7 +1766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         ResizeTableColumnDirective,
                     ],
                     providers: [
-                        { provide: MatPaginatorIntl, useClass: PaginatorIntl }
+                        provideArsUIApplication(),
                     ]
                 }]
         }] });
@@ -3335,6 +3367,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule, FormsModule, FlexLayoutModule, SafeHtmlPipe], template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\r\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\r\n        <ng-template mat-tab-label>\r\n            Seleziona\r\n            <mat-icon\r\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\r\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\r\n                matTooltipPosition=\"above\">\r\n                info\r\n            </mat-icon>\r\n        </ng-template>\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n                    <div fxFlex fxHide.xs>\r\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\r\n                            subscriptSizing=\"dynamic\">\r\n                            <mat-label>Cerca...</mat-label>\r\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [ngModel]=\"filterText()\"\r\n                                (ngModelChange)=\"filterText.set($event)\"\r\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                    <!-- Expandable node with children -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button matTreeNodeToggle>\r\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n                        </button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n        style=\"height: 100%;\">\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n                    @if (!hasSelection()) {\r\n                    <mat-icon>info</mat-icon>\r\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n                    } @else {\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon> Azzera tutto\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n                <mat-chip-set>\r\n                    @for (id of selection(); track id) {\r\n                    @let node = nodeById(id);\r\n                    @if (node && isChipVisible(id)) {\r\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n                        {{node.name}}\r\n                        @if (!disabled()) {\r\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n                        }\r\n                    </mat-chip>\r\n                    }\r\n                    }\r\n                </mat-chip-set>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptionEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionEmpty", required: false }] }], maxDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepth", required: false }] }], maxDepthOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepthOverrides", required: false }] }], minDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDepth", required: false }] }], selectionCount: [{ type: i0.Output, args: ["selectionCount"] }], changed: [{ type: i0.Output, args: ["changed"] }], _treeRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
 
+function MSALInstanceFactory(environment) {
+    return new PublicClientApplication({
+        auth: {
+            clientId: "6b2c080f-6ab0-4511-a9df-0bce69db5833",
+            authority: "https://login.microsoftonline.com/common",
+            redirectUri: environment.appLoginRedirectUri,
+        },
+        cache: {
+            cacheLocation: BrowserCacheLocation.LocalStorage
+        }
+    });
+}
+function MSALInterceptorConfigFactory(environment) {
+    return {
+        interactionType: InteractionType.Popup,
+        protectedResourceMap: new Map([
+            [environment.appServiceLoginUri, ["api://6b2c080f-6ab0-4511-a9df-0bce69db5833/AngularSPAAuthScope"]],
+            ["https://graph.microsoft.com/v2.0/me", ["user.read"]],
+        ])
+    };
+}
+function MSALGuardConfigFactory() {
+    return {
+        interactionType: InteractionType.Popup,
+        authRequest: {
+            scopes: ["user.read"]
+        }
+    };
+}
+class LoginOAuthComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.msalBroadcastService = inject(MsalBroadcastService);
+        this.msaLService = inject(MsalService);
+        this.dialogService = inject(DialogService);
+        this.ngZone = inject(NgZone);
+        /** Emitted when OAuth authentication succeeds. */
+        this.success = output();
+        /** Whether to show the introductory info panel. */
+        this.showInfo = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
+        /** Application name displayed in the info panel. */
+        this.applicationName = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "applicationName" }] : /* istanbul ignore next */ []));
+        /** Whether to trigger `initialize()` automatically on mount. */
+        this.autoInitialize = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoInitialize" }] : /* istanbul ignore next */ []));
+        /** Whether the Microsoft login button is shown. */
+        this.allowMicrosoft = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowMicrosoft" }] : /* istanbul ignore next */ []));
+        /** Whether the Google login button is shown. */
+        this.allowGoogle = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowGoogle" }] : /* istanbul ignore next */ []));
+        this.oauthReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "oauthReady" }] : /* istanbul ignore next */ []));
+        this.oauthMicrosoftReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "oauthMicrosoftReady" }] : /* istanbul ignore next */ []));
+        this.oauthGoogleReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "oauthGoogleReady" }] : /* istanbul ignore next */ []));
+        this.msalBroadcastService.msalSubject$
+            .pipe(filter((msg) => msg.eventType === EventType.LOGOUT_FAILURE ||
+            msg.eventType === EventType.ACQUIRE_TOKEN_FAILURE), takeUntilDestroyed(this.destroyRef))
+            .subscribe((r) => {
+            if (r?.payload) {
+                const error = r.payload;
+                this.dialogService.error(error?.message ?? 'Errore di autenticazione Microsoft');
+            }
+        });
+        afterNextRender(() => {
+            if (this.autoInitialize()) {
+                this.initialize();
+            }
+        });
+    }
+    /**
+     * Initialize OAuth providers (Microsoft MSAL and Google GSI).
+     * Safe to call multiple times — already-initialized providers are skipped.
+     * Must be public so the host component can trigger it manually when `autoInitialize` is false.
+     */
+    initialize() {
+        if (this.oauthMicrosoftReady() && this.oauthGoogleReady()) {
+            return; // Both already loaded
+        }
+        this.oauthReady.set(true);
+        // Load MS stack only if not already initialized
+        if (!this.oauthMicrosoftReady()) {
+            this.msaLService.initialize()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.oauthMicrosoftReady.set(true);
+            });
+        }
+        // Load Google script only if not already initialized
+        if (!this.oauthGoogleReady()) {
+            const DSLScript = document.createElement('script');
+            DSLScript.src = 'https://accounts.google.com/gsi/client';
+            DSLScript.type = 'text/javascript';
+            document.body.appendChild(DSLScript);
+            document.body.removeChild(DSLScript);
+            // @ts-ignore
+            window.onGoogleLibraryLoad = () => {
+                // initialize google account
+                // @ts-ignore
+                google.accounts.id.initialize({
+                    client_id: '71204983077-ag31h3bgt2udcbfr9nn84r9rni2k3snp.apps.googleusercontent.com',
+                    cancel_on_tap_outside: true,
+                    auto_select: false,
+                    callback: (r) => {
+                        this.ngZone.run(() => {
+                            this.success.emit({ type: LoginOAuthType.Google, token: r.credential });
+                        });
+                    }
+                });
+                googleButtonWrapper = createFakeGoogleWrapper();
+                this.oauthGoogleReady.set(true);
+            };
+        }
+    }
+    /**
+     * Trigger a Microsoft (MSAL) login popup and acquire an access token on success.
+     */
+    loginMSAL() {
+        // Clear any in-progress interaction flag that may have been left by a previous incomplete popup
+        sessionStorage.removeItem('msal.interaction.status');
+        this.msaLService.loginPopup()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (r) => {
+                try {
+                    this.msaLService.instance.setActiveAccount(r.account);
+                    this.msaLService.acquireTokenSilent({
+                        scopes: [
+                            "api://6b2c080f-6ab0-4511-a9df-0bce69db5833/AngularSPAAuthScope"
+                        ],
+                        account: r.account
+                    }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                        next: (tokenResult) => {
+                            console.log("Token acquired!");
+                            this.success.emit({ type: LoginOAuthType.Microsoft, token: tokenResult.accessToken });
+                        },
+                        error: (error) => {
+                            this.dialogService.error(error.message);
+                        }
+                    });
+                }
+                catch (error) {
+                    this.dialogService.error(error.message);
+                }
+            },
+            error: (error) => {
+                this.dialogService.error(error.message);
+            }
+        });
+    }
+    /**
+     * Trigger the hidden Google GSI button to open the Google sign-in flow.
+     */
+    loginGoogle() {
+        // Use wrapper click to prevent Illegal invocation exception
+        googleButtonWrapper.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LoginOAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: LoginOAuthComponent, isStandalone: true, selector: "login-oauth", inputs: { showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: false, transformFunction: null }, autoInitialize: { classPropertyName: "autoInitialize", publicName: "autoInitialize", isSignal: true, isRequired: false, transformFunction: null }, allowMicrosoft: { classPropertyName: "allowMicrosoft", publicName: "allowMicrosoft", isSignal: true, isRequired: false, transformFunction: null }, allowGoogle: { classPropertyName: "allowGoogle", publicName: "allowGoogle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { success: "success" }, providers: [
+            {
+                provide: MSAL_INSTANCE,
+                deps: [EnvironmentService],
+                useFactory: MSALInstanceFactory
+            },
+            {
+                provide: MSAL_GUARD_CONFIG,
+                useFactory: MSALGuardConfigFactory
+            },
+            {
+                provide: MSAL_INTERCEPTOR_CONFIG,
+                deps: [EnvironmentService],
+                useFactory: MSALInterceptorConfigFactory
+            },
+            MsalService,
+            MsalBroadcastService
+        ], ngImport: i0, template: "<div class=\"login-oauth\">\r\n  @if(showInfo()) {\r\n  <div class=\"message\">\r\n    <p>Questa sezione consente di accedere al servizio utilizzando un provider OAuth2.</p>\r\n    @if(applicationName()) {\r\n    <p>La email utilizzata deve essere collegata ad un utente valido di {{applicationName()}} e dei servizi ad esso\r\n      connessi.</p>\r\n    }\r\n  </div>\r\n  }\r\n  @if (allowMicrosoft()) {\r\n  <div class=\"button\">\r\n    <button mat-flat-button  (click)=\"loginMSAL()\" aria-label=\"Effettua accesso\"\r\n      [disabled]=\"!oauthMicrosoftReady()\" style=\"width: 100%;\">\r\n      Accedi con Microsoft</button>\r\n  </div>\r\n  }\r\n  @if (allowGoogle()) {\r\n  <div class=\"button\">\r\n    <button mat-flat-button  (click)=\"loginGoogle()\" style=\"width: 100%;\"\r\n      aria-label=\"Effettua accesso\" [disabled]=\"!oauthGoogleReady()\">\r\n      Accedi con Google</button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".login-oauth{text-align:center}.login-oauth .button{padding:10px 0;width:100%}.login-oauth .message{padding:0 0 10px!important;font-size:small}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LoginOAuthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'login-oauth', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MSAL_INSTANCE,
+                            deps: [EnvironmentService],
+                            useFactory: MSALInstanceFactory
+                        },
+                        {
+                            provide: MSAL_GUARD_CONFIG,
+                            useFactory: MSALGuardConfigFactory
+                        },
+                        {
+                            provide: MSAL_INTERCEPTOR_CONFIG,
+                            deps: [EnvironmentService],
+                            useFactory: MSALInterceptorConfigFactory
+                        },
+                        MsalService,
+                        MsalBroadcastService
+                    ], imports: [
+                        MatButtonModule
+                    ], template: "<div class=\"login-oauth\">\r\n  @if(showInfo()) {\r\n  <div class=\"message\">\r\n    <p>Questa sezione consente di accedere al servizio utilizzando un provider OAuth2.</p>\r\n    @if(applicationName()) {\r\n    <p>La email utilizzata deve essere collegata ad un utente valido di {{applicationName()}} e dei servizi ad esso\r\n      connessi.</p>\r\n    }\r\n  </div>\r\n  }\r\n  @if (allowMicrosoft()) {\r\n  <div class=\"button\">\r\n    <button mat-flat-button  (click)=\"loginMSAL()\" aria-label=\"Effettua accesso\"\r\n      [disabled]=\"!oauthMicrosoftReady()\" style=\"width: 100%;\">\r\n      Accedi con Microsoft</button>\r\n  </div>\r\n  }\r\n  @if (allowGoogle()) {\r\n  <div class=\"button\">\r\n    <button mat-flat-button  (click)=\"loginGoogle()\" style=\"width: 100%;\"\r\n      aria-label=\"Effettua accesso\" [disabled]=\"!oauthGoogleReady()\">\r\n      Accedi con Google</button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".login-oauth{text-align:center}.login-oauth .button{padding:10px 0;width:100%}.login-oauth .message{padding:0 0 10px!important;font-size:small}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { success: [{ type: i0.Output, args: ["success"] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], applicationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationName", required: false }] }], autoInitialize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoInitialize", required: false }] }], allowMicrosoft: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMicrosoft", required: false }] }], allowGoogle: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGoogle", required: false }] }] } });
+const createFakeGoogleWrapper = () => {
+    const googleLoginWrapper = document.createElement("div");
+    // Or you can simple hide it in CSS rule for custom-google-button
+    googleLoginWrapper.style.display = "none";
+    googleLoginWrapper.classList.add("custom-google-button");
+    // Add the wrapper to body
+    document.body.appendChild(googleLoginWrapper);
+    // Use GSI javascript api to render the button inside our wrapper
+    // You can ignore the properties because this button will not appear
+    // @ts-ignore
+    window.google.accounts.id.renderButton(googleLoginWrapper, {
+        type: "icon",
+        width: "200",
+    });
+    const googleLoginWrapperButton = googleLoginWrapper.querySelector("div[role=button]");
+    return {
+        click: () => {
+            // @ts-ignore
+            googleLoginWrapperButton.click();
+        },
+    };
+};
+var googleButtonWrapper;
+
+class LoginOAuthOkMSComponent {
+    constructor() {
+        /** Message displayed while the popup is completing authentication. */
+        this.message = input('Accesso in corso...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        // MSAL v5 popup flow: parse the auth response from the URL and send
+        // it back to the opener window via BroadcastChannel, then close the popup.
+        broadcastResponseToMainFrame();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LoginOAuthOkMSComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: LoginOAuthOkMSComponent, isStandalone: true, selector: "app-login-oauth-ok-ms", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div class=\"login-auto fade-in\">\r\n    <div class=\"message\">\r\n      Autenticazione in corso...\r\n    </div>\r\n    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\r\n  </div>\r\n</div>\r\n", styles: [".login-auto{padding:20px 0}.login-auto .message{font-size:large;font-weight:700;color:var(--ars-color-primary);max-width:300px;text-align:center;width:100%;padding:40px 0}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LoginOAuthOkMSComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-login-oauth-ok-ms', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexModule, MatProgressBarModule], template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div class=\"login-auto fade-in\">\r\n    <div class=\"message\">\r\n      Autenticazione in corso...\r\n    </div>\r\n    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\r\n  </div>\r\n</div>\r\n", styles: [".login-auto{padding:20px 0}.login-auto .message{font-size:large;font-weight:700;color:var(--ars-color-primary);max-width:300px;text-align:center;width:100%;padding:40px 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
+
 /*
  * Public API Surface of ars-utils
  */
@@ -3343,5 +3620,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationDialogService, ArsUIApplicationModule, ButtonSelectorComponent, ButtonToggleComponent, CalendarEmptyHeader, ChipsSelectorComponent, CurrentFilter, CurrentFilterChanged, CurrentFilterItem, FileInputComponent, FilePreviewComponent, FilterBarComponent, Filters, ItemNode, PromptDateDialogComponent, PromptDialogComponent, PromptDialogType, PromptOtpDialogComponent, PromptTimeDialogComponent, ResizeTableColumnDirective, SelectDialogComponent, SelectFileDialogComponent, SelectPictureDialogComponent, SelectTreeDialogComponent, SelectableItem, SelectableNode, SendToDialogComponent, TreeDataSource, TreePickerComponent };
+export { ApplicationDialogService, ArsUIApplicationModule, ButtonSelectorComponent, ButtonToggleComponent, CalendarEmptyHeader, ChipsSelectorComponent, CurrentFilter, CurrentFilterChanged, CurrentFilterItem, FileInputComponent, FilePreviewComponent, FilterBarComponent, Filters, ItemNode, LoginOAuthComponent, LoginOAuthOkMSComponent, LoginOAuthType, MSALGuardConfigFactory, MSALInstanceFactory, MSALInterceptorConfigFactory, PromptDateDialogComponent, PromptDialogComponent, PromptDialogType, PromptOtpDialogComponent, PromptTimeDialogComponent, ResizeTableColumnDirective, SelectDialogComponent, SelectFileDialogComponent, SelectPictureDialogComponent, SelectTreeDialogComponent, SelectableItem, SelectableNode, SendToDialogComponent, TreeDataSource, TreePickerComponent, provideArsUIApplication };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.application.mjs.map