@@ -256,7 +262,7 @@ export default class NveStep extends LitElement {
}
render(): TemplateResult {
- return this.isOrientationVertical() ? this.renderVerticalStep() : html`
+ return this.isOrientationVertical() ? this.renderVerticalStep() : this.hideStep === true ? html`` : html`
- ${this.hideDescriptions ? '' : this.renderDescription()}
+ ${this.hideDescription ? '' : this.renderDescription()}
`;
}
diff --git a/src/components/nve-stepper/nve-step/nve-step.styles.ts b/src/components/nve-stepper/nve-step/nve-step.styles.ts
index bb5fb241..94296e29 100644
--- a/src/components/nve-stepper/nve-step/nve-step.styles.ts
+++ b/src/components/nve-stepper/nve-step/nve-step.styles.ts
@@ -78,7 +78,7 @@ export default css`
padding-top: 0.625rem; /*10px; */
}
- .empty-description {
+ .step-description-empty {
min-height: 1rem; /* Set a minimum height for empty descriptions */
padding-top: 0.625rem; /* Match the padding of regular descriptions */
}
diff --git a/src/components/nve-stepper/nve-stepper.component.ts b/src/components/nve-stepper/nve-stepper.component.ts
index a1512259..418bd632 100644
--- a/src/components/nve-stepper/nve-stepper.component.ts
+++ b/src/components/nve-stepper/nve-stepper.component.ts
@@ -92,7 +92,6 @@ export default class NveStepper extends LitElement {
private selectedStepIndex: { value: number } = { value: 0 };
-
/**
* Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
* Dette er nyttig når du vil tvinge en oppdatering av komponenten uten å endre dens interne state.
@@ -116,23 +115,53 @@ export default class NveStepper extends LitElement {
stepperElement.getCurrentIndex = this.getCurrentIndex.bind(this);
stepperElement.reRender = this.reRender.bind(this);
}
-
/** Metode for å gå til neste steg */
nextStep(): void {
if (this.selectedStepIndex.value < this.steps.length - 1) {
- this.setStep(this.selectedStepIndex.value + 1);
+ // Finn neste synlige steg
+ let nextIndex = this.selectedStepIndex.value + 1;
+ while (nextIndex < this.steps.length && this.steps[nextIndex].hideStep) {
+ nextIndex++;
+ }
+
+ if (nextIndex < this.steps.length) {
+ this.setStep(nextIndex);
+ }
}
}
/** Metode for å gå til forrige steg */
prevStep(): void {
if (this.selectedStepIndex.value > 0) {
- this.setStep(this.selectedStepIndex.value - 1);
+ // Finn forrige synlige steg
+ let prevIndex = this.selectedStepIndex.value - 1;
+ while (prevIndex >= 0 && this.steps[prevIndex].hideStep) {
+ prevIndex--;
+ }
+
+ if (prevIndex >= 0) {
+ this.setStep(prevIndex);
+ }
}
}
-
/** Metode for å velge et spesifikt steg */
selectStep(index: number): void {
+ // Sjekk om det valgte steget er skjult
+ if (index < 0 || index >= this.steps.length || this.steps[index].hideStep) {
+ // Finn nærmeste synlige steg hvis mulig
+ const nextVisibleIndex = this.findNextVisibleStepIndex(index);
+ if (nextVisibleIndex !== -1) {
+ index = nextVisibleIndex;
+ } else {
+ const prevVisibleIndex = this.findPrevVisibleStepIndex(index);
+ if (prevVisibleIndex !== -1) {
+ index = prevVisibleIndex;
+ } else {
+ // Ingen synlige steg funnet, gjør ingenting
+ return;
+ }
+ }
+ }
this.setStep(index);
}
@@ -148,13 +177,28 @@ export default class NveStepper extends LitElement {
return this.selectedStepIndex.value;
}
-
private setStep(index: number): void {
+ if (this.steps[index] && this.steps[index].readyForEntrance) {
+ // Hvis gjeldende step er skjult, hopp til neste synlige steg
+ if (this.steps[index].hideStep) {
+ // Finn neste synlige steg
+ const nextVisibleIndex = this.findNextVisibleStepIndex(index);
+ if (nextVisibleIndex !== -1) {
+ this.selectedStepIndex.value = nextVisibleIndex;
+ index = nextVisibleIndex;
+ } else {
+ // Hvis ingen synlige steg er funnet framover, prøv å finne et bakover
+ const prevVisibleIndex = this.findPrevVisibleStepIndex(index);
+ if (prevVisibleIndex !== -1) {
+ this.selectedStepIndex.value = prevVisibleIndex;
+ index = prevVisibleIndex;
+ }
+ }
+ } else {
+ this.selectedStepIndex.value = index;
+ }
- if (this.steps[index].readyForEntrance) {
- this.selectedStepIndex.value = index;
-
- // Oppdater status og valg for alle trinn
+ // Oppdater status og valg for alle trinn
for (let i = 0; i < this.steps.length; i++) {
if (i < index) {
// Alle trinn under indeks er satt til Done
@@ -174,6 +218,34 @@ export default class NveStepper extends LitElement {
}
}
+ /**
+ * Finn neste synlige steg fra gitt indeks
+ * @param currentIndex Nåværende indeks
+ * @returns Indeks for neste synlige steg, eller -1 hvis ingen finnes
+ */
+ private findNextVisibleStepIndex(currentIndex: number): number {
+ for (let i = currentIndex + 1; i < this.steps.length; i++) {
+ if (!this.steps[i].hideStep) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ /**
+ * Finn forrige synlige steg fra gitt indeks
+ * @param currentIndex Nåværende indeks
+ * @returns Indeks for forrige synlige steg, eller -1 hvis ingen finnes
+ */
+ private findPrevVisibleStepIndex(currentIndex: number): number {
+ for (let i = currentIndex - 1; i >= 0; i--) {
+ if (!this.steps[i].hideStep) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
private getExtremes(): string | undefined {
if (this.selectedStepIndex.value === 0) return 'start';
if (this.selectedStepIndex.value === this.steps.length - 1) {
@@ -280,7 +352,8 @@ export default class NveStepper extends LitElement {
.readyForEntrance=${step.readyForEntrance}
.orientation=${this.orientation}
.hideStateText=${this.hideStateText}
- .hideDescriptions=${this.hideDescriptions}
+ .hideDescription=${this.hideDescriptions}
+ .hideStep=${step.hideStep}
>
`