@postnord/web-components
Version:
PostNord Web Components
118 lines (112 loc) • 7.22 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.js');
var index$1 = require('./index.cjs.js');
const translations = {
STEP: {
da: 'Trin',
en: 'Step',
fi: 'Vaihe',
no: 'Trinn',
sv: 'Steg',
},
};
const pnProgressStepperCss = "pn-progress-stepper{display:block}pn-progress-stepper .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}pn-progress-stepper .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-value{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}pn-progress-stepper .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-dot{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}";
const PnProgressStepper = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
id = `pn-progress-stepper-${index$1.uuidv4()}`;
minStep = 1;
maxStep = 7;
get hostElement() { return index.getElement(this); }
builtInLabel;
/** Percentage calculated with currentStep / totalSteps. */
progressValue = 0;
/** Set custom label for the stepper, default label is "Step". */
label = '';
/** Set a custom HTML id on the progress stepper element to associate progress bar with label. */
progressStepperId = '';
/**
* Set the language manually, only use this prop if the pnTopbar is not loaded.
* Will not overwrite the custom `label` prop if used.
**/
language = null;
/** Set total amount of steps, maximum allowed is `7`. @category Steps */
totalSteps = this.maxStep;
/** The current step of the progress stepper. @category Steps */
currentStep = this.minStep;
/** You can add a custom optional string to the label if you need a name for the current step. @category Steps */
stepName;
/**
* Use the dots visual, instead of the bar.
*
* This will hide the label from view, but is still accessible to screenreaders.
*
* @since v7.16.0
* @category Visual
*/
dots = false;
stepWatchers(a, b, c) {
if (c === 'currentStep')
this.validate(a, 'currentStep');
if (c === 'totalSteps')
this.validate(b, 'totalSteps');
this.calculateProgress();
}
watchLanguage() {
this.builtInLabel = translations.STEP[this.language || index$1.en];
}
async componentWillLoad() {
this.watchLanguage();
this.validate(this.currentStep, 'currentStep');
this.validate(this.totalSteps, 'totalSteps');
this.calculateProgress();
if (this.language === null)
await index$1.awaitTopbar(this.hostElement);
}
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('--pn-progress-value', `${this.progressValue}%`);
}
catch (error) {
console.error(`${this.hostElement.localName}:`, error.message);
}
}
getLabel() {
return this.label || this.builtInLabel;
}
getId() {
return this.progressStepperId || this.id;
}
render() {
return (index.h(index.Host, { key: 'a93457e5c8ec35858e7f15e45578feb67ec37f4e' }, index.h("label", { key: '86a36ba455f7433f072a9b38b8af09c9fda45fc4', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, index.h("span", { key: 'eeb9163062bd19b03c394fe6c936440f040dd246' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && index.h("span", { key: 'f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf' }, " - ", this.stepName)), index.h("progress", { key: '81658eb2942d0b1712bbbb4e22904d0b4c3a5229', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (index.h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (index.h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (index.h("div", { "aria-hidden": "true", class: "pn-progress" }, index.h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
}
static get watchers() { return {
"currentStep": ["stepWatchers"],
"totalSteps": ["stepWatchers"],
"language": ["watchLanguage"]
}; }
};
PnProgressStepper.style = pnProgressStepperCss;
exports.pn_progress_stepper = PnProgressStepper;
//# sourceMappingURL=pn-progress-stepper.entry.cjs.js.map