@retalia/pos-components 0.0.4 → 0.0.5

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular-vite';
-
-import { PosTender } from './pos-tender';
-
-const meta: Meta<PosTender> = {
-  title: 'Tender',
-  component: PosTender,
-  args: {
-    amountDue: 12,
-    changeDue: null,
-    currency: 'EUR',
-    disabled: false,
-    errorMessage: '',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PosTender>;
-
-export const EnterCash: Story = {};
-
-export const Busy: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const ChangeDueFromEnvelope: Story = {
-  args: {
-    amountDue: 12,
-    changeDue: 99,
-  },
-};
-
-export const ExactTenderZeroChange: Story = {
-  args: {
-    amountDue: 12,
-    changeDue: 0,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    errorMessage: 'Tender was declined',
-  },
-};

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

@@ -1,154 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-
-export type PosTenderIntent =
-  | {
-      readonly type: 'tender.cash';
-      readonly amount: number;
-    };
-
-const KEYPAD_ROWS: readonly (readonly string[])[] = [
-  ['1', '2', '3'],
-  ['4', '5', '6'],
-  ['7', '8', '9'],
-  ['0', '.', '←'],
-];
-
-const MAX_WHOLE_DIGITS = 8;
-
-function parseCashAmount(raw: string): number | null {
-  if (!raw) {
-    return null;
-  }
-
-  const amount = Number(raw);
-  if (!Number.isFinite(amount) || amount <= 0) {
-    return null;
-  }
-
-  return Math.round(amount * 100) / 100;
-}
-
-function appendCashKey(current: string, key: string): string {
-  if (key === '←') {
-    return current.slice(0, -1);
-  }
-
-  if (key === '.') {
-    if (current.includes('.')) {
-      return current;
-    }
-    return current === '' ? '0.' : `${current}.`;
-  }
-
-  if (!/^\d$/.test(key)) {
-    return current;
-  }
-
-  if (current === '0') {
-    return key;
-  }
-
-  const [whole = '', fraction] = current.split('.');
-  if (fraction !== undefined) {
-    if (fraction.length >= 2) {
-      return current;
-    }
-    return current + key;
-  }
-
-  const significant = whole.replace(/^0+/, '');
-  if (significant.length >= MAX_WHOLE_DIGITS) {
-    return current;
-  }
-
-  return current + key;
-}
-
-@Component({
-  selector: 'pos-tender',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './pos-tender.html',
-  styleUrl: './pos-tender.scss',
-  host: {
-    class: 'pos-tender',
-  },
-})
-export class PosTender {
-  /** Display-only amount due from the host envelope — not calculated here. */
-  readonly amountDue = input(0);
-  /** Display-only change due from the host envelope — not calculated here. */
-  readonly changeDue = input<number | null>(null);
-  readonly currency = input('EUR');
-  readonly disabled = input(false);
-  readonly errorMessage = input('');
-
-  readonly title = input('Cash tender');
-  readonly amountDueLabel = input('Amount due');
-  readonly tenderedLabel = input('Amount tendered');
-  readonly changeDueLabel = input('Change due');
-  readonly tenderLabel = input('Tender cash');
-  readonly processingLabel = input('Processing tender…');
-
-  readonly action = output<PosTenderIntent>();
-
-  protected readonly keypadRows = KEYPAD_ROWS;
-  protected readonly amountInput = signal('');
-
-  protected readonly parsedAmount = computed(() =>
-    parseCashAmount(this.amountInput()),
-  );
-
-  protected readonly canTender = computed(
-    () => this.parsedAmount() !== null && !this.disabled(),
-  );
-
-  protected readonly hasChangeDue = computed(() => this.changeDue() !== null);
-
-  protected readonly displayTendered = computed(
-    () => this.amountInput() || '0',
-  );
-
-  protected readonly statusText = computed(() => {
-    if (this.disabled() && !this.hasChangeDue()) {
-      return this.processingLabel();
-    }
-    return '';
-  });
-
-  protected formatMoney(amount: number): string {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: this.currency() || 'EUR',
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(amount);
-  }
-
-  protected onKeypad(key: string): void {
-    if (this.disabled()) {
-      return;
-    }
-
-    this.amountInput.update((value) => appendCashKey(value, key));
-  }
-
-  protected onTender(): void {
-    if (!this.canTender()) {
-      return;
-    }
-
-    const amount = this.parsedAmount();
-    if (amount === null) {
-      return;
-    }
-
-    this.action.emit({ type: 'tender.cash', amount });
-  }
-}

package/src/lib/tokens/pos-theme-css.spec.ts

@@ -1,75 +0,0 @@
-import {
-  POS_TOKEN_CATALOG,
-  POS_TOKEN_DEFAULTS,
-} from './pos-token-catalog';
-import {
-  normalizePosTokenValue,
-  overridesFromThemeValues,
-  parseCssHex,
-  parsePosThemeCss,
-  resolvedPosTheme,
-  serializePosThemeCss,
-} from './pos-theme-css';
-
-describe('pos-theme-css', () => {
-  it('parses known --pos-* declarations from a theme file', () => {
-    const parsed = parsePosThemeCss(`
-      :root {
-        --pos-color-primary: #111111;
-        --pos-font-size-md: 1rem;
-        --unknown-token: red;
-      }
-    `);
-
-    expect(parsed).toEqual({
-      '--pos-color-primary': '#111111',
-      '--pos-font-size-md': '1rem',
-    });
-  });
-
-  it('serializes a complete :root theme without mutating defaults', () => {
-    const css = serializePosThemeCss({
-      ...POS_TOKEN_DEFAULTS,
-      '--pos-color-primary': '#111111',
-    });
-
-    expect(css).toContain(':root {');
-    expect(css).toContain('--pos-color-primary: #111111;');
-    expect(css).toContain('--pos-color-success: #16dbcc;');
-    expect(POS_TOKEN_DEFAULTS['--pos-color-primary']).toBe('#c9b5f0');
-    expect(POS_TOKEN_CATALOG.find((token) => token.variable === '--pos-color-primary')?.defaultValue).toBe(
-      '#c9b5f0',
-    );
-  });
-
-  it('round-trips every catalog token through serialize and parse', () => {
-    const css = serializePosThemeCss(POS_TOKEN_DEFAULTS);
-    const parsed = parsePosThemeCss(css);
-
-    for (const token of POS_TOKEN_CATALOG) {
-      expect(parsed[token.variable]).toBe(token.defaultValue);
-    }
-  });
-
-  it('keeps only values that differ from package defaults as overrides', () => {
-    expect(
-      overridesFromThemeValues({
-        '--pos-color-primary': '#111111',
-        '--pos-color-success': '#16dbcc',
-      }),
-    ).toEqual({
-      '--pos-color-primary': '#111111',
-    });
-  });
-
-  it('resolves overrides on top of package defaults', () => {
-    const resolved = resolvedPosTheme({ '--pos-radius-md': '20px' });
-    expect(resolved['--pos-radius-md']).toBe('20px');
-    expect(resolved['--pos-radius-sm']).toBe('4px');
-  });
-
-  it('normalizes short hex colors', () => {
-    expect(parseCssHex('#abc')).toBe('#aabbcc');
-    expect(normalizePosTokenValue('color', '#ABC')).toBe('#aabbcc');
-  });
-});

package/src/lib/tokens/pos-theme-css.ts

@@ -1,123 +0,0 @@
-import {
-  POS_TOKEN_BY_VARIABLE,
-  POS_TOKEN_CATALOG,
-  POS_TOKEN_DEFAULTS,
-  type PosTokenKind,
-} from './pos-token-catalog';
-
-const TOKEN_DECL = /(--pos-[a-z0-9-]+)\s*:\s*([^;}{]+)/gi;
-
-export const POS_THEME_CSS_FILENAME = 'pos-theme.css';
-
-const THEME_CSS_HEADER = `/**
- * Adaptive POS theme
- * Generated by <pos-tokens>. Load after @retalia/pos-components styles.
- * Package defaults are unchanged; this file only overrides --pos-* on :root.
- */`;
-
-export function normalizePosTokenValue(
-  kind: PosTokenKind,
-  value: string,
-): string {
-  const trimmed = value.trim().replace(/\/\*[\s\S]*?\*\//g, '').trim();
-  if (!trimmed) {
-    return '';
-  }
-
-  if (kind === 'color') {
-    const hex = parseCssHex(trimmed);
-    if (hex) {
-      return hex;
-    }
-  }
-
-  return trimmed.replace(/\s*!important$/i, '').trim();
-}
-
-export function parseCssHex(value: string): string | null {
-  const trimmed = value.trim();
-  const short = /^#([0-9a-f]{3})$/i.exec(trimmed)?.[1];
-  if (short && short.length === 3) {
-    const [r, g, b] = short;
-    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
-  }
-
-  if (/^#[0-9a-f]{6}$/i.test(trimmed)) {
-    return trimmed.toLowerCase();
-  }
-
-  return null;
-}
-
-export function parsePosThemeCss(css: string): Readonly<Record<string, string>> {
-  const result: Record<string, string> = {};
-
-  for (const match of css.matchAll(TOKEN_DECL)) {
-    const variable = match[1];
-    const token = POS_TOKEN_BY_VARIABLE.get(variable);
-    if (!token) {
-      continue;
-    }
-
-    const value = normalizePosTokenValue(token.kind, match[2] ?? '');
-    if (value) {
-      result[variable] = value;
-    }
-  }
-
-  return result;
-}
-
-export function resolvedPosTheme(
-  overrides: Readonly<Record<string, string>>,
-): Readonly<Record<string, string>> {
-  const resolved: Record<string, string> = { ...POS_TOKEN_DEFAULTS };
-  for (const [variable, value] of Object.entries(overrides)) {
-    if (variable in POS_TOKEN_DEFAULTS && value.trim()) {
-      resolved[variable] = value;
-    }
-  }
-  return resolved;
-}
-
-export function overridesFromThemeValues(
-  values: Readonly<Record<string, string>>,
-): Record<string, string> {
-  const overrides: Record<string, string> = {};
-  for (const [variable, value] of Object.entries(values)) {
-    const token = POS_TOKEN_BY_VARIABLE.get(variable);
-    if (!token) {
-      continue;
-    }
-
-    const normalized = normalizePosTokenValue(token.kind, value);
-    if (normalized && normalized !== token.defaultValue) {
-      overrides[variable] = normalized;
-    }
-  }
-  return overrides;
-}
-
-export function serializePosThemeCss(
-  values: Readonly<Record<string, string>>,
-): string {
-  const lines = POS_TOKEN_CATALOG.map((token) => {
-    const value = values[token.variable] ?? token.defaultValue;
-    return `  ${token.variable}: ${value};`;
-  });
-
-  return `${THEME_CSS_HEADER}\n:root {\n${lines.join('\n')}\n}\n`;
-}
-
-export function downloadTextFile(filename: string, contents: string): void {
-  const blob = new Blob([contents], { type: 'text/css;charset=utf-8' });
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.rel = 'noopener';
-  document.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-  URL.revokeObjectURL(url);
-}