@arsedizioni/ars-utils 22.0.7 → 22.0.8

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, ChangeDetectionStrategy, Component, output, inject, Service, makeEnvironmentProviders, NgModule, input, computed, viewChildren, forwardRef, InjectionToken, TemplateRef, ViewContainerRef, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode } from '@angular/core';
-import { SafeHtmlPipe, SystemUtils, ArsCoreModule, PasswordValidatorDirective, EqualsValidatorDirective } from '@arsedizioni/ars-utils/core';
+import { Injectable, signal, ChangeDetectionStrategy, Component, output, inject, Service, makeEnvironmentProviders, NgModule, input, computed, viewChildren, forwardRef, DestroyRef, NgZone, afterNextRender, InjectionToken, TemplateRef, ViewContainerRef, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode } from '@angular/core';
+import { SafeHtmlPipe, SystemUtils, ArsCoreModule, PasswordValidatorDirective, EqualsValidatorDirective, EnvironmentService } from '@arsedizioni/ars-utils/core';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { PlatformLocation, isPlatformBrowser } from '@angular/common';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions, MatDialog } from '@angular/material/dialog';
 import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
-import { timer, map, distinctUntilChanged, shareReplay } from 'rxjs';
+import { timer, filter, map, distinctUntilChanged, shareReplay } from 'rxjs';
 import { tap, first } from 'rxjs/operators';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -29,8 +29,18 @@ import * as i2$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+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 { BreakpointObserver } from '@angular/cdk/layout';
-import { toSignal } from '@angular/core/rxjs-interop';
+
+var LoginOAuthType;
+(function (LoginOAuthType) {
+    LoginOAuthType[LoginOAuthType["None"] = 0] = "None";
+    LoginOAuthType[LoginOAuthType["Microsoft"] = 1] = "Microsoft";
+    LoginOAuthType[LoginOAuthType["Google"] = 2] = "Google";
+})(LoginOAuthType || (LoginOAuthType = {}));
 
 /** Italian localisation for the Material paginator labels. */
 class PaginatorIntl extends MatPaginatorIntl {
@@ -1208,6 +1218,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content>\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (userEmail.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    @if (dialogData().mode !== 'admin') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n        [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.oldPassword) {\r\n      <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n      }\r\n      @if (oldPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n        password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n        [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\" #newPwd2=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.password2) {\r\n      <password-strength [password]=\"item.password2\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd2.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
 
+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: i2$2.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.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.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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2.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 }] }] } });
+
 /**
  * @file breakpoints.ts
  * Bootstrap 5 breakpoint definitions as CDK-compatible MediaQuery strings.
@@ -3096,5 +3351,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, ArsUIModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, provideArsUI, resolve, resolveAll, resolveNonCanonical };
+export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, ArsUIModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LoginOAuthComponent, LoginOAuthOkMSComponent, LoginOAuthType, MSALGuardConfigFactory, MSALInstanceFactory, MSALInterceptorConfigFactory, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, provideArsUI, resolve, resolveAll, resolveNonCanonical };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map