collective-webcomponents
Version:
Stencil Component Starter
71 lines (70 loc) • 2.96 kB
JavaScript
export class CollectiveProductCell {
constructor() {
this.selected = false;
}
render() {
return (h("div", { style: {
backgroundColor: "white",
width: "180px",
height: "300px",
marginRight: "10px",
marginBottom: "10px",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
padding: "10px",
cursor: "pointer"
} },
h("div", { style: {
flexGrow: "1",
backgroundImage: `url(${this.product.image.sizes.XLarge.url})`,
backgroundPosition: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
marginBottom: "10px"
} }),
h("div", { class: "name", style: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
fontSize: "14px"
} }, this.product.brandedName),
h("div", { class: "price", style: {
display: "flex",
marginBottom: "10px",
fontWeight: "bold",
fontSize: "15px",
marginTop: "10px"
} },
this.product.salePriceLabel && (h("div", { class: "sale-price", style: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
marginRight: "5px"
} }, this.product.salePriceLabel)),
h("div", { class: "full-price", style: Object.assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, (this.product.salePriceLabel
? { opacity: "0.5", textDecoration: "line-through" }
: {})) }, this.product.priceLabel)),
h("div", { class: "commission", style: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
fontSize: "12px",
display: "flex"
} },
h("div", { style: { color: "#757575" } }, "Est. Commission:"),
h("div", { style: { fontWeight: "bold", marginLeft: "5px" } }, this.product.commissionLabel))));
}
static get is() { return "collective-product-cell"; }
static get properties() { return {
"product": {
"type": "Any",
"attr": "product"
},
"selected": {
"type": Boolean,
"attr": "selected"
}
}; }
static get style() { return "/**style-placeholder:collective-product-cell:**/"; }
}