@postnord/web-components
Version:
PostNord Web Components
74 lines (69 loc) • 5.83 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.js');
var colors = require('./colors-Dzlq0FRO.js');
const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:flex;flex:1 0 4em}pn-progress-indicator-step:first-child{flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:flex;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .circle{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:flex;align-items:center;flex-direction:column;font-size:1em;font-weight:normal;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .info-container{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container .pn-icon-svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container .pn-icon-svg path,.pn-progress-indicator-step .info-container .pn-icon-svg polygon{fill:#f3f2f2}.pn-progress-indicator-step .progress-line{flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;transform:translateX(-100%);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .progress-line:after{transition-delay:0.2s}.pn-progress-indicator-step.active .info-container{color:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg path{fill:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg polygon{fill:#000000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;animation:dash 0.2s cubic-bezier(0.55, 0, 0.1, 1) both}@keyframes dash{to{stroke-dashoffset:0}}";
const PnProgressIndicatorStep = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.setactivestep = index.createEvent(this, "setactivestep");
}
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 (index.h(index.Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, index.h("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), index.h("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, index.h("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), index.h("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (index.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" }, index.h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: colors.white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
}
};
PnProgressIndicatorStep.style = pnProgressIndicatorStepCss;
exports.pn_progress_indicator_step = PnProgressIndicatorStep;
//# sourceMappingURL=pn-progress-indicator-step.entry.cjs.js.map