/*************************************************************************
*
* 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 ProgressIndicatorTemplate from "../vlocity-dc-progress-indicator/vlocity-dc-progress-indicator-template";
import { digitalCommerceSDKInstance } from "../vlocity-dc-utils/vlocity-dc-sdk-utils";
import "../vlocity-dc-utils/vlocity-dc-typedefs";
import VlocityDCBaseComponent from "../vlocity-dc-base-component/vlocity-dc-base-component";
/**
* @class VlocityDCProgressIndicator
* @extends {VlocityDCBaseComponent} Extend the VlocityDCBaseComponent base class
*
* @classdesc
* vlocity-dc-progress-indicator is a web component used to indicate step progress.<br/><br/>
*
* <b>VlocityDCProgressIndicator methods</b> <br/>
* 1. getProgressIconCSS - Method to get progress icon css dynamically.<br/>
* 2. getProgressBarCSS - Method to get progress bar css dynamically.<br/>
*
* <b>Features</b> <br>
* 1. Indicate steps progress. <br/>
*
* @example
* Sample Usage -
*
* Include the component in your template by adding <vlocity-dc-progress-indicator> custom tag
* <vlocity-dc-progress-indicator checkOutSteps={} stepsCompleted="1"></vlocity-dc-progress-indicator>
*
*
*--------------------------------------------------------------------------------------------------------------------------------------
* KEY INFO -
*
* events fired : none
*
* events registered : none
*
* Dependency - vlocity-dc-progress-indicator is an independent component and has no dependency on parent component.
*
* | Parent Component | Expected Child Component |
* |------------------|---------------------------|
* | none | none |
*
*
* Sample with slots -
*
* <vlocity-dc-progress-indicator>
* <span slot="{slot_name}">
* Custom HTML elements goes here
* </span>
* </vlocity-dc-progress-indicator>
*
* List of available slots -
*
* | Slot names | Dynamic | Description | Impact |
* |---------------------------------------|-------------|---------------------------------------------------------|
* | dc-each-step | - | Wrapper for each step | Replaces each step li tag |
*
*/
export default class VlocityDCProgressIndicator extends VlocityDCBaseComponent {
constructor() {
super(); // always call super() first in the constructor.
this.template = ProgressIndicatorTemplate;
this.digitalCommerceSDK = digitalCommerceSDKInstance().digitalCommerce;
this.digitalCommerceTranslation = digitalCommerceSDKInstance().digitalCommerceTranslation;
this._checkOutSteps = null;
this._stepsCompleted = 0;
this.currentIndex = 0;
this.icons;
}
set checkOutSteps(val) {
if (val) {
this.currentIndex = 0;
this._checkOutSteps = val;
this.requestUpdate();
}
}
get checkOutSteps() {
return this._checkOutSteps;
}
set stepsCompleted(val) {
if (val) {
this._stepsCompleted = val;
this.requestUpdate();
}
}
get stepsCompleted() {
return this._stepsCompleted;
}
/**
* Properties that will be available in the binding system
* @readonly
* @memberof VlocityDCProgressIndicator
* @static
* @property {Boolean} stepsCompleted total number of steps completed.
* @property {Object} checkOutSteps checkout steps progress status.
*/
static get properties() {
return {
stepsCompleted: Number,
checkOutSteps: Object
};
}
connectedCallback() {
super.connectedCallback();
}
render() {
return this.template(this);
}
/**
* Method to return progress bar css styles dynamically.
* @memberof VlocityDCProgressIndicator
*/
get getProgressBarCSS() {
return "width: " + this.stepsCompleted * 33 + "%;";
}
}
/**
* Register vlocity-dc-progress-indicator with the browser.
*/
customElements.define(
"vlocity-dc-progress-indicator",
VlocityDCProgressIndicator
);