@retalia/pos-components 0.0.18 → 0.0.19

package/fesm2022/retalia-pos-components.mjs

@@ -251,7 +251,9 @@ class PosTillDevices {
         }
         event.preventDefault();
         let next = index;
-        for (let attempt = 0; attempt < cards.length; attempt += 1) {
+        let remaining = cards.length;
+        while (remaining > 0) {
+            remaining -= 1;
             next = (next + step + cards.length) % cards.length;
             const card = cards[next];
             if (!card.offline && !this.disabled()) {
@@ -384,7 +386,7 @@ class PosTillDevices {
         return [host, identity].filter(Boolean).join(' · ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTillDevices, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTillDevices, isStandalone: true, selector: "pos-till-devices", inputs: { devices: { classPropertyName: "devices", publicName: "devices", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, changeLabel: { classPropertyName: "changeLabel", publicName: "changeLabel", isSignal: true, isRequired: false, transformFunction: null }, setupLabel: { classPropertyName: "setupLabel", publicName: "setupLabel", isSignal: true, isRequired: false, transformFunction: null }, connectorLabel: { classPropertyName: "connectorLabel", publicName: "connectorLabel", isSignal: true, isRequired: false, transformFunction: null }, printerCaption: { classPropertyName: "printerCaption", publicName: "printerCaption", isSignal: true, isRequired: false, transformFunction: null }, paymentCaption: { classPropertyName: "paymentCaption", publicName: "paymentCaption", isSignal: true, isRequired: false, transformFunction: null }, noPaymentLabel: { classPropertyName: "noPaymentLabel", publicName: "noPaymentLabel", isSignal: true, isRequired: false, transformFunction: null }, paymentFallbackLabel: { classPropertyName: "paymentFallbackLabel", publicName: "paymentFallbackLabel", isSignal: true, isRequired: false, transformFunction: null }, hardwareLabel: { classPropertyName: "hardwareLabel", publicName: "hardwareLabel", isSignal: true, isRequired: false, transformFunction: null }, softwareLabel: { classPropertyName: "softwareLabel", publicName: "softwareLabel", isSignal: true, isRequired: false, transformFunction: null }, virtualLabel: { classPropertyName: "virtualLabel", publicName: "virtualLabel", isSignal: true, isRequired: false, transformFunction: null }, offlineLabel: { classPropertyName: "offlineLabel", publicName: "offlineLabel", isSignal: true, isRequired: false, transformFunction: null }, nothingToInstallLabel: { classPropertyName: "nothingToInstallLabel", publicName: "nothingToInstallLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.pos-till-devices--dialog": "variant() === \"dialog\"", "class.pos-till-devices--summary": "variant() === \"summary\"", "class.pos-till-devices--link": "variant() === \"link\"" }, classAttribute: "pos-till-devices" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'summary') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__summary\"\r\n    [class.pos-till-devices__summary--attention]=\"!selectedCard()\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    <span class=\"pos-till-devices__eyebrow\">\r\n      {{ connectorLabel() }}\r\n      @if (selectedCard(); as card) {\r\n        <span> \u00B7 {{ card.kindText }}</span>\r\n      }\r\n    </span>\r\n    <span\r\n      class=\"pos-till-devices__summary-title\"\r\n      [class.pos-till-devices__summary-title--attention]=\"!selectedCard()\"\r\n    >\r\n      @if (selectedCard(); as card) {\r\n        {{ card.device.name }}\r\n      } @else {\r\n        {{ setupLabel() }}\r\n        <span aria-hidden=\"true\"> \u203A</span>\r\n      }\r\n    </span>\r\n    @if (selectedCard(); as card) {\r\n      @if (card.printer || card.payment) {\r\n        <span class=\"pos-till-devices__summary-meta\">\r\n          @if (card.printer) {\r\n            <span>{{ printerCaption() }}: {{ card.printer }}</span>\r\n          }\r\n          @if (card.printer && card.payment) {\r\n            <span aria-hidden=\"true\"> \u00B7 </span>\r\n          }\r\n          @if (card.payment) {\r\n            <span>{{ paymentCaption() }}: {{ card.payment }}</span>\r\n          }\r\n        </span>\r\n      }\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (variant() === 'link') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__link\"\r\n    [class.pos-till-devices__link--attention]=\"icon() === 'none' && !selectedCard()\"\r\n    [class.pos-till-devices__link--button]=\"icon() === 'plug'\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    @if (icon() === 'plug') {\r\n      <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 18v2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n        />\r\n      </svg>\r\n    }\r\n    {{ linkText() }}\r\n    @if (icon() === 'none') {\r\n      <span aria-hidden=\"true\"> \u203A</span>\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (showDialog()) {\r\n  <div class=\"pos-till-devices__overlay\" (click)=\"dismiss()\">\r\n    <div\r\n      #dialog\r\n      class=\"pos-till-devices__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"titleId\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onDialogKeydown($event)\"\r\n    >\r\n      <header class=\"pos-till-devices__header\">\r\n        <h2 [id]=\"titleId\" class=\"pos-till-devices__title\">{{ title() }}</h2>\r\n        @if (description()) {\r\n          <p [id]=\"descriptionId\" class=\"pos-till-devices__description\">{{ description() }}</p>\r\n        }\r\n      </header>\r\n\r\n      @if (cards().length === 0) {\r\n        <p class=\"pos-till-devices__empty\">{{ emptyLabel() }}</p>\r\n      } @else {\r\n        <div class=\"pos-till-devices__grid\" role=\"radiogroup\" [attr.aria-label]=\"listLabel()\">\r\n          @for (card of cards(); track card.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-till-devices__card\"\r\n              [class.pos-till-devices__card--selected]=\"card.selected\"\r\n              [class.pos-till-devices__card--offline]=\"card.offline\"\r\n              role=\"radio\"\r\n              [attr.data-card-index]=\"card.index\"\r\n              [attr.aria-checked]=\"card.selected\"\r\n              [disabled]=\"disabled() || card.offline\"\r\n              (click)=\"pick(card)\"\r\n              (keydown.arrowRight)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowDown)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowLeft)=\"moveSelection(card.index, -1, $event)\"\r\n              (keydown.arrowUp)=\"moveSelection(card.index, -1, $event)\"\r\n            >\r\n              <span class=\"pos-till-devices__card-head\">\r\n                <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  @if (card.kind === 'virtual') {\r\n                    <path\r\n                      d=\"M13 2 4 14h7l-1 8 10-14h-7l0-6Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  } @else {\r\n                    <path\r\n                      d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M12 18v2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  }\r\n                </svg>\r\n                <span class=\"pos-till-devices__name\">{{ card.device.name }}</span>\r\n                <span\r\n                  class=\"pos-till-devices__badge\"\r\n                  [class.pos-till-devices__badge--virtual]=\"card.kind === 'virtual'\"\r\n                  [class.pos-till-devices__badge--software]=\"card.kind === 'software'\"\r\n                >\r\n                  {{ card.kindText }}\r\n                </span>\r\n              </span>\r\n\r\n              @if (card.printer) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path\r\n                      d=\"M7 8V4h10v4M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M7 14h10v6H7z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ printerCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.printer }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.payment) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <rect\r\n                      x=\"3\"\r\n                      y=\"6\"\r\n                      width=\"18\"\r\n                      height=\"12\"\r\n                      rx=\"2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                    />\r\n                    <path d=\"M3 10h18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ paymentCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.payment }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.detail) {\r\n                <span\r\n                  class=\"pos-till-devices__presence\"\r\n                  [class.pos-till-devices__presence--online]=\"card.presence === 'online'\"\r\n                  [class.pos-till-devices__presence--offline]=\"card.presence === 'offline'\"\r\n                >\r\n                  <span class=\"pos-till-devices__dot\" aria-hidden=\"true\"></span>\r\n                  <span>{{ card.detail }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"pos-till-devices__actions\">\r\n        <button type=\"button\" class=\"pos-till-devices__button\" (click)=\"dismiss()\">\r\n          {{ cancelLabel() }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-till-devices__button pos-till-devices__button--primary\"\r\n          [disabled]=\"!canConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabel() }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host(.pos-till-devices--link){display:flex;justify-content:center}*{box-sizing:border-box}.pos-till-devices__summary,.pos-till-devices__link,.pos-till-devices__card,.pos-till-devices__button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-till-devices__summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-xs);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);text-align:left}.pos-till-devices__summary--attention{border-style:dashed;border-color:var(--pos-color-danger)}.pos-till-devices__eyebrow{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-brand);text-transform:uppercase}.pos-till-devices__summary-title{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold);line-height:1.25}.pos-till-devices__summary-title--attention{color:var(--pos-color-danger)}.pos-till-devices__summary-meta{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-md);border:0;background:transparent;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__link--attention{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-bold)}.pos-till-devices__link--button{width:100%;gap:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);box-shadow:var(--pos-shadow-key)}.pos-till-devices__link--button .pos-till-devices__icon{width:1.15rem;height:1.15rem;margin-top:0;color:var(--pos-color-text)}.pos-till-devices__summary:hover:not(:disabled),.pos-till-devices__link:hover:not(:disabled),.pos-till-devices__card:hover:not(:disabled){border-color:var(--pos-color-primary)}.pos-till-devices__link:hover:not(:disabled){text-decoration:underline}.pos-till-devices__link--button:hover:not(:disabled){text-decoration:none}.pos-till-devices__summary:focus-visible,.pos-till-devices__link:focus-visible,.pos-till-devices__card:focus-visible,.pos-till-devices__button:focus-visible{outline:3px solid var(--pos-color-primary);outline-offset:2px}.pos-till-devices__summary:disabled,.pos-till-devices__link:disabled,.pos-till-devices__card:disabled,.pos-till-devices__button:disabled{cursor:not-allowed;opacity:.45}.pos-till-devices__overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:var(--pos-space-lg);overflow:auto;background:color-mix(in srgb,var(--pos-color-ink) 45%,transparent)}.pos-till-devices__dialog{display:flex;flex-direction:column;gap:var(--pos-space-lg);width:min(64rem,100%);max-height:calc(100vh - var(--pos-space-lg) * 2);margin-block:auto;padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-till-devices__header{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-till-devices__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-till-devices__description,.pos-till-devices__empty{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__empty{padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface-muted)}.pos-till-devices__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pos-space-md);min-height:0;margin:0;padding:0;overflow:auto}.pos-till-devices__card{display:flex;flex-direction:column;align-items:stretch;gap:var(--pos-space-sm);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);box-shadow:var(--pos-shadow-key);text-align:left}.pos-till-devices__card--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos-color-primary) 55%,transparent)}.pos-till-devices__card-head{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0}.pos-till-devices__icon{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.1rem;color:var(--pos-color-text-muted)}.pos-till-devices__name{flex:1 1 auto;min-width:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);line-height:1.3;overflow-wrap:anywhere}.pos-till-devices__badge{flex:0 0 auto;padding:var(--pos-space-xs) var(--pos-space-sm);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface-muted);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1.2}.pos-till-devices__badge--virtual{background:color-mix(in srgb,var(--pos-color-primary) 45%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__badge--software{background:color-mix(in srgb,var(--pos-color-warning) 40%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__row,.pos-till-devices__presence{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0;font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__row-label{color:var(--pos-color-text-muted)}.pos-till-devices__row-value{font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere}.pos-till-devices__presence{align-items:center;color:var(--pos-color-text-muted)}.pos-till-devices__presence--online{color:color-mix(in srgb,var(--pos-color-success) 28%,var(--pos-color-text))}.pos-till-devices__presence--offline{color:var(--pos-color-danger)}.pos-till-devices__dot{flex:0 0 auto;width:var(--pos-space-sm);height:var(--pos-space-sm);margin-top:.15rem;border-radius:var(--pos-radius-pill);background:currentColor}.pos-till-devices__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--pos-space-sm)}.pos-till-devices__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__button--primary{border-color:var(--pos-color-primary);background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-till-devices__button--primary:hover:not(:disabled){filter:brightness(1.06)}@media(min-width:768px){.pos-till-devices__dialog{padding:var(--pos-space-xl)}.pos-till-devices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-till-devices__button{flex:0 1 auto;min-width:8rem}}@media(min-width:1024px){.pos-till-devices__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.pos-till-devices__button--primary{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTillDevices, isStandalone: true, selector: "pos-till-devices", inputs: { devices: { classPropertyName: "devices", publicName: "devices", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, changeLabel: { classPropertyName: "changeLabel", publicName: "changeLabel", isSignal: true, isRequired: false, transformFunction: null }, setupLabel: { classPropertyName: "setupLabel", publicName: "setupLabel", isSignal: true, isRequired: false, transformFunction: null }, connectorLabel: { classPropertyName: "connectorLabel", publicName: "connectorLabel", isSignal: true, isRequired: false, transformFunction: null }, printerCaption: { classPropertyName: "printerCaption", publicName: "printerCaption", isSignal: true, isRequired: false, transformFunction: null }, paymentCaption: { classPropertyName: "paymentCaption", publicName: "paymentCaption", isSignal: true, isRequired: false, transformFunction: null }, noPaymentLabel: { classPropertyName: "noPaymentLabel", publicName: "noPaymentLabel", isSignal: true, isRequired: false, transformFunction: null }, paymentFallbackLabel: { classPropertyName: "paymentFallbackLabel", publicName: "paymentFallbackLabel", isSignal: true, isRequired: false, transformFunction: null }, hardwareLabel: { classPropertyName: "hardwareLabel", publicName: "hardwareLabel", isSignal: true, isRequired: false, transformFunction: null }, softwareLabel: { classPropertyName: "softwareLabel", publicName: "softwareLabel", isSignal: true, isRequired: false, transformFunction: null }, virtualLabel: { classPropertyName: "virtualLabel", publicName: "virtualLabel", isSignal: true, isRequired: false, transformFunction: null }, offlineLabel: { classPropertyName: "offlineLabel", publicName: "offlineLabel", isSignal: true, isRequired: false, transformFunction: null }, nothingToInstallLabel: { classPropertyName: "nothingToInstallLabel", publicName: "nothingToInstallLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.pos-till-devices--dialog": "variant() === \"dialog\"", "class.pos-till-devices--summary": "variant() === \"summary\"", "class.pos-till-devices--link": "variant() === \"link\"" }, classAttribute: "pos-till-devices" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'summary') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__summary\"\r\n    [class.pos-till-devices__summary--attention]=\"!selectedCard()\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    <span class=\"pos-till-devices__eyebrow\">\r\n      {{ connectorLabel() }}\r\n      @if (selectedCard(); as card) {\r\n        <span> \u00B7 {{ card.kindText }}</span>\r\n      }\r\n    </span>\r\n    <span\r\n      class=\"pos-till-devices__summary-title\"\r\n      [class.pos-till-devices__summary-title--attention]=\"!selectedCard()\"\r\n    >\r\n      @if (selectedCard(); as card) {\r\n        {{ card.device.name }}\r\n      } @else {\r\n        {{ setupLabel() }}\r\n        <span aria-hidden=\"true\"> \u203A</span>\r\n      }\r\n    </span>\r\n    @if (selectedCard(); as card) {\r\n      @if (card.printer || card.payment) {\r\n        <span class=\"pos-till-devices__summary-meta\">\r\n          @if (card.printer) {\r\n            <span>{{ printerCaption() }}: {{ card.printer }}</span>\r\n          }\r\n          @if (card.printer && card.payment) {\r\n            <span aria-hidden=\"true\"> \u00B7 </span>\r\n          }\r\n          @if (card.payment) {\r\n            <span>{{ paymentCaption() }}: {{ card.payment }}</span>\r\n          }\r\n        </span>\r\n      }\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (variant() === 'link') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__link\"\r\n    [class.pos-till-devices__link--attention]=\"icon() === 'none' && !selectedCard()\"\r\n    [class.pos-till-devices__link--button]=\"icon() === 'plug'\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    @if (icon() === 'plug') {\r\n      <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 18v2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n        />\r\n      </svg>\r\n    }\r\n    {{ linkText() }}\r\n    @if (icon() === 'none') {\r\n      <span aria-hidden=\"true\"> \u203A</span>\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (showDialog()) {\r\n  <div class=\"pos-till-devices__overlay\" role=\"presentation\" (click)=\"dismiss()\">\r\n    <div\r\n      #dialog\r\n      class=\"pos-till-devices__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"titleId\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onDialogKeydown($event)\"\r\n    >\r\n      <header class=\"pos-till-devices__header\">\r\n        <h2 [id]=\"titleId\" class=\"pos-till-devices__title\">{{ title() }}</h2>\r\n        @if (description()) {\r\n          <p [id]=\"descriptionId\" class=\"pos-till-devices__description\">{{ description() }}</p>\r\n        }\r\n      </header>\r\n\r\n      @if (cards().length === 0) {\r\n        <p class=\"pos-till-devices__empty\">{{ emptyLabel() }}</p>\r\n      } @else {\r\n        <div class=\"pos-till-devices__grid\" role=\"radiogroup\" [attr.aria-label]=\"listLabel()\">\r\n          @for (card of cards(); track card.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-till-devices__card\"\r\n              [class.pos-till-devices__card--selected]=\"card.selected\"\r\n              [class.pos-till-devices__card--offline]=\"card.offline\"\r\n              role=\"radio\"\r\n              [attr.data-card-index]=\"card.index\"\r\n              [attr.aria-checked]=\"card.selected\"\r\n              [disabled]=\"disabled() || card.offline\"\r\n              (click)=\"pick(card)\"\r\n              (keydown.arrowRight)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowDown)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowLeft)=\"moveSelection(card.index, -1, $event)\"\r\n              (keydown.arrowUp)=\"moveSelection(card.index, -1, $event)\"\r\n            >\r\n              <span class=\"pos-till-devices__card-head\">\r\n                <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  @if (card.kind === 'virtual') {\r\n                    <path\r\n                      d=\"M13 2 4 14h7l-1 8 10-14h-7l0-6Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  } @else {\r\n                    <path\r\n                      d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M12 18v2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  }\r\n                </svg>\r\n                <span class=\"pos-till-devices__name\">{{ card.device.name }}</span>\r\n                <span\r\n                  class=\"pos-till-devices__badge\"\r\n                  [class.pos-till-devices__badge--virtual]=\"card.kind === 'virtual'\"\r\n                  [class.pos-till-devices__badge--software]=\"card.kind === 'software'\"\r\n                >\r\n                  {{ card.kindText }}\r\n                </span>\r\n              </span>\r\n\r\n              @if (card.printer) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path\r\n                      d=\"M7 8V4h10v4M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M7 14h10v6H7z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ printerCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.printer }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.payment) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <rect\r\n                      x=\"3\"\r\n                      y=\"6\"\r\n                      width=\"18\"\r\n                      height=\"12\"\r\n                      rx=\"2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                    />\r\n                    <path d=\"M3 10h18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ paymentCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.payment }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.detail) {\r\n                <span\r\n                  class=\"pos-till-devices__presence\"\r\n                  [class.pos-till-devices__presence--online]=\"card.presence === 'online'\"\r\n                  [class.pos-till-devices__presence--offline]=\"card.presence === 'offline'\"\r\n                >\r\n                  <span class=\"pos-till-devices__dot\" aria-hidden=\"true\"></span>\r\n                  <span>{{ card.detail }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"pos-till-devices__actions\">\r\n        <button type=\"button\" class=\"pos-till-devices__button\" (click)=\"dismiss()\">\r\n          {{ cancelLabel() }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-till-devices__button pos-till-devices__button--primary\"\r\n          [disabled]=\"!canConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabel() }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host(.pos-till-devices--link){display:flex;justify-content:center}*{box-sizing:border-box}.pos-till-devices__summary,.pos-till-devices__link,.pos-till-devices__card,.pos-till-devices__button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-till-devices__summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-xs);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);text-align:left}.pos-till-devices__summary--attention{border-style:dashed;border-color:var(--pos-color-danger)}.pos-till-devices__eyebrow{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-brand);text-transform:uppercase}.pos-till-devices__summary-title{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold);line-height:1.25}.pos-till-devices__summary-title--attention{color:var(--pos-color-danger)}.pos-till-devices__summary-meta{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-md);border:0;background:transparent;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__link--attention{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-bold)}.pos-till-devices__link--button{width:100%;gap:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);box-shadow:var(--pos-shadow-key)}.pos-till-devices__link--button .pos-till-devices__icon{width:1.15rem;height:1.15rem;margin-top:0;color:var(--pos-color-text)}.pos-till-devices__summary:hover:not(:disabled),.pos-till-devices__link:hover:not(:disabled),.pos-till-devices__card:hover:not(:disabled){border-color:var(--pos-color-primary)}.pos-till-devices__link:hover:not(:disabled){text-decoration:underline}.pos-till-devices__link--button:hover:not(:disabled){text-decoration:none}.pos-till-devices__summary:focus-visible,.pos-till-devices__link:focus-visible,.pos-till-devices__card:focus-visible,.pos-till-devices__button:focus-visible{outline:3px solid var(--pos-color-primary);outline-offset:2px}.pos-till-devices__summary:disabled,.pos-till-devices__link:disabled,.pos-till-devices__card:disabled,.pos-till-devices__button:disabled{cursor:not-allowed;opacity:.45}.pos-till-devices__overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:var(--pos-space-lg);overflow:auto;background:color-mix(in srgb,var(--pos-color-ink) 45%,transparent)}.pos-till-devices__dialog{display:flex;flex-direction:column;gap:var(--pos-space-lg);width:min(64rem,100%);max-height:calc(100vh - var(--pos-space-lg) * 2);margin-block:auto;padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-till-devices__header{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-till-devices__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-till-devices__description,.pos-till-devices__empty{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__empty{padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface-muted)}.pos-till-devices__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pos-space-md);min-height:0;margin:0;padding:0;overflow:auto}.pos-till-devices__card{display:flex;flex-direction:column;align-items:stretch;gap:var(--pos-space-sm);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);box-shadow:var(--pos-shadow-key);text-align:left}.pos-till-devices__card--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos-color-primary) 55%,transparent)}.pos-till-devices__card-head{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0}.pos-till-devices__icon{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.1rem;color:var(--pos-color-text-muted)}.pos-till-devices__name{flex:1 1 auto;min-width:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);line-height:1.3;overflow-wrap:anywhere}.pos-till-devices__badge{flex:0 0 auto;padding:var(--pos-space-xs) var(--pos-space-sm);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface-muted);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1.2}.pos-till-devices__badge--virtual{background:color-mix(in srgb,var(--pos-color-primary) 45%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__badge--software{background:color-mix(in srgb,var(--pos-color-warning) 40%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__row,.pos-till-devices__presence{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0;font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__row-label{color:var(--pos-color-text-muted)}.pos-till-devices__row-value{font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere}.pos-till-devices__presence{align-items:center;color:var(--pos-color-text-muted)}.pos-till-devices__presence--online{color:color-mix(in srgb,var(--pos-color-success) 28%,var(--pos-color-text))}.pos-till-devices__presence--offline{color:var(--pos-color-danger)}.pos-till-devices__dot{flex:0 0 auto;width:var(--pos-space-sm);height:var(--pos-space-sm);margin-top:.15rem;border-radius:var(--pos-radius-pill);background:currentColor}.pos-till-devices__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--pos-space-sm)}.pos-till-devices__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__button--primary{border-color:var(--pos-color-primary);background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-till-devices__button--primary:hover:not(:disabled){filter:brightness(1.06)}@media(min-width:768px){.pos-till-devices__dialog{padding:var(--pos-space-xl)}.pos-till-devices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-till-devices__button{flex:0 1 auto;min-width:8rem}}@media(min-width:1024px){.pos-till-devices__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.pos-till-devices__button--primary{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTillDevices, decorators: [{
             type: Component,
@@ -393,7 +395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[class.pos-till-devices--dialog]': 'variant() === "dialog"',
                         '[class.pos-till-devices--summary]': 'variant() === "summary"',
                         '[class.pos-till-devices--link]': 'variant() === "link"',
-                    }, template: "@if (variant() === 'summary') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__summary\"\r\n    [class.pos-till-devices__summary--attention]=\"!selectedCard()\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    <span class=\"pos-till-devices__eyebrow\">\r\n      {{ connectorLabel() }}\r\n      @if (selectedCard(); as card) {\r\n        <span> \u00B7 {{ card.kindText }}</span>\r\n      }\r\n    </span>\r\n    <span\r\n      class=\"pos-till-devices__summary-title\"\r\n      [class.pos-till-devices__summary-title--attention]=\"!selectedCard()\"\r\n    >\r\n      @if (selectedCard(); as card) {\r\n        {{ card.device.name }}\r\n      } @else {\r\n        {{ setupLabel() }}\r\n        <span aria-hidden=\"true\"> \u203A</span>\r\n      }\r\n    </span>\r\n    @if (selectedCard(); as card) {\r\n      @if (card.printer || card.payment) {\r\n        <span class=\"pos-till-devices__summary-meta\">\r\n          @if (card.printer) {\r\n            <span>{{ printerCaption() }}: {{ card.printer }}</span>\r\n          }\r\n          @if (card.printer && card.payment) {\r\n            <span aria-hidden=\"true\"> \u00B7 </span>\r\n          }\r\n          @if (card.payment) {\r\n            <span>{{ paymentCaption() }}: {{ card.payment }}</span>\r\n          }\r\n        </span>\r\n      }\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (variant() === 'link') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__link\"\r\n    [class.pos-till-devices__link--attention]=\"icon() === 'none' && !selectedCard()\"\r\n    [class.pos-till-devices__link--button]=\"icon() === 'plug'\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    @if (icon() === 'plug') {\r\n      <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 18v2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n        />\r\n      </svg>\r\n    }\r\n    {{ linkText() }}\r\n    @if (icon() === 'none') {\r\n      <span aria-hidden=\"true\"> \u203A</span>\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (showDialog()) {\r\n  <div class=\"pos-till-devices__overlay\" (click)=\"dismiss()\">\r\n    <div\r\n      #dialog\r\n      class=\"pos-till-devices__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"titleId\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onDialogKeydown($event)\"\r\n    >\r\n      <header class=\"pos-till-devices__header\">\r\n        <h2 [id]=\"titleId\" class=\"pos-till-devices__title\">{{ title() }}</h2>\r\n        @if (description()) {\r\n          <p [id]=\"descriptionId\" class=\"pos-till-devices__description\">{{ description() }}</p>\r\n        }\r\n      </header>\r\n\r\n      @if (cards().length === 0) {\r\n        <p class=\"pos-till-devices__empty\">{{ emptyLabel() }}</p>\r\n      } @else {\r\n        <div class=\"pos-till-devices__grid\" role=\"radiogroup\" [attr.aria-label]=\"listLabel()\">\r\n          @for (card of cards(); track card.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-till-devices__card\"\r\n              [class.pos-till-devices__card--selected]=\"card.selected\"\r\n              [class.pos-till-devices__card--offline]=\"card.offline\"\r\n              role=\"radio\"\r\n              [attr.data-card-index]=\"card.index\"\r\n              [attr.aria-checked]=\"card.selected\"\r\n              [disabled]=\"disabled() || card.offline\"\r\n              (click)=\"pick(card)\"\r\n              (keydown.arrowRight)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowDown)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowLeft)=\"moveSelection(card.index, -1, $event)\"\r\n              (keydown.arrowUp)=\"moveSelection(card.index, -1, $event)\"\r\n            >\r\n              <span class=\"pos-till-devices__card-head\">\r\n                <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  @if (card.kind === 'virtual') {\r\n                    <path\r\n                      d=\"M13 2 4 14h7l-1 8 10-14h-7l0-6Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  } @else {\r\n                    <path\r\n                      d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M12 18v2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  }\r\n                </svg>\r\n                <span class=\"pos-till-devices__name\">{{ card.device.name }}</span>\r\n                <span\r\n                  class=\"pos-till-devices__badge\"\r\n                  [class.pos-till-devices__badge--virtual]=\"card.kind === 'virtual'\"\r\n                  [class.pos-till-devices__badge--software]=\"card.kind === 'software'\"\r\n                >\r\n                  {{ card.kindText }}\r\n                </span>\r\n              </span>\r\n\r\n              @if (card.printer) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path\r\n                      d=\"M7 8V4h10v4M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M7 14h10v6H7z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ printerCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.printer }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.payment) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <rect\r\n                      x=\"3\"\r\n                      y=\"6\"\r\n                      width=\"18\"\r\n                      height=\"12\"\r\n                      rx=\"2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                    />\r\n                    <path d=\"M3 10h18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ paymentCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.payment }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.detail) {\r\n                <span\r\n                  class=\"pos-till-devices__presence\"\r\n                  [class.pos-till-devices__presence--online]=\"card.presence === 'online'\"\r\n                  [class.pos-till-devices__presence--offline]=\"card.presence === 'offline'\"\r\n                >\r\n                  <span class=\"pos-till-devices__dot\" aria-hidden=\"true\"></span>\r\n                  <span>{{ card.detail }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"pos-till-devices__actions\">\r\n        <button type=\"button\" class=\"pos-till-devices__button\" (click)=\"dismiss()\">\r\n          {{ cancelLabel() }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-till-devices__button pos-till-devices__button--primary\"\r\n          [disabled]=\"!canConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabel() }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host(.pos-till-devices--link){display:flex;justify-content:center}*{box-sizing:border-box}.pos-till-devices__summary,.pos-till-devices__link,.pos-till-devices__card,.pos-till-devices__button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-till-devices__summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-xs);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);text-align:left}.pos-till-devices__summary--attention{border-style:dashed;border-color:var(--pos-color-danger)}.pos-till-devices__eyebrow{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-brand);text-transform:uppercase}.pos-till-devices__summary-title{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold);line-height:1.25}.pos-till-devices__summary-title--attention{color:var(--pos-color-danger)}.pos-till-devices__summary-meta{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-md);border:0;background:transparent;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__link--attention{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-bold)}.pos-till-devices__link--button{width:100%;gap:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);box-shadow:var(--pos-shadow-key)}.pos-till-devices__link--button .pos-till-devices__icon{width:1.15rem;height:1.15rem;margin-top:0;color:var(--pos-color-text)}.pos-till-devices__summary:hover:not(:disabled),.pos-till-devices__link:hover:not(:disabled),.pos-till-devices__card:hover:not(:disabled){border-color:var(--pos-color-primary)}.pos-till-devices__link:hover:not(:disabled){text-decoration:underline}.pos-till-devices__link--button:hover:not(:disabled){text-decoration:none}.pos-till-devices__summary:focus-visible,.pos-till-devices__link:focus-visible,.pos-till-devices__card:focus-visible,.pos-till-devices__button:focus-visible{outline:3px solid var(--pos-color-primary);outline-offset:2px}.pos-till-devices__summary:disabled,.pos-till-devices__link:disabled,.pos-till-devices__card:disabled,.pos-till-devices__button:disabled{cursor:not-allowed;opacity:.45}.pos-till-devices__overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:var(--pos-space-lg);overflow:auto;background:color-mix(in srgb,var(--pos-color-ink) 45%,transparent)}.pos-till-devices__dialog{display:flex;flex-direction:column;gap:var(--pos-space-lg);width:min(64rem,100%);max-height:calc(100vh - var(--pos-space-lg) * 2);margin-block:auto;padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-till-devices__header{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-till-devices__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-till-devices__description,.pos-till-devices__empty{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__empty{padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface-muted)}.pos-till-devices__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pos-space-md);min-height:0;margin:0;padding:0;overflow:auto}.pos-till-devices__card{display:flex;flex-direction:column;align-items:stretch;gap:var(--pos-space-sm);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);box-shadow:var(--pos-shadow-key);text-align:left}.pos-till-devices__card--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos-color-primary) 55%,transparent)}.pos-till-devices__card-head{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0}.pos-till-devices__icon{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.1rem;color:var(--pos-color-text-muted)}.pos-till-devices__name{flex:1 1 auto;min-width:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);line-height:1.3;overflow-wrap:anywhere}.pos-till-devices__badge{flex:0 0 auto;padding:var(--pos-space-xs) var(--pos-space-sm);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface-muted);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1.2}.pos-till-devices__badge--virtual{background:color-mix(in srgb,var(--pos-color-primary) 45%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__badge--software{background:color-mix(in srgb,var(--pos-color-warning) 40%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__row,.pos-till-devices__presence{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0;font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__row-label{color:var(--pos-color-text-muted)}.pos-till-devices__row-value{font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere}.pos-till-devices__presence{align-items:center;color:var(--pos-color-text-muted)}.pos-till-devices__presence--online{color:color-mix(in srgb,var(--pos-color-success) 28%,var(--pos-color-text))}.pos-till-devices__presence--offline{color:var(--pos-color-danger)}.pos-till-devices__dot{flex:0 0 auto;width:var(--pos-space-sm);height:var(--pos-space-sm);margin-top:.15rem;border-radius:var(--pos-radius-pill);background:currentColor}.pos-till-devices__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--pos-space-sm)}.pos-till-devices__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__button--primary{border-color:var(--pos-color-primary);background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-till-devices__button--primary:hover:not(:disabled){filter:brightness(1.06)}@media(min-width:768px){.pos-till-devices__dialog{padding:var(--pos-space-xl)}.pos-till-devices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-till-devices__button{flex:0 1 auto;min-width:8rem}}@media(min-width:1024px){.pos-till-devices__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.pos-till-devices__button--primary{transition:none}}\n"] }]
+                    }, template: "@if (variant() === 'summary') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__summary\"\r\n    [class.pos-till-devices__summary--attention]=\"!selectedCard()\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    <span class=\"pos-till-devices__eyebrow\">\r\n      {{ connectorLabel() }}\r\n      @if (selectedCard(); as card) {\r\n        <span> \u00B7 {{ card.kindText }}</span>\r\n      }\r\n    </span>\r\n    <span\r\n      class=\"pos-till-devices__summary-title\"\r\n      [class.pos-till-devices__summary-title--attention]=\"!selectedCard()\"\r\n    >\r\n      @if (selectedCard(); as card) {\r\n        {{ card.device.name }}\r\n      } @else {\r\n        {{ setupLabel() }}\r\n        <span aria-hidden=\"true\"> \u203A</span>\r\n      }\r\n    </span>\r\n    @if (selectedCard(); as card) {\r\n      @if (card.printer || card.payment) {\r\n        <span class=\"pos-till-devices__summary-meta\">\r\n          @if (card.printer) {\r\n            <span>{{ printerCaption() }}: {{ card.printer }}</span>\r\n          }\r\n          @if (card.printer && card.payment) {\r\n            <span aria-hidden=\"true\"> \u00B7 </span>\r\n          }\r\n          @if (card.payment) {\r\n            <span>{{ paymentCaption() }}: {{ card.payment }}</span>\r\n          }\r\n        </span>\r\n      }\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (variant() === 'link') {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-till-devices__link\"\r\n    [class.pos-till-devices__link--attention]=\"icon() === 'none' && !selectedCard()\"\r\n    [class.pos-till-devices__link--button]=\"icon() === 'plug'\"\r\n    [disabled]=\"disabled()\"\r\n    aria-haspopup=\"dialog\"\r\n    (click)=\"openDialog()\"\r\n  >\r\n    @if (icon() === 'plug') {\r\n      <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 18v2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.7\"\r\n          stroke-linecap=\"round\"\r\n        />\r\n      </svg>\r\n    }\r\n    {{ linkText() }}\r\n    @if (icon() === 'none') {\r\n      <span aria-hidden=\"true\"> \u203A</span>\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (showDialog()) {\r\n  <div class=\"pos-till-devices__overlay\" role=\"presentation\" (click)=\"dismiss()\">\r\n    <div\r\n      #dialog\r\n      class=\"pos-till-devices__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"titleId\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onDialogKeydown($event)\"\r\n    >\r\n      <header class=\"pos-till-devices__header\">\r\n        <h2 [id]=\"titleId\" class=\"pos-till-devices__title\">{{ title() }}</h2>\r\n        @if (description()) {\r\n          <p [id]=\"descriptionId\" class=\"pos-till-devices__description\">{{ description() }}</p>\r\n        }\r\n      </header>\r\n\r\n      @if (cards().length === 0) {\r\n        <p class=\"pos-till-devices__empty\">{{ emptyLabel() }}</p>\r\n      } @else {\r\n        <div class=\"pos-till-devices__grid\" role=\"radiogroup\" [attr.aria-label]=\"listLabel()\">\r\n          @for (card of cards(); track card.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"pos-till-devices__card\"\r\n              [class.pos-till-devices__card--selected]=\"card.selected\"\r\n              [class.pos-till-devices__card--offline]=\"card.offline\"\r\n              role=\"radio\"\r\n              [attr.data-card-index]=\"card.index\"\r\n              [attr.aria-checked]=\"card.selected\"\r\n              [disabled]=\"disabled() || card.offline\"\r\n              (click)=\"pick(card)\"\r\n              (keydown.arrowRight)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowDown)=\"moveSelection(card.index, 1, $event)\"\r\n              (keydown.arrowLeft)=\"moveSelection(card.index, -1, $event)\"\r\n              (keydown.arrowUp)=\"moveSelection(card.index, -1, $event)\"\r\n            >\r\n              <span class=\"pos-till-devices__card-head\">\r\n                <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  @if (card.kind === 'virtual') {\r\n                    <path\r\n                      d=\"M13 2 4 14h7l-1 8 10-14h-7l0-6Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  } @else {\r\n                    <path\r\n                      d=\"M8 8V4M16 8V4M7 8h10v5a5 5 0 0 1-10 0V8Z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M12 18v2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  }\r\n                </svg>\r\n                <span class=\"pos-till-devices__name\">{{ card.device.name }}</span>\r\n                <span\r\n                  class=\"pos-till-devices__badge\"\r\n                  [class.pos-till-devices__badge--virtual]=\"card.kind === 'virtual'\"\r\n                  [class.pos-till-devices__badge--software]=\"card.kind === 'software'\"\r\n                >\r\n                  {{ card.kindText }}\r\n                </span>\r\n              </span>\r\n\r\n              @if (card.printer) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path\r\n                      d=\"M7 8V4h10v4M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M7 14h10v6H7z\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ printerCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.printer }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.payment) {\r\n                <span class=\"pos-till-devices__row\">\r\n                  <svg class=\"pos-till-devices__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <rect\r\n                      x=\"3\"\r\n                      y=\"6\"\r\n                      width=\"18\"\r\n                      height=\"12\"\r\n                      rx=\"2\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"1.7\"\r\n                    />\r\n                    <path d=\"M3 10h18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" />\r\n                  </svg>\r\n                  <span>\r\n                    <span class=\"pos-till-devices__row-label\">{{ paymentCaption() }}: </span>\r\n                    <span class=\"pos-till-devices__row-value\">{{ card.payment }}</span>\r\n                  </span>\r\n                </span>\r\n              }\r\n\r\n              @if (card.detail) {\r\n                <span\r\n                  class=\"pos-till-devices__presence\"\r\n                  [class.pos-till-devices__presence--online]=\"card.presence === 'online'\"\r\n                  [class.pos-till-devices__presence--offline]=\"card.presence === 'offline'\"\r\n                >\r\n                  <span class=\"pos-till-devices__dot\" aria-hidden=\"true\"></span>\r\n                  <span>{{ card.detail }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"pos-till-devices__actions\">\r\n        <button type=\"button\" class=\"pos-till-devices__button\" (click)=\"dismiss()\">\r\n          {{ cancelLabel() }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"pos-till-devices__button pos-till-devices__button--primary\"\r\n          [disabled]=\"!canConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabel() }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;box-sizing:border-box;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}:host(.pos-till-devices--link){display:flex;justify-content:center}*{box-sizing:border-box}.pos-till-devices__summary,.pos-till-devices__link,.pos-till-devices__card,.pos-till-devices__button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.pos-till-devices__summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--pos-space-xs);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-md);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);text-align:left}.pos-till-devices__summary--attention{border-style:dashed;border-color:var(--pos-color-danger)}.pos-till-devices__eyebrow{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);letter-spacing:var(--pos-letter-spacing-brand);text-transform:uppercase}.pos-till-devices__summary-title{font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold);line-height:1.25}.pos-till-devices__summary-title--attention{color:var(--pos-color-danger)}.pos-till-devices__summary-meta{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-md);border:0;background:transparent;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__link--attention{color:var(--pos-color-danger);font-weight:var(--pos-font-weight-bold)}.pos-till-devices__link--button{width:100%;gap:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);box-shadow:var(--pos-shadow-key)}.pos-till-devices__link--button .pos-till-devices__icon{width:1.15rem;height:1.15rem;margin-top:0;color:var(--pos-color-text)}.pos-till-devices__summary:hover:not(:disabled),.pos-till-devices__link:hover:not(:disabled),.pos-till-devices__card:hover:not(:disabled){border-color:var(--pos-color-primary)}.pos-till-devices__link:hover:not(:disabled){text-decoration:underline}.pos-till-devices__link--button:hover:not(:disabled){text-decoration:none}.pos-till-devices__summary:focus-visible,.pos-till-devices__link:focus-visible,.pos-till-devices__card:focus-visible,.pos-till-devices__button:focus-visible{outline:3px solid var(--pos-color-primary);outline-offset:2px}.pos-till-devices__summary:disabled,.pos-till-devices__link:disabled,.pos-till-devices__card:disabled,.pos-till-devices__button:disabled{cursor:not-allowed;opacity:.45}.pos-till-devices__overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:var(--pos-space-lg);overflow:auto;background:color-mix(in srgb,var(--pos-color-ink) 45%,transparent)}.pos-till-devices__dialog{display:flex;flex-direction:column;gap:var(--pos-space-lg);width:min(64rem,100%);max-height:calc(100vh - var(--pos-space-lg) * 2);margin-block:auto;padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-till-devices__header{display:flex;flex-direction:column;gap:var(--pos-space-xs)}.pos-till-devices__title{margin:0;font-family:var(--pos-font-family-display);font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-till-devices__description,.pos-till-devices__empty{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__empty{padding:var(--pos-space-lg);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface-muted)}.pos-till-devices__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pos-space-md);min-height:0;margin:0;padding:0;overflow:auto}.pos-till-devices__card{display:flex;flex-direction:column;align-items:stretch;gap:var(--pos-space-sm);width:100%;min-height:var(--pos-button-min-height);padding:var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);color:var(--pos-color-text);box-shadow:var(--pos-shadow-key);text-align:left}.pos-till-devices__card--selected{border-color:var(--pos-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos-color-primary) 55%,transparent)}.pos-till-devices__card-head{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0}.pos-till-devices__icon{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.1rem;color:var(--pos-color-text-muted)}.pos-till-devices__name{flex:1 1 auto;min-width:0;font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);line-height:1.3;overflow-wrap:anywhere}.pos-till-devices__badge{flex:0 0 auto;padding:var(--pos-space-xs) var(--pos-space-sm);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface-muted);color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);font-weight:var(--pos-font-weight-semibold);line-height:1.2}.pos-till-devices__badge--virtual{background:color-mix(in srgb,var(--pos-color-primary) 45%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__badge--software{background:color-mix(in srgb,var(--pos-color-warning) 40%,var(--pos-color-surface));color:var(--pos-color-text)}.pos-till-devices__row,.pos-till-devices__presence{display:flex;align-items:flex-start;gap:var(--pos-space-sm);min-width:0;font-size:var(--pos-font-size-sm);line-height:1.4}.pos-till-devices__row-label{color:var(--pos-color-text-muted)}.pos-till-devices__row-value{font-weight:var(--pos-font-weight-semibold);overflow-wrap:anywhere}.pos-till-devices__presence{align-items:center;color:var(--pos-color-text-muted)}.pos-till-devices__presence--online{color:color-mix(in srgb,var(--pos-color-success) 28%,var(--pos-color-text))}.pos-till-devices__presence--offline{color:var(--pos-color-danger)}.pos-till-devices__dot{flex:0 0 auto;width:var(--pos-space-sm);height:var(--pos-space-sm);margin-top:.15rem;border-radius:var(--pos-radius-pill);background:currentColor}.pos-till-devices__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--pos-space-sm)}.pos-till-devices__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);padding:var(--pos-space-sm) var(--pos-space-lg);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold)}.pos-till-devices__button--primary{border-color:var(--pos-color-primary);background:var(--pos-color-primary);color:var(--pos-color-on-primary)}.pos-till-devices__button--primary:hover:not(:disabled){filter:brightness(1.06)}@media(min-width:768px){.pos-till-devices__dialog{padding:var(--pos-space-xl)}.pos-till-devices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-till-devices__button{flex:0 1 auto;min-width:8rem}}@media(min-width:1024px){.pos-till-devices__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.pos-till-devices__button--primary{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { devices: [{ type: i0.Input, args: [{ isSignal: true, alias: "devices", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], changeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeLabel", required: false }] }], setupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "setupLabel", required: false }] }], connectorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorLabel", required: false }] }], printerCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "printerCaption", required: false }] }], paymentCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentCaption", required: false }] }], noPaymentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaymentLabel", required: false }] }], paymentFallbackLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentFallbackLabel", required: false }] }], hardwareLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hardwareLabel", required: false }] }], softwareLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "softwareLabel", required: false }] }], virtualLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualLabel", required: false }] }], offlineLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offlineLabel", required: false }] }], nothingToInstallLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nothingToInstallLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], dialogRef: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
 
 const EMPTY_TOTALS$1 = {
@@ -589,14 +591,14 @@ class PosTransactionActionBar {
         this.action.emit({ type: 'actionBar.tenderCard' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosTransactionActionBar, isStandalone: true, selector: "pos-transaction-action-bar", inputs: { availableActions: { classPropertyName: "availableActions", publicName: "availableActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cashHotkey: { classPropertyName: "cashHotkey", publicName: "cashHotkey", 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: "cashButton", first: true, predicate: ["cashButton"], descendants: true, isSignal: true }, { propertyName: "cardButton", first: true, predicate: ["cardButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    #cashButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cashHotkey() || null\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n    @if (cashHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cashHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n  <button\r\n    #cardButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\r\n    (click)=\"onCard()\"\r\n  >\r\n    Card\r\n    @if (cardHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.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 });
+    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 }, cashHotkey: { classPropertyName: "cashHotkey", publicName: "cashHotkey", 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: "cashButton", first: true, predicate: ["cashButton"], descendants: true, isSignal: true }, { propertyName: "cardButton", first: true, predicate: ["cardButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    #cashButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cashHotkey() || null\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n    @if (cashHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cashHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n  <button\r\n    #cardButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\r\n    (click)=\"onCard()\"\r\n  >\r\n    Card\r\n    @if (cardHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.pos-transaction-action-bar__button--card{background:var(--pos-color-success);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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosTransactionActionBar, decorators: [{
             type: Component,
             args: [{ selector: 'pos-transaction-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'pos-transaction-action-bar',
                         '(document:keydown)': 'onDocumentKeydown($event)',
-                    }, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    #cashButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cashHotkey() || null\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n    @if (cashHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cashHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n  <button\r\n    #cardButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\r\n    (click)=\"onCard()\"\r\n  >\r\n    Card\r\n    @if (cardHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.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"] }]
+                    }, template: "@if (availableActions().includes('clearBasket')) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cancel\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onClear()\"\r\n  >\r\n    Cancel\r\n  </button>\r\n}\r\n@if (availableActions().includes('tender')) {\r\n  <button\r\n    #cashButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--cash\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cashHotkey() || null\"\r\n    (click)=\"onCash()\"\r\n  >\r\n    Cash\r\n    @if (cashHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cashHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n  <button\r\n    #cardButton\r\n    type=\"button\"\r\n    class=\"pos-transaction-action-bar__button pos-transaction-action-bar__button--card\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-keyshortcuts]=\"cardHotkey() || null\"\r\n    (click)=\"onCard()\"\r\n  >\r\n    Card\r\n    @if (cardHotkey()) {\r\n      <kbd class=\"pos-transaction-action-bar__hotkey\" aria-hidden=\"true\">{{ cardHotkey() }}</kbd>\r\n    }\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--pos-space-sm);width:100%;box-sizing:border-box;padding-top:var(--pos-space-md);border-top:1px solid var(--pos-color-border)}.pos-transaction-action-bar__button{flex:1 1 8rem;min-height:var(--pos-button-min-height);border:1px solid transparent;border-radius:var(--pos-radius-md);font:inherit;font-size:var(--pos-font-size-md);font-weight:var(--pos-font-weight-semibold);cursor:pointer}.pos-transaction-action-bar__button--cancel{background:var(--pos-color-danger);color:var(--pos-color-on-danger)}.pos-transaction-action-bar__button--cash,.pos-transaction-action-bar__button--card{background:var(--pos-color-success);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"] }]
         }], propDecorators: { availableActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cashHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cashHotkey", required: false }] }], cardHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHotkey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], cashButton: [{ type: i0.ViewChild, args: ['cashButton', { isSignal: true }] }], cardButton: [{ type: i0.ViewChild, args: ['cardButton', { isSignal: true }] }] } });
 
 class PosItemEntry {