@retalia/pos-components 0.0.3 → 0.0.4

package/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const { defineConfig } = require('eslint/config');
+const rootConfig = require('../../eslint.config.js');
+
+module.exports = defineConfig([
+  ...rootConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'pos',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'pos',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    rules: {},
+  },
+]);

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/pos-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "src/styles",
+      "output": "styles"
+    }
+  ]
+}

package/package.json

@@ -1,31 +1,17 @@
-{
-  "name": "@retalia/pos-components",
-  "version": "0.0.3",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "style": "./styles/styles.css",
-  "module": "fesm2022/retalia-pos-components.mjs",
-  "typings": "types/retalia-pos-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/retalia-pos-components.d.ts",
-      "default": "./fesm2022/retalia-pos-components.mjs"
-    }
-  },
-  "type": "module"
-}
+{
+  "name": "@retalia/pos-components",
+  "version": "0.0.4",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": ["**/*.css"],
+  "style": "./styles/styles.css"
+}

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

@@ -0,0 +1,124 @@
+<section
+  class="pos-basket__panel"
+  [attr.aria-busy]="disabled() ? true : null"
+>
+  <header class="pos-basket__header">
+    <h2 class="pos-basket__title">{{ title() }}</h2>
+    <p class="pos-basket__count">
+      {{ lines().length }}
+      {{ lines().length === 1 ? 'line' : 'lines' }}
+    </p>
+  </header>
+
+  <ul class="pos-basket__lines" aria-label="Basket lines">
+    @if (!hasLines()) {
+      <li class="pos-basket__empty">{{ emptyMessage() }}</li>
+    } @else {
+      @for (line of lines(); track line.lineId) {
+        <li>
+          <article
+            class="pos-basket__line"
+            [class.pos-basket__line--voided]="line.struckThrough"
+          >
+            <div class="pos-basket__line-info">
+              <h3 class="pos-basket__line-name">{{ line.name }}</h3>
+              <p class="pos-basket__line-sku">{{ line.sku }}</p>
+              @if (line.struckThrough) {
+                <p class="pos-basket__line-voided">Voided</p>
+              }
+            </div>
+
+            <div
+              class="pos-basket__stepper"
+              role="group"
+              [attr.aria-label]="'Quantity for ' + line.name"
+            >
+              <button
+                type="button"
+                class="pos-basket__qty-btn"
+                aria-label="Decrease quantity"
+                [disabled]="!canDecrement(line)"
+                (click)="onDecrement(line)"
+              >
+                −
+              </button>
+              <span class="pos-basket__qty" aria-live="polite">{{ line.qty }}</span>
+              <button
+                type="button"
+                class="pos-basket__qty-btn"
+                aria-label="Increase quantity"
+                [disabled]="!canChangeQuantity(line)"
+                (click)="onIncrement(line)"
+              >
+                +
+              </button>
+            </div>
+
+            <div class="pos-basket__line-prices">
+              <p class="pos-basket__unit-price">{{ formatMoney(line.unitPrice) }}</p>
+              <p class="pos-basket__line-total">{{ formatMoney(line.lineTotal) }}</p>
+            </div>
+
+            <button
+              type="button"
+              class="pos-basket__void"
+              [attr.aria-label]="'Void ' + line.name"
+              [disabled]="!canVoid(line)"
+              (click)="onVoid(line)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M6 6l12 12M18 6 6 18"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </article>
+        </li>
+      }
+    }
+  </ul>
+
+  <footer class="pos-basket__footer">
+    <dl class="pos-basket__totals" aria-live="polite">
+      <div class="pos-basket__total-row">
+        <dt>Gross</dt>
+        <dd>{{ formatMoney(totals().gross) }}</dd>
+      </div>
+      <div class="pos-basket__total-row">
+        <dt>Net</dt>
+        <dd>{{ formatMoney(totals().net) }}</dd>
+      </div>
+      <div class="pos-basket__total-row">
+        <dt>VAT</dt>
+        <dd>{{ formatMoney(totals().vat) }}</dd>
+      </div>
+      <div class="pos-basket__total-row">
+        <dt>Discount</dt>
+        <dd>{{ formatMoney(totals().discount) }}</dd>
+      </div>
+      <div class="pos-basket__total-row pos-basket__total-row--due">
+        <dt>Due</dt>
+        <dd>{{ formatMoney(totals().due) }}</dd>
+      </div>
+    </dl>
+
+    <button
+      type="button"
+      class="pos-basket__clear"
+      [disabled]="!canClear()"
+      (click)="onClear()"
+    >
+      {{ clearLabel() }}
+    </button>
+  </footer>
+</section>

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

@@ -0,0 +1,285 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family);
+  font-size: var(--pos-font-size-md);
+}
+
+.pos-basket__panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  padding: var(--pos-space-lg);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-lg);
+  background: var(--pos-color-panel);
+}
+
+.pos-basket__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+  margin-bottom: var(--pos-space-md);
+}
+
+.pos-basket__title {
+  margin: 0;
+  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;
+}
+
+.pos-basket__count {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-basket__lines {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  min-height: 8rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.pos-basket__empty {
+  margin: auto 0;
+  padding: var(--pos-space-2xl) var(--pos-space-md);
+  color: var(--pos-color-text-muted);
+  text-align: center;
+}
+
+.pos-basket__line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'info void'
+    'stepper prices';
+  align-items: center;
+  gap: var(--pos-space-sm) var(--pos-space-md);
+  padding: var(--pos-space-md);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-panel-elevated);
+}
+
+.pos-basket__line-info {
+  grid-area: info;
+  min-width: 0;
+}
+
+.pos-basket__line-name {
+  margin: 0;
+  font-size: var(--pos-font-size-md);
+  font-weight: var(--pos-font-weight-semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pos-basket__line-sku,
+.pos-basket__line-voided {
+  margin: var(--pos-space-xs) 0 0;
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-basket__line-sku {
+  color: var(--pos-color-text-muted);
+}
+
+.pos-basket__line-voided {
+  color: var(--pos-color-danger);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-basket__stepper {
+  grid-area: stepper;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pos-space-xs);
+  width: fit-content;
+  padding: var(--pos-space-xs);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-surface);
+}
+
+.pos-basket__qty-btn,
+.pos-basket__void {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--pos-color-text);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-basket__qty-btn {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border-radius: var(--pos-radius-sm);
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-basket__qty-btn:not(:disabled):active,
+.pos-basket__void:not(:disabled):active {
+  background: var(--pos-color-key-active);
+  color: var(--pos-color-on-key-active);
+}
+
+.pos-basket__qty {
+  min-width: 1.75rem;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+  text-align: center;
+}
+
+.pos-basket__line-prices {
+  grid-area: prices;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--pos-space-xs);
+}
+
+.pos-basket__unit-price {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-basket__line-total {
+  margin: 0;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-basket__void {
+  grid-area: void;
+  justify-self: end;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  color: var(--pos-color-text-muted);
+}
+
+.pos-basket__qty-btn:disabled,
+.pos-basket__void:disabled,
+.pos-basket__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pos-basket__qty-btn:focus-visible,
+.pos-basket__void:focus-visible,
+.pos-basket__clear:focus-visible {
+  outline: 2px solid var(--pos-color-primary);
+  outline-offset: 2px;
+}
+
+.pos-basket__line--voided .pos-basket__line-name,
+.pos-basket__line--voided .pos-basket__line-sku,
+.pos-basket__line--voided .pos-basket__line-prices {
+  color: var(--pos-color-text-muted);
+  text-decoration: line-through;
+}
+
+.pos-basket__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-md);
+  margin-top: var(--pos-space-md);
+  padding-top: var(--pos-space-md);
+  border-top: 1px solid var(--pos-color-border);
+}
+
+.pos-basket__totals {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  margin: 0;
+}
+
+.pos-basket__total-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-basket__total-row dt,
+.pos-basket__total-row dd {
+  margin: 0;
+}
+
+.pos-basket__total-row--due {
+  padding-top: var(--pos-space-sm);
+  border-top: 1px solid var(--pos-color-border);
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-basket__clear {
+  min-height: var(--pos-button-min-height);
+  border: 0;
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-danger);
+  color: var(--pos-color-on-danger);
+  font: inherit;
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-basket__clear:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.pos-basket__clear:disabled {
+  background: var(--pos-color-disabled);
+  color: var(--pos-color-on-disabled);
+  transform: none;
+}
+
+@media (min-width: 768px) {
+  .pos-basket__panel {
+    padding: var(--pos-space-xl);
+  }
+
+  .pos-basket__line {
+    grid-template-columns: minmax(0, 1fr) auto auto auto;
+    grid-template-areas: 'info stepper prices void';
+    gap: var(--pos-space-md);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pos-basket__clear {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,198 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import {
+  PosBasket,
+  PosBasketIntent,
+  PosBasketLine,
+  PosBasketTotals,
+} from './pos-basket';
+
+const COFFEE_LINE: PosBasketLine = {
+  lineId: 1,
+  sku: 'SKU-001',
+  name: 'Coffee 250g',
+  qty: 2,
+  unitPrice: 6,
+  lineTotal: 12,
+  vat: { rate: 0.25, amount: 2.4, included: true },
+  struckThrough: false,
+};
+
+const MID_SALE_TOTALS: PosBasketTotals = {
+  gross: 12,
+  net: 9.6,
+  vat: 2.4,
+  discount: 0,
+  due: 12,
+  currency: 'EUR',
+};
+
+describe('PosBasket', () => {
+  let fixture: ComponentFixture<PosBasket>;
+  let component: PosBasket;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PosBasket],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PosBasket);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should render the empty basket state by default', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-basket__title')?.textContent).toContain(
+      'Basket',
+    );
+    expect(compiled.querySelector('.pos-basket__empty')?.textContent).toContain(
+      'Basket is empty',
+    );
+  });
+
+  it('should render lines and totals exactly as received without calculating', async () => {
+    const mismatched: PosBasketLine = {
+      ...COFFEE_LINE,
+      qty: 2,
+      unitPrice: 6,
+      lineTotal: 99,
+    };
+    const totals: PosBasketTotals = {
+      ...MID_SALE_TOTALS,
+      gross: 50,
+      due: 40,
+    };
+
+    fixture.componentRef.setInput('lines', [mismatched]);
+    fixture.componentRef.setInput('totals', totals);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(
+      compiled.querySelector('.pos-basket__line-name')?.textContent,
+    ).toContain('Coffee 250g');
+    expect(
+      compiled.querySelector('.pos-basket__line-sku')?.textContent,
+    ).toContain('SKU-001');
+    expect(compiled.querySelector('.pos-basket__qty')?.textContent?.trim()).toBe(
+      '2',
+    );
+    expect(
+      compiled.querySelector('.pos-basket__line-total')?.textContent,
+    ).toContain('99');
+    expect(
+      compiled.querySelector('.pos-basket__line-total')?.textContent,
+    ).not.toContain('12');
+
+    const due = compiled.querySelector('.pos-basket__total-row--due dd');
+    expect(due?.textContent).toContain('40');
+    expect(due?.textContent).not.toContain('50');
+  });
+
+  it('should emit change-quantity when the cashier increments a line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const increase = (
+      fixture.nativeElement as HTMLElement
+    ).querySelectorAll('.pos-basket__qty-btn')[1] as HTMLButtonElement;
+    increase.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([
+      { type: 'basket.changeQuantity', lineId: 1, qty: 3 },
+    ]);
+  });
+
+  it('should emit change-quantity when the cashier decrements a line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const decrease = (
+      fixture.nativeElement as HTMLElement
+    ).querySelector('.pos-basket__qty-btn') as HTMLButtonElement;
+    decrease.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([
+      { type: 'basket.changeQuantity', lineId: 1, qty: 1 },
+    ]);
+  });
+
+  it('should emit void-line for the selected line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const voidBtn = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-basket__void',
+    ) as HTMLButtonElement;
+    voidBtn.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'basket.voidLine', lineId: 1 }]);
+  });
+
+  it('should emit clear-basket when the cashier clears', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const clear = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-basket__clear',
+    ) as HTMLButtonElement;
+    clear.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'basket.clear' }]);
+  });
+
+  it('should not emit while disabled, and should disable void on struck-through lines', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [
+      { ...COFFEE_LINE, struckThrough: true },
+    ]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    fixture.componentRef.setInput('disabled', true);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const increase = compiled.querySelectorAll(
+      '.pos-basket__qty-btn',
+    )[1] as HTMLButtonElement;
+    const voidBtn = compiled.querySelector(
+      '.pos-basket__void',
+    ) as HTMLButtonElement;
+    const clear = compiled.querySelector(
+      '.pos-basket__clear',
+    ) as HTMLButtonElement;
+
+    increase.click();
+    voidBtn.click();
+    clear.click();
+    await fixture.whenStable();
+
+    expect(increase.disabled).toBe(true);
+    expect(voidBtn.disabled).toBe(true);
+    expect(clear.disabled).toBe(true);
+    expect(intents).toEqual([]);
+    expect(compiled.querySelector('.pos-basket__line--voided')).toBeTruthy();
+  });
+});