collective-webcomponents/dist/collection/components/collective-product-cell/collective-widget-product-cell.js

Stencil Component Starter

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
export class CollectiveWidgetProductCell {
    constructor() {
        this.showSalePrice = true;
        this.imageSize = 200;
        this.showBrand = true;
        this.showInfoOnHover = false;
    }
    productChanged() {
        this.productObject = this.product;
    }
    fetchProductById() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this.productId) {
                const product = yield (yield fetch(`https://api.shopstyle.com/api/v2/products/${this.productId}?pid=shopstyle`)).json();
                this.productObject = product;
            }
        });
    }
    componentWillLoad() {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.fetchProductById();
        });
    }
    render() {
        const product = this.productObject;
        return (h("div", { style: {
                backgroundColor: 'white',
                width: this.imageSize + 'px',
                height: this.imageSize + 100 + 'px',
                marginRight: '10px',
                marginBottom: '10px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                padding: '10px',
                cursor: 'pointer',
            } }, product && (h("div", { style: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                flexGrow: '1',
            } },
            h("div", { style: {
                    flexGrow: '1',
                    backgroundImage: `url(${product.image.sizes.XLarge.url})`,
                    backgroundPosition: 'center',
                    backgroundSize: 'contain',
                    backgroundRepeat: 'no-repeat',
                    marginBottom: '10px',
                } }),
            !this.showInfoOnHover && (h("div", { class: "info" },
                h("div", { class: "name", style: {
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        fontSize: '14px',
                    } }, this.showBrand && product.brandedName),
                this.showPrice && (h("div", { class: "price", style: {
                        display: 'flex',
                        marginBottom: '10px',
                        fontWeight: 'bold',
                        fontSize: '15px',
                    } },
                    product.salePriceLabel && (h("div", { class: "sale-price", style: {
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            marginRight: '5px',
                        } }, product.salePriceLabel)),
                    h("div", { class: "full-price", style: Object.assign({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, (product.salePriceLabel
                            ? { opacity: '0.5', textDecoration: 'line-through' }
                            : {})) }, product.priceLabel)))))))));
    }
    static get is() { return "collective-widget-product-cell"; }
    static get properties() { return {
        "imageSize": {
            "type": Number,
            "attr": "image-size"
        },
        "product": {
            "type": "Any",
            "attr": "product",
            "watchCallbacks": ["productChanged"]
        },
        "productId": {
            "type": "Any",
            "attr": "product-id",
            "watchCallbacks": ["fetchProductById"]
        },
        "productObject": {
            "state": true
        },
        "showBrand": {
            "type": Boolean,
            "attr": "show-brand"
        },
        "showInfoOnHover": {
            "type": Boolean,
            "attr": "show-info-on-hover"
        },
        "showPrice": {
            "type": Boolean,
            "attr": "show-price"
        },
        "showSalePrice": {
            "type": Boolean,
            "attr": "show-sale-price"
        }
    }; }
    static get style() { return "/**style-placeholder:collective-widget-product-cell:**/"; }
}