@postnord/web-components
Version:
PostNord Web Components
193 lines (192 loc) • 6.66 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 {
constructor() {
this.activated = undefined;
this.done = undefined;
this.activeStep = undefined;
this.index = undefined;
this.name = undefined;
this.checked = false;
this.active = undefined;
}
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: '72cc83f88a80acff2dc2d379abddf32d1f7100a8', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: '39f44c9b4e625898d16278575894ed8f01261a89', class: "progress-line" }), h("div", { key: '17858a1e590a364b82db40088f0017a5ddfde37e', class: "info-container" }, h("slot", { key: 'bd8a6e97e2a0aa6e3a0ff0565069792dc4e5cd0e' }), this.name), h("div", { key: '0122ff04b13f3d610a036bd354333e5b4ed4b898', 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."
},
"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."
},
"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."
},
"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."
},
"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."
},
"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