@retalia/pos-components 0.0.2 → 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 (46) hide show
  1. package/README.md +303 -44
  2. package/eslint.config.js +32 -0
  3. package/ng-package.json +14 -0
  4. package/package.json +17 -28
  5. package/src/lib/basket/pos-basket.html +124 -0
  6. package/src/lib/basket/pos-basket.scss +285 -0
  7. package/src/lib/basket/pos-basket.spec.ts +198 -0
  8. package/src/lib/basket/pos-basket.stories.ts +114 -0
  9. package/src/lib/basket/pos-basket.ts +142 -0
  10. package/src/lib/item-entry/pos-item-entry.html +41 -0
  11. package/src/lib/item-entry/pos-item-entry.scss +145 -0
  12. package/src/lib/item-entry/pos-item-entry.spec.ts +123 -0
  13. package/src/lib/item-entry/pos-item-entry.stories.ts +31 -0
  14. package/src/lib/item-entry/pos-item-entry.ts +81 -0
  15. package/src/lib/login/pos-login.html +82 -0
  16. package/src/lib/login/pos-login.scss +238 -0
  17. package/src/lib/login/pos-login.spec.ts +89 -0
  18. package/src/lib/login/pos-login.stories.ts +36 -0
  19. package/src/lib/login/pos-login.ts +150 -0
  20. package/src/lib/receipt/pos-receipt.html +116 -0
  21. package/src/lib/receipt/pos-receipt.scss +367 -0
  22. package/src/lib/receipt/pos-receipt.spec.ts +188 -0
  23. package/src/lib/receipt/pos-receipt.stories.ts +163 -0
  24. package/src/lib/receipt/pos-receipt.ts +129 -0
  25. package/src/lib/tender/pos-tender.html +79 -0
  26. package/src/lib/tender/pos-tender.scss +318 -0
  27. package/src/lib/tender/pos-tender.spec.ts +150 -0
  28. package/src/lib/tender/pos-tender.stories.ts +47 -0
  29. package/src/lib/tender/pos-tender.ts +154 -0
  30. package/src/lib/tokens/pos-theme-css.spec.ts +75 -0
  31. package/src/lib/tokens/pos-theme-css.ts +123 -0
  32. package/src/lib/tokens/pos-token-catalog.ts +514 -0
  33. package/src/lib/tokens/pos-tokens.html +351 -0
  34. package/src/lib/tokens/pos-tokens.scss +437 -0
  35. package/src/lib/tokens/pos-tokens.spec.ts +164 -0
  36. package/src/lib/tokens/pos-tokens.stories.ts +22 -0
  37. package/src/lib/tokens/pos-tokens.ts +208 -0
  38. package/src/public-api.ts +37 -0
  39. package/src/styles/styles.css +1 -0
  40. package/src/styles/tokens.css +57 -0
  41. package/tsconfig.lib.json +14 -0
  42. package/tsconfig.lib.prod.json +11 -0
  43. package/tsconfig.spec.json +11 -0
  44. package/fesm2022/retalia-pos-components.mjs +0 -97
  45. package/fesm2022/retalia-pos-components.mjs.map +0 -1
  46. package/types/retalia-pos-components.d.ts +0 -16
@@ -0,0 +1,208 @@
1
+ import {
2
+ ChangeDetectionStrategy,
3
+ Component,
4
+ computed,
5
+ signal,
6
+ } from '@angular/core';
7
+
8
+ import {
9
+ POS_TOKEN_BY_VARIABLE,
10
+ POS_TOKEN_SAMPLES,
11
+ type PosTokenDefinition,
12
+ type PosTokenSwatch,
13
+ lookupPosTokens,
14
+ tokensInGroup,
15
+ } from './pos-token-catalog';
16
+ import {
17
+ POS_THEME_CSS_FILENAME,
18
+ downloadTextFile,
19
+ normalizePosTokenValue,
20
+ overridesFromThemeValues,
21
+ parseCssHex,
22
+ parsePosThemeCss,
23
+ resolvedPosTheme,
24
+ serializePosThemeCss,
25
+ } from './pos-theme-css';
26
+
27
+ export type { PosTokenSwatch };
28
+
29
+ interface PosTokenSelection {
30
+ readonly id: string;
31
+ readonly title: string;
32
+ readonly variables: readonly string[];
33
+ }
34
+
35
+ @Component({
36
+ selector: 'pos-tokens',
37
+ changeDetection: ChangeDetectionStrategy.OnPush,
38
+ templateUrl: './pos-tokens.html',
39
+ styleUrl: './pos-tokens.scss',
40
+ host: {
41
+ class: 'pos-tokens',
42
+ '[style]': 'themeStyle()',
43
+ '(keydown.escape)': 'clearSelection()',
44
+ },
45
+ })
46
+ export class PosTokens {
47
+ protected readonly colorTokens = tokensInGroup('color');
48
+ protected readonly radiusTokens = tokensInGroup('radius');
49
+ protected readonly spaceTokens = tokensInGroup('space');
50
+ protected readonly typeTokens = tokensInGroup('type');
51
+ protected readonly controlTokens = tokensInGroup('control');
52
+
53
+ private readonly overrides = signal<Record<string, string>>({});
54
+ protected readonly selection = signal<PosTokenSelection | null>(null);
55
+ protected readonly statusMessage = signal('');
56
+
57
+ protected readonly selectedTokens = computed(() => {
58
+ const selection = this.selection();
59
+ return selection ? lookupPosTokens(selection.variables) : [];
60
+ });
61
+
62
+ protected readonly hasOverrides = computed(
63
+ () => Object.keys(this.overrides()).length > 0,
64
+ );
65
+
66
+ protected readonly themeStyle = computed(() =>
67
+ Object.entries(this.overrides())
68
+ .map(([variable, value]) => `${variable}: ${value}`)
69
+ .join('; '),
70
+ );
71
+
72
+ /** Complete :root CSS for the consuming POS. Package defaults are not written. */
73
+ themeCss(): string {
74
+ return serializePosThemeCss(resolvedPosTheme(this.overrides()));
75
+ }
76
+
77
+ /** Load a previously exported theme as live overrides. Does not mutate defaults. */
78
+ loadThemeCss(css: string): void {
79
+ const parsed = parsePosThemeCss(css);
80
+ const knownCount = Object.keys(parsed).length;
81
+ this.overrides.set(overridesFromThemeValues(parsed));
82
+
83
+ if (knownCount === 0) {
84
+ this.statusMessage.set('No --pos-* tokens found in that file.');
85
+ return;
86
+ }
87
+
88
+ this.statusMessage.set(
89
+ `Imported ${knownCount} tokens as live overrides. Package defaults are unchanged.`,
90
+ );
91
+ }
92
+
93
+ resetTheme(): void {
94
+ this.overrides.set({});
95
+ this.statusMessage.set('Live overrides cleared. Package defaults restored in this lab.');
96
+ }
97
+
98
+ protected exportThemeFile(): void {
99
+ downloadTextFile(POS_THEME_CSS_FILENAME, this.themeCss());
100
+ this.statusMessage.set(
101
+ `Downloaded ${POS_THEME_CSS_FILENAME}. Add it after the package stylesheet in the host POS.`,
102
+ );
103
+ }
104
+
105
+ protected async onImportFile(event: Event): Promise<void> {
106
+ const input = event.target;
107
+ if (!(input instanceof HTMLInputElement) || !input.files?.length) {
108
+ return;
109
+ }
110
+
111
+ const css = await input.files[0].text();
112
+ this.loadThemeCss(css);
113
+ input.value = '';
114
+ }
115
+
116
+ protected selectToken(token: PosTokenDefinition): void {
117
+ this.selection.set({
118
+ id: `token:${token.variable}`,
119
+ title: token.name,
120
+ variables: [token.variable],
121
+ });
122
+ }
123
+
124
+ protected selectSample(sampleId: string): void {
125
+ const sample = POS_TOKEN_SAMPLES.find((item) => item.id === sampleId);
126
+ if (!sample) {
127
+ return;
128
+ }
129
+
130
+ this.selection.set({
131
+ id: `sample:${sample.id}`,
132
+ title: sample.label,
133
+ variables: sample.variables,
134
+ });
135
+ }
136
+
137
+ protected clearSelection(): void {
138
+ this.selection.set(null);
139
+ }
140
+
141
+ protected isTokenSelected(variable: string): boolean {
142
+ const selection = this.selection();
143
+ return selection?.id === `token:${variable}`;
144
+ }
145
+
146
+ protected isSampleSelected(sampleId: string): boolean {
147
+ return this.selection()?.id === `sample:${sampleId}`;
148
+ }
149
+
150
+ protected isModified(variable: string): boolean {
151
+ return variable in this.overrides();
152
+ }
153
+
154
+ protected currentValue(variable: string): string {
155
+ return this.overrides()[variable] ?? POS_TOKEN_BY_VARIABLE.get(variable)?.defaultValue ?? '';
156
+ }
157
+
158
+ protected defaultValue(variable: string): string {
159
+ return POS_TOKEN_BY_VARIABLE.get(variable)?.defaultValue ?? '';
160
+ }
161
+
162
+ protected colorInputValue(variable: string): string | null {
163
+ return parseCssHex(this.currentValue(variable));
164
+ }
165
+
166
+ protected tokenFieldId(variable: string): string {
167
+ return `pos-token-field-${variable.replace(/[^a-z0-9]+/gi, '-')}`;
168
+ }
169
+
170
+ protected onTokenInput(variable: string, event: Event): void {
171
+ const target = event.target;
172
+ if (!(target instanceof HTMLInputElement)) {
173
+ return;
174
+ }
175
+
176
+ this.setTokenValue(variable, target.value);
177
+ }
178
+
179
+ protected resetToken(variable: string): void {
180
+ this.overrides.update((current) => {
181
+ if (!(variable in current)) {
182
+ return current;
183
+ }
184
+
185
+ const next = { ...current };
186
+ delete next[variable];
187
+ return next;
188
+ });
189
+ }
190
+
191
+ private setTokenValue(variable: string, raw: string): void {
192
+ const token = POS_TOKEN_BY_VARIABLE.get(variable);
193
+ if (!token) {
194
+ return;
195
+ }
196
+
197
+ const normalized = normalizePosTokenValue(token.kind, raw);
198
+ this.overrides.update((current) => {
199
+ const next = { ...current };
200
+ if (!normalized || normalized === token.defaultValue) {
201
+ delete next[variable];
202
+ } else {
203
+ next[variable] = normalized;
204
+ }
205
+ return next;
206
+ });
207
+ }
208
+ }
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Public API Surface of @retalia/pos-components
3
+ */
4
+
5
+ export { PosLogin } from './lib/login/pos-login';
6
+ export type {
7
+ PosLoginIntent,
8
+ PosLoginSessionState,
9
+ PosLoginSessionStatus,
10
+ } from './lib/login/pos-login';
11
+
12
+ export { PosBasket } from './lib/basket/pos-basket';
13
+ export type {
14
+ PosBasketIntent,
15
+ PosBasketLine,
16
+ PosBasketTotals,
17
+ PosBasketVat,
18
+ } from './lib/basket/pos-basket';
19
+
20
+ export { PosItemEntry } from './lib/item-entry/pos-item-entry';
21
+ export type { PosItemEntryIntent } from './lib/item-entry/pos-item-entry';
22
+
23
+ export { PosTender } from './lib/tender/pos-tender';
24
+ export type { PosTenderIntent } from './lib/tender/pos-tender';
25
+
26
+ export { PosReceipt } from './lib/receipt/pos-receipt';
27
+ export type {
28
+ PosReceiptIntent,
29
+ PosReceiptLine,
30
+ PosReceiptTotals,
31
+ PosReceiptVat,
32
+ PosReceiptPayment,
33
+ PosReceiptDocument,
34
+ } from './lib/receipt/pos-receipt';
35
+
36
+ export { PosTokens } from './lib/tokens/pos-tokens';
37
+ export type { PosTokenSwatch } from './lib/tokens/pos-tokens';
@@ -0,0 +1 @@
1
+ @import './tokens.css';
@@ -0,0 +1,57 @@
1
+ :root {
2
+ /* Color — aligned with Retalia DX theme (dx.generic.Retalia-DX-Theme) */
3
+ --pos-color-primary: #c9b5f0;
4
+ --pos-color-on-primary: #333333;
5
+ --pos-color-success: #16dbcc;
6
+ --pos-color-on-success: #333333;
7
+ --pos-color-danger: #fe5c73;
8
+ --pos-color-on-danger: #ffffff;
9
+ --pos-color-secondary: #16dbcc;
10
+ --pos-color-warning: #f0ad4e;
11
+ --pos-color-text: #333333;
12
+ --pos-color-text-muted: #999999;
13
+ --pos-color-surface: #ffffff;
14
+ --pos-color-surface-muted: #f5f5f5;
15
+ --pos-color-panel: #f5f5f5;
16
+ --pos-color-panel-elevated: #ffffff;
17
+ --pos-color-ink: #333333;
18
+ --pos-color-border: #dddddd;
19
+ --pos-color-disabled: #dddddd;
20
+ --pos-color-on-disabled: #999999;
21
+ --pos-color-display: #333333;
22
+ --pos-color-on-display: #ffffff;
23
+ --pos-color-key: #ffffff;
24
+ --pos-color-key-border: #dddddd;
25
+ --pos-color-key-active: #c9b5f0;
26
+ --pos-color-on-key-active: #333333;
27
+
28
+ /* Shape / size */
29
+ --pos-radius-sm: 4px;
30
+ --pos-radius-md: 8px;
31
+ --pos-radius-lg: 12px;
32
+ --pos-radius-pill: 9999px;
33
+ --pos-button-min-height: 48px;
34
+ --pos-keypad-size: 3.25rem;
35
+ --pos-keypad-size-md: 3.75rem;
36
+ --pos-keypad-size-lg: 4.25rem;
37
+
38
+ /* Type — Inter stack matches DX Retalia theme */
39
+ --pos-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
40
+ --pos-font-family-display: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
41
+ --pos-font-size-sm: 0.8125rem;
42
+ --pos-font-size-md: 0.875rem;
43
+ --pos-font-size-lg: 1.125rem;
44
+ --pos-font-size-xl: 1.375rem;
45
+ --pos-font-weight-semibold: 600;
46
+ --pos-font-weight-bold: 700;
47
+ --pos-letter-spacing-display: 0.28em;
48
+
49
+ /* Space */
50
+ --pos-space-xs: 4px;
51
+ --pos-space-sm: 8px;
52
+ --pos-space-md: 12px;
53
+ --pos-space-lg: 16px;
54
+ --pos-space-xl: 24px;
55
+ --pos-space-2xl: 40px;
56
+ --pos-space-3xl: 56px;
57
+ }
@@ -0,0 +1,14 @@
1
+ /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
+ /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
+ {
4
+ "extends": "../../tsconfig.json",
5
+ "compilerOptions": {
6
+ "rootDir": "./src",
7
+ "outDir": "../../out-tsc/lib",
8
+ "declaration": true,
9
+ "declarationMap": true,
10
+ "types": []
11
+ },
12
+ "include": ["src/**/*.ts"],
13
+ "exclude": ["**/*.spec.ts", "**/*.stories.ts"]
14
+ }
@@ -0,0 +1,11 @@
1
+ /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
+ /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
+ {
4
+ "extends": "./tsconfig.lib.json",
5
+ "compilerOptions": {
6
+ "declarationMap": false
7
+ },
8
+ "angularCompilerOptions": {
9
+ "compilationMode": "partial"
10
+ }
11
+ }
@@ -0,0 +1,11 @@
1
+ /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
+ /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
+ {
4
+ "extends": "../../tsconfig.json",
5
+ "compilerOptions": {
6
+ "rootDir": "./src",
7
+ "outDir": "../../out-tsc/spec",
8
+ "types": ["vitest/globals"]
9
+ },
10
+ "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
11
+ }
@@ -1,97 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { input, output, signal, ChangeDetectionStrategy, Component } from '@angular/core';
3
-
4
- class PosHelloWorld {
5
- label = input('Hello World library integration successful.', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
6
- acknowledge = output();
7
- confirmed = signal(false, ...(ngDevMode ? [{ debugName: "confirmed" }] : /* istanbul ignore next */ []));
8
- onAcknowledge() {
9
- this.confirmed.set(true);
10
- this.acknowledge.emit({ type: 'helloWorld.acknowledge' });
11
- }
12
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHelloWorld, deps: [], target: i0.ɵɵFactoryTarget.Component });
13
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosHelloWorld, isStandalone: true, selector: "pos-hello-world", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { acknowledge: "acknowledge" }, ngImport: i0, template: `
14
- <article class="card">
15
- <p class="kicker">@retalia/pos-components</p>
16
- <h1>{{ label() }}</h1>
17
- <p class="lede">
18
- If this card rendered, the host installed the package and can consume
19
- presentational POS components.
20
- </p>
21
-
22
- @if (confirmed()) {
23
- <p class="status" role="status" aria-live="polite">
24
- <svg
25
- xmlns="http://www.w3.org/2000/svg"
26
- width="24"
27
- height="24"
28
- viewBox="0 0 24 24"
29
- fill="none"
30
- aria-hidden="true"
31
- >
32
- <circle cx="12" cy="12" r="9.1" stroke="currentColor" stroke-width="1.8" />
33
- <path
34
- d="M7.5 12.4 10.6 15.4 16.5 8.8"
35
- stroke="currentColor"
36
- stroke-width="1.8"
37
- stroke-linecap="round"
38
- stroke-linejoin="round"
39
- />
40
- </svg>
41
- Acknowledged
42
- </p>
43
- } @else {
44
- <button type="button" (click)="onAcknowledge()">Acknowledge</button>
45
- }
46
- </article>
47
- `, isInline: true, styles: [":host{display:block;color:#1a1a1a;font-family:Chakra Petch,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:#fff;border:1px solid #ececf0;border-radius:12px;box-shadow:0 1px 3px #0000000d}.kicker{margin:0;color:#7b2ff2;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}h1{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}.lede{margin:0 0 8px;color:#666a70}button,.status{min-height:52px;min-width:160px;margin:0;padding:0 18px;border-radius:8px;font:inherit;font-weight:600}button{border:0;background:#16dbcc;color:#1a1a1a;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #7b2ff2;outline-offset:2px}.status{display:inline-flex;align-items:center;gap:8px;background:#e4fbf5;color:#0ca678}.status svg{flex-shrink:0}@media(prefers-reduced-motion:reduce){button{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
48
- }
49
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHelloWorld, decorators: [{
50
- type: Component,
51
- args: [{ selector: 'pos-hello-world', changeDetection: ChangeDetectionStrategy.OnPush, template: `
52
- <article class="card">
53
- <p class="kicker">@retalia/pos-components</p>
54
- <h1>{{ label() }}</h1>
55
- <p class="lede">
56
- If this card rendered, the host installed the package and can consume
57
- presentational POS components.
58
- </p>
59
-
60
- @if (confirmed()) {
61
- <p class="status" role="status" aria-live="polite">
62
- <svg
63
- xmlns="http://www.w3.org/2000/svg"
64
- width="24"
65
- height="24"
66
- viewBox="0 0 24 24"
67
- fill="none"
68
- aria-hidden="true"
69
- >
70
- <circle cx="12" cy="12" r="9.1" stroke="currentColor" stroke-width="1.8" />
71
- <path
72
- d="M7.5 12.4 10.6 15.4 16.5 8.8"
73
- stroke="currentColor"
74
- stroke-width="1.8"
75
- stroke-linecap="round"
76
- stroke-linejoin="round"
77
- />
78
- </svg>
79
- Acknowledged
80
- </p>
81
- } @else {
82
- <button type="button" (click)="onAcknowledge()">Acknowledge</button>
83
- }
84
- </article>
85
- `, styles: [":host{display:block;color:#1a1a1a;font-family:Chakra Petch,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:#fff;border:1px solid #ececf0;border-radius:12px;box-shadow:0 1px 3px #0000000d}.kicker{margin:0;color:#7b2ff2;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}h1{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}.lede{margin:0 0 8px;color:#666a70}button,.status{min-height:52px;min-width:160px;margin:0;padding:0 18px;border-radius:8px;font:inherit;font-weight:600}button{border:0;background:#16dbcc;color:#1a1a1a;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #7b2ff2;outline-offset:2px}.status{display:inline-flex;align-items:center;gap:8px;background:#e4fbf5;color:#0ca678}.status svg{flex-shrink:0}@media(prefers-reduced-motion:reduce){button{transition:none}}\n"] }]
86
- }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], acknowledge: [{ type: i0.Output, args: ["acknowledge"] }] } });
87
-
88
- /*
89
- * Public API Surface of @retalia/pos-components
90
- */
91
-
92
- /**
93
- * Generated bundle index. Do not edit.
94
- */
95
-
96
- export { PosHelloWorld };
97
- //# sourceMappingURL=retalia-pos-components.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"retalia-pos-components.mjs","sources":["../../../projects/pos-components/src/lib/hello-world/pos-hello-world.ts","../../../projects/pos-components/src/public-api.ts","../../../projects/pos-components/src/retalia-pos-components.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\n\nexport interface HelloWorldIntent {\n readonly type: 'helloWorld.acknowledge';\n}\n\n@Component({\n selector: 'pos-hello-world',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <article class=\"card\">\n <p class=\"kicker\">@retalia/pos-components</p>\n <h1>{{ label() }}</h1>\n <p class=\"lede\">\n If this card rendered, the host installed the package and can consume\n presentational POS components.\n </p>\n\n @if (confirmed()) {\n <p class=\"status\" role=\"status\" aria-live=\"polite\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"9.1\" stroke=\"currentColor\" stroke-width=\"1.8\" />\n <path\n d=\"M7.5 12.4 10.6 15.4 16.5 8.8\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n Acknowledged\n </p>\n } @else {\n <button type=\"button\" (click)=\"onAcknowledge()\">Acknowledge</button>\n }\n </article>\n `,\n styles: `\n :host {\n display: block;\n color: #1a1a1a;\n font-family: 'Chakra Petch', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 15px;\n line-height: 1.5;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n padding: 24px;\n background: #fff;\n border: 1px solid #ececf0;\n border-radius: 12px;\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);\n }\n\n .kicker {\n margin: 0;\n color: #7b2ff2;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n h1 {\n margin: 0;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 22px;\n font-weight: 700;\n letter-spacing: -0.02em;\n line-height: 1.25;\n }\n\n .lede {\n margin: 0 0 8px;\n color: #666a70;\n }\n\n button,\n .status {\n min-height: 52px;\n min-width: 160px;\n margin: 0;\n padding: 0 18px;\n border-radius: 8px;\n font: inherit;\n font-weight: 600;\n }\n\n button {\n border: 0;\n background: #16dbcc;\n color: #1a1a1a;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n button:focus-visible {\n outline: 3px solid #7b2ff2;\n outline-offset: 2px;\n }\n\n .status {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: #e4fbf5;\n color: #0ca678;\n }\n\n .status svg {\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n button {\n transition: none;\n }\n }\n `,\n})\nexport class PosHelloWorld {\n readonly label = input('Hello World library integration successful.');\n readonly acknowledge = output<HelloWorldIntent>();\n\n protected readonly confirmed = signal(false);\n\n protected onAcknowledge(): void {\n this.confirmed.set(true);\n this.acknowledge.emit({ type: 'helloWorld.acknowledge' });\n }\n}\n","/*\n * Public API Surface of @retalia/pos-components\n */\n\nexport { PosHelloWorld } from './lib/hello-world/pos-hello-world';\nexport type { HelloWorldIntent } from './lib/hello-world/pos-hello-world';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAmIa,aAAa,CAAA;AACf,IAAA,KAAK,GAAG,KAAK,CAAC,6CAA6C,4EAAC;IAC5D,WAAW,GAAG,MAAM,EAAoB;AAE9B,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;IAElC,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,CAAC;IAC3D;wGATW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA1Hd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAwFU,aAAa,EAAA,UAAA,EAAA,CAAA;kBA7HzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,eAAA,EACV,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;;;AC3CH;;AAEG;;ACFH;;AAEG;;"}
@@ -1,16 +0,0 @@
1
- import * as _angular_core from '@angular/core';
2
-
3
- interface HelloWorldIntent {
4
- readonly type: 'helloWorld.acknowledge';
5
- }
6
- declare class PosHelloWorld {
7
- readonly label: _angular_core.InputSignal<string>;
8
- readonly acknowledge: _angular_core.OutputEmitterRef<HelloWorldIntent>;
9
- protected readonly confirmed: _angular_core.WritableSignal<boolean>;
10
- protected onAcknowledge(): void;
11
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosHelloWorld, never>;
12
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosHelloWorld, "pos-hello-world", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "acknowledge": "acknowledge"; }, never, never, true, never>;
13
- }
14
-
15
- export { PosHelloWorld };
16
- export type { HelloWorldIntent };