@aqua-ds/web-components
Version:
AquaDS Web Components
146 lines (141 loc) • 13 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
var StepTitleStatus;
(function (StepTitleStatus) {
StepTitleStatus["DEFAULT"] = "is-default";
StepTitleStatus["ACTIVE"] = "is-active";
StepTitleStatus["COMPLETE"] = "is-complete";
StepTitleStatus["ERROR"] = "is-error";
StepTitleStatus["ACTIVE_WITH_ERROR"] = "is-active-with-error";
})(StepTitleStatus || (StepTitleStatus = {}));
const aqStepTitleCss = ".aq-step-title__step-number{border-radius:50%;border:var(--spacing-size-basic) solid var(--color-paper-dark);color:var(--color-paper-dark);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--spacing-size-large);min-height:var(--spacing-size-large);text-align:center;line-height:var(--font-line-height-5);font-size:var(--font-size-xs);font-weight:var(--font-weight-semi-bold)}.aq-step-title__step-number.error{color:var(--color-white);border-color:var(--color-danger-base);background-color:var(--color-danger-base)}.aq-step-title__step-number.active{color:var(--color-white);border-color:var(--color-primary-base);background-color:var(--color-primary-base)}.aq-step-title__vertical-line{height:100%;min-height:var(--spacing-size-large);border-left:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__vertical-line--default{border-left:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__vertical-line--complete{border-color:var(--color-primary-base);border-left-style:solid}.aq-step-title__vertical-line--active{border-color:var(--color-primary-base)}.aq-step-title__vertical-line--error{border-color:var(--color-danger-base)}.aq-step-title__vertical-line--active-with-error{border-color:var(--color-danger-base);border-left-style:solid}.aq-step-title__vertical-line-before{min-height:var(--spacing-size-medium);border-left:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__vertical-line-before--initial{border-left:none}.aq-step-title__vertical-line-before--default{border-left:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__vertical-line-before--complete{border-color:var(--color-primary-base);border-left-style:solid}.aq-step-title__vertical-line-before--active{border-color:var(--color-primary-base)}.aq-step-title__vertical-line-before--error{border-color:var(--color-danger-base)}.aq-step-title__vertical-line-before--active-with-error{border-color:var(--color-danger-base);border-left-style:solid}.aq-step-title__step-header-vertical{margin-right:var(--spacing-size-short);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative}.aq-step-title__step-header-horizontal{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative}.aq-step-title__step-container-vertical{display:-ms-flexbox;display:flex;height:100%;width:-webkit-max-content;width:-moz-max-content;width:max-content}.aq-step-title__step-container-horizontal{min-width:128px;display:-ms-flexbox;display:flex}.aq-step-title__step-container-horizontal::before{content:\"\";height:var(--spacing-size-basic);width:calc(50% - 10px);position:relative;top:var(--spacing-size-medium);left:0}.aq-step-title__step-container-horizontal::after{content:\"\";height:var(--spacing-size-basic);width:calc(50% - 10px);position:relative;top:var(--spacing-size-medium);left:0}.aq-step-title__step-container-horizontal__before::before{border-top:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__step-container-horizontal__before--active::before{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-primary-base)}.aq-step-title__step-container-horizontal__before--error::before{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-danger-base)}.aq-step-title__step-container-horizontal__before--complete::before{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-step-title__step-container-horizontal__before--active-with-error::before{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-danger-base)}.aq-step-title__step-container-horizontal__after::after{border-top:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__step-container-horizontal__after--active::after{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-primary-base)}.aq-step-title__step-container-horizontal__after--complete::after{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-step-title__step-container-horizontal__after--error::after{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-danger-base)}.aq-step-title__step-container-horizontal__after--active-with-error::after{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-danger-base)}.aq-step-title__content-vertical{margin-bottom:var(--spacing-size-minor);width:100%;margin-top:15px}.aq-step-title__content-horizontal{display:-ms-flexbox;display:flex;text-align:center;margin-bottom:var(--spacing-size-minor);width:100%}.aq-step-title__step-container-horizontal__before::before{border-top:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__step-container-horizontal__before--active::before{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-primary-base)}.aq-step-title__step-container-horizontal__before--error::before{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-danger-base)}.aq-step-title__step-container-horizontal__before--complete::before{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-step-title__step-container-horizontal__before--active-with-error::before{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-danger-base)}.aq-step-title__step-container-horizontal__after::after{border-top:var(--spacing-size-basic) dashed var(--color-paper-dark)}.aq-step-title__step-container-horizontal__after--active::after{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-primary-base)}.aq-step-title__step-container-horizontal__after--complete::after{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-step-title__step-container-horizontal__after--error::after{content:\"\";border-top:var(--spacing-size-basic) dashed var(--color-danger-base)}.aq-step-title__step-container-horizontal__after--active-with-error::after{content:\"\";border-top:var(--spacing-size-basic) solid var(--color-danger-base)}";
const AqStepTitle = /*@__PURE__*/ proxyCustomElement(class AqStepTitle extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.status = StepTitleStatus.DEFAULT;
}
componentDidLoad() {
this.getStatusBeforeStep();
}
componentWillLoad() {
this.stepsTitles = Array.from(this.el.closest('aq-step-group')?.querySelectorAll('aq-step-title') || []);
}
async connectedCallback() {
const stepGroup = this.el.closest('aq-step-group');
this.isVertical = stepGroup.isVertical;
if (stepGroup) {
const { index, total } = await stepGroup.registerStepTitle(this.el);
this.numberStep = index;
this.totalSteps = total;
}
}
statusChanged() {
this.updateAfterStep();
}
numberStepChanged() {
this.getStatusBeforeStep();
}
updateAfterStep() {
this.stepsTitles?.[this.numberStep + 1]?.updateStatus({ status: this.status });
}
async updateStatus({ status }) {
this.previousStatus = status;
}
getStepIcon(status) {
const stepStatusClass = {
active: status === StepTitleStatus.ACTIVE,
error: status === StepTitleStatus.ERROR,
'aq-step-title__step-number': true,
};
if (status === StepTitleStatus.COMPLETE)
return h("em", { class: "aq-step-group__step-icon aq-icon-check-circle complete" });
if (status === StepTitleStatus.ACTIVE_WITH_ERROR)
return h("em", { class: "aq-step-group__step-icon aq-icon-alert-circle active-with-error" });
return h("div", { class: stepStatusClass }, this.numberStep);
}
getLineBefore() {
const verticalLine = 'aq-step-title__vertical-line-before';
return {
[verticalLine]: this.isVertical,
[`${verticalLine}--initial`]: this.previousStatus === undefined,
[`${verticalLine}--default`]: this.previousStatus === StepTitleStatus.DEFAULT,
[`${verticalLine}--active`]: this.previousStatus === StepTitleStatus.ACTIVE,
[`${verticalLine}--error`]: this.previousStatus === StepTitleStatus.ERROR,
[`${verticalLine}--complete`]: this.previousStatus === StepTitleStatus.COMPLETE,
[`${verticalLine}--active-with-error`]: this.previousStatus === StepTitleStatus.ACTIVE_WITH_ERROR,
};
}
getLine() {
const verticalLine = 'aq-step-title__vertical-line';
return {
[verticalLine]: this.isVertical && this.numberStep !== this.totalSteps - 1,
[`${verticalLine}--initial`]: this.previousStatus === undefined,
[`${verticalLine}--default`]: this.previousStatus === StepTitleStatus.DEFAULT,
[`${verticalLine}--active`]: this.status === StepTitleStatus.ACTIVE,
[`${verticalLine}--error`]: this.status === StepTitleStatus.ERROR,
[`${verticalLine}--complete`]: this.status === StepTitleStatus.COMPLETE,
[`${verticalLine}--active-with-error`]: this.status === StepTitleStatus.ACTIVE_WITH_ERROR,
};
}
getStatusBeforeStep() {
this.previousStatus = this.stepsTitles?.[this.numberStep - 1]?.getAttribute('status');
}
cssClassContainerHorizontal() {
const lastStep = this.numberStep === this.totalSteps - 1;
const stepTitleContainer = 'aq-step-title__step-container-horizontal';
return {
[stepTitleContainer]: true,
[`${stepTitleContainer}__before`]: this.numberStep !== 0,
[`${stepTitleContainer}__after`]: !lastStep,
[`${stepTitleContainer}__after--active`]: this.status === StepTitleStatus.ACTIVE && !lastStep,
[`${stepTitleContainer}__after--error`]: this.status === StepTitleStatus.ERROR && !lastStep,
[`${stepTitleContainer}__after--complete`]: this.status === StepTitleStatus.COMPLETE && !lastStep,
[`${stepTitleContainer}__after--active-with-error`]: this.status === StepTitleStatus.ACTIVE_WITH_ERROR && !lastStep,
[`${stepTitleContainer}__before--active`]: this.previousStatus === StepTitleStatus.ACTIVE,
[`${stepTitleContainer}__before--error`]: this.previousStatus === StepTitleStatus.ERROR,
[`${stepTitleContainer}__before--complete`]: this.previousStatus === StepTitleStatus.COMPLETE,
[`${stepTitleContainer}__before--active-with-error`]: this.previousStatus === StepTitleStatus.ACTIVE_WITH_ERROR,
};
}
cssClassContainerVertical() {
return {
'aq-step-title__step-container-vertical': true,
};
}
render() {
return (this.isVertical ? (h("div", { class: this.cssClassContainerVertical() }, h("div", { class: "aq-step-title__step-header-vertical" }, h("div", { class: this.getLineBefore() }), this.getStepIcon(this.status), h("div", { class: this.getLine() })), h("div", { class: "aq-step-title__content-vertical" }, h("slot", null)))) : (h("div", null, h("div", { class: this.cssClassContainerHorizontal() }, h("div", { class: "aq-step__step-header-horizontal" }, this.getStepIcon(this.status))), h("div", { class: "aq-step-title__content-horizontal" }, h("slot", null)))));
}
get el() { return this; }
static get watchers() { return {
"status": ["statusChanged"],
"numberStep": ["numberStepChanged"]
}; }
static get style() { return aqStepTitleCss; }
}, [260, "aq-step-title", {
"status": [513],
"numberStep": [32],
"isVertical": [32],
"totalSteps": [32],
"stepsTitles": [32],
"previousStatus": [32],
"updateStatus": [64]
}, undefined, {
"status": ["statusChanged"],
"numberStep": ["numberStepChanged"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-step-title"];
components.forEach(tagName => { switch (tagName) {
case "aq-step-title":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqStepTitle);
}
break;
} });
}
export { AqStepTitle as A, defineCustomElement as d };