@postnord/web-components
Version:
PostNord Web Components
209 lines (208 loc) • 7.35 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { white } from "pn-design-assets/pn-assets/colors.js";
/**
* @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
*/
export class PnProgressIndicatorStep {
activated;
done;
/** Set by the parent component. Do not use manually. @hide true */
activeStep;
/** Set by the parent component. Do not use manually. @hide true */
index;
/** The step name. */
name;
/** Set the step as checked, meaning a white check mark will appear. */
checked = false;
/** Set by the parent component. Do not use manually. @hide true */
active;
setactivestep;
setActiveStepHandler() {
if (this.done || this.activated) {
this.setactivestep.emit(this.index);
}
}
componentWillLoad() {
this.checkStatus();
}
componentDidUpdate() {
this.checkStatus();
}
checkStatus() {
if (!this.done) {
this.done = this.checked || this.activeStep > this.index;
}
if (this.active === 'yes') {
this.activated = true;
}
else if (this.active === 'no') {
this.activated = false;
this.done = false;
}
else if (!this.activated) {
this.activated = this.activeStep >= this.index;
}
}
getClassNames() {
let className = 'pn-progress-indicator-step';
if (this.done || this.checked)
className += ' done';
if (this.activated)
className += ' activated';
if (this.activeStep === this.index)
className += ' active';
return className;
}
render() {
return (h(Host, { key: '8e3e6d57379a0e7fbc4fa481ed58f320b0a7e270', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'f07ace31e400c93a84043d4402bff452b2f3a5ea', class: "progress-line" }), h("div", { key: '1b7b7fcdbcf11091b66a29f936cb144cb8d7b948', class: "info-container" }, h("slot", { key: '9e075b50e5c16f7313d0442c889cd7ccbc2cbac9' }), this.name), h("div", { key: '8240501b137f38915d3a42139e340593a1975977', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
}
static get is() { return "pn-progress-indicator-step"; }
static get originalStyleUrls() {
return {
"$": ["pn-progress-indicator-step.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-progress-indicator-step.css"]
};
}
static get properties() {
return {
"activeStep": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Set by the parent component. Do not use manually."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "active-step"
},
"index": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Set by the parent component. Do not use manually."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "index"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The step name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the step as checked, meaning a white check mark will appear."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"active": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'yes' | 'no'",
"resolved": "\"no\" | \"yes\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Set by the parent component. Do not use manually."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "active"
}
};
}
static get states() {
return {
"activated": {},
"done": {}
};
}
static get events() {
return [{
"method": "setactivestep",
"name": "setactivestep",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
}