@brandsync/wc 1.10.0 → 1.11.0

package/dist/collection/components/bs-qr-code/bs-qr-code.js

@@ -0,0 +1,767 @@
+import { h } from "@stencil/core";
+/**
+ * A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
+ * zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
+ * Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
+ * "with logo" variant).
+ *
+ * **This component draws a code, it doesn't encode one.** Generate the real code in your product
+ * with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
+ * module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
+ *
+ * The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
+ * the contrast.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
+ *
+ * ## When to use
+ * - Sharing a link to an order, document or page that someone will open on a phone.
+ * - Taking a payment with an amount (`type="payment"`).
+ *
+ * ## When not to use
+ * - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
+ *
+ * ## States
+ * `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
+ * `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
+ * in every state but `default`, and hidden once `scanned`.
+ *
+ * @slot code - The code itself (`<img>`, `<svg>`, `<canvas>`), used instead of `matrix`.
+ * @slot logo - Optional logo centred over the code. Use a high error-correction level when you
+ *   generate the code so it still scans.
+ * @part container - The outer card.
+ * @part close - The close button (when `closable`).
+ * @part head - The heading + description.
+ * @part title - The heading.
+ * @part description - The description under the heading.
+ * @part qr - The bordered white box holding the code and any state overlay.
+ * @part code - The white square the code is drawn on.
+ * @part logo - The wrapper around the logo.
+ * @part overlay - The loading/error/expired/scanned panel covering the code.
+ * @part url - The URL chip (`type="default"`).
+ * @part amount - The amount block (`type="payment"`).
+ * @part expiry - The expiry chip.
+ * @part actions - The Download/Copy row.
+ * @part download - The Download button.
+ * @part copy - The Copy link button.
+ */
+export class BsQrCode {
+    /** `default` shows the URL under the code; `payment` shows the amount instead. */
+    type = 'default';
+    /** Card size: `sm`, `md` (default) or `lg`. */
+    size = 'md';
+    /** `default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`. */
+    state = 'default';
+    /** Heading text. */
+    heading = 'Share the order';
+    /** Line under the heading. */
+    description;
+    /** The link shown as text under the code (`type="default"`), and copied by Copy link. */
+    url;
+    /** The amount shown under the code (`type="payment"`), e.g. `"148,00 kr"`. */
+    amount;
+    /** Small label above the amount. */
+    amountLabel = 'Total';
+    /** Text of the expiry chip, e.g. `"Expires in 04:59"`. No chip when empty. */
+    expiry;
+    /** The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an
+     * HTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is
+     * used. */
+    matrix;
+    /** Accessible name for the code image, e.g. `"QR code for order SO-10482"`. Applies to `matrix`;
+     * give a slotted `<img>` its own `alt`. */
+    codeLabel = 'QR code';
+    /** Shows a close button in the corner. */
+    closable = false;
+    /** Hides the Download and Copy link row. */
+    hideActions = false;
+    /** Hides the Download button. */
+    hideDownload = false;
+    /** Hides the Copy link button. */
+    hideCopy = false;
+    /** Label of the Download button. */
+    downloadLabel = 'Download PNG';
+    /** Label of the Copy link button. */
+    copyLabel = 'Copy link';
+    /** Label of the Retry button (`error`). */
+    retryLabel = 'Retry';
+    /** Label of the Refresh button (`expired`). */
+    refreshLabel = 'Refresh';
+    /** Text in the `loading` overlay. */
+    loadingLabel = 'Generating code';
+    /** Text in the `error` overlay. */
+    errorLabel = "Couldn't load code";
+    /** Text in the `expired` overlay. */
+    expiredLabel = 'Code expired';
+    /** Text in the `scanned` overlay. Defaults to "Payment received" for `type="payment"` and
+     * "Scanned" otherwise. */
+    scannedLabel;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Fires when Download is pressed. The component doesn't render a file; produce it from the code
+     * you generated. */
+    bsDownload;
+    /** Fires when Copy link is pressed, after the component tries to put `url` on the clipboard.
+     * `{ url }` is the `url` prop. */
+    bsCopy;
+    /** Fires when Retry is pressed (`error` state). Set `state` back to `loading` yourself. */
+    bsRetry;
+    /** Fires when Refresh is pressed (`expired` state). Set `state` back to `loading` yourself. */
+    bsRefresh;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    /** True while something is assigned to the `logo` slot, so the white plate behind it only shows then. */
+    hasLogo = false;
+    onCopy = async () => {
+        if (this.url) {
+            try {
+                await navigator.clipboard?.writeText(this.url);
+            }
+            catch {
+                // Clipboard can be blocked (insecure context, permissions); the event still fires so the
+                // consumer can fall back.
+            }
+        }
+        this.bsCopy.emit({ url: this.url });
+    };
+    renderMatrix() {
+        const m = this.matrix;
+        if (!m || !m.length)
+            return null;
+        const n = m.length;
+        // One path, one horizontal run per row of consecutive dark modules.
+        let d = '';
+        for (let y = 0; y < n; y++) {
+            let x = 0;
+            while (x < n) {
+                if (!m[y][x]) {
+                    x++;
+                    continue;
+                }
+                const start = x;
+                while (x < n && m[y][x])
+                    x++;
+                d += `M${start} ${y}h${x - start}v1h-${x - start}z`;
+            }
+        }
+        return (h("svg", { class: "bs-qr-code__matrix", viewBox: `0 0 ${n} ${n}`, "shape-rendering": "crispEdges", role: "img", "aria-label": this.codeLabel }, h("path", { d: d, fill: "currentColor" })));
+    }
+    renderOverlay() {
+        const { state } = this;
+        if (state === 'default')
+            return null;
+        if (state === 'loading') {
+            return (h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--loading", role: "status" }, h("bs-progress", { type: "indeterminate", size: "medium", ariaLabel: this.loadingLabel }), h("p", { class: "bs-qr-code__overlay-caption" }, this.loadingLabel)));
+        }
+        if (state === 'error') {
+            return (h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--error", role: "alert" }, h("svg", { class: "bs-qr-code__status-icon bs-qr-code__status-icon--error", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5V12.5" }), h("path", { d: "M12 16.2V16.3" })), h("p", { class: "bs-qr-code__overlay-text" }, this.errorLabel), h("bs-button", { variant: "outlined", onClick: () => this.bsRetry.emit() }, h(RefreshIcon, { slot: "icon" }), this.retryLabel)));
+        }
+        if (state === 'expired') {
+            return (h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--expired", role: "status" }, h("svg", { class: "bs-qr-code__status-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7V12L15 14" })), h("p", { class: "bs-qr-code__overlay-text" }, this.expiredLabel), h("bs-button", { variant: "primary", onClick: () => this.bsRefresh.emit() }, h(RefreshIcon, { slot: "icon" }), this.refreshLabel)));
+        }
+        return (h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--scanned", role: "status" }, h("svg", { class: "bs-qr-code__status-icon bs-qr-code__status-icon--scanned", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })), h("p", { class: "bs-qr-code__overlay-text bs-qr-code__overlay-text--strong" }, this.scannedLabel ?? (this.type === 'payment' ? 'Payment received' : 'Scanned'))));
+    }
+    render() {
+        const { state } = this;
+        const interactive = state === 'default';
+        const showActions = !this.hideActions && state !== 'scanned';
+        const buttonSize = this.size === 'sm' ? 'sm' : 'md';
+        // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
+        // which is what bs-button's disabled primary looks like.
+        return (h("bs-card", { key: '9224eadd42ddc8b59466a301ce72bf0311e00edd', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: '1fd99ef2996a876ea8fe5ae237128c8059bfccbf', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'e38bde58cd6532c3ca56b2920a42dfc157517484', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '6d6c93934c724a1cc0b8b66bdfd129650b1f9024', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: 'b8f2478eeb88a2d273f61f819679cb752e894a5a', class: "bs-qr-code__body" }, h("div", { key: '7e51f3bd0cde05566bb33c4fbe2478795ff3fe26', part: "head", class: "bs-qr-code__head" }, h("p", { key: '1d0956f6fc3e0f0658b5934a140e56ef25ae1f6b', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'f43da3546accd752a856e1202baaff0043142ce4', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '3b8dcdbb35c20e71f9c9e41ad4e2ae939e8dc0e7', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '3c86af5e70b746b2dc8ce9c7adf58649314a985d', part: "code", class: "bs-qr-code__code" }, h("slot", { key: '32d0dc8670a6045220b9546731ae5aef48d355df', name: "code" }, this.renderMatrix()), h("div", { key: 'ffba953b953bef8a8765955a5db4b9fba1e2cec8', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'b6e213f3a624cf8a6cf0b344c6ffc7b1f2c1be34', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '56155722b1cf13d21850bae43e4323ddc0ed8635', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: 'd1f90a299ef1f8d5c896a31147612ceef4485339', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '40ef657d7bc01e58089bf55044fb0ef8556386ba', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '5d7a7d2537752948631098567c732582e9e34d92', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: 'e040513edd4c24d60e41c4e09ed0b97be11e24b3', part: "expiry", size: "md" }, h(TimerIcon, { key: '0c1b8052bed0bddd2e84bc3ca9929008f781213c', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'f30073c9b79df1aec27f361d5b94e92c8aa8f7fc', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '12b6b333efed74dfb76360441838de2a872f3c4b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '3c831e241288ccce97fb77a3d42c0c3de58e6734', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '260deebae80a52c700dc2532883a706363da0caa', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '8a09b1b4a06d492449f563aa73c2b2191fb29680', slot: "icon" }), this.copyLabel)))))));
+    }
+    static get is() { return "bs-qr-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-qr-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-qr-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsQrCodeType",
+                    "resolved": "\"default\" | \"payment\"",
+                    "references": {
+                        "BsQrCodeType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-qr-code/bs-qr-code.tsx",
+                            "id": "src/components/bs-qr-code/bs-qr-code.tsx::BsQrCodeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`default` shows the URL under the code; `payment` shows the amount instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsQrCodeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsQrCodeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-qr-code/bs-qr-code.tsx",
+                            "id": "src/components/bs-qr-code/bs-qr-code.tsx::BsQrCodeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card size: `sm`, `md` (default) or `lg`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsQrCodeState",
+                    "resolved": "\"default\" | \"error\" | \"expired\" | \"loading\" | \"scanned\"",
+                    "references": {
+                        "BsQrCodeState": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-qr-code/bs-qr-code.tsx",
+                            "id": "src/components/bs-qr-code/bs-qr-code.tsx::BsQrCodeState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Share the order'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Line under the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The link shown as text under the code (`type=\"default\"`), and copied by Copy link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url"
+            },
+            "amount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount shown under the code (`type=\"payment\"`), e.g. `\"148,00 kr\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "amount"
+            },
+            "amountLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Small label above the amount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "amount-label",
+                "defaultValue": "'Total'"
+            },
+            "expiry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the expiry chip, e.g. `\"Expires in 04:59\"`. No chip when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expiry"
+            },
+            "matrix": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean[][]",
+                    "resolved": "boolean[][]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an\nHTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is\nused."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "codeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the code image, e.g. `\"QR code for order SO-10482\"`. Applies to `matrix`;\ngive a slotted `<img>` its own `alt`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code-label",
+                "defaultValue": "'QR code'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a close button in the corner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "hideActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the Download and Copy link row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-actions",
+                "defaultValue": "false"
+            },
+            "hideDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the Download button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-download",
+                "defaultValue": "false"
+            },
+            "hideCopy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the Copy link button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-copy",
+                "defaultValue": "false"
+            },
+            "downloadLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Download button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "download-label",
+                "defaultValue": "'Download PNG'"
+            },
+            "copyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Copy link button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-label",
+                "defaultValue": "'Copy link'"
+            },
+            "retryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Retry button (`error`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retry-label",
+                "defaultValue": "'Retry'"
+            },
+            "refreshLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Refresh button (`expired`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "refresh-label",
+                "defaultValue": "'Refresh'"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the `loading` overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-label",
+                "defaultValue": "'Generating code'"
+            },
+            "errorLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the `error` overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-label",
+                "defaultValue": "\"Couldn't load code\""
+            },
+            "expiredLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the `expired` overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expired-label",
+                "defaultValue": "'Code expired'"
+            },
+            "scannedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the `scanned` overlay. Defaults to \"Payment received\" for `type=\"payment\"` and\n\"Scanned\" otherwise."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scanned-label"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLogo": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsDownload",
+                "name": "bsDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Download is pressed. The component doesn't render a file; produce it from the code\nyou generated."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCopy",
+                "name": "bsCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Copy link is pressed, after the component tries to put `url` on the clipboard.\n`{ url }` is the `url` prop."
+                },
+                "complexType": {
+                    "original": "{ url?: string }",
+                    "resolved": "{ url?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRetry",
+                "name": "bsRetry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Retry is pressed (`error` state). Set `state` back to `loading` yourself."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRefresh",
+                "name": "bsRefresh",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Refresh is pressed (`expired` state). Set `state` back to `loading` yourself."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const iconProps = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true' };
+const DownloadIcon = (props) => (h("svg", { ...iconProps, ...props }, h("path", { d: "M12 4V15" }), h("path", { d: "M7.5 11L12 15.5L16.5 11" }), h("path", { d: "M4.5 19.5H19.5" })));
+const CopyIcon = (props) => (h("svg", { ...iconProps, ...props }, h("rect", { x: "8", y: "8", width: "11.5", height: "11.5", rx: "1.5" }), h("path", { d: "M16 8V5.5A1.5 1.5 0 0 0 14.5 4H5.5A1.5 1.5 0 0 0 4 5.5V14.5A1.5 1.5 0 0 0 5.5 16H8" })));
+const RefreshIcon = (props) => (h("svg", { ...iconProps, ...props }, h("path", { d: "M19.5 12A7.5 7.5 0 1 1 17.3 6.7" }), h("path", { d: "M19.5 4.5V8.5H15.5" })));
+const TimerIcon = (props) => (h("svg", { ...iconProps, ...props }, h("circle", { cx: "12", cy: "13.5", r: "7" }), h("path", { d: "M12 10V13.5L14 15" }), h("path", { d: "M9.5 3.5H14.5" })));