@retalia/pos-components 0.0.3 → 0.0.4

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/eslint.config.js +32 -0
  2. package/ng-package.json +14 -0
  3. package/package.json +17 -31
  4. package/src/lib/basket/pos-basket.html +124 -0
  5. package/src/lib/basket/pos-basket.scss +285 -0
  6. package/src/lib/basket/pos-basket.spec.ts +198 -0
  7. package/src/lib/basket/pos-basket.stories.ts +114 -0
  8. package/src/lib/basket/pos-basket.ts +142 -0
  9. package/src/lib/item-entry/pos-item-entry.html +41 -0
  10. package/src/lib/item-entry/pos-item-entry.scss +145 -0
  11. package/src/lib/item-entry/pos-item-entry.spec.ts +123 -0
  12. package/src/lib/item-entry/pos-item-entry.stories.ts +31 -0
  13. package/src/lib/item-entry/pos-item-entry.ts +81 -0
  14. package/src/lib/login/pos-login.html +82 -0
  15. package/src/lib/login/pos-login.scss +238 -0
  16. package/src/lib/login/pos-login.spec.ts +89 -0
  17. package/src/lib/login/pos-login.stories.ts +36 -0
  18. package/src/lib/login/pos-login.ts +150 -0
  19. package/src/lib/receipt/pos-receipt.html +116 -0
  20. package/src/lib/receipt/pos-receipt.scss +367 -0
  21. package/src/lib/receipt/pos-receipt.spec.ts +188 -0
  22. package/src/lib/receipt/pos-receipt.stories.ts +163 -0
  23. package/src/lib/receipt/pos-receipt.ts +129 -0
  24. package/src/lib/tender/pos-tender.html +79 -0
  25. package/src/lib/tender/pos-tender.scss +318 -0
  26. package/src/lib/tender/pos-tender.spec.ts +150 -0
  27. package/src/lib/tender/pos-tender.stories.ts +47 -0
  28. package/src/lib/tender/pos-tender.ts +154 -0
  29. package/src/lib/tokens/pos-theme-css.spec.ts +75 -0
  30. package/src/lib/tokens/pos-theme-css.ts +123 -0
  31. package/src/lib/tokens/pos-token-catalog.ts +514 -0
  32. package/src/lib/tokens/pos-tokens.html +351 -0
  33. package/src/lib/tokens/pos-tokens.scss +437 -0
  34. package/src/lib/tokens/pos-tokens.spec.ts +164 -0
  35. package/src/lib/tokens/pos-tokens.stories.ts +22 -0
  36. package/src/lib/tokens/pos-tokens.ts +208 -0
  37. package/src/public-api.ts +37 -0
  38. package/tsconfig.lib.json +14 -0
  39. package/tsconfig.lib.prod.json +11 -0
  40. package/tsconfig.spec.json +11 -0
  41. package/fesm2022/retalia-pos-components.mjs +0 -1089
  42. package/fesm2022/retalia-pos-components.mjs.map +0 -1
  43. package/types/retalia-pos-components.d.ts +0 -300
  44. /package/{styles → src/styles}/styles.css +0 -0
  45. /package/{styles → src/styles}/tokens.css +0 -0
package/fesm2022/retalia-pos-components.mjs DELETED
@@ -1,1089 +0,0 @@
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