@retalia/pos-components 0.0.10 → 0.0.11

package/fesm2022/retalia-pos-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, ChangeDetectionStrategy, Component, viewChild, afterNextRender } from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component, viewChild, afterNextRender, InjectionToken, inject, booleanAttribute, ElementRef, DestroyRef, contentChildren, linkedSignal, effect, untracked, forwardRef } from '@angular/core';
 
 const DEFAULT_SESSION = { status: 'signedOut' };
 const DIGIT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -244,47 +244,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, template: "<div class=\"pos-header__identity\">\r\n  @if (showBrandImage() || brandLabel()) {\r\n  <div class=\"pos-header__brand\">\r\n    @if (showBrandImage()) {\r\n      @if (brandImage()) {\r\n        <img\r\n          class=\"pos-header__brand-image\"\r\n          [src]=\"brandImage()\"\r\n          [alt]=\"brandLabel() ? '' : 'Brand'\"\r\n        />\r\n      } @else {\r\n      <svg\r\n        class=\"pos-header__brand-image\"\r\n        viewBox=\"492.40 241.70 51.34 54.94\"\r\n        [attr.aria-hidden]=\"brandLabel() ? true : null\"\r\n        [attr.aria-label]=\"brandLabel() ? null : 'Retalia'\"\r\n      >\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"M 522.628906 291.910156 C 522.636719 293.0625 523.441406 293.511719 524.425781 292.914062 L 540.464844 283.207031 C 541.449219 282.613281 542.246094 281.195312 542.246094 280.046875 L 542.246094 261.132812 C 542.246094 259.980469 541.441406 259.523438 540.453125 260.113281 L 524.292969 269.691406 C 523.300781 270.277344 522.503906 271.683594 522.511719 272.835938 Z M 522.628906 291.910156\"\r\n        />\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"M 539.097656 253.351562 L 517.101562 243.664062 C 516.066406 243.203125 514.417969 243.265625 513.421875 243.804688 L 495.835938 253.308594 C 494.839844 253.847656 494.027344 255.214844 494.023438 256.367188 L 493.910156 280.140625 C 493.902344 281.292969 494.699219 282.679688 495.683594 283.234375 L 501.734375 286.640625 C 502.71875 287.199219 503.503906 286.71875 503.480469 285.566406 L 503.214844 271.488281 C 503.207031 271.082031 503.492188 270.894531 503.855469 271.066406 L 506.128906 272.148438 C 507.152344 272.636719 507.980469 273.960938 507.980469 275.113281 L 507.980469 287.839844 C 507.980469 288.992188 508.773438 290.394531 509.746094 290.972656 L 515.777344 294.5625 C 516.753906 295.140625 517.554688 294.679688 517.566406 293.527344 L 517.800781 273.300781 C 517.808594 272.488281 517.539062 271.238281 517.195312 270.503906 L 515.460938 266.789062 C 515.292969 266.421875 515.476562 266.109375 515.871094 266.089844 L 518.925781 265.941406 C 520.050781 265.886719 521.761719 265.378906 522.738281 264.808594 L 539.195312 255.21875 C 540.175781 254.648438 540.132812 253.8125 539.097656 253.351562 M 520.609375 255.050781 L 518.019531 256.585938 C 516.914062 257.125 515.734375 257.289062 514.710938 256.804688 L 511.078125 255.101562 C 510.054688 254.621094 510.023438 253.773438 511.003906 253.210938 L 513.835938 251.597656 C 514.53125 251.203125 515.691406 251.132812 516.425781 251.445312 L 520.449219 253.128906 C 521.488281 253.570312 521.5625 254.429688 520.609375 255.050781\"\r\n        />\r\n      </svg>\r\n      }\r\n    }\r\n    @if (brandLabel()) {\r\n      <span class=\"pos-header__brand-label\">{{ brandLabel() }}</span>\r\n    }\r\n  </div>\r\n  }\r\n  @if (title()) {\r\n    <h1 class=\"pos-header__title\">{{ title() }}</h1>\r\n  }\r\n  @if (context()) {\r\n    <p class=\"pos-header__context\">{{ context() }}</p>\r\n  }\r\n</div>\r\n\r\n<div class=\"pos-header__session\">\r\n  @if (clerkName()) {\r\n    <div class=\"pos-header__clerk\">\r\n      @if (canSignOut()) {\r\n        <div class=\"pos-header__menu-anchor\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"pos-header__menu-button\"\r\n            [attr.aria-label]=\"menuLabel()\"\r\n            [attr.aria-expanded]=\"menuOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"toggleMenu()\"\r\n          >\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <circle cx=\"5\" cy=\"12\" r=\"1.6\" />\r\n              <circle cx=\"12\" cy=\"12\" r=\"1.6\" />\r\n              <circle cx=\"19\" cy=\"12\" r=\"1.6\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n      <span class=\"pos-header__avatar\" aria-hidden=\"true\">{{ initial() }}</span>\r\n      <span class=\"pos-header__clerk-text\">\r\n        <span class=\"pos-header__clerk-name\">{{ clerkName() }}</span>\r\n        @if (clerkRole()) {\r\n          <span class=\"pos-header__clerk-role\">{{ clerkRole() }}</span>\r\n        }\r\n      </span>\r\n    </div>\r\n  }\r\n  @if (menuOpen()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"pos-header__backdrop\"\r\n      aria-label=\"Close menu\"\r\n      (click)=\"closeMenu()\"\r\n    ></button>\r\n    <div class=\"pos-header__menu\" role=\"menu\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-header__logout\"\r\n        role=\"menuitem\"\r\n        (click)=\"onSignOut()\"\r\n      >\r\n        {{ signOutLabel() }}\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm) var(--pos-space-md);box-sizing:border-box;width:100%;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-header__identity,.pos-header__session{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pos-space-sm) var(--pos-space-md);min-width:0}.pos-header__session{position:relative;margin-left:auto}.pos-header__brand{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__brand-image{flex:0 0 auto;width:auto;height:var(--pos-space-xl);color:var(--pos-color-ink)}.pos-header__brand-label{font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);letter-spacing:var(--pos-letter-spacing-brand)}.pos-header__title{margin:0;font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold)}.pos-header__context{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-header__clerk{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__avatar{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-header__clerk-text{display:flex;flex-direction:column;min-width:0}.pos-header__clerk-name{font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-header__clerk-role{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.2;text-transform:lowercase}.pos-header__menu-anchor{position:relative;flex:0 0 auto}.pos-header__menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:0;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface);color:var(--pos-color-text-muted);cursor:pointer}.pos-header__menu-button svg{width:1.25rem;height:1.25rem;fill:currentColor}.pos-header__menu-button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-header__backdrop{position:fixed;inset:0;z-index:1;border:0;background:transparent;cursor:default}.pos-header__menu{position:absolute;top:calc(100% + var(--pos-space-xs));right:0;z-index:2;box-sizing:border-box;width:16rem;padding:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-header__logout{display:flex;align-items:center;width:100%;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-md);background:transparent;color:var(--pos-color-danger);font:inherit;font-weight:var(--pos-font-weight-semibold);text-align:left;cursor:pointer}.pos-header__logout:hover{background:color-mix(in srgb,var(--pos-color-danger) 12%,var(--pos-color-surface))}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], showBrandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrandImage", required: false }] }], brandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandImage", required: false }] }], brandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabel", required: false }] }], clerkName: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkName", required: false }] }], clerkRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkRole", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], canSignOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSignOut", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
-/** Bar buttons, in display order. Other envelope actions belong to other components. */
-const BUTTONS = [
-    {
-        id: 'clearBasket',
-        label: 'Cancel',
-        className: 'pos-transaction-action-bar__button--cancel',
-        intent: { type: 'actionBar.clearBasket' },
-    },
-    {
-        id: 'tender',
-        label: 'Cash',
-        className: 'pos-transaction-action-bar__button--cash',
-        intent: { type: 'actionBar.tender' },
-    },
-];
 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. */
     availableActions = input([], ...(ngDevMode ? [{ debugName: "availableActions" }] : /* istanbul ignore next */ []));
-    /** Locks the shown buttons while the host is busy. Does not choose which actions exist. */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     action = output();
-    buttons = computed(() => {
-        const offered = new Set(this.availableActions());
-        return BUTTONS.filter((button) => offered.has(button.id));
-    }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
-    onPress(button) {
-        if (this.disabled()) {
-            return;
-        }
-        this.action.emit(button.intent);
+    onClear() {
+        this.action.emit({ type: 'actionBar.clearBasket' });
+    }
+    onCash() {
+        this.action.emit({ type: 'actionBar.tender' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTransactionActionBar, isStandalone: true, selector: "pos-transaction-action-bar", inputs: { availableActions: { classPropertyName: "availableActions", publicName: "availableActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "toolbar", "aria-label": "Sale actions" }, classAttribute: "pos-transaction-action-bar" }, ngImport: i0, template: "@for (button of buttons(); track button.id) {\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"'pos-transaction-action-bar__button ' + button.className\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onPress(button)\"\r\n  >\r\n    {{ button.label }}\r\n  </button>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-md);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host:empty{display:none}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTransactionActionBar, isStandalone: true, selector: "pos-transaction-action-bar", inputs: { availableActions: { classPropertyName: "availableActions", publicName: "availableActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-transaction-action-bar" }, ngImport: i0, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, decorators: [{
             type: Component,
             args: [{ selector: 'pos-transaction-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'pos-transaction-action-bar',
-                        role: 'toolbar',
-                        'aria-label': 'Sale actions',
-                    }, template: "@for (button of buttons(); track button.id) {\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"'pos-transaction-action-bar__button ' + button.className\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onPress(button)\"\r\n  >\r\n    {{ button.label }}\r\n  </button>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-md);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host:empty{display:none}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"] }]
+                    }, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"] }]
         }], propDecorators: { availableActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 class PosItemEntry {
@@ -354,6 +332,1747 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, template: "<section\r\n  class=\"pos-item-entry__panel\"\r\n  [class.pos-item-entry__panel--bordered]=\"bordered()\"\r\n  [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n  <form class=\"pos-item-entry__form\" (submit)=\"onSubmit($event)\">\r\n    <div\r\n      class=\"pos-item-entry__omnibox\"\r\n      [class.pos-item-entry__omnibox--disabled]=\"disabled()\"\r\n    >\r\n      <label class=\"pos-item-entry__field\">\r\n        <span class=\"pos-item-entry__label\">{{ label() }}</span>\r\n        <svg\r\n          class=\"pos-item-entry__search\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\r\n        </svg>\r\n        <input\r\n          #itemInput\r\n          class=\"pos-item-entry__input\"\r\n          type=\"text\"\r\n          name=\"itemReference\"\r\n          autocomplete=\"off\"\r\n          spellcheck=\"false\"\r\n          [attr.autocorrect]=\"'off'\"\r\n          [attr.autocapitalize]=\"'none'\"\r\n          enterkeyhint=\"done\"\r\n          [placeholder]=\"placeholder()\"\r\n          [value]=\"reference()\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-invalid]=\"errorMessage() ? true : null\"\r\n          [attr.aria-keyshortcuts]=\"focusHotkey() || null\"\r\n          (input)=\"onInput($event)\"\r\n        />\r\n      </label>\r\n\r\n      <span class=\"pos-item-entry__scanner\">\r\n        <svg\r\n          class=\"pos-item-entry__scan\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <line x1=\"4\" y1=\"6\" x2=\"4\" y2=\"18\" />\r\n          <line x1=\"7\" y1=\"6\" x2=\"7\" y2=\"18\" />\r\n          <line x1=\"11\" y1=\"6\" x2=\"11\" y2=\"18\" />\r\n          <line x1=\"14\" y1=\"6\" x2=\"14\" y2=\"18\" />\r\n          <line x1=\"18\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"18\" />\r\n        </svg>\r\n        {{ scannerStatus() }}\r\n      </span>\r\n\r\n      @if (focusHotkey()) {\r\n        <kbd class=\"pos-item-entry__hotkey\">{{ focusHotkey() }}</kbd>\r\n      }\r\n    </div>\r\n  </form>\r\n\r\n  <div class=\"pos-item-entry__status\" aria-live=\"polite\">\r\n    @if (errorMessage()) {\r\n      <p class=\"pos-item-entry__error\">{{ errorMessage() }}</p>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [":host{display:block;width:100%;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-item-entry__panel{display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-item-entry__panel--bordered{padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-panel)}.pos-item-entry__form{min-width:0}.pos-item-entry__omnibox{display:flex;align-items:center;gap:var(--pos-space-sm);box-sizing:border-box;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md) 0 var(--pos-space-lg);border:1px solid transparent;border-radius:var(--pos-radius-pill);background:var(--pos-color-surface-muted);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.pos-item-entry__omnibox:focus-within{border-color:var(--pos-color-primary);background:var(--pos-color-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos-color-primary) 35%,transparent)}.pos-item-entry__omnibox:has(.pos-item-entry__input[aria-invalid=true]){border-color:var(--pos-color-danger)}.pos-item-entry__omnibox--disabled{cursor:not-allowed;background:var(--pos-color-disabled)}.pos-item-entry__field{display:flex;flex:1 1 auto;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-item-entry__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pos-item-entry__search,.pos-item-entry__scan{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pos-item-entry__search{width:15px;height:15px;color:var(--pos-color-text-muted)}.pos-item-entry__input{box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;min-height:calc(var(--pos-button-min-height) - 8px);margin:0;padding:0;border:0;background:transparent;color:var(--pos-color-text);font:inherit;outline:none}.pos-item-entry__input::placeholder{color:var(--pos-color-text-muted);opacity:1}.pos-item-entry__input:disabled{cursor:not-allowed;color:var(--pos-color-on-disabled)}.pos-item-entry__scanner{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--pos-space-xs);padding:2px var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface);color:var(--pos-color-text-muted);font-size:.72em;line-height:1.2;white-space:nowrap}.pos-item-entry__omnibox--disabled .pos-item-entry__scanner{color:var(--pos-color-on-disabled)}.pos-item-entry__scan{width:11px;height:11px}.pos-item-entry__hotkey{flex:0 0 auto;margin:0;padding:0;border:0;background:transparent;color:var(--pos-color-text-muted);font-family:inherit;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1}.pos-item-entry__status{min-height:0}.pos-item-entry__error{margin:0;padding:var(--pos-space-sm) var(--pos-space-md);border-left:3px solid var(--pos-color-danger);background:color-mix(in srgb,var(--pos-color-danger) 12%,transparent);color:var(--pos-color-danger);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}@media(max-width:479px){.pos-item-entry__hotkey{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@media(min-width:768px){.pos-item-entry__panel--bordered{padding:var(--pos-space-xl)}}@media(prefers-reduced-motion:reduce){.pos-item-entry__omnibox{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], scannerStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "scannerStatus", required: false }] }], focusHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusHotkey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], itemInput: [{ type: i0.ViewChild, args: ['itemInput', { isSignal: true }] }] } });
 
+const POS_WORKSPACE = new InjectionToken('POS_WORKSPACE');
+
+const POS_WORKSPACE_PANE_IDS = ['header', 'itemEntry', 'basket', 'actionBar'];
+const EMPTY_PANE_ID = /^empty-(\d+)$/;
+/** JSON the consuming POS passes back in as the `layout` input. */
+function workspaceLayoutJson(layout) {
+    const document = {
+        startColumnRatio: layout.startColumnRatio,
+        panes: layout.panes.map((pane) => {
+            const placement = {
+                id: pane.id,
+                column: pane.column,
+                order: pane.order,
+                weight: pane.weight,
+            };
+            let next = placement;
+            if (pane.span === 'bottom') {
+                next = { ...placement, span: 'bottom' };
+            }
+            else if (pane.span === 'top') {
+                next = { ...placement, fullWidth: true, span: 'top' };
+            }
+            else if (pane.fullWidth) {
+                next = { ...placement, fullWidth: true };
+            }
+            if (pane.visible === false) {
+                next = { ...next, visible: false };
+            }
+            return next;
+        }),
+    };
+    return `${JSON.stringify(document, null, 2)}\n`;
+}
+/** Reads a file written by `workspaceLayoutJson`. */
+function parseWorkspaceLayout(json) {
+    let value;
+    try {
+        value = JSON.parse(json);
+    }
+    catch {
+        throw new Error('Layout file is not JSON.');
+    }
+    if (!isRecord(value) || typeof value['startColumnRatio'] !== 'number') {
+        throw new Error('Layout file is missing a column ratio.');
+    }
+    if (!Number.isFinite(value['startColumnRatio']) || !Array.isArray(value['panes'])) {
+        throw new Error('Layout file is missing a pane list.');
+    }
+    const seen = new Set();
+    return {
+        startColumnRatio: value['startColumnRatio'],
+        panes: value['panes'].map((pane) => readPlacement(pane, seen)),
+    };
+}
+function readPlacement(value, seen) {
+    if (!isRecord(value) || typeof value['id'] !== 'string' || !isPaneId(value['id'])) {
+        throw new Error('Layout file has a pane id this workspace does not know.');
+    }
+    if (seen.has(value['id'])) {
+        throw new Error('Layout file lists the same pane twice.');
+    }
+    seen.add(value['id']);
+    const column = value['column'];
+    const order = value['order'];
+    const weight = value['weight'];
+    if (column !== 0 && column !== 1) {
+        throw new Error('Layout file has a pane outside the two columns.');
+    }
+    if (typeof order !== 'number' || typeof weight !== 'number' || !Number.isFinite(order) || !Number.isFinite(weight)) {
+        throw new Error('Layout file has a pane without an order or weight.');
+    }
+    const placement = {
+        id: value['id'],
+        column,
+        order,
+        weight,
+    };
+    let next = placement;
+    if (value['span'] === 'bottom') {
+        next = { ...placement, span: 'bottom' };
+    }
+    else if (value['span'] === 'top') {
+        next = { ...placement, fullWidth: true, span: 'top' };
+    }
+    else if (value['fullWidth'] === true) {
+        next = { ...placement, fullWidth: true };
+    }
+    if (value['visible'] === false) {
+        return { ...next, visible: false };
+    }
+    if (value['visible'] !== undefined && value['visible'] !== true) {
+        throw new Error('Layout file has a pane visibility that is not true or false.');
+    }
+    return next;
+}
+function isPaneId(id) {
+    return isEmptyPaneId(id) || POS_WORKSPACE_PANE_IDS.some((paneId) => paneId === id);
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+const POS_WORKSPACE_PANE_LABELS = {
+    header: 'Header',
+    itemEntry: 'Item lookup',
+    basket: 'Basket',
+    actionBar: 'Action bar',
+};
+function isEmptyPaneId(id) {
+    return EMPTY_PANE_ID.test(id);
+}
+function workspacePaneLabel(id) {
+    if (isEmptyPaneId(id)) {
+        const number = EMPTY_PANE_ID.exec(id)?.[1];
+        return `Custom container ${number}`;
+    }
+    return POS_WORKSPACE_PANE_LABELS[id];
+}
+function nextEmptyId(layout) {
+    let highest = 0;
+    for (const pane of layout.panes) {
+        const number = EMPTY_PANE_ID.exec(pane.id)?.[1];
+        if (number) {
+            highest = Math.max(highest, Number(number));
+        }
+    }
+    return `empty-${highest + 1}`;
+}
+/** Same stack the sale screen uses today: header, item lookup, flexible basket, action bar. */
+const POS_WORKSPACE_DEFAULT_LAYOUT = {
+    startColumnRatio: 0.58,
+    panes: [
+        { id: 'header', column: 0, order: 0, weight: 0 },
+        { id: 'itemEntry', column: 0, order: 1, weight: 0 },
+        { id: 'basket', column: 0, order: 2, weight: 1 },
+        { id: 'actionBar', column: 0, order: 3, weight: 0 },
+    ],
+};
+/** Basket docked on the right at full height. Item lookup is marked flexible so it fills above the action bar. */
+const POS_WORKSPACE_BASKET_RIGHT_LAYOUT = {
+    startColumnRatio: 0.58,
+    panes: [
+        { id: 'header', column: 0, order: 0, weight: 0 },
+        { id: 'itemEntry', column: 0, order: 1, weight: 1 },
+        { id: 'actionBar', column: 0, order: 2, weight: 0 },
+        { id: 'basket', column: 1, order: 0, weight: 1 },
+    ],
+};
+/** Nothing placed yet. Edit mode lists the library components so they can be dragged on. */
+const POS_WORKSPACE_EMPTY_LAYOUT = {
+    startColumnRatio: 0.58,
+    panes: [],
+};
+/** Header spans both columns, with the basket docked on the right. */
+const POS_WORKSPACE_HEADER_SPAN_LAYOUT = {
+    startColumnRatio: 0.58,
+    panes: [
+        { id: 'header', column: 0, order: 0, weight: 0, fullWidth: true, span: 'top' },
+        { id: 'itemEntry', column: 0, order: 0, weight: 1 },
+        { id: 'actionBar', column: 0, order: 1, weight: 0 },
+        { id: 'basket', column: 1, order: 0, weight: 1 },
+    ],
+};
+/** Legacy edge. `fullWidth` without `span` stays in the stack where the designer placed it. */
+function paneSpan(pane) {
+    if (pane.span === 'bottom') {
+        return 'bottom';
+    }
+    if (pane.span === 'top') {
+        return 'top';
+    }
+    return null;
+}
+/** True when the pane spans both columns, either in place or on a legacy edge. */
+function paneFillsWidth(pane) {
+    return pane.fullWidth === true || pane.span === 'top' || pane.span === 'bottom';
+}
+const MIN_RATIO = 0.28;
+const MAX_RATIO = 0.72;
+const MIN_WEIGHT = 0.35;
+const MAX_WEIGHT = 8;
+function workspaceGrid(layout, present, options) {
+    const placed = placedPanes(layout, present);
+    const panes = options?.includeHidden
+        ? placed
+        : placed.filter((pane) => pane.visible !== false);
+    const top = panes.filter((pane) => paneSpan(pane) === 'top').sort((a, b) => a.order - b.order);
+    const bottom = panes
+        .filter((pane) => paneSpan(pane) === 'bottom')
+        .sort((a, b) => a.order - b.order);
+    const body = panes.filter((pane) => paneSpan(pane) === null);
+    let grid;
+    if (options?.compact === true) {
+        const stacked = compactStack(columnList(body, 0), columnList(body, 1));
+        grid = singleColumnGrid([...top, ...stacked, ...bottom]);
+    }
+    else {
+        const left = columnList(body, 0);
+        const rightWide = columnList(body, 1).filter((pane) => pane.fullWidth === true);
+        const right = columnList(body, 1).filter((pane) => pane.fullWidth !== true);
+        const sequence = [...left, ...rightWide].sort((a, b) => a.order - b.order || a.column - b.column);
+        grid = gridFromSequence(sequence, right, layout.startColumnRatio);
+        if (bottom.length > 0) {
+            grid = withFooter(bottom, grid);
+        }
+        if (top.length > 0) {
+            grid = withBanner(top, grid);
+        }
+    }
+    return options?.includeHidden ? markConcealed(grid, panes) : grid;
+}
+function markConcealed(grid, panes) {
+    const hidden = new Set(panes.filter((pane) => pane.visible === false).map((pane) => pane.id));
+    if (hidden.size === 0) {
+        return grid;
+    }
+    return {
+        ...grid,
+        panes: grid.panes.map((pane) => (hidden.has(pane.id) ? { ...pane, concealed: true } : pane)),
+    };
+}
+function gridFromSequence(sequence, right, ratio) {
+    if (!sequence.some((pane) => pane.fullWidth === true)) {
+        const left = sequence.filter((pane) => pane.column === 0);
+        return bodyGridFor(left.length > 0 ? left : sequence, right, ratio);
+    }
+    const blocks = [];
+    let run = [];
+    for (const pane of sequence) {
+        if (pane.fullWidth === true) {
+            if (run.length > 0) {
+                blocks.push({ left: run });
+                run = [];
+            }
+            blocks.push({ span: pane, left: [] });
+            continue;
+        }
+        run.push(pane);
+    }
+    if (run.length > 0) {
+        blocks.push({ left: run });
+    }
+    const stacks = blocks.filter((block) => block.span == null);
+    const rights = stacks.map(() => []);
+    if (stacks.length === 0) {
+        if (right.length > 0) {
+            blocks.push({ left: [] });
+            rights.push([...right]);
+        }
+    }
+    else if (stacks.length === 1) {
+        rights[0] = [...right];
+    }
+    else {
+        for (const pane of right) {
+            let best = 0;
+            let bestDistance = Number.POSITIVE_INFINITY;
+            stacks.forEach((block, index) => {
+                const distance = Math.min(...block.left.map((item) => Math.abs(item.order - pane.order)));
+                if (distance < bestDistance) {
+                    best = index;
+                    bestDistance = distance;
+                }
+            });
+            rights[best].push(pane);
+        }
+    }
+    let row = 1;
+    let stackIndex = 0;
+    const tracks = [];
+    const panes = [];
+    let split = false;
+    let columns = 'minmax(0, 1fr)';
+    for (const block of blocks) {
+        const sub = block.span != null
+            ? singleColumnGrid([block.span])
+            : bodyGridFor(block.left, rights[stackIndex++] ?? [], ratio);
+        if (sub.split) {
+            split = true;
+            columns = sub.columns;
+        }
+        for (const track of splitTemplate(sub.rows)) {
+            tracks.push(track);
+        }
+        for (const pane of sub.panes) {
+            panes.push({
+                ...pane,
+                rowStart: pane.rowStart + row - 1,
+                rowEnd: pane.rowEnd + row - 1,
+            });
+        }
+        row += splitTemplate(sub.rows).length;
+    }
+    return {
+        columns: split ? columns : 'minmax(0, 1fr)',
+        rows: tracks.join(' ') || 'minmax(0, 1fr)',
+        split,
+        panes,
+    };
+}
+function splitTemplate(template) {
+    const tracks = [];
+    let depth = 0;
+    let current = '';
+    for (const char of template.trim()) {
+        if (char === '(') {
+            depth += 1;
+        }
+        else if (char === ')') {
+            depth = Math.max(0, depth - 1);
+        }
+        if (depth === 0 && char === ' ') {
+            if (current) {
+                tracks.push(current);
+            }
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    if (current) {
+        tracks.push(current);
+    }
+    return tracks;
+}
+function bodyGridFor(left, right, ratio) {
+    if (left.length === 0 && right.length === 0) {
+        return {
+            columns: 'minmax(0, 1fr)',
+            rows: 'minmax(0, 1fr)',
+            split: false,
+            panes: [],
+        };
+    }
+    if (left.length === 0) {
+        return singleColumnGrid(right);
+    }
+    if (right.length === 0) {
+        return singleColumnGrid(left);
+    }
+    return splitGrid(left, right, ratio);
+}
+function withBanner(banner, body) {
+    const offset = banner.length;
+    return {
+        columns: body.columns,
+        rows: `${banner.map(() => 'auto').join(' ')} ${body.rows}`.trim(),
+        split: body.split,
+        panes: [
+            ...banner.map((pane, index) => ({
+                id: pane.id,
+                column: 1,
+                rowStart: index + 1,
+                rowEnd: index + 2,
+                showResize: false,
+                spanColumns: true,
+            })),
+            ...body.panes.map((pane) => ({
+                ...pane,
+                rowStart: pane.rowStart + offset,
+                rowEnd: pane.rowEnd + offset,
+            })),
+        ],
+    };
+}
+function withFooter(footer, body) {
+    const offset = trackCount(body.rows);
+    return {
+        columns: body.columns,
+        rows: `${body.rows} ${footer.map(() => 'auto').join(' ')}`.trim(),
+        split: body.split,
+        panes: [
+            ...body.panes,
+            ...footer.map((pane, index) => ({
+                id: pane.id,
+                column: 1,
+                rowStart: offset + index + 1,
+                rowEnd: offset + index + 2,
+                showResize: false,
+                spanColumns: true,
+            })),
+        ],
+    };
+}
+function dropColumn(xRatio, splitThreshold, compact) {
+    if (compact) {
+        return 0;
+    }
+    return xRatio >= splitThreshold ? 1 : 0;
+}
+function insertionIndex(pointerY, midpoints) {
+    for (let index = 0; index < midpoints.length; index += 1) {
+        if (pointerY < midpoints[index]) {
+            return index;
+        }
+    }
+    return midpoints.length;
+}
+function movePane(layout, id, column, index) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    if (!current) {
+        return layout;
+    }
+    const remaining = layout.panes.filter((pane) => pane.id !== id);
+    const target = remaining
+        .filter((pane) => pane.column === column && paneSpan(pane) === null)
+        .sort((a, b) => a.order - b.order);
+    const others = remaining.filter((pane) => paneSpan(pane) !== null || pane.column !== column);
+    const nextIndex = clamp(index, 0, target.length);
+    // Drag only places. Keep Full width when the designer already turned it on; never invent it
+    // from a legacy span edge.
+    const placed = current.fullWidth === true
+        ? { ...current, column, span: undefined, fullWidth: true }
+        : { ...current, column, span: undefined, fullWidth: undefined };
+    target.splice(nextIndex, 0, placed);
+    const panes = sortPanes([
+        ...reindex(others),
+        ...target.map((pane, order) => ({ ...pane, column, order })),
+    ]);
+    const next = { ...layout, panes };
+    return sameLayout(layout, next) ? layout : next;
+}
+/** Adds a region to a column. An omitted index stacks it after the panes already there. */
+function addPane(layout, id, column = 0, index) {
+    if (layout.panes.some((pane) => pane.id === id)) {
+        return layout;
+    }
+    const target = layout.panes
+        .filter((pane) => pane.column === column && paneSpan(pane) === null)
+        .sort((a, b) => a.order - b.order);
+    const others = layout.panes.filter((pane) => paneSpan(pane) !== null || pane.column !== column);
+    target.splice(index === undefined ? target.length : clamp(index, 0, target.length), 0, {
+        id,
+        column,
+        order: 0,
+        weight: id === 'basket' ? 1 : 0,
+    });
+    return {
+        ...layout,
+        panes: sortPanes([
+            ...reindex(others),
+            ...target.map((pane, order) => ({ ...pane, column, order })),
+        ]),
+    };
+}
+/** Drops a region from the arrangement. A library component can be added again; an empty slot is gone. */
+function removePane(layout, id) {
+    if (!layout.panes.some((pane) => pane.id === id)) {
+        return layout;
+    }
+    return {
+        ...layout,
+        panes: sortPanes(reindex(layout.panes.filter((pane) => pane.id !== id))),
+    };
+}
+/** Lifts a pane into a row that spans both columns. Column placement is kept for when it returns. */
+function dockFullWidth(layout, id, index) {
+    return dockSpan(layout, id, 'top', index);
+}
+/** Places a pane in a row that spans both columns, above or below the split. */
+function dockSpan(layout, id, edge, index) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    if (!current) {
+        return layout;
+    }
+    const remaining = layout.panes.filter((pane) => pane.id !== id);
+    const top = remaining
+        .filter((pane) => paneSpan(pane) === 'top')
+        .sort((a, b) => a.order - b.order);
+    const bottom = remaining
+        .filter((pane) => paneSpan(pane) === 'bottom')
+        .sort((a, b) => a.order - b.order);
+    const body = remaining.filter((pane) => paneSpan(pane) === null);
+    const group = edge === 'top' ? top : bottom;
+    group.splice(clamp(index, 0, group.length), 0, current);
+    const panes = sortPanes([
+        ...top.map((pane, order) => ({ ...pane, fullWidth: true, span: 'top', order })),
+        ...bottom.map((pane, order) => ({ ...pane, fullWidth: false, span: 'bottom', order })),
+        ...reindex(body),
+    ]);
+    const next = { ...layout, panes };
+    return sameLayout(layout, next) ? layout : next;
+}
+function resizeAdjacent(layout, id, nextId, delta) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    const next = layout.panes.find((pane) => pane.id === nextId);
+    if (!current || !next || current.id === next.id) {
+        return layout;
+    }
+    const currentBase = current.weight > 0 ? current.weight : 1;
+    const nextBase = next.weight > 0 ? next.weight : 1;
+    const grown = clamp(currentBase + delta, MIN_WEIGHT, MAX_WEIGHT);
+    const requested = grown - currentBase;
+    const nextWeight = clamp(nextBase - requested, MIN_WEIGHT, MAX_WEIGHT);
+    const taken = nextBase - nextWeight;
+    const currentWeight = clamp(currentBase + taken, MIN_WEIGHT, MAX_WEIGHT);
+    return {
+        ...layout,
+        panes: layout.panes.map((pane) => {
+            if (pane.id === current.id) {
+                return { ...pane, weight: roundWeight(currentWeight) };
+            }
+            if (pane.id === next.id) {
+                return { ...pane, weight: roundWeight(nextWeight) };
+            }
+            return pane;
+        }),
+    };
+}
+/** Weight 0 sizes to content. A positive weight shares leftover height in that column. */
+/** Turns full width on at the pane's current place, or returns it to its column width. */
+function setPaneFullWidth(layout, id, enabled) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    if (!current) {
+        return layout;
+    }
+    const wide = paneFillsWidth(current);
+    if (!enabled && !wide) {
+        return layout;
+    }
+    if (enabled && current.fullWidth === true && current.span == null) {
+        return layout;
+    }
+    return {
+        ...layout,
+        panes: layout.panes.map((pane) => {
+            if (pane.id !== id) {
+                return pane;
+            }
+            if (!enabled) {
+                const { span: _span, fullWidth: _fullWidth, ...rest } = pane;
+                return rest;
+            }
+            const { span: _span, ...rest } = pane;
+            return { ...rest, fullWidth: true };
+        }),
+    };
+}
+function setPaneWeight(layout, id, weight) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    if (!current || current.weight === weight) {
+        return layout;
+    }
+    return {
+        ...layout,
+        panes: layout.panes.map((pane) => (pane.id === id ? { ...pane, weight } : pane)),
+    };
+}
+/** `false` keeps the pane in the layout and hides it on the till. `true` clears that flag. */
+function setPaneVisible(layout, id, visible) {
+    const current = layout.panes.find((pane) => pane.id === id);
+    if (!current || (current.visible !== false) === visible) {
+        return layout;
+    }
+    return {
+        ...layout,
+        panes: layout.panes.map((pane) => {
+            if (pane.id !== id) {
+                return pane;
+            }
+            if (visible) {
+                const { visible: _hidden, ...shown } = pane;
+                return shown;
+            }
+            return { ...pane, visible: false };
+        }),
+    };
+}
+function setColumnRatio(layout, ratio) {
+    const startColumnRatio = roundWeight(clamp(ratio, MIN_RATIO, MAX_RATIO));
+    if (startColumnRatio === layout.startColumnRatio) {
+        return layout;
+    }
+    return { ...layout, startColumnRatio };
+}
+function sameLayout(left, right) {
+    if (left.startColumnRatio !== right.startColumnRatio ||
+        left.panes.length !== right.panes.length) {
+        return false;
+    }
+    const byId = (layout) => layout.panes.slice().sort((a, b) => a.id.localeCompare(b.id));
+    return byId(left).every((pane, index) => {
+        const other = byId(right)[index];
+        return (pane.id === other.id &&
+            pane.column === other.column &&
+            pane.order === other.order &&
+            pane.weight === other.weight &&
+            paneSpan(pane) === paneSpan(other) &&
+            (pane.fullWidth === true) === (other.fullWidth === true) &&
+            (pane.visible !== false) === (other.visible !== false));
+    });
+}
+function placedPanes(layout, present) {
+    const presentIds = new Set(present);
+    const seen = new Set();
+    const panes = [];
+    for (const pane of layout.panes) {
+        if (seen.has(pane.id)) {
+            continue;
+        }
+        if (!presentIds.has(pane.id) && !isEmptyPaneId(pane.id)) {
+            continue;
+        }
+        seen.add(pane.id);
+        panes.push(pane);
+    }
+    return panes;
+}
+function visualColumns(panes, compact) {
+    const left = columnList(panes, 0);
+    const right = columnList(panes, 1);
+    if (compact) {
+        return [compactStack(left, right), []];
+    }
+    if (right.length === 0) {
+        return [left, []];
+    }
+    if (left.length === 0) {
+        return [right, []];
+    }
+    return [left, right];
+}
+/** On a narrow screen, keep the header at the top and the action bar at the bottom. */
+function compactStack(left, right) {
+    const all = [...left, ...right];
+    const header = all.filter((pane) => pane.id === 'header');
+    const actionBar = all.filter((pane) => pane.id === 'actionBar');
+    const middle = all.filter((pane) => pane.id !== 'header' && pane.id !== 'actionBar');
+    return [...header, ...middle, ...actionBar];
+}
+function columnList(panes, column) {
+    return panes.filter((pane) => pane.column === column).sort((a, b) => a.order - b.order);
+}
+function singleColumnGrid(panes) {
+    const rows = panes.map((pane) => rowTrack(pane.weight));
+    return {
+        columns: 'minmax(0, 1fr)',
+        rows: rows.join(' '),
+        split: false,
+        panes: panes.map((pane, index) => ({
+            id: pane.id,
+            column: 1,
+            rowStart: index + 1,
+            rowEnd: index + 2,
+            showResize: index < panes.length - 1,
+            spanColumns: pane.fullWidth === true ? true : undefined,
+        })),
+    };
+}
+function splitGrid(left, right, ratio) {
+    const spanLeft = left.length === 1 && right.length > 1;
+    const spanRight = right.length === 1 && left.length > 1;
+    if (!spanLeft && !spanRight) {
+        if (left.length === 1 && right.length === 1) {
+            return {
+                columns: columnTemplate(ratio),
+                rows: 'minmax(0, 1fr)',
+                split: true,
+                panes: [gridPane(left[0], 1, 1, 2, false), gridPane(right[0], 2, 1, 2, false)],
+            };
+        }
+        return sharedRowGrid(left, right, ratio);
+    }
+    const stack = spanRight ? left : right;
+    const spanning = spanRight ? right[0] : left[0];
+    const stackColumn = spanRight ? 1 : 2;
+    const spanColumn = spanRight ? 2 : 1;
+    const rows = stackTracks(stack);
+    return {
+        columns: columnTemplate(ratio),
+        rows: rows.join(' '),
+        split: true,
+        panes: [
+            ...stack.map((pane, index) => gridPane(pane, stackColumn, index + 1, index + 2, index < stack.length - 1)),
+            gridPane(spanning, spanColumn, 1, rows.length + 1, false),
+        ],
+    };
+}
+/** Row size follows weight. Weight 0 is the content height. A positive weight shares leftover height. */
+function stackTracks(stack) {
+    return stack.map((pane) => rowTrack(pane.weight));
+}
+function sharedRowGrid(left, right, ratio) {
+    const rowCount = Math.max(left.length, right.length);
+    const rows = [];
+    for (let index = 0; index < rowCount; index += 1) {
+        const weight = Math.max(left[index]?.weight ?? 0, right[index]?.weight ?? 0);
+        rows.push(weight > 0 ? rowTrack(weight) : 'auto');
+    }
+    const place = (list, column) => list.map((pane, index) => gridPane(pane, column, index + 1, index + 2, index < list.length - 1));
+    return {
+        columns: columnTemplate(ratio),
+        rows: rows.join(' '),
+        split: true,
+        panes: [...place(left, 1), ...place(right, 2)],
+    };
+}
+function gridPane(pane, column, rowStart, rowEnd, showResize) {
+    return { id: pane.id, column, rowStart, rowEnd, showResize };
+}
+function columnTemplate(ratio) {
+    const start = roundWeight(clamp(ratio, MIN_RATIO, MAX_RATIO));
+    const end = roundWeight(1 - start);
+    return `minmax(0, ${start}fr) minmax(0, ${end}fr)`;
+}
+/** Counts CSS grid tracks. Spaces inside minmax() stay part of one track. */
+function trackCount(template) {
+    let depth = 0;
+    let count = 0;
+    let current = false;
+    for (const char of template.trim()) {
+        if (char === '(') {
+            depth += 1;
+        }
+        else if (char === ')') {
+            depth = Math.max(0, depth - 1);
+        }
+        if (depth === 0 && char === ' ') {
+            current = false;
+            continue;
+        }
+        if (!current) {
+            current = true;
+            count += 1;
+        }
+    }
+    return count;
+}
+function rowTrack(weight) {
+    if (weight <= 0) {
+        return 'auto';
+    }
+    return `minmax(0, ${roundWeight(weight)}fr)`;
+}
+function reindex(panes) {
+    const columns = [0, 1];
+    const result = [];
+    for (const column of columns) {
+        columnList(panes, column).forEach((pane, order) => {
+            result.push({ ...pane, order });
+        });
+    }
+    return result;
+}
+function sortPanes(panes) {
+    return panes.slice().sort((a, b) => a.column - b.column || a.order - b.order);
+}
+function roundWeight(value) {
+    return Math.round(value * 100) / 100;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+class PosWorkspacePane {
+    workspace = inject(POS_WORKSPACE);
+    paneId = input.required(...(ngDevMode ? [{ debugName: "paneId" }] : /* istanbul ignore next */ []));
+    /** Draws the unassigned-slot message. The POS replaces this by projecting the same pane id. */
+    placeholder = input(false, { ...(ngDevMode ? { debugName: "placeholder" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    place = computed(() => this.workspace.placements().get(this.paneId()), ...(ngDevMode ? [{ debugName: "place" }] : /* istanbul ignore next */ []));
+    dragging = computed(() => this.workspace.draggingPane() === this.paneId(), ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    columnStyle = computed(() => {
+        const place = this.place();
+        if (!place) {
+            return null;
+        }
+        return place.spanColumns ? '1 / -1' : place.column;
+    }, ...(ngDevMode ? [{ debugName: "columnStyle" }] : /* istanbul ignore next */ []));
+    rowStyle = computed(() => {
+        const place = this.place();
+        return place ? `${place.rowStart} / ${place.rowEnd}` : null;
+    }, ...(ngDevMode ? [{ debugName: "rowStyle" }] : /* istanbul ignore next */ []));
+    showResize = computed(() => this.place()?.showResize === true, ...(ngDevMode ? [{ debugName: "showResize" }] : /* istanbul ignore next */ []));
+    concealed = computed(() => this.place()?.concealed === true, ...(ngDevMode ? [{ debugName: "concealed" }] : /* istanbul ignore next */ []));
+    settingsOpen = computed(() => this.workspace.settingsPane() === this.paneId(), ...(ngDevMode ? [{ debugName: "settingsOpen" }] : /* istanbul ignore next */ []));
+    fullWidth = computed(() => this.workspace.fullWidthIds().has(this.paneId()), ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.place()?.concealed !== true, ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    flexible = computed(() => this.workspace.flexibleIds().has(this.paneId()), ...(ngDevMode ? [{ debugName: "flexible" }] : /* istanbul ignore next */ []));
+    label = computed(() => workspacePaneLabel(this.paneId()), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    menuAbove = computed(() => {
+        const place = this.place();
+        if (!place) {
+            return false;
+        }
+        let maxEnd = place.rowEnd;
+        for (const item of this.workspace.placements().values()) {
+            maxEnd = Math.max(maxEnd, item.rowEnd);
+        }
+        return place.rowEnd === maxEnd && this.workspace.placements().size > 1;
+    }, ...(ngDevMode ? [{ debugName: "menuAbove" }] : /* istanbul ignore next */ []));
+    handleLabel = computed(() => `Move ${this.label()}. Arrow keys change its position.`, ...(ngDevMode ? [{ debugName: "handleLabel" }] : /* istanbul ignore next */ []));
+    resizeLabel = computed(() => `Resize ${this.label()}. Arrow keys change its height.`, ...(ngDevMode ? [{ debugName: "resizeLabel" }] : /* istanbul ignore next */ []));
+    settingsLabel = computed(() => `${this.label()} settings`, ...(ngDevMode ? [{ debugName: "settingsLabel" }] : /* istanbul ignore next */ []));
+    closeMenuLabel = computed(() => `Close ${this.label()} settings`, ...(ngDevMode ? [{ debugName: "closeMenuLabel" }] : /* istanbul ignore next */ []));
+    removeLabel = computed(() => `Remove ${this.label()}`, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    onDragPointerDown(event) {
+        if (!this.workspace.editing()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspace.closePaneSettings(this.paneId());
+        this.capture(event);
+        this.workspace.beginPaneDrag(this.paneId(), event);
+    }
+    onDragPointerMove(event) {
+        if (this.workspace.draggingPane() !== this.paneId()) {
+            return;
+        }
+        this.workspace.updatePaneDrag(event);
+    }
+    onDragPointerUp(event) {
+        if (this.workspace.draggingPane() !== this.paneId()) {
+            return;
+        }
+        this.workspace.endPaneDrag(event);
+    }
+    onHandleKeydown(event) {
+        if (!this.isMoveKey(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspace.moveByKey(this.paneId(), event.key);
+    }
+    toggleSettings(event) {
+        event.stopPropagation();
+        this.workspace.togglePaneSettings(this.paneId());
+    }
+    closeSettings(event) {
+        event.stopPropagation();
+        this.workspace.closePaneSettings(this.paneId());
+    }
+    onSettingsKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.stopPropagation();
+        this.workspace.closePaneSettings(this.paneId());
+    }
+    onVisible(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+            return;
+        }
+        this.workspace.setVisible(this.paneId(), target.checked);
+    }
+    onFlexible(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+            return;
+        }
+        this.workspace.setFlexible(this.paneId(), target.checked);
+    }
+    onFullWidth(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+            return;
+        }
+        this.workspace.setFullWidth(this.paneId(), target.checked);
+    }
+    onRemove(event) {
+        event.stopPropagation();
+        this.workspace.closePaneSettings(this.paneId());
+        this.workspace.removeFromLayout(this.paneId());
+    }
+    onResizePointerDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.capture(event);
+        this.workspace.beginPaneResize(this.paneId(), event);
+    }
+    onResizePointerMove(event) {
+        this.workspace.updatePaneResize(event);
+    }
+    onResizePointerUp() {
+        this.workspace.endPaneResize();
+    }
+    onResizeKeydown(event) {
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspace.resizeByKey(this.paneId(), event.key === 'ArrowDown' ? 1 : -1);
+    }
+    capture(event) {
+        const handle = event.currentTarget;
+        if (!(handle instanceof HTMLElement)) {
+            return;
+        }
+        try {
+            handle.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // The pointer is not active yet. The drag still follows pointerup on the handle.
+        }
+    }
+    isMoveKey(key) {
+        return key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspacePane, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosWorkspacePane, isStandalone: true, selector: "pos-workspace-pane", inputs: { paneId: { classPropertyName: "paneId", publicName: "paneId", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.pos-workspace-pane--editing": "workspace.editing()", "class.pos-workspace-pane--dragging": "dragging()", "class.pos-workspace-pane--hidden": "concealed()", "attr.data-pane": "paneId()", "style.display": "place() ? null : \"none\"", "style.grid-column": "columnStyle()", "style.grid-row": "rowStyle()" }, classAttribute: "pos-workspace-pane" }, ngImport: i0, template: "@if (concealed()) {\r\n  <p class=\"pos-workspace-pane__concealed\">Hidden on the till. {{ label() }}.</p>\r\n}\r\n\r\n<div class=\"pos-workspace-pane__content\">\r\n  <ng-content />\r\n  @if (placeholder()) {\r\n    <p class=\"pos-workspace-pane__slot\">{{ label() }}. The POS assigns what appears here.</p>\r\n  }\r\n</div>\r\n\r\n@if (workspace.editing()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__handle\"\r\n    [attr.aria-label]=\"handleLabel()\"\r\n    aria-keyshortcuts=\"ArrowUp ArrowDown ArrowLeft ArrowRight\"\r\n    (pointerdown)=\"onDragPointerDown($event)\"\r\n    (pointermove)=\"onDragPointerMove($event)\"\r\n    (pointerup)=\"onDragPointerUp($event)\"\r\n    (pointercancel)=\"onDragPointerUp($event)\"\r\n    (keydown)=\"onHandleKeydown($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <circle cx=\"5\" cy=\"3\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"3\" r=\"1.2\" />\r\n      <circle cx=\"5\" cy=\"8\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"8\" r=\"1.2\" />\r\n      <circle cx=\"5\" cy=\"13\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"13\" r=\"1.2\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__settings\"\r\n    [attr.aria-label]=\"settingsLabel()\"\r\n    [attr.aria-expanded]=\"settingsOpen()\"\r\n    (click)=\"toggleSettings($event)\"\r\n    (keydown)=\"onSettingsKeydown($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <path d=\"M2 4h12M2 8h12M2 12h12\" />\r\n      <circle cx=\"6\" cy=\"4\" r=\"1.5\" />\r\n      <circle cx=\"11\" cy=\"8\" r=\"1.5\" />\r\n      <circle cx=\"7\" cy=\"12\" r=\"1.5\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__close\"\r\n    [attr.aria-label]=\"removeLabel()\"\r\n    (click)=\"onRemove($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\r\n    </svg>\r\n  </button>\r\n\r\n  @if (settingsOpen()) {\r\n    <div\r\n      class=\"pos-workspace-pane__menu\"\r\n      [class.pos-workspace-pane__menu--above]=\"menuAbove()\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"settingsLabel()\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace-pane__menu-close\"\r\n        [attr.aria-label]=\"closeMenuLabel()\"\r\n        (click)=\"closeSettings($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n          <path d=\"M4 4l8 8M12 4l-8 8\" />\r\n        </svg>\r\n      </button>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"shown()\" (change)=\"onVisible($event)\" />\r\n        Visible\r\n      </label>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"flexible()\" (change)=\"onFlexible($event)\" />\r\n        Flexible height\r\n      </label>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"fullWidth()\" (change)=\"onFullWidth($event)\" />\r\n        Full width\r\n      </label>\r\n    </div>\r\n  }\r\n\r\n  @if (showResize()) {\r\n    <div\r\n      class=\"pos-workspace-pane__resize\"\r\n      role=\"separator\"\r\n      aria-orientation=\"horizontal\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"resizeLabel()\"\r\n      aria-keyshortcuts=\"ArrowUp ArrowDown\"\r\n      (pointerdown)=\"onResizePointerDown($event)\"\r\n      (pointermove)=\"onResizePointerMove($event)\"\r\n      (pointerup)=\"onResizePointerUp()\"\r\n      (pointercancel)=\"onResizePointerUp()\"\r\n      (keydown)=\"onResizeKeydown($event)\"\r\n    ></div>\r\n  }\r\n}\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box}:host(.pos-workspace-pane--editing){outline:1px dashed var(--pos-color-primary);outline-offset:2px;border-radius:var(--pos-radius-sm)}:host(.pos-workspace-pane--editing) .pos-workspace-pane__content{padding-left:calc(4 * var(--pos-space-xs) + 3 * var(--pos-space-xl) + var(--pos-space-sm))}:host(.pos-workspace-pane--dragging){opacity:.55}:host(.pos-workspace-pane--hidden) .pos-workspace-pane__content{visibility:hidden}.pos-workspace-pane__concealed{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:var(--pos-space-lg);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-md);text-align:center;pointer-events:none}.pos-workspace-pane__content{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;overflow:auto}.pos-workspace-pane__content>*{flex:1 1 auto;min-width:0;min-height:0}.pos-workspace-pane__slot{display:flex;align-items:center;justify-content:center;margin:0;min-height:calc(var(--pos-button-min-height) * 2);padding:var(--pos-space-lg);border:1px dashed var(--pos-color-border);border-radius:var(--pos-radius-md);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-md);text-align:center}.pos-workspace-pane__handle{position:absolute;z-index:2;top:0;left:0;display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:grab;touch-action:none}.pos-workspace-pane__handle:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__handle svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:currentColor}.pos-workspace-pane__handle:active{cursor:grabbing}.pos-workspace-pane__handle:focus-visible,.pos-workspace-pane__close:focus-visible,.pos-workspace-pane__settings:focus-visible,.pos-workspace-pane__menu-close:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace-pane__close{position:absolute;z-index:3;top:0;left:calc(3 * var(--pos-space-xs) + 2 * var(--pos-space-xl));display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__close:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__close svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__settings{position:absolute;z-index:3;top:0;left:calc(var(--pos-space-xs) + var(--pos-space-xl) + var(--pos-space-xs));display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__settings:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__settings svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__settings circle{fill:var(--pos-color-surface)}.pos-workspace-pane__menu{position:absolute;z-index:4;top:var(--pos-button-min-height);left:calc(var(--pos-space-xs) + var(--pos-space-xl) + var(--pos-space-xs));display:flex;flex-direction:column;padding:var(--pos-space-sm) var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace-pane__menu-close{align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);margin:calc(var(--pos-space-sm) * -1) calc(var(--pos-space-md) * -1) 0 auto;padding:0;border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__menu-close svg{width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__menu--above{top:auto;bottom:var(--pos-button-min-height)}.pos-workspace-pane__option{display:inline-flex;align-items:center;gap:var(--pos-space-sm);min-height:var(--pos-button-min-height);font-size:var(--pos-font-size-md);white-space:nowrap}.pos-workspace-pane__option input{width:var(--pos-space-xl);height:var(--pos-space-xl)}.pos-workspace-pane__resize{position:absolute;z-index:2;right:var(--pos-space-xl);bottom:calc(var(--pos-space-xl) / -2);left:var(--pos-space-xl);height:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ns-resize;touch-action:none}.pos-workspace-pane__resize:before{content:\"\";position:absolute;right:0;left:0;top:50%;height:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translateY(-50%)}.pos-workspace-pane__resize:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}@media(max-width:40rem){.pos-workspace-pane__resize{right:var(--pos-space-lg);left:var(--pos-space-lg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspacePane, decorators: [{
+            type: Component,
+            args: [{ selector: 'pos-workspace-pane', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'pos-workspace-pane',
+                        '[class.pos-workspace-pane--editing]': 'workspace.editing()',
+                        '[class.pos-workspace-pane--dragging]': 'dragging()',
+                        '[class.pos-workspace-pane--hidden]': 'concealed()',
+                        '[attr.data-pane]': 'paneId()',
+                        '[style.display]': 'place() ? null : "none"',
+                        '[style.grid-column]': 'columnStyle()',
+                        '[style.grid-row]': 'rowStyle()',
+                    }, template: "@if (concealed()) {\r\n  <p class=\"pos-workspace-pane__concealed\">Hidden on the till. {{ label() }}.</p>\r\n}\r\n\r\n<div class=\"pos-workspace-pane__content\">\r\n  <ng-content />\r\n  @if (placeholder()) {\r\n    <p class=\"pos-workspace-pane__slot\">{{ label() }}. The POS assigns what appears here.</p>\r\n  }\r\n</div>\r\n\r\n@if (workspace.editing()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__handle\"\r\n    [attr.aria-label]=\"handleLabel()\"\r\n    aria-keyshortcuts=\"ArrowUp ArrowDown ArrowLeft ArrowRight\"\r\n    (pointerdown)=\"onDragPointerDown($event)\"\r\n    (pointermove)=\"onDragPointerMove($event)\"\r\n    (pointerup)=\"onDragPointerUp($event)\"\r\n    (pointercancel)=\"onDragPointerUp($event)\"\r\n    (keydown)=\"onHandleKeydown($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <circle cx=\"5\" cy=\"3\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"3\" r=\"1.2\" />\r\n      <circle cx=\"5\" cy=\"8\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"8\" r=\"1.2\" />\r\n      <circle cx=\"5\" cy=\"13\" r=\"1.2\" />\r\n      <circle cx=\"11\" cy=\"13\" r=\"1.2\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__settings\"\r\n    [attr.aria-label]=\"settingsLabel()\"\r\n    [attr.aria-expanded]=\"settingsOpen()\"\r\n    (click)=\"toggleSettings($event)\"\r\n    (keydown)=\"onSettingsKeydown($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <path d=\"M2 4h12M2 8h12M2 12h12\" />\r\n      <circle cx=\"6\" cy=\"4\" r=\"1.5\" />\r\n      <circle cx=\"11\" cy=\"8\" r=\"1.5\" />\r\n      <circle cx=\"7\" cy=\"12\" r=\"1.5\" />\r\n    </svg>\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-workspace-pane__close\"\r\n    [attr.aria-label]=\"removeLabel()\"\r\n    (click)=\"onRemove($event)\"\r\n  >\r\n    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\r\n    </svg>\r\n  </button>\r\n\r\n  @if (settingsOpen()) {\r\n    <div\r\n      class=\"pos-workspace-pane__menu\"\r\n      [class.pos-workspace-pane__menu--above]=\"menuAbove()\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"settingsLabel()\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace-pane__menu-close\"\r\n        [attr.aria-label]=\"closeMenuLabel()\"\r\n        (click)=\"closeSettings($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n          <path d=\"M4 4l8 8M12 4l-8 8\" />\r\n        </svg>\r\n      </button>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"shown()\" (change)=\"onVisible($event)\" />\r\n        Visible\r\n      </label>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"flexible()\" (change)=\"onFlexible($event)\" />\r\n        Flexible height\r\n      </label>\r\n      <label class=\"pos-workspace-pane__option\">\r\n        <input type=\"checkbox\" [checked]=\"fullWidth()\" (change)=\"onFullWidth($event)\" />\r\n        Full width\r\n      </label>\r\n    </div>\r\n  }\r\n\r\n  @if (showResize()) {\r\n    <div\r\n      class=\"pos-workspace-pane__resize\"\r\n      role=\"separator\"\r\n      aria-orientation=\"horizontal\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"resizeLabel()\"\r\n      aria-keyshortcuts=\"ArrowUp ArrowDown\"\r\n      (pointerdown)=\"onResizePointerDown($event)\"\r\n      (pointermove)=\"onResizePointerMove($event)\"\r\n      (pointerup)=\"onResizePointerUp()\"\r\n      (pointercancel)=\"onResizePointerUp()\"\r\n      (keydown)=\"onResizeKeydown($event)\"\r\n    ></div>\r\n  }\r\n}\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box}:host(.pos-workspace-pane--editing){outline:1px dashed var(--pos-color-primary);outline-offset:2px;border-radius:var(--pos-radius-sm)}:host(.pos-workspace-pane--editing) .pos-workspace-pane__content{padding-left:calc(4 * var(--pos-space-xs) + 3 * var(--pos-space-xl) + var(--pos-space-sm))}:host(.pos-workspace-pane--dragging){opacity:.55}:host(.pos-workspace-pane--hidden) .pos-workspace-pane__content{visibility:hidden}.pos-workspace-pane__concealed{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:var(--pos-space-lg);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-md);text-align:center;pointer-events:none}.pos-workspace-pane__content{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;overflow:auto}.pos-workspace-pane__content>*{flex:1 1 auto;min-width:0;min-height:0}.pos-workspace-pane__slot{display:flex;align-items:center;justify-content:center;margin:0;min-height:calc(var(--pos-button-min-height) * 2);padding:var(--pos-space-lg);border:1px dashed var(--pos-color-border);border-radius:var(--pos-radius-md);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-md);text-align:center}.pos-workspace-pane__handle{position:absolute;z-index:2;top:0;left:0;display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:grab;touch-action:none}.pos-workspace-pane__handle:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__handle svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:currentColor}.pos-workspace-pane__handle:active{cursor:grabbing}.pos-workspace-pane__handle:focus-visible,.pos-workspace-pane__close:focus-visible,.pos-workspace-pane__settings:focus-visible,.pos-workspace-pane__menu-close:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace-pane__close{position:absolute;z-index:3;top:0;left:calc(3 * var(--pos-space-xs) + 2 * var(--pos-space-xl));display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__close:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__close svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__settings{position:absolute;z-index:3;top:0;left:calc(var(--pos-space-xs) + var(--pos-space-xl) + var(--pos-space-xs));display:inline-flex;align-items:flex-start;justify-content:flex-start;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:var(--pos-space-xs);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__settings:before{content:\"\";width:var(--pos-space-xl);height:var(--pos-space-xl);border:1px solid var(--pos-color-primary);border-radius:var(--pos-radius-sm);background:var(--pos-color-surface)}.pos-workspace-pane__settings svg{position:absolute;z-index:1;top:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);left:calc(var(--pos-space-xs) + (var(--pos-space-xl) - var(--pos-space-lg)) / 2);width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__settings circle{fill:var(--pos-color-surface)}.pos-workspace-pane__menu{position:absolute;z-index:4;top:var(--pos-button-min-height);left:calc(var(--pos-space-xs) + var(--pos-space-xl) + var(--pos-space-xs));display:flex;flex-direction:column;padding:var(--pos-space-sm) var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace-pane__menu-close{align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);margin:calc(var(--pos-space-sm) * -1) calc(var(--pos-space-md) * -1) 0 auto;padding:0;border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);cursor:pointer}.pos-workspace-pane__menu-close svg{width:var(--pos-space-lg);height:var(--pos-space-lg);fill:none;stroke:currentColor;stroke-width:1.4}.pos-workspace-pane__menu--above{top:auto;bottom:var(--pos-button-min-height)}.pos-workspace-pane__option{display:inline-flex;align-items:center;gap:var(--pos-space-sm);min-height:var(--pos-button-min-height);font-size:var(--pos-font-size-md);white-space:nowrap}.pos-workspace-pane__option input{width:var(--pos-space-xl);height:var(--pos-space-xl)}.pos-workspace-pane__resize{position:absolute;z-index:2;right:var(--pos-space-xl);bottom:calc(var(--pos-space-xl) / -2);left:var(--pos-space-xl);height:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ns-resize;touch-action:none}.pos-workspace-pane__resize:before{content:\"\";position:absolute;right:0;left:0;top:50%;height:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translateY(-50%)}.pos-workspace-pane__resize:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}@media(max-width:40rem){.pos-workspace-pane__resize{right:var(--pos-space-lg);left:var(--pos-space-lg)}}\n"] }]
+        }], propDecorators: { paneId: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneId", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+const COMPACT_WIDTH = 720;
+const DOCK_THRESHOLD = 0.7;
+/** Band above a docked right column where a drop spans both columns. */
+const FULL_WIDTH_BAND = 72;
+class PosWorkspace {
+    hostRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    paneRefs = contentChildren(PosWorkspacePane, ...(ngDevMode ? [{ debugName: "paneRefs" }] : /* istanbul ignore next */ []));
+    frameRef = viewChild('frame', ...(ngDevMode ? [{ debugName: "frameRef" }] : /* istanbul ignore next */ []));
+    /** Draws outlines, drag handles, and resize controls. */
+    editing = input(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    /** Starting arrangement. Edits stay in this view until a new layout input arrives. */
+    layout = input(POS_WORKSPACE_DEFAULT_LAYOUT, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Fired when the arrangement changes. Nothing is stored beyond this view. */
+    layoutChange = output();
+    /** The arrangement to pass back as `layout` from the consuming POS. */
+    layoutExport = output();
+    layoutState = linkedSignal(() => this.layout(), ...(ngDevMode ? [{ debugName: "layoutState" }] : /* istanbul ignore next */ []));
+    viewportWidth = signal(1280, ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    dropTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropTarget" }] : /* istanbul ignore next */ []));
+    resizeSession = null;
+    paletteGesture = null;
+    ignorePaletteClick = false;
+    paletteOpen = signal(false, ...(ngDevMode ? [{ debugName: "paletteOpen" }] : /* istanbul ignore next */ []));
+    paletteMenuLifted = signal(false, ...(ngDevMode ? [{ debugName: "paletteMenuLifted" }] : /* istanbul ignore next */ []));
+    splitting = false;
+    splitStartLayout = null;
+    history = [];
+    canUndo = signal(false, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    draggingPane = signal(null, ...(ngDevMode ? [{ debugName: "draggingPane" }] : /* istanbul ignore next */ []));
+    settingsPane = signal(null, ...(ngDevMode ? [{ debugName: "settingsPane" }] : /* istanbul ignore next */ []));
+    spans = computed(() => {
+        const map = new Map();
+        for (const pane of this.layoutState().panes) {
+            map.set(pane.id, paneSpan(pane));
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "spans" }] : /* istanbul ignore next */ []));
+    fullWidthIds = computed(() => {
+        const ids = new Set();
+        for (const pane of this.layoutState().panes) {
+            if (paneFillsWidth(pane)) {
+                ids.add(pane.id);
+            }
+        }
+        return ids;
+    }, ...(ngDevMode ? [{ debugName: "fullWidthIds" }] : /* istanbul ignore next */ []));
+    flexibleIds = computed(() => {
+        const ids = new Set();
+        for (const pane of this.layoutState().panes) {
+            if (pane.weight > 0) {
+                ids.add(pane.id);
+            }
+        }
+        return ids;
+    }, ...(ngDevMode ? [{ debugName: "flexibleIds" }] : /* istanbul ignore next */ []));
+    dropIndicator = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicator" }] : /* istanbul ignore next */ []));
+    dropHints = signal([], ...(ngDevMode ? [{ debugName: "dropHints" }] : /* istanbul ignore next */ []));
+    status = signal('', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    compact = computed(() => this.viewportWidth() < COMPACT_WIDTH, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    grid = computed(() => workspaceGrid(this.layoutState(), this.paneRefs().map((pane) => pane.paneId()), { compact: this.compact(), includeHidden: this.editing() }), ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    /** Library components the host projected that are not on the screen yet. */
+    palette = computed(() => {
+        const placed = new Set(this.layoutState().panes.map((pane) => pane.id));
+        const projected = new Set(this.paneRefs().map((pane) => pane.paneId()));
+        return POS_WORKSPACE_PANE_IDS.filter((id) => projected.has(id) && !placed.has(id));
+    }, ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    /** Empty slots with no projected content. The POS fills a slot by projecting the same id. */
+    emptySlots = computed(() => {
+        const projected = new Set(this.paneRefs().map((pane) => pane.paneId()));
+        const seen = new Set();
+        const slots = [];
+        for (const pane of this.layoutState().panes) {
+            if (!isEmptyPaneId(pane.id)) {
+                continue;
+            }
+            if (projected.has(pane.id) || seen.has(pane.id)) {
+                continue;
+            }
+            seen.add(pane.id);
+            slots.push(pane.id);
+        }
+        return slots;
+    }, ...(ngDevMode ? [{ debugName: "emptySlots" }] : /* istanbul ignore next */ []));
+    paneLabel = workspacePaneLabel;
+    placements = computed(() => {
+        const map = new Map();
+        for (const pane of this.grid().panes) {
+            map.set(pane.id, pane);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "placements" }] : /* istanbul ignore next */ []));
+    showSplitter = computed(() => this.editing() && this.grid().split && !this.compact(), ...(ngDevMode ? [{ debugName: "showSplitter" }] : /* istanbul ignore next */ []));
+    /** The rows the right column occupies, so the bar stays off full-width panes. */
+    splitterRow = computed(() => {
+        const splitPanes = this.grid().panes.filter((pane) => pane.column === 2);
+        if (splitPanes.length === 0) {
+            return '1 / -1';
+        }
+        const start = Math.min(...splitPanes.map((pane) => pane.rowStart));
+        const end = Math.max(...splitPanes.map((pane) => pane.rowEnd));
+        return `${start} / ${end}`;
+    }, ...(ngDevMode ? [{ debugName: "splitterRow" }] : /* istanbul ignore next */ []));
+    splitterLeft = computed(() => {
+        const ratio = this.layoutState().startColumnRatio;
+        return `calc((100% - var(--pos-space-md)) * ${ratio})`;
+    }, ...(ngDevMode ? [{ debugName: "splitterLeft" }] : /* istanbul ignore next */ []));
+    ratioPercent = computed(() => Math.round(this.layoutState().startColumnRatio * 100), ...(ngDevMode ? [{ debugName: "ratioPercent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.editing()) {
+                this.clearInteraction();
+            }
+        });
+        effect(() => {
+            this.layout();
+            untracked(() => {
+                this.history.length = 0;
+                this.canUndo.set(false);
+            });
+        });
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const element = this.hostRef.nativeElement;
+            const observer = new ResizeObserver((entries) => {
+                const width = entries[0]?.contentRect.width ?? 0;
+                if (width >= 1) {
+                    this.viewportWidth.set(width);
+                }
+            });
+            observer.observe(element);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    togglePaneSettings(id) {
+        if (!this.editing()) {
+            return;
+        }
+        this.settingsPane.update((current) => (current === id ? null : id));
+    }
+    closePaneSettings(id) {
+        if (this.settingsPane() === id) {
+            this.settingsPane.set(null);
+        }
+    }
+    moveByKey(id, key) {
+        if (!this.editing()) {
+            return;
+        }
+        const layout = this.layoutState();
+        const pane = layout.panes.find((item) => item.id === id);
+        if (!pane) {
+            return;
+        }
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            if (this.compact()) {
+                this.status.set('Widen the screen to dock a pane beside the others.');
+                return;
+            }
+            const column = key === 'ArrowRight' ? 1 : 0;
+            if (pane.column === column && paneSpan(pane) === null) {
+                return;
+            }
+            const index = layout.panes.filter((item) => item.column === column && paneSpan(item) === null).length;
+            this.commit(movePane(layout, id, column, index), this.messageForMove(id, column));
+            return;
+        }
+        const edge = paneSpan(pane);
+        if (edge === 'top') {
+            if (key === 'ArrowDown') {
+                this.commit(movePane(layout, id, 0, 0), `${workspacePaneLabel(id)} returned to the left stack.`);
+            }
+            return;
+        }
+        if (edge === 'bottom') {
+            if (key === 'ArrowUp') {
+                const index = layout.panes.filter((item) => item.column === 0 && paneSpan(item) === null).length;
+                this.commit(movePane(layout, id, 0, index), `${workspacePaneLabel(id)} returned to the left stack.`);
+            }
+            return;
+        }
+        const siblings = layout.panes
+            .filter((item) => item.column === pane.column && paneSpan(item) === null)
+            .sort((a, b) => a.order - b.order);
+        const currentIndex = siblings.findIndex((item) => item.id === id);
+        const index = key === 'ArrowUp' ? Math.max(0, currentIndex - 1) : currentIndex + 1;
+        this.commit(movePane(layout, id, pane.column, index), `${workspacePaneLabel(id)} moved.`);
+    }
+    resizeByKey(id, direction) {
+        if (!this.editing()) {
+            return;
+        }
+        const nextId = this.nextVisualId(id);
+        if (!nextId) {
+            return;
+        }
+        this.commit(resizeAdjacent(this.layoutState(), id, nextId, direction * 0.2), `${workspacePaneLabel(id)} height adjusted.`);
+    }
+    beginPaneDrag(id, event) {
+        if (!this.editing() || !this.isPrimaryPointer(event)) {
+            return;
+        }
+        this.resizeSession = null;
+        this.draggingPane.set(id);
+        this.status.set(`Moving ${workspacePaneLabel(id)}. Release to place it.`);
+        this.updatePaneDrag(event);
+    }
+    updatePaneDrag(event) {
+        const id = this.draggingPane();
+        const grid = this.gridElement();
+        if (!id || !grid || !this.editing()) {
+            return;
+        }
+        const rect = grid.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return;
+        }
+        this.refreshDropHints(rect);
+        const splitTop = this.splitBodyTop();
+        if (splitTop != null && this.inFullWidthDropZone(event.clientY, rect, splitTop)) {
+            const wideIds = this.idsAboveSplit().filter((paneId) => paneId !== id);
+            const midpoints = wideIds.map((paneId) => {
+                const paneRect = this.paneElement(paneId)?.getBoundingClientRect();
+                return paneRect ? paneRect.top + paneRect.height / 2 : Number.POSITIVE_INFINITY;
+            });
+            const index = insertionIndex(event.clientY, midpoints);
+            this.dropTarget.set({ fullWidth: true, column: 0, index });
+            this.dropIndicator.set(this.fullWidthIndicator(index, wideIds, rect));
+            return;
+        }
+        const xRatio = (event.clientX - rect.left) / rect.width;
+        const threshold = this.grid().split ? this.layoutState().startColumnRatio : DOCK_THRESHOLD;
+        const column = dropColumn(xRatio, threshold, this.compact());
+        const ids = this.idsInVisualColumn(column).filter((paneId) => paneId !== id);
+        const midpoints = ids.map((paneId) => {
+            const paneRect = this.paneElement(paneId)?.getBoundingClientRect();
+            return paneRect ? paneRect.top + paneRect.height / 2 : Number.POSITIVE_INFINITY;
+        });
+        const index = insertionIndex(event.clientY, midpoints);
+        this.dropTarget.set({ fullWidth: false, column, index });
+        this.dropIndicator.set(this.indicatorBox(column, index, ids, rect));
+    }
+    endPaneDrag(event) {
+        if (event?.type === 'pointercancel') {
+            this.draggingPane.set(null);
+            this.dropTarget.set(null);
+            this.dropIndicator.set(null);
+            this.dropHints.set([]);
+            return;
+        }
+        if (event) {
+            this.updatePaneDrag(event);
+        }
+        const id = this.draggingPane();
+        const target = this.dropTarget();
+        this.draggingPane.set(null);
+        this.dropTarget.set(null);
+        this.dropIndicator.set(null);
+        this.dropHints.set([]);
+        if (!id || !target || !this.editing()) {
+            return;
+        }
+        const layout = this.layoutState();
+        const added = !layout.panes.some((pane) => pane.id === id);
+        const index = target.fullWidth
+            ? this.bodyIndexForFullWidthDrop(target.index)
+            : target.index;
+        let next = added
+            ? addPane(layout, id, target.column, index)
+            : movePane(layout, id, target.column, index);
+        if (target.fullWidth) {
+            next = setPaneWeight(setPaneFullWidth(next, id, true), id, 0);
+        }
+        if (sameLayout(layout, next)) {
+            this.status.set(`${workspacePaneLabel(id)} stayed in place.`);
+            return;
+        }
+        this.commit(next, this.placeMessage(id, target, added));
+    }
+    onPalettePointerDown(kind, event) {
+        if (!this.editing() || !this.isPrimaryPointer(event)) {
+            return;
+        }
+        event.preventDefault();
+        const id = kind === 'empty' ? nextEmptyId(this.layoutState()) : kind;
+        this.paletteGesture = { id, x: event.clientX, y: event.clientY };
+        this.capture(event);
+        this.beginPaneDrag(id, event);
+    }
+    onPalettePointerMove(event) {
+        const gesture = this.paletteGesture;
+        if (!gesture) {
+            return;
+        }
+        if (Math.hypot(event.clientX - gesture.x, event.clientY - gesture.y) > 8) {
+            this.paletteMenuLifted.set(true);
+        }
+        this.updatePaneDrag(event);
+    }
+    onPalettePointerUp(event) {
+        const gesture = this.paletteGesture;
+        if (!gesture) {
+            return;
+        }
+        this.paletteGesture = null;
+        this.ignorePaletteClick = true;
+        setTimeout(() => {
+            this.ignorePaletteClick = false;
+        }, 0);
+        const moved = Math.hypot(event.clientX - gesture.x, event.clientY - gesture.y) > 8;
+        if (!moved) {
+            this.clearDrag();
+            this.commit(addPane(this.layoutState(), gesture.id, 0), `${workspacePaneLabel(gesture.id)} added.`);
+            return;
+        }
+        this.endPaneDrag(event);
+        this.closePalette();
+    }
+    onPalettePointerCancel() {
+        this.paletteGesture = null;
+        this.clearDrag();
+        this.paletteMenuLifted.set(false);
+    }
+    onPaletteClick(kind) {
+        if (this.ignorePaletteClick || !this.editing()) {
+            return;
+        }
+        const id = kind === 'empty' ? nextEmptyId(this.layoutState()) : kind;
+        this.commit(addPane(this.layoutState(), id, 0), `${workspacePaneLabel(id)} added.`);
+    }
+    togglePalette() {
+        this.paletteOpen.update((open) => !open);
+        if (!this.paletteOpen()) {
+            this.paletteMenuLifted.set(false);
+        }
+    }
+    closePalette() {
+        this.paletteOpen.set(false);
+        this.paletteMenuLifted.set(false);
+    }
+    onPaletteMenuKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closePalette();
+            this.hostRef.nativeElement
+                .querySelector('.pos-workspace__palette-toggle')
+                ?.focus();
+            return;
+        }
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        const menu = event.currentTarget;
+        if (!(menu instanceof HTMLElement)) {
+            return;
+        }
+        const items = [...menu.querySelectorAll('.pos-workspace__palette-item')];
+        const current = items.indexOf(document.activeElement);
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        const next = items[(current + step + items.length) % items.length];
+        event.preventDefault();
+        next?.focus();
+    }
+    undoLayout() {
+        if (!this.editing()) {
+            return;
+        }
+        const previous = this.history.pop();
+        if (!previous) {
+            this.canUndo.set(false);
+            return;
+        }
+        this.canUndo.set(this.history.length > 0);
+        this.clearInteraction();
+        this.layoutState.set(previous);
+        this.publish('Last edit undone.');
+    }
+    applyDefaultLayout() {
+        if (!this.editing()) {
+            return;
+        }
+        this.clearInteraction();
+        this.commit(POS_WORKSPACE_DEFAULT_LAYOUT, 'Default layout restored.');
+    }
+    resetLayout() {
+        if (!this.editing()) {
+            return;
+        }
+        this.clearInteraction();
+        this.commit({ ...this.layoutState(), panes: [] }, 'New layout.');
+    }
+    exportLayout() {
+        if (!this.editing()) {
+            return;
+        }
+        const layout = this.layoutState();
+        this.clearInteraction();
+        this.layoutExport.emit(layout);
+        this.downloadLayout(workspaceLayoutJson(layout));
+        this.status.set('Layout exported.');
+    }
+    importLayoutFile(event) {
+        if (!this.editing()) {
+            return;
+        }
+        const input = event.target;
+        if (!(input instanceof HTMLInputElement)) {
+            return;
+        }
+        const file = input.files?.[0];
+        input.value = '';
+        if (!file) {
+            return;
+        }
+        void file.text().then((text) => {
+            try {
+                const layout = parseWorkspaceLayout(text);
+                this.clearInteraction();
+                this.commit(layout, 'Layout imported.');
+                this.status.set('Layout imported.');
+            }
+            catch {
+                this.status.set('That file is not a workspace layout.');
+            }
+        });
+    }
+    setFullWidth(id, enabled) {
+        if (!this.editing()) {
+            return;
+        }
+        const label = workspacePaneLabel(id);
+        this.commit(setPaneFullWidth(this.layoutState(), id, enabled), enabled ? `${label} spans the full width.` : `${label} stays in its column.`);
+    }
+    setVisible(id, visible) {
+        if (!this.editing()) {
+            return;
+        }
+        const label = workspacePaneLabel(id);
+        this.commit(setPaneVisible(this.layoutState(), id, visible), visible ? `${label} is visible on the till.` : `${label} is hidden on the till.`);
+    }
+    setFlexible(id, enabled) {
+        if (!this.editing()) {
+            return;
+        }
+        const pane = this.layoutState().panes.find((item) => item.id === id);
+        if (!pane) {
+            return;
+        }
+        const weight = enabled ? (pane.weight > 0 ? pane.weight : 1) : 0;
+        const label = workspacePaneLabel(id);
+        this.commit(setPaneWeight(this.layoutState(), id, weight), enabled ? `${label} fills leftover height.` : `${label} sizes to its content.`);
+    }
+    removeFromLayout(id) {
+        if (!this.editing()) {
+            return;
+        }
+        this.commit(removePane(this.layoutState(), id), `${workspacePaneLabel(id)} removed.`);
+    }
+    beginPaneResize(id, event) {
+        if (!this.editing() || !this.isPrimaryPointer(event)) {
+            return;
+        }
+        const nextId = this.nextVisualId(id);
+        const grid = this.gridElement();
+        if (!nextId || !grid) {
+            return;
+        }
+        const rect = grid.getBoundingClientRect();
+        if (rect.height <= 0) {
+            return;
+        }
+        this.draggingPane.set(null);
+        this.dropIndicator.set(null);
+        this.resizeSession = {
+            id,
+            nextId,
+            startY: event.clientY,
+            startLayout: this.layoutState(),
+            span: rect.height,
+        };
+    }
+    updatePaneResize(event) {
+        const session = this.resizeSession;
+        if (!session || !this.editing()) {
+            return;
+        }
+        const pair = session.startLayout.panes.filter((pane) => pane.id === session.id || pane.id === session.nextId);
+        const total = pair.reduce((sum, pane) => sum + (pane.weight > 0 ? pane.weight : 1), 0);
+        const delta = ((event.clientY - session.startY) / session.span) * total;
+        this.layoutState.set(resizeAdjacent(session.startLayout, session.id, session.nextId, delta));
+    }
+    endPaneResize() {
+        const session = this.resizeSession;
+        if (!session) {
+            return;
+        }
+        this.resizeSession = null;
+        if (sameLayout(session.startLayout, this.layoutState())) {
+            return;
+        }
+        this.remember(session.startLayout);
+        this.publish(`${workspacePaneLabel(session.id)} height adjusted.`);
+    }
+    onSplitterDown(event) {
+        if (!this.isPrimaryPointer(event)) {
+            return;
+        }
+        event.preventDefault();
+        this.capture(event);
+        this.splitting = true;
+        this.splitStartLayout = this.layoutState();
+    }
+    onSplitterMove(event) {
+        if (!this.splitting) {
+            return;
+        }
+        const grid = this.gridElement();
+        if (!grid) {
+            return;
+        }
+        const rect = grid.getBoundingClientRect();
+        const style = getComputedStyle(grid);
+        const padLeft = Number.parseFloat(style.paddingLeft) || 0;
+        const padRight = Number.parseFloat(style.paddingRight) || 0;
+        const gap = Number.parseFloat(style.columnGap || style.gap) || 0;
+        const inner = rect.width - padLeft - padRight - gap;
+        if (inner <= 0) {
+            return;
+        }
+        const ratio = (event.clientX - rect.left - padLeft) / inner;
+        this.layoutState.set(setColumnRatio(this.layoutState(), ratio));
+    }
+    onSplitterUp() {
+        if (!this.splitting) {
+            return;
+        }
+        this.splitting = false;
+        const start = this.splitStartLayout;
+        this.splitStartLayout = null;
+        if (!start || sameLayout(start, this.layoutState())) {
+            return;
+        }
+        this.remember(start);
+        this.publish('Column width adjusted.');
+    }
+    onSplitterKeydown(event) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+            return;
+        }
+        event.preventDefault();
+        const delta = event.key === 'ArrowRight' ? 0.04 : -0.04;
+        this.commit(setColumnRatio(this.layoutState(), this.layoutState().startColumnRatio + delta), 'Column width adjusted.');
+    }
+    commit(next, message) {
+        if (sameLayout(this.layoutState(), next)) {
+            return;
+        }
+        this.remember(this.layoutState());
+        this.layoutState.set(next);
+        this.publish(message);
+    }
+    remember(layout) {
+        this.history.push(layout);
+        if (this.history.length > 30) {
+            this.history.shift();
+        }
+        this.canUndo.set(true);
+    }
+    downloadLayout(json) {
+        if (typeof URL.createObjectURL !== 'function') {
+            return;
+        }
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = this.hostRef.nativeElement.ownerDocument.createElement('a');
+        link.href = url;
+        link.download = 'pos-workspace-layout.json';
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    publish(message) {
+        this.status.set(message);
+        this.layoutChange.emit(this.layoutState());
+    }
+    placeMessage(id, target, added) {
+        const label = workspacePaneLabel(id);
+        if (target.fullWidth) {
+            return added
+                ? `${label} added at full width.`
+                : `${label} spans the full width.`;
+        }
+        if (added) {
+            return target.column === 1 ? `${label} added on the right.` : `${label} added.`;
+        }
+        return this.messageForMove(id, target.column);
+    }
+    messageForMove(id, column) {
+        const label = workspacePaneLabel(id);
+        const current = this.layoutState().panes.find((pane) => pane.id === id);
+        const occupants = this.layoutState().panes.filter((pane) => pane.column === column && pane.id !== id);
+        if (column === 1 && occupants.length === 0) {
+            return `${label} docked on the right, full height.`;
+        }
+        if (column === 0 && current?.column === 1) {
+            return `${label} returned to the left stack.`;
+        }
+        return `${label} moved.`;
+    }
+    refreshDropHints(gridRect) {
+        if (this.compact()) {
+            this.dropHints.set([]);
+            return;
+        }
+        const host = this.hostRef.nativeElement.getBoundingClientRect();
+        const top = gridRect.top - host.top;
+        const left = gridRect.left - host.left;
+        const ratio = this.grid().split ? this.layoutState().startColumnRatio : DOCK_THRESHOLD;
+        const hints = [
+            {
+                kind: 'dock',
+                top,
+                left: left + gridRect.width * ratio,
+                width: gridRect.width * (1 - ratio),
+                height: gridRect.height,
+            },
+        ];
+        const splitTop = this.splitBodyTop();
+        if (splitTop != null) {
+            const roomAbove = Math.max(0, splitTop - gridRect.top);
+            hints.unshift({
+                kind: 'top',
+                top,
+                left,
+                width: gridRect.width,
+                height: roomAbove > 8 ? roomAbove : FULL_WIDTH_BAND,
+            });
+        }
+        this.dropHints.set(hints);
+    }
+    /** True when the pointer is above the docked column (or in the top band when nothing sits above it). */
+    inFullWidthDropZone(clientY, gridRect, splitTop) {
+        if (splitTop > gridRect.top + 8) {
+            return clientY < splitTop;
+        }
+        return clientY < gridRect.top + FULL_WIDTH_BAND;
+    }
+    /** Top edge of the side-by-side region (right column). Null when nothing is docked right. */
+    splitBodyTop() {
+        if (this.compact() || !this.grid().split) {
+            return null;
+        }
+        let top = Number.POSITIVE_INFINITY;
+        for (const pane of this.grid().panes) {
+            if (pane.column !== 2) {
+                continue;
+            }
+            const rect = this.paneElement(pane.id)?.getBoundingClientRect();
+            if (rect) {
+                top = Math.min(top, rect.top);
+            }
+        }
+        return Number.isFinite(top) ? top : null;
+    }
+    /** Full-width rows that sit above the split, used for drop ordering in that band. */
+    idsAboveSplit() {
+        const splitTop = this.splitBodyTop();
+        if (splitTop == null) {
+            return [];
+        }
+        return this.grid()
+            .panes.filter((pane) => {
+            if (pane.spanColumns !== true) {
+                return false;
+            }
+            const rect = this.paneElement(pane.id)?.getBoundingClientRect();
+            return rect != null && rect.top + rect.height / 2 < splitTop;
+        })
+            .sort((a, b) => a.rowStart - b.rowStart)
+            .map((pane) => pane.id);
+    }
+    /** Maps a visual index among banner/full-width rows onto the body column order. */
+    bodyIndexForFullWidthDrop(visualIndex) {
+        const banners = new Set(this.layoutState()
+            .panes.filter((pane) => paneSpan(pane) !== null)
+            .map((pane) => pane.id));
+        const bannersAbove = this.idsAboveSplit().filter((id) => banners.has(id)).length;
+        return Math.max(0, visualIndex - bannersAbove);
+    }
+    fullWidthIndicator(index, ids, gridRect) {
+        const host = this.hostRef.nativeElement.getBoundingClientRect();
+        const left = gridRect.left - host.left;
+        const width = gridRect.width;
+        if (ids.length === 0) {
+            const splitTop = this.splitBodyTop() ?? gridRect.top;
+            return {
+                top: Math.max(gridRect.top, splitTop - FULL_WIDTH_BAND / 2) - host.top,
+                left,
+                width,
+                height: FULL_WIDTH_BAND,
+                line: false,
+            };
+        }
+        const anchorId = index >= ids.length ? ids[ids.length - 1] : ids[index];
+        const anchor = this.paneElement(anchorId)?.getBoundingClientRect();
+        if (!anchor) {
+            return {
+                top: gridRect.top - host.top,
+                left,
+                width,
+                height: FULL_WIDTH_BAND,
+                line: false,
+            };
+        }
+        const top = index >= ids.length ? anchor.bottom - host.top : anchor.top - host.top;
+        return { top, left, width, height: 4, line: true };
+    }
+    nextVisualId(id) {
+        const place = this.placements().get(id);
+        if (!place?.showResize) {
+            return null;
+        }
+        const next = this.grid()
+            .panes.filter((pane) => pane.column === place.column && pane.rowStart >= place.rowEnd)
+            .sort((a, b) => a.rowStart - b.rowStart)[0];
+        return next?.id ?? null;
+    }
+    idsInVisualColumn(column) {
+        const dragging = this.draggingPane();
+        const edges = new Set(this.layoutState()
+            .panes.filter((pane) => paneSpan(pane) !== null)
+            .map((pane) => pane.id));
+        const gridColumn = this.compact() ? 1 : column + 1;
+        return this.grid()
+            .panes.filter((pane) => {
+            if (pane.id === dragging || edges.has(pane.id)) {
+                return false;
+            }
+            if (this.compact() || column === 0) {
+                return pane.spanColumns === true || pane.column === gridColumn;
+            }
+            return pane.column === gridColumn && pane.spanColumns !== true;
+        })
+            .sort((a, b) => a.rowStart - b.rowStart)
+            .map((pane) => pane.id);
+    }
+    indicatorBox(column, index, ids, gridRect) {
+        const host = this.hostRef.nativeElement.getBoundingClientRect();
+        if (ids.length === 0) {
+            const threshold = this.grid().split ? this.layoutState().startColumnRatio : DOCK_THRESHOLD;
+            const bandLeft = column === 1 ? gridRect.width * threshold : 0;
+            const bandWidth = column === 1 ? gridRect.width * (1 - threshold) : gridRect.width * 0.3;
+            return {
+                top: gridRect.top - host.top,
+                left: gridRect.left - host.left + bandLeft,
+                width: bandWidth,
+                height: gridRect.height,
+                line: false,
+            };
+        }
+        const anchorId = index >= ids.length ? ids[ids.length - 1] : ids[index];
+        const anchor = this.paneElement(anchorId)?.getBoundingClientRect();
+        if (!anchor) {
+            return null;
+        }
+        const top = index >= ids.length ? anchor.bottom - host.top : anchor.top - host.top;
+        return {
+            top,
+            left: anchor.left - host.left,
+            width: anchor.width,
+            height: 4,
+            line: true,
+        };
+    }
+    paneElement(id) {
+        return this.hostRef.nativeElement.querySelector(`[data-pane="${id}"]`);
+    }
+    gridElement() {
+        return this.frameRef()?.nativeElement ?? null;
+    }
+    clearDrag() {
+        this.draggingPane.set(null);
+        this.dropTarget.set(null);
+        this.dropIndicator.set(null);
+        this.dropHints.set([]);
+    }
+    clearInteraction() {
+        this.paletteGesture = null;
+        this.paletteOpen.set(false);
+        this.paletteMenuLifted.set(false);
+        this.settingsPane.set(null);
+        this.clearDrag();
+        this.resizeSession = null;
+        this.splitting = false;
+        this.splitStartLayout = null;
+    }
+    isPrimaryPointer(event) {
+        return event.pointerType !== 'mouse' || event.button === 0;
+    }
+    capture(event) {
+        const handle = event.currentTarget;
+        if (!(handle instanceof HTMLElement)) {
+            return;
+        }
+        try {
+            handle.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // The pointer is not active yet. The drag still follows later pointer events.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspace, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosWorkspace, isStandalone: true, selector: "pos-workspace", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutExport: "layoutExport" }, host: { properties: { "class.pos-workspace--editing": "editing()", "class.pos-workspace--dragging": "draggingPane() !== null" }, classAttribute: "pos-workspace" }, providers: [{ provide: POS_WORKSPACE, useExisting: forwardRef(() => PosWorkspace) }], queries: [{ propertyName: "paneRefs", predicate: PosWorkspacePane, isSignal: true }], viewQueries: [{ propertyName: "frameRef", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (editing()) {\r\n  <div class=\"pos-workspace__tools\">\r\n    <div class=\"pos-workspace__palette\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace__palette-toggle\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"paletteOpen()\"\r\n        (click)=\"togglePalette()\"\r\n      >\r\n        Components\r\n      </button>\r\n      @if (paletteOpen()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-workspace__palette-backdrop\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Close components\"\r\n          (click)=\"closePalette()\"\r\n        ></button>\r\n        <div\r\n          class=\"pos-workspace__palette-menu\"\r\n          [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n          role=\"menu\"\r\n          aria-label=\"Components\"\r\n          (keydown)=\"onPaletteMenuKeydown($event)\"\r\n        >\r\n          @for (id of palette(); track id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-workspace__palette-item\"\r\n              role=\"menuitem\"\r\n              [attr.data-palette]=\"id\"\r\n              (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n              (pointermove)=\"onPalettePointerMove($event)\"\r\n              (pointerup)=\"onPalettePointerUp($event)\"\r\n              (pointercancel)=\"onPalettePointerCancel()\"\r\n              (click)=\"onPaletteClick(id)\"\r\n            >\r\n              {{ paneLabel(id) }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"pos-workspace__palette-item\"\r\n            role=\"menuitem\"\r\n            data-palette=\"empty\"\r\n            (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n            (pointermove)=\"onPalettePointerMove($event)\"\r\n            (pointerup)=\"onPalettePointerUp($event)\"\r\n            (pointercancel)=\"onPalettePointerCancel()\"\r\n            (click)=\"onPaletteClick('empty')\"\r\n          >\r\n            Custom container\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"pos-workspace__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace__undo\"\r\n        [disabled]=\"!canUndo()\"\r\n        (click)=\"undoLayout()\"\r\n      >\r\n        Undo\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n      <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n        Default layout\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n        Import layout\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n        Export layout\r\n      </button>\r\n      <input\r\n        #layoutFile\r\n        class=\"pos-workspace__file\"\r\n        type=\"file\"\r\n        accept=\"application/json,.json\"\r\n        aria-label=\"Import layout file\"\r\n        (change)=\"importLayoutFile($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div\r\n  #frame\r\n  class=\"pos-workspace__grid\"\r\n  [style.grid-template-columns]=\"grid().columns\"\r\n  [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n  <ng-content />\r\n  @for (slot of emptySlots(); track slot) {\r\n    <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n  }\r\n  @if (showSplitter()) {\r\n    <div\r\n      class=\"pos-workspace__splitter\"\r\n      role=\"separator\"\r\n      aria-orientation=\"vertical\"\r\n      aria-label=\"Resize columns\"\r\n      aria-valuemin=\"28\"\r\n      aria-valuemax=\"72\"\r\n      [attr.aria-valuenow]=\"ratioPercent()\"\r\n      tabindex=\"0\"\r\n      [style.grid-row]=\"splitterRow()\"\r\n      [style.left]=\"splitterLeft()\"\r\n      (pointerdown)=\"onSplitterDown($event)\"\r\n      (pointermove)=\"onSplitterMove($event)\"\r\n      (pointerup)=\"onSplitterUp()\"\r\n      (pointercancel)=\"onSplitterUp()\"\r\n      (keydown)=\"onSplitterKeydown($event)\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n  <div\r\n    class=\"pos-workspace__hint\"\r\n    [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n    [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n    [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n    [style.top.px]=\"hint.top\"\r\n    [style.left.px]=\"hint.left\"\r\n    [style.width.px]=\"hint.width\"\r\n    [style.height.px]=\"hint.height\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n  <div\r\n    class=\"pos-workspace__drop\"\r\n    [class.pos-workspace__drop--line]=\"indicator.line\"\r\n    [style.top.px]=\"indicator.top\"\r\n    [style.left.px]=\"indicator.left\"\r\n    [style.width.px]=\"indicator.width\"\r\n    [style.height.px]=\"indicator.height\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: PosWorkspacePane, selector: "pos-workspace-pane", inputs: ["paneId", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspace, decorators: [{
+            type: Component,
+            args: [{ selector: 'pos-workspace', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PosWorkspacePane], providers: [{ provide: POS_WORKSPACE, useExisting: forwardRef(() => PosWorkspace) }], host: {
+                        class: 'pos-workspace',
+                        '[class.pos-workspace--editing]': 'editing()',
+                        '[class.pos-workspace--dragging]': 'draggingPane() !== null',
+                    }, template: "@if (editing()) {\r\n  <div class=\"pos-workspace__tools\">\r\n    <div class=\"pos-workspace__palette\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace__palette-toggle\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"paletteOpen()\"\r\n        (click)=\"togglePalette()\"\r\n      >\r\n        Components\r\n      </button>\r\n      @if (paletteOpen()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-workspace__palette-backdrop\"\r\n          tabindex=\"-1\"\r\n          aria-label=\"Close components\"\r\n          (click)=\"closePalette()\"\r\n        ></button>\r\n        <div\r\n          class=\"pos-workspace__palette-menu\"\r\n          [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n          role=\"menu\"\r\n          aria-label=\"Components\"\r\n          (keydown)=\"onPaletteMenuKeydown($event)\"\r\n        >\r\n          @for (id of palette(); track id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-workspace__palette-item\"\r\n              role=\"menuitem\"\r\n              [attr.data-palette]=\"id\"\r\n              (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n              (pointermove)=\"onPalettePointerMove($event)\"\r\n              (pointerup)=\"onPalettePointerUp($event)\"\r\n              (pointercancel)=\"onPalettePointerCancel()\"\r\n              (click)=\"onPaletteClick(id)\"\r\n            >\r\n              {{ paneLabel(id) }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"pos-workspace__palette-item\"\r\n            role=\"menuitem\"\r\n            data-palette=\"empty\"\r\n            (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n            (pointermove)=\"onPalettePointerMove($event)\"\r\n            (pointerup)=\"onPalettePointerUp($event)\"\r\n            (pointercancel)=\"onPalettePointerCancel()\"\r\n            (click)=\"onPaletteClick('empty')\"\r\n          >\r\n            Custom container\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"pos-workspace__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"pos-workspace__undo\"\r\n        [disabled]=\"!canUndo()\"\r\n        (click)=\"undoLayout()\"\r\n      >\r\n        Undo\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n      <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n        Default layout\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n        Import layout\r\n      </button>\r\n      <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n        Export layout\r\n      </button>\r\n      <input\r\n        #layoutFile\r\n        class=\"pos-workspace__file\"\r\n        type=\"file\"\r\n        accept=\"application/json,.json\"\r\n        aria-label=\"Import layout file\"\r\n        (change)=\"importLayoutFile($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div\r\n  #frame\r\n  class=\"pos-workspace__grid\"\r\n  [style.grid-template-columns]=\"grid().columns\"\r\n  [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n  <ng-content />\r\n  @for (slot of emptySlots(); track slot) {\r\n    <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n  }\r\n  @if (showSplitter()) {\r\n    <div\r\n      class=\"pos-workspace__splitter\"\r\n      role=\"separator\"\r\n      aria-orientation=\"vertical\"\r\n      aria-label=\"Resize columns\"\r\n      aria-valuemin=\"28\"\r\n      aria-valuemax=\"72\"\r\n      [attr.aria-valuenow]=\"ratioPercent()\"\r\n      tabindex=\"0\"\r\n      [style.grid-row]=\"splitterRow()\"\r\n      [style.left]=\"splitterLeft()\"\r\n      (pointerdown)=\"onSplitterDown($event)\"\r\n      (pointermove)=\"onSplitterMove($event)\"\r\n      (pointerup)=\"onSplitterUp()\"\r\n      (pointercancel)=\"onSplitterUp()\"\r\n      (keydown)=\"onSplitterKeydown($event)\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n  <div\r\n    class=\"pos-workspace__hint\"\r\n    [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n    [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n    [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n    [style.top.px]=\"hint.top\"\r\n    [style.left.px]=\"hint.left\"\r\n    [style.width.px]=\"hint.width\"\r\n    [style.height.px]=\"hint.height\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n  <div\r\n    class=\"pos-workspace__drop\"\r\n    [class.pos-workspace__drop--line]=\"indicator.line\"\r\n    [style.top.px]=\"indicator.top\"\r\n    [style.left.px]=\"indicator.left\"\r\n    [style.width.px]=\"indicator.width\"\r\n    [style.height.px]=\"indicator.height\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { paneRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PosWorkspacePane), { isSignal: true }] }], frameRef: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutExport: [{ type: i0.Output, args: ["layoutExport"] }] } });
+
 const COIN_AMOUNTS = [0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2];
 const NOTE_AMOUNTS = [5, 10, 20, 50];
 function roundMoney(amount) {
@@ -1278,5 +2997,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PosBasket, PosHeader, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens, PosTransactionActionBar };
+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 };
 //# sourceMappingURL=retalia-pos-components.mjs.map