@everymatrix/lottery-selection-group 0.0.1

package/dist/cjs/lottery-selection-group-1608b2e2.js

@@ -0,0 +1,480 @@
+'use strict';
+
+const index = require('./index-bc355d7d.js');
+
+/**
+ * @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
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS = {
+    en: {
+        noTicketBoard: 'No ticket board available.',
+        selectionCleared: 'Your selection has been cleared.',
+        clearAll: 'Clear All',
+        stopAt: 'Stop at',
+        turnover: 'Turnover: ',
+        pleaseFillIn: 'Please fill in all the selection input!',
+        fillIn: 'Fill in',
+        noBets: 'Sorry. No bets have been placed so far. Check back later!',
+        search: 'Search',
+        clear: 'Clear',
+        oddsChart: 'Odds Chart',
+        ticketSuccess: 'Ticket purchased successfully.',
+        stakePerLine: 'Stake per Line:',
+        lowestOdds: 'Lowest Odds:',
+        highestOdds: 'Highest Odds:',
+        orderSummary: 'ORDER SUMMARY',
+        ticket: 'Ticket',
+        lines: 'Lines',
+        total: 'Total',
+        submit: 'Submit',
+        loading: 'Loading',
+        enterValidNumber: 'Please enter a valid number.',
+        enterNumberBetween: 'Please enter a number between {min} and {max}.',
+        numberAlreadySelected: 'This number has already been selected.',
+        enterScoreUpTo: 'Please enter the score (Up to {maxScore})',
+        enterValue: 'Please enter a value',
+        myChoices: 'My Choices',
+        teams: 'Teams',
+        scores: 'Scores',
+        euro: 'Euro',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    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];
+        }
+    });
+};
+
+function getBulletTextsSet(bulletTexts, splitToken) {
+    return new Set(bulletTexts ? bulletTexts.split(splitToken) : []);
+}
+function validateInput({ value, selectedSet, maxValue, minValue, language, type = 'integer' }) {
+    const trimmedValue = value.trim();
+    if (type === 'integer') {
+        // Strict integer check
+        if (!/^-?\d+$/.test(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate('enterValidNumber', language),
+                value
+            };
+        }
+        const numValue = Number(trimmedValue);
+        if (isNaN(numValue)) {
+            return {
+                valid: false,
+                errorMessage: translate('enterValidNumber', language),
+                value
+            };
+        }
+        if ((minValue !== undefined && numValue < minValue) || (maxValue !== undefined && numValue > maxValue)) {
+            return {
+                valid: false,
+                errorMessage: translate('enterNumberBetween', language, {
+                    min: minValue,
+                    max: maxValue
+                }),
+                value
+            };
+        }
+        // Normalize value (e.g. "05" -> "5") for set check
+        const normalizedValue = String(numValue);
+        if (selectedSet.has(normalizedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate('numberAlreadySelected', language),
+                value
+            };
+        }
+    }
+    else {
+        // Text mode validation
+        if (selectedSet.has(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate('numberAlreadySelected', language), // Or generic 'alreadySelected' if available, but reusing key for now
+                value
+            };
+        }
+    }
+    return {
+        valid: true,
+        errorMessage: '',
+        value
+    };
+}
+function removeBulletTexts(text, selectedArr) {
+    return selectedArr.filter((s) => s !== text);
+}
+function addSelectedBulletTexts(text, selectedArr) {
+    return selectedArr.concat([text]);
+}
+function removeAndAddSelectedBulletTexts(text, selectedArr, maxSelectedCount) {
+    return selectedArr.slice(selectedArr.length - (maxSelectedCount - 1)).concat([text]);
+}
+function buildSelectedBulletTextsArr(item, selectedArr, maxSelectedCount) {
+    if (item.type === 'delete') {
+        return removeBulletTexts(item.text, selectedArr);
+    }
+    if (item.type === 'toggle') {
+        if (selectedArr.includes(item.text)) {
+            return removeBulletTexts(item.text, selectedArr);
+        }
+        if (selectedArr.length >= maxSelectedCount) {
+            return removeAndAddSelectedBulletTexts(item.text, selectedArr, maxSelectedCount);
+        }
+        return addSelectedBulletTexts(item.text, selectedArr);
+    }
+    return [];
+}
+
+const lotterySelectionGroupCss = ":host {\n  width: 100%;\n}\n\n.lottery-selection-group {\n  container-type: inline-size;\n  padding: var(--lottery-selection-group-padding, 0);\n  background: var(--lottery-selection-group-background, transparent);\n  border: var(--lottery-selection-group-border, none);\n  border-radius: var(--lottery-selection-group-border-radius, 0);\n}\n.lottery-selection-group__item {\n  display: flex;\n  flex-direction: var(--lottery-selection-group-flex-direction, row);\n  align-items: var(--lottery-selection-group-item-align, center);\n  justify-content: var(--lottery-selection-group-item-justify, flex-start);\n  gap: var(--lottery-selection-group-item-gap, 16px);\n  width: 100%;\n}\n.lottery-selection-group__item--left {\n  width: var(--lottery-selection-group-label-width, 130px);\n  min-width: var(--lottery-selection-group-label-min-width, auto);\n  max-width: var(--lottery-selection-group-label-max-width, none);\n  color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-label-font-size, 1em);\n  font-weight: var(--lottery-selection-group-label-font-weight, bold);\n  text-align: var(--lottery-selection-group-label-align, left);\n  white-space: var(--lottery-selection-group-label-white-space, normal);\n}\n.lottery-selection-group__item--right {\n  flex: 1;\n  display: flex;\n  flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */\n  gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */\n  align-items: var(--lottery-selection-group-bullets-align, center);\n  justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */\n}\n@container (max-width: 320px) {\n  .lottery-selection-group__item--left {\n    width: 100px;\n    max-width: 100px;\n  }\n}\n\n.dialog-input {\n  width: 100%;\n  padding: var(--lottery-selection-group-input-padding, 8px);\n  border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));\n  border-radius: var(--lottery-selection-group-input-radius, 4px);\n  background-color: var(--lottery-selection-group-input-bg, #fff);\n  color: var(--lottery-selection-group-input-color, #000);\n  box-sizing: border-box;\n  margin-top: var(--lottery-selection-group-input-margin-top, 10px);\n  font-size: var(--lottery-selection-group-input-font-size, 1em);\n}\n.dialog-input::placeholder {\n  color: var(--lottery-selection-group-input-placeholder-color, #999);\n}\n\n.dialog-input.invalid,\n.dialog-input.invalid:focus {\n  border-color: var(--emw--color-error, #ff3d00);\n  outline-color: var(--emw--color-error, #ff3d00);\n}\n\n.error-message {\n  color: var(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));\n  font-size: var(--lottery-selection-group-error-font-size, 12px);\n  font-weight: var(--lottery-selection-group-error-font-weight, normal);\n  margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n  color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);\n  font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);\n  margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);\n}\n.addSelectionDialog-footer {\n  display: flex;\n  justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);\n  gap: var(--lottery-selection-group-dialog-footer-gap, 18px);\n  margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);\n}";
+const LotterySelectionGroupStyle0 = lotterySelectionGroupCss;
+
+const LotterySelectionGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bulletGroupUpdateSelectedBulletTexts = index.createEvent(this, "bulletGroupUpdateSelection", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.splitToken = ',';
+        this.selectionGroupId = undefined;
+        this.selectionGroupLabel = undefined;
+        this.type = 'bet';
+        this.selectedBulletTexts = null;
+        this.maxSelectedCount = null;
+        this.maxDisplayBulletsCount = 11;
+        this.bulletTexts = null;
+        this.maxIntegerBulletText = null;
+        this.minIntegerBulletText = 0;
+        this.bulletTextType = 'integer';
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.dialogTitle = undefined;
+        this.dialogInputPlaceholder = undefined;
+        this.dialogConfig = {
+            width: '400px',
+            visible: false,
+            onConfirm: () => this.handleFillInAddMore(),
+            onCancel: () => this.handleCloseAddMoreDialog()
+        };
+        this.inputInfo = { valid: true, errorMessage: '', value: '' };
+    }
+    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`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations(JSON.parse(this.translationUrl));
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryBulletClickHandler(event) {
+        event.stopPropagation();
+        // if it's input type, open the dialog
+        if (event.detail.type === 'input') {
+            this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+            return;
+        }
+        if (['delete', 'toggle'].includes(event.detail.type)) {
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts: buildSelectedBulletTextsArr(event.detail, Array.from(this.selectedSet), this.maxSelectedCount).join(this.splitToken),
+                selectionGroupId: this.selectionGroupId
+            });
+            return;
+        }
+    }
+    get selectedSet() {
+        return getBulletTextsSet(this.selectedBulletTexts, this.splitToken);
+    }
+    get bulletTextsSet() {
+        if (this.bulletTexts)
+            return getBulletTextsSet(this.bulletTexts, this.splitToken);
+        if (this.bulletTextType === 'integer' &&
+            this.maxIntegerBulletText !== null &&
+            this.maxIntegerBulletText !== undefined) {
+            return getBulletTextsSet(Array.from({ length: Number(this.lastDisplayBulletText) - this.minIntegerBulletText + 1 }, (_, index) => this.minIntegerBulletText + index).join(this.splitToken), this.splitToken);
+        }
+        // If neither bulletTexts nor maxIntegerBulletText are provided,
+        return new Set();
+    }
+    // the last bullet text
+    get lastDisplayBulletText() {
+        if (this.bulletTextType === 'integer') {
+            if (this.maxIntegerBulletText !== null && this.maxIntegerBulletText !== undefined) {
+                return Math.min(this.maxIntegerBulletText, this.minIntegerBulletText + this.maxDisplayBulletsCount - 1);
+            }
+            return this.minIntegerBulletText + this.maxDisplayBulletsCount - 1;
+        }
+        // Text mode: return the text at the max display index if available
+        if (this.bulletTextsSet.size > 0) {
+            const texts = Array.from(this.bulletTextsSet);
+            if (texts.length >= this.maxDisplayBulletsCount) {
+                return texts[this.maxDisplayBulletsCount - 1];
+            }
+            return texts[texts.length - 1]; // If fewer than maxDisplayBulletsCount, return the last one
+        }
+        return null;
+    }
+    get isSingleSelectionMode() {
+        return this.maxSelectedCount === 1;
+    }
+    getBulletToRender() {
+        const allBulletTexts = Array.from(this.bulletTextsSet);
+        // Determine which bullets to display based on type and limit
+        let bulletsToRender = allBulletTexts;
+        let showInputButton = false;
+        if (this.bulletTextType === 'text') {
+            // For text, if we have more items than the limit, we need an input button.
+            // The input button takes one slot, so we show (limit - 1) items.
+            if (allBulletTexts.length > this.maxDisplayBulletsCount) {
+                showInputButton = true;
+                bulletsToRender = allBulletTexts.slice(0, this.maxDisplayBulletsCount - 1);
+            }
+            else {
+                bulletsToRender = allBulletTexts;
+            }
+        }
+        else {
+            // For integer, logic is based on maxIntegerBulletText vs displayed range
+            showInputButton =
+                this.maxIntegerBulletText !== null &&
+                    this.maxIntegerBulletText !== undefined &&
+                    this.maxIntegerBulletText > Number(this.lastDisplayBulletText);
+            // Integer bullets generation already respects the count, no slicing needed on the raw set
+            bulletsToRender = allBulletTexts;
+        }
+        return {
+            bulletsToRender,
+            showInputButton
+        };
+    }
+    renderBulletGroup() {
+        let items = [];
+        if (this.type === 'bet') {
+            const isMaxSelected = this.maxSelectedCount !== null && this.selectedSet.size >= this.maxSelectedCount;
+            const { bulletsToRender, showInputButton } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (!this.selectedSet.has(String(text)) && isMaxSelected && !this.isSingleSelectionMode) {
+                    bulletType = 'disabled';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text: String(text),
+                    idx,
+                    type: bulletType
+                });
+            });
+            if (showInputButton) {
+                let inputBulletType = 'input';
+                if (isMaxSelected && !this.isSingleSelectionMode) {
+                    inputBulletType = 'disabled';
+                }
+                const inputButtonText = this.bulletTextType === 'text' ? '...' : `${this.lastDisplayBulletText}+`;
+                const inputButtonIdx = this.bulletTextType === 'text' ? -1 : Number(this.lastDisplayBulletText) + 1;
+                // Special handling for integer mode:
+                // If the generated set is "full" (size == maxDisplayBulletsCount),
+                // we need to remove the last item to make room for the "N+" button
+                // so the total visual count remains consistent.
+                if (this.bulletTextType === 'integer' && items.length >= this.maxDisplayBulletsCount) {
+                    items.pop();
+                }
+                items.push({
+                    value: 0,
+                    text: inputButtonText,
+                    idx: inputButtonIdx,
+                    type: inputBulletType
+                });
+            }
+        }
+        else if (['choice', 'preview'].includes(this.type)) {
+            // For choice/preview, also respect the visual limit for text mode
+            const { bulletsToRender } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.type === 'preview') {
+                    bulletType = 'readonly';
+                }
+                else if (this.selectedSet.has(String(text))) {
+                    bulletType = 'delete';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text,
+                    idx,
+                    type: bulletType
+                });
+            });
+        }
+        return (index.h("div", { class: "lottery-selection-group__item--right" }, items.map((item) => {
+            return (index.h("lottery-selection", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, text: item.text, idx: item.idx, value: item.value, type: item.type, hasBorder: this.hasBorder, hasBackground: this.hasBackground }));
+        })));
+    }
+    handleCloseAddMoreDialog() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.inputInfo = { value: '', errorMessage: '', valid: true };
+    }
+    handleInputChange(e) {
+        const inputElement = e.target;
+        const value = inputElement.value;
+        this.inputInfo = Object.assign(Object.assign({}, this.inputInfo), { value: value });
+        this.inputInfo = validateInput({
+            value,
+            selectedSet: this.selectedSet,
+            maxValue: this.maxIntegerBulletText,
+            minValue: this.bulletTextType === 'integer' ? Number(this.lastDisplayBulletText) + 1 : undefined,
+            language: this.language,
+            type: this.bulletTextType
+        });
+    }
+    handleFillInAddMore() {
+        if (this.inputInfo.valid) {
+            const { value } = this.inputInfo;
+            // Normalize the value (e.g., "05" -> "5") to match validation logic
+            let normalizedValue = value;
+            if (this.bulletTextType === 'integer') {
+                normalizedValue = String(Number(value));
+            }
+            else {
+                normalizedValue = value.trim();
+            }
+            let newSelectedBulletTexts;
+            if (this.isSingleSelectionMode) {
+                newSelectedBulletTexts = normalizedValue;
+            }
+            else {
+                newSelectedBulletTexts = addSelectedBulletTexts(normalizedValue, Array.from(this.selectedSet)).join(this.splitToken);
+            }
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts,
+                selectionGroupId: this.selectionGroupId
+            });
+            this.handleCloseAddMoreDialog();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '66b8e9c63d948eb2f7eb37adb80892dbedd7df9a', class: "lottery-selection-group", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '6562fdcad0f352b5e2d03edcc980a9aeab32277e', class: "lottery-selection-group__item" }, this.selectionGroupLabel && (index.h("div", { key: '43c2132e4904a2b69b970d9b2074f120ed4d0986', class: "lottery-selection-group__item--left" }, this.selectionGroupLabel)), this.renderBulletGroup()), index.h("lottery-tipping-dialog", { key: 'cb693d10e6b499628909571021d8508cdebbe29a', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.dialogConfig.onCancel }, index.h("div", { key: 'dd312634574bbe1b4d3de7e82a9c58f58f846c1a', class: "addSelectionDialog" }, index.h("div", { key: 'b371b1090598f0219a7c652bab51e9d349703c34', class: "addSelectionDialog-title" }, this.dialogTitle || (this.bulletTextType === 'text'
+            ? translate('enterValue', this.language)
+            : translate('enterScoreUpTo', this.language, {
+                maxScore: this.maxIntegerBulletText
+            }))), index.h("input", { key: 'b5f1bb74999246dac8dc20f04e3af893deae6654', type: "text", class: {
+                'dialog-input': true,
+                invalid: !this.inputInfo.valid
+            }, value: this.inputInfo.value, onInput: this.handleInputChange.bind(this), placeholder: this.dialogInputPlaceholder }), index.h("div", { key: 'f33970a6dffdc881ffa9cf2c0bb54b26b27cccd6', class: "error-message" }, this.inputInfo.errorMessage)), index.h("div", { key: '4c580dae14b38aff03e17067b2c0b72d01aa4f42', slot: "footer", class: "addSelectionDialog-footer" }, index.h("lottery-button", { key: '874aa0ffde8fe2d0b08efea0cf951f101ab8dad0', onClick: this.dialogConfig.onCancel, text: translate('cancel', this.language), variant: "outline" }), index.h("lottery-button", { key: '63a556eb5f9ad1cdd357c017756be274d40ef235', onClick: this.dialogConfig.onConfirm, text: translate('confirm', this.language), variant: "primary", disabled: !this.inputInfo.valid || !this.inputInfo.value })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelectionGroup.style = LotterySelectionGroupStyle0;
+
+exports.LotterySelectionGroup = LotterySelectionGroup;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/lottery-selection-group.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bc355d7d.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-selection-group.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_4.cjs",[[1,"lottery-selection-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"splitToken":[513,"split-token"],"selectionGroupId":[513,"selection-group-id"],"selectionGroupLabel":[513,"selection-group-label"],"type":[513],"selectedBulletTexts":[513,"selected-bullet-texts"],"maxSelectedCount":[514,"max-selected-count"],"maxDisplayBulletsCount":[514,"max-display-bullets-count"],"bulletTexts":[513,"bullet-texts"],"maxIntegerBulletText":[514,"max-integer-bullet-text"],"minIntegerBulletText":[514,"min-integer-bullet-text"],"bulletTextType":[513,"bullet-text-type"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"dialogTitle":[513,"dialog-title"],"dialogInputPlaceholder":[513,"dialog-input-placeholder"],"dialogConfig":[32],"inputInfo":[32]},[[0,"lotteryBulletClick","lotteryBulletClickHandler"]],{"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"]}],[1,"lottery-selection",{"value":[520],"text":[513],"idx":[514],"type":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"deleteIconSvg":[513,"delete-icon-svg"],"deleteIconWidth":[513,"delete-icon-width"],"deleteIconHeight":[513,"delete-icon-height"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-dialog",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"visible":[516],"dialogTitle":[1,"dialog-title"],"width":[1],"closable":[4],"mask":[4],"maskClosable":[4,"mask-closable"],"animationDuration":[2,"animation-duration"],"fullscreen":[4],"showFooter":[4,"show-footer"],"showCancelBtn":[4,"show-cancel-btn"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,31 @@
+{
+  "entries": [
+    "components/lottery-selection-group/lottery-selection-group.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/lottery-button",
+      "tags": [
+        "lottery-button"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-selection",
+      "tags": [
+        "lottery-selection"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-dialog",
+      "tags": [
+        "lottery-tipping-dialog"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-selection-group/index.js

@@ -0,0 +1 @@
+export { LotterySelectionGroup } from './lottery-selection-group';

package/dist/collection/components/lottery-selection-group/lottery-selection-group.css

@@ -0,0 +1,84 @@
+:host {
+  width: 100%;
+}
+
+.lottery-selection-group {
+  container-type: inline-size;
+  padding: var(--lottery-selection-group-padding, 0);
+  background: var(--lottery-selection-group-background, transparent);
+  border: var(--lottery-selection-group-border, none);
+  border-radius: var(--lottery-selection-group-border-radius, 0);
+}
+.lottery-selection-group__item {
+  display: flex;
+  flex-direction: var(--lottery-selection-group-flex-direction, row);
+  align-items: var(--lottery-selection-group-item-align, center);
+  justify-content: var(--lottery-selection-group-item-justify, flex-start);
+  gap: var(--lottery-selection-group-item-gap, 16px);
+  width: 100%;
+}
+.lottery-selection-group__item--left {
+  width: var(--lottery-selection-group-label-width, 130px);
+  min-width: var(--lottery-selection-group-label-min-width, auto);
+  max-width: var(--lottery-selection-group-label-max-width, none);
+  color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));
+  font-size: var(--lottery-selection-group-label-font-size, 1em);
+  font-weight: var(--lottery-selection-group-label-font-weight, bold);
+  text-align: var(--lottery-selection-group-label-align, left);
+  white-space: var(--lottery-selection-group-label-white-space, normal);
+}
+.lottery-selection-group__item--right {
+  flex: 1;
+  display: flex;
+  flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */
+  gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */
+  align-items: var(--lottery-selection-group-bullets-align, center);
+  justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */
+}
+@container (max-width: 320px) {
+  .lottery-selection-group__item--left {
+    width: 100px;
+    max-width: 100px;
+  }
+}
+
+.dialog-input {
+  width: 100%;
+  padding: var(--lottery-selection-group-input-padding, 8px);
+  border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));
+  border-radius: var(--lottery-selection-group-input-radius, 4px);
+  background-color: var(--lottery-selection-group-input-bg, #fff);
+  color: var(--lottery-selection-group-input-color, #000);
+  box-sizing: border-box;
+  margin-top: var(--lottery-selection-group-input-margin-top, 10px);
+  font-size: var(--lottery-selection-group-input-font-size, 1em);
+}
+.dialog-input::placeholder {
+  color: var(--lottery-selection-group-input-placeholder-color, #999);
+}
+
+.dialog-input.invalid,
+.dialog-input.invalid:focus {
+  border-color: var(--emw--color-error, #ff3d00);
+  outline-color: var(--emw--color-error, #ff3d00);
+}
+
+.error-message {
+  color: var(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));
+  font-size: var(--lottery-selection-group-error-font-size, 12px);
+  font-weight: var(--lottery-selection-group-error-font-weight, normal);
+  margin-top: 4px;
+}
+
+.addSelectionDialog-title {
+  color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));
+  font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);
+  font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);
+  margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);
+}
+.addSelectionDialog-footer {
+  display: flex;
+  justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);
+  gap: var(--lottery-selection-group-dialog-footer-gap, 18px);
+  margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);
+}