@postnord/web-components
Version:
PostNord Web Components
100 lines (99 loc) • 3.27 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h } from "@stencil/core";
/**
* @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 PnProgressIndicator {
hostElement;
/** Takes the index of the active step */
activeStep = 0;
/** This will emit when progress is changed and is the value you want to bind to your VM state */
progresschange;
setActiveStepHandler({ detail }) {
this.activeStep = detail;
this.progresschange.emit(this.activeStep);
}
componentWillLoad() {
this.passPropsToChildren();
}
componentDidUpdate() {
this.passPropsToChildren();
}
passPropsToChildren() {
const children = Array.from(this.hostElement.querySelectorAll('pn-progress-indicator-step'));
children.forEach((child, i) => {
child.activeStep = this.activeStep;
child.index = i;
});
}
render() {
return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
}
static get is() { return "pn-progress-indicator"; }
static get originalStyleUrls() {
return {
"$": ["pn-progress-indicator.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-progress-indicator.css"]
};
}
static get properties() {
return {
"activeStep": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Takes the index of the active step"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "active-step",
"defaultValue": "0"
}
};
}
static get events() {
return [{
"method": "progresschange",
"name": "progresschange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This will emit when progress is changed and is the value you want to bind to your VM state"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
static get listeners() {
return [{
"name": "setactivestep",
"method": "setActiveStepHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}