@retalia/pos-components 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/fesm2022/retalia-pos-components.mjs +1089 -0
  2. package/fesm2022/retalia-pos-components.mjs.map +1 -0
  3. package/package.json +39 -17
  4. package/types/retalia-pos-components.d.ts +300 -0
  5. package/eslint.config.js +0 -32
  6. package/ng-package.json +0 -14
  7. package/src/lib/basket/pos-basket.html +0 -124
  8. package/src/lib/basket/pos-basket.scss +0 -285
  9. package/src/lib/basket/pos-basket.spec.ts +0 -198
  10. package/src/lib/basket/pos-basket.stories.ts +0 -114
  11. package/src/lib/basket/pos-basket.ts +0 -142
  12. package/src/lib/item-entry/pos-item-entry.html +0 -41
  13. package/src/lib/item-entry/pos-item-entry.scss +0 -145
  14. package/src/lib/item-entry/pos-item-entry.spec.ts +0 -123
  15. package/src/lib/item-entry/pos-item-entry.stories.ts +0 -31
  16. package/src/lib/item-entry/pos-item-entry.ts +0 -81
  17. package/src/lib/login/pos-login.html +0 -82
  18. package/src/lib/login/pos-login.scss +0 -238
  19. package/src/lib/login/pos-login.spec.ts +0 -89
  20. package/src/lib/login/pos-login.stories.ts +0 -36
  21. package/src/lib/login/pos-login.ts +0 -150
  22. package/src/lib/receipt/pos-receipt.html +0 -116
  23. package/src/lib/receipt/pos-receipt.scss +0 -367
  24. package/src/lib/receipt/pos-receipt.spec.ts +0 -188
  25. package/src/lib/receipt/pos-receipt.stories.ts +0 -163
  26. package/src/lib/receipt/pos-receipt.ts +0 -129
  27. package/src/lib/tender/pos-tender.html +0 -79
  28. package/src/lib/tender/pos-tender.scss +0 -318
  29. package/src/lib/tender/pos-tender.spec.ts +0 -150
  30. package/src/lib/tender/pos-tender.stories.ts +0 -47
  31. package/src/lib/tender/pos-tender.ts +0 -154
  32. package/src/lib/tokens/pos-theme-css.spec.ts +0 -75
  33. package/src/lib/tokens/pos-theme-css.ts +0 -123
  34. package/src/lib/tokens/pos-token-catalog.ts +0 -514
  35. package/src/lib/tokens/pos-tokens.html +0 -351
  36. package/src/lib/tokens/pos-tokens.scss +0 -437
  37. package/src/lib/tokens/pos-tokens.spec.ts +0 -164
  38. package/src/lib/tokens/pos-tokens.stories.ts +0 -22
  39. package/src/lib/tokens/pos-tokens.ts +0 -208
  40. package/src/public-api.ts +0 -37
  41. package/tsconfig.lib.json +0 -14
  42. package/tsconfig.lib.prod.json +0 -11
  43. package/tsconfig.spec.json +0 -11
  44. /package/{src/styles → styles}/styles.css +0 -0
  45. /package/{src/styles → styles}/tokens.css +0 -0
package/fesm2022/retalia-pos-components.mjs ADDED
@@ -0,0 +1,1089 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, signal, computed, ChangeDetectionStrategy, Component, viewChild, afterNextRender } from '@angular/core';
3
+
4
+ const DEFAULT_SESSION = { status: 'signedOut' };
5
+ const KEYPAD_ROWS$1 = [
6
+ ['1', '2', '3'],
7
+ ['4', '5', '6'],
8
+ ['7', '8', '9'],
9
+ ['0', '.', '←'],
10
+ ];
11
+ class PosLogin {
12
+ errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
13
+ session = input(DEFAULT_SESSION, ...(ngDevMode ? [{ debugName: "session" }] : /* istanbul ignore next */ []));
14
+ titleClerkNumber = input('Enter Clerk Number', ...(ngDevMode ? [{ debugName: "titleClerkNumber" }] : /* istanbul ignore next */ []));
15
+ titleClerkPassword = input('Enter Clerk Password', ...(ngDevMode ? [{ debugName: "titleClerkPassword" }] : /* istanbul ignore next */ []));
16
+ nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
17
+ loginLabel = input('Login', ...(ngDevMode ? [{ debugName: "loginLabel" }] : /* istanbul ignore next */ []));
18
+ action = output();
19
+ keypadRows = KEYPAD_ROWS$1;
20
+ inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
21
+ stage = signal('clerkNumber', ...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
22
+ clerkNumber = signal('', ...(ngDevMode ? [{ debugName: "clerkNumber" }] : /* istanbul ignore next */ []));
23
+ title = computed(() => this.stage() === 'clerkNumber'
24
+ ? this.titleClerkNumber()
25
+ : this.titleClerkPassword(), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
26
+ maskInput = computed(() => this.stage() === 'password', ...(ngDevMode ? [{ debugName: "maskInput" }] : /* istanbul ignore next */ []));
27
+ showBack = computed(() => this.stage() === 'password', ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
28
+ primaryLabel = computed(() => this.stage() === 'password' ? this.loginLabel() : this.nextLabel(), ...(ngDevMode ? [{ debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
29
+ primaryEnabled = computed(() => this.inputValue().length > 0 && !this.interactionLocked(), ...(ngDevMode ? [{ debugName: "primaryEnabled" }] : /* istanbul ignore next */ []));
30
+ interactionLocked = computed(() => {
31
+ const status = this.session().status;
32
+ return status === 'busy' || status === 'signedIn';
33
+ }, ...(ngDevMode ? [{ debugName: "interactionLocked" }] : /* istanbul ignore next */ []));
34
+ sessionStatusText = computed(() => {
35
+ const current = this.session();
36
+ if (current.status === 'busy') {
37
+ return 'Signing in…';
38
+ }
39
+ if (current.status === 'signedIn') {
40
+ return current.displayName
41
+ ? `Signed in as ${current.displayName}`
42
+ : 'Signed in';
43
+ }
44
+ return '';
45
+ }, ...(ngDevMode ? [{ debugName: "sessionStatusText" }] : /* istanbul ignore next */ []));
46
+ onKeypad(key) {
47
+ if (this.interactionLocked()) {
48
+ return;
49
+ }
50
+ if (key === '←') {
51
+ this.inputValue.update((value) => value.slice(0, -1));
52
+ this.action.emit({ type: 'login.backspace' });
53
+ return;
54
+ }
55
+ if (this.inputValue().length >= 12) {
56
+ return;
57
+ }
58
+ this.inputValue.update((value) => value + key);
59
+ this.action.emit({ type: 'login.key', key });
60
+ }
61
+ onPrimary() {
62
+ if (this.interactionLocked()) {
63
+ return;
64
+ }
65
+ const value = this.inputValue();
66
+ if (!value) {
67
+ return;
68
+ }
69
+ if (this.stage() === 'clerkNumber') {
70
+ this.clerkNumber.set(value);
71
+ this.inputValue.set('');
72
+ this.stage.set('password');
73
+ this.action.emit({ type: 'login.next', clerkNumber: value });
74
+ return;
75
+ }
76
+ this.action.emit({
77
+ type: 'login.submit',
78
+ clerkNumber: this.clerkNumber(),
79
+ password: value,
80
+ });
81
+ }
82
+ onBack() {
83
+ if (this.interactionLocked()) {
84
+ return;
85
+ }
86
+ this.inputValue.set(this.clerkNumber());
87
+ this.stage.set('clerkNumber');
88
+ this.action.emit({ type: 'login.back' });
89
+ }
90
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosLogin, deps: [], target: i0.ɵɵFactoryTarget.Component });
91
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosLogin, isStandalone: true, selector: "pos-login", inputs: { errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, titleClerkNumber: { classPropertyName: "titleClerkNumber", publicName: "titleClerkNumber", isSignal: true, isRequired: false, transformFunction: null }, titleClerkPassword: { classPropertyName: "titleClerkPassword", publicName: "titleClerkPassword", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, loginLabel: { classPropertyName: "loginLabel", publicName: "loginLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-login" }, ngImport: i0, template: "<section class=\"pos-login__panel\" [attr.aria-busy]=\"session().status === 'busy' ? true : null\">\r\n <header class=\"pos-login__header\">\r\n <p class=\"pos-login__kicker\">Adaptive POS</p>\r\n <h1 class=\"pos-login__title\">{{ title() }}</h1>\r\n </header>\r\n\r\n <div class=\"pos-login__status\" aria-live=\"polite\">\r\n @if (sessionStatusText()) {\r\n <p>{{ sessionStatusText() }}</p>\r\n }\r\n @if (errorMessage()) {\r\n <p class=\"pos-login__error\">{{ errorMessage() }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-login__body\">\r\n <div class=\"pos-login__display\">\r\n <input\r\n class=\"pos-login__input\"\r\n [attr.type]=\"maskInput() ? 'password' : 'text'\"\r\n [value]=\"inputValue()\"\r\n maxlength=\"12\"\r\n readonly\r\n tabindex=\"-1\"\r\n placeholder=\"\u00B7 \u00B7 \u00B7 \u00B7\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-label=\"Login code\"\r\n />\r\n </div>\r\n\r\n <div class=\"pos-login__keypad\" role=\"group\" aria-label=\"Keypad\">\r\n @for (row of keypadRows; track $index) {\r\n <div class=\"pos-login__keypad-row\">\r\n @for (key of row; track key) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__key\"\r\n [class.pos-login__key--action]=\"key === '\u2190' || key === '.'\"\r\n [disabled]=\"interactionLocked()\"\r\n (click)=\"onKeypad(key)\"\r\n >\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-login__actions\">\r\n @if (showBack()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__back\"\r\n aria-label=\"Back\"\r\n [disabled]=\"interactionLocked()\"\r\n (click)=\"onBack()\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M15 6 9 12l6 6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span>Back</span>\r\n </button>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__primary\"\r\n [class.pos-login__primary--disabled]=\"!primaryEnabled()\"\r\n [disabled]=\"!primaryEnabled()\"\r\n (click)=\"onPrimary()\"\r\n >\r\n {{ primaryLabel() }}\r\n </button>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block;width:100%;max-width:26rem;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-login__panel{position:relative;display:flex;flex-direction:column;min-height:100%;padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-login__header{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-sm);padding-right:var(--pos-space-2xl)}.pos-login__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-login__title{margin:0;max-width:14ch;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em;line-height:1.15}.pos-login__status{min-height:1.5rem;margin:var(--pos-space-md) 0 var(--pos-space-sm);display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-login__status p{margin:0;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-login__error{padding:var(--pos-space-sm) var(--pos-space-md);border-left:3px solid var(--pos-color-danger);background:#d6454514;color:var(--pos-color-danger)}.pos-login__key:disabled,.pos-login__back:disabled{cursor:not-allowed;opacity:.55}.pos-login__body{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-xl);width:100%}.pos-login__display{border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-display);box-shadow:inset 0 1px #ffffff0f;padding:var(--pos-space-lg) var(--pos-space-xl)}.pos-login__input{display:block;width:100%;margin:0;border:0;background:transparent;color:var(--pos-color-on-display);font-family:var(--pos-font-family-display);font-size:clamp(1.35rem,3vw,1.85rem);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-display);text-align:center;outline:none}.pos-login__input::placeholder{color:#e8edf259;letter-spacing:.45em}.pos-login__keypad{display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-login__keypad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pos-space-md)}.pos-login__key{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-keypad-size);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-family:inherit;font-size:1.15rem;font-weight:var(--pos-font-weight-bold);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-login__key--action{color:var(--pos-color-text-muted);background:var(--pos-color-surface-muted)}.pos-login__key:active{background:var(--pos-color-key-active);border-color:var(--pos-color-key-active);color:var(--pos-color-on-key-active);transform:translateY(1px)}.pos-login__actions{display:flex;align-items:stretch;gap:var(--pos-space-md);margin-top:auto}.pos-login__back{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--pos-space-xs);min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-login__primary{flex:1 1 auto;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-size:1.05rem;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:filter .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-login__primary:not(:disabled):hover{filter:brightness(.97)}.pos-login__primary:not(:disabled):active{transform:translateY(1px)}.pos-login__primary--disabled,.pos-login__primary:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;filter:none;transform:none}@media(min-width:768px){.pos-login__panel{padding:var(--pos-space-2xl)}.pos-login__key{min-height:var(--pos-keypad-size-md)}}@media(min-width:1100px){.pos-login__key{min-height:var(--pos-keypad-size-lg);font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.pos-login__key,.pos-login__primary{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
92
+ }
93
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosLogin, decorators: [{
94
+ type: Component,
95
+ args: [{ selector: 'pos-login', changeDetection: ChangeDetectionStrategy.OnPush, host: {
96
+ class: 'pos-login',
97
+ }, template: "<section class=\"pos-login__panel\" [attr.aria-busy]=\"session().status === 'busy' ? true : null\">\r\n <header class=\"pos-login__header\">\r\n <p class=\"pos-login__kicker\">Adaptive POS</p>\r\n <h1 class=\"pos-login__title\">{{ title() }}</h1>\r\n </header>\r\n\r\n <div class=\"pos-login__status\" aria-live=\"polite\">\r\n @if (sessionStatusText()) {\r\n <p>{{ sessionStatusText() }}</p>\r\n }\r\n @if (errorMessage()) {\r\n <p class=\"pos-login__error\">{{ errorMessage() }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-login__body\">\r\n <div class=\"pos-login__display\">\r\n <input\r\n class=\"pos-login__input\"\r\n [attr.type]=\"maskInput() ? 'password' : 'text'\"\r\n [value]=\"inputValue()\"\r\n maxlength=\"12\"\r\n readonly\r\n tabindex=\"-1\"\r\n placeholder=\"\u00B7 \u00B7 \u00B7 \u00B7\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-label=\"Login code\"\r\n />\r\n </div>\r\n\r\n <div class=\"pos-login__keypad\" role=\"group\" aria-label=\"Keypad\">\r\n @for (row of keypadRows; track $index) {\r\n <div class=\"pos-login__keypad-row\">\r\n @for (key of row; track key) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__key\"\r\n [class.pos-login__key--action]=\"key === '\u2190' || key === '.'\"\r\n [disabled]=\"interactionLocked()\"\r\n (click)=\"onKeypad(key)\"\r\n >\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-login__actions\">\r\n @if (showBack()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__back\"\r\n aria-label=\"Back\"\r\n [disabled]=\"interactionLocked()\"\r\n (click)=\"onBack()\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M15 6 9 12l6 6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span>Back</span>\r\n </button>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-login__primary\"\r\n [class.pos-login__primary--disabled]=\"!primaryEnabled()\"\r\n [disabled]=\"!primaryEnabled()\"\r\n (click)=\"onPrimary()\"\r\n >\r\n {{ primaryLabel() }}\r\n </button>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block;width:100%;max-width:26rem;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-login__panel{position:relative;display:flex;flex-direction:column;min-height:100%;padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-login__header{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-sm);padding-right:var(--pos-space-2xl)}.pos-login__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-login__title{margin:0;max-width:14ch;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em;line-height:1.15}.pos-login__status{min-height:1.5rem;margin:var(--pos-space-md) 0 var(--pos-space-sm);display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-login__status p{margin:0;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-login__error{padding:var(--pos-space-sm) var(--pos-space-md);border-left:3px solid var(--pos-color-danger);background:#d6454514;color:var(--pos-color-danger)}.pos-login__key:disabled,.pos-login__back:disabled{cursor:not-allowed;opacity:.55}.pos-login__body{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-xl);width:100%}.pos-login__display{border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-display);box-shadow:inset 0 1px #ffffff0f;padding:var(--pos-space-lg) var(--pos-space-xl)}.pos-login__input{display:block;width:100%;margin:0;border:0;background:transparent;color:var(--pos-color-on-display);font-family:var(--pos-font-family-display);font-size:clamp(1.35rem,3vw,1.85rem);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-display);text-align:center;outline:none}.pos-login__input::placeholder{color:#e8edf259;letter-spacing:.45em}.pos-login__keypad{display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-login__keypad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pos-space-md)}.pos-login__key{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-keypad-size);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-family:inherit;font-size:1.15rem;font-weight:var(--pos-font-weight-bold);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-login__key--action{color:var(--pos-color-text-muted);background:var(--pos-color-surface-muted)}.pos-login__key:active{background:var(--pos-color-key-active);border-color:var(--pos-color-key-active);color:var(--pos-color-on-key-active);transform:translateY(1px)}.pos-login__actions{display:flex;align-items:stretch;gap:var(--pos-space-md);margin-top:auto}.pos-login__back{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--pos-space-xs);min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-login__primary{flex:1 1 auto;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-size:1.05rem;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:filter .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-login__primary:not(:disabled):hover{filter:brightness(.97)}.pos-login__primary:not(:disabled):active{transform:translateY(1px)}.pos-login__primary--disabled,.pos-login__primary:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;filter:none;transform:none}@media(min-width:768px){.pos-login__panel{padding:var(--pos-space-2xl)}.pos-login__key{min-height:var(--pos-keypad-size-md)}}@media(min-width:1100px){.pos-login__key{min-height:var(--pos-keypad-size-lg);font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.pos-login__key,.pos-login__primary{transition:none}}\n"] }]
98
+ }], propDecorators: { errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], titleClerkNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClerkNumber", required: false }] }], titleClerkPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClerkPassword", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], loginLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
99
+
100
+ const EMPTY_TOTALS$1 = {
101
+ gross: 0,
102
+ net: 0,
103
+ vat: 0,
104
+ discount: 0,
105
+ due: 0,
106
+ currency: 'EUR',
107
+ };
108
+ class PosBasket {
109
+ lines = input([], ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
110
+ totals = input(EMPTY_TOTALS$1, ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
111
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
112
+ title = input('Basket', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
113
+ emptyMessage = input('Basket is empty', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
114
+ clearLabel = input('Clear basket', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
115
+ action = output();
116
+ hasLines = computed(() => this.lines().length > 0, ...(ngDevMode ? [{ debugName: "hasLines" }] : /* istanbul ignore next */ []));
117
+ canClear = computed(() => this.hasLines() && !this.disabled(), ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
118
+ formatMoney(amount) {
119
+ return new Intl.NumberFormat(undefined, {
120
+ style: 'currency',
121
+ currency: this.totals().currency || 'EUR',
122
+ minimumFractionDigits: 2,
123
+ maximumFractionDigits: 2,
124
+ }).format(amount);
125
+ }
126
+ canChangeQuantity(line) {
127
+ return !this.disabled() && !line.struckThrough;
128
+ }
129
+ canDecrement(line) {
130
+ return this.canChangeQuantity(line) && line.qty > 1;
131
+ }
132
+ canVoid(line) {
133
+ return this.canChangeQuantity(line);
134
+ }
135
+ onIncrement(line) {
136
+ if (!this.canChangeQuantity(line)) {
137
+ return;
138
+ }
139
+ this.action.emit({
140
+ type: 'basket.changeQuantity',
141
+ lineId: line.lineId,
142
+ qty: line.qty + 1,
143
+ });
144
+ }
145
+ onDecrement(line) {
146
+ if (!this.canDecrement(line)) {
147
+ return;
148
+ }
149
+ this.action.emit({
150
+ type: 'basket.changeQuantity',
151
+ lineId: line.lineId,
152
+ qty: line.qty - 1,
153
+ });
154
+ }
155
+ onVoid(line) {
156
+ if (!this.canVoid(line)) {
157
+ return;
158
+ }
159
+ this.action.emit({ type: 'basket.voidLine', lineId: line.lineId });
160
+ }
161
+ onClear() {
162
+ if (!this.canClear()) {
163
+ return;
164
+ }
165
+ this.action.emit({ type: 'basket.clear' });
166
+ }
167
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosBasket, deps: [], target: i0.ɵɵFactoryTarget.Component });
168
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosBasket, isStandalone: true, selector: "pos-basket", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, totals: { classPropertyName: "totals", publicName: "totals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-basket" }, ngImport: i0, template: "<section\r\n class=\"pos-basket__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <header class=\"pos-basket__header\">\r\n <h2 class=\"pos-basket__title\">{{ title() }}</h2>\r\n <p class=\"pos-basket__count\">\r\n {{ lines().length }}\r\n {{ lines().length === 1 ? 'line' : 'lines' }}\r\n </p>\r\n </header>\r\n\r\n <ul class=\"pos-basket__lines\" aria-label=\"Basket lines\">\r\n @if (!hasLines()) {\r\n <li class=\"pos-basket__empty\">{{ emptyMessage() }}</li>\r\n } @else {\r\n @for (line of lines(); track line.lineId) {\r\n <li>\r\n <article\r\n class=\"pos-basket__line\"\r\n [class.pos-basket__line--voided]=\"line.struckThrough\"\r\n >\r\n <div class=\"pos-basket__line-info\">\r\n <h3 class=\"pos-basket__line-name\">{{ line.name }}</h3>\r\n <p class=\"pos-basket__line-sku\">{{ line.sku }}</p>\r\n @if (line.struckThrough) {\r\n <p class=\"pos-basket__line-voided\">Voided</p>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"pos-basket__stepper\"\r\n role=\"group\"\r\n [attr.aria-label]=\"'Quantity for ' + line.name\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__qty-btn\"\r\n aria-label=\"Decrease quantity\"\r\n [disabled]=\"!canDecrement(line)\"\r\n (click)=\"onDecrement(line)\"\r\n >\r\n \u2212\r\n </button>\r\n <span class=\"pos-basket__qty\" aria-live=\"polite\">{{ line.qty }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__qty-btn\"\r\n aria-label=\"Increase quantity\"\r\n [disabled]=\"!canChangeQuantity(line)\"\r\n (click)=\"onIncrement(line)\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n\r\n <div class=\"pos-basket__line-prices\">\r\n <p class=\"pos-basket__unit-price\">{{ formatMoney(line.unitPrice) }}</p>\r\n <p class=\"pos-basket__line-total\">{{ formatMoney(line.lineTotal) }}</p>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__void\"\r\n [attr.aria-label]=\"'Void ' + line.name\"\r\n [disabled]=\"!canVoid(line)\"\r\n (click)=\"onVoid(line)\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M6 6l12 12M18 6 6 18\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n </article>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n\r\n <footer class=\"pos-basket__footer\">\r\n <dl class=\"pos-basket__totals\" aria-live=\"polite\">\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Gross</dt>\r\n <dd>{{ formatMoney(totals().gross) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Net</dt>\r\n <dd>{{ formatMoney(totals().net) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>VAT</dt>\r\n <dd>{{ formatMoney(totals().vat) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Discount</dt>\r\n <dd>{{ formatMoney(totals().discount) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row pos-basket__total-row--due\">\r\n <dt>Due</dt>\r\n <dd>{{ formatMoney(totals().due) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__clear\"\r\n [disabled]=\"!canClear()\"\r\n (click)=\"onClear()\"\r\n >\r\n {{ clearLabel() }}\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-basket__panel{display:flex;flex-direction:column;min-height:0;height:100%;padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-panel)}.pos-basket__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md);margin-bottom:var(--pos-space-md)}.pos-basket__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em}.pos-basket__count{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-basket__lines{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-sm);min-height:8rem;margin:0;padding:0;overflow-y:auto;list-style:none}.pos-basket__empty{margin:auto 0;padding:var(--pos-space-2xl) var(--pos-space-md);color:var(--pos-color-text-muted);text-align:center}.pos-basket__line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"info void\" \"stepper prices\";align-items:center;gap:var(--pos-space-sm) var(--pos-space-md);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-basket__line-info{grid-area:info;min-width:0}.pos-basket__line-name{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pos-basket__line-sku,.pos-basket__line-voided{margin:var(--pos-space-xs) 0 0;font-size:var(--pos-font-size-sm)}.pos-basket__line-sku{color:var(--pos-color-text-muted)}.pos-basket__line-voided{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-basket__stepper{grid-area:stepper;display:inline-flex;align-items:center;gap:var(--pos-space-xs);width:fit-content;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-basket__qty-btn,.pos-basket__void{display:inline-flex;align-items:center;justify-content:center;margin:0;border:0;background:transparent;color:var(--pos-color-text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-basket__qty-btn{min-width:2.75rem;min-height:2.75rem;border-radius:var(--pos-radius-sm);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-basket__qty-btn:not(:disabled):active,.pos-basket__void:not(:disabled):active{background:var(--pos-color-key-active);color:var(--pos-color-on-key-active)}.pos-basket__qty{min-width:1.75rem;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);text-align:center}.pos-basket__line-prices{grid-area:prices;display:flex;flex-direction:column;align-items:flex-end;gap:var(--pos-space-xs)}.pos-basket__unit-price{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-basket__line-total{margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold)}.pos-basket__void{grid-area:void;justify-self:end;min-width:2.75rem;min-height:2.75rem;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);color:var(--pos-color-text-muted)}.pos-basket__qty-btn:disabled,.pos-basket__void:disabled,.pos-basket__clear:disabled{cursor:not-allowed;opacity:.55}.pos-basket__qty-btn:focus-visible,.pos-basket__void:focus-visible,.pos-basket__clear:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-basket__line--voided .pos-basket__line-name,.pos-basket__line--voided .pos-basket__line-sku,.pos-basket__line--voided .pos-basket__line-prices{color:var(--pos-color-text-muted);text-decoration:line-through}.pos-basket__footer{display:flex;flex-direction:column;gap:var(--pos-space-md);margin-top:var(--pos-space-md);padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-basket__totals{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0}.pos-basket__total-row{display:flex;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-basket__total-row dt,.pos-basket__total-row dd{margin:0}.pos-basket__total-row--due{padding-top:var(--pos-space-sm);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-basket__clear{min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-danger);color:var(--pos-color-on-danger);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-basket__clear:not(:disabled):active{transform:translateY(1px)}.pos-basket__clear:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);transform:none}@media(min-width:768px){.pos-basket__panel{padding:var(--pos-space-xl)}.pos-basket__line{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:\"info stepper prices void\";gap:var(--pos-space-md)}}@media(prefers-reduced-motion:reduce){.pos-basket__clear{transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
169
+ }
170
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosBasket, decorators: [{
171
+ type: Component,
172
+ args: [{ selector: 'pos-basket', changeDetection: ChangeDetectionStrategy.OnPush, host: {
173
+ class: 'pos-basket',
174
+ }, template: "<section\r\n class=\"pos-basket__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <header class=\"pos-basket__header\">\r\n <h2 class=\"pos-basket__title\">{{ title() }}</h2>\r\n <p class=\"pos-basket__count\">\r\n {{ lines().length }}\r\n {{ lines().length === 1 ? 'line' : 'lines' }}\r\n </p>\r\n </header>\r\n\r\n <ul class=\"pos-basket__lines\" aria-label=\"Basket lines\">\r\n @if (!hasLines()) {\r\n <li class=\"pos-basket__empty\">{{ emptyMessage() }}</li>\r\n } @else {\r\n @for (line of lines(); track line.lineId) {\r\n <li>\r\n <article\r\n class=\"pos-basket__line\"\r\n [class.pos-basket__line--voided]=\"line.struckThrough\"\r\n >\r\n <div class=\"pos-basket__line-info\">\r\n <h3 class=\"pos-basket__line-name\">{{ line.name }}</h3>\r\n <p class=\"pos-basket__line-sku\">{{ line.sku }}</p>\r\n @if (line.struckThrough) {\r\n <p class=\"pos-basket__line-voided\">Voided</p>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"pos-basket__stepper\"\r\n role=\"group\"\r\n [attr.aria-label]=\"'Quantity for ' + line.name\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__qty-btn\"\r\n aria-label=\"Decrease quantity\"\r\n [disabled]=\"!canDecrement(line)\"\r\n (click)=\"onDecrement(line)\"\r\n >\r\n \u2212\r\n </button>\r\n <span class=\"pos-basket__qty\" aria-live=\"polite\">{{ line.qty }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__qty-btn\"\r\n aria-label=\"Increase quantity\"\r\n [disabled]=\"!canChangeQuantity(line)\"\r\n (click)=\"onIncrement(line)\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n\r\n <div class=\"pos-basket__line-prices\">\r\n <p class=\"pos-basket__unit-price\">{{ formatMoney(line.unitPrice) }}</p>\r\n <p class=\"pos-basket__line-total\">{{ formatMoney(line.lineTotal) }}</p>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__void\"\r\n [attr.aria-label]=\"'Void ' + line.name\"\r\n [disabled]=\"!canVoid(line)\"\r\n (click)=\"onVoid(line)\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M6 6l12 12M18 6 6 18\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n </article>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n\r\n <footer class=\"pos-basket__footer\">\r\n <dl class=\"pos-basket__totals\" aria-live=\"polite\">\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Gross</dt>\r\n <dd>{{ formatMoney(totals().gross) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Net</dt>\r\n <dd>{{ formatMoney(totals().net) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>VAT</dt>\r\n <dd>{{ formatMoney(totals().vat) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row\">\r\n <dt>Discount</dt>\r\n <dd>{{ formatMoney(totals().discount) }}</dd>\r\n </div>\r\n <div class=\"pos-basket__total-row pos-basket__total-row--due\">\r\n <dt>Due</dt>\r\n <dd>{{ formatMoney(totals().due) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pos-basket__clear\"\r\n [disabled]=\"!canClear()\"\r\n (click)=\"onClear()\"\r\n >\r\n {{ clearLabel() }}\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-basket__panel{display:flex;flex-direction:column;min-height:0;height:100%;padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-panel)}.pos-basket__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md);margin-bottom:var(--pos-space-md)}.pos-basket__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em}.pos-basket__count{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-basket__lines{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-sm);min-height:8rem;margin:0;padding:0;overflow-y:auto;list-style:none}.pos-basket__empty{margin:auto 0;padding:var(--pos-space-2xl) var(--pos-space-md);color:var(--pos-color-text-muted);text-align:center}.pos-basket__line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"info void\" \"stepper prices\";align-items:center;gap:var(--pos-space-sm) var(--pos-space-md);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-basket__line-info{grid-area:info;min-width:0}.pos-basket__line-name{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pos-basket__line-sku,.pos-basket__line-voided{margin:var(--pos-space-xs) 0 0;font-size:var(--pos-font-size-sm)}.pos-basket__line-sku{color:var(--pos-color-text-muted)}.pos-basket__line-voided{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-basket__stepper{grid-area:stepper;display:inline-flex;align-items:center;gap:var(--pos-space-xs);width:fit-content;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-basket__qty-btn,.pos-basket__void{display:inline-flex;align-items:center;justify-content:center;margin:0;border:0;background:transparent;color:var(--pos-color-text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-basket__qty-btn{min-width:2.75rem;min-height:2.75rem;border-radius:var(--pos-radius-sm);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-basket__qty-btn:not(:disabled):active,.pos-basket__void:not(:disabled):active{background:var(--pos-color-key-active);color:var(--pos-color-on-key-active)}.pos-basket__qty{min-width:1.75rem;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);text-align:center}.pos-basket__line-prices{grid-area:prices;display:flex;flex-direction:column;align-items:flex-end;gap:var(--pos-space-xs)}.pos-basket__unit-price{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-basket__line-total{margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold)}.pos-basket__void{grid-area:void;justify-self:end;min-width:2.75rem;min-height:2.75rem;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);color:var(--pos-color-text-muted)}.pos-basket__qty-btn:disabled,.pos-basket__void:disabled,.pos-basket__clear:disabled{cursor:not-allowed;opacity:.55}.pos-basket__qty-btn:focus-visible,.pos-basket__void:focus-visible,.pos-basket__clear:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-basket__line--voided .pos-basket__line-name,.pos-basket__line--voided .pos-basket__line-sku,.pos-basket__line--voided .pos-basket__line-prices{color:var(--pos-color-text-muted);text-decoration:line-through}.pos-basket__footer{display:flex;flex-direction:column;gap:var(--pos-space-md);margin-top:var(--pos-space-md);padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-basket__totals{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0}.pos-basket__total-row{display:flex;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-basket__total-row dt,.pos-basket__total-row dd{margin:0}.pos-basket__total-row--due{padding-top:var(--pos-space-sm);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-basket__clear{min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-danger);color:var(--pos-color-on-danger);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-basket__clear:not(:disabled):active{transform:translateY(1px)}.pos-basket__clear:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);transform:none}@media(min-width:768px){.pos-basket__panel{padding:var(--pos-space-xl)}.pos-basket__line{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:\"info stepper prices void\";gap:var(--pos-space-md)}}@media(prefers-reduced-motion:reduce){.pos-basket__clear{transform:none}}\n"] }]
175
+ }], propDecorators: { lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], totals: [{ type: i0.Input, args: [{ isSignal: true, alias: "totals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
176
+
177
+ class PosItemEntry {
178
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
179
+ errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
180
+ autofocus = input(true, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
181
+ label = input('Item', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
182
+ placeholder = input('Scan or enter item', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
183
+ addLabel = input('Add', ...(ngDevMode ? [{ debugName: "addLabel" }] : /* istanbul ignore next */ []));
184
+ action = output();
185
+ itemInput = viewChild('itemInput', ...(ngDevMode ? [{ debugName: "itemInput" }] : /* istanbul ignore next */ []));
186
+ reference = signal('', ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
187
+ canSubmit = computed(() => this.reference().trim().length > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
188
+ constructor() {
189
+ afterNextRender(() => {
190
+ if (this.autofocus() && !this.disabled()) {
191
+ this.focusInput();
192
+ }
193
+ });
194
+ }
195
+ onInput(event) {
196
+ const target = event.target;
197
+ if (!(target instanceof HTMLInputElement)) {
198
+ return;
199
+ }
200
+ this.reference.set(target.value);
201
+ }
202
+ onSubmit(event) {
203
+ event.preventDefault();
204
+ if (this.disabled()) {
205
+ return;
206
+ }
207
+ const reference = this.reference().trim();
208
+ if (!reference) {
209
+ return;
210
+ }
211
+ this.action.emit({ type: 'itemEntry.submit', reference });
212
+ this.reference.set('');
213
+ this.focusInput();
214
+ }
215
+ focusInput() {
216
+ this.itemInput()?.nativeElement.focus();
217
+ }
218
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosItemEntry, deps: [], target: i0.ɵɵFactoryTarget.Component });
219
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosItemEntry, isStandalone: true, selector: "pos-item-entry", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-item-entry" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<section\r\n class=\"pos-item-entry__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <form class=\"pos-item-entry__form\" (submit)=\"onSubmit($event)\">\r\n <label class=\"pos-item-entry__field\">\r\n <span class=\"pos-item-entry__label\">{{ label() }}</span>\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 (input)=\"onInput($event)\"\r\n />\r\n </label>\r\n\r\n <button\r\n type=\"submit\"\r\n class=\"pos-item-entry__add\"\r\n [class.pos-item-entry__add--disabled]=\"!canSubmit()\"\r\n [disabled]=\"!canSubmit()\"\r\n >\r\n {{ addLabel() }}\r\n </button>\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);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{display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-item-entry__field{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-xs);min-width:0}.pos-item-entry__label{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-item-entry__input{box-sizing:border-box;width:100%;min-height:var(--pos-button-min-height);margin:0;padding:0 var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-semibold);outline:none}.pos-item-entry__input::placeholder{color:var(--pos-color-text-muted);font-weight:var(--pos-font-weight-semibold);opacity:.8}.pos-item-entry__input:disabled{cursor:not-allowed;background:var(--pos-color-disabled);color:var(--pos-color-on-disabled)}.pos-item-entry__input[aria-invalid=true]{border-color:var(--pos-color-danger)}.pos-item-entry__add{flex:0 0 auto;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-xl);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-item-entry__add:not(:disabled):active{transform:translateY(1px)}.pos-item-entry__add--disabled,.pos-item-entry__add:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;transform:none}.pos-item-entry__input:focus-visible{border-color:var(--pos-color-primary);outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-item-entry__add:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.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(min-width:768px){.pos-item-entry__panel{padding:var(--pos-space-xl)}.pos-item-entry__form{flex-direction:row;align-items:flex-end;gap:var(--pos-space-md)}.pos-item-entry__add{min-width:7.5rem}}@media(prefers-reduced-motion:reduce){.pos-item-entry__add{transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
220
+ }
221
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosItemEntry, decorators: [{
222
+ type: Component,
223
+ args: [{ selector: 'pos-item-entry', changeDetection: ChangeDetectionStrategy.OnPush, host: {
224
+ class: 'pos-item-entry',
225
+ }, template: "<section\r\n class=\"pos-item-entry__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <form class=\"pos-item-entry__form\" (submit)=\"onSubmit($event)\">\r\n <label class=\"pos-item-entry__field\">\r\n <span class=\"pos-item-entry__label\">{{ label() }}</span>\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 (input)=\"onInput($event)\"\r\n />\r\n </label>\r\n\r\n <button\r\n type=\"submit\"\r\n class=\"pos-item-entry__add\"\r\n [class.pos-item-entry__add--disabled]=\"!canSubmit()\"\r\n [disabled]=\"!canSubmit()\"\r\n >\r\n {{ addLabel() }}\r\n </button>\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);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{display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-item-entry__field{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-xs);min-width:0}.pos-item-entry__label{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-item-entry__input{box-sizing:border-box;width:100%;min-height:var(--pos-button-min-height);margin:0;padding:0 var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-semibold);outline:none}.pos-item-entry__input::placeholder{color:var(--pos-color-text-muted);font-weight:var(--pos-font-weight-semibold);opacity:.8}.pos-item-entry__input:disabled{cursor:not-allowed;background:var(--pos-color-disabled);color:var(--pos-color-on-disabled)}.pos-item-entry__input[aria-invalid=true]{border-color:var(--pos-color-danger)}.pos-item-entry__add{flex:0 0 auto;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-xl);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-item-entry__add:not(:disabled):active{transform:translateY(1px)}.pos-item-entry__add--disabled,.pos-item-entry__add:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;transform:none}.pos-item-entry__input:focus-visible{border-color:var(--pos-color-primary);outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-item-entry__add:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.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(min-width:768px){.pos-item-entry__panel{padding:var(--pos-space-xl)}.pos-item-entry__form{flex-direction:row;align-items:flex-end;gap:var(--pos-space-md)}.pos-item-entry__add{min-width:7.5rem}}@media(prefers-reduced-motion:reduce){.pos-item-entry__add{transform:none}}\n"] }]
226
+ }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], itemInput: [{ type: i0.ViewChild, args: ['itemInput', { isSignal: true }] }] } });
227
+
228
+ const KEYPAD_ROWS = [
229
+ ['1', '2', '3'],
230
+ ['4', '5', '6'],
231
+ ['7', '8', '9'],
232
+ ['0', '.', '←'],
233
+ ];
234
+ const MAX_WHOLE_DIGITS = 8;
235
+ function parseCashAmount(raw) {
236
+ if (!raw) {
237
+ return null;
238
+ }
239
+ const amount = Number(raw);
240
+ if (!Number.isFinite(amount) || amount <= 0) {
241
+ return null;
242
+ }
243
+ return Math.round(amount * 100) / 100;
244
+ }
245
+ function appendCashKey(current, key) {
246
+ if (key === '←') {
247
+ return current.slice(0, -1);
248
+ }
249
+ if (key === '.') {
250
+ if (current.includes('.')) {
251
+ return current;
252
+ }
253
+ return current === '' ? '0.' : `${current}.`;
254
+ }
255
+ if (!/^\d$/.test(key)) {
256
+ return current;
257
+ }
258
+ if (current === '0') {
259
+ return key;
260
+ }
261
+ const [whole = '', fraction] = current.split('.');
262
+ if (fraction !== undefined) {
263
+ if (fraction.length >= 2) {
264
+ return current;
265
+ }
266
+ return current + key;
267
+ }
268
+ const significant = whole.replace(/^0+/, '');
269
+ if (significant.length >= MAX_WHOLE_DIGITS) {
270
+ return current;
271
+ }
272
+ return current + key;
273
+ }
274
+ class PosTender {
275
+ /** Display-only amount due from the host envelope — not calculated here. */
276
+ amountDue = input(0, ...(ngDevMode ? [{ debugName: "amountDue" }] : /* istanbul ignore next */ []));
277
+ /** Display-only change due from the host envelope — not calculated here. */
278
+ changeDue = input(null, ...(ngDevMode ? [{ debugName: "changeDue" }] : /* istanbul ignore next */ []));
279
+ currency = input('EUR', ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
280
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
281
+ errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
282
+ title = input('Cash tender', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
283
+ amountDueLabel = input('Amount due', ...(ngDevMode ? [{ debugName: "amountDueLabel" }] : /* istanbul ignore next */ []));
284
+ tenderedLabel = input('Amount tendered', ...(ngDevMode ? [{ debugName: "tenderedLabel" }] : /* istanbul ignore next */ []));
285
+ changeDueLabel = input('Change due', ...(ngDevMode ? [{ debugName: "changeDueLabel" }] : /* istanbul ignore next */ []));
286
+ tenderLabel = input('Tender cash', ...(ngDevMode ? [{ debugName: "tenderLabel" }] : /* istanbul ignore next */ []));
287
+ processingLabel = input('Processing tender…', ...(ngDevMode ? [{ debugName: "processingLabel" }] : /* istanbul ignore next */ []));
288
+ action = output();
289
+ keypadRows = KEYPAD_ROWS;
290
+ amountInput = signal('', ...(ngDevMode ? [{ debugName: "amountInput" }] : /* istanbul ignore next */ []));
291
+ parsedAmount = computed(() => parseCashAmount(this.amountInput()), ...(ngDevMode ? [{ debugName: "parsedAmount" }] : /* istanbul ignore next */ []));
292
+ canTender = computed(() => this.parsedAmount() !== null && !this.disabled(), ...(ngDevMode ? [{ debugName: "canTender" }] : /* istanbul ignore next */ []));
293
+ hasChangeDue = computed(() => this.changeDue() !== null, ...(ngDevMode ? [{ debugName: "hasChangeDue" }] : /* istanbul ignore next */ []));
294
+ displayTendered = computed(() => this.amountInput() || '0', ...(ngDevMode ? [{ debugName: "displayTendered" }] : /* istanbul ignore next */ []));
295
+ statusText = computed(() => {
296
+ if (this.disabled() && !this.hasChangeDue()) {
297
+ return this.processingLabel();
298
+ }
299
+ return '';
300
+ }, ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
301
+ formatMoney(amount) {
302
+ return new Intl.NumberFormat(undefined, {
303
+ style: 'currency',
304
+ currency: this.currency() || 'EUR',
305
+ minimumFractionDigits: 2,
306
+ maximumFractionDigits: 2,
307
+ }).format(amount);
308
+ }
309
+ onKeypad(key) {
310
+ if (this.disabled()) {
311
+ return;
312
+ }
313
+ this.amountInput.update((value) => appendCashKey(value, key));
314
+ }
315
+ onTender() {
316
+ if (!this.canTender()) {
317
+ return;
318
+ }
319
+ const amount = this.parsedAmount();
320
+ if (amount === null) {
321
+ return;
322
+ }
323
+ this.action.emit({ type: 'tender.cash', amount });
324
+ }
325
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTender, deps: [], target: i0.ɵɵFactoryTarget.Component });
326
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTender, isStandalone: true, selector: "pos-tender", inputs: { amountDue: { classPropertyName: "amountDue", publicName: "amountDue", isSignal: true, isRequired: false, transformFunction: null }, changeDue: { classPropertyName: "changeDue", publicName: "changeDue", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, amountDueLabel: { classPropertyName: "amountDueLabel", publicName: "amountDueLabel", isSignal: true, isRequired: false, transformFunction: null }, tenderedLabel: { classPropertyName: "tenderedLabel", publicName: "tenderedLabel", isSignal: true, isRequired: false, transformFunction: null }, changeDueLabel: { classPropertyName: "changeDueLabel", publicName: "changeDueLabel", isSignal: true, isRequired: false, transformFunction: null }, tenderLabel: { classPropertyName: "tenderLabel", publicName: "tenderLabel", isSignal: true, isRequired: false, transformFunction: null }, processingLabel: { classPropertyName: "processingLabel", publicName: "processingLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-tender" }, ngImport: i0, template: "<section\r\n class=\"pos-tender__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <header class=\"pos-tender__header\">\r\n <p class=\"pos-tender__kicker\">Adaptive POS</p>\r\n <h2 class=\"pos-tender__title\">{{ title() }}</h2>\r\n </header>\r\n\r\n <div class=\"pos-tender__status\" aria-live=\"polite\">\r\n @if (statusText()) {\r\n <p>{{ statusText() }}</p>\r\n }\r\n @if (errorMessage()) {\r\n <p class=\"pos-tender__error\">{{ errorMessage() }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-tender__summary\">\r\n <dl class=\"pos-tender__due\">\r\n <div class=\"pos-tender__row\">\r\n <dt>{{ amountDueLabel() }}</dt>\r\n <dd>{{ formatMoney(amountDue()) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n @if (hasChangeDue()) {\r\n <div class=\"pos-tender__change\" role=\"status\" aria-live=\"polite\">\r\n <p class=\"pos-tender__change-label\">{{ changeDueLabel() }}</p>\r\n <p class=\"pos-tender__change-value\">\r\n {{ formatMoney(changeDue() ?? 0) }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"pos-tender__display\"\r\n role=\"group\"\r\n [attr.aria-label]=\"tenderedLabel()\"\r\n >\r\n <p class=\"pos-tender__display-label\">{{ tenderedLabel() }}</p>\r\n <p class=\"pos-tender__display-value\" aria-live=\"polite\">\r\n <span class=\"pos-tender__currency\">{{ currency() }}</span>\r\n <span class=\"pos-tender__digits\">{{ displayTendered() }}</span>\r\n </p>\r\n </div>\r\n\r\n <div class=\"pos-tender__keypad\" role=\"group\" aria-label=\"Cash amount keypad\">\r\n @for (row of keypadRows; track $index) {\r\n <div class=\"pos-tender__keypad-row\">\r\n @for (key of row; track key) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-tender__key\"\r\n [class.pos-tender__key--action]=\"key === '\u2190' || key === '.'\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"key === '\u2190' ? 'Backspace' : key === '.' ? 'Decimal point' : key\"\r\n (click)=\"onKeypad(key)\"\r\n >\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-tender__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-tender__primary\"\r\n [class.pos-tender__primary--disabled]=\"!canTender()\"\r\n [disabled]=\"!canTender()\"\r\n (click)=\"onTender()\"\r\n >\r\n {{ tenderLabel() }}\r\n </button>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block;width:100%;max-width:42rem;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-tender__panel{display:grid;grid-template-areas:\"header\" \"status\" \"summary\" \"display\" \"keypad\" \"actions\";gap:var(--pos-space-md);padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-tender__header{grid-area:header;display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-tender__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-tender__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em;line-height:1.15}.pos-tender__status{grid-area:status;min-height:1.5rem;display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-tender__status p{margin:0;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__error{padding:var(--pos-space-sm) var(--pos-space-md);border-left:3px solid var(--pos-color-danger);background:#d6454514;color:var(--pos-color-danger)}.pos-tender__summary{grid-area:summary;display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-tender__due{margin:0}.pos-tender__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--pos-space-md);margin:0;padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-tender__row dt,.pos-tender__row dd{margin:0}.pos-tender__row dt{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__row dd{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-tender__display{grid-area:display;padding:var(--pos-space-lg) var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-display);box-shadow:inset 0 1px #ffffff0f}.pos-tender__display-label{margin:0 0 var(--pos-space-sm);color:#e8edf2b3;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase}.pos-tender__display-value{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-on-display);font-family:var(--pos-font-family-display)}.pos-tender__currency{font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.12em}.pos-tender__digits{font-size:clamp(1.5rem,4vw,2rem);font-weight:var(--pos-font-weight-semibold);letter-spacing:.04em;font-variant-numeric:tabular-nums}.pos-tender__keypad{grid-area:keypad;display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-tender__keypad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pos-space-md)}.pos-tender__key{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-keypad-size);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-family:inherit;font-size:1.15rem;font-weight:var(--pos-font-weight-bold);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-tender__key--action{color:var(--pos-color-text-muted);background:var(--pos-color-surface-muted)}.pos-tender__key:not(:disabled):active{background:var(--pos-color-key-active);border-color:var(--pos-color-key-active);color:var(--pos-color-on-key-active);transform:translateY(1px)}.pos-tender__key:disabled,.pos-tender__primary:disabled{cursor:not-allowed}.pos-tender__key:disabled{opacity:.55}.pos-tender__key:focus-visible,.pos-tender__primary:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-tender__change{display:flex;flex-direction:column;gap:var(--pos-space-xs);padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-success);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-success) 14%,var(--pos-color-panel-elevated))}.pos-tender__change-label{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__change-value{margin:0;color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums}.pos-tender__actions{grid-area:actions;display:flex;margin-top:0}.pos-tender__primary{flex:1 1 auto;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-size:1.05rem;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:filter .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-tender__primary:not(:disabled):hover{filter:brightness(.97)}.pos-tender__primary:not(:disabled):active{transform:translateY(1px)}.pos-tender__primary--disabled,.pos-tender__primary:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);filter:none;transform:none}@media(min-width:768px){.pos-tender__panel{grid-template-columns:minmax(0,1fr) minmax(16rem,1.1fr);grid-template-areas:\"header header\" \"status status\" \"summary keypad\" \"display keypad\" \"actions keypad\";gap:var(--pos-space-lg);padding:var(--pos-space-2xl);align-items:start}.pos-tender__key{min-height:var(--pos-keypad-size-md)}.pos-tender__keypad{align-self:start}}@media(min-width:1100px){.pos-tender__key{min-height:var(--pos-keypad-size-lg);font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.pos-tender__key,.pos-tender__primary{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
327
+ }
328
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTender, decorators: [{
329
+ type: Component,
330
+ args: [{ selector: 'pos-tender', changeDetection: ChangeDetectionStrategy.OnPush, host: {
331
+ class: 'pos-tender',
332
+ }, template: "<section\r\n class=\"pos-tender__panel\"\r\n [attr.aria-busy]=\"disabled() ? true : null\"\r\n>\r\n <header class=\"pos-tender__header\">\r\n <p class=\"pos-tender__kicker\">Adaptive POS</p>\r\n <h2 class=\"pos-tender__title\">{{ title() }}</h2>\r\n </header>\r\n\r\n <div class=\"pos-tender__status\" aria-live=\"polite\">\r\n @if (statusText()) {\r\n <p>{{ statusText() }}</p>\r\n }\r\n @if (errorMessage()) {\r\n <p class=\"pos-tender__error\">{{ errorMessage() }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-tender__summary\">\r\n <dl class=\"pos-tender__due\">\r\n <div class=\"pos-tender__row\">\r\n <dt>{{ amountDueLabel() }}</dt>\r\n <dd>{{ formatMoney(amountDue()) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n @if (hasChangeDue()) {\r\n <div class=\"pos-tender__change\" role=\"status\" aria-live=\"polite\">\r\n <p class=\"pos-tender__change-label\">{{ changeDueLabel() }}</p>\r\n <p class=\"pos-tender__change-value\">\r\n {{ formatMoney(changeDue() ?? 0) }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"pos-tender__display\"\r\n role=\"group\"\r\n [attr.aria-label]=\"tenderedLabel()\"\r\n >\r\n <p class=\"pos-tender__display-label\">{{ tenderedLabel() }}</p>\r\n <p class=\"pos-tender__display-value\" aria-live=\"polite\">\r\n <span class=\"pos-tender__currency\">{{ currency() }}</span>\r\n <span class=\"pos-tender__digits\">{{ displayTendered() }}</span>\r\n </p>\r\n </div>\r\n\r\n <div class=\"pos-tender__keypad\" role=\"group\" aria-label=\"Cash amount keypad\">\r\n @for (row of keypadRows; track $index) {\r\n <div class=\"pos-tender__keypad-row\">\r\n @for (key of row; track key) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-tender__key\"\r\n [class.pos-tender__key--action]=\"key === '\u2190' || key === '.'\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"key === '\u2190' ? 'Backspace' : key === '.' ? 'Decimal point' : key\"\r\n (click)=\"onKeypad(key)\"\r\n >\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-tender__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-tender__primary\"\r\n [class.pos-tender__primary--disabled]=\"!canTender()\"\r\n [disabled]=\"!canTender()\"\r\n (click)=\"onTender()\"\r\n >\r\n {{ tenderLabel() }}\r\n </button>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block;width:100%;max-width:42rem;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-tender__panel{display:grid;grid-template-areas:\"header\" \"status\" \"summary\" \"display\" \"keypad\" \"actions\";gap:var(--pos-space-md);padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-tender__header{grid-area:header;display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-tender__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-tender__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em;line-height:1.15}.pos-tender__status{grid-area:status;min-height:1.5rem;display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-tender__status p{margin:0;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__error{padding:var(--pos-space-sm) var(--pos-space-md);border-left:3px solid var(--pos-color-danger);background:#d6454514;color:var(--pos-color-danger)}.pos-tender__summary{grid-area:summary;display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-tender__due{margin:0}.pos-tender__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--pos-space-md);margin:0;padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-tender__row dt,.pos-tender__row dd{margin:0}.pos-tender__row dt{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__row dd{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-tender__display{grid-area:display;padding:var(--pos-space-lg) var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-display);box-shadow:inset 0 1px #ffffff0f}.pos-tender__display-label{margin:0 0 var(--pos-space-sm);color:#e8edf2b3;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase}.pos-tender__display-value{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-on-display);font-family:var(--pos-font-family-display)}.pos-tender__currency{font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.12em}.pos-tender__digits{font-size:clamp(1.5rem,4vw,2rem);font-weight:var(--pos-font-weight-semibold);letter-spacing:.04em;font-variant-numeric:tabular-nums}.pos-tender__keypad{grid-area:keypad;display:flex;flex-direction:column;gap:var(--pos-space-md)}.pos-tender__keypad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pos-space-md)}.pos-tender__key{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-keypad-size);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-family:inherit;font-size:1.15rem;font-weight:var(--pos-font-weight-bold);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-tender__key--action{color:var(--pos-color-text-muted);background:var(--pos-color-surface-muted)}.pos-tender__key:not(:disabled):active{background:var(--pos-color-key-active);border-color:var(--pos-color-key-active);color:var(--pos-color-on-key-active);transform:translateY(1px)}.pos-tender__key:disabled,.pos-tender__primary:disabled{cursor:not-allowed}.pos-tender__key:disabled{opacity:.55}.pos-tender__key:focus-visible,.pos-tender__primary:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-tender__change{display:flex;flex-direction:column;gap:var(--pos-space-xs);padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-success);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-success) 14%,var(--pos-color-panel-elevated))}.pos-tender__change-label{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-tender__change-value{margin:0;color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums}.pos-tender__actions{grid-area:actions;display:flex;margin-top:0}.pos-tender__primary{flex:1 1 auto;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-size:1.05rem;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:filter .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.pos-tender__primary:not(:disabled):hover{filter:brightness(.97)}.pos-tender__primary:not(:disabled):active{transform:translateY(1px)}.pos-tender__primary--disabled,.pos-tender__primary:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);filter:none;transform:none}@media(min-width:768px){.pos-tender__panel{grid-template-columns:minmax(0,1fr) minmax(16rem,1.1fr);grid-template-areas:\"header header\" \"status status\" \"summary keypad\" \"display keypad\" \"actions keypad\";gap:var(--pos-space-lg);padding:var(--pos-space-2xl);align-items:start}.pos-tender__key{min-height:var(--pos-keypad-size-md)}.pos-tender__keypad{align-self:start}}@media(min-width:1100px){.pos-tender__key{min-height:var(--pos-keypad-size-lg);font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.pos-tender__key,.pos-tender__primary{transition:none}}\n"] }]
333
+ }], propDecorators: { amountDue: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountDue", required: false }] }], changeDue: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeDue", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], amountDueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountDueLabel", required: false }] }], tenderedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenderedLabel", required: false }] }], changeDueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeDueLabel", required: false }] }], tenderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenderLabel", required: false }] }], processingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "processingLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
334
+
335
+ const EMPTY_TOTALS = {
336
+ gross: 0,
337
+ net: 0,
338
+ vat: 0,
339
+ discount: 0,
340
+ due: 0,
341
+ currency: 'EUR',
342
+ };
343
+ const EMPTY_DOCUMENT = {
344
+ number: '',
345
+ receiptReady: false,
346
+ };
347
+ class PosReceipt {
348
+ lines = input([], ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
349
+ totals = input(EMPTY_TOTALS, ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
350
+ payments = input([], ...(ngDevMode ? [{ debugName: "payments" }] : /* istanbul ignore next */ []));
351
+ document = input(EMPTY_DOCUMENT, ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
352
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
353
+ title = input('Receipt', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
354
+ emptyMessage = input('No receipt lines', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
355
+ preparingLabel = input('Preparing receipt…', ...(ngDevMode ? [{ debugName: "preparingLabel" }] : /* istanbul ignore next */ []));
356
+ readyLabel = input('Receipt ready', ...(ngDevMode ? [{ debugName: "readyLabel" }] : /* istanbul ignore next */ []));
357
+ newSaleLabel = input('New sale', ...(ngDevMode ? [{ debugName: "newSaleLabel" }] : /* istanbul ignore next */ []));
358
+ tenderLabel = input('Tender', ...(ngDevMode ? [{ debugName: "tenderLabel" }] : /* istanbul ignore next */ []));
359
+ amountLabel = input('Amount', ...(ngDevMode ? [{ debugName: "amountLabel" }] : /* istanbul ignore next */ []));
360
+ tenderedLabel = input('Tendered', ...(ngDevMode ? [{ debugName: "tenderedLabel" }] : /* istanbul ignore next */ []));
361
+ changeLabel = input('Change', ...(ngDevMode ? [{ debugName: "changeLabel" }] : /* istanbul ignore next */ []));
362
+ action = output();
363
+ hasLines = computed(() => this.lines().length > 0, ...(ngDevMode ? [{ debugName: "hasLines" }] : /* istanbul ignore next */ []));
364
+ hasPayments = computed(() => this.payments().length > 0, ...(ngDevMode ? [{ debugName: "hasPayments" }] : /* istanbul ignore next */ []));
365
+ hasDocumentNumber = computed(() => this.document().number.trim().length > 0, ...(ngDevMode ? [{ debugName: "hasDocumentNumber" }] : /* istanbul ignore next */ []));
366
+ statusText = computed(() => this.document().receiptReady
367
+ ? this.readyLabel()
368
+ : this.preparingLabel(), ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
369
+ canStartNewSale = computed(() => !this.disabled(), ...(ngDevMode ? [{ debugName: "canStartNewSale" }] : /* istanbul ignore next */ []));
370
+ formatMoney(amount) {
371
+ return new Intl.NumberFormat(undefined, {
372
+ style: 'currency',
373
+ currency: this.totals().currency || 'EUR',
374
+ minimumFractionDigits: 2,
375
+ maximumFractionDigits: 2,
376
+ }).format(amount);
377
+ }
378
+ onNewSale() {
379
+ if (!this.canStartNewSale()) {
380
+ return;
381
+ }
382
+ this.action.emit({ type: 'receipt.newSale' });
383
+ }
384
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosReceipt, deps: [], target: i0.ɵɵFactoryTarget.Component });
385
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosReceipt, isStandalone: true, selector: "pos-receipt", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, totals: { classPropertyName: "totals", publicName: "totals", isSignal: true, isRequired: false, transformFunction: null }, payments: { classPropertyName: "payments", publicName: "payments", isSignal: true, isRequired: false, transformFunction: null }, document: { classPropertyName: "document", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, preparingLabel: { classPropertyName: "preparingLabel", publicName: "preparingLabel", isSignal: true, isRequired: false, transformFunction: null }, readyLabel: { classPropertyName: "readyLabel", publicName: "readyLabel", isSignal: true, isRequired: false, transformFunction: null }, newSaleLabel: { classPropertyName: "newSaleLabel", publicName: "newSaleLabel", isSignal: true, isRequired: false, transformFunction: null }, tenderLabel: { classPropertyName: "tenderLabel", publicName: "tenderLabel", isSignal: true, isRequired: false, transformFunction: null }, amountLabel: { classPropertyName: "amountLabel", publicName: "amountLabel", isSignal: true, isRequired: false, transformFunction: null }, tenderedLabel: { classPropertyName: "tenderedLabel", publicName: "tenderedLabel", isSignal: true, isRequired: false, transformFunction: null }, changeLabel: { classPropertyName: "changeLabel", publicName: "changeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-receipt" }, ngImport: i0, template: "<section\r\n class=\"pos-receipt__panel\"\r\n [attr.aria-busy]=\"disabled() || !document().receiptReady ? true : null\"\r\n>\r\n <header class=\"pos-receipt__header\">\r\n <div class=\"pos-receipt__heading\">\r\n <p class=\"pos-receipt__kicker\">Adaptive POS</p>\r\n <h2 class=\"pos-receipt__title\">{{ title() }}</h2>\r\n </div>\r\n @if (hasDocumentNumber()) {\r\n <p class=\"pos-receipt__number\" aria-label=\"Document number\">\r\n {{ document().number }}\r\n </p>\r\n }\r\n </header>\r\n\r\n <p class=\"pos-receipt__status\" aria-live=\"polite\">{{ statusText() }}</p>\r\n\r\n <ul class=\"pos-receipt__lines\" aria-label=\"Receipt lines\">\r\n @if (!hasLines()) {\r\n <li class=\"pos-receipt__empty\">{{ emptyMessage() }}</li>\r\n } @else {\r\n @for (line of lines(); track line.lineId) {\r\n <li>\r\n <article\r\n class=\"pos-receipt__line\"\r\n [class.pos-receipt__line--voided]=\"line.struckThrough\"\r\n >\r\n <div class=\"pos-receipt__line-info\">\r\n <h3 class=\"pos-receipt__line-name\">{{ line.name }}</h3>\r\n <p class=\"pos-receipt__line-sku\">{{ line.sku }}</p>\r\n @if (line.struckThrough) {\r\n <p class=\"pos-receipt__line-voided\">Voided</p>\r\n }\r\n </div>\r\n <p class=\"pos-receipt__qty\">{{ line.qty }}</p>\r\n <div class=\"pos-receipt__line-prices\">\r\n <p class=\"pos-receipt__unit-price\">\r\n {{ formatMoney(line.unitPrice) }}\r\n </p>\r\n <p class=\"pos-receipt__line-total\">\r\n {{ formatMoney(line.lineTotal) }}\r\n </p>\r\n </div>\r\n </article>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n\r\n <div class=\"pos-receipt__summary\">\r\n <dl class=\"pos-receipt__totals\" aria-live=\"polite\">\r\n <div class=\"pos-receipt__row\">\r\n <dt>Gross</dt>\r\n <dd>{{ formatMoney(totals().gross) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>Net</dt>\r\n <dd>{{ formatMoney(totals().net) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>VAT</dt>\r\n <dd>{{ formatMoney(totals().vat) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>Discount</dt>\r\n <dd>{{ formatMoney(totals().discount) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row pos-receipt__row--due\">\r\n <dt>Due</dt>\r\n <dd>{{ formatMoney(totals().due) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n @if (hasPayments()) {\r\n <section class=\"pos-receipt__tender\">\r\n <h3 class=\"pos-receipt__tender-title\">{{ tenderLabel() }}</h3>\r\n <ul class=\"pos-receipt__payments\">\r\n @for (payment of payments(); track $index) {\r\n <li class=\"pos-receipt__payment\">\r\n <header class=\"pos-receipt__payment-header\">\r\n <p class=\"pos-receipt__payment-tender\">{{ payment.tender }}</p>\r\n <p class=\"pos-receipt__payment-state\">{{ payment.state }}</p>\r\n </header>\r\n <dl class=\"pos-receipt__payment-amounts\">\r\n <div class=\"pos-receipt__row\">\r\n <dt>{{ amountLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.amount) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>{{ tenderedLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.tendered) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row pos-receipt__row--change\">\r\n <dt>{{ changeLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.change) }}</dd>\r\n </div>\r\n </dl>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-receipt__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-receipt__new-sale\"\r\n [disabled]=\"!canStartNewSale()\"\r\n (click)=\"onNewSale()\"\r\n >\r\n {{ newSaleLabel() }}\r\n </button>\r\n </div>\r\n</section>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-receipt__panel{display:flex;flex-direction:column;min-height:0;height:100%;padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-receipt__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__heading{display:flex;flex-direction:column;gap:var(--pos-space-sm);min-width:0}.pos-receipt__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-receipt__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em}.pos-receipt__number{margin:0;color:var(--pos-color-text-muted);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere;text-align:right}.pos-receipt__status{margin:var(--pos-space-md) 0 0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__lines{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-sm);min-height:8rem;margin:var(--pos-space-md) 0 0;padding:0;overflow-y:auto;list-style:none}.pos-receipt__empty{margin:auto 0;padding:var(--pos-space-2xl) var(--pos-space-md);color:var(--pos-color-text-muted);text-align:center}.pos-receipt__line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"info qty\" \"prices prices\";align-items:center;gap:var(--pos-space-xs) var(--pos-space-md);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-receipt__line-info{grid-area:info;min-width:0}.pos-receipt__line-name{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pos-receipt__line-sku,.pos-receipt__line-voided{margin:var(--pos-space-xs) 0 0;font-size:var(--pos-font-size-sm)}.pos-receipt__line-sku{color:var(--pos-color-text-muted)}.pos-receipt__line-voided{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__qty{grid-area:qty;margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums;text-align:right}.pos-receipt__line-prices{grid-area:prices;display:flex;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__unit-price{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-receipt__line-total{margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums}.pos-receipt__line--voided .pos-receipt__line-name,.pos-receipt__line--voided .pos-receipt__line-sku,.pos-receipt__line--voided .pos-receipt__line-prices,.pos-receipt__line--voided .pos-receipt__qty{color:var(--pos-color-text-muted);text-decoration:line-through}.pos-receipt__summary{display:flex;flex-direction:column;gap:var(--pos-space-md);margin-top:var(--pos-space-md);padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-receipt__totals,.pos-receipt__payment-amounts{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0}.pos-receipt__row{display:flex;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-receipt__row dt,.pos-receipt__row dd{margin:0}.pos-receipt__row dd{font-variant-numeric:tabular-nums}.pos-receipt__row--due,.pos-receipt__row--change{padding-top:var(--pos-space-sm);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-receipt__tender{display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-receipt__tender-title{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase}.pos-receipt__payments{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0;padding:0;list-style:none}.pos-receipt__payment{display:flex;flex-direction:column;gap:var(--pos-space-sm);padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-success);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-success) 14%,var(--pos-color-panel-elevated))}.pos-receipt__payment-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__payment-tender{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-bold)}.pos-receipt__payment-state{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__actions{margin-top:var(--pos-space-md)}.pos-receipt__new-sale{width:100%;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-receipt__new-sale:not(:disabled):active{transform:translateY(1px)}.pos-receipt__new-sale:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;transform:none}.pos-receipt__new-sale:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}@media(min-width:768px){.pos-receipt__panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(16rem,1fr);grid-template-areas:\"header header\" \"status status\" \"lines summary\" \"actions actions\";gap:var(--pos-space-lg);padding:var(--pos-space-xl);align-items:start}.pos-receipt__header{grid-area:header}.pos-receipt__status{grid-area:status;margin:0}.pos-receipt__lines{grid-area:lines;margin:0}.pos-receipt__line{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:\"info qty prices\";gap:var(--pos-space-md)}.pos-receipt__line-prices{flex-direction:column;align-items:flex-end;justify-content:center}.pos-receipt__summary{grid-area:summary;margin:0;padding:0;border-top:0}.pos-receipt__actions{grid-area:actions;margin:0}}@media(prefers-reduced-motion:reduce){.pos-receipt__new-sale{transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
386
+ }
387
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosReceipt, decorators: [{
388
+ type: Component,
389
+ args: [{ selector: 'pos-receipt', changeDetection: ChangeDetectionStrategy.OnPush, host: {
390
+ class: 'pos-receipt',
391
+ }, template: "<section\r\n class=\"pos-receipt__panel\"\r\n [attr.aria-busy]=\"disabled() || !document().receiptReady ? true : null\"\r\n>\r\n <header class=\"pos-receipt__header\">\r\n <div class=\"pos-receipt__heading\">\r\n <p class=\"pos-receipt__kicker\">Adaptive POS</p>\r\n <h2 class=\"pos-receipt__title\">{{ title() }}</h2>\r\n </div>\r\n @if (hasDocumentNumber()) {\r\n <p class=\"pos-receipt__number\" aria-label=\"Document number\">\r\n {{ document().number }}\r\n </p>\r\n }\r\n </header>\r\n\r\n <p class=\"pos-receipt__status\" aria-live=\"polite\">{{ statusText() }}</p>\r\n\r\n <ul class=\"pos-receipt__lines\" aria-label=\"Receipt lines\">\r\n @if (!hasLines()) {\r\n <li class=\"pos-receipt__empty\">{{ emptyMessage() }}</li>\r\n } @else {\r\n @for (line of lines(); track line.lineId) {\r\n <li>\r\n <article\r\n class=\"pos-receipt__line\"\r\n [class.pos-receipt__line--voided]=\"line.struckThrough\"\r\n >\r\n <div class=\"pos-receipt__line-info\">\r\n <h3 class=\"pos-receipt__line-name\">{{ line.name }}</h3>\r\n <p class=\"pos-receipt__line-sku\">{{ line.sku }}</p>\r\n @if (line.struckThrough) {\r\n <p class=\"pos-receipt__line-voided\">Voided</p>\r\n }\r\n </div>\r\n <p class=\"pos-receipt__qty\">{{ line.qty }}</p>\r\n <div class=\"pos-receipt__line-prices\">\r\n <p class=\"pos-receipt__unit-price\">\r\n {{ formatMoney(line.unitPrice) }}\r\n </p>\r\n <p class=\"pos-receipt__line-total\">\r\n {{ formatMoney(line.lineTotal) }}\r\n </p>\r\n </div>\r\n </article>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n\r\n <div class=\"pos-receipt__summary\">\r\n <dl class=\"pos-receipt__totals\" aria-live=\"polite\">\r\n <div class=\"pos-receipt__row\">\r\n <dt>Gross</dt>\r\n <dd>{{ formatMoney(totals().gross) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>Net</dt>\r\n <dd>{{ formatMoney(totals().net) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>VAT</dt>\r\n <dd>{{ formatMoney(totals().vat) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>Discount</dt>\r\n <dd>{{ formatMoney(totals().discount) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row pos-receipt__row--due\">\r\n <dt>Due</dt>\r\n <dd>{{ formatMoney(totals().due) }}</dd>\r\n </div>\r\n </dl>\r\n\r\n @if (hasPayments()) {\r\n <section class=\"pos-receipt__tender\">\r\n <h3 class=\"pos-receipt__tender-title\">{{ tenderLabel() }}</h3>\r\n <ul class=\"pos-receipt__payments\">\r\n @for (payment of payments(); track $index) {\r\n <li class=\"pos-receipt__payment\">\r\n <header class=\"pos-receipt__payment-header\">\r\n <p class=\"pos-receipt__payment-tender\">{{ payment.tender }}</p>\r\n <p class=\"pos-receipt__payment-state\">{{ payment.state }}</p>\r\n </header>\r\n <dl class=\"pos-receipt__payment-amounts\">\r\n <div class=\"pos-receipt__row\">\r\n <dt>{{ amountLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.amount) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row\">\r\n <dt>{{ tenderedLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.tendered) }}</dd>\r\n </div>\r\n <div class=\"pos-receipt__row pos-receipt__row--change\">\r\n <dt>{{ changeLabel() }}</dt>\r\n <dd>{{ formatMoney(payment.change) }}</dd>\r\n </div>\r\n </dl>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n </div>\r\n\r\n <div class=\"pos-receipt__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-receipt__new-sale\"\r\n [disabled]=\"!canStartNewSale()\"\r\n (click)=\"onNewSale()\"\r\n >\r\n {{ newSaleLabel() }}\r\n </button>\r\n </div>\r\n</section>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-receipt__panel{display:flex;flex-direction:column;min-height:0;height:100%;padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:radial-gradient(120% 80% at 100% 0%,rgba(0,194,178,.08),transparent 55%),var(--pos-color-panel)}.pos-receipt__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__heading{display:flex;flex-direction:column;gap:var(--pos-space-sm);min-width:0}.pos-receipt__kicker{margin:0;color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.14em;text-transform:uppercase}.pos-receipt__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.03em}.pos-receipt__number{margin:0;color:var(--pos-color-text-muted);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere;text-align:right}.pos-receipt__status{margin:var(--pos-space-md) 0 0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__lines{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--pos-space-sm);min-height:8rem;margin:var(--pos-space-md) 0 0;padding:0;overflow-y:auto;list-style:none}.pos-receipt__empty{margin:auto 0;padding:var(--pos-space-2xl) var(--pos-space-md);color:var(--pos-color-text-muted);text-align:center}.pos-receipt__line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"info qty\" \"prices prices\";align-items:center;gap:var(--pos-space-xs) var(--pos-space-md);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated)}.pos-receipt__line-info{grid-area:info;min-width:0}.pos-receipt__line-name{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pos-receipt__line-sku,.pos-receipt__line-voided{margin:var(--pos-space-xs) 0 0;font-size:var(--pos-font-size-sm)}.pos-receipt__line-sku{color:var(--pos-color-text-muted)}.pos-receipt__line-voided{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__qty{grid-area:qty;margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums;text-align:right}.pos-receipt__line-prices{grid-area:prices;display:flex;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__unit-price{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-receipt__line-total{margin:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);font-variant-numeric:tabular-nums}.pos-receipt__line--voided .pos-receipt__line-name,.pos-receipt__line--voided .pos-receipt__line-sku,.pos-receipt__line--voided .pos-receipt__line-prices,.pos-receipt__line--voided .pos-receipt__qty{color:var(--pos-color-text-muted);text-decoration:line-through}.pos-receipt__summary{display:flex;flex-direction:column;gap:var(--pos-space-md);margin-top:var(--pos-space-md);padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-receipt__totals,.pos-receipt__payment-amounts{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0}.pos-receipt__row{display:flex;justify-content:space-between;gap:var(--pos-space-md);margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-receipt__row dt,.pos-receipt__row dd{margin:0}.pos-receipt__row dd{font-variant-numeric:tabular-nums}.pos-receipt__row--due,.pos-receipt__row--change{padding-top:var(--pos-space-sm);border-top:1px solid var(--pos-color-border);color:var(--pos-color-text);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-receipt__tender{display:flex;flex-direction:column;gap:var(--pos-space-sm)}.pos-receipt__tender-title{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase}.pos-receipt__payments{display:flex;flex-direction:column;gap:var(--pos-space-sm);margin:0;padding:0;list-style:none}.pos-receipt__payment{display:flex;flex-direction:column;gap:var(--pos-space-sm);padding:var(--pos-space-md) var(--pos-space-lg);border:1px solid var(--pos-color-success);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-success) 14%,var(--pos-color-panel-elevated))}.pos-receipt__payment-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pos-space-md)}.pos-receipt__payment-tender{margin:0;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-bold)}.pos-receipt__payment-state{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-receipt__actions{margin-top:var(--pos-space-md)}.pos-receipt__new-sale{width:100%;min-height:var(--pos-button-min-height);border:0;border-radius:var(--pos-radius-md);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font:inherit;font-weight:var(--pos-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-receipt__new-sale:not(:disabled):active{transform:translateY(1px)}.pos-receipt__new-sale:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:not-allowed;transform:none}.pos-receipt__new-sale:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}@media(min-width:768px){.pos-receipt__panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(16rem,1fr);grid-template-areas:\"header header\" \"status status\" \"lines summary\" \"actions actions\";gap:var(--pos-space-lg);padding:var(--pos-space-xl);align-items:start}.pos-receipt__header{grid-area:header}.pos-receipt__status{grid-area:status;margin:0}.pos-receipt__lines{grid-area:lines;margin:0}.pos-receipt__line{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:\"info qty prices\";gap:var(--pos-space-md)}.pos-receipt__line-prices{flex-direction:column;align-items:flex-end;justify-content:center}.pos-receipt__summary{grid-area:summary;margin:0;padding:0;border-top:0}.pos-receipt__actions{grid-area:actions;margin:0}}@media(prefers-reduced-motion:reduce){.pos-receipt__new-sale{transform:none}}\n"] }]
392
+ }], propDecorators: { lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], totals: [{ type: i0.Input, args: [{ isSignal: true, alias: "totals", required: false }] }], payments: [{ type: i0.Input, args: [{ isSignal: true, alias: "payments", required: false }] }], document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], preparingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "preparingLabel", required: false }] }], readyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "readyLabel", required: false }] }], newSaleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newSaleLabel", required: false }] }], tenderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenderLabel", required: false }] }], amountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountLabel", required: false }] }], tenderedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenderedLabel", required: false }] }], changeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
393
+
394
+ const POS_TOKEN_CATALOG = [
395
+ {
396
+ name: 'Primary',
397
+ variable: '--pos-color-primary',
398
+ kind: 'color',
399
+ group: 'color',
400
+ preview: 'color',
401
+ defaultValue: '#c9b5f0',
402
+ },
403
+ {
404
+ name: 'On primary',
405
+ variable: '--pos-color-on-primary',
406
+ kind: 'color',
407
+ group: 'color',
408
+ preview: 'color',
409
+ defaultValue: '#333333',
410
+ },
411
+ {
412
+ name: 'Success',
413
+ variable: '--pos-color-success',
414
+ kind: 'color',
415
+ group: 'color',
416
+ preview: 'color',
417
+ defaultValue: '#16dbcc',
418
+ },
419
+ {
420
+ name: 'On success',
421
+ variable: '--pos-color-on-success',
422
+ kind: 'color',
423
+ group: 'color',
424
+ preview: 'color',
425
+ defaultValue: '#333333',
426
+ },
427
+ {
428
+ name: 'Danger',
429
+ variable: '--pos-color-danger',
430
+ kind: 'color',
431
+ group: 'color',
432
+ preview: 'color',
433
+ defaultValue: '#fe5c73',
434
+ },
435
+ {
436
+ name: 'On danger',
437
+ variable: '--pos-color-on-danger',
438
+ kind: 'color',
439
+ group: 'color',
440
+ preview: 'color',
441
+ defaultValue: '#ffffff',
442
+ },
443
+ {
444
+ name: 'Secondary',
445
+ variable: '--pos-color-secondary',
446
+ kind: 'color',
447
+ group: 'color',
448
+ preview: 'color',
449
+ defaultValue: '#16dbcc',
450
+ },
451
+ {
452
+ name: 'Warning',
453
+ variable: '--pos-color-warning',
454
+ kind: 'color',
455
+ group: 'color',
456
+ preview: 'color',
457
+ defaultValue: '#f0ad4e',
458
+ },
459
+ {
460
+ name: 'Text',
461
+ variable: '--pos-color-text',
462
+ kind: 'color',
463
+ group: 'color',
464
+ preview: 'color',
465
+ defaultValue: '#333333',
466
+ },
467
+ {
468
+ name: 'Text muted',
469
+ variable: '--pos-color-text-muted',
470
+ kind: 'color',
471
+ group: 'color',
472
+ preview: 'color',
473
+ defaultValue: '#999999',
474
+ },
475
+ {
476
+ name: 'Surface',
477
+ variable: '--pos-color-surface',
478
+ kind: 'color',
479
+ group: 'color',
480
+ preview: 'color',
481
+ defaultValue: '#ffffff',
482
+ },
483
+ {
484
+ name: 'Surface muted',
485
+ variable: '--pos-color-surface-muted',
486
+ kind: 'color',
487
+ group: 'color',
488
+ preview: 'color',
489
+ defaultValue: '#f5f5f5',
490
+ },
491
+ {
492
+ name: 'Panel',
493
+ variable: '--pos-color-panel',
494
+ kind: 'color',
495
+ group: 'color',
496
+ preview: 'color',
497
+ defaultValue: '#f5f5f5',
498
+ },
499
+ {
500
+ name: 'Panel elevated',
501
+ variable: '--pos-color-panel-elevated',
502
+ kind: 'color',
503
+ group: 'color',
504
+ preview: 'color',
505
+ defaultValue: '#ffffff',
506
+ },
507
+ {
508
+ name: 'Ink',
509
+ variable: '--pos-color-ink',
510
+ kind: 'color',
511
+ group: 'color',
512
+ preview: 'color',
513
+ defaultValue: '#333333',
514
+ },
515
+ {
516
+ name: 'Border',
517
+ variable: '--pos-color-border',
518
+ kind: 'color',
519
+ group: 'color',
520
+ preview: 'color',
521
+ defaultValue: '#dddddd',
522
+ },
523
+ {
524
+ name: 'Disabled',
525
+ variable: '--pos-color-disabled',
526
+ kind: 'color',
527
+ group: 'color',
528
+ preview: 'color',
529
+ defaultValue: '#dddddd',
530
+ },
531
+ {
532
+ name: 'On disabled',
533
+ variable: '--pos-color-on-disabled',
534
+ kind: 'color',
535
+ group: 'color',
536
+ preview: 'color',
537
+ defaultValue: '#999999',
538
+ },
539
+ {
540
+ name: 'Display',
541
+ variable: '--pos-color-display',
542
+ kind: 'color',
543
+ group: 'color',
544
+ preview: 'color',
545
+ defaultValue: '#333333',
546
+ },
547
+ {
548
+ name: 'On display',
549
+ variable: '--pos-color-on-display',
550
+ kind: 'color',
551
+ group: 'color',
552
+ preview: 'color',
553
+ defaultValue: '#ffffff',
554
+ },
555
+ {
556
+ name: 'Key',
557
+ variable: '--pos-color-key',
558
+ kind: 'color',
559
+ group: 'color',
560
+ preview: 'color',
561
+ defaultValue: '#ffffff',
562
+ },
563
+ {
564
+ name: 'Key border',
565
+ variable: '--pos-color-key-border',
566
+ kind: 'color',
567
+ group: 'color',
568
+ preview: 'color',
569
+ defaultValue: '#dddddd',
570
+ },
571
+ {
572
+ name: 'Key active',
573
+ variable: '--pos-color-key-active',
574
+ kind: 'color',
575
+ group: 'color',
576
+ preview: 'color',
577
+ defaultValue: '#c9b5f0',
578
+ },
579
+ {
580
+ name: 'On key active',
581
+ variable: '--pos-color-on-key-active',
582
+ kind: 'color',
583
+ group: 'color',
584
+ preview: 'color',
585
+ defaultValue: '#333333',
586
+ },
587
+ {
588
+ name: 'Radius sm',
589
+ variable: '--pos-radius-sm',
590
+ kind: 'length',
591
+ group: 'radius',
592
+ preview: 'radius',
593
+ defaultValue: '4px',
594
+ },
595
+ {
596
+ name: 'Radius md',
597
+ variable: '--pos-radius-md',
598
+ kind: 'length',
599
+ group: 'radius',
600
+ preview: 'radius',
601
+ defaultValue: '8px',
602
+ },
603
+ {
604
+ name: 'Radius lg',
605
+ variable: '--pos-radius-lg',
606
+ kind: 'length',
607
+ group: 'radius',
608
+ preview: 'radius',
609
+ defaultValue: '12px',
610
+ },
611
+ {
612
+ name: 'Radius pill',
613
+ variable: '--pos-radius-pill',
614
+ kind: 'length',
615
+ group: 'radius',
616
+ preview: 'radius',
617
+ defaultValue: '9999px',
618
+ },
619
+ {
620
+ name: 'Space xs',
621
+ variable: '--pos-space-xs',
622
+ kind: 'length',
623
+ group: 'space',
624
+ preview: 'space',
625
+ defaultValue: '4px',
626
+ },
627
+ {
628
+ name: 'Space sm',
629
+ variable: '--pos-space-sm',
630
+ kind: 'length',
631
+ group: 'space',
632
+ preview: 'space',
633
+ defaultValue: '8px',
634
+ },
635
+ {
636
+ name: 'Space md',
637
+ variable: '--pos-space-md',
638
+ kind: 'length',
639
+ group: 'space',
640
+ preview: 'space',
641
+ defaultValue: '12px',
642
+ },
643
+ {
644
+ name: 'Space lg',
645
+ variable: '--pos-space-lg',
646
+ kind: 'length',
647
+ group: 'space',
648
+ preview: 'space',
649
+ defaultValue: '16px',
650
+ },
651
+ {
652
+ name: 'Space xl',
653
+ variable: '--pos-space-xl',
654
+ kind: 'length',
655
+ group: 'space',
656
+ preview: 'space',
657
+ defaultValue: '24px',
658
+ },
659
+ {
660
+ name: 'Space 2xl',
661
+ variable: '--pos-space-2xl',
662
+ kind: 'length',
663
+ group: 'space',
664
+ preview: 'space',
665
+ defaultValue: '40px',
666
+ },
667
+ {
668
+ name: 'Space 3xl',
669
+ variable: '--pos-space-3xl',
670
+ kind: 'length',
671
+ group: 'space',
672
+ preview: 'space',
673
+ defaultValue: '56px',
674
+ },
675
+ {
676
+ name: 'Font family',
677
+ variable: '--pos-font-family',
678
+ kind: 'font-family',
679
+ group: 'type',
680
+ preview: 'font-family',
681
+ defaultValue: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
682
+ },
683
+ {
684
+ name: 'Font family display',
685
+ variable: '--pos-font-family-display',
686
+ kind: 'font-family',
687
+ group: 'type',
688
+ preview: 'font-family',
689
+ defaultValue: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
690
+ },
691
+ {
692
+ name: 'Font size sm',
693
+ variable: '--pos-font-size-sm',
694
+ kind: 'length',
695
+ group: 'type',
696
+ preview: 'font-size',
697
+ defaultValue: '0.8125rem',
698
+ },
699
+ {
700
+ name: 'Font size md',
701
+ variable: '--pos-font-size-md',
702
+ kind: 'length',
703
+ group: 'type',
704
+ preview: 'font-size',
705
+ defaultValue: '0.875rem',
706
+ },
707
+ {
708
+ name: 'Font size lg',
709
+ variable: '--pos-font-size-lg',
710
+ kind: 'length',
711
+ group: 'type',
712
+ preview: 'font-size',
713
+ defaultValue: '1.125rem',
714
+ },
715
+ {
716
+ name: 'Font size xl',
717
+ variable: '--pos-font-size-xl',
718
+ kind: 'length',
719
+ group: 'type',
720
+ preview: 'font-size',
721
+ defaultValue: '1.375rem',
722
+ },
723
+ {
724
+ name: 'Font weight semibold',
725
+ variable: '--pos-font-weight-semibold',
726
+ kind: 'font-weight',
727
+ group: 'type',
728
+ preview: 'font-weight',
729
+ defaultValue: '600',
730
+ },
731
+ {
732
+ name: 'Font weight bold',
733
+ variable: '--pos-font-weight-bold',
734
+ kind: 'font-weight',
735
+ group: 'type',
736
+ preview: 'font-weight',
737
+ defaultValue: '700',
738
+ },
739
+ {
740
+ name: 'Letter spacing display',
741
+ variable: '--pos-letter-spacing-display',
742
+ kind: 'length',
743
+ group: 'type',
744
+ preview: 'letter-spacing',
745
+ defaultValue: '0.28em',
746
+ },
747
+ {
748
+ name: 'Button min height',
749
+ variable: '--pos-button-min-height',
750
+ kind: 'length',
751
+ group: 'control',
752
+ preview: 'size',
753
+ defaultValue: '48px',
754
+ },
755
+ {
756
+ name: 'Keypad size',
757
+ variable: '--pos-keypad-size',
758
+ kind: 'length',
759
+ group: 'control',
760
+ preview: 'size',
761
+ defaultValue: '3.25rem',
762
+ },
763
+ {
764
+ name: 'Keypad size md',
765
+ variable: '--pos-keypad-size-md',
766
+ kind: 'length',
767
+ group: 'control',
768
+ preview: 'size',
769
+ defaultValue: '3.75rem',
770
+ },
771
+ {
772
+ name: 'Keypad size lg',
773
+ variable: '--pos-keypad-size-lg',
774
+ kind: 'length',
775
+ group: 'control',
776
+ preview: 'size',
777
+ defaultValue: '4.25rem',
778
+ },
779
+ ];
780
+ const POS_TOKEN_DEFAULTS = Object.freeze(Object.fromEntries(POS_TOKEN_CATALOG.map((token) => [token.variable, token.defaultValue])));
781
+ const POS_TOKEN_BY_VARIABLE = new Map(POS_TOKEN_CATALOG.map((token) => [token.variable, token]));
782
+ const POS_TOKEN_SAMPLES = [
783
+ {
784
+ id: 'primary',
785
+ label: 'Primary',
786
+ variables: [
787
+ '--pos-color-primary',
788
+ '--pos-color-on-primary',
789
+ '--pos-radius-md',
790
+ '--pos-button-min-height',
791
+ '--pos-font-weight-bold',
792
+ ],
793
+ },
794
+ {
795
+ id: 'success',
796
+ label: 'Success',
797
+ variables: [
798
+ '--pos-color-success',
799
+ '--pos-color-on-success',
800
+ '--pos-radius-md',
801
+ '--pos-button-min-height',
802
+ '--pos-font-weight-bold',
803
+ ],
804
+ },
805
+ {
806
+ id: 'danger',
807
+ label: 'Danger',
808
+ variables: [
809
+ '--pos-color-danger',
810
+ '--pos-color-on-danger',
811
+ '--pos-radius-md',
812
+ '--pos-button-min-height',
813
+ '--pos-font-weight-bold',
814
+ ],
815
+ },
816
+ {
817
+ id: 'disabled',
818
+ label: 'Disabled',
819
+ variables: [
820
+ '--pos-color-disabled',
821
+ '--pos-color-on-disabled',
822
+ '--pos-radius-md',
823
+ '--pos-button-min-height',
824
+ ],
825
+ },
826
+ {
827
+ id: 'text',
828
+ label: 'Body text',
829
+ variables: [
830
+ '--pos-color-text',
831
+ '--pos-color-text-muted',
832
+ '--pos-font-family',
833
+ '--pos-font-size-md',
834
+ ],
835
+ },
836
+ {
837
+ id: 'error',
838
+ label: 'Danger / error message',
839
+ variables: ['--pos-color-danger', '--pos-font-weight-semibold'],
840
+ },
841
+ ];
842
+ function tokensInGroup(group) {
843
+ return POS_TOKEN_CATALOG.filter((token) => token.group === group);
844
+ }
845
+ function lookupPosTokens(variables) {
846
+ return variables.flatMap((variable) => {
847
+ const token = POS_TOKEN_BY_VARIABLE.get(variable);
848
+ return token ? [token] : [];
849
+ });
850
+ }
851
+
852
+ const TOKEN_DECL = /(--pos-[a-z0-9-]+)\s*:\s*([^;}{]+)/gi;
853
+ const POS_THEME_CSS_FILENAME = 'pos-theme.css';
854
+ const THEME_CSS_HEADER = `/**
855
+ * Adaptive POS theme
856
+ * Generated by <pos-tokens>. Load after @retalia/pos-components styles.
857
+ * Package defaults are unchanged; this file only overrides --pos-* on :root.
858
+ */`;
859
+ function normalizePosTokenValue(kind, value) {
860
+ const trimmed = value.trim().replace(/\/\*[\s\S]*?\*\//g, '').trim();
861
+ if (!trimmed) {
862
+ return '';
863
+ }
864
+ if (kind === 'color') {
865
+ const hex = parseCssHex(trimmed);
866
+ if (hex) {
867
+ return hex;
868
+ }
869
+ }
870
+ return trimmed.replace(/\s*!important$/i, '').trim();
871
+ }
872
+ function parseCssHex(value) {
873
+ const trimmed = value.trim();
874
+ const short = /^#([0-9a-f]{3})$/i.exec(trimmed)?.[1];
875
+ if (short && short.length === 3) {
876
+ const [r, g, b] = short;
877
+ return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
878
+ }
879
+ if (/^#[0-9a-f]{6}$/i.test(trimmed)) {
880
+ return trimmed.toLowerCase();
881
+ }
882
+ return null;
883
+ }
884
+ function parsePosThemeCss(css) {
885
+ const result = {};
886
+ for (const match of css.matchAll(TOKEN_DECL)) {
887
+ const variable = match[1];
888
+ const token = POS_TOKEN_BY_VARIABLE.get(variable);
889
+ if (!token) {
890
+ continue;
891
+ }
892
+ const value = normalizePosTokenValue(token.kind, match[2] ?? '');
893
+ if (value) {
894
+ result[variable] = value;
895
+ }
896
+ }
897
+ return result;
898
+ }
899
+ function resolvedPosTheme(overrides) {
900
+ const resolved = { ...POS_TOKEN_DEFAULTS };
901
+ for (const [variable, value] of Object.entries(overrides)) {
902
+ if (variable in POS_TOKEN_DEFAULTS && value.trim()) {
903
+ resolved[variable] = value;
904
+ }
905
+ }
906
+ return resolved;
907
+ }
908
+ function overridesFromThemeValues(values) {
909
+ const overrides = {};
910
+ for (const [variable, value] of Object.entries(values)) {
911
+ const token = POS_TOKEN_BY_VARIABLE.get(variable);
912
+ if (!token) {
913
+ continue;
914
+ }
915
+ const normalized = normalizePosTokenValue(token.kind, value);
916
+ if (normalized && normalized !== token.defaultValue) {
917
+ overrides[variable] = normalized;
918
+ }
919
+ }
920
+ return overrides;
921
+ }
922
+ function serializePosThemeCss(values) {
923
+ const lines = POS_TOKEN_CATALOG.map((token) => {
924
+ const value = values[token.variable] ?? token.defaultValue;
925
+ return ` ${token.variable}: ${value};`;
926
+ });
927
+ return `${THEME_CSS_HEADER}\n:root {\n${lines.join('\n')}\n}\n`;
928
+ }
929
+ function downloadTextFile(filename, contents) {
930
+ const blob = new Blob([contents], { type: 'text/css;charset=utf-8' });
931
+ const url = URL.createObjectURL(blob);
932
+ const anchor = document.createElement('a');
933
+ anchor.href = url;
934
+ anchor.download = filename;
935
+ anchor.rel = 'noopener';
936
+ document.body.append(anchor);
937
+ anchor.click();
938
+ anchor.remove();
939
+ URL.revokeObjectURL(url);
940
+ }
941
+
942
+ class PosTokens {
943
+ colorTokens = tokensInGroup('color');
944
+ radiusTokens = tokensInGroup('radius');
945
+ spaceTokens = tokensInGroup('space');
946
+ typeTokens = tokensInGroup('type');
947
+ controlTokens = tokensInGroup('control');
948
+ overrides = signal({}, ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
949
+ selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
950
+ statusMessage = signal('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
951
+ selectedTokens = computed(() => {
952
+ const selection = this.selection();
953
+ return selection ? lookupPosTokens(selection.variables) : [];
954
+ }, ...(ngDevMode ? [{ debugName: "selectedTokens" }] : /* istanbul ignore next */ []));
955
+ hasOverrides = computed(() => Object.keys(this.overrides()).length > 0, ...(ngDevMode ? [{ debugName: "hasOverrides" }] : /* istanbul ignore next */ []));
956
+ themeStyle = computed(() => Object.entries(this.overrides())
957
+ .map(([variable, value]) => `${variable}: ${value}`)
958
+ .join('; '), ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
959
+ /** Complete :root CSS for the consuming POS. Package defaults are not written. */
960
+ themeCss() {
961
+ return serializePosThemeCss(resolvedPosTheme(this.overrides()));
962
+ }
963
+ /** Load a previously exported theme as live overrides. Does not mutate defaults. */
964
+ loadThemeCss(css) {
965
+ const parsed = parsePosThemeCss(css);
966
+ const knownCount = Object.keys(parsed).length;
967
+ this.overrides.set(overridesFromThemeValues(parsed));
968
+ if (knownCount === 0) {
969
+ this.statusMessage.set('No --pos-* tokens found in that file.');
970
+ return;
971
+ }
972
+ this.statusMessage.set(`Imported ${knownCount} tokens as live overrides. Package defaults are unchanged.`);
973
+ }
974
+ resetTheme() {
975
+ this.overrides.set({});
976
+ this.statusMessage.set('Live overrides cleared. Package defaults restored in this lab.');
977
+ }
978
+ exportThemeFile() {
979
+ downloadTextFile(POS_THEME_CSS_FILENAME, this.themeCss());
980
+ this.statusMessage.set(`Downloaded ${POS_THEME_CSS_FILENAME}. Add it after the package stylesheet in the host POS.`);
981
+ }
982
+ async onImportFile(event) {
983
+ const input = event.target;
984
+ if (!(input instanceof HTMLInputElement) || !input.files?.length) {
985
+ return;
986
+ }
987
+ const css = await input.files[0].text();
988
+ this.loadThemeCss(css);
989
+ input.value = '';
990
+ }
991
+ selectToken(token) {
992
+ this.selection.set({
993
+ id: `token:${token.variable}`,
994
+ title: token.name,
995
+ variables: [token.variable],
996
+ });
997
+ }
998
+ selectSample(sampleId) {
999
+ const sample = POS_TOKEN_SAMPLES.find((item) => item.id === sampleId);
1000
+ if (!sample) {
1001
+ return;
1002
+ }
1003
+ this.selection.set({
1004
+ id: `sample:${sample.id}`,
1005
+ title: sample.label,
1006
+ variables: sample.variables,
1007
+ });
1008
+ }
1009
+ clearSelection() {
1010
+ this.selection.set(null);
1011
+ }
1012
+ isTokenSelected(variable) {
1013
+ const selection = this.selection();
1014
+ return selection?.id === `token:${variable}`;
1015
+ }
1016
+ isSampleSelected(sampleId) {
1017
+ return this.selection()?.id === `sample:${sampleId}`;
1018
+ }
1019
+ isModified(variable) {
1020
+ return variable in this.overrides();
1021
+ }
1022
+ currentValue(variable) {
1023
+ return this.overrides()[variable] ?? POS_TOKEN_BY_VARIABLE.get(variable)?.defaultValue ?? '';
1024
+ }
1025
+ defaultValue(variable) {
1026
+ return POS_TOKEN_BY_VARIABLE.get(variable)?.defaultValue ?? '';
1027
+ }
1028
+ colorInputValue(variable) {
1029
+ return parseCssHex(this.currentValue(variable));
1030
+ }
1031
+ tokenFieldId(variable) {
1032
+ return `pos-token-field-${variable.replace(/[^a-z0-9]+/gi, '-')}`;
1033
+ }
1034
+ onTokenInput(variable, event) {
1035
+ const target = event.target;
1036
+ if (!(target instanceof HTMLInputElement)) {
1037
+ return;
1038
+ }
1039
+ this.setTokenValue(variable, target.value);
1040
+ }
1041
+ resetToken(variable) {
1042
+ this.overrides.update((current) => {
1043
+ if (!(variable in current)) {
1044
+ return current;
1045
+ }
1046
+ const next = { ...current };
1047
+ delete next[variable];
1048
+ return next;
1049
+ });
1050
+ }
1051
+ setTokenValue(variable, raw) {
1052
+ const token = POS_TOKEN_BY_VARIABLE.get(variable);
1053
+ if (!token) {
1054
+ return;
1055
+ }
1056
+ const normalized = normalizePosTokenValue(token.kind, raw);
1057
+ this.overrides.update((current) => {
1058
+ const next = { ...current };
1059
+ if (!normalized || normalized === token.defaultValue) {
1060
+ delete next[variable];
1061
+ }
1062
+ else {
1063
+ next[variable] = normalized;
1064
+ }
1065
+ return next;
1066
+ });
1067
+ }
1068
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTokens, deps: [], target: i0.ɵɵFactoryTarget.Component });
1069
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTokens, isStandalone: true, selector: "pos-tokens", host: { listeners: { "keydown.escape": "clearSelection()" }, properties: { "style": "themeStyle()" }, classAttribute: "pos-tokens" }, ngImport: i0, template: "<article class=\"pos-tokens__page\">\r\n <header class=\"pos-tokens__intro\">\r\n <p class=\"pos-tokens__kicker\">@retalia/pos-components</p>\r\n <h1 class=\"pos-tokens__title\">Design tokens</h1>\r\n <p class=\"pos-tokens__lede\">\r\n Click a sample or token to edit it. Changes are live overrides in this lab only \u2014\r\n package defaults are never overwritten. Export a complete <code>:root</code> CSS\r\n file for the consuming POS, and import that file back later to resume editing.\r\n </p>\r\n <div class=\"pos-tokens__toolbar\">\r\n <input\r\n #importFile\r\n class=\"pos-tokens__file\"\r\n type=\"file\"\r\n accept=\".css,text/css\"\r\n (change)=\"onImportFile($event)\"\r\n />\r\n <button type=\"button\" class=\"pos-tokens__tool pos-tokens__tool--primary\" (click)=\"exportThemeFile()\">\r\n Export CSS\r\n </button>\r\n <button type=\"button\" class=\"pos-tokens__tool\" (click)=\"importFile.click()\">\r\n Import CSS\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__tool\"\r\n [disabled]=\"!hasOverrides()\"\r\n (click)=\"resetTheme()\"\r\n >\r\n Reset overrides\r\n </button>\r\n </div>\r\n <p class=\"pos-tokens__status\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</p>\r\n </header>\r\n\r\n <div class=\"pos-tokens__layout\">\r\n <div class=\"pos-tokens__gallery\">\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-samples\">\r\n <h2 id=\"pos-tokens-samples\" class=\"pos-tokens__heading\">In action</h2>\r\n <p class=\"pos-tokens__hint\">Click a control to edit the tokens it uses.</p>\r\n <div class=\"pos-tokens__samples\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('primary')\"\r\n [attr.aria-pressed]=\"isSampleSelected('primary')\"\r\n (click)=\"selectSample('primary')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--primary\">Primary</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('success')\"\r\n [attr.aria-pressed]=\"isSampleSelected('success')\"\r\n (click)=\"selectSample('success')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--success\">Success</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('danger')\"\r\n [attr.aria-pressed]=\"isSampleSelected('danger')\"\r\n (click)=\"selectSample('danger')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--danger\">Danger</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('disabled')\"\r\n [attr.aria-pressed]=\"isSampleSelected('disabled')\"\r\n (click)=\"selectSample('disabled')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--disabled\">Disabled</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample pos-tokens__sample--text\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('text')\"\r\n [attr.aria-pressed]=\"isSampleSelected('text')\"\r\n (click)=\"selectSample('text')\"\r\n >\r\n <span class=\"pos-tokens__sample-text\">\r\n Body text \u00B7 <span class=\"pos-tokens__sample-muted\">muted</span>\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample pos-tokens__sample--text\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('error')\"\r\n [attr.aria-pressed]=\"isSampleSelected('error')\"\r\n (click)=\"selectSample('error')\"\r\n >\r\n <span class=\"pos-tokens__sample-danger\">Danger / error message</span>\r\n </button>\r\n </div>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-colors\">\r\n <h2 id=\"pos-tokens-colors\" class=\"pos-tokens__heading\">Color</h2>\r\n <ul class=\"pos-tokens__swatch-grid\">\r\n @for (token of colorTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__chip\"\r\n [style.background]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-radius\">\r\n <h2 id=\"pos-tokens-radius\" class=\"pos-tokens__heading\">Radius</h2>\r\n <ul class=\"pos-tokens__radius-row\">\r\n @for (token of radiusTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__radius-box\"\r\n [style.border-radius]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-space\">\r\n <h2 id=\"pos-tokens-space\" class=\"pos-tokens__heading\">Space</h2>\r\n <ul class=\"pos-tokens__space-list\">\r\n @for (token of spaceTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick pos-tokens__pick--row\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__space-bar\"\r\n [style.width]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-type\">\r\n <h2 id=\"pos-tokens-type\" class=\"pos-tokens__heading\">Typography</h2>\r\n <ul class=\"pos-tokens__type-list\">\r\n @for (token of typeTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n @switch (token.preview) {\r\n @case ('font-family') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-family]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('font-size') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-size]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('font-weight') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-weight]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('letter-spacing') {\r\n <span\r\n class=\"pos-tokens__type-preview pos-tokens__type-preview--caps\"\r\n [style.letter-spacing]=\"'var(' + token.variable + ')'\"\r\n >\r\n Display\r\n </span>\r\n }\r\n }\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-controls\">\r\n <h2 id=\"pos-tokens-controls\" class=\"pos-tokens__heading\">Controls</h2>\r\n <ul class=\"pos-tokens__control-list\">\r\n @for (token of controlTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick pos-tokens__pick--row\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__size-box\"\r\n [style.width]=\"'var(' + token.variable + ')'\"\r\n [style.height]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n </div>\r\n\r\n <aside class=\"pos-tokens__inspector\" aria-labelledby=\"pos-tokens-inspector-title\">\r\n <div class=\"pos-tokens__inspector-header\">\r\n <h2 id=\"pos-tokens-inspector-title\" class=\"pos-tokens__heading\">\r\n {{ selection()?.title ?? 'Theme editor' }}\r\n </h2>\r\n @if (selection()) {\r\n <button type=\"button\" class=\"pos-tokens__tool pos-tokens__tool--quiet\" (click)=\"clearSelection()\">\r\n Close\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (!selection()) {\r\n <p class=\"pos-tokens__hint\">\r\n Select a sample or token to change its values. Export writes a complete CSS\r\n file the host POS can load after the package stylesheet.\r\n </p>\r\n } @else {\r\n <ul class=\"pos-tokens__fields\">\r\n @for (token of selectedTokens(); track token.variable) {\r\n <li class=\"pos-tokens__field\">\r\n <label class=\"pos-tokens__field-label\" [attr.for]=\"tokenFieldId(token.variable)\">\r\n {{ token.name }}\r\n </label>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n <div class=\"pos-tokens__field-controls\">\r\n @if (token.kind === 'color') {\r\n @if (colorInputValue(token.variable); as hex) {\r\n <input\r\n class=\"pos-tokens__color\"\r\n type=\"color\"\r\n [value]=\"hex\"\r\n [attr.aria-label]=\"token.name + ' color'\"\r\n (input)=\"onTokenInput(token.variable, $event)\"\r\n />\r\n }\r\n }\r\n <input\r\n class=\"pos-tokens__value\"\r\n type=\"text\"\r\n [id]=\"tokenFieldId(token.variable)\"\r\n [value]=\"currentValue(token.variable)\"\r\n spellcheck=\"false\"\r\n autocomplete=\"off\"\r\n (input)=\"onTokenInput(token.variable, $event)\"\r\n />\r\n </div>\r\n <p class=\"pos-tokens__default\">\r\n Default\r\n <code>{{ defaultValue(token.variable) }}</code>\r\n </p>\r\n @if (isModified(token.variable)) {\r\n <button type=\"button\" class=\"pos-tokens__reset\" (click)=\"resetToken(token.variable)\">\r\n Reset to default\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </aside>\r\n </div>\r\n</article>\r\n", styles: [":host{display:block;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md);line-height:1.5}.pos-tokens__page{display:flex;flex-direction:column;gap:var(--pos-space-2xl);padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface)}.pos-tokens__kicker{margin:0 0 var(--pos-space-sm);color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.12em;text-transform:uppercase}.pos-tokens__title{margin:0 0 var(--pos-space-sm);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.02em}.pos-tokens__lede{margin:0;max-width:48rem;color:var(--pos-color-text-muted)}.pos-tokens__lede code,.pos-tokens__swatch-var,.pos-tokens__default code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}.pos-tokens__toolbar{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm);margin-top:var(--pos-space-lg)}.pos-tokens__file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.pos-tokens__tool{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-tokens__tool:hover,.pos-tokens__tool:focus-visible{border-color:var(--pos-color-primary)}.pos-tokens__tool:focus-visible,.pos-tokens__pick:focus-visible,.pos-tokens__sample:focus-visible,.pos-tokens__reset:focus-visible,.pos-tokens__value:focus-visible,.pos-tokens__color:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-tokens__tool:disabled{cursor:not-allowed;opacity:.55}.pos-tokens__tool--primary{border-color:transparent;background:var(--pos-color-primary);color:var(--pos-color-on-primary);font-weight:var(--pos-font-weight-bold)}.pos-tokens__tool--quiet{min-height:2.5rem;padding:0 var(--pos-space-md);font-size:var(--pos-font-size-sm)}.pos-tokens__status{min-height:1.25rem;margin:var(--pos-space-sm) 0 0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__layout{display:grid;gap:var(--pos-space-xl)}.pos-tokens__gallery,.pos-tokens__section{display:flex;flex-direction:column;gap:var(--pos-space-lg)}.pos-tokens__heading{margin:0;font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-tokens__hint{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__samples{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-md)}.pos-tokens__sample{display:flex;align-items:center;margin:0;padding:var(--pos-space-xs);border:1px solid transparent;border-radius:var(--pos-radius-md);background:transparent;color:inherit;font:inherit;cursor:pointer}.pos-tokens__sample--text{width:100%;justify-content:flex-start;padding:var(--pos-space-sm)}.pos-tokens__sample:hover,.pos-tokens__sample:focus-visible{border-color:var(--pos-color-border);background:var(--pos-color-surface-muted)}.pos-tokens__sample--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--pos-color-primary) 35%,transparent)}.pos-tokens__btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:0;border-radius:var(--pos-radius-md);font:inherit;font-weight:var(--pos-font-weight-bold);pointer-events:none}.pos-tokens__btn--primary{background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-tokens__btn--success{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-tokens__btn--danger{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-tokens__btn--disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled)}.pos-tokens__sample-text{margin:0}.pos-tokens__sample-muted{color:var(--pos-color-text-muted)}.pos-tokens__sample-danger{margin:0;color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-tokens__swatch-grid,.pos-tokens__radius-row,.pos-tokens__space-list,.pos-tokens__type-list,.pos-tokens__control-list,.pos-tokens__fields{display:grid;gap:var(--pos-space-md);margin:0;padding:0;list-style:none}.pos-tokens__swatch-grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}.pos-tokens__radius-row{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.pos-tokens__pick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-sm);width:100%;min-height:48px;margin:0;padding:var(--pos-space-sm);border:1px solid transparent;border-radius:var(--pos-radius-md);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.pos-tokens__pick--row{flex-direction:row;align-items:center}.pos-tokens__pick:hover,.pos-tokens__pick:focus-visible{border-color:var(--pos-color-border);background:var(--pos-color-surface-muted)}.pos-tokens__pick--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--pos-color-primary) 35%,transparent)}.pos-tokens__chip{display:block;width:100%;height:3.25rem;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md)}.pos-tokens__swatch-meta{display:flex;flex-direction:column;gap:2px}.pos-tokens__swatch-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pos-space-xs);font-weight:var(--pos-font-weight-semibold)}.pos-tokens__edited{color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold)}.pos-tokens__swatch-var{color:var(--pos-color-text-muted);word-break:break-all}.pos-tokens__radius-box,.pos-tokens__size-box{flex:0 0 auto;width:4.5rem;height:4.5rem;border:2px solid var(--pos-color-primary);background:var(--pos-color-panel)}.pos-tokens__space-bar{flex:0 0 auto;min-width:4px;height:1.25rem;background:var(--pos-color-primary);border-radius:var(--pos-radius-sm)}.pos-tokens__type-preview{font-family:var(--pos-font-family-display)}.pos-tokens__type-preview--caps{font-weight:var(--pos-font-weight-bold);text-transform:uppercase}.pos-tokens__inspector{display:flex;flex-direction:column;gap:var(--pos-space-lg);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-panel)}.pos-tokens__inspector-header{display:flex;align-items:center;justify-content:space-between;gap:var(--pos-space-sm)}.pos-tokens__fields{gap:var(--pos-space-lg)}.pos-tokens__field{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-tokens__field-label{font-weight:var(--pos-font-weight-semibold)}.pos-tokens__field-controls{display:flex;align-items:center;gap:var(--pos-space-sm)}.pos-tokens__color{flex:0 0 auto;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-sm);background:var(--pos-color-panel-elevated);cursor:pointer}.pos-tokens__value{flex:1 1 auto;min-width:0;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:inherit;font:inherit}.pos-tokens__default{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__reset{align-self:flex-start;min-height:2.5rem;padding:0;border:0;background:transparent;color:var(--pos-color-primary);font:inherit;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);cursor:pointer}@media(min-width:960px){.pos-tokens__layout{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}.pos-tokens__inspector{position:sticky;top:var(--pos-space-lg)}}@media(max-width:600px){.pos-tokens__page{padding:var(--pos-space-lg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1070
+ }
1071
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTokens, decorators: [{
1072
+ type: Component,
1073
+ args: [{ selector: 'pos-tokens', changeDetection: ChangeDetectionStrategy.OnPush, host: {
1074
+ class: 'pos-tokens',
1075
+ '[style]': 'themeStyle()',
1076
+ '(keydown.escape)': 'clearSelection()',
1077
+ }, template: "<article class=\"pos-tokens__page\">\r\n <header class=\"pos-tokens__intro\">\r\n <p class=\"pos-tokens__kicker\">@retalia/pos-components</p>\r\n <h1 class=\"pos-tokens__title\">Design tokens</h1>\r\n <p class=\"pos-tokens__lede\">\r\n Click a sample or token to edit it. Changes are live overrides in this lab only \u2014\r\n package defaults are never overwritten. Export a complete <code>:root</code> CSS\r\n file for the consuming POS, and import that file back later to resume editing.\r\n </p>\r\n <div class=\"pos-tokens__toolbar\">\r\n <input\r\n #importFile\r\n class=\"pos-tokens__file\"\r\n type=\"file\"\r\n accept=\".css,text/css\"\r\n (change)=\"onImportFile($event)\"\r\n />\r\n <button type=\"button\" class=\"pos-tokens__tool pos-tokens__tool--primary\" (click)=\"exportThemeFile()\">\r\n Export CSS\r\n </button>\r\n <button type=\"button\" class=\"pos-tokens__tool\" (click)=\"importFile.click()\">\r\n Import CSS\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__tool\"\r\n [disabled]=\"!hasOverrides()\"\r\n (click)=\"resetTheme()\"\r\n >\r\n Reset overrides\r\n </button>\r\n </div>\r\n <p class=\"pos-tokens__status\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</p>\r\n </header>\r\n\r\n <div class=\"pos-tokens__layout\">\r\n <div class=\"pos-tokens__gallery\">\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-samples\">\r\n <h2 id=\"pos-tokens-samples\" class=\"pos-tokens__heading\">In action</h2>\r\n <p class=\"pos-tokens__hint\">Click a control to edit the tokens it uses.</p>\r\n <div class=\"pos-tokens__samples\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('primary')\"\r\n [attr.aria-pressed]=\"isSampleSelected('primary')\"\r\n (click)=\"selectSample('primary')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--primary\">Primary</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('success')\"\r\n [attr.aria-pressed]=\"isSampleSelected('success')\"\r\n (click)=\"selectSample('success')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--success\">Success</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('danger')\"\r\n [attr.aria-pressed]=\"isSampleSelected('danger')\"\r\n (click)=\"selectSample('danger')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--danger\">Danger</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('disabled')\"\r\n [attr.aria-pressed]=\"isSampleSelected('disabled')\"\r\n (click)=\"selectSample('disabled')\"\r\n >\r\n <span class=\"pos-tokens__btn pos-tokens__btn--disabled\">Disabled</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample pos-tokens__sample--text\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('text')\"\r\n [attr.aria-pressed]=\"isSampleSelected('text')\"\r\n (click)=\"selectSample('text')\"\r\n >\r\n <span class=\"pos-tokens__sample-text\">\r\n Body text \u00B7 <span class=\"pos-tokens__sample-muted\">muted</span>\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__sample pos-tokens__sample--text\"\r\n [class.pos-tokens__sample--selected]=\"isSampleSelected('error')\"\r\n [attr.aria-pressed]=\"isSampleSelected('error')\"\r\n (click)=\"selectSample('error')\"\r\n >\r\n <span class=\"pos-tokens__sample-danger\">Danger / error message</span>\r\n </button>\r\n </div>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-colors\">\r\n <h2 id=\"pos-tokens-colors\" class=\"pos-tokens__heading\">Color</h2>\r\n <ul class=\"pos-tokens__swatch-grid\">\r\n @for (token of colorTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__chip\"\r\n [style.background]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-radius\">\r\n <h2 id=\"pos-tokens-radius\" class=\"pos-tokens__heading\">Radius</h2>\r\n <ul class=\"pos-tokens__radius-row\">\r\n @for (token of radiusTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__radius-box\"\r\n [style.border-radius]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-space\">\r\n <h2 id=\"pos-tokens-space\" class=\"pos-tokens__heading\">Space</h2>\r\n <ul class=\"pos-tokens__space-list\">\r\n @for (token of spaceTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick pos-tokens__pick--row\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__space-bar\"\r\n [style.width]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-type\">\r\n <h2 id=\"pos-tokens-type\" class=\"pos-tokens__heading\">Typography</h2>\r\n <ul class=\"pos-tokens__type-list\">\r\n @for (token of typeTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n @switch (token.preview) {\r\n @case ('font-family') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-family]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('font-size') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-size]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('font-weight') {\r\n <span\r\n class=\"pos-tokens__type-preview\"\r\n [style.font-weight]=\"'var(' + token.variable + ')'\"\r\n >\r\n The quick brown fox\r\n </span>\r\n }\r\n @case ('letter-spacing') {\r\n <span\r\n class=\"pos-tokens__type-preview pos-tokens__type-preview--caps\"\r\n [style.letter-spacing]=\"'var(' + token.variable + ')'\"\r\n >\r\n Display\r\n </span>\r\n }\r\n }\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n\r\n <section class=\"pos-tokens__section\" aria-labelledby=\"pos-tokens-controls\">\r\n <h2 id=\"pos-tokens-controls\" class=\"pos-tokens__heading\">Controls</h2>\r\n <ul class=\"pos-tokens__control-list\">\r\n @for (token of controlTokens; track token.variable) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n class=\"pos-tokens__pick pos-tokens__pick--row\"\r\n [class.pos-tokens__pick--selected]=\"isTokenSelected(token.variable)\"\r\n [class.pos-tokens__pick--modified]=\"isModified(token.variable)\"\r\n [attr.aria-pressed]=\"isTokenSelected(token.variable)\"\r\n (click)=\"selectToken(token)\"\r\n >\r\n <span\r\n class=\"pos-tokens__size-box\"\r\n [style.width]=\"'var(' + token.variable + ')'\"\r\n [style.height]=\"'var(' + token.variable + ')'\"\r\n ></span>\r\n <span class=\"pos-tokens__swatch-meta\">\r\n <span class=\"pos-tokens__swatch-name\">\r\n {{ token.name }}\r\n @if (isModified(token.variable)) {\r\n <span class=\"pos-tokens__edited\">Edited</span>\r\n }\r\n </span>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n </span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n </div>\r\n\r\n <aside class=\"pos-tokens__inspector\" aria-labelledby=\"pos-tokens-inspector-title\">\r\n <div class=\"pos-tokens__inspector-header\">\r\n <h2 id=\"pos-tokens-inspector-title\" class=\"pos-tokens__heading\">\r\n {{ selection()?.title ?? 'Theme editor' }}\r\n </h2>\r\n @if (selection()) {\r\n <button type=\"button\" class=\"pos-tokens__tool pos-tokens__tool--quiet\" (click)=\"clearSelection()\">\r\n Close\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (!selection()) {\r\n <p class=\"pos-tokens__hint\">\r\n Select a sample or token to change its values. Export writes a complete CSS\r\n file the host POS can load after the package stylesheet.\r\n </p>\r\n } @else {\r\n <ul class=\"pos-tokens__fields\">\r\n @for (token of selectedTokens(); track token.variable) {\r\n <li class=\"pos-tokens__field\">\r\n <label class=\"pos-tokens__field-label\" [attr.for]=\"tokenFieldId(token.variable)\">\r\n {{ token.name }}\r\n </label>\r\n <code class=\"pos-tokens__swatch-var\">{{ token.variable }}</code>\r\n <div class=\"pos-tokens__field-controls\">\r\n @if (token.kind === 'color') {\r\n @if (colorInputValue(token.variable); as hex) {\r\n <input\r\n class=\"pos-tokens__color\"\r\n type=\"color\"\r\n [value]=\"hex\"\r\n [attr.aria-label]=\"token.name + ' color'\"\r\n (input)=\"onTokenInput(token.variable, $event)\"\r\n />\r\n }\r\n }\r\n <input\r\n class=\"pos-tokens__value\"\r\n type=\"text\"\r\n [id]=\"tokenFieldId(token.variable)\"\r\n [value]=\"currentValue(token.variable)\"\r\n spellcheck=\"false\"\r\n autocomplete=\"off\"\r\n (input)=\"onTokenInput(token.variable, $event)\"\r\n />\r\n </div>\r\n <p class=\"pos-tokens__default\">\r\n Default\r\n <code>{{ defaultValue(token.variable) }}</code>\r\n </p>\r\n @if (isModified(token.variable)) {\r\n <button type=\"button\" class=\"pos-tokens__reset\" (click)=\"resetToken(token.variable)\">\r\n Reset to default\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </aside>\r\n </div>\r\n</article>\r\n", styles: [":host{display:block;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md);line-height:1.5}.pos-tokens__page{display:flex;flex-direction:column;gap:var(--pos-space-2xl);padding:var(--pos-space-xl);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface)}.pos-tokens__kicker{margin:0 0 var(--pos-space-sm);color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);letter-spacing:.12em;text-transform:uppercase}.pos-tokens__title{margin:0 0 var(--pos-space-sm);font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);letter-spacing:-.02em}.pos-tokens__lede{margin:0;max-width:48rem;color:var(--pos-color-text-muted)}.pos-tokens__lede code,.pos-tokens__swatch-var,.pos-tokens__default code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}.pos-tokens__toolbar{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm);margin-top:var(--pos-space-lg)}.pos-tokens__file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.pos-tokens__tool{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:var(--pos-color-text);font:inherit;font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-tokens__tool:hover,.pos-tokens__tool:focus-visible{border-color:var(--pos-color-primary)}.pos-tokens__tool:focus-visible,.pos-tokens__pick:focus-visible,.pos-tokens__sample:focus-visible,.pos-tokens__reset:focus-visible,.pos-tokens__value:focus-visible,.pos-tokens__color:focus-visible{outline:2px solid var(--pos-color-primary);outline-offset:2px}.pos-tokens__tool:disabled{cursor:not-allowed;opacity:.55}.pos-tokens__tool--primary{border-color:transparent;background:var(--pos-color-primary);color:var(--pos-color-on-primary);font-weight:var(--pos-font-weight-bold)}.pos-tokens__tool--quiet{min-height:2.5rem;padding:0 var(--pos-space-md);font-size:var(--pos-font-size-sm)}.pos-tokens__status{min-height:1.25rem;margin:var(--pos-space-sm) 0 0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__layout{display:grid;gap:var(--pos-space-xl)}.pos-tokens__gallery,.pos-tokens__section{display:flex;flex-direction:column;gap:var(--pos-space-lg)}.pos-tokens__heading{margin:0;font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-tokens__hint{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__samples{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-md)}.pos-tokens__sample{display:flex;align-items:center;margin:0;padding:var(--pos-space-xs);border:1px solid transparent;border-radius:var(--pos-radius-md);background:transparent;color:inherit;font:inherit;cursor:pointer}.pos-tokens__sample--text{width:100%;justify-content:flex-start;padding:var(--pos-space-sm)}.pos-tokens__sample:hover,.pos-tokens__sample:focus-visible{border-color:var(--pos-color-border);background:var(--pos-color-surface-muted)}.pos-tokens__sample--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--pos-color-primary) 35%,transparent)}.pos-tokens__btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:0;border-radius:var(--pos-radius-md);font:inherit;font-weight:var(--pos-font-weight-bold);pointer-events:none}.pos-tokens__btn--primary{background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-tokens__btn--success{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-tokens__btn--danger{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-tokens__btn--disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled)}.pos-tokens__sample-text{margin:0}.pos-tokens__sample-muted{color:var(--pos-color-text-muted)}.pos-tokens__sample-danger{margin:0;color:var(--pos-color-danger);font-weight:var(--pos-font-weight-semibold)}.pos-tokens__swatch-grid,.pos-tokens__radius-row,.pos-tokens__space-list,.pos-tokens__type-list,.pos-tokens__control-list,.pos-tokens__fields{display:grid;gap:var(--pos-space-md);margin:0;padding:0;list-style:none}.pos-tokens__swatch-grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}.pos-tokens__radius-row{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.pos-tokens__pick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-sm);width:100%;min-height:48px;margin:0;padding:var(--pos-space-sm);border:1px solid transparent;border-radius:var(--pos-radius-md);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.pos-tokens__pick--row{flex-direction:row;align-items:center}.pos-tokens__pick:hover,.pos-tokens__pick:focus-visible{border-color:var(--pos-color-border);background:var(--pos-color-surface-muted)}.pos-tokens__pick--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--pos-color-primary) 35%,transparent)}.pos-tokens__chip{display:block;width:100%;height:3.25rem;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md)}.pos-tokens__swatch-meta{display:flex;flex-direction:column;gap:2px}.pos-tokens__swatch-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pos-space-xs);font-weight:var(--pos-font-weight-semibold)}.pos-tokens__edited{color:var(--pos-color-primary);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold)}.pos-tokens__swatch-var{color:var(--pos-color-text-muted);word-break:break-all}.pos-tokens__radius-box,.pos-tokens__size-box{flex:0 0 auto;width:4.5rem;height:4.5rem;border:2px solid var(--pos-color-primary);background:var(--pos-color-panel)}.pos-tokens__space-bar{flex:0 0 auto;min-width:4px;height:1.25rem;background:var(--pos-color-primary);border-radius:var(--pos-radius-sm)}.pos-tokens__type-preview{font-family:var(--pos-font-family-display)}.pos-tokens__type-preview--caps{font-weight:var(--pos-font-weight-bold);text-transform:uppercase}.pos-tokens__inspector{display:flex;flex-direction:column;gap:var(--pos-space-lg);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-panel)}.pos-tokens__inspector-header{display:flex;align-items:center;justify-content:space-between;gap:var(--pos-space-sm)}.pos-tokens__fields{gap:var(--pos-space-lg)}.pos-tokens__field{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-tokens__field-label{font-weight:var(--pos-font-weight-semibold)}.pos-tokens__field-controls{display:flex;align-items:center;gap:var(--pos-space-sm)}.pos-tokens__color{flex:0 0 auto;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-sm);background:var(--pos-color-panel-elevated);cursor:pointer}.pos-tokens__value{flex:1 1 auto;min-width:0;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-panel-elevated);color:inherit;font:inherit}.pos-tokens__default{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-tokens__reset{align-self:flex-start;min-height:2.5rem;padding:0;border:0;background:transparent;color:var(--pos-color-primary);font:inherit;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-bold);cursor:pointer}@media(min-width:960px){.pos-tokens__layout{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}.pos-tokens__inspector{position:sticky;top:var(--pos-space-lg)}}@media(max-width:600px){.pos-tokens__page{padding:var(--pos-space-lg)}}\n"] }]
1078
+ }] });
1079
+
1080
+ /*
1081
+ * Public API Surface of @retalia/pos-components
1082
+ */
1083
+
1084
+ /**
1085
+ * Generated bundle index. Do not edit.
1086
+ */
1087
+
1088
+ export { PosBasket, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens };
1089
+ //# sourceMappingURL=retalia-pos-components.mjs.map