@retalia/pos-components 0.0.4 → 0.0.5

package/types/retalia-pos-components.d.ts

@@ -0,0 +1,300 @@
+import * as _angular_core from '@angular/core';
+
+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. */
+type PosLoginSessionStatus = 'signedOut' | 'busy' | 'signedIn';
+interface PosLoginSessionState {
+    readonly status: PosLoginSessionStatus;
+    readonly displayName?: string;
+}
+type LoginStage = 'clerkNumber' | 'password';
+declare class PosLogin {
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly session: _angular_core.InputSignal<PosLoginSessionState>;
+    readonly titleClerkNumber: _angular_core.InputSignal<string>;
+    readonly titleClerkPassword: _angular_core.InputSignal<string>;
+    readonly nextLabel: _angular_core.InputSignal<string>;
+    readonly loginLabel: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<PosLoginIntent>;
+    protected readonly keypadRows: readonly (readonly string[])[];
+    protected readonly inputValue: _angular_core.WritableSignal<string>;
+    protected readonly stage: _angular_core.WritableSignal<LoginStage>;
+    private readonly clerkNumber;
+    protected readonly title: _angular_core.Signal<string>;
+    protected readonly maskInput: _angular_core.Signal<boolean>;
+    protected readonly showBack: _angular_core.Signal<boolean>;
+    protected readonly primaryLabel: _angular_core.Signal<string>;
+    protected readonly primaryEnabled: _angular_core.Signal<boolean>;
+    protected readonly interactionLocked: _angular_core.Signal<boolean>;
+    protected readonly sessionStatusText: _angular_core.Signal<string>;
+    protected onKeypad(key: string): void;
+    protected onPrimary(): void;
+    protected onBack(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosLogin, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosLogin, "pos-login", never, { "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "titleClerkNumber": { "alias": "titleClerkNumber"; "required": false; "isSignal": true; }; "titleClerkPassword": { "alias": "titleClerkPassword"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "loginLabel": { "alias": "loginLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+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. */
+interface PosBasketVat {
+    readonly rate: number;
+    readonly amount: number;
+    readonly included: boolean;
+}
+/** Display-only basket line from the host envelope — not an API DTO. */
+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. */
+interface PosBasketTotals {
+    readonly gross: number;
+    readonly net: number;
+    readonly vat: number;
+    readonly discount: number;
+    readonly due: number;
+    readonly currency: string;
+}
+declare class PosBasket {
+    readonly lines: _angular_core.InputSignal<readonly PosBasketLine[]>;
+    readonly totals: _angular_core.InputSignal<PosBasketTotals>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<PosBasketIntent>;
+    protected readonly hasLines: _angular_core.Signal<boolean>;
+    protected readonly canClear: _angular_core.Signal<boolean>;
+    protected formatMoney(amount: number): string;
+    protected canChangeQuantity(line: PosBasketLine): boolean;
+    protected canDecrement(line: PosBasketLine): boolean;
+    protected canVoid(line: PosBasketLine): boolean;
+    protected onIncrement(line: PosBasketLine): void;
+    protected onDecrement(line: PosBasketLine): void;
+    protected onVoid(line: PosBasketLine): void;
+    protected onClear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosBasket, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosBasket, "pos-basket", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+type PosItemEntryIntent = {
+    readonly type: 'itemEntry.submit';
+    readonly reference: string;
+};
+declare class PosItemEntry {
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly addLabel: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<{
+        readonly type: "itemEntry.submit";
+        readonly reference: string;
+    }>;
+    private readonly itemInput;
+    protected readonly reference: _angular_core.WritableSignal<string>;
+    protected readonly canSubmit: _angular_core.Signal<boolean>;
+    constructor();
+    protected onInput(event: Event): void;
+    protected onSubmit(event: Event): void;
+    private focusInput;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosItemEntry, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosItemEntry, "pos-item-entry", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "addLabel": { "alias": "addLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+type PosTenderIntent = {
+    readonly type: 'tender.cash';
+    readonly amount: number;
+};
+declare class PosTender {
+    /** Display-only amount due from the host envelope — not calculated here. */
+    readonly amountDue: _angular_core.InputSignal<number>;
+    /** Display-only change due from the host envelope — not calculated here. */
+    readonly changeDue: _angular_core.InputSignal<number | null>;
+    readonly currency: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly amountDueLabel: _angular_core.InputSignal<string>;
+    readonly tenderedLabel: _angular_core.InputSignal<string>;
+    readonly changeDueLabel: _angular_core.InputSignal<string>;
+    readonly tenderLabel: _angular_core.InputSignal<string>;
+    readonly processingLabel: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<{
+        readonly type: "tender.cash";
+        readonly amount: number;
+    }>;
+    protected readonly keypadRows: readonly (readonly string[])[];
+    protected readonly amountInput: _angular_core.WritableSignal<string>;
+    protected readonly parsedAmount: _angular_core.Signal<number | null>;
+    protected readonly canTender: _angular_core.Signal<boolean>;
+    protected readonly hasChangeDue: _angular_core.Signal<boolean>;
+    protected readonly displayTendered: _angular_core.Signal<string>;
+    protected readonly statusText: _angular_core.Signal<string>;
+    protected formatMoney(amount: number): string;
+    protected onKeypad(key: string): void;
+    protected onTender(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosTender, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTender, "pos-tender", never, { "amountDue": { "alias": "amountDue"; "required": false; "isSignal": true; }; "changeDue": { "alias": "changeDue"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "amountDueLabel": { "alias": "amountDueLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeDueLabel": { "alias": "changeDueLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "processingLabel": { "alias": "processingLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+interface PosReceiptIntent {
+    readonly type: 'receipt.newSale';
+}
+/** Display-only VAT from the host envelope — not calculated here. */
+interface PosReceiptVat {
+    readonly rate: number;
+    readonly amount: number;
+    readonly included: boolean;
+}
+/** Display-only receipt line from the host envelope — not an API DTO. */
+interface PosReceiptLine {
+    readonly lineId: number;
+    readonly sku: string;
+    readonly name: string;
+    readonly qty: number;
+    readonly unitPrice: number;
+    readonly lineTotal: number;
+    readonly vat: PosReceiptVat;
+    readonly struckThrough: boolean;
+}
+/** Display-only totals from the host envelope — not calculated here. */
+interface PosReceiptTotals {
+    readonly gross: number;
+    readonly net: number;
+    readonly vat: number;
+    readonly discount: number;
+    readonly due: number;
+    readonly currency: string;
+}
+/** Display-only tender from the host envelope — not calculated here. */
+interface PosReceiptPayment {
+    readonly tender: string;
+    readonly amount: number;
+    readonly tendered: number;
+    readonly change: number;
+    readonly state: string;
+}
+/** Display-only document metadata from the host envelope. */
+interface PosReceiptDocument {
+    readonly number: string;
+    readonly receiptReady: boolean;
+}
+declare class PosReceipt {
+    readonly lines: _angular_core.InputSignal<readonly PosReceiptLine[]>;
+    readonly totals: _angular_core.InputSignal<PosReceiptTotals>;
+    readonly payments: _angular_core.InputSignal<readonly PosReceiptPayment[]>;
+    readonly document: _angular_core.InputSignal<PosReceiptDocument>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly preparingLabel: _angular_core.InputSignal<string>;
+    readonly readyLabel: _angular_core.InputSignal<string>;
+    readonly newSaleLabel: _angular_core.InputSignal<string>;
+    readonly tenderLabel: _angular_core.InputSignal<string>;
+    readonly amountLabel: _angular_core.InputSignal<string>;
+    readonly tenderedLabel: _angular_core.InputSignal<string>;
+    readonly changeLabel: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<PosReceiptIntent>;
+    protected readonly hasLines: _angular_core.Signal<boolean>;
+    protected readonly hasPayments: _angular_core.Signal<boolean>;
+    protected readonly hasDocumentNumber: _angular_core.Signal<boolean>;
+    protected readonly statusText: _angular_core.Signal<string>;
+    protected readonly canStartNewSale: _angular_core.Signal<boolean>;
+    protected formatMoney(amount: number): string;
+    protected onNewSale(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosReceipt, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosReceipt, "pos-receipt", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "payments": { "alias": "payments"; "required": false; "isSignal": true; }; "document": { "alias": "document"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "preparingLabel": { "alias": "preparingLabel"; "required": false; "isSignal": true; }; "readyLabel": { "alias": "readyLabel"; "required": false; "isSignal": true; }; "newSaleLabel": { "alias": "newSaleLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "amountLabel": { "alias": "amountLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+/**
+ * Theme-lab catalog. Default values must stay in sync with `styles/tokens.css`.
+ * The lab never writes that file; edits are live overrides only.
+ */
+type PosTokenKind = 'color' | 'length' | 'font-family' | 'font-weight' | 'other';
+type PosTokenGroup = 'color' | 'radius' | 'space' | 'type' | 'control';
+type PosTokenPreview = 'color' | 'radius' | 'space' | 'font-size' | 'font-family' | 'font-weight' | 'letter-spacing' | 'size';
+interface PosTokenSwatch {
+    readonly name: string;
+    readonly variable: string;
+}
+interface PosTokenDefinition extends PosTokenSwatch {
+    readonly kind: PosTokenKind;
+    readonly group: PosTokenGroup;
+    readonly preview: PosTokenPreview;
+    readonly defaultValue: string;
+}
+
+interface PosTokenSelection {
+    readonly id: string;
+    readonly title: string;
+    readonly variables: readonly string[];
+}
+declare class PosTokens {
+    protected readonly colorTokens: readonly PosTokenDefinition[];
+    protected readonly radiusTokens: readonly PosTokenDefinition[];
+    protected readonly spaceTokens: readonly PosTokenDefinition[];
+    protected readonly typeTokens: readonly PosTokenDefinition[];
+    protected readonly controlTokens: readonly PosTokenDefinition[];
+    private readonly overrides;
+    protected readonly selection: _angular_core.WritableSignal<PosTokenSelection | null>;
+    protected readonly statusMessage: _angular_core.WritableSignal<string>;
+    protected readonly selectedTokens: _angular_core.Signal<readonly PosTokenDefinition[]>;
+    protected readonly hasOverrides: _angular_core.Signal<boolean>;
+    protected readonly themeStyle: _angular_core.Signal<string>;
+    /** Complete :root CSS for the consuming POS. Package defaults are not written. */
+    themeCss(): string;
+    /** Load a previously exported theme as live overrides. Does not mutate defaults. */
+    loadThemeCss(css: string): void;
+    resetTheme(): void;
+    protected exportThemeFile(): void;
+    protected onImportFile(event: Event): Promise<void>;
+    protected selectToken(token: PosTokenDefinition): void;
+    protected selectSample(sampleId: string): void;
+    protected clearSelection(): void;
+    protected isTokenSelected(variable: string): boolean;
+    protected isSampleSelected(sampleId: string): boolean;
+    protected isModified(variable: string): boolean;
+    protected currentValue(variable: string): string;
+    protected defaultValue(variable: string): string;
+    protected colorInputValue(variable: string): string | null;
+    protected tokenFieldId(variable: string): string;
+    protected onTokenInput(variable: string, event: Event): void;
+    protected resetToken(variable: string): void;
+    private setTokenValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosTokens, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTokens, "pos-tokens", never, {}, {}, never, never, true, never>;
+}
+
+export { PosBasket, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens };
+export type { PosBasketIntent, PosBasketLine, PosBasketTotals, PosBasketVat, PosItemEntryIntent, PosLoginIntent, PosLoginSessionState, PosLoginSessionStatus, PosReceiptDocument, PosReceiptIntent, PosReceiptLine, PosReceiptPayment, PosReceiptTotals, PosReceiptVat, PosTenderIntent, PosTokenSwatch };

package/eslint.config.js

@@ -1,32 +0,0 @@
-// @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

@@ -1,14 +0,0 @@
-{
-  "$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/src/lib/basket/pos-basket.html

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