@retalia/pos-components 0.0.4 → 0.0.5

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

@@ -1,285 +0,0 @@
-: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

@@ -1,198 +0,0 @@
-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();
-  });
-});

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

@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular-vite';
-
-import { PosBasket, PosBasketLine, PosBasketTotals } from './pos-basket';
-
-const coffee: 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 pastry: PosBasketLine = {
-  lineId: 2,
-  sku: 'SKU-014',
-  name: 'Almond croissant',
-  qty: 1,
-  unitPrice: 3.5,
-  lineTotal: 3.5,
-  vat: { rate: 0.2, amount: 0.58, included: true },
-  struckThrough: false,
-};
-
-const midSaleTotals: PosBasketTotals = {
-  gross: 12,
-  net: 9.6,
-  vat: 2.4,
-  discount: 0,
-  due: 12,
-  currency: 'EUR',
-};
-
-const meta: Meta<PosBasket> = {
-  title: 'Basket',
-  component: PosBasket,
-  args: {
-    lines: [],
-    totals: {
-      gross: 0,
-      net: 0,
-      vat: 0,
-      discount: 0,
-      due: 0,
-      currency: 'EUR',
-    },
-    disabled: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PosBasket>;
-
-export const Empty: Story = {};
-
-export const MidSale: Story = {
-  args: {
-    lines: [coffee],
-    totals: midSaleTotals,
-  },
-};
-
-export const MultipleLines: Story = {
-  args: {
-    lines: [coffee, pastry],
-    totals: {
-      gross: 15.5,
-      net: 12.52,
-      vat: 2.98,
-      discount: 0,
-      due: 15.5,
-      currency: 'EUR',
-    },
-  },
-};
-
-export const VoidedLine: Story = {
-  args: {
-    lines: [{ ...coffee, struckThrough: true }, pastry],
-    totals: {
-      gross: 3.5,
-      net: 2.92,
-      vat: 0.58,
-      discount: 0,
-      due: 3.5,
-      currency: 'EUR',
-    },
-  },
-};
-
-export const AsReceivedNotCalculated: Story = {
-  args: {
-    lines: [{ ...coffee, qty: 2, unitPrice: 6, lineTotal: 99 }],
-    totals: {
-      gross: 50,
-      net: 40,
-      vat: 10,
-      discount: 5,
-      due: 45,
-      currency: 'EUR',
-    },
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    lines: [coffee],
-    totals: midSaleTotals,
-    disabled: true,
-  },
-};