@everymatrix/lottery-order-summary 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotteryOrderSummary = require('./lottery-order-summary-9c494983.js');
+require('./index-b1042ae5.js');
+
+
+
+exports.LotteryOrderSummary = lotteryOrderSummary.LotteryOrderSummary;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b1042ae5.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-button_2.cjs",[[1,"lottery-order-summary",{"endpoint":[513],"sessionId":[513,"session-id"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"orderSummaryTitle":[1,"order-summary-title"],"ticketsLabel":[1,"tickets-label"],"totalLabel":[1,"total-label"],"showColon":[4,"show-colon"],"showDivider":[4,"show-divider"],"submitDisabled":[4,"submit-disabled"],"submitButtonText":[1,"submit-button-text"],"submitLoading":[32]},[[8,"lotteryTicketParamsReady","handleLotteryTicketParamsReady"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/lottery-button_2.cjs.entry.js

@@ -0,0 +1,179 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b1042ae5.js');
+const lotteryOrderSummary = require('./lottery-order-summary-9c494983.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS = {
+    en: {
+        loading: 'Loading'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryButtonCss = ":host{display:inline-block}.btn{font:inherit;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--lottery-button-border-radius, 6px);font-weight:var(--lottery-button-font-weight, 500);cursor:pointer;outline:none;overflow:hidden;transition:var(--lottery-button-transition, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s);user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--lottery-button-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.5))}.btn .content{position:relative;display:inline-flex;align-items:center;gap:var(--lottery-button-content-gap, 0.5em)}.btn .content ::slotted(span){display:inline-flex;align-items:center}.btn:hover:not(:disabled){box-shadow:var(--lottery-button-hover-box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.5))}.btn:disabled{cursor:not-allowed;opacity:var(--lottery-button-disabled-opacity, 0.5)}.btn .loading-container{display:flex;align-items:center}.btn--loading{position:relative}.btn .spinner{display:inline-block;width:1em;height:1em;border:var(--lottery-button-spinner-border, 2px solid rgba(255, 255, 255, 0.3));border-radius:50%;border-top-color:var(--lottery-button-spinner-color, white);animation:spin 1s ease-in-out infinite;margin-left:0.5em;vertical-align:middle}.btn--small .spinner{width:0.8em;height:0.8em}.btn--large .spinner{width:1.2em;height:1.2em}@keyframes spin{to{transform:rotate(360deg)}}.btn--primary{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff)}.btn--primary:hover:not(:disabled){background-color:var(--emw--color-primary-variant, #1367e7)}.btn--primary:active:not(:disabled){background-color:var(--lottery-button-primary-active-bg, #08104a)}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:var(--lottery-button-spinner-inverse-border-color, rgba(0, 0, 0, 0.2))}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:var(--lottery-button-outline-border-color, #dcdcdc);color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:var(--lottery-button-outline-hover-border-color, #a6a6a6)}.btn--outline:active:not(:disabled){background-color:var(--lottery-button-outline-active-bg, #e6e6e6)}.btn--dashed{background-color:transparent;border-style:dashed;border-color:var(--lottery-button-dashed-border-color, #dcdcdc);color:var(--lottery-button-dashed-color, #333)}.btn--dashed:hover:not(:disabled){border-color:var(--lottery-button-dashed-hover-border-color, #a6a6a6);color:var(--lottery-button-dashed-hover-color, #0052d9)}.btn--text{background-color:transparent;color:var(--lottery-button-text-color, #0052d9);border-color:transparent}.btn--text:hover:not(:disabled){background-color:var(--lottery-button-text-hover-bg, #f2f2f2)}.btn--text:active:not(:disabled){background-color:var(--lottery-button-text-active-bg, #e6e6e6)}.btn--custom-color:hover:not(:disabled){opacity:var(--lottery-button-custom-hover-opacity, 0.9)}.btn--custom-color:active:not(:disabled){opacity:var(--lottery-button-custom-active-opacity, 0.8)}.btn--small{height:var(--lottery-button-small-height, 28px);font-size:var(--lottery-button-small-font-size, 12px);padding:var(--lottery-button-small-padding, 0 12px)}.btn--medium{height:var(--lottery-button-medium-height, 34px);font-size:var(--lottery-button-medium-font-size, 14px);padding:var(--lottery-button-medium-padding, 0 18px)}.btn--large{height:var(--lottery-button-large-height, 40px);font-size:var(--lottery-button-large-font-size, 16px);padding:var(--lottery-button-large-padding, 0 24px)}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit}.ripple{position:absolute;border-radius:50%;background-color:var(--lottery-button-ripple-light, rgba(255, 255, 255, 0.3));transform:scale(0);animation:ripple-animation 600ms linear}.btn--outline .ripple,.btn--dashed .ripple,.btn--text .ripple{background-color:var(--lottery-button-ripple-dark, rgba(0, 0, 0, 0.03))}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
+const LotteryButtonStyle0 = lotteryButtonCss;
+
+const LotteryButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleClick = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            // Get the button element from the shadow root
+            const button = this.host.shadowRoot.querySelector('.btn');
+            if (!button)
+                return;
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const top = event.clientY - rect.top - size / 2;
+            const left = event.clientX - rect.left - size / 2;
+            // Add the new ripple to the state, triggering a re-render
+            const newRipple = { top, left, size };
+            this.ripples = [...this.ripples, newRipple];
+            // Set a timeout to clean up the ripple from the state after the animation ends
+            // This prevents the DOM from filling up with old ripple elements
+            setTimeout(() => {
+                this.ripples = this.ripples.filter((r) => r !== newRipple);
+            }, 600); // This duration should match the CSS animation duration
+        };
+        this.variant = 'primary';
+        this.size = 'medium';
+        this.color = undefined;
+        this.disabled = false;
+        this.loading = false;
+        this.text = undefined;
+        this.mbSource = undefined;
+        this.language = 'en';
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.ripples = [];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOrderSummary.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOrderSummary.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOrderSummary.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOrderSummary.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryOrderSummary.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOrderSummary.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    render() {
+        const { variant, disabled, size, color } = this;
+        const isDisabled = disabled || this.loading;
+        // Calculate styles based on variant and color
+        const buttonStyles = {};
+        if (color) {
+            switch (variant) {
+                case 'primary':
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'outline':
+                case 'dashed':
+                    Object.assign(buttonStyles, {
+                        color: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'text':
+                    Object.assign(buttonStyles, {
+                        color: color
+                    });
+                    break;
+                default:
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+            }
+        }
+        return (index.h("button", { key: 'aa74ad98c90e7548228557bf8a8d26b125d4a83a', class: {
+                btn: true,
+                [`btn--${variant}`]: true,
+                [`btn--${size}`]: true,
+                'btn--loading': this.loading
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+                top: `${ripple.top}px`,
+                left: `${ripple.left}px`,
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`
+            } }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryButton.style = LotteryButtonStyle0;
+
+exports.lottery_order_summary = lotteryOrderSummary.LotteryOrderSummary;
+exports.lottery_button = LotteryButton;

package/dist/cjs/lottery-order-summary-9c494983.js

@@ -0,0 +1,292 @@
+'use strict';
+
+const index = require('./index-b1042ae5.js');
+
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
+ */
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
+
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
+  }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain] && cacheStyleObject[domain].sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
+}
+
+const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+function fetchRequest(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID();
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
+        if (method !== 'GET' && method !== 'HEAD') {
+            headersOrigin['X-Idempotency-Key'] = uuid;
+        }
+        const options = {
+            method,
+            headers: headersOrigin,
+            body: null
+        };
+        if (body && method !== 'GET' && method !== 'HEAD') {
+            options.body = JSON.stringify(body);
+        }
+        else {
+            delete options.body;
+        }
+        fetch(url, options)
+            .then((response) => {
+            if (!response.ok) {
+                return reject(response);
+            }
+            return response.json();
+        })
+            .then((data) => resolve(data))
+            .catch((error) => reject(error));
+    });
+}
+
+var TicketStatus;
+(function (TicketStatus) {
+    TicketStatus["PURCHASED"] = "Purchased";
+    TicketStatus["SETTLED"] = "Settled";
+    TicketStatus["CANCELED"] = "Canceled";
+    TicketStatus["ERROR"] = "Error";
+})(TicketStatus || (TicketStatus = {}));
+
+const lotteryOrderSummaryCss = ":host{width:100%}.order-summary{width:100%;background:var(--emw--color-background, #fff);border-radius:var(--lottery-order-summary-border-radius, 8px);border:var(--lottery-order-summary-border, none);box-shadow:var(--lottery-order-summary-box-shadow, none);box-sizing:border-box}.order-summary__title{margin:var(--lottery-order-summary-title-margin, 0 0 30px 0);text-align:var(--lottery-order-summary-title-text-align, center);color:var(--emw--color-typography, #000);text-transform:uppercase;font-weight:var(--lottery-order-summary-title-font-weight, 700)}.order-summary__ticket-info{display:flex;align-items:center;margin-bottom:var(--lottery-order-summary-row-gap, 16px);gap:var(--lottery-order-summary-col-gap, 10px);color:var(--emw--color-typography, #000)}.order-summary__ticket-label{display:flex;flex-direction:row;align-items:center;width:var(--lottery-order-summary-label-width, 50px);max-width:var(--lottery-order-summary-label-max-width, 100%);flex-shrink:0}.order-summary__colon{margin-left:2px}.order-summary__ticket{font-weight:var(--lottery-order-summary-label-font-weight, 500);color:var(--emw--color-typography, #000);overflow-wrap:break-word}.order-summary__details{display:flex;align-items:center;color:var(--emw--color-typography, #000);font-weight:var(--lottery-order-summary-details-font-weight, 400)}.order-summary__divider{border:none;border-top:var(--lottery-order-summary-divider-border, 1px solid var(--emw--color-gray-100, #e6e6e6));margin:var(--lottery-order-summary-divider-margin, 20px 0)}.order-summary__button-wrapper{display:flex;justify-content:center;margin:var(--lottery-order-summary-button-wrapper-margin, 0);padding:var(--lottery-order-summary-button-wrapper-padding, 0)}";
+const LotteryOrderSummaryStyle0 = lotteryOrderSummaryCss;
+
+const LotteryOrderSummary = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.orderSummarySubmit = index.createEvent(this, "orderSummarySubmit", 7);
+        this.submitSuccess = index.createEvent(this, "lotteryTicketSubmitSuccess", 7);
+        this.submitError = index.createEvent(this, "lotteryTicketSubmitError", 7);
+        this.sessionExpired = index.createEvent(this, "sessionExpired", 7);
+        this.endpoint = undefined;
+        this.sessionId = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.orderSummaryTitle = undefined;
+        this.ticketsLabel = undefined;
+        this.totalLabel = undefined;
+        this.showColon = true;
+        this.showDivider = false;
+        this.submitDisabled = false;
+        this.submitButtonText = undefined;
+        this.submitLoading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleLotteryTicketParamsReady(event) {
+        if (event.detail && this.isValidTicketSubmitParam(event.detail)) {
+            this.handleSubmitTickets(event.detail);
+        }
+    }
+    isValidTicketSubmitParam(detail) {
+        return (detail &&
+            detail.playerId &&
+            Array.isArray(detail.tickets) &&
+            detail.tickets.length > 0 &&
+            detail.tickets.every((ticket) => this.isValidTicketParam(ticket)));
+    }
+    isValidTicketParam(ticket) {
+        return (ticket &&
+            ticket.amount !== undefined &&
+            ticket.multiplier !== undefined &&
+            ticket.multiplierNum !== undefined &&
+            typeof ticket.quickPick === 'boolean' &&
+            ticket.selection !== undefined);
+    }
+    async handleSubmitTickets(body) {
+        try {
+            this.submitLoading = true;
+            const res = await fetchRequest(`${this.endpoint}/tickets`, 'POST', body, {
+                Authorization: `Bearer ${this.sessionId}`
+            });
+            if (!res.tickets.every((ticket) => ticket.state === TicketStatus.PURCHASED)) {
+                this.submitError.emit({
+                    message: 'Failed to purchase ticket',
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+            else {
+                this.submitSuccess.emit({
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+        }
+        catch (e) {
+            if (e.status === 401) {
+                this.sessionExpired.emit();
+            }
+            if (e.status > 300 || !e.status) {
+                this.submitError.emit({
+                    dataOrigin: e,
+                    status: e.status || 0
+                });
+            }
+        }
+        finally {
+            this.submitLoading = false;
+        }
+    }
+    handleSubmit() {
+        this.orderSummarySubmit.emit();
+    }
+    render() {
+        return (index.h("div", { key: 'efdb1636656b63aec159e534475fd666769fd4ca', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '6d4c031bc462d721e18b3e652724835ba8fd690a', class: "order-summary" }, index.h("h3", { key: '16ce86d321b12b51bab202ab336d64968bf9ff89', class: "order-summary__title" }, this.orderSummaryTitle), index.h("div", { key: '198532d79c47577006ac5d11f90394ccc513c329', class: "order-summary__ticket" }, index.h("div", { key: '042e62b7d14a6edd406a14d617d17a1a113f5aae', class: "order-summary__ticket-info" }, index.h("div", { key: '7e52751fb547ba8b8383456c520228b2b02f5753', class: "order-summary__ticket-label" }, index.h("div", { key: '90684f3d39ba97a1abd9d8c63e2674b36e4b8678', class: "order-summary__ticket" }, this.ticketsLabel), index.h("span", { key: '16b27f067a674f75fb14b50dcaaaa4c85eb7ebf2', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("div", { key: 'a197e3f00bc600a048b37f90ad3a8e37d57dbb13', class: "order-summary__details" }, index.h("slot", { key: '2ae61d6ba689093da155390d7fe85c3c96bb8ba0', name: "orderSummaryTicketDetail" }))), this.showDivider && index.h("hr", { key: 'a27f9309ef46d2d99edc2dd24c1cbe61153548c8', class: "order-summary__divider" }), index.h("div", { key: 'd7574288d92159b7f455c0ce610e0b44c6a5d5fb', class: "order-summary__ticket-info" }, index.h("div", { key: '160290be8ee8267c24372fcccc0172fbde699e54', class: "order-summary__ticket-label" }, index.h("div", { key: '2489842ef3993d180dbda4304d9bf0dd60c5179d', class: "order-summary__ticket" }, this.totalLabel), index.h("span", { key: 'f58319a518511ff51402e26d897ea60de1bf9dce', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("span", { key: '7f01d9a780150d81e777702635d66aa04aa9b6da', class: "order-summary__details" }, index.h("slot", { key: 'f72248a4423c6edf89555d0c53d29cd0d4cedf7a', name: "orderSummaryTotalDetail" })))), index.h("slot", { key: 'a5da30406e02ea7dbdbf1f37fc89106b08bd8d3d', name: "orderSummaryChoice" }), index.h("div", { key: 'ed9429dd65495cea075910c5d41f0b9f7785cbb3', class: "order-summary__button-wrapper" }, index.h("lottery-button", { key: '5a31daaeb0faad9127e5c383fc1196a6763278d1', onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: this.submitDisabled, text: this.submitButtonText })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOrderSummary.style = LotteryOrderSummaryStyle0;
+
+exports.LotteryOrderSummary = LotteryOrderSummary;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/lottery-order-summary.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b1042ae5.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-order-summary.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-button_2.cjs",[[1,"lottery-order-summary",{"endpoint":[513],"sessionId":[513,"session-id"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"orderSummaryTitle":[1,"order-summary-title"],"ticketsLabel":[1,"tickets-label"],"totalLabel":[1,"total-label"],"showColon":[4,"show-colon"],"showDivider":[4,"show-divider"],"submitDisabled":[4,"submit-disabled"],"submitButtonText":[1,"submit-button-text"],"submitLoading":[32]},[[8,"lotteryTicketParamsReady","handleLotteryTicketParamsReady"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/lottery-order-summary/lottery-order-summary.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/lottery-button",
+      "tags": [
+        "lottery-button"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-order-summary/index.js

@@ -0,0 +1 @@
+export { LotteryOrderSummary } from './lottery-order-summary';

package/dist/collection/components/lottery-order-summary/lottery-order-summary.css

@@ -0,0 +1,67 @@
+:host {
+  width: 100%;
+}
+
+.order-summary {
+  width: 100%;
+  background: var(--emw--color-background, #fff);
+  border-radius: var(--lottery-order-summary-border-radius, 8px);
+  border: var(--lottery-order-summary-border, none);
+  box-shadow: var(--lottery-order-summary-box-shadow, none);
+  box-sizing: border-box;
+}
+
+.order-summary__title {
+  margin: var(--lottery-order-summary-title-margin, 0 0 30px 0);
+  text-align: var(--lottery-order-summary-title-text-align, center);
+  color: var(--emw--color-typography, #000);
+  text-transform: uppercase;
+  font-weight: var(--lottery-order-summary-title-font-weight, 700);
+}
+
+.order-summary__ticket-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--lottery-order-summary-row-gap, 16px);
+  gap: var(--lottery-order-summary-col-gap, 10px);
+  color: var(--emw--color-typography, #000);
+}
+
+.order-summary__ticket-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: var(--lottery-order-summary-label-width, 50px);
+  max-width: var(--lottery-order-summary-label-max-width, 100%);
+  flex-shrink: 0;
+}
+
+.order-summary__colon {
+  margin-left: 2px;
+}
+
+.order-summary__ticket {
+  font-weight: var(--lottery-order-summary-label-font-weight, 500);
+  color: var(--emw--color-typography, #000);
+  overflow-wrap: break-word;
+}
+
+.order-summary__details {
+  display: flex;
+  align-items: center;
+  color: var(--emw--color-typography, #000);
+  font-weight: var(--lottery-order-summary-details-font-weight, 400);
+}
+
+.order-summary__divider {
+  border: none;
+  border-top: var(--lottery-order-summary-divider-border, 1px solid var(--emw--color-gray-100, #e6e6e6));
+  margin: var(--lottery-order-summary-divider-margin, 20px 0);
+}
+
+.order-summary__button-wrapper {
+  display: flex;
+  justify-content: center;
+  margin: var(--lottery-order-summary-button-wrapper-margin, 0);
+  padding: var(--lottery-order-summary-button-wrapper-padding, 0);
+}