{"version":3,"file":"chord-card.2de9d3da.js","sources":["../../src/script/components/chord-card.ts"],"sourcesContent":["import { css, CSSResult, CSSResultGroup, html } from 'lit';\r\nimport { property, customElement } from 'lit/decorators.js';\r\nimport { BootstrapBase } from '../common/bootstrap-base';\r\nimport { SizeMax } from '../common/constants';\r\nimport { ChordSheet } from '../models/interfaces';\r\n\r\n@customElement('chord-card')\r\nexport class ChordCard extends BootstrapBase {\r\n\r\n    @property({ type: Object }) chord: ChordSheet | null = null;\r\n    @property({ type: Boolean, attribute: \"new-window\" }) newWindow = false;\r\n\r\n    static get styles(): CSSResultGroup {\r\n        const localStyles = css`\r\n            .chord-card {\r\n                text-align: left;\r\n                margin: 10px 30px;\r\n                padding: 10px;\r\n                float: left;\r\n                width: 18em;\r\n                cursor: pointer;\r\n                transition: all linear 0.2s;\r\n                justify-self: center;\r\n            }\r\n\r\n            @media(max-width: ${SizeMax.Xs}px) {\r\n                .chord-card {\r\n                    margin: 10px 20px;\r\n                }\r\n            }\r\n\r\n            .chord-card:hover {\r\n                background-color: rgba(0, 0, 0, .03);\r\n                box-shadow: 0 0 10px 0 silver;\r\n            }\r\n\r\n            .artist {\r\n                font-size: 16px;\r\n                color: #0B0974;\r\n                text-decoration: none;\r\n            }\r\n\r\n            .song-name,\r\n            .hebrew-song-name {\r\n                font-size: 26px;\r\n                color: Brown;\r\n                text-decoration: none;\r\n                text-shadow: 1px 1px 1px silver;\r\n                font-family: var(--title-font);\r\n            }\r\n\r\n            .hebrew-song-name {\r\n                direction: rtl;\r\n                text-align: right;\r\n                padding-left: 10px;\r\n            }\r\n\r\n            label {\r\n                color: black;\r\n            }\r\n        `;\r\n\r\n        return [\r\n            super.styles as CSSResult,\r\n            localStyles\r\n        ];\r\n    }\r\n\r\n    constructor() {\r\n        super();\r\n    }\r\n\r\n    render() {\r\n        if (!this.chord) {\r\n            return html``;\r\n        }\r\n\r\n        const target = this.newWindow ? \"_blank\" : \"_self\";\r\n\r\n        return html`\r\n            <div class=\"card chord-card\">\r\n                <div class=\"card-body\">\r\n                    <div class=\"card-title d-flex justify-content-between\">\r\n                        <a class=\"song-name\" href=\"${this.chord.id}\" target=\"${target}\">\r\n                            ${this.chord.song}\r\n                        </a>\r\n                        ${this.renderHebrewName()}\r\n                    </div>\r\n                    <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                        <a class=\"artist\" href=\"/artist/${encodeURIComponent(this.chord.artist || this.chord.authors[0])}\" target=\"${target}\">\r\n                            ${this.chord.artist || this.chord.authors.join(\", \")}\r\n                        </a>\r\n                    </h6>\r\n                    ${this.renderKey()}\r\n                </div>\r\n            </div>\r\n        `;\r\n    }\r\n\r\n    renderHebrewName() {\r\n        if (this.chord && this.chord.hebrewSongName) {\r\n            return html`\r\n                <a class=\"hebrew-song-name\" href=\"/${this.chord.id}\" lang=\"he\">\r\n                    ${this.chord.hebrewSongName}\r\n                </a>`\r\n        }\r\n\r\n        return html``;\r\n    }\r\n\r\n    renderKey() {\r\n        if (this.chord && this.chord.key) {\r\n            return html`\r\n                <h6 class=\"card-subtitle mb-2 text-muted key\">\r\n                    <span>Key of</span>\r\n                    ${this.chord.key}\r\n                </h6>`;\r\n        }\r\n\r\n        return html``;\r\n    }\r\n}\r\n"],"names":["css","html","property","customElement"],"mappings":"2QAOO,GAAA,GAAA,aAAwB,EAAc,CA6DzC,aAAc,CACJ,QA5D6C,KAAA,MAAA,KACW,KAAA,UAAA,EA4DlE,WA1DW,SAAyB,CAChC,KAAM,GAAcA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gCAYI,EAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAqCzB,MAAA,CACH,MAAM,OACN,CAAA,CAER,CAMA,QAAS,CACD,GAAA,CAAC,KAAK,MACC,MAAAC,KAGL,KAAA,GAAS,KAAK,UAAY,SAAW,QAEpC,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA,qDAIsC,KAAK,MAAM,eAAe;AAAA,8BACjD,KAAK,MAAM;AAAA;AAAA,0BAEf,KAAK;;;0DAG2B,mBAAmB,KAAK,MAAM,QAAU,KAAK,MAAM,QAAQ,EAAE,cAAc;AAAA,8BACvG,KAAK,MAAM,QAAU,KAAK,MAAM,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,sBAGzD,KAAK;;;SAIvB,CAEA,kBAAmB,CACf,MAAI,MAAK,OAAS,KAAK,MAAM,eAClBA;AAAAA,qDACkC,KAAK,MAAM;AAAA,sBAC1C,KAAK,MAAM;AAAA,sBAIlBA,GACX,CAEA,WAAY,CACR,MAAI,MAAK,OAAS,KAAK,MAAM,IAClBA;AAAAA;AAAAA;AAAAA,sBAGG,KAAK,MAAM;AAAA,uBAIlBA,GACX,CACJ,EAhHgC,EAAA,CAA5BC,EAAU,CAAE,KAAM,OAAQ,CAAA,EAAE,EAAA,UAAA,QAAA,CAAA,EAC0B,EAAA,CAAtDA,EAAU,CAAE,KAAM,QAAS,UAAW,aAAc,CAAA,EAAE,EAAA,UAAA,YAAA,CAAA,EAHnD,EAAA,EAAA,CADNC,EAAc,YAAY,CAAA,EACpB,CAAA"}