/*************************************************************************
*
* VLOCITY, INC. CONFIDENTIAL
* __________________
*
* [2014] - [2020] Vlocity, Inc.
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Vlocity, Inc. and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Vlocity, Inc. and its suppliers and may be
* covered by U.S. and Foreign Patents, patents in process, and are
* protected by trade secret or copyright law. Dissemination of this
* information and reproduction, modification or reverse-engineering
* of this material, is prohibited unless prior written permission
* is obtained from Vlocity, Inc.
*
*/
import { LitElement, html } from "lit-element";
import assetDetailsTemplate from "./vlocity-dc-asset-details.template";
import { digitalCommerceSDKInstance } from "../vlocity-dc-utils/vlocity-dc-sdk-utils";
import VlocityDCBaseComponent from "../vlocity-dc-base-component/vlocity-dc-base-component";
import { getPromotions } from "../vlocity-dc-utils/vlocity-dc-common-util";
/**
* @class VlocityDCAssetDetails
* @extends {LitElement} Extend the LitElement base class
*
* @classdesc
* vlocity-dc-asset-details is the component for rendering each asset.
* @property {Object} asset - object containing an asset.
*
* @example
* Sample Usage -
*
* Include the component in your template by adding vlocity-dc-asset-details custom tag
*
* <vlocity-dc-asset-details .asset="${asset}"></vlocity-dc-asset-details >
*
* | Attribute Name | Type Expected | Required |
* |-------------------|---------------------------------------------------------------------------------|----------|
* | asset | It expects an object which contains a current asset from assets list | Yes |
*
* KEY INFO -
*
* events fired : "vlocity-dc-toggle-asset"
*
* events registered : none
*
* Dependency - vlocity-dc-asset-details is a child component of vlocity-dc-assets-list.
* It is used inside vlocity-dc-toggle-asset for each iteration of assets.
*
*
* | Parent Component | Expected Children Components |
* |--------------------------|------------------------------|
* | vlocity-dc-assets-list | vlocity-dc-asset-attributes |
* | | vlocity-dc-asset-attributes |
*
* Sample with slots -
*
* <vlocity-dc-asset-details >
* <span slot="{slot_name}">
* Custom HTML elements goes here
* </span>
* </vlocity-dc-asset-details >
*
* List of available slots -
*
* | Slot names | Dynamic | Description | Impact |
* |-------------------------- |-------------|---------------------------------|----------------------------------------|
* | dc-asset-name | - | Wrapper for asset name | Replaces asset name |
* | dc-asset-header | - | Wrapper for asset header | Replaces asset header |
* | dc-loading-toggle-icon | - | Wrapper for toggle icon | Replaces toggle icon |
* | dc-asset-details | - | Wrapper for each asset details | Replaces each asset detail view |
* | dc-asset-attributes | - | Wrapper for asset attributes | Replaces asset attributes |
*
*
*/
export default class VlocityDCAssetDetails extends VlocityDCBaseComponent {
constructor() {
super(); // always call super() first in the ctor.
this.root = this;
this.template = assetDetailsTemplate;
this.digitalCommerceSDK =
digitalCommerceSDKInstance() &&
digitalCommerceSDKInstance().digitalCommerce;
this.digitalCommerceTranslation =
digitalCommerceSDKInstance() &&
digitalCommerceSDKInstance().digitalCommerceTranslation;
this.allAddons = [];
this.selectedAssets = [];
}
/**
* Properties that will be available in the template binding
* @readonly
* @memberof VlocityDCAssetDetails
* @static
*/
static get properties() {
return {
asset: Object,
isDetailsOpen: Boolean
};
}
connectedCallback() {
super.connectedCallback();
}
toggleDetails() {
this.isDetailsOpen = !this.isDetailsOpen;
}
/**
* Method to handle asset toggle selection
* @memberof VlocityDCAssetDetails
*/
toggleCheckbox(e, id, catalogCode) {
this.digitalCommerceSDK &&
this.digitalCommerceSDK.fire("vlocity-dc-toggle-asset", "result", {
assetId: id,
checked: e.currentTarget.checked,
catalogCode: catalogCode
});
}
/**
* Method to fetch promotion string from getPromotions utility
* @memberof VlocityDCAssetDetails
*/
getPromotions() {
return getPromotions(this.asset);
}
render() {
return this.template(this);
}
}
customElements.define("vlocity-dc-asset-details", VlocityDCAssetDetails);