/* eslint-disable lit-a11y/anchor-is-valid */ /* eslint-disable lit-a11y/click-events-have-key-events */ /* eslint-disable import/no-extraneous-dependencies */ import { CSSResult, html, css, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { Bulma } from '@skhemata/skhemata-css'; import { GlobalStyles } from '../styles/global'; export class CardReward extends LitElement { static styles = [ Bulma, GlobalStyles, css` /* .cardReward { max-width: 300px; margin: 0 auto; } */ .cardReward header { cursor: pointer; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type='number'] { -moz-appearance: textfield; } .pledge-date { margin: 1rem 0; } .campaign-reward-wrapper { position: relative; border: 1px solid #e5e5e5; border-radius: 9px; overflow: hidden; } .campaign-reward-hover-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(141, 71%, 48%, 0.75); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease-in-out; /* display: none; */ } .campaign-reward-wrapper:hover .campaign-reward-hover-background { opacity: 1; /* display: flex; */ } .campaign-reward-container { gap: 1.5rem; } .campaign-reward-body { padding: 1rem 1.5rem; } .card-header { position: relative; } .dropdown-icon { position: absolute; right: 0.5rem; } .dropdown-icon.is-active { transform: rotate(180deg); } `, ]; @property({ type: Object, attribute: 'currencySymbols' }) currencySymbols?: any = { ALL: 'L', AFN: '؋', ARS: '$', AWG: 'ƒ', AUD: '$', AZN: '₼', BSD: '$', BBD: '$', BYR: 'p.', BZD: 'BZ$', BMD: '$', BOB: 'Bs.', BAM: 'KM', BWP: 'P', BGN: 'лв', BRL: 'R$', BND: '$', BIF: 'FBu', KHR: '៛', CAD: '$', KYD: '$', CLP: '$', CNY: '¥', COP: '$', CRC: '₡', HRK: 'kn', CUP: '₱', CZK: 'Kč', DKK: 'kr', DOP: 'RD$', XCD: '$', EGP: '£', SVC: '₡', EEK: 'kr', EUR: '€', FKP: '£', FJD: '$', GHC: 'GH₵', GIP: '£', GTQ: 'Q', GGP: '£', GYD: '$', HNL: 'L', HKD: '$', HUF: 'Ft', ISK: 'kr', INR: '₹', IDR: 'Rp', IRR: '﷼', IMP: '£', ILS: '₪', JMD: '$', JPY: '¥', JEP: '£', KES: 'KSh', KZT: '₸', KPW: '₩', KRW: '₩', KGS: 'лв', LAK: '₭', LVL: 'Ls', LBP: 'ل.ل', LRD: '$', LTL: 'Lt', MKD: 'ден', MYR: 'RM', MUR: '₨', MXN: '$', MNT: '₮', MZN: 'MT', NAD: '$', NPR: '₨', ANG: 'ƒ', NZD: '$', NIO: 'C$', NGN: '₦', NOK: 'kr', OMR: 'ر.ع.', PKR: '₨', PAB: 'B/.', PYG: '₲', PEN: 'S/.', PHP: '₱', PLN: 'zł', QAR: 'ر.ق', RON: 'lei', RUB: '₽', RMB: '￥', SHP: '£', SAR: 'ر.س', RSD: 'Дин.', SCR: '₨', SGD: '$', SBD: '$', SOS: 'Sh.So.', ZAR: 'R', LKR: 'Rs', SEK: 'kr', CHF: 'Fr.', SRD: '$', SYP: '£', TZS: 'TSh', TWD: 'NT$', THB: '฿', TTD: 'TT$', TRY: '₺', TRL: '₺', TVD: '$', UGX: 'USh', UAH: '₴', GBP: '£', USD: '$', UYU: '$U', UZS: "so'm", VEF: 'Bs.', VND: '₫', YER: '﷼', ZWD: 'Z$', }; @property({ type: Object }) pledge: any; @property({ type: Object }) campaign?: any; @property({ type: Boolean }) openStatus: boolean | undefined; @property({ type: Function }) handleContribute!: () => void; @property({ type: Function }) handleContributionAmount!: () => void; @property({ type: Number }) contributionAmount = 0; @property({ type: Function }) handleChosenReward!: (reward: string, pledge: object) => void; async firstUpdated() { this.contributionAmount = this.pledge.amount; } render() { return html`

${this.currencySymbols[ this.campaign?.currencies[0].code_iso4217_alpha ]} ${this.pledge.amount} ${this.campaign?.currencies[0].code_iso4217_alpha}

${this.pledge.name}

${this.pledge.description}

${this.pledge.total_backers} ${this.pledge.total_backers === 1 ? 'backer' : 'backers'}
${this.handleChosenReward === undefined ? html`` : html`
`}
`; } }