@everymatrix/lottery-selection 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotterySelection = require('./lottery-selection-3122c2e3.js');
+require('./index-9b8fe4ee.js');
+
+
+
+exports.LotterySelection = lotterySelection.LotterySelection;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9b8fe4ee.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-selection.cjs",[[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"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/lottery-selection-3122c2e3.js

@@ -0,0 +1,214 @@
+'use strict';
+
+const index = require('./index-9b8fe4ee.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);
+      }
+    });
+  }
+}
+
+// This icon file is generated automatically.
+var DeleteFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" } }] }, "name": "delete", "theme": "filled" };
+const DeleteFilled$1 = DeleteFilled;
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var defaultColors = {
+    primaryColor: '#333',
+    secondaryColor: '#E6E6E6'
+};
+function renderIconDefinitionToSVGElement(icond, options) {
+    if (options === void 0) { options = {}; }
+    if (typeof icond.icon === 'function') {
+        // two-tone
+        var placeholders = options.placeholders || defaultColors;
+        return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
+    }
+    // fill, outline
+    return renderAbstractNodeToSVGElement(icond.icon, options);
+}
+function renderAbstractNodeToSVGElement(node, options) {
+    var targetAttrs = node.tag === 'svg'
+        ? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
+    var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
+        var key = nextKey;
+        var value = targetAttrs[key];
+        var token = "".concat(key, "=\"").concat(value, "\"");
+        acc.push(token);
+        return acc;
+    }, []);
+    var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
+    var children = (node.children || [])
+        .map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
+        .join('');
+    if (children && children.length) {
+        return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
+    }
+    return "<".concat(node.tag).concat(attrsToken, " />");
+}
+
+// Basic sanitization method for SVG content
+// This is NOT a complete XSS prevention for SVG, but prevents common attacks.
+function sanitizeSvg(svgString) {
+    let sanitized = svgString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ''); // Remove <script> tags
+    sanitized = sanitized.replace(/on[a-z]+=[\"'][^\"']*[\"']/gi, ''); // Remove on* attributes
+    sanitized = sanitized.replace(/javascript:/gi, ''); // Remove javascript: URLs
+    return sanitized;
+}
+
+const lotterySelectionCss = ":host{display:inline-block}.lottery-selection__button{display:flex;align-items:center;justify-content:center;width:var(--lottery-selection-width, 32px);height:var(--lottery-selection-height, 32px);padding:var(--lottery-selection-padding, 0);box-sizing:border-box;background:var(--lottery-selection-background, var(--emw--color-background, #fff));border:var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));border-radius:var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));color:var(--lottery-selection-color, var(--emw--color-typography, #000));font-weight:var(--lottery-selection-font-weight, bold);font-size:var(--lottery-selection-font-size, 1em);cursor:pointer;user-select:none;}.lottery-selection__button:hover{background:var(--lottery-selection-hover-background, var(--emw--color-background, #fff));border-color:var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-hover-color, var(--emw--color-typography, #000))}.lottery-selection__button .lottery-selection__delete-icon{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon{display:flex;align-items:center;justify-content:center;fill:var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));vertical-align:middle}.lottery-selection__button.lottery-selection__button--selected{background-color:var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));border-color:var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff))}.lottery-selection__button.lottery-selection__button--disabled{background-color:var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));border-color:var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));color:var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));cursor:not-allowed;pointer-events:none;}.lottery-selection__button.lottery-selection__button--no-border{border:none}.lottery-selection__button.lottery-selection__button--no-background{background:transparent}";
+const LotterySelectionStyle0 = lotterySelectionCss;
+
+const LotterySelection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryBulletClickHandler = index.createEvent(this, "lotteryBulletClick", 7);
+        this.value = 0;
+        this.text = undefined;
+        this.idx = undefined;
+        this.type = 'toggle';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.deleteIconSvg = '';
+        this.deleteIconWidth = '16px';
+        this.deleteIconHeight = '16px';
+    }
+    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`);
+        }
+    }
+    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();
+    }
+    handleClick() {
+        if (this.type === 'disabled' || this.type === 'readonly') {
+            return;
+        }
+        console.log('bullet clicked', this.type, this.idx, this.text, this.value);
+        this.lotteryBulletClickHandler.emit({
+            type: this.type,
+            idx: this.idx,
+            text: this.text,
+            value: this.value
+        });
+    }
+    render() {
+        let iconToRender;
+        if (this.deleteIconSvg) {
+            iconToRender = sanitizeSvg(this.deleteIconSvg);
+        }
+        else {
+            iconToRender = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+                extraSVGAttrs: {
+                    width: this.deleteIconWidth,
+                    height: this.deleteIconHeight,
+                    fill: 'currentColor'
+                }
+            });
+        }
+        return (index.h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, index.h("button", { key: '11a2402abbc290dc877ad95f3433092c3a0d8419', class: {
+                'lottery-selection__button': true,
+                'lottery-selection__button--selected': this.value == 1,
+                'lottery-selection__button--disabled': this.type === 'disabled',
+                'lottery-selection__button--no-border': !this.hasBorder,
+                'lottery-selection__button--no-background': !this.hasBackground,
+                isDeleteByIcon: this.type === 'delete',
+                isCallDialogBtn: this.type === 'input' || this.type === 'readonly'
+            }, onClick: this.handleClick.bind(this), disabled: this.type === 'disabled' }, this.type === 'delete' && index.h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), index.h("span", { key: '55775e2492a1fe45cc8a457ac0a0d206744461ab', class: "lottery-selection__text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelection.style = LotterySelectionStyle0;
+
+exports.LotterySelection = LotterySelection;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotterySelection = require('./lottery-selection-3122c2e3.js');
+require('./index-9b8fe4ee.js');
+
+
+
+exports.lottery_selection = lotterySelection.LotterySelection;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9b8fe4ee.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.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-selection.cjs",[[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"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/lottery-selection/lottery-selection.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

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

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

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

@@ -0,0 +1,64 @@
+:host {
+  display: inline-block;
+}
+
+.lottery-selection__button {
+  /* Basic Layout & Sizing */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lottery-selection-width, 32px);
+  height: var(--lottery-selection-height, 32px);
+  padding: var(--lottery-selection-padding, 0);
+  box-sizing: border-box;
+  /* Appearance */
+  background: var(--lottery-selection-background, var(--emw--color-background, #fff));
+  border: var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));
+  border-radius: var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));
+  /* Typography */
+  color: var(--lottery-selection-color, var(--emw--color-typography, #000));
+  font-weight: var(--lottery-selection-font-weight, bold);
+  font-size: var(--lottery-selection-font-size, 1em);
+  /* Behavior */
+  cursor: pointer;
+  user-select: none;
+  /* Specific Modes */
+  /* States */
+  /* Modifiers */
+}
+.lottery-selection__button:hover {
+  background: var(--lottery-selection-hover-background, var(--emw--color-background, #fff));
+  border-color: var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));
+  color: var(--lottery-selection-hover-color, var(--emw--color-typography, #000));
+}
+.lottery-selection__button .lottery-selection__delete-icon {
+  display: none;
+}
+.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text {
+  display: none;
+}
+.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));
+  vertical-align: middle;
+}
+.lottery-selection__button.lottery-selection__button--selected {
+  background-color: var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));
+  border-color: var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));
+  color: var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff));
+}
+.lottery-selection__button.lottery-selection__button--disabled {
+  background-color: var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));
+  border-color: var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));
+  color: var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));
+  cursor: not-allowed;
+  pointer-events: none; /* Disable hover effects cleanly */
+}
+.lottery-selection__button.lottery-selection__button--no-border {
+  border: none;
+}
+.lottery-selection__button.lottery-selection__button--no-background {
+  background: transparent;
+}