@retalia/pos-components 0.0.4 → 0.0.6

package/src/lib/login/pos-login.scss

@@ -1,238 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  max-width: 26rem;
-  color: var(--pos-color-text);
-  font-family: var(--pos-font-family);
-  font-size: var(--pos-font-size-md);
-}
-
-.pos-login__panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  padding: var(--pos-space-xl);
-  border: 1px solid var(--pos-color-border);
-  border-radius: var(--pos-radius-lg);
-  background:
-    radial-gradient(120% 80% at 100% 0%, rgb(0 194 178 / 0.08), transparent 55%),
-    var(--pos-color-panel);
-}
-
-.pos-login__header {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--pos-space-sm);
-  padding-right: var(--pos-space-2xl);
-}
-
-.pos-login__kicker {
-  margin: 0;
-  color: var(--pos-color-primary);
-  font-size: var(--pos-font-size-sm);
-  font-weight: var(--pos-font-weight-bold);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.pos-login__title {
-  margin: 0;
-  max-width: 14ch;
-  font-family: var(--pos-font-family-display);
-  font-size: var(--pos-font-size-xl);
-  font-weight: var(--pos-font-weight-bold);
-  letter-spacing: -0.03em;
-  line-height: 1.15;
-}
-
-.pos-login__status {
-  min-height: 1.5rem;
-  margin: var(--pos-space-md) 0 var(--pos-space-sm);
-  display: flex;
-  flex-direction: column;
-  gap: var(--pos-space-sm);
-}
-
-.pos-login__status p {
-  margin: 0;
-  font-size: var(--pos-font-size-sm);
-  font-weight: var(--pos-font-weight-semibold);
-}
-
-.pos-login__error {
-  padding: var(--pos-space-sm) var(--pos-space-md);
-  border-left: 3px solid var(--pos-color-danger);
-  background: rgb(214 69 69 / 0.08);
-  color: var(--pos-color-danger);
-}
-
-.pos-login__key:disabled,
-.pos-login__back:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.pos-login__body {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: var(--pos-space-xl);
-  width: 100%;
-}
-
-.pos-login__display {
-  border: 1px solid var(--pos-color-border);
-  border-radius: var(--pos-radius-lg);
-  background: var(--pos-color-display);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
-  padding: var(--pos-space-lg) var(--pos-space-xl);
-}
-
-.pos-login__input {
-  display: block;
-  width: 100%;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  color: var(--pos-color-on-display);
-  font-family: var(--pos-font-family-display);
-  font-size: clamp(1.35rem, 3vw, 1.85rem);
-  font-weight: var(--pos-font-weight-semibold);
-  letter-spacing: var(--pos-letter-spacing-display);
-  text-align: center;
-  outline: none;
-}
-
-.pos-login__input::placeholder {
-  color: rgb(232 237 242 / 0.35);
-  letter-spacing: 0.45em;
-}
-
-.pos-login__keypad {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pos-space-md);
-}
-
-.pos-login__keypad-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--pos-space-md);
-}
-
-.pos-login__key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--pos-keypad-size);
-  border: 1px solid var(--pos-color-key-border);
-  border-radius: var(--pos-radius-md);
-  background: var(--pos-color-key);
-  color: var(--pos-color-text);
-  font-family: inherit;
-  font-size: 1.15rem;
-  font-weight: var(--pos-font-weight-bold);
-  cursor: pointer;
-  transition:
-    background 120ms ease,
-    color 120ms ease,
-    border-color 120ms ease,
-    transform 120ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.pos-login__key--action {
-  color: var(--pos-color-text-muted);
-  background: var(--pos-color-surface-muted);
-}
-
-.pos-login__key:active {
-  background: var(--pos-color-key-active);
-  border-color: var(--pos-color-key-active);
-  color: var(--pos-color-on-key-active);
-  transform: translateY(1px);
-}
-
-.pos-login__actions {
-  display: flex;
-  align-items: stretch;
-  gap: var(--pos-space-md);
-  margin-top: auto;
-}
-
-.pos-login__back {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: var(--pos-space-xs);
-  min-height: var(--pos-button-min-height);
-  padding: 0 var(--pos-space-lg);
-  border: 1px solid var(--pos-color-border);
-  border-radius: var(--pos-radius-md);
-  background: var(--pos-color-panel-elevated);
-  color: var(--pos-color-text);
-  font: inherit;
-  font-weight: var(--pos-font-weight-semibold);
-  cursor: pointer;
-}
-
-.pos-login__primary {
-  flex: 1 1 auto;
-  min-height: var(--pos-button-min-height);
-  border: 0;
-  border-radius: var(--pos-radius-md);
-  background: var(--pos-color-primary);
-  color: var(--pos-color-on-primary);
-  font: inherit;
-  font-size: 1.05rem;
-  font-weight: var(--pos-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: filter 120ms ease, transform 120ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.pos-login__primary:not(:disabled):hover {
-  filter: brightness(0.97);
-}
-
-.pos-login__primary:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-.pos-login__primary--disabled,
-.pos-login__primary:disabled {
-  background: var(--pos-color-disabled);
-  color: var(--pos-color-on-disabled);
-  cursor: not-allowed;
-  filter: none;
-  transform: none;
-}
-
-@media (min-width: 768px) {
-  .pos-login__panel {
-    padding: var(--pos-space-2xl);
-  }
-
-  .pos-login__key {
-    min-height: var(--pos-keypad-size-md);
-  }
-}
-
-@media (min-width: 1100px) {
-  .pos-login__key {
-    min-height: var(--pos-keypad-size-lg);
-    font-size: 1.25rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pos-login__key,
-  .pos-login__primary {
-    transition: none;
-  }
-}

package/src/lib/login/pos-login.spec.ts

@@ -1,89 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PosLogin, PosLoginIntent } from './pos-login';
-
-describe('PosLogin', () => {
-  let fixture: ComponentFixture<PosLogin>;
-  let component: PosLogin;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PosLogin],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(PosLogin);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should render the clerk number title by default', () => {
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.pos-login__title')?.textContent).toContain(
-      'Enter Clerk Number',
-    );
-  });
-
-  it('should emit next with the clerk number after keypad entry', async () => {
-    const intents: PosLoginIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    const keys = Array.from(
-      (fixture.nativeElement as HTMLElement).querySelectorAll('.pos-login__key'),
-    ) as HTMLButtonElement[];
-    keys.find((button) => button.textContent?.trim() === '1')?.click();
-    keys.find((button) => button.textContent?.trim() === '2')?.click();
-    await fixture.whenStable();
-
-    const primary = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-login__primary',
-    ) as HTMLButtonElement;
-    primary.click();
-    await fixture.whenStable();
-
-    expect(
-      intents.some(
-        (intent) => intent.type === 'login.next' && intent.clerkNumber === '12',
-      ),
-    ).toBe(true);
-    expect(
-      (fixture.nativeElement as HTMLElement).querySelector('.pos-login__title')
-        ?.textContent,
-    ).toContain('Enter Clerk Password');
-  });
-
-  it('should display session state from the host without calling a service', async () => {
-    fixture.componentRef.setInput('session', {
-      status: 'signedIn',
-      displayName: 'Alex Rivera',
-    });
-    await fixture.whenStable();
-
-    expect(
-      (fixture.nativeElement as HTMLElement).querySelector('.pos-login__status')
-        ?.textContent,
-    ).toContain('Signed in as Alex Rivera');
-  });
-
-  it('should not emit submit while session is busy', async () => {
-    const intents: PosLoginIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    fixture.componentRef.setInput('session', { status: 'busy' });
-    await fixture.whenStable();
-
-    const keys = Array.from(
-      (fixture.nativeElement as HTMLElement).querySelectorAll('.pos-login__key'),
-    ) as HTMLButtonElement[];
-    keys.find((button) => button.textContent?.trim() === '1')?.click();
-    const primary = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-login__primary',
-    ) as HTMLButtonElement;
-    primary.click();
-    await fixture.whenStable();
-
-    expect(intents.some((intent) => intent.type === 'login.submit')).toBe(
-      false,
-    );
-    expect(primary.disabled).toBe(true);
-  });
-});

package/src/lib/login/pos-login.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular-vite';
-
-import { PosLogin } from './pos-login';
-
-const meta: Meta<PosLogin> = {
-  title: 'Login',
-  component: PosLogin,
-  args: {
-    errorMessage: '',
-    session: { status: 'signedOut' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PosLogin>;
-
-export const Default: Story = {};
-
-export const Busy: Story = {
-  args: {
-    session: { status: 'busy' },
-  },
-};
-
-export const SignedIn: Story = {
-  args: {
-    session: { status: 'signedIn', displayName: 'Alex Rivera' },
-  },
-};
-
-export const Error: Story = {
-  args: {
-    errorMessage: 'Invalid clerk or password',
-  },
-};

package/src/lib/login/pos-login.ts

@@ -1,150 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-
-export type PosLoginIntent =
-  | { readonly type: 'login.key'; readonly key: string }
-  | { readonly type: 'login.backspace' }
-  | { readonly type: 'login.next'; readonly clerkNumber: string }
-  | { readonly type: 'login.submit'; readonly clerkNumber: string; readonly password: string }
-  | { readonly type: 'login.back' };
-
-/** Display-only login/session state from the host envelope — not an API DTO. */
-export type PosLoginSessionStatus = 'signedOut' | 'busy' | 'signedIn';
-
-export interface PosLoginSessionState {
-  readonly status: PosLoginSessionStatus;
-  readonly displayName?: string;
-}
-
-const DEFAULT_SESSION: PosLoginSessionState = { status: 'signedOut' };
-
-type LoginStage = 'clerkNumber' | 'password';
-
-const KEYPAD_ROWS: readonly (readonly string[])[] = [
-  ['1', '2', '3'],
-  ['4', '5', '6'],
-  ['7', '8', '9'],
-  ['0', '.', '←'],
-];
-
-@Component({
-  selector: 'pos-login',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './pos-login.html',
-  styleUrl: './pos-login.scss',
-  host: {
-    class: 'pos-login',
-  },
-})
-export class PosLogin {
-  readonly errorMessage = input('');
-  readonly session = input<PosLoginSessionState>(DEFAULT_SESSION);
-
-  readonly titleClerkNumber = input('Enter Clerk Number');
-  readonly titleClerkPassword = input('Enter Clerk Password');
-  readonly nextLabel = input('Next');
-  readonly loginLabel = input('Login');
-
-  readonly action = output<PosLoginIntent>();
-
-  protected readonly keypadRows = KEYPAD_ROWS;
-  protected readonly inputValue = signal('');
-  protected readonly stage = signal<LoginStage>('clerkNumber');
-  private readonly clerkNumber = signal('');
-
-  protected readonly title = computed(() =>
-    this.stage() === 'clerkNumber'
-      ? this.titleClerkNumber()
-      : this.titleClerkPassword(),
-  );
-
-  protected readonly maskInput = computed(() => this.stage() === 'password');
-
-  protected readonly showBack = computed(() => this.stage() === 'password');
-
-  protected readonly primaryLabel = computed(() =>
-    this.stage() === 'password' ? this.loginLabel() : this.nextLabel(),
-  );
-
-  protected readonly primaryEnabled = computed(
-    () => this.inputValue().length > 0 && !this.interactionLocked(),
-  );
-
-  protected readonly interactionLocked = computed(() => {
-    const status = this.session().status;
-    return status === 'busy' || status === 'signedIn';
-  });
-
-  protected readonly sessionStatusText = computed(() => {
-    const current = this.session();
-    if (current.status === 'busy') {
-      return 'Signing in…';
-    }
-    if (current.status === 'signedIn') {
-      return current.displayName
-        ? `Signed in as ${current.displayName}`
-        : 'Signed in';
-    }
-    return '';
-  });
-
-  protected onKeypad(key: string): void {
-    if (this.interactionLocked()) {
-      return;
-    }
-
-    if (key === '←') {
-      this.inputValue.update((value) => value.slice(0, -1));
-      this.action.emit({ type: 'login.backspace' });
-      return;
-    }
-
-    if (this.inputValue().length >= 12) {
-      return;
-    }
-
-    this.inputValue.update((value) => value + key);
-    this.action.emit({ type: 'login.key', key });
-  }
-
-  protected onPrimary(): void {
-    if (this.interactionLocked()) {
-      return;
-    }
-
-    const value = this.inputValue();
-    if (!value) {
-      return;
-    }
-
-    if (this.stage() === 'clerkNumber') {
-      this.clerkNumber.set(value);
-      this.inputValue.set('');
-      this.stage.set('password');
-      this.action.emit({ type: 'login.next', clerkNumber: value });
-      return;
-    }
-
-    this.action.emit({
-      type: 'login.submit',
-      clerkNumber: this.clerkNumber(),
-      password: value,
-    });
-  }
-
-  protected onBack(): void {
-    if (this.interactionLocked()) {
-      return;
-    }
-
-    this.inputValue.set(this.clerkNumber());
-    this.stage.set('clerkNumber');
-    this.action.emit({ type: 'login.back' });
-  }
-}

package/src/lib/receipt/pos-receipt.html

@@ -1,116 +0,0 @@
-<section
-  class="pos-receipt__panel"
-  [attr.aria-busy]="disabled() || !document().receiptReady ? true : null"
->
-  <header class="pos-receipt__header">
-    <div class="pos-receipt__heading">
-      <p class="pos-receipt__kicker">Adaptive POS</p>
-      <h2 class="pos-receipt__title">{{ title() }}</h2>
-    </div>
-    @if (hasDocumentNumber()) {
-      <p class="pos-receipt__number" aria-label="Document number">
-        {{ document().number }}
-      </p>
-    }
-  </header>
-
-  <p class="pos-receipt__status" aria-live="polite">{{ statusText() }}</p>
-
-  <ul class="pos-receipt__lines" aria-label="Receipt lines">
-    @if (!hasLines()) {
-      <li class="pos-receipt__empty">{{ emptyMessage() }}</li>
-    } @else {
-      @for (line of lines(); track line.lineId) {
-        <li>
-          <article
-            class="pos-receipt__line"
-            [class.pos-receipt__line--voided]="line.struckThrough"
-          >
-            <div class="pos-receipt__line-info">
-              <h3 class="pos-receipt__line-name">{{ line.name }}</h3>
-              <p class="pos-receipt__line-sku">{{ line.sku }}</p>
-              @if (line.struckThrough) {
-                <p class="pos-receipt__line-voided">Voided</p>
-              }
-            </div>
-            <p class="pos-receipt__qty">{{ line.qty }}</p>
-            <div class="pos-receipt__line-prices">
-              <p class="pos-receipt__unit-price">
-                {{ formatMoney(line.unitPrice) }}
-              </p>
-              <p class="pos-receipt__line-total">
-                {{ formatMoney(line.lineTotal) }}
-              </p>
-            </div>
-          </article>
-        </li>
-      }
-    }
-  </ul>
-
-  <div class="pos-receipt__summary">
-    <dl class="pos-receipt__totals" aria-live="polite">
-      <div class="pos-receipt__row">
-        <dt>Gross</dt>
-        <dd>{{ formatMoney(totals().gross) }}</dd>
-      </div>
-      <div class="pos-receipt__row">
-        <dt>Net</dt>
-        <dd>{{ formatMoney(totals().net) }}</dd>
-      </div>
-      <div class="pos-receipt__row">
-        <dt>VAT</dt>
-        <dd>{{ formatMoney(totals().vat) }}</dd>
-      </div>
-      <div class="pos-receipt__row">
-        <dt>Discount</dt>
-        <dd>{{ formatMoney(totals().discount) }}</dd>
-      </div>
-      <div class="pos-receipt__row pos-receipt__row--due">
-        <dt>Due</dt>
-        <dd>{{ formatMoney(totals().due) }}</dd>
-      </div>
-    </dl>
-
-    @if (hasPayments()) {
-      <section class="pos-receipt__tender">
-        <h3 class="pos-receipt__tender-title">{{ tenderLabel() }}</h3>
-        <ul class="pos-receipt__payments">
-          @for (payment of payments(); track $index) {
-            <li class="pos-receipt__payment">
-              <header class="pos-receipt__payment-header">
-                <p class="pos-receipt__payment-tender">{{ payment.tender }}</p>
-                <p class="pos-receipt__payment-state">{{ payment.state }}</p>
-              </header>
-              <dl class="pos-receipt__payment-amounts">
-                <div class="pos-receipt__row">
-                  <dt>{{ amountLabel() }}</dt>
-                  <dd>{{ formatMoney(payment.amount) }}</dd>
-                </div>
-                <div class="pos-receipt__row">
-                  <dt>{{ tenderedLabel() }}</dt>
-                  <dd>{{ formatMoney(payment.tendered) }}</dd>
-                </div>
-                <div class="pos-receipt__row pos-receipt__row--change">
-                  <dt>{{ changeLabel() }}</dt>
-                  <dd>{{ formatMoney(payment.change) }}</dd>
-                </div>
-              </dl>
-            </li>
-          }
-        </ul>
-      </section>
-    }
-  </div>
-
-  <div class="pos-receipt__actions">
-    <button
-      type="button"
-      class="pos-receipt__new-sale"
-      [disabled]="!canStartNewSale()"
-      (click)="onNewSale()"
-    >
-      {{ newSaleLabel() }}
-    </button>
-  </div>
-</section>