@paraboly/pwc-simple-card
Version:
Plug & Play Simple Card View for Web by Paraboly via StencilJS
21 lines (15 loc) • 3.27 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-c92e5074.js');
const img = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIGNsYXNzPSIiPjxnPjxnPgoJPGc+CgkJPHBhdGggZD0iTTM5Ni44LDE0MS4zMzNjLTMwLjcyLDAtNTkuNzMzLDExLjk0Ny04MC41MzMsMzIuNzQ3TDI1NiwyMjcuNDEzbC0wLjEwNy0wLjEwN2wtMzIuMzIsMjguNDhsMC4yMTMsMC4yMTNsLTU3LjQ5Myw1MC45ODcgICAgQzE1Mi42NCwzMjAuNTMzLDEzNC41MDcsMzI4LDExNS4yLDMyOGMtMzkuODkzLDAtNzIuMzItMzIuMzItNzIuMzItNzJzMzIuNDI3LTcyLDcyLjMyLTcyYzE5LjMwNywwLDM3LjQ0LDcuNDY3LDUyLjA1MywyMS45NzMgICAgbDI0LjIxMywyMS40NGwzMi4yMTMtMjguNDhsLTI2Ljk4Ny0yMy44OTNjLTIxLjc2LTIxLjY1My01MC42NjctMzMuNi04MS40OTMtMzMuNkM1MS42MjcsMTQxLjMzMywwLDE5Mi43NDcsMCwyNTYgICAgczUxLjYyNywxMTQuNjY3LDExNS4yLDExNC42NjdjMzAuNzIsMCw1OS42MjctMTEuOTQ3LDgwLjUzMy0zMi42NEwyNTYsMjg0LjU4N2wwLjEwNywwLjEwN2wzMi4yMTMtMjguNTg3TDI4OC4yMTMsMjU2ICAgIGw1Ny40OTMtNTAuODhDMzU5LjM2LDE5MS40NjcsMzc3LjQ5MywxODQsMzk2LjgsMTg0YzM5Ljg5MywwLDcyLjMyLDMyLjMyLDcyLjMyLDcycy0zMi40MjcsNzItNzIuMzIsNzIgICAgYy0xOS4zMDcsMC0zNy40NC03LjQ2Ny01Mi4wNTMtMjEuODY3bC0yNC4yMTMtMjEuNDRMMjg4LjMyLDMxMy4yOGwyNi45ODcsMjMuODkzYzIxLjc2LDIxLjY1Myw1MC42NjcsMzMuNDkzLDgxLjM4NywzMy40OTMgICAgQzQ2MC4zNzMsMzcwLjY2Nyw1MTIsMzE5LjI1Myw1MTIsMjU2UzQ2MC4zNzMsMTQxLjMzMywzOTYuOCwxNDEuMzMzeiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iIzJFNTM4MCIvPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4K';
const PwcSimpleCard = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.source = img;
}
render() {
return (core.h("div", { class: "card-container" }, core.h("div", { class: "img-container" }, core.h("img", { class: "img-style", src: this.source })), core.h("div", { class: "text-container" }, core.h("div", { class: "title-style" }, this.cardTitle), core.h("div", { class: "details-style" }, this.cardDetails))));
}
static get style() { return ".card-container {\n background-color: #fdfdfd;\n border-radius: 12px;\n -webkit-box-shadow: 2px 4px 28px -8px rgba(0, 0, 0, 0.15);\n box-shadow: 2px 4px 28px -8px rgba(0, 0, 0, 0.15);\n display: -ms-flexbox;\n display: flex;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n max-width: 250px;\n -ms-flex-align: center;\n align-items: center;\n padding: 12px;\n}\n\n.img-container {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #f1f8ff;\n border-radius: 12px;\n}\n\n.img-style {\n width: 35px;\n padding: 8px;\n}\n\n.text-container {\n padding-left: 12px;\n}\n\n.title-style {\n font-size: 15px;\n font-weight: 600;\n color: #5b6575;\n text-align: center;\n font-family: sans-serif;\n margin-bottom: 5px;\n}\n\n.details-style {\n font-size: 13px;\n text-align: center;\n color: #8a8d94;\n}"; }
};
exports.pwc_simple_card = PwcSimpleCard;