@postnord/web-components
Version:
PostNord Web Components
206 lines (205 loc) • 7.15 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { white } from "pn-design-assets/pn-assets/colors.js";
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: '595a518ecfd98d14a13d195314b71b63441419fb', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: '24e37496e8982209d3b380b8d63c300a0dc16496', class: "progress-line" }), h("div", { key: '4cbbbf6899c666658b4bd407fa0bc6a42c1e1ae2', class: "info-container" }, h("slot", { key: 'd4e48f113e6bd97c563cb7f4ba6b9e883be6879c' }), this.name), h("div", { key: '7151daa3d3ef8b27817337551e8b63b5f9b5c2d8', 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,
"attribute": "active-step",
"reflect": false
},
"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,
"attribute": "index",
"reflect": false
},
"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,
"attribute": "name",
"reflect": false
},
"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,
"attribute": "checked",
"reflect": false,
"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,
"attribute": "active",
"reflect": false
}
};
}
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": {}
}
}];
}
}
//# sourceMappingURL=pn-progress-indicator-step.js.map