@creit.tech/stellar-wallets-kit/components/selector-modal/stellar-selector-modal.cjs.map

A kit to handle all Stellar Wallets at once

{"version":3,"file":"stellar-selector-modal.cjs","sources":["../../../src/components/selector-modal/stellar-selector-modal.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IModalTheme } from '../../types';\nimport {\n  backdropStyles,\n  modalAnimations,\n  modalDialogBodyStyles,\n  modalHelpSection,\n  modalWalletsSection,\n  modalDialogStyles,\n} from './styles';\n\nexport enum ModalThemeType {\n  DARK = 'DARK',\n  LIGHT = 'LIGHT',\n}\n\nexport const ModalThemes: { [key in ModalThemeType]: IModalTheme } = {\n  DARK: {\n    bgColor: '#161616',\n    textColor: '#a0a0a0',\n    solidTextColor: '#ededed',\n    headerButtonColor: '#707070',\n    dividerColor: 'rgba(255, 255, 255, 0.15)',\n    helpBgColor: '#1c1c1c',\n    notAvailableTextColor: '#a0a0a0',\n    notAvailableBgColor: '#232323',\n    notAvailableBorderColor: '#343434',\n  },\n  LIGHT: {\n    bgColor: '#fcfcfc',\n    textColor: '#181818',\n    solidTextColor: '#000000',\n    headerButtonColor: '#8f8f8f',\n    dividerColor: 'rgba(0, 0, 0, 0.15)',\n    helpBgColor: '#f8f8f8',\n    notAvailableTextColor: '#6f6f6f',\n    notAvailableBgColor: '#f3f3f3',\n    notAvailableBorderColor: '#e2e2e2',\n  },\n};\n\n@customElement('stellar-accounts-selector')\nexport class StellarSelectorModal extends LitElement {\n  static override styles = [\n    css`\n      :host * {\n        box-sizing: border-box;\n      }\n\n      .mb-0 {\n        margin-bottom: 0 !important;\n      }\n    `,\n    modalDialogStyles,\n    modalDialogBodyStyles,\n    modalHelpSection,\n    backdropStyles,\n    modalAnimations,\n    modalWalletsSection,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  showModal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  loadingAccounts: boolean = false;\n\n  @state()\n  closingModal: boolean = false;\n\n  @property({ type: String, reflect: true })\n  modalTitle: string = 'Pick your account';\n\n  @property({ type: String, reflect: true, converter: value => (value ? JSON.parse(value) : []) })\n  accounts: { index: number; publicKey: string }[] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n  }\n\n  async pickAccount(option: { publicKey: string; index: number }): Promise<void> {\n    this.closingModal = true;\n\n    await new Promise(r => setTimeout(r, 280));\n\n    this.dispatchEvent(\n      new CustomEvent('account-selected', {\n        detail: option,\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.closingModal = false;\n  }\n\n  async closeModal(): Promise<void> {\n    this.closingModal = true;\n\n    await new Promise(r => setTimeout(r, 280));\n\n    this.showModal = false;\n\n    this.dispatchEvent(\n      new CustomEvent('account-selector-closed', {\n        detail: new Error('Account selector closed'),\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.closingModal = false;\n  }\n\n  override render() {\n    const loadingIcon = html`\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <style>\n          .spinner_qM83 {\n            animation: spinner_8HQG 1.05s infinite;\n            fill: white;\n          }\n          .spinner_oXPr {\n            animation-delay: 0.1s;\n          }\n          .spinner_ZTLf {\n            animation-delay: 0.2s;\n          }\n          @keyframes spinner_8HQG {\n            0%,\n            57.14% {\n              animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);\n              transform: translate(0);\n            }\n            28.57% {\n              animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);\n              transform: translateY(-6px);\n            }\n            100% {\n              transform: translate(0);\n            }\n          }\n        </style>\n        <circle class=\"spinner_qM83\" cx=\"4\" cy=\"12\" r=\"3\" />\n        <circle class=\"spinner_qM83 spinner_oXPr\" cx=\"12\" cy=\"12\" r=\"3\" />\n        <circle class=\"spinner_qM83 spinner_ZTLf\" cx=\"20\" cy=\"12\" r=\"3\" />\n      </svg>\n    `;\n\n    const accountsList = html`\n      <ul class=\"wallets-body\">\n        ${this.accounts.map(\n          ({ publicKey, index }) => html`\n            <li @click=\"${() => this.pickAccount({ publicKey, index })}\" class=\"wallets-body__item\">\n              <span style=\"margin-right: 1rem;\" class=\"dialog-text-solid\">\n                ${publicKey.slice(0, 4)}....${publicKey.slice(-6)}\n              </span>\n              <span class=\"dialog-text\">(44'/148'/${index}')</span>\n            </li>\n          `\n        )}\n      </ul>\n    `;\n\n    return html`\n      <dialog style=\"\" class=\"dialog-modal ${this.closingModal ? 'closing' : ''}\" .open=${this.showModal}>\n        <section class=\"dialog-modal-body\">\n          <div class=\"dialog-modal-body__wallets\">\n            <section class=\"wallets-container\">\n              <header class=\"wallets-header\">\n                <h2 class=\"wallets-header__modal-title dialog-text-solid\">${this.modalTitle}</h2>\n\n                <button @click=${() => this.closeModal()} class=\"wallets-header__button\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"#000000\"\n                    height=\"20px\"\n                    width=\"20px\"\n                    viewBox=\"0 0 490 490\">\n                    <polygon\n                      points=\"456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490   489.292,457.678 277.331,245.004 489.292,32.337 \" />\n                  </svg>\n                </button>\n              </header>\n\n              ${this.loadingAccounts ? loadingIcon : accountsList}\n            </section>\n          </div>\n        </section>\n      </dialog>\n\n      <div\n        style=\"position: fixed; z-index: 950\"\n        class=\"backdrop ${this.closingModal ? 'closing' : ''}\"\n        @click=${() => this.closeModal()}></div>\n    `;\n  }\n}\n"],"names":["ModalThemeType","StellarSelectorModal","LitElement","css","modalDialogStyles","modalDialogBodyStyles","modalHelpSection","backdropStyles","modalAnimations","modalWalletsSection","html","__decorate","property","state","customElement"],"mappings":"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"}