@everymatrix/lottery-tipping-dialog 0.0.1

package/dist/collection/components/lottery-tipping-dialog/lottery-tipping-dialog.js

@@ -0,0 +1,479 @@
+import { h } from "@stencil/core";
+import { translate, getTranslations } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+export class LotteryTippingDialog {
+    constructor() {
+        this.wasVisible = false;
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.visible = undefined;
+        this.dialogTitle = '';
+        this.width = '520px';
+        this.closable = true;
+        this.mask = true;
+        this.maskClosable = true;
+        this.animationDuration = 300;
+        this.fullscreen = false;
+        this.showFooter = true;
+        this.showCancelBtn = true;
+        this.language = 'en';
+        this.translationUrl = 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);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations(JSON.parse(this.translationUrl));
+        }
+    }
+    componentWillUpdate() {
+        if (this.visible && !this.wasVisible) {
+            this.disableBodyScroll();
+        }
+        else if (!this.visible && this.wasVisible) {
+            this.enableBodyScroll();
+        }
+        this.wasVisible = this.visible;
+    }
+    disconnectedCallback() {
+        this.enableBodyScroll();
+    }
+    disableBodyScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    enableBodyScroll() {
+        document.body.style.overflow = '';
+    }
+    handleClose() {
+        this.visible = false;
+        this.cancel.emit();
+    }
+    handleMaskClick(e) {
+        if (this.maskClosable && e.target === this.el.querySelector('.mask')) {
+            this.visible = false;
+            this.cancel.emit();
+        }
+    }
+    handleConfirm() {
+        this.visible = false;
+        this.confirm.emit();
+    }
+    render() {
+        const dialogStyle = {
+            width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+            '--duration': `${this.animationDuration}ms`
+        };
+        const dialogWrapperClass = ['dialog-wrapper', this.visible ? 'dialog-wrapper-visible' : ''];
+        const maskClass = ['mask', this.visible ? 'mask-enter' : 'mask-leave'];
+        const dialogClass = [
+            'dialog',
+            this.visible ? 'dialog-enter' : 'dialog-leave',
+            this.fullscreen ? 'fullscreen' : ''
+        ].join(' ');
+        const contentStyle = {
+            maxHeight: 'calc(100vh - 62px)',
+            overflowY: 'auto'
+        };
+        return (h("div", { key: 'cf311658c951f1d8af6d015f02b30e5cfd14e972', class: dialogWrapperClass.join(' ') }, h("div", { key: 'bec49cd133029ca0db51462db39a6b1957d285c7', class: maskClass.join(' '), onClick: this.handleMaskClick.bind(this) }), h("div", { key: '7d9b2faf2fee0d483acfc00e4820d0aac82a718a', class: dialogClass, style: dialogStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" }, h("div", { key: '9d4c2471258cab88ad9ed6a05e513815d96f13a9', class: "dialog-header" }, h("h2", { key: '8bd30b19c31eb9fddebe8d19c6af454a89f5d234', id: "dialog-title", class: "dialog-title" }, this.dialogTitle), this.closable && (h("button", { key: 'f8e4dfebc9506a6aa79e1c68abdd42686a7bbc2f', class: "close-btn", onClick: this.handleClose.bind(this) }, "x"))), h("div", { key: 'b21127dfcb5912d35d41260798d82c15b59335ef', class: "dialog-content", style: contentStyle }, h("slot", { key: 'ca0dedda350d3aef9e54202f8e7add236d0a8795' })), this.showFooter && (h("div", { key: '2d7ccaf4414d509f30db1909948452efaf74aec1', class: "dialog-footer" }, h("slot", { key: '1f6d67f646936756abe1edf768dd37418683815f', name: "footer" }, this.showCancelBtn && (h("button", { key: '92055092b2978c41eabed218b73e242cafe4accc', class: "cancel-btn", onClick: this.handleClose.bind(this) }, translate('cancel', this.language))), h("button", { key: 'c950eefc68feb4546665105a0e2d0f2300183d8f', class: "confirm-btn", onClick: this.handleConfirm.bind(this) }, translate('confirm', this.language))))))));
+    }
+    static get is() { return "lottery-tipping-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-tipping-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-tipping-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "attribute": "mb-source",
+                "reflect": false
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the dialog is visible or hidden"
+                },
+                "attribute": "visible",
+                "reflect": true
+            },
+            "dialogTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text content for the dialog title"
+                },
+                "attribute": "dialog-title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'520px'"
+                        }],
+                    "text": "Width of the dialog, accepts number (pixels) or string (e.g. '50%')"
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'520px'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to display the close button"
+                },
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "mask": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to display the close button"
+                },
+                "attribute": "mask",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "maskClosable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether clicking the mask layer can close the dialog"
+                },
+                "attribute": "mask-closable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "300"
+                        }],
+                    "text": "Duration of the dialog animation in milliseconds"
+                },
+                "attribute": "animation-duration",
+                "reflect": false,
+                "defaultValue": "300"
+            },
+            "fullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the dialog should be displayed in fullscreen mode"
+                },
+                "attribute": "fullscreen",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to show the footer with action buttons"
+                },
+                "attribute": "show-footer",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showCancelBtn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to show the cancel button (only effective when showFooter is true)"
+                },
+                "attribute": "show-cancel-btn",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'en'"
+                        }],
+                    "text": "Language code used by the component"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to translation files for loading multilingual configurations"
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "open",
+                "name": "open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "confirm",
+                "name": "confirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "cancel",
+                "name": "cancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    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-tipping-dialog';

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

@@ -0,0 +1,35 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+export const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};

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 };