@nauticana/sail 0.5.0

package/src/component/login/chpass_component.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BaseAuthService } from '../../service/auth.service';
+import { Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+@Component({
+  selector: 'app-chpass',
+  templateUrl: './chpass_component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    RouterLink,
+  ],
+})
+export class ChpassComponent {
+  private auth = inject(BaseAuthService);
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  forgotPassword = signal(false);
+  errorMessage = signal('');
+  successMessage = signal('');
+
+  chpassForm = this.fb.group({
+    username: ['', Validators.required],
+    old_password: ['', Validators.required],
+    new_password: ['', [Validators.required, Validators.minLength(6)]],
+    confirm_password: ['', Validators.required],
+  });
+
+  toggleForgotPassword(checked: boolean) {
+    this.forgotPassword.set(checked);
+    const oldPw = this.chpassForm.get('old_password')!;
+    const newPw = this.chpassForm.get('new_password')!;
+    const confirmPw = this.chpassForm.get('confirm_password')!;
+    if (checked) {
+      oldPw.clearValidators();
+      oldPw.setValue('');
+      newPw.clearValidators();
+      newPw.setValue('');
+      confirmPw.clearValidators();
+      confirmPw.setValue('');
+    } else {
+      oldPw.setValidators(Validators.required);
+      newPw.setValidators([Validators.required, Validators.minLength(6)]);
+      confirmPw.setValidators(Validators.required);
+    }
+    oldPw.updateValueAndValidity();
+    newPw.updateValueAndValidity();
+    confirmPw.updateValueAndValidity();
+  }
+
+  changePassword(): void {
+    this.errorMessage.set('');
+    this.successMessage.set('');
+
+    if (this.chpassForm.invalid) return;
+
+    const { username, old_password, new_password, confirm_password } = this.chpassForm.value;
+
+    if (new_password !== confirm_password) {
+      this.errorMessage.set('Passwords do not match.');
+      return;
+    }
+
+    const request = this.forgotPassword()
+      ? this.auth.forgotPassword(username!)
+      : this.auth.chpass(username!, new_password!, old_password!);
+
+    request.subscribe({
+      next: () => {
+        if (this.forgotPassword()) {
+          this.successMessage.set('A confirmation code has been sent to your email.');
+          this.router.navigate(['/confirm/password'], { queryParams: { username } });
+        } else {
+          this.successMessage.set('Password changed successfully.');
+        }
+      },
+      error: (err) => {
+        const msg = typeof err.error === 'string' ? err.error : err.error?.message;
+        this.errorMessage.set(msg || 'Password change failed. Please try again.');
+      },
+    });
+  }
+}

package/src/component/login/confirm_chpass_component.html

@@ -0,0 +1,47 @@
+<div class="auth-container">
+  @if (guiConfig.appTitle) {
+    <div class="auth-header">
+      <h1 class="auth-app-title">{{ guiConfig.appTitle }}</h1>
+    </div>
+  }
+  <div class="auth-card">
+    <h2 class="auth-title">Confirm Password Change</h2>
+    <p class="auth-instructions">Enter the confirmation code sent to your email and your new password.</p>
+    <form [formGroup]="confirmForm" (ngSubmit)="confirm()" class="auth-form">
+      <mat-form-field appearance="outline">
+        <mat-label>Username</mat-label>
+        <input matInput type="text" formControlName="username" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Confirmation Code</mat-label>
+        <input matInput type="text" formControlName="code" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>New Password</mat-label>
+        <input matInput type="password" formControlName="new_password" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Confirm New Password</mat-label>
+        <input matInput type="password" formControlName="confirm_password" required>
+      </mat-form-field>
+
+      @if (errorMessage()) {
+        <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+      }
+
+      @if (successMessage()) {
+        <div class="auth-success" role="status">{{ successMessage() }}</div>
+      }
+
+      <button mat-raised-button class="primary" type="submit" [disabled]="!confirmForm.valid">
+        Confirm Password Change
+      </button>
+    </form>
+    <div class="auth-actions">
+      <a routerLink="/login/local">Back to Login</a>
+    </div>
+  </div>
+</div>

package/src/component/login/confirm_chpass_component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BaseAuthService } from '../../service/auth.service';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+@Component({
+  selector: 'app-confirm-chpass',
+  templateUrl: './confirm_chpass_component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    RouterLink,
+  ],
+})
+export class ConfirmChpassComponent implements OnInit {
+  private auth = inject(BaseAuthService);
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  errorMessage = signal('');
+  successMessage = signal('');
+
+  confirmForm = this.fb.group({
+    username: ['', Validators.required],
+    code: ['', Validators.required],
+    new_password: ['', [Validators.required, Validators.minLength(6)]],
+    confirm_password: ['', Validators.required],
+  });
+
+  ngOnInit() {
+    const username = this.route.snapshot.queryParamMap.get('username');
+    if (username) {
+      this.confirmForm.patchValue({ username });
+    }
+  }
+
+  confirm(): void {
+    this.errorMessage.set('');
+    this.successMessage.set('');
+
+    if (this.confirmForm.invalid) return;
+
+    const { username, code, new_password, confirm_password } = this.confirmForm.value;
+
+    if (new_password !== confirm_password) {
+      this.errorMessage.set('Passwords do not match.');
+      return;
+    }
+
+    this.auth.confirmChpass(username!, code!, new_password!).subscribe({
+      next: () => {
+        this.successMessage.set('Password changed successfully. Redirecting to login...');
+        this.router.navigate(['/login/local']);
+      },
+      error: (err) => {
+        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
+      },
+    });
+  }
+}

package/src/component/login/confirm_register_component.html

@@ -0,0 +1,37 @@
+<div class="auth-container">
+  @if (guiConfig.appTitle) {
+    <div class="auth-header">
+      <h1 class="auth-app-title">{{ guiConfig.appTitle }}</h1>
+    </div>
+  }
+  <div class="auth-card">
+    <h2 class="auth-title">Confirm Registration</h2>
+    <p class="auth-instructions">Enter the confirmation code sent to your email address.</p>
+    <form [formGroup]="confirmForm" (ngSubmit)="confirm()" class="auth-form">
+      <mat-form-field appearance="outline">
+        <mat-label>Email</mat-label>
+        <input matInput type="email" formControlName="email" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Confirmation Code</mat-label>
+        <input matInput type="text" formControlName="code" required>
+      </mat-form-field>
+
+      @if (errorMessage()) {
+        <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+      }
+
+      @if (successMessage()) {
+        <div class="auth-success" role="status">{{ successMessage() }}</div>
+      }
+
+      <button mat-raised-button class="primary" type="submit" [disabled]="!confirmForm.valid">
+        Confirm
+      </button>
+    </form>
+    <div class="auth-actions">
+      <a routerLink="/login/local">Back to Login</a>
+    </div>
+  </div>
+</div>

package/src/component/login/confirm_register_component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BaseAuthService } from '../../service/auth.service';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+@Component({
+  selector: 'app-confirm-register',
+  templateUrl: './confirm_register_component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    RouterLink,
+  ],
+})
+export class ConfirmRegisterComponent implements OnInit {
+  private auth = inject(BaseAuthService);
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  errorMessage = signal('');
+  successMessage = signal('');
+
+  confirmForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    code: ['', Validators.required],
+  });
+
+  ngOnInit() {
+    const email = this.route.snapshot.queryParamMap.get('email');
+    if (email) {
+      this.confirmForm.patchValue({ email });
+    }
+  }
+
+  confirm(): void {
+    this.errorMessage.set('');
+    this.successMessage.set('');
+
+    if (this.confirmForm.invalid) return;
+
+    const { email, code } = this.confirmForm.value;
+
+    this.auth.confirmRegister(email!, code!).subscribe({
+      next: (resp) => {
+        this.successMessage.set('Registration confirmed.');
+        if (resp?.paymentRequired && resp.paymentUrl) {
+          // Paid plan: go straight to payment. Subscription is 'P' until paid.
+          // Using window.location (not router) so absolute / cross-origin
+          // payment URLs also work.
+          window.location.href = resp.paymentUrl;
+          return;
+        }
+        // Free plan: land on login.
+        this.router.navigate(['/login/local']);
+      },
+      error: (err) => {
+        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
+      },
+    });
+  }
+}

package/src/component/login/consent_gate.html

@@ -0,0 +1,30 @@
+<form [formGroup]="form" class="consent-form" role="group" aria-label="Consent required to continue">
+  <label class="consent-row">
+    <mat-checkbox [formControlName]="ConsentType.PRIVACY_POLICY" required>
+      I have read and agree to the
+      <a [attr.href]="effectivePrivacyUrl()" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+      and Terms of Service.
+    </mat-checkbox>
+  </label>
+
+  <label class="consent-row">
+    <mat-checkbox [formControlName]="ConsentType.CROSS_BORDER" required>
+      I consent to my personal information being processed outside my region
+      as described in the Privacy Policy.
+    </mat-checkbox>
+  </label>
+
+  @for (opt of optionalConsents(); track opt.id) {
+    <label class="consent-row">
+      <mat-checkbox [formControlName]="opt.id" [required]="opt.required ?? false">
+        {{ opt.label }}
+        @if (opt.linkUrl && opt.linkText) {
+          <a [attr.href]="opt.linkUrl" target="_blank" rel="noopener noreferrer">{{ opt.linkText }}</a>
+        }
+        @if (opt.hint) {
+          <small class="consent-hint">{{ opt.hint }}</small>
+        }
+      </mat-checkbox>
+    </label>
+  }
+</form>

package/src/component/login/consent_gate.ts

@@ -0,0 +1,109 @@
+import {
+  ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation,
+  computed, effect, inject, input, output, signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ConsentOption, ConsentState, ConsentType } from '../../model/auth';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+/**
+ * ConsentGate — generic signup / privacy-settings checkboxes.
+ *
+ * Always renders two required consents:
+ *   - privacy_policy (links to config.privacyPolicyUrl)
+ *   - cross_border   (cross-border data processing acknowledgement)
+ *
+ * Additional checkboxes are declared by the consumer via `optionalConsents`.
+ * Emits `consentStateChange` on every change with a `Record<string, boolean>`
+ * map keyed by ConsentType values — mirrors keel's user.SignupConsent.Consents.
+ *
+ * See keel/README.md → "Consent Capture" for the backend-side contract.
+ */
+@Component({
+  selector: 'app-consent-gate',
+  templateUrl: './consent_gate.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [ReactiveFormsModule, MatCheckboxModule],
+})
+export class ConsentGateComponent {
+  private readonly destroyRef = inject(DestroyRef);
+  protected readonly guiConfig: SailGuiConfig =
+    inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
+
+  /** Content hash of the currently-deployed policy. Required. */
+  readonly policyVersion = input<string>();
+  /** ISO 639-1 policy language code. */
+  readonly policyLanguage = input<string>('en');
+  /** ISO country code of the policy variant. */
+  readonly policyRegion = input<string | undefined>(undefined);
+  /** Public URL of the privacy policy text. Falls back to config.privacyPolicyUrl. */
+  readonly privacyUrl = input<string | undefined>(undefined);
+  /** Optional extra checkboxes (e.g. video_opt_in, marketing). */
+  readonly optionalConsents = input<ConsentOption[]>([]);
+
+  readonly consentStateChange = output<ConsentState>();
+
+  // Plain (untyped) FormGroup because optionalConsents add/remove controls dynamically;
+  // a strongly-typed group would reject those calls.
+  readonly form: FormGroup = new FormGroup({
+    [ConsentType.PRIVACY_POLICY]: new FormControl(false, { nonNullable: true, validators: Validators.requiredTrue }),
+    [ConsentType.CROSS_BORDER]:   new FormControl(false, { nonNullable: true, validators: Validators.requiredTrue }),
+  });
+
+  private readonly formValue = signal<Record<string, boolean>>({});
+  private readonly formValid = signal(false);
+
+  readonly effectivePolicyVersion = computed(() =>
+    this.policyVersion() ?? this.guiConfig.defaultPolicyVersion ?? '',
+  );
+  readonly effectivePolicyLanguage = computed(() =>
+    this.policyLanguage() ?? this.guiConfig.defaultPolicyLanguage ?? 'en',
+  );
+  readonly effectivePrivacyUrl = computed(() =>
+    this.privacyUrl() ?? this.guiConfig.privacyPolicyUrl ?? '/privacy-policy',
+  );
+
+  readonly state = computed<ConsentState>(() => ({
+    consents:       this.formValue(),
+    policyVersion:  this.effectivePolicyVersion(),
+    policyLanguage: this.effectivePolicyLanguage(),
+    valid:          this.formValid(),
+  }));
+
+  constructor() {
+    // Register optional consent controls dynamically when the input changes.
+    effect(() => {
+      const options = this.optionalConsents();
+      for (const opt of options) {
+        if (!this.form.contains(opt.id)) {
+          this.form.addControl(
+            opt.id,
+            new FormControl(false, { nonNullable: true, validators: opt.required ? Validators.requiredTrue : [] }),
+          );
+        }
+      }
+      // Drop controls for options that were removed.
+      for (const key of Object.keys(this.form.controls)) {
+        if (key === ConsentType.PRIVACY_POLICY || key === ConsentType.CROSS_BORDER) continue;
+        if (!options.some((o) => o.id === key)) this.form.removeControl(key);
+      }
+      this.formValue.set(this.form.getRawValue());
+      this.formValid.set(this.form.valid);
+    });
+
+    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.formValue.set(this.form.getRawValue());
+      this.formValid.set(this.form.valid);
+    });
+    this.form.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.formValid.set(this.form.valid);
+    });
+
+    effect(() => this.consentStateChange.emit(this.state()));
+  }
+
+  protected readonly ConsentType = ConsentType;
+}

package/src/component/login/login_component.html

@@ -0,0 +1,43 @@
+<div class="auth-container">
+  @if (guiConfig.appTitle) {
+    <div class="auth-header">
+      <h1 class="auth-app-title">{{ guiConfig.appTitle }}</h1>
+    </div>
+  }
+  <div class="auth-card">
+    <h2 class="auth-title">Login</h2>
+    @if (loggedOut) {
+      <p class="auth-message" role="status" aria-live="polite">You have been logged out successfully.</p>
+    }
+    <form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">
+      <mat-form-field appearance="outline">
+        <mat-label>Username</mat-label>
+        <input matInput type="text" formControlName="username" required>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Password</mat-label>
+        <input matInput type="password" formControlName="password" required>
+      </mat-form-field>
+      <button mat-raised-button class="primary" type="submit" [disabled]="!loginForm.valid">
+        Login
+      </button>
+    </form>
+    @if (showSocialLogin()) {
+      <hr class="auth-divider">
+      <app-social-login
+        [providers]="enabledSocialProviders()"
+        (loginSuccess)="onSocialSuccess($event)"
+        (loginError)="onSocialError($event)" />
+    }
+    <div class="auth-actions">
+      <a routerLink="/login/chpass">I forgot my password</a>
+    </div>
+    @if (guiConfig.loginFooterLinks && guiConfig.loginFooterLinks.length > 0) {
+      <div class="auth-footer">
+        @for (link of guiConfig.loginFooterLinks; track link.routerLink) {
+          <a [routerLink]="link.routerLink">{{ link.label }}</a>
+        }
+      </div>
+    }
+  </div>
+</div>

package/src/component/login/login_component.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BaseAuthService } from '../../service/auth.service';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from '@angular/material/input';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { LoginResponseSocial, SocialProvider } from '../../model/auth';
+import { SocialLoginComponent } from './social_login';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login_component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    RouterLink,
+    SocialLoginComponent,
+  ],
+})
+export class LoginComponent {
+  private auth = inject(BaseAuthService);
+  private router = inject(Router);
+  protected fb = inject(FormBuilder);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+  protected readonly loggedOut = inject(ActivatedRoute).snapshot.queryParamMap.get('loggedOut') === 'true';
+
+  /**
+   * Auto-show the embedded SocialLoginComponent whenever at least one
+   * provider is configured in SailGuiConfig. Consumers that don't set
+   * googleClientId/appleServiceId see no change; consumers that do get a
+   * working social-login surface inside the standard /login route — no
+   * wrapper component required.
+   */
+  protected readonly enabledSocialProviders = computed<SocialProvider[]>(() => {
+    const providers: SocialProvider[] = [];
+    if (this.guiConfig.googleClientId)  providers.push('google');
+    if (this.guiConfig.appleServiceId)  providers.push('apple');
+    return providers;
+  });
+  protected readonly showSocialLogin = computed(() => this.enabledSocialProviders().length > 0);
+
+  loginForm = this.fb.group({
+    username: ['', Validators.required],
+    password: ['', Validators.required],
+  });
+
+  login(): void {
+    if (this.loginForm.valid) {
+      const { username, password } = this.loginForm.value;
+      this.auth.login(username!, password!);
+    }
+  }
+
+  /**
+   * SocialLoginComponent emits the response after BaseAuthService.loginSocial
+   * persists the JWT internally. Mirror the same post-login navigation that
+   * password-login uses (root route by default; consumers override via
+   * BaseAuthService.navigateToRoleHome when role-aware routing lands).
+   */
+  protected onSocialSuccess(_: LoginResponseSocial): void {
+    this.router.navigateByUrl('/');
+  }
+
+  protected onSocialError(err: Error): void {
+    console.error('social login failed:', err);
+  }
+}

package/src/component/login/otp_input.html

@@ -0,0 +1,38 @@
+<div class="otp-container">
+  @if (contact()) {
+    <p class="otp-sent-to">We sent a code to</p>
+    <p class="otp-contact">{{ contact() }}</p>
+  }
+
+  <div class="otp-digits" role="group" aria-label="Verification code">
+    @for (digit of digits(); track $index) {
+      <div class="otp-digit"
+           [class.active]="$index === currentIndex()"
+           [attr.aria-label]="'Digit ' + ($index + 1)">
+        {{ digit }}
+      </div>
+    }
+  </div>
+
+  <p class="otp-resend">
+    @if (canResend()) {
+      <button mat-button class="resend-btn" type="button" (click)="onResend()">Resend code</button>
+    } @else {
+      Resend code in {{ countdown() }}s
+    }
+  </p>
+
+  <div class="otp-keypad" role="group" aria-label="Numeric keypad">
+    @for (key of keypadKeys; track $index) {
+      @if (key === '') {
+        <div class="keypad-spacer"></div>
+      } @else if (key === 'back') {
+        <button mat-button class="keypad-key" type="button" (click)="onBackspace()" aria-label="Backspace" [disabled]="disabled()">
+          <mat-icon>backspace</mat-icon>
+        </button>
+      } @else {
+        <button mat-button class="keypad-key" type="button" (click)="onKeyPress(key)" [disabled]="disabled()">{{ key }}</button>
+      }
+    }
+  </div>
+</div>