@retalia/pos-components 0.0.14 → 0.0.16
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.
|
@@ -277,25 +277,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
277
277
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], showBrandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrandImage", required: false }] }], brandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandImage", required: false }] }], brandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabel", required: false }] }], clerkName: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkName", required: false }] }], clerkRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkRole", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], canSignOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSignOut", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], sessionRef: [{ type: i0.ViewChild, args: ['session', { isSignal: true }] }] } });
|
|
278
278
|
|
|
279
279
|
class PosTransactionActionBar {
|
|
280
|
-
/** Envelope action names. `clearBasket` shows Cancel. `tender` shows Cash. */
|
|
280
|
+
/** Envelope action names. `clearBasket` shows Cancel. `tender` shows Cash and Card. */
|
|
281
281
|
availableActions = input([], ...(ngDevMode ? [{ debugName: "availableActions" }] : /* istanbul ignore next */ []));
|
|
282
282
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
283
|
+
/** Key that clicks Card. Empty hides the hint and the shortcut. */
|
|
284
|
+
cardHotkey = input('F12', ...(ngDevMode ? [{ debugName: "cardHotkey" }] : /* istanbul ignore next */ []));
|
|
283
285
|
action = output();
|
|
286
|
+
cardButton = viewChild('cardButton', ...(ngDevMode ? [{ debugName: "cardButton" }] : /* istanbul ignore next */ []));
|
|
287
|
+
// Clicks the real button, so a hidden (no tender) or disabled Card ignores the key.
|
|
288
|
+
onDocumentKeydown(event) {
|
|
289
|
+
const hotkey = this.cardHotkey();
|
|
290
|
+
if (!hotkey || event.key !== hotkey || event.repeat) {
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
|
|
294
|
+
return;
|
|
295
|
+
}
|
|
296
|
+
const button = this.cardButton()?.nativeElement;
|
|
297
|
+
if (!button || button.disabled) {
|
|
298
|
+
return;
|
|
299
|
+
}
|
|
300
|
+
event.preventDefault();
|
|
301
|
+
button.click();
|
|
302
|
+
}
|
|
284
303
|
onClear() {
|
|
285
304
|
this.action.emit({ type: 'actionBar.clearBasket' });
|
|
286
305
|
}
|
|
287
306
|
onCash() {
|
|
288
307
|
this.action.emit({ type: 'actionBar.tender' });
|
|
289
308
|
}
|
|
309
|
+
onCard() {
|
|
310
|
+
this.action.emit({ type: 'actionBar.tenderCard' });
|
|
311
|
+
}
|
|
290
312
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTransactionActionBar, isStandalone: true, selector: "pos-transaction-action-bar", inputs: { availableActions: { classPropertyName: "availableActions", publicName: "availableActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "pos-transaction-action-bar" }, ngImport: i0, template: "@if (availableActions().includes('clearBasket')) {\
|
|
313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTransactionActionBar, isStandalone: true, selector: "pos-transaction-action-bar", inputs: { availableActions: { classPropertyName: "availableActions", publicName: "availableActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cardHotkey: { classPropertyName: "cardHotkey", publicName: "cardHotkey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, classAttribute: "pos-transaction-action-bar" }, viewQueries: [{ propertyName: "cardButton", first: true, predicate: ["cardButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (availableActions().includes('clearBasket')) {\n <button\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\n [disabled]=\"disabled()\"\n (click)=\"onClear()\"\n >\n Cancel\n </button>\n}\n@if (availableActions().includes('tender')) {\n <button\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\n [disabled]=\"disabled()\"\n (click)=\"onCash()\"\n >\n Cash\n </button>\n <button\n #cardButton\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\n [disabled]=\"disabled()\"\n [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\n (click)=\"onCard()\"\n >\n Card\n @if (cardHotkey()) {\n <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\n }\n </button>\n}\n<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.pos-transaction-action-bar__button--card{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button--card{color:var(--pos-color-on-display)}.pos-transaction-action-bar__hotkey{margin:0 0 0 var(--pos-space-sm);padding:0;border:0;background:transparent;color:var(--pos-color-on-disabled);font-family:inherit;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
292
314
|
}
|
|
293
315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, decorators: [{
|
|
294
316
|
type: Component,
|
|
295
317
|
args: [{ selector: 'pos-transaction-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
296
318
|
class: 'pos-transaction-action-bar',
|
|
297
|
-
|
|
298
|
-
|
|
319
|
+
'(document:keydown)': 'onDocumentKeydown($event)',
|
|
320
|
+
}, template: "@if (availableActions().includes('clearBasket')) {\n <button\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\n [disabled]=\"disabled()\"\n (click)=\"onClear()\"\n >\n Cancel\n </button>\n}\n@if (availableActions().includes('tender')) {\n <button\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\n [disabled]=\"disabled()\"\n (click)=\"onCash()\"\n >\n Cash\n </button>\n <button\n #cardButton\n type=\"button\"\n class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\n [disabled]=\"disabled()\"\n [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\n (click)=\"onCard()\"\n >\n Card\n @if (cardHotkey()) {\n <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\n }\n </button>\n}\n<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.pos-transaction-action-bar__button--card{background:var(--pos-color-success);color:var(--pos-color-on-success)}.pos-transaction-action-bar__button--card{color:var(--pos-color-on-display)}.pos-transaction-action-bar__hotkey{margin:0 0 0 var(--pos-space-sm);padding:0;border:0;background:transparent;color:var(--pos-color-on-disabled);font-family:inherit;font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1}.pos-transaction-action-bar__button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}\n"] }]
|
|
321
|
+
}], propDecorators: { availableActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHotkey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], cardButton: [{ type: i0.ViewChild, args: ['cardButton', { isSignal: true }] }] } });
|
|
299
322
|
|
|
300
323
|
class PosItemEntry {
|
|
301
324
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|