@skhemata/skhemata-crowdfunding-campaign/dist/src/contribution/CardInfo.js

Skhemata Crowdfunding Campaign Web Component. This web component provides crowdfunding campaign functionality (reward/donation based) for a website.

import { __decorate } from "tslib";
/* eslint-disable lit-a11y/anchor-is-valid */
/* eslint-disable lit-a11y/click-events-have-key-events */
/* eslint-disable import/no-extraneous-dependencies */
import { html, css, SkhemataBase, property, } from '@skhemata/skhemata-base';
import { Bulma } from '@skhemata/skhemata-css';
export class CardInfo extends SkhemataBase {
    constructor() {
        super(...arguments);
        //   async firstUpdated() {}
        this.handleNameOnCardChange = (e) => {
            this.nameOnCard = e.target.value;
        };
    }
    static get scopedElements() {
        return {
        // 'menu-component': Menu,
        };
    }
    render() {
        return html `
        <div class="field cardInformaionWrapper">
            
            <h3 class="title">Card Information</h3>

            <div class="reward-section-box">
                <div class="control">
                    <input
                    class="input ${this.nameOnCardError ? "is-danger" : ""}"
                    type="text"
                    placeholder="Name on Card"
                    @change="${this.handleNameOnCardChange}"
                    />
                    ${this.nameOnCardError ? html `<p class="help is-danger">${this.nameOnCardError}</p>` : html ``}
                </div>

                <div class="control trible-box-wrapper">
                    <input
                        class="input"
                        type="text"
                        placeholder="Credit Card Number"
                    />
                    <input
                        class="input"
                        type="text"
                        placeholder="MM/YY"
                    />
                    <input
                        class="input"
                        type="text"
                        placeholder="CVC"
                    />
                </div>
            </div>
        </div>
    `;
    }
}
CardInfo.styles = [
    Bulma,
    css `
        .cardInformaionWrapper {
            margin-top: 3rem;
        }

        .trible-box-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 1rem;
        }
    
    `,
];
__decorate([
    property({ type: Object })
], CardInfo.prototype, "campaign", void 0);
__decorate([
    property({ type: String, attribute: 'nameOnCard' })
], CardInfo.prototype, "nameOnCard", void 0);
__decorate([
    property({ type: String, attribute: 'nameOnCardError' })
], CardInfo.prototype, "nameOnCardError", void 0);
//# sourceMappingURL=CardInfo.js.map