@postnord/web-components
Version:
PostNord Web Components
144 lines (138 loc) • 6.27 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4, e as en, j as awaitTopbar } from './helpers.js';
const translations = {
STEP: {
da: 'Trin',
en: 'Step',
fi: 'Vaihe',
no: 'Trinn',
sv: 'Steg',
},
};
const pnProgressStepperCss = "pn-progress-stepper .pn-progress-stepper{width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087;position:relative}pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-stepper-label{margin-bottom:0.5em}pn-progress-stepper .pn-progress-stepper-value{height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);transition:width 0.4s cubic-bezier(0.7, 0, 0.3, 1), border-radius 0.4s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.5em 0 0 0.5em;position:absolute;top:-0.0625em;left:-0.0625em}";
const PnProgressStepperStyle0 = pnProgressStepperCss;
const PnProgressStepper$1 = /*@__PURE__*/ proxyCustomElement(class PnProgressStepper extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.progressValue = 0;
this.label = undefined;
this.totalSteps = this.maxStep;
this.currentStep = this.minStep;
this.stepName = undefined;
this.progressStepperId = '';
this.language = null;
}
id = `pn-progress-stepper-${uuidv4()}`;
idLabel = `${this.id}-label`;
idBar = `${this.id}-bar`;
minStep = 1;
maxStep = 7;
get hostElement() { return this; }
validateCurrentStep(step) {
this.validate(step, 'currentStep');
}
validateTotalSteps(step) {
this.validate(step, 'totalSteps');
}
watchLanguage() {
if (this.hasCustomLabel())
return;
this.label = translations.STEP[this.language || en];
}
watchId() {
if (this.progressStepperId) {
this.idLabel = `${this.progressStepperId}-label`;
this.idBar = `${this.progressStepperId}-bar`;
}
else {
this.idLabel = `${this.id}-label`;
this.idBar = `${this.id}-bar`;
}
}
async componentWillLoad() {
this.watchLanguage();
this.watchId();
this.validate(this.currentStep, 'currentStep');
this.validate(this.totalSteps, 'totalSteps');
if (this.language)
return;
await awaitTopbar(this.hostElement);
}
componentWillRender() {
this.calculateProgress();
}
hasCustomLabel() {
if (this.label === undefined)
return false;
return !Object.keys(translations.STEP).find(step => translations.STEP[step] === this.label);
}
validate(step, prop) {
const componentName = this.hostElement.localName;
if (step < this.minStep) {
console.warn(`${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`);
this[prop] = this.minStep;
}
if (prop === 'currentStep' && step > this.totalSteps) {
console.warn(`${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`);
this[prop] = this.totalSteps;
}
if (step > this.maxStep) {
console.warn(`${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`);
this[prop] = this.maxStep;
}
}
calculateProgress() {
try {
this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);
}
catch (error) {
console.error(`${this.hostElement.localName}:`, error.message);
}
}
render() {
return (h(Host, { key: '272d1f3abc78f82d1d047b54e0367067f9487dae' }, h("p", { key: '129f4fb4d853db711d059c0d23d10524b0633394', id: this.idLabel, class: "pn-progress-stepper-label" }, h("span", { key: '8fb640f99c63b4fdaa2eb6eb1a580b0dd590b75c' }, this.label, " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'e6aab7895bbb0b040fec057fdc52a377dcadfae2' }, " - ", this.stepName)), h("div", { key: 'e21d798014f01c850d4a90fc525d4ce03fc76705', class: "pn-progress-stepper", role: "progressbar", "aria-labelledby": this.idLabel, "aria-valuenow": this.progressValue, id: this.idBar, "data-full": this.currentStep === this.totalSteps }, h("div", { key: 'db86f96f1e1ab1f7e62fb0b2b2b1dfee24647983', class: "pn-progress-stepper-value" }))));
}
static get watchers() { return {
"currentStep": ["validateCurrentStep"],
"totalSteps": ["validateTotalSteps"],
"language": ["watchLanguage"],
"progressStepperId": ["watchId"]
}; }
static get style() { return PnProgressStepperStyle0; }
}, [0, "pn-progress-stepper", {
"label": [1025],
"totalSteps": [1026, "total-steps"],
"currentStep": [1026, "current-step"],
"stepName": [1, "step-name"],
"progressStepperId": [1, "progress-stepper-id"],
"language": [1],
"progressValue": [32]
}, undefined, {
"currentStep": ["validateCurrentStep"],
"totalSteps": ["validateTotalSteps"],
"language": ["watchLanguage"],
"progressStepperId": ["watchId"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-progress-stepper"];
components.forEach(tagName => { switch (tagName) {
case "pn-progress-stepper":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnProgressStepper$1);
}
break;
} });
}
const PnProgressStepper = PnProgressStepper$1;
const defineCustomElement = defineCustomElement$1;
export { PnProgressStepper, defineCustomElement };
//# sourceMappingURL=pn-progress-stepper.js.map