@retalia/pos-components 0.0.4 → 0.0.5

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

@@ -1,142 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-
-export type PosBasketIntent =
-  | {
-      readonly type: 'basket.changeQuantity';
-      readonly lineId: number;
-      readonly qty: number;
-    }
-  | { readonly type: 'basket.voidLine'; readonly lineId: number }
-  | { readonly type: 'basket.clear' };
-
-/** Display-only VAT from the host envelope — not calculated here. */
-export interface PosBasketVat {
-  readonly rate: number;
-  readonly amount: number;
-  readonly included: boolean;
-}
-
-/** Display-only basket line from the host envelope — not an API DTO. */
-export interface PosBasketLine {
-  readonly lineId: number;
-  readonly sku: string;
-  readonly name: string;
-  readonly qty: number;
-  readonly unitPrice: number;
-  readonly lineTotal: number;
-  readonly vat: PosBasketVat;
-  readonly struckThrough: boolean;
-}
-
-/** Display-only totals from the host envelope — not calculated here. */
-export interface PosBasketTotals {
-  readonly gross: number;
-  readonly net: number;
-  readonly vat: number;
-  readonly discount: number;
-  readonly due: number;
-  readonly currency: string;
-}
-
-const EMPTY_TOTALS: PosBasketTotals = {
-  gross: 0,
-  net: 0,
-  vat: 0,
-  discount: 0,
-  due: 0,
-  currency: 'EUR',
-};
-
-@Component({
-  selector: 'pos-basket',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './pos-basket.html',
-  styleUrl: './pos-basket.scss',
-  host: {
-    class: 'pos-basket',
-  },
-})
-export class PosBasket {
-  readonly lines = input<readonly PosBasketLine[]>([]);
-  readonly totals = input<PosBasketTotals>(EMPTY_TOTALS);
-  readonly disabled = input(false);
-
-  readonly title = input('Basket');
-  readonly emptyMessage = input('Basket is empty');
-  readonly clearLabel = input('Clear basket');
-
-  readonly action = output<PosBasketIntent>();
-
-  protected readonly hasLines = computed(() => this.lines().length > 0);
-
-  protected readonly canClear = computed(
-    () => this.hasLines() && !this.disabled(),
-  );
-
-  protected formatMoney(amount: number): string {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: this.totals().currency || 'EUR',
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(amount);
-  }
-
-  protected canChangeQuantity(line: PosBasketLine): boolean {
-    return !this.disabled() && !line.struckThrough;
-  }
-
-  protected canDecrement(line: PosBasketLine): boolean {
-    return this.canChangeQuantity(line) && line.qty > 1;
-  }
-
-  protected canVoid(line: PosBasketLine): boolean {
-    return this.canChangeQuantity(line);
-  }
-
-  protected onIncrement(line: PosBasketLine): void {
-    if (!this.canChangeQuantity(line)) {
-      return;
-    }
-
-    this.action.emit({
-      type: 'basket.changeQuantity',
-      lineId: line.lineId,
-      qty: line.qty + 1,
-    });
-  }
-
-  protected onDecrement(line: PosBasketLine): void {
-    if (!this.canDecrement(line)) {
-      return;
-    }
-
-    this.action.emit({
-      type: 'basket.changeQuantity',
-      lineId: line.lineId,
-      qty: line.qty - 1,
-    });
-  }
-
-  protected onVoid(line: PosBasketLine): void {
-    if (!this.canVoid(line)) {
-      return;
-    }
-
-    this.action.emit({ type: 'basket.voidLine', lineId: line.lineId });
-  }
-
-  protected onClear(): void {
-    if (!this.canClear()) {
-      return;
-    }
-
-    this.action.emit({ type: 'basket.clear' });
-  }
-}

package/src/lib/item-entry/pos-item-entry.html

@@ -1,41 +0,0 @@
-<section
-  class="pos-item-entry__panel"
-  [attr.aria-busy]="disabled() ? true : null"
->
-  <form class="pos-item-entry__form" (submit)="onSubmit($event)">
-    <label class="pos-item-entry__field">
-      <span class="pos-item-entry__label">{{ label() }}</span>
-      <input
-        #itemInput
-        class="pos-item-entry__input"
-        type="text"
-        name="itemReference"
-        autocomplete="off"
-        spellcheck="false"
-        [attr.autocorrect]="'off'"
-        [attr.autocapitalize]="'none'"
-        enterkeyhint="done"
-        [placeholder]="placeholder()"
-        [value]="reference()"
-        [disabled]="disabled()"
-        [attr.aria-invalid]="errorMessage() ? true : null"
-        (input)="onInput($event)"
-      />
-    </label>
-
-    <button
-      type="submit"
-      class="pos-item-entry__add"
-      [class.pos-item-entry__add--disabled]="!canSubmit()"
-      [disabled]="!canSubmit()"
-    >
-      {{ addLabel() }}
-    </button>
-  </form>
-
-  <div class="pos-item-entry__status" aria-live="polite">
-    @if (errorMessage()) {
-      <p class="pos-item-entry__error">{{ errorMessage() }}</p>
-    }
-  </div>
-</section>

package/src/lib/item-entry/pos-item-entry.scss

@@ -1,145 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  color: var(--pos-color-text);
-  font-family: var(--pos-font-family);
-  font-size: var(--pos-font-size-md);
-}
-
-.pos-item-entry__panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pos-space-sm);
-  padding: var(--pos-space-lg);
-  border: 1px solid var(--pos-color-border);
-  border-radius: var(--pos-radius-lg);
-  background: var(--pos-color-panel);
-}
-
-.pos-item-entry__form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pos-space-sm);
-}
-
-.pos-item-entry__field {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: var(--pos-space-xs);
-  min-width: 0;
-}
-
-.pos-item-entry__label {
-  color: var(--pos-color-text-muted);
-  font-size: var(--pos-font-size-sm);
-  font-weight: var(--pos-font-weight-semibold);
-}
-
-.pos-item-entry__input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--pos-button-min-height);
-  margin: 0;
-  padding: 0 var(--pos-space-md);
-  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-family: var(--pos-font-family-display);
-  font-size: var(--pos-font-size-lg);
-  font-weight: var(--pos-font-weight-semibold);
-  outline: none;
-}
-
-.pos-item-entry__input::placeholder {
-  color: var(--pos-color-text-muted);
-  font-weight: var(--pos-font-weight-semibold);
-  opacity: 0.8;
-}
-
-.pos-item-entry__input:disabled {
-  cursor: not-allowed;
-  background: var(--pos-color-disabled);
-  color: var(--pos-color-on-disabled);
-}
-
-.pos-item-entry__input[aria-invalid='true'] {
-  border-color: var(--pos-color-danger);
-}
-
-.pos-item-entry__add {
-  flex: 0 0 auto;
-  min-height: var(--pos-button-min-height);
-  padding: 0 var(--pos-space-xl);
-  border: 0;
-  border-radius: var(--pos-radius-md);
-  background: var(--pos-color-primary);
-  color: var(--pos-color-on-primary);
-  font: inherit;
-  font-weight: var(--pos-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.pos-item-entry__add:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-.pos-item-entry__add--disabled,
-.pos-item-entry__add:disabled {
-  background: var(--pos-color-disabled);
-  color: var(--pos-color-on-disabled);
-  cursor: not-allowed;
-  transform: none;
-}
-
-.pos-item-entry__input:focus-visible {
-  border-color: var(--pos-color-primary);
-  outline: 2px solid var(--pos-color-primary);
-  outline-offset: 2px;
-}
-
-.pos-item-entry__add:focus-visible {
-  outline: 2px solid var(--pos-color-primary);
-  outline-offset: 2px;
-}
-
-.pos-item-entry__status {
-  min-height: 0;
-}
-
-.pos-item-entry__error {
-  margin: 0;
-  padding: var(--pos-space-sm) var(--pos-space-md);
-  border-left: 3px solid var(--pos-color-danger);
-  background: color-mix(in srgb, var(--pos-color-danger) 12%, transparent);
-  color: var(--pos-color-danger);
-  font-size: var(--pos-font-size-sm);
-  font-weight: var(--pos-font-weight-semibold);
-}
-
-@media (min-width: 768px) {
-  .pos-item-entry__panel {
-    padding: var(--pos-space-xl);
-  }
-
-  .pos-item-entry__form {
-    flex-direction: row;
-    align-items: flex-end;
-    gap: var(--pos-space-md);
-  }
-
-  .pos-item-entry__add {
-    min-width: 7.5rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pos-item-entry__add {
-    transform: none;
-  }
-}

package/src/lib/item-entry/pos-item-entry.spec.ts

@@ -1,123 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PosItemEntry, PosItemEntryIntent } from './pos-item-entry';
-
-describe('PosItemEntry', () => {
-  let fixture: ComponentFixture<PosItemEntry>;
-  let component: PosItemEntry;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PosItemEntry],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(PosItemEntry);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  function typeReference(value: string): void {
-    const input = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-item-entry__input',
-    ) as HTMLInputElement;
-    input.value = value;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-  }
-
-  it('should render a scan-or-type field by default', () => {
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.pos-item-entry__label')?.textContent).toContain('Item');
-    expect(
-      (compiled.querySelector('.pos-item-entry__input') as HTMLInputElement).placeholder,
-    ).toBe('Scan or enter item');
-    expect(
-      (compiled.querySelector('.pos-item-entry__add') as HTMLButtonElement).disabled,
-    ).toBe(true);
-  });
-
-  it('should emit item-entry with the typed reference and then clear the field', async () => {
-    const intents: PosItemEntryIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    typeReference('SKU-001');
-    await fixture.whenStable();
-
-    const add = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-item-entry__add',
-    ) as HTMLButtonElement;
-    add.click();
-    await fixture.whenStable();
-
-    expect(intents).toEqual([{ type: 'itemEntry.submit', reference: 'SKU-001' }]);
-    expect(
-      (fixture.nativeElement as HTMLElement).querySelector(
-        '.pos-item-entry__input',
-      ) as HTMLInputElement,
-    ).toHaveProperty('value', '');
-  });
-
-  it('should emit item-entry when a scanner (or cashier) submits the form with Enter', async () => {
-    const intents: PosItemEntryIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    typeReference('5012345678900');
-    await fixture.whenStable();
-
-    const form = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-item-entry__form',
-    ) as HTMLFormElement;
-    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-    await fixture.whenStable();
-
-    expect(intents).toEqual([{ type: 'itemEntry.submit', reference: '5012345678900' }]);
-  });
-
-  it('should trim the reference and ignore empty or whitespace-only input', async () => {
-    const intents: PosItemEntryIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    typeReference('   ');
-    await fixture.whenStable();
-
-    const form = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-item-entry__form',
-    ) as HTMLFormElement;
-    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-    await fixture.whenStable();
-
-    expect(intents).toEqual([]);
-
-    typeReference('  SKU-014  ');
-    await fixture.whenStable();
-    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-    await fixture.whenStable();
-
-    expect(intents).toEqual([{ type: 'itemEntry.submit', reference: 'SKU-014' }]);
-  });
-
-  it('should not emit while disabled, and should show host error text as given', async () => {
-    const intents: PosItemEntryIntent[] = [];
-    component.action.subscribe((intent) => intents.push(intent));
-
-    fixture.componentRef.setInput('disabled', true);
-    fixture.componentRef.setInput('errorMessage', 'Item not found');
-    await fixture.whenStable();
-
-    typeReference('SKU-001');
-    const add = (fixture.nativeElement as HTMLElement).querySelector(
-      '.pos-item-entry__add',
-    ) as HTMLButtonElement;
-    add.click();
-    await fixture.whenStable();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(add.disabled).toBe(true);
-    expect(
-      (compiled.querySelector('.pos-item-entry__input') as HTMLInputElement).disabled,
-    ).toBe(true);
-    expect(compiled.querySelector('.pos-item-entry__error')?.textContent).toContain(
-      'Item not found',
-    );
-    expect(intents).toEqual([]);
-  });
-});

package/src/lib/item-entry/pos-item-entry.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular-vite';
-
-import { PosItemEntry } from './pos-item-entry';
-
-const meta: Meta<PosItemEntry> = {
-  title: 'Item entry',
-  component: PosItemEntry,
-  args: {
-    disabled: false,
-    errorMessage: '',
-    autofocus: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PosItemEntry>;
-
-export const Default: Story = {};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    errorMessage: 'Item not found',
-  },
-};

package/src/lib/item-entry/pos-item-entry.ts

@@ -1,81 +0,0 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  input,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
-
-export type PosItemEntryIntent =
-  | { readonly type: 'itemEntry.submit'; readonly reference: string };
-
-@Component({
-  selector: 'pos-item-entry',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './pos-item-entry.html',
-  styleUrl: './pos-item-entry.scss',
-  host: {
-    class: 'pos-item-entry',
-  },
-})
-export class PosItemEntry {
-  readonly disabled = input(false);
-  readonly errorMessage = input('');
-  readonly autofocus = input(true);
-
-  readonly label = input('Item');
-  readonly placeholder = input('Scan or enter item');
-  readonly addLabel = input('Add');
-
-  readonly action = output<PosItemEntryIntent>();
-
-  private readonly itemInput = viewChild<ElementRef<HTMLInputElement>>('itemInput');
-
-  protected readonly reference = signal('');
-
-  protected readonly canSubmit = computed(
-    () => this.reference().trim().length > 0 && !this.disabled(),
-  );
-
-  constructor() {
-    afterNextRender(() => {
-      if (this.autofocus() && !this.disabled()) {
-        this.focusInput();
-      }
-    });
-  }
-
-  protected onInput(event: Event): void {
-    const target = event.target;
-    if (!(target instanceof HTMLInputElement)) {
-      return;
-    }
-
-    this.reference.set(target.value);
-  }
-
-  protected onSubmit(event: Event): void {
-    event.preventDefault();
-
-    if (this.disabled()) {
-      return;
-    }
-
-    const reference = this.reference().trim();
-    if (!reference) {
-      return;
-    }
-
-    this.action.emit({ type: 'itemEntry.submit', reference });
-    this.reference.set('');
-    this.focusInput();
-  }
-
-  private focusInput(): void {
-    this.itemInput()?.nativeElement.focus();
-  }
-}

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

@@ -1,82 +0,0 @@
-<section class="pos-login__panel" [attr.aria-busy]="session().status === 'busy' ? true : null">
-  <header class="pos-login__header">
-    <p class="pos-login__kicker">Adaptive POS</p>
-    <h1 class="pos-login__title">{{ title() }}</h1>
-  </header>
-
-  <div class="pos-login__status" aria-live="polite">
-    @if (sessionStatusText()) {
-      <p>{{ sessionStatusText() }}</p>
-    }
-    @if (errorMessage()) {
-      <p class="pos-login__error">{{ errorMessage() }}</p>
-    }
-  </div>
-
-  <div class="pos-login__body">
-    <div class="pos-login__display">
-      <input
-        class="pos-login__input"
-        [attr.type]="maskInput() ? 'password' : 'text'"
-        [value]="inputValue()"
-        maxlength="12"
-        readonly
-        tabindex="-1"
-        placeholder="· · · ·"
-        (keydown)="$event.preventDefault()"
-        aria-label="Login code"
-      />
-    </div>
-
-    <div class="pos-login__keypad" role="group" aria-label="Keypad">
-      @for (row of keypadRows; track $index) {
-        <div class="pos-login__keypad-row">
-          @for (key of row; track key) {
-            <button
-              type="button"
-              class="pos-login__key"
-              [class.pos-login__key--action]="key === '←' || key === '.'"
-              [disabled]="interactionLocked()"
-              (click)="onKeypad(key)"
-            >
-              {{ key }}
-            </button>
-          }
-        </div>
-      }
-    </div>
-
-    <div class="pos-login__actions">
-      @if (showBack()) {
-        <button
-          type="button"
-          class="pos-login__back"
-          aria-label="Back"
-          [disabled]="interactionLocked()"
-          (click)="onBack()"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <path
-              d="M15 6 9 12l6 6"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          <span>Back</span>
-        </button>
-      }
-
-      <button
-        type="button"
-        class="pos-login__primary"
-        [class.pos-login__primary--disabled]="!primaryEnabled()"
-        [disabled]="!primaryEnabled()"
-        (click)="onPrimary()"
-      >
-        {{ primaryLabel() }}
-      </button>
-    </div>
-  </div>
-</section>