@tinya-code/gas-admin-ui 0.2.0-alpha.12 → 0.2.0-alpha.15

package/src/lib/pages/login/login.spec.ts

@@ -0,0 +1,109 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideRouter, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { AuthProvider } from '../../core/models/schema.model';
+import { setSchemaCatalog } from '../../core/registry/schema-catalog';
+import { AuthService } from '../../core/services/auth.service';
+import { API_URL } from '../../core/tokens';
+import { Login } from './login';
+
+describe('Login component', () => {
+  let fixture: ComponentFixture<Login>;
+  let component: Login;
+  let auth: AuthService;
+  let router: Router;
+
+  function setup(providers: AuthProvider[], hasFirebase = false) {
+    TestBed.resetTestingModule();
+    setSchemaCatalog([], {
+      providers,
+      loginFields: [
+        { key: 'email', type: 'email', required: true },
+        { key: 'password', type: 'password', required: true },
+      ],
+      redirectAfterLogin: '/dashboard',
+      rememberMe: false,
+      ...(hasFirebase ? { firebase: { exchangeEndpoint: '/auth/firebase' } } : {}),
+    });
+
+    TestBed.configureTestingModule({
+      imports: [Login],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([]),
+        { provide: API_URL, useValue: '/api' },
+      ],
+    });
+
+    auth = TestBed.inject(AuthService);
+    router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigateByUrl').mockResolvedValue(true);
+    fixture = TestBed.createComponent(Login);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('providers = [password], sin firebase: no muestra botón de Google y submit() llama a auth.login()', () => {
+    setup(['password'], false);
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('#btn-login-google')).toBeNull();
+
+    const loginSpy = vi.spyOn(auth, 'login').mockReturnValue(
+      of({ id: 'u_1', email: 'test@example.com', role: 'admin' }),
+    );
+
+    component.setValue('email', 'test@example.com');
+    component.setValue('password', 'secret');
+
+    const form = compiled.querySelector('form')!;
+    form.dispatchEvent(new Event('submit'));
+
+    expect(loginSpy).toHaveBeenCalledWith('test@example.com', 'secret');
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
+  });
+
+  it('providers = [google, password]: muestra botón de Google en el DOM', () => {
+    setup(['google', 'password'], false);
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('#btn-login-google')).not.toBeNull();
+    expect(compiled.querySelector('#btn-login-google')?.textContent).toContain('Continuar con Google');
+  });
+
+  it('loginWithGoogle() llama a auth.loginWithGoogle() y navega al tener éxito', () => {
+    setup(['google', 'password'], false);
+    const googleSpy = vi.spyOn(auth, 'loginWithGoogle').mockReturnValue(
+      of({ id: 'u_google', email: 'google@test.com', role: 'admin' }),
+    );
+
+    component.loginWithGoogle();
+
+    expect(googleSpy).toHaveBeenCalled();
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
+  });
+
+  it('providers = [password] con firebase: submit() delega a loginWithFirebasePassword()', () => {
+    setup(['password'], true);
+    const fbPwSpy = vi.spyOn(auth, 'loginWithFirebasePassword').mockReturnValue(
+      of({ id: 'u_pw', email: 'pw@test.com', role: 'admin' }),
+    );
+
+    component.setValue('email', 'pw@test.com');
+    component.setValue('password', 'secret');
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const form = compiled.querySelector('form')!;
+    form.dispatchEvent(new Event('submit'));
+
+    expect(fbPwSpy).toHaveBeenCalledWith('pw@test.com', 'secret');
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
+  });
+});

package/src/lib/pages/login/login.ts

@@ -0,0 +1,227 @@
+import { Component, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ApiError } from '../../core/models/api.model';
+import { AuthService, LOGIN_PATH } from '../../core/services/auth.service';
+import { Button } from '../../shared/components/button/button';
+import { getAuth } from '../../core/registry/schema-catalog';
+
+/** Copy de las etiquetas — vive acá, no en el schema: una sola pantalla. */
+const LABELS: Record<string, string> = {
+  email: 'Correo electrónico',
+  password: 'Contraseña',
+};
+
+const FIELD_BASE =
+  'mt-1 w-full rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral placeholder:text-neutral/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
+
+/**
+ * Login (auth.md §5.1).
+ *
+ * **Pintada a partir de `authSchema.loginFields`**: si mañana cambian los
+ * campos, éste componente no se toca — sólo se mueven claves y etiquetas.
+ * No usa `FieldHost` porque el tipo `password` todavía no existe en
+ * `FieldSchema` (es pieza nueva de Fase 3, R3.3); el `@switch` de abajo es
+ * exactamente el reemplazo que R3.x hará por el registro de render.
+ *
+ * **No hay casilla «recordarme»**: D10-3 negó `localStorage` (§9.3) y el
+ * token muere con la pestaña. Poner un checkbox sería prometer que la
+ * sesión sobrevive a cerrar el navegador.
+ */
+@Component({
+  selector: 'app-login',
+  imports: [Button],
+  template: `
+    <main class="flex min-h-[100svh] items-center justify-center bg-surface px-4">
+      <div
+        class="w-full max-w-sm rounded-xl border border-neutral/20 bg-surface-raised p-8 shadow-sm"
+      >
+        <h1 class="font-display text-lg font-semibold">Admin</h1>
+        <p class="mt-1 text-sm text-neutral">Inicia sesión para continuar</p>
+
+        @if (providers.includes('google')) {
+          <button
+            type="button"
+            id="btn-login-google"
+            app-button
+            variant="outline"
+            [loading]="providerLoading() === 'google'"
+            (click)="loginWithGoogle()"
+            class="mt-6 w-full"
+          >
+            Continuar con Google
+          </button>
+          <div class="my-4 flex items-center gap-3">
+            <hr class="flex-1 border-neutral/20" />
+            <span class="text-xs text-neutral/50">o</span>
+            <hr class="flex-1 border-neutral/20" />
+          </div>
+        }
+
+        <form
+          [class]="providers.includes('google') ? 'space-y-4' : 'mt-6 space-y-4'"
+          (submit)="submit($event)"
+          novalidate
+        >
+          @for (field of schema.loginFields; track field.key) {
+            <div>
+              <label [attr.for]="field.key" class="block text-sm font-medium text-neutral">
+                {{ label(field.key) }}
+              </label>
+
+              @switch (field.type) {
+                @case ('email') {
+                  <input
+                    [attr.id]="field.key"
+                    [attr.name]="field.key"
+                    type="email"
+                    autocomplete="email"
+                    inputmode="email"
+                    [attr.required]="field.required ? '' : null"
+                    [value]="value(field.key)"
+                    (input)="setValue(field.key, $any($event.target).value)"
+                    class="${FIELD_BASE}"
+                  />
+                }
+                @default {
+                  <input
+                    [attr.id]="field.key"
+                    [attr.name]="field.key"
+                    type="password"
+                    autocomplete="current-password"
+                    [attr.required]="field.required ? '' : null"
+                    [value]="value(field.key)"
+                    (input)="setValue(field.key, $any($event.target).value)"
+                    class="${FIELD_BASE}"
+                  />
+                }
+              }
+            </div>
+          }
+
+          @if (error(); as message) {
+            <p role="alert" class="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">
+              {{ message }}
+            </p>
+          }
+
+          <button app-button type="submit" [loading]="loading()" class="w-full">
+            Iniciar sesión
+          </button>
+        </form>
+      </div>
+    </main>
+  `,
+})
+export class Login {
+  private readonly auth = inject(AuthService);
+  private readonly router = inject(Router);
+
+  // Se resuelve en runtime: el catálogo lo fija `provideGasAdmin` en el bootstrap.
+  readonly schema = getAuth()!;
+  readonly providers = this.schema.providers;
+  readonly error = signal<string | null>(null);
+  readonly loading = signal(false);
+  readonly providerLoading = signal<string | null>(null);
+
+  /** Valores por clave: el set lo pinta el `@for` del schema. */
+  private readonly values = signal<Record<string, string>>({});
+
+  label(key: string): string {
+    return LABELS[key] ?? key;
+  }
+
+  value(key: string): string {
+    return this.values()[key] ?? '';
+  }
+
+  setValue(key: string, next: string): void {
+    this.values.update((current) => ({ ...current, [key]: next }));
+  }
+
+  loginWithGoogle(): void {
+    if (this.providerLoading()) return;
+    this.providerLoading.set('google');
+    this.error.set(null);
+    this.auth.loginWithGoogle().subscribe({
+      next: () => {
+        this.providerLoading.set(null);
+        this.goAfterLogin();
+      },
+      error: (err: unknown) => {
+        this.providerLoading.set(null);
+        this.error.set(
+          err instanceof ApiError && err.message !== ''
+            ? err.message
+            : err instanceof Error && err.message !== ''
+              ? err.message
+              : 'No se pudo iniciar sesión con Google.',
+        );
+      },
+    });
+  }
+
+  submit(event: Event): void {
+    event.preventDefault();
+    if (this.loading()) return;
+
+    const email = this.value('email').trim();
+    const password = this.value('password');
+    if (email === '' || password === '') {
+      this.error.set('Completa el correo y la contraseña.');
+      return;
+    }
+
+    if (this.schema.firebase && this.schema.providers.includes('password')) {
+      this.loading.set(true);
+      this.error.set(null);
+      this.auth.loginWithFirebasePassword(email, password).subscribe({
+        next: () => {
+          this.loading.set(false);
+          this.goAfterLogin();
+        },
+        error: (err: unknown) => {
+          this.loading.set(false);
+          this.error.set(
+            err instanceof ApiError && err.message !== ''
+              ? err.message
+              : err instanceof Error && err.message !== ''
+                ? err.message
+                : 'No se pudo iniciar sesión.',
+          );
+        },
+      });
+      return;
+    }
+
+    this.loading.set(true);
+    this.error.set(null);
+    this.auth.login(email, password).subscribe({
+      next: () => {
+        this.loading.set(false);
+        this.goAfterLogin();
+      },
+      error: (err: unknown) => {
+        this.loading.set(false);
+        // El mensaje del backend ya viene en español y ya describe el
+        // caso («credenciales inválidas»): reformatearlo acá sólo
+        // duplicaría la verdad y se perdería si cambia el texto del back.
+        this.error.set(
+          err instanceof ApiError && err.message !== ''
+            ? err.message
+            : 'No se pudo iniciar sesión.',
+        );
+      },
+    });
+  }
+
+  private goAfterLogin(): void {
+    const previous = this.auth.consumeReturnUrl();
+    const target =
+      previous !== null && previous !== '' && !previous.startsWith(LOGIN_PATH)
+        ? previous
+        : this.schema.redirectAfterLogin;
+    void this.router.navigateByUrl(target).catch(() => undefined);
+  }
+}
+

package/src/lib/pages/resource-page/resource-page.ts

@@ -0,0 +1,234 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+import { distinctUntilChanged, map, of } from 'rxjs';
+
+import type { ResourceSchema, SelectionBinding } from '../../core/models/schema.model';
+import { AuthService } from '../../core/services/auth.service';
+import type { SelectionEmitter } from '../../views/composer/view-context';
+import { getSchema } from '../../core/registry/schema-catalog';
+import { EmptyState } from '../../shared/components/empty-state/empty-state';
+import { Dashboard } from '../dashboard/dashboard';
+import { DetailView } from '../detail-view/detail-view';
+import { FormView } from '../form-view/form-view';
+import { ListView } from '../list-view/list-view';
+
+type View = 'list' | 'detail';
+
+/**
+ * Página del recurso: resuelve el `id` de la ruta contra el registry y
+ * despacha según `kind` — colección → list view, singleton → form view,
+ * dashboard → panel de sólo lectura — aplicando `permissions` (estado
+ * «sin permisos»).
+ *
+ * Cuando `schema.detail.enabled === true`, intercepta el click de fila del
+ * `ListView` y muestra el `DetailView` en lugar de navegar al formulario.
+ * «Editar» desde el `DetailView` sí navega al formulario de edición.
+ */
+@Component({
+  selector: 'app-resource-page',
+  imports: [Dashboard, DetailView, EmptyState, FormView, ListView],
+  template: `
+    @if (schema(); as schema) {
+      @if (hasNoAccess(schema)) {
+        <app-empty-state
+          title="Sin permisos"
+          message="No tiene permisos para gestionar este recurso."
+        />
+      } @else {
+        @switch (schema.kind) {
+          @case ('collection') {
+            @switch (currentView()) {
+              @case ('detail') {
+                @if (selectedRecord(); as rec) {
+                  <app-detail-view
+                    [schema]="schema"
+                    [record]="rec"
+                    (back)="switchToList()"
+                    (edit)="goEdit($event)"
+                    (delete)="switchToList()"
+                  />
+                }
+              }
+              @default {
+                <header class="mb-6">
+                  <h1 class="font-display text-2xl font-semibold">
+                    {{ schema.labelPlural }}
+                  </h1>
+                  <p class="text-sm text-neutral">Colección · {{ schema.fields.length }} campos</p>
+                </header>
+                <app-list-view [schema]="schema" (viewRecord)="switchToDetail($event)" />
+              }
+            }
+          }
+          @case ('dashboard') {
+            <app-dashboard [schema]="schema" />
+          }
+          @default {
+            <!-- singleton: formulario directo -->
+            <app-form-view />
+          }
+        }
+      }
+    } @else {
+      <app-empty-state
+        title="Recurso no encontrado"
+        message="No existe un schema con ese id en el registry."
+      />
+    }
+  `,
+})
+export class ResourcePage {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly auth = inject(AuthService);
+  // paramMap emite síncrono (ConvertToParamMap) → requireSync evita `| undefined`.
+  private readonly params = toSignal(this.route.paramMap, { requireSync: true });
+  private readonly routeData = toSignal(this.route.data ?? of({}), { requireSync: true });
+
+  readonly schema = computed(() => {
+    const resourceId = this.routeData()['resourceId'] ?? this.params().get('id');
+    return getSchema(typeof resourceId === 'string' ? resourceId : '');
+  });
+
+  /** Vista activa: 'list' (por defecto) o 'detail' (al hacer clic en una fila con detail.enabled). */
+  readonly currentView = signal<View>('list');
+  /** Registro seleccionado para la vista de detalle. */
+  readonly selectedRecord = signal<Record<string, unknown> | null>(null);
+
+  constructor() {
+    // La ficha es ENLAZABLE: `/:id/:key` (p. ej. el «Ver Ficha» del
+    // dashboard) entra directo al detalle. Al navegar — desde una fila o con
+    // el botón atrás — la URL es la única fuente de verdad de la vista.
+    this.route.paramMap
+      .pipe(
+        map((params) => params.get('key')),
+        distinctUntilChanged(),
+        takeUntilDestroyed(),
+      )
+      .subscribe((key) => this.openFromRoute(key));
+    this.route.data
+      ?.pipe(takeUntilDestroyed())
+      .subscribe(() => this.openFromRoute(this.params().get('key')));
+  }
+
+  private openFromRoute(key: string | null): void {
+    const schema = this.schema();
+    if (!schema || schema.kind !== 'collection') return;
+
+    const requestedView = this.routeData()['viewType'];
+    if ((requestedView === 'detail' || key) && key && schema.detail?.enabled) {
+      // Si el registro ya está cargado (clic en una fila) se conserva tal
+      // cual; si llegamos por URL sólo hay clave, y DetailView trae el resto.
+      const current = this.selectedRecord();
+      if (!current || String(current[schema.keyField]) !== key) {
+        this.selectedRecord.set({ [schema.keyField]: key });
+      }
+      this.currentView.set('detail');
+    } else if (this.currentView() === 'detail') {
+      this.selectedRecord.set(null);
+      this.currentView.set('list');
+    }
+  }
+
+  /**
+   * Clic de fila. R9.9.4 · decision table: si el schema declara `select`,
+   * el contrato declarado REEMPLAZA el comportamiento local (`route` ⇒
+   * emisión al dispatcher, `inline` ⇒ selección local sin URL, `none` ⇒
+   * no-op); sin declaración, la navegación local actual sigue intacta
+   * (backward compat — R9.9 «existing routes untouched»).
+   */
+  switchToDetail(record: Record<string, unknown>): void {
+    const schema = this.schema();
+    const data = this.routeData();
+    const binding = data['select'] as SelectionBinding | undefined;
+
+    if (binding !== undefined) {
+      const key =
+        schema && record[schema.keyField] !== undefined && record[schema.keyField] !== null
+          ? String(record[schema.keyField])
+          : '';
+      if (binding.mode === 'route') {
+        const emit = data['emit'] as SelectionEmitter | undefined;
+        emit?.({
+          resource: schema?.id ?? String(data['resourceId'] ?? ''),
+          key,
+          action: binding.on,
+        });
+        return;
+      }
+      if (binding.mode === 'none') return;
+      // inline ⇒ selección local (ficha embebida), sin tocar la URL
+      this.selectedRecord.set(record);
+      this.currentView.set('detail');
+      return;
+    }
+
+    this.selectedRecord.set(record);
+    this.currentView.set('detail');
+    const k = schema ? record[schema.keyField] : undefined;
+    if (schema && k !== undefined && k !== null && String(k) !== '') {
+      void this.router.navigate(['/', schema.id, String(k)]);
+    }
+  }
+
+  switchToList(): void {
+    this.selectedRecord.set(null);
+    this.currentView.set('list');
+    const schema = this.schema();
+    if (schema && this.params().get('key')) {
+      void this.router.navigate(['/', schema.id]);
+    }
+  }
+
+  goEdit(record: Record<string, unknown>): void {
+    const schema = this.schema();
+    if (!schema) return;
+    const key = record[schema.keyField] as string | undefined;
+    if (key) {
+      void this.router.navigate(['/', schema.id, key, 'edit']);
+    }
+  }
+
+  /**
+   * Colección sin ninguna operación posible u singleton sin `update`: no hay
+   * nada que mostrar con sentido (base.md §10 «Sin permisos»).
+   *
+   * R7.5: usa policies cuando existan, fallback a permissions.
+   *
+   * Un dashboard nunca entra aquí: es un panel de sólo lectura, `ResourcePermissions`
+   * no tiene `read` y el acceso real a los datos lo decide el endpoint
+   * (A4: el cliente es interfaz, no autoridad).
+   */
+  hasNoAccess(schema: ResourceSchema): boolean {
+    // R7.5: intentar policies primero
+    if (schema.policies?.access) {
+      // Con policies, ocultar si el usuario no puede hacer NINGUNA operación
+      // relevante para el tipo de recurso
+      if (schema.kind === 'singleton') {
+        return !this.auth.canDoOperation(schema, 'update');
+      }
+      // collection: ocultar si no puede hacer list, create, update ni remove
+      return (
+        !this.auth.canDoOperation(schema, 'list') &&
+        !this.auth.canDoOperation(schema, 'create') &&
+        !this.auth.canDoOperation(schema, 'update') &&
+        !this.auth.canDoOperation(schema, 'remove')
+      );
+    }
+
+    // Fallback a permissions (legacy)
+    const permissions = schema.permissions;
+    if (!permissions || schema.kind === 'dashboard') {
+      return false;
+    }
+    if (schema.kind === 'singleton') {
+      const hasReadEndpoint = !!schema.endpoint?.get;
+      return !hasReadEndpoint && permissions.update === false;
+    }
+    const hasReadEndpoint = !!schema.endpoint?.list || !!schema.endpoint?.get;
+    const canWrite =
+      permissions.create !== false || permissions.update !== false || permissions.remove !== false;
+    return !hasReadEndpoint && !canWrite;
+  }
+}

package/src/lib/shared/components/badge/badge.ts

@@ -0,0 +1,35 @@
+import { Component, computed, input } from '@angular/core';
+
+export type BadgeKind = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+
+const KINDS: Record<BadgeKind, string> = {
+  success: 'bg-success text-surface',
+  danger: 'bg-danger text-surface',
+  warning: 'bg-accent/20 text-accent-text font-semibold',
+  info: 'bg-primary text-surface',
+  neutral: 'bg-neutral text-surface',
+};
+
+/**
+ * Etiqueta compacta (booleanos, estados).
+ *
+ * El texto va con `text-surface` y no `text-white` porque el fondo lo da
+ * el token y en oscuro se aclara: blanco sobre `--color-danger` oscuro
+ * sería 2,8:1. `--color-surface` vale #fff en claro, así que el render
+ * actual no cambia, y en oscuro el texto se vuelve oscuro sobre el tono
+ * aclarado (6,4–9,2:1).
+ */
+@Component({
+  selector: 'app-badge',
+  host: { '[class]': 'classes()' },
+  template: `{{ label() }}`,
+})
+export class Badge {
+  readonly label = input.required<string>();
+  readonly kind = input<BadgeKind>('neutral');
+
+  readonly classes = computed(
+    () =>
+      `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${KINDS[this.kind()]}`,
+  );
+}

package/src/lib/shared/components/button/button.ts

@@ -0,0 +1,65 @@
+import { Component, computed, input } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'outline' | 'danger' | 'ghost';
+export type ButtonSize = 'md' | 'sm' | 'icon';
+
+const BASE =
+  'inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: 'bg-primary text-surface hover:bg-primary/90',
+  outline: 'border border-neutral/40 bg-surface text-neutral hover:bg-neutral/10',
+  danger: 'bg-danger text-surface hover:bg-danger/90',
+  ghost: 'text-neutral hover:bg-neutral/10',
+};
+
+/**
+ * Tamaño: el padding y el tip-size viven AQUÍ, no en `BASE`. Dos botones
+ * con la misma propiedad (px-4 vs px-2) los resolvería el orden del CSS
+ * generado, no el código — el motivo por el que los chips del textarea
+ * acabaron con `!important`.
+ *
+ * Mobile-first: todas arrancan en `min-h-11` (44 px, objetivo táctil de la
+ * guía mobile §8.2) y en `lg` relajan al tamaño de escritorio, así el mismo
+ * componente cumple la guía táctil sin engordar la UI de escritorio.
+ *  - `md`   → botón de texto (Guardar, Cancelar…)
+ *  - `sm`   → chips y acciones compactas (texto `xs`)
+ *  - `icon` → sólo glifo, cuadrado (toolbars de filas, arrastre)
+ */
+const SIZES: Record<ButtonSize, string> = {
+  md: 'px-4 py-2 text-sm min-h-11 lg:min-h-0',
+  sm: 'px-2 py-1 text-xs min-h-11 lg:min-h-0',
+  icon: 'p-1 min-h-11 min-w-11 lg:min-h-0 lg:min-w-0',
+};
+
+/**
+ * Botón nativo (selector por atributo, patrón Material `button[mat-button]`):
+ * conserva semántica y estilos de `<button>` y las clases del consumidor.
+ */
+@Component({
+  selector: 'button[app-button]',
+  host: {
+    '[class]': 'classes()',
+    '[type]': 'type()',
+    '[disabled]': 'disabled() || loading()',
+    '[attr.aria-busy]': 'loading() || null',
+  },
+  template: `
+    @if (loading()) {
+      <span
+        class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+        aria-hidden="true"
+      ></span>
+    }
+    <ng-content />
+  `,
+})
+export class Button {
+  readonly variant = input<ButtonVariant>('primary');
+  readonly size = input<ButtonSize>('md');
+  readonly type = input<'button' | 'submit'>('button');
+  readonly disabled = input(false);
+  readonly loading = input(false);
+
+  readonly classes = computed(() => `${BASE} ${VARIANTS[this.variant()]} ${SIZES[this.size()]}`);
+}