ngx-oauth 7.0.1 → 8.0.1

package/README.md

@@ -1,215 +1,49 @@
-## Angular OAuth
+# ngx-oauth
 
-> `Ngx-oauth` is a fully **OAuth 2.1** compliant angular library. The library supports all the 4 flows:
-> * **resource**
-> * **implicit**
-> * **authorization code**
-> * **client credentials**
+OAuth 2.1 library for Angular 21. Zoneless, signal-based.
 
-> Supports OIDC
+## Projects
 
-> `PKCE` support for authorization code with code verification
+- `projects/ngx-oauth/` — the library
+- `projects/ngx-oauth-sample/` — demo app
 
-### How to
+## Commands
 
-Provide a `OAuthConfig` using `provideOAuthConfig` or `provideOAuthConfigFactory`
+| Command | Description |
+|---|---|
+| `npm run build:lib` | Build the library |
+| `npm run build:app` | Build the demo app |
+| `npm start` | Serve demo (`https://localhost:3000`, SSL enabled) |
+| `npm test` | Run library tests (Vitest) |
+| `npm run lint` | Lint both projects |
+| `npm run format` | Format code |
 
-Example:
-
-```typescript
-const oauthConfig = {
-  config: {
-    tokenPath: '/authorizationserver/oauth/token',
-    revokePath: '/authorizationserver/oauth/revoke', // optional
-    clientId: '<your_client_id>',
-    clientSecret: '<your_client_secret>'
-  },
-  storage: localStorage, // Optional, default value is localStorage
-  storageKey: 'token' // Optional, default value is 'token'
-};
+## Configure the demo
 
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    provideClientHydration(),
-    provideHttpClient(
-      withFetch(),
-      withInterceptors([OAuthInterceptor])
-    ),
-    provideOAuthConfig(keycloakOpenIDConfig),
-  ]
-};
-``` 
-
-Example for **authorization code** flow with `OIDC` and `PKCE`
-For public oauth clients `clientSecret` can be removed since is not used
+Edit `projects/ngx-oauth-sample/src/app/app.config.ts`:
 
 ```typescript
 const oauthConfig = {
   config: {
-    clientId: '<your_client_id>',
-    clientSecret: '<your_client_secret>', //not used for public clients
-    authorizePath: '/o/authorize/',
-    tokenPath: '/o/token/',
-    revokePath: '/o/revoke/',
-    scope: 'openid email profile',
-    pkce: true
-  },
-}
-```
+    // autodiscovery
+    issuerPath: 'https://your-idp.com/realms/realm',
+    clientId: 'your-client-id',
 
-***Keycloak*** example for **oidc** with autodiscovery
-
-```typescript
-const keycloakOpenIDConfig = {
-  config: {
-    issuerPath: 'http://localhost:8080/realms/<some-realm>',
-    clientId: '<your_client_id>',
-  }
-};
-```
+    // or manual endpoints
+    // authorizePath: '/authorize',
+    // tokenPath: '/token',
+    // clientId: 'your-client-id',
 
-***Azure*** example
-
-```typescript
-const azureOpenIDConfig = {
-  config: {
-    issuerPath: 'https://login.microsoftonline.com/common/v2.0', // for common make sure you app has "signInAudience": "AzureADandPersonalMicrosoftAccount",
-    clientId: '<your_client_id>',
-    scope: 'openid profile email offline_access',
-    pkce: true // manually, since is required, but code_challenge_methods_supported is not in openid configuration
-  }
-}
-```
-
-***Google*** example
-
-```typescript
-const googleOpenIDConfig = {
-  type: OAuthType.AUTHORIZATION_CODE,
-  config: {
-    issuerPath: 'https://accounts.google.com',
-    clientId: '<your_client_id>',
-    clientSecret: '<your_client_secret>',
-    scope: 'openid profile email'
-  }
-}
-```
-
-You can use the `oauth-login` component
-
-```html
-
-<div class="login-component">
-  <oauth-login></oauth-login>
-</div>  
-```
-
-or with params
-
-```typescript
-@Component({
-  selector: 'login-component',
-  template: `
-    <oauth-login [type]="type"
-                 [i18n]="i18n"
-                 [profileName$]="profileName$"
-                 [useLogoutUrl]="useLogoutUrl"
-                 [(state)]="state"></oauth-login>
-  `
-})
-export class LoginComponent {
-  i18n: OAuthLoginI18n = {
-    username: 'Username'
-  };
-  state = 'some_salt_hash_or_whatever';
-  // not only revoke tokens but also access the logout page if defined.
-  // logoutPath needs to be defined. logoutRedirectUri is optional. Current url will be used if undefined
-  useLogoutUrl = true;
-
-  constructor(private oauthService: OAuthService) {
-  }
-
-  get profileName$(): Observable<string> {
-    // ex: get profile name form oidc user_info endpoint or get it from some user service 
-    return this.oauthService.userInfo$.pipe(
-      map(v => `${v.name}&nbsp;${this.getPicture(v.picture)}`)
-    );
-  }
-
-  // show profile picture if user info provides thumbnail url
-  getPicture(picture?: string) {
-    return picture && `<img class="rounded-circle img-thumbnail" src="${picture}">` || ''
+    scope: 'openid profile email',
+    pkce: true
   }
 }
 ```
 
-(`state`, `redirectUri`, `responseType` are optional in case of some advanced configuration)
-
-or create your custom login template using OAuthService
-
-```html
-
-<div class="login-component">
-  <oauth-login>
-    <ng-template #login let-li="login" let-s="status" let-lo="logout">
-      <form (submit)="li({username: username, password: password})">
-        <ng-container *ngIf="s === OAuthStatus.AUTHORIZED; else loginTemplate">
-          <h2>profileName</h2>
-          <button (click)="lo()">Logout</button>
-        </ng-container>
-        <ng-template #loginTemplate>
-          <div class="card">
-            <div class="card-header text-center">
-              <h2 class="m-0 p-3">
-                <strong>Login</strong>
-              </h2>
-            </div>
-            <div class="card-body">
-              <div class="mb-3">
-                <input type="text" class="form-control" name="username" required [(ngModel)]="oauthService.username"
-                       placeholder="username">
-              </div>
-              <div class="mb-3">
-                <input type="password" class="form-control" name="password" required [(ngModel)]="oauthService.password"
-                       placeholder="password">
-              </div>
-            </div>
-            <div class="card-footer">
-              <div class="text-center">
-                <button type="submit" class="btn btn-primary">Submit</button>
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </form>
-    </ng-template>
-  </oauth-login>
-</div>
-
-```
-
-and import OAuthService in your login component constructor
-
-## Installing:
-
-```
-npm install ngx-oauth --save
-```
-
-## App Requirements
-
-* none
-
-## Running the demo
+## Library Usage
 
-* change proxy context in ```proxy.conf.js``` so that vite forwards your request to your oauth server (if relative paths in oauth configuration)
-* in app.component.ts add your **clientId, secret**, oauth server **token endpoint** and user **profile endpoint**
-* npm i
-* npm run build:lib
-* npm start
+See [ngx-oauth/README.md](projects/ngx-oauth/README.md) for the full library documentation.
 
-#### Licensing
+## License
 
-[MIT License](LICENSE)
+[MIT](LICENSE)

package/fesm2022/ngx-oauth-component.mjs

@@ -0,0 +1,272 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, input, viewChild, computed, signal, effect, ViewEncapsulation, Component } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i7 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { OAUTH, OAUTH_USER, OAuthStatus, OAuthType } from 'ngx-oauth';
+
+const defaultI18n = {
+    username: 'Username',
+    password: 'Password',
+    submit: 'Sign in',
+    logout: 'Sign out',
+    notAuthorized: 'Sign in',
+    authorized: 'Welcome',
+    denied: 'Access denied. Try again.',
+    dismiss: 'Dismiss',
+    showPassword: 'Show password',
+    hidePassword: 'Hide password'
+};
+class OAuthLoginComponent {
+    constructor() {
+        this.oauth = inject(OAUTH);
+        this.user = inject(OAUTH_USER);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.OAuthStatus = OAuthStatus;
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.i18n = input(defaultI18n, { ...(ngDevMode ? { debugName: "i18n" } : /* istanbul ignore next */ {}), transform: v => ({ ...defaultI18n, ...v }) });
+        this.trigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.status = this.oauth.status;
+        this.isAuthCode = computed(() => {
+            const { responseType } = this.config();
+            return responseType && responseType !== OAuthType.RESOURCE;
+        }, ...(ngDevMode ? [{ debugName: "isAuthCode" }] : /* istanbul ignore next */ []));
+        this.profile = computed(() => {
+            const info = this.user.value() ?? {};
+            const title = info.name || info.preferred_username || info.email || info.sub || '';
+            const subtitle = info.email ?? '';
+            const initials = `${info.given_name?.charAt(0) ?? ''}${info.family_name?.charAt(0) ?? ''}`.toUpperCase();
+            return { title, subtitle, picture: info.picture, initials };
+        }, ...(ngDevMode ? [{ debugName: "profile" }] : /* istanbul ignore next */ []));
+        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.showError = signal(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+        this.username = '';
+        this.password = '';
+        effect(() => {
+            if (this.status() === OAuthStatus.DENIED)
+                this.showError.set(true);
+        });
+        effect(() => {
+            const { username, password } = this.config();
+            if (username !== undefined)
+                this.username = username;
+            if (password !== undefined)
+                this.password = password;
+        });
+    }
+    logout() {
+        this.trigger()?.closeMenu();
+        return this.oauth.logout(this.config().logoutRedirectUri, this.config().state);
+    }
+    dismissError() {
+        this.showError.set(false);
+        return this.oauth.logout();
+    }
+    login(parameters) {
+        this.trigger()?.closeMenu();
+        return this.oauth.login(parameters);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: OAuthLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: OAuthLoginComponent, isStandalone: true, selector: "oauth-login", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isBrowser) {
+      @if (status(); as s) {
+        @if (s === OAuthStatus.NOT_AUTHORIZED && isAuthCode()) {
+          <button matIconButton type="button" [attr.aria-label]="i18n().notAuthorized" (click)="login(config())">
+            <mat-icon [fontSet]="'material-icons-outlined'">account_circle</mat-icon>
+          </button>
+        } @else {
+          <button
+            matIconButton
+            [matMenuTriggerFor]="menu"
+            [attr.aria-label]="s === OAuthStatus.AUTHORIZED ? i18n().authorized : i18n().notAuthorized">
+            <mat-icon [fontSet]="s === OAuthStatus.AUTHORIZED ? 'material-icons' : 'material-icons-outlined'">account_circle</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu" xPosition="after">
+            <div tabindex="-1" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" class="oauth-login-content">
+              @if (s === OAuthStatus.AUTHORIZED) {
+                <mat-list class="p-0!">
+                  <mat-list-item>
+                    @if (profile().picture) {
+                      <img matListItemAvatar [src]="profile().picture" alt="" />
+                    } @else {
+                      <div
+                        matListItemAvatar
+                        class="flex! items-center justify-center bg-blue-600 text-sm font-semibold uppercase text-white">
+                        {{ profile().initials || '?' }}
+                      </div>
+                    }
+                    <span matListItemTitle>{{ profile().title }}</span>
+                    @if (profile().subtitle) {
+                      <span matListItemLine>{{ profile().subtitle }}</span>
+                    }
+                    <div matListItemMeta>
+                      <button mat-icon-button type="button" [attr.aria-label]="i18n().logout" (click)="logout()">
+                        <mat-icon>close</mat-icon>
+                      </button>
+                    </div>
+                  </mat-list-item>
+                </mat-list>
+              } @else if (s === OAuthStatus.DENIED && showError()) {
+                <mat-list class="p-0!">
+                  <mat-list-item class="!bg-red-50 text-red-800">
+                    <mat-icon matListItemIcon class="!text-red-600">error_outline</mat-icon>
+                    <span matListItemLine class="flex-1 text-sm" [innerHTML]="i18n().denied"></span>
+                    <button mat-icon-button matListItemMeta type="button" (click)="dismissError()" [attr.aria-label]="i18n().dismiss">
+                      <mat-icon>close</mat-icon>
+                    </button>
+                  </mat-list-item>
+                </mat-list>
+              } @else {
+                <form
+                  #form="ngForm"
+                  (ngSubmit)="login({ username: username, password: password })"
+                  autocomplete="on"
+                  class="flex flex-col gap-3 m-3">
+                  <mat-form-field subscriptSizing="dynamic" class="block w-full">
+                    <mat-label>{{ i18n().username }}</mat-label>
+                    <mat-icon matPrefix>alternate_email</mat-icon>
+                    <input matInput name="username" autocomplete="username" required [(ngModel)]="username" />
+                  </mat-form-field>
+                  <mat-form-field subscriptSizing="dynamic" class="block w-full">
+                    <mat-label>{{ i18n().password }}</mat-label>
+                    <mat-icon matPrefix>password</mat-icon>
+                    <input
+                      matInput
+                      name="password"
+                      autocomplete="current-password"
+                      required
+                      [type]="visible() ? 'text' : 'password'"
+                      [(ngModel)]="password" />
+                    <button
+                      mat-icon-button
+                      matSuffix
+                      type="button"
+                      (click)="visible.set(!visible())"
+                      [attr.aria-label]="visible() ? i18n().hidePassword : i18n().showPassword">
+                      <mat-icon>{{ visible() ? 'visibility_off' : 'visibility' }}</mat-icon>
+                    </button>
+                  </mat-form-field>
+                  <div class="flex justify-end pt-1">
+                    <button mat-flat-button type="submit" [disabled]="form.invalid">{{ i18n().submit }}</button>
+                  </div>
+                </form>
+              }
+            </div>
+          </mat-menu>
+        }
+      }
+    }
+  `, isInline: true, styles: [".mat-mdc-menu-panel:has(.oauth-login-content){max-width:none;min-width:360px}.oauth-login-content .mat-mdc-list-item .mdc-list-item__end{align-self:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i6.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: OAuthLoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oauth-login', standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule], template: `
+    @if (isBrowser) {
+      @if (status(); as s) {
+        @if (s === OAuthStatus.NOT_AUTHORIZED && isAuthCode()) {
+          <button matIconButton type="button" [attr.aria-label]="i18n().notAuthorized" (click)="login(config())">
+            <mat-icon [fontSet]="'material-icons-outlined'">account_circle</mat-icon>
+          </button>
+        } @else {
+          <button
+            matIconButton
+            [matMenuTriggerFor]="menu"
+            [attr.aria-label]="s === OAuthStatus.AUTHORIZED ? i18n().authorized : i18n().notAuthorized">
+            <mat-icon [fontSet]="s === OAuthStatus.AUTHORIZED ? 'material-icons' : 'material-icons-outlined'">account_circle</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu" xPosition="after">
+            <div tabindex="-1" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" class="oauth-login-content">
+              @if (s === OAuthStatus.AUTHORIZED) {
+                <mat-list class="p-0!">
+                  <mat-list-item>
+                    @if (profile().picture) {
+                      <img matListItemAvatar [src]="profile().picture" alt="" />
+                    } @else {
+                      <div
+                        matListItemAvatar
+                        class="flex! items-center justify-center bg-blue-600 text-sm font-semibold uppercase text-white">
+                        {{ profile().initials || '?' }}
+                      </div>
+                    }
+                    <span matListItemTitle>{{ profile().title }}</span>
+                    @if (profile().subtitle) {
+                      <span matListItemLine>{{ profile().subtitle }}</span>
+                    }
+                    <div matListItemMeta>
+                      <button mat-icon-button type="button" [attr.aria-label]="i18n().logout" (click)="logout()">
+                        <mat-icon>close</mat-icon>
+                      </button>
+                    </div>
+                  </mat-list-item>
+                </mat-list>
+              } @else if (s === OAuthStatus.DENIED && showError()) {
+                <mat-list class="p-0!">
+                  <mat-list-item class="!bg-red-50 text-red-800">
+                    <mat-icon matListItemIcon class="!text-red-600">error_outline</mat-icon>
+                    <span matListItemLine class="flex-1 text-sm" [innerHTML]="i18n().denied"></span>
+                    <button mat-icon-button matListItemMeta type="button" (click)="dismissError()" [attr.aria-label]="i18n().dismiss">
+                      <mat-icon>close</mat-icon>
+                    </button>
+                  </mat-list-item>
+                </mat-list>
+              } @else {
+                <form
+                  #form="ngForm"
+                  (ngSubmit)="login({ username: username, password: password })"
+                  autocomplete="on"
+                  class="flex flex-col gap-3 m-3">
+                  <mat-form-field subscriptSizing="dynamic" class="block w-full">
+                    <mat-label>{{ i18n().username }}</mat-label>
+                    <mat-icon matPrefix>alternate_email</mat-icon>
+                    <input matInput name="username" autocomplete="username" required [(ngModel)]="username" />
+                  </mat-form-field>
+                  <mat-form-field subscriptSizing="dynamic" class="block w-full">
+                    <mat-label>{{ i18n().password }}</mat-label>
+                    <mat-icon matPrefix>password</mat-icon>
+                    <input
+                      matInput
+                      name="password"
+                      autocomplete="current-password"
+                      required
+                      [type]="visible() ? 'text' : 'password'"
+                      [(ngModel)]="password" />
+                    <button
+                      mat-icon-button
+                      matSuffix
+                      type="button"
+                      (click)="visible.set(!visible())"
+                      [attr.aria-label]="visible() ? i18n().hidePassword : i18n().showPassword">
+                      <mat-icon>{{ visible() ? 'visibility_off' : 'visibility' }}</mat-icon>
+                    </button>
+                  </mat-form-field>
+                  <div class="flex justify-end pt-1">
+                    <button mat-flat-button type="submit" [disabled]="form.invalid">{{ i18n().submit }}</button>
+                  </div>
+                </form>
+              }
+            </div>
+          </mat-menu>
+        }
+      }
+    }
+  `, encapsulation: ViewEncapsulation.None, styles: [".mat-mdc-menu-panel:has(.oauth-login-content){max-width:none;min-width:360px}.oauth-login-content .mat-mdc-list-item .mdc-list-item__end{align-self:center!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OAuthLoginComponent };
+//# sourceMappingURL=ngx-oauth-component.mjs.map

package/fesm2022/ngx-oauth-component.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-oauth-component.mjs","sources":["../../../projects/ngx-oauth/component/o-auth-login.component.ts","../../../projects/ngx-oauth/component/ngx-oauth-component.ts"],"sourcesContent":["import { Component, computed, effect, inject, input, PLATFORM_ID, signal, viewChild, ViewEncapsulation } from '@angular/core'\nimport { CommonModule, isPlatformBrowser } from '@angular/common'\nimport { FormsModule } from '@angular/forms'\nimport { MatButtonModule } from '@angular/material/button'\nimport { MatFormFieldModule } from '@angular/material/form-field'\nimport { MatIconModule } from '@angular/material/icon'\nimport { MatInputModule } from '@angular/material/input'\nimport { MatListModule } from '@angular/material/list'\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'\nimport { AuthorizationCodeParameters, OAUTH, OAUTH_USER, OAuthParameters, OAuthStatus, OAuthType, ResourceOwnerParameters } from 'ngx-oauth'\n\nexport type OAuthLoginConfig = Partial<ResourceOwnerParameters & AuthorizationCodeParameters & { logoutRedirectUri: string }>\n\nexport type OAuthLoginI18n = {\n  username?: string\n  password?: string\n  submit?: string\n  logout?: string\n  notAuthorized?: string\n  authorized?: string\n  denied?: string\n  dismiss?: string\n  showPassword?: string\n  hidePassword?: string\n}\n\nconst defaultI18n: Required<OAuthLoginI18n> = {\n  username: 'Username',\n  password: 'Password',\n  submit: 'Sign in',\n  logout: 'Sign out',\n  notAuthorized: 'Sign in',\n  authorized: 'Welcome',\n  denied: 'Access denied. Try again.',\n  dismiss: 'Dismiss',\n  showPassword: 'Show password',\n  hidePassword: 'Hide password'\n}\n\n@Component({\n  selector: 'oauth-login',\n  standalone: true,\n  imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule],\n  template: `\n    @if (isBrowser) {\n      @if (status(); as s) {\n        @if (s === OAuthStatus.NOT_AUTHORIZED && isAuthCode()) {\n          <button matIconButton type=\"button\" [attr.aria-label]=\"i18n().notAuthorized\" (click)=\"login(config())\">\n            <mat-icon [fontSet]=\"'material-icons-outlined'\">account_circle</mat-icon>\n          </button>\n        } @else {\n          <button\n            matIconButton\n            [matMenuTriggerFor]=\"menu\"\n            [attr.aria-label]=\"s === OAuthStatus.AUTHORIZED ? i18n().authorized : i18n().notAuthorized\">\n            <mat-icon [fontSet]=\"s === OAuthStatus.AUTHORIZED ? 'material-icons' : 'material-icons-outlined'\">account_circle</mat-icon>\n          </button>\n          <mat-menu #menu=\"matMenu\" xPosition=\"after\">\n            <div tabindex=\"-1\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\" class=\"oauth-login-content\">\n              @if (s === OAuthStatus.AUTHORIZED) {\n                <mat-list class=\"p-0!\">\n                  <mat-list-item>\n                    @if (profile().picture) {\n                      <img matListItemAvatar [src]=\"profile().picture\" alt=\"\" />\n                    } @else {\n                      <div\n                        matListItemAvatar\n                        class=\"flex! items-center justify-center bg-blue-600 text-sm font-semibold uppercase text-white\">\n                        {{ profile().initials || '?' }}\n                      </div>\n                    }\n                    <span matListItemTitle>{{ profile().title }}</span>\n                    @if (profile().subtitle) {\n                      <span matListItemLine>{{ profile().subtitle }}</span>\n                    }\n                    <div matListItemMeta>\n                      <button mat-icon-button type=\"button\" [attr.aria-label]=\"i18n().logout\" (click)=\"logout()\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-list-item>\n                </mat-list>\n              } @else if (s === OAuthStatus.DENIED && showError()) {\n                <mat-list class=\"p-0!\">\n                  <mat-list-item class=\"!bg-red-50 text-red-800\">\n                    <mat-icon matListItemIcon class=\"!text-red-600\">error_outline</mat-icon>\n                    <span matListItemLine class=\"flex-1 text-sm\" [innerHTML]=\"i18n().denied\"></span>\n                    <button mat-icon-button matListItemMeta type=\"button\" (click)=\"dismissError()\" [attr.aria-label]=\"i18n().dismiss\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </mat-list-item>\n                </mat-list>\n              } @else {\n                <form\n                  #form=\"ngForm\"\n                  (ngSubmit)=\"login({ username: username, password: password })\"\n                  autocomplete=\"on\"\n                  class=\"flex flex-col gap-3 m-3\">\n                  <mat-form-field subscriptSizing=\"dynamic\" class=\"block w-full\">\n                    <mat-label>{{ i18n().username }}</mat-label>\n                    <mat-icon matPrefix>alternate_email</mat-icon>\n                    <input matInput name=\"username\" autocomplete=\"username\" required [(ngModel)]=\"username\" />\n                  </mat-form-field>\n                  <mat-form-field subscriptSizing=\"dynamic\" class=\"block w-full\">\n                    <mat-label>{{ i18n().password }}</mat-label>\n                    <mat-icon matPrefix>password</mat-icon>\n                    <input\n                      matInput\n                      name=\"password\"\n                      autocomplete=\"current-password\"\n                      required\n                      [type]=\"visible() ? 'text' : 'password'\"\n                      [(ngModel)]=\"password\" />\n                    <button\n                      mat-icon-button\n                      matSuffix\n                      type=\"button\"\n                      (click)=\"visible.set(!visible())\"\n                      [attr.aria-label]=\"visible() ? i18n().hidePassword : i18n().showPassword\">\n                      <mat-icon>{{ visible() ? 'visibility_off' : 'visibility' }}</mat-icon>\n                    </button>\n                  </mat-form-field>\n                  <div class=\"flex justify-end pt-1\">\n                    <button mat-flat-button type=\"submit\" [disabled]=\"form.invalid\">{{ i18n().submit }}</button>\n                  </div>\n                </form>\n              }\n            </div>\n          </mat-menu>\n        }\n      }\n    }\n  `,\n  styles: `\n    .mat-mdc-menu-panel:has(.oauth-login-content) {\n      max-width: none;\n      min-width: 360px;\n    }\n    .oauth-login-content .mat-mdc-list-item .mdc-list-item__end {\n      align-self: center !important;\n    }\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class OAuthLoginComponent {\n  private oauth = inject(OAUTH)\n  private user = inject(OAUTH_USER)\n  protected readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID))\n  readonly OAuthStatus = OAuthStatus\n  readonly config = input<OAuthLoginConfig>({})\n  readonly i18n = input<Required<OAuthLoginI18n>, OAuthLoginI18n | undefined>(defaultI18n, {\n    transform: v => ({ ...defaultI18n, ...v })\n  })\n  readonly trigger = viewChild(MatMenuTrigger)\n  protected readonly status = this.oauth.status\n  protected readonly isAuthCode = computed(() => {\n    const { responseType } = this.config()\n    return responseType && responseType !== OAuthType.RESOURCE\n  })\n  protected readonly profile = computed(() => {\n    const info = this.user.value() ?? {}\n    const title = info.name || info.preferred_username || info.email || info.sub || ''\n    const subtitle = info.email ?? ''\n    const initials = `${info.given_name?.charAt(0) ?? ''}${info.family_name?.charAt(0) ?? ''}`.toUpperCase()\n    return { title, subtitle, picture: info.picture, initials }\n  })\n  protected readonly visible = signal(false)\n  protected readonly showError = signal(true)\n  username = ''\n  password = ''\n\n  constructor() {\n    effect(() => {\n      if (this.status() === OAuthStatus.DENIED) this.showError.set(true)\n    })\n    effect(() => {\n      const { username, password } = this.config()\n      if (username !== undefined) this.username = username\n      if (password !== undefined) this.password = password\n    })\n  }\n\n  logout() {\n    this.trigger()?.closeMenu()\n    return this.oauth.logout(this.config().logoutRedirectUri, this.config().state)\n  }\n\n  dismissError() {\n    this.showError.set(false)\n    return this.oauth.logout()\n  }\n\n  login(parameters: OAuthLoginConfig) {\n    this.trigger()?.closeMenu()\n    return this.oauth.login(parameters as OAuthParameters)\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,MAAM,WAAW,GAA6B;AAC5C,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,MAAM,EAAE,2BAA2B;AACnC,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,YAAY,EAAE;CACf;MA2GY,mBAAmB,CAAA;AA2B9B,IAAA,WAAA,GAAA;AA1BQ,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AACrB,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;QACd,IAAA,CAAA,SAAS,GAAG,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAA,CAAA,WAAW,GAAG,WAAW;AACzB,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAmB,EAAE,6EAAC;QACpC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAuD,WAAW,4EACrF,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC,EAAA,CAC1C;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,CAAC,cAAc,8EAAC;AACzB,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;AAC1B,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;YAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACtC,YAAA,OAAO,YAAY,IAAI,YAAY,KAAK,SAAS,CAAC,QAAQ;AAC5D,QAAA,CAAC,iFAAC;AACiB,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;YACzC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;AACpC,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE;AAClF,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE;AACjC,YAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA,EAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC,WAAW,EAAE;AACxG,YAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;AAC7D,QAAA,CAAC,8EAAC;AACiB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,KAAK,8EAAC;AACvB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,IAAI,gFAAC;QAC3C,IAAA,CAAA,QAAQ,GAAG,EAAE;QACb,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGX,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,WAAW,CAAC,MAAM;AAAE,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACpE,QAAA,CAAC,CAAC;QACF,MAAM,CAAC,MAAK;YACV,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;YAC5C,IAAI,QAAQ,KAAK,SAAS;AAAE,gBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;YACpD,IAAI,QAAQ,KAAK,SAAS;AAAE,gBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;AACtD,QAAA,CAAC,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC;IAChF;IAEA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;IAC5B;AAEA,IAAA,KAAK,CAAC,UAA4B,EAAA;AAChC,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAA6B,CAAC;IACxD;+GAnDW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EASD,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9GjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EA1FS,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,yEAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,6qBAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,4BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAsG1H,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzG/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,CAAC,EAAA,QAAA,EAC5H;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFT,EAAA,aAAA,EAUc,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,yKAAA,CAAA,EAAA;uSAWR,cAAc,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACzJ7C;;AAEG;;;;"}