@retalia/pos-components 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retalia/pos-components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
 
 type PosLoginIntent = {
     readonly type: 'login.key';
@@ -161,22 +162,15 @@ type PosTransactionActionBarIntent = {
 } | {
     readonly type: 'actionBar.tender';
 };
-interface TransactionButton {
-    readonly id: 'clearBasket' | 'tender';
-    readonly label: string;
-    readonly className: string;
-    readonly intent: PosTransactionActionBarIntent;
-}
 declare class PosTransactionActionBar {
-    /** Action ids from the envelope. A button is shown only when its id is listed. */
+    /** Envelope action names. `clearBasket` shows Cancel. `tender` shows Cash. */
     readonly availableActions: _angular_core.InputSignal<readonly string[]>;
-    /** Locks the shown buttons while the host is busy. Does not choose which actions exist. */
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly action: _angular_core.OutputEmitterRef<PosTransactionActionBarIntent>;
-    protected readonly buttons: _angular_core.Signal<TransactionButton[]>;
-    protected onPress(button: TransactionButton): void;
+    protected onClear(): void;
+    protected onCash(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosTransactionActionBar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTransactionActionBar, "pos-transaction-action-bar", never, { "availableActions": { "alias": "availableActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTransactionActionBar, "pos-transaction-action-bar", never, { "availableActions": { "alias": "availableActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["*"], true, never>;
 }
 
 type PosItemEntryIntent = {
@@ -210,6 +204,252 @@ declare class PosItemEntry {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosItemEntry, "pos-item-entry", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "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; }; "scannerStatus": { "alias": "scannerStatus"; "required": false; "isSignal": true; }; "focusHotkey": { "alias": "focusHotkey"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
+declare const POS_WORKSPACE_PANE_IDS: readonly ["header", "itemEntry", "basket", "actionBar"];
+type PosWorkspaceBuiltinPaneId = (typeof POS_WORKSPACE_PANE_IDS)[number];
+/** A library region, or a custom slot (`empty-1`, `empty-2`, …) the POS fills later. */
+type PosWorkspacePaneId = PosWorkspaceBuiltinPaneId | `empty-${number}`;
+type PosWorkspaceColumn = 0 | 1;
+/** Which edge a pane uses when it spans both columns. */
+type PosWorkspaceSpan = 'top' | 'bottom';
+/** Where one logged-in sale region sits. Weight 0 sizes to content; a positive weight shares leftover height. */
+interface PosWorkspacePanePlacement {
+    readonly id: PosWorkspacePaneId;
+    readonly column: PosWorkspaceColumn;
+    readonly order: number;
+    readonly weight: number;
+    /** Spans both columns at this pane's place in the stack. */
+    readonly fullWidth?: boolean;
+    /** `top` sits above the split. `bottom` sits under both columns. */
+    readonly span?: PosWorkspaceSpan;
+    /** Omitted or true shows the pane. False keeps it in the layout and hides it on the till. */
+    readonly visible?: boolean;
+}
+/** Arrangement of the logged-in sale shell. The host can keep this later; the workspace does not store it. */
+interface PosWorkspaceLayout {
+    /** Share of the width given to the left column once a pane is docked on the right. */
+    readonly startColumnRatio: number;
+    readonly panes: readonly PosWorkspacePanePlacement[];
+}
+/** JSON the consuming POS passes back in as the `layout` input. */
+declare function workspaceLayoutJson(layout: PosWorkspaceLayout): string;
+/** Reads a file written by `workspaceLayoutJson`. */
+declare function parseWorkspaceLayout(json: string): PosWorkspaceLayout;
+interface PosWorkspaceGridPane {
+    readonly id: PosWorkspacePaneId;
+    readonly column: 1 | 2;
+    readonly rowStart: number;
+    readonly rowEnd: number;
+    readonly showResize: boolean;
+    /** When set, the pane stretches across both columns. */
+    readonly spanColumns?: boolean;
+    /** Edit mode keeps a hidden pane in the grid so its settings can show it again. */
+    readonly concealed?: boolean;
+}
+interface PosWorkspaceGrid {
+    readonly columns: string;
+    readonly rows: string;
+    readonly split: boolean;
+    readonly panes: readonly PosWorkspaceGridPane[];
+}
+declare function workspacePaneLabel(id: PosWorkspacePaneId): string;
+/** Same stack the sale screen uses today: header, item lookup, flexible basket, action bar. */
+declare const POS_WORKSPACE_DEFAULT_LAYOUT: PosWorkspaceLayout;
+/** Basket docked on the right at full height. Item lookup is marked flexible so it fills above the action bar. */
+declare const POS_WORKSPACE_BASKET_RIGHT_LAYOUT: PosWorkspaceLayout;
+/** Nothing placed yet. Edit mode lists the library components so they can be dragged on. */
+declare const POS_WORKSPACE_EMPTY_LAYOUT: PosWorkspaceLayout;
+/** Header spans both columns, with the basket docked on the right. */
+declare const POS_WORKSPACE_HEADER_SPAN_LAYOUT: PosWorkspaceLayout;
+
+type PosWorkspaceMoveKey = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight';
+interface PosWorkspaceController {
+    readonly editing: Signal<boolean>;
+    readonly placements: Signal<ReadonlyMap<PosWorkspacePaneId, PosWorkspaceGridPane>>;
+    readonly draggingPane: Signal<PosWorkspacePaneId | null>;
+    readonly spans: Signal<ReadonlyMap<PosWorkspacePaneId, PosWorkspaceSpan | null>>;
+    readonly flexibleIds: Signal<ReadonlySet<PosWorkspacePaneId>>;
+    readonly fullWidthIds: Signal<ReadonlySet<PosWorkspacePaneId>>;
+    readonly settingsPane: Signal<PosWorkspacePaneId | null>;
+    togglePaneSettings(id: PosWorkspacePaneId): void;
+    closePaneSettings(id: PosWorkspacePaneId): void;
+    moveByKey(id: PosWorkspacePaneId, key: PosWorkspaceMoveKey): void;
+    setFullWidth(id: PosWorkspacePaneId, enabled: boolean): void;
+    setVisible(id: PosWorkspacePaneId, visible: boolean): void;
+    setFlexible(id: PosWorkspacePaneId, enabled: boolean): void;
+    removeFromLayout(id: PosWorkspacePaneId): void;
+    resizeByKey(id: PosWorkspacePaneId, direction: -1 | 1): void;
+    beginPaneDrag(id: PosWorkspacePaneId, event: PointerEvent): void;
+    updatePaneDrag(event: PointerEvent): void;
+    endPaneDrag(event?: PointerEvent): void;
+    beginPaneResize(id: PosWorkspacePaneId, event: PointerEvent): void;
+    updatePaneResize(event: PointerEvent): void;
+    endPaneResize(): void;
+}
+
+interface PosWorkspaceDropIndicator {
+    readonly top: number;
+    readonly left: number;
+    readonly width: number;
+    readonly height: number;
+    readonly line: boolean;
+}
+interface PosWorkspaceDropHint {
+    readonly kind: 'top' | 'bottom' | 'dock';
+    readonly top: number;
+    readonly left: number;
+    readonly width: number;
+    readonly height: number;
+}
+declare class PosWorkspace {
+    private readonly hostRef;
+    private readonly destroyRef;
+    private readonly paneRefs;
+    private readonly frameRef;
+    /** Draws outlines, drag handles, and resize controls. */
+    readonly editing: _angular_core.InputSignal<boolean>;
+    /** Starting arrangement. Edits stay in this view until a new layout input arrives. */
+    readonly layout: _angular_core.InputSignal<PosWorkspaceLayout>;
+    /** Fired when the arrangement changes. Nothing is stored beyond this view. */
+    readonly layoutChange: _angular_core.OutputEmitterRef<PosWorkspaceLayout>;
+    /** The arrangement to pass back as `layout` from the consuming POS. */
+    readonly layoutExport: _angular_core.OutputEmitterRef<PosWorkspaceLayout>;
+    private readonly layoutState;
+    private readonly viewportWidth;
+    private readonly dropTarget;
+    private resizeSession;
+    private paletteGesture;
+    private ignorePaletteClick;
+    protected readonly paletteOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly paletteMenuLifted: _angular_core.WritableSignal<boolean>;
+    private splitting;
+    private splitStartLayout;
+    private readonly history;
+    protected readonly canUndo: _angular_core.WritableSignal<boolean>;
+    readonly draggingPane: _angular_core.WritableSignal<PosWorkspacePaneId | null>;
+    readonly settingsPane: _angular_core.WritableSignal<PosWorkspacePaneId | null>;
+    readonly spans: _angular_core.Signal<Map<PosWorkspacePaneId, PosWorkspaceSpan | null>>;
+    readonly fullWidthIds: _angular_core.Signal<Set<PosWorkspacePaneId>>;
+    readonly flexibleIds: _angular_core.Signal<Set<PosWorkspacePaneId>>;
+    protected readonly dropIndicator: _angular_core.WritableSignal<PosWorkspaceDropIndicator | null>;
+    protected readonly dropHints: _angular_core.WritableSignal<readonly PosWorkspaceDropHint[]>;
+    protected readonly status: _angular_core.WritableSignal<string>;
+    private readonly compact;
+    protected readonly grid: _angular_core.Signal<PosWorkspaceGrid>;
+    /** Library components the host projected that are not on the screen yet. */
+    protected readonly palette: _angular_core.Signal<("header" | "itemEntry" | "basket" | "actionBar")[]>;
+    /** Empty slots with no projected content. The POS fills a slot by projecting the same id. */
+    protected readonly emptySlots: _angular_core.Signal<`empty-${number}`[]>;
+    protected readonly paneLabel: typeof workspacePaneLabel;
+    readonly placements: _angular_core.Signal<Map<PosWorkspacePaneId, PosWorkspaceGridPane>>;
+    protected readonly showSplitter: _angular_core.Signal<boolean>;
+    /** The rows the right column occupies, so the bar stays off full-width panes. */
+    protected readonly splitterRow: _angular_core.Signal<string>;
+    protected readonly splitterLeft: _angular_core.Signal<string>;
+    protected readonly ratioPercent: _angular_core.Signal<number>;
+    constructor();
+    togglePaneSettings(id: PosWorkspacePaneId): void;
+    closePaneSettings(id: PosWorkspacePaneId): void;
+    moveByKey(id: PosWorkspacePaneId, key: PosWorkspaceMoveKey): void;
+    resizeByKey(id: PosWorkspacePaneId, direction: -1 | 1): void;
+    beginPaneDrag(id: PosWorkspacePaneId, event: PointerEvent): void;
+    updatePaneDrag(event: PointerEvent): void;
+    endPaneDrag(event?: PointerEvent): void;
+    protected onPalettePointerDown(kind: PosWorkspaceBuiltinPaneId | 'empty', event: PointerEvent): void;
+    protected onPalettePointerMove(event: PointerEvent): void;
+    protected onPalettePointerUp(event: PointerEvent): void;
+    protected onPalettePointerCancel(): void;
+    protected onPaletteClick(kind: PosWorkspaceBuiltinPaneId | 'empty'): void;
+    protected togglePalette(): void;
+    protected closePalette(): void;
+    protected onPaletteMenuKeydown(event: KeyboardEvent): void;
+    protected undoLayout(): void;
+    protected applyDefaultLayout(): void;
+    protected resetLayout(): void;
+    protected exportLayout(): void;
+    protected importLayoutFile(event: Event): void;
+    setFullWidth(id: PosWorkspacePaneId, enabled: boolean): void;
+    setVisible(id: PosWorkspacePaneId, visible: boolean): void;
+    setFlexible(id: PosWorkspacePaneId, enabled: boolean): void;
+    removeFromLayout(id: PosWorkspacePaneId): void;
+    beginPaneResize(id: PosWorkspacePaneId, event: PointerEvent): void;
+    updatePaneResize(event: PointerEvent): void;
+    endPaneResize(): void;
+    protected onSplitterDown(event: PointerEvent): void;
+    protected onSplitterMove(event: PointerEvent): void;
+    protected onSplitterUp(): void;
+    protected onSplitterKeydown(event: KeyboardEvent): void;
+    private commit;
+    private remember;
+    private downloadLayout;
+    private publish;
+    private placeMessage;
+    private messageForMove;
+    private refreshDropHints;
+    /** True when the pointer is above the docked column (or in the top band when nothing sits above it). */
+    private inFullWidthDropZone;
+    /** Top edge of the side-by-side region (right column). Null when nothing is docked right. */
+    private splitBodyTop;
+    /** Full-width rows that sit above the split, used for drop ordering in that band. */
+    private idsAboveSplit;
+    /** Maps a visual index among banner/full-width rows onto the body column order. */
+    private bodyIndexForFullWidthDrop;
+    private fullWidthIndicator;
+    private nextVisualId;
+    private idsInVisualColumn;
+    private indicatorBox;
+    private paneElement;
+    private gridElement;
+    private clearDrag;
+    private clearInteraction;
+    private isPrimaryPointer;
+    private capture;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosWorkspace, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosWorkspace, "pos-workspace", never, { "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, { "layoutChange": "layoutChange"; "layoutExport": "layoutExport"; }, ["paneRefs"], ["*"], true, never>;
+}
+
+declare class PosWorkspacePane {
+    protected readonly workspace: PosWorkspaceController;
+    readonly paneId: _angular_core.InputSignal<PosWorkspacePaneId>;
+    /** Draws the unassigned-slot message. The POS replaces this by projecting the same pane id. */
+    readonly placeholder: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly place: _angular_core.Signal<PosWorkspaceGridPane | undefined>;
+    protected readonly dragging: _angular_core.Signal<boolean>;
+    protected readonly columnStyle: _angular_core.Signal<1 | 2 | "1 / -1" | null>;
+    protected readonly rowStyle: _angular_core.Signal<string | null>;
+    protected readonly showResize: _angular_core.Signal<boolean>;
+    protected readonly concealed: _angular_core.Signal<boolean>;
+    protected readonly settingsOpen: _angular_core.Signal<boolean>;
+    protected readonly fullWidth: _angular_core.Signal<boolean>;
+    protected readonly shown: _angular_core.Signal<boolean>;
+    protected readonly flexible: _angular_core.Signal<boolean>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly menuAbove: _angular_core.Signal<boolean>;
+    protected readonly handleLabel: _angular_core.Signal<string>;
+    protected readonly resizeLabel: _angular_core.Signal<string>;
+    protected readonly settingsLabel: _angular_core.Signal<string>;
+    protected readonly closeMenuLabel: _angular_core.Signal<string>;
+    protected readonly removeLabel: _angular_core.Signal<string>;
+    protected onDragPointerDown(event: PointerEvent): void;
+    protected onDragPointerMove(event: PointerEvent): void;
+    protected onDragPointerUp(event: PointerEvent): void;
+    protected onHandleKeydown(event: KeyboardEvent): void;
+    protected toggleSettings(event: Event): void;
+    protected closeSettings(event: Event): void;
+    protected onSettingsKeydown(event: KeyboardEvent): void;
+    protected onVisible(event: Event): void;
+    protected onFlexible(event: Event): void;
+    protected onFullWidth(event: Event): void;
+    protected onRemove(event: Event): void;
+    protected onResizePointerDown(event: PointerEvent): void;
+    protected onResizePointerMove(event: PointerEvent): void;
+    protected onResizePointerUp(): void;
+    protected onResizeKeydown(event: KeyboardEvent): void;
+    private capture;
+    private isMoveKey;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosWorkspacePane, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosWorkspacePane, "pos-workspace-pane", never, { "paneId": { "alias": "paneId"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type PosTenderIntent = {
     readonly type: 'tender.cash';
     readonly amount: number;
@@ -386,5 +626,5 @@ declare class PosTokens {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTokens, "pos-tokens", never, {}, {}, never, never, true, never>;
 }
 
-export { PosBasket, PosHeader, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens, PosTransactionActionBar };
-export type { PosBasketIntent, PosBasketLine, PosBasketTotals, PosBasketVat, PosHeaderIntent, PosItemEntryIntent, PosLoginIntent, PosLoginSessionState, PosLoginSessionStatus, PosReceiptDocument, PosReceiptIntent, PosReceiptLine, PosReceiptPayment, PosReceiptTotals, PosReceiptVat, PosTenderIntent, PosTokenSwatch, PosTransactionActionBarIntent };
+export { POS_WORKSPACE_BASKET_RIGHT_LAYOUT, POS_WORKSPACE_DEFAULT_LAYOUT, POS_WORKSPACE_EMPTY_LAYOUT, POS_WORKSPACE_HEADER_SPAN_LAYOUT, PosBasket, PosHeader, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens, PosTransactionActionBar, PosWorkspace, PosWorkspacePane, parseWorkspaceLayout, workspaceLayoutJson };
+export type { PosBasketIntent, PosBasketLine, PosBasketTotals, PosBasketVat, PosHeaderIntent, PosItemEntryIntent, PosLoginIntent, PosLoginSessionState, PosLoginSessionStatus, PosReceiptDocument, PosReceiptIntent, PosReceiptLine, PosReceiptPayment, PosReceiptTotals, PosReceiptVat, PosTenderIntent, PosTokenSwatch, PosTransactionActionBarIntent, PosWorkspaceColumn, PosWorkspaceLayout, PosWorkspacePaneId, PosWorkspacePanePlacement, PosWorkspaceSpan };