@everymatrix/pam-account-balance-modal 0.1.0

package/dist/cjs/pam-account-balance-modal.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f01eba32.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('pam-account-balance-modal.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([["pam-account-balance-modal_2.cjs",[[1,"pam-account-balance-modal",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"customLocaleIdentifier":[513,"custom-locale-identifier"],"displayBalanceOption":[513,"display-balance-option"],"totalCalculationMode":[513,"total-calculation-mode"],"currencySeparator":[513,"currency-separator"],"currencyDecimal":[513,"currency-decimal"],"currencyPrecision":[513,"currency-precision"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isLoading":[32],"isModalDisplayed":[32],"isSplitWallet":[32],"currentStream":[32],"currency":[32],"updateRealAmountState":[32],"balances":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/pam-account-balance-modal_2.cjs.entry.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamAccountBalanceModal = require('./pam-account-balance-modal-81ade12d.js');
+const index = require('./index-f01eba32.js');
+
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.pam_account_balance_modal = pamAccountBalanceModal.PamAccountBalanceModal;
+exports.ui_skeleton = UiSkeleton;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/pam-account-balance-modal/pam-account-balance-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/pam-account-balance-modal/index.js

@@ -0,0 +1 @@
+export { PamAccountBalanceModal } from './pam-account-balance-modal';

package/dist/collection/components/pam-account-balance-modal/pam-account-balance-modal.css

@@ -0,0 +1,217 @@
+*,
+*::before,
+*::after {
+  font-family: inherit;
+}
+
+:host {
+  font-family: inherit;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+}
+
+p {
+  padding: 0;
+  margin: 0;
+}
+
+.PamAccountBalanceModal {
+  position: relative;
+}
+.PamAccountBalanceModal .LoadingSkeleton {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 60px;
+}
+.PamAccountBalanceModal .BalanceValue {
+  font-size: 14px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font: inherit;
+  color: inherit;
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.PamAccountBalanceModal .BalanceValue svg {
+  width: 16px;
+  fill: var(--emw--color-black, #000000);
+}
+.PamAccountBalanceModal .BalanceValue span {
+  padding-left: 5px;
+}
+.PamAccountBalanceModal .BalanceValue .TriangleActive, .PamAccountBalanceModal .BalanceValue .TriangleInactive {
+  display: block;
+  margin: 0 3px;
+  transition: all 0.2s;
+}
+.PamAccountBalanceModal .BalanceValue .TriangleActive:hover, .PamAccountBalanceModal .BalanceValue .TriangleInactive:hover {
+  transform: scale(1.2);
+}
+.PamAccountBalanceModal .BalanceValue .TriangleActive svg, .PamAccountBalanceModal .BalanceValue .TriangleInactive svg {
+  margin: 2px 0px;
+}
+.PamAccountBalanceModal .BalanceValue .TriangleActive {
+  transform: scale(1.1) rotateX(180deg) translateY(3px);
+}
+.PamAccountBalanceModal .BalanceValue .TriangleActive:hover {
+  transform: scale(1.1) rotateX(180deg) translateY(3px);
+}
+@media only screen and (max-width: 360px) {
+  .PamAccountBalanceModal .BalanceValue {
+    font-size: 12px;
+  }
+  .PamAccountBalanceModal .BalanceValue svg {
+    width: 12px;
+  }
+}
+.PamAccountBalanceModal .BalanceModalWrapper {
+  background: linear-gradient(90deg, rgb(42, 79, 55) 0%, rgb(0, 61, 92) 100%);
+  position: absolute;
+  top: 40px;
+  padding: 10px;
+  transform: translateX(-45%);
+  box-shadow: 0px 30px 30px var(--emw--header-color-primary, var(--emw--color-primary, #22B04E));
+  border-radius: 5px;
+  z-index: 17;
+  box-shadow: 0px 5px 20px 0px #191919;
+  transition: all 0.2s ease-in;
+  opacity: 0;
+}
+.PamAccountBalanceModal .BalanceModalWrapper:before {
+  content: "";
+  background: linear-gradient(90deg, rgb(42, 79, 55) 0%, rgb(0, 61, 92) 100%);
+  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  width: 25px;
+  height: 10px;
+  z-index: 1;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModalClose {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  z-index: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: transparent;
+  border: none;
+  font: inherit;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModalClose:before {
+  content: "";
+  background: var(--emw--color-secondary, #FFFFFF);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 20px;
+  height: 2px;
+  transform: rotate(45deg);
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModalClose:after {
+  content: "";
+  background: var(--emw--color-secondary, #FFFFFF);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 20px;
+  height: 2px;
+  transform: rotate(-45deg);
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModalClose:hover {
+  transform: scale(1.1);
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal {
+  transition: all 0.2s ease-in;
+  width: 270px;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalHeader .BalanceModalTitle {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--emw--header-contrast, var(--emw--color-contrast, #FFFFFF));
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalBody .BalanceModalRowBoth {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--emw--color-gray-100, #E6E6E6);
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalBody .BalanceModalRowBoth:last-child {
+  border-bottom: none;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalBody .BalanceModalRowBoth .BalanceModalRowLine {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalBody .BalanceModalRowBoth .BalanceModalText {
+  color: var(--emw--header-contrast, var(--emw--color-contrast, #FFFFFF));
+  font-size: 14px;
+  text-transform: capitalize;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalBody .BalanceModalRowBoth .BalanceModalValue {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--emw--header-contrast, var(--emw--color-contrast, #FFFFFF));
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalFooter {
+  display: flex;
+  align-items: center;
+  padding: 20px 0 10px;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalFooter .BalanceModalAction {
+  background: var(--emw--color-primary, #22B04E);
+  font-size: 12px;
+  color: var(--emw--color-white, #FFFFFF);
+  text-transform: uppercase;
+  width: 100%;
+  border-radius: 30px;
+  border: none;
+  padding: 10px 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in;
+  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalFooter .BalanceModalAction:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--emw--color-primary, #22B04E);
+  box-shadow: 0px 0px 0px 2px inset var(--emw--color-primary, #22B04E);
+  font-size: 14px;
+}
+.PamAccountBalanceModal .BalanceModalWrapper .BalanceModal .BalanceModalFooter .BalanceModalAction:active {
+  background: rgba(255, 255, 255, 0.5);
+}
+.PamAccountBalanceModal .BalanceModalWrapper.Open {
+  opacity: 1;
+}
+
+.PamAccountBalanceModalOverlay {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 16;
+  opacity: 0;
+  transition: all 0.2s linear;
+}
+.PamAccountBalanceModalOverlay.Open {
+  opacity: 1;
+}

package/dist/collection/components/pam-account-balance-modal/pam-account-balance-modal.interface.js

@@ -0,0 +1 @@
+export {};