@everymatrix/lottery-hakuna-ticket-history-item 0.0.1

package/dist/collection/components/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item.js

@@ -0,0 +1,315 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import "../../../../../lottery-selection-group/dist/types/index";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+export class LotteryHakunaTicketHistoryItem {
+    constructor() {
+        this.selectionGroupStyle = `
+  :host{
+      --lottery-selection-width: 24px;
+      --lottery-selection-height: 24px;
+      --lottery-selection-padding: 10px;
+      --lottery-selection-border-radius: 6px;
+      --lottery-selection-border-width: 1px;
+      --lottery-selection-border-color: #C51917;
+
+      --lottery-selection-color: #fff;
+      --lottery-selection-font-size: 14px;
+      --lottery-selection-font-weight: 500;
+
+      --lottery-selection-hover-background: transparent;
+      --lottery-selection-hover-border-color: #C51917;
+      --lottery-selection-hover-color: #fff;
+
+      .lottery-selection__button{
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+        line-height: normal;
+      }
+      .lottery-selection__button:hover{
+        cursor: default;
+      }
+      --lottery-selection-group-item-gap:6px;
+  }
+  `;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.historyItemName = undefined;
+        this.historyItemImageSrc = undefined;
+        this.ticketId = undefined;
+        this.totalAmount = undefined;
+        this.drawDate = undefined;
+        this.drawTime = undefined;
+        this.selectedNumbers = undefined;
+    }
+    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);
+        }
+    }
+    async componentWillLoad() {
+        resolveTranslationUrl(this.translationUrl);
+    }
+    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();
+    }
+    render() {
+        return (h("div", { key: 'a740a3e2d88502ee4009369b8e04810ca21b0315', class: "lottery-hakuna-ticket-history-item__container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '5488e10c6768d617f73b9675c1ede5c9b1f56640', class: "lottery-hakuna-ticket-history-item__top" }, h("div", { key: 'e4ac3e621a805a1d0b1a531ce70bc7709299e0d0', class: "lottery-hakuna-ticket-history-item__country-wrapper" }, this.historyItemName && (h("img", { key: '8e189b80aefc6d4fdbe25786eb0262852d1cc156', src: this.historyItemImageSrc, alt: this.historyItemName, class: "lottery-hakuna-ticket-history-item__country-flag" })), h("span", { key: '1d860a451d56729e3a9e6bdc64fc2d094e1e54b0', class: "lottery-hakuna-ticket-history-item__country-name" }, this.historyItemName)), h("div", { key: '02772a834c453ceed1c68012acadd3c8041c40ff', class: "lottery-hakuna-ticket-history-item__details" }, h("span", { key: 'c4f6c8b94a95a45d1d6e4c055fe965835040876d', class: "lottery-hakuna-ticket-history-item__meta" }, translate('total', this.language), " ", h("span", { key: '1c88238ed18c0b8babe12d76775b1ac935dacb3f', class: "lottery-hakuna-ticket-history-item__meta-value" }, this.totalAmount)))), h("div", { key: 'd2385c18c6b6b252a2346d703bab06537a97a20f', class: "lottery-hakuna-ticket-history-item__bottom" }, h("div", { key: 'f30447836f082f499a81e74d833f65549e09cb8d', class: "lottery-hakuna-ticket-history-item__numbers-wrapper" }, this.selectedNumbers && (h("lottery-selection-group", { key: '87fc3bb9ab5568323b03c418156b1f1e1d08b016', type: "preview", bulletTexts: this.selectedNumbers, clientStyling: this.selectionGroupStyle + (this.clientStyling || ''), clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, hasBorder: true, hasBackground: false, selectionGroupId: this.ticketId ? this.ticketId.toString() : undefined }))), h("div", { key: '4696416810b6bbf569ac9b63594dd8a56a7df4c2', class: "lottery-hakuna-ticket-history-item__date-wrapper" }, this.drawDate && h("div", { key: 'c9e64166205a1183bc6487c597dd7ae05a9d2604' }, this.drawDate), this.drawTime && h("div", { key: '5d6cea8b4e0c53d405ebaebf253aafe779b7ef8a' }, this.drawTime)))));
+    }
+    static get is() { return "lottery-hakuna-ticket-history-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-hakuna-ticket-history-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-hakuna-ticket-history-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source for stream styling via a service."
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom CSS styles to apply to the component."
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to a custom CSS file for additional styling."
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language code to use for translations. Defaults to 'en'."
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to fetch custom translation data from."
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "historyItemName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the country to display."
+                },
+                "attribute": "history-item-name",
+                "reflect": false
+            },
+            "historyItemImageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL of the country flag image."
+                },
+                "attribute": "history-item-image-src",
+                "reflect": false
+            },
+            "ticketId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The unique identifier for the ticket."
+                },
+                "attribute": "ticket-id",
+                "reflect": false
+            },
+            "totalAmount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The total amount of the ticket with currency."
+                },
+                "attribute": "total-amount",
+                "reflect": false
+            },
+            "drawDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The date of the draw."
+                },
+                "attribute": "draw-date",
+                "reflect": false
+            },
+            "drawTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The time of the draw."
+                },
+                "attribute": "draw-time",
+                "reflect": false
+            },
+            "selectedNumbers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A comma-separated string of selected numbers. e.g. \"3,6,24,36,42,45\"."
+                },
+                "attribute": "selected-numbers",
+                "reflect": false
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/lottery-hakuna-ticket-history-item';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,39 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        total: 'Total:',
+    },
+};
+export 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;
+};
+export const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+export 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);
+        }
+    }
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };