From 421bbcb7c6304a3b4ced208ab69fad0b98735b5c Mon Sep 17 00:00:00 2001
From: Lars Thomas Bredland <ltbre@nve.no>
Date: Fri, 23 May 2025 09:51:52 +0200
Subject: [PATCH 1/3] =?UTF-8?q?doc(nve-stepper):=20lagt=20til=20dokumentas?=
 =?UTF-8?q?jon=20og=20eksempel=20p=C3=A5=20bruk=20av=20hideStep?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc-site/components/nve-stepper.md | 193 ++++++++++++++++++++++++++++-
 1 file changed, 192 insertions(+), 1 deletion(-)

diff --git a/doc-site/components/nve-stepper.md b/doc-site/components/nve-stepper.md
index 59a054c0..9be73a8e 100644
--- a/doc-site/components/nve-stepper.md
+++ b/doc-site/components/nve-stepper.md
@@ -6,7 +6,7 @@ layout: component
 
 ### Standard med og uten knapper
 
-Bruk `hideStepButtons` for å skjule knappene i desktop-versjon. Hvis du skjuler knappene, må du implementere dine egne knapper og du bruker metodene `nextStep` og `prevStep` for å håndtere logikken.
+Bruk `hideStepButtons` for å skjule knappene i desktop-versjon. Hvis du skjuler knappene, må du implementere dine egne knapper og du bruker metodene `nextStep` og `prevStep` for å håndtere logikken. Du kan også bruke `hideStep` på individuelle steg i `steps`-arrayet for å skjule spesifikke steg - navigasjon vil automatisk hoppe over de skjulte stegene.
 
 I siste trinn erstattes neste knapp med en klarknapp, som standard er teksten "Sende", men du kan endre teksten gjennom egenskapen `endButtonText`. Du må bruke metoden `finishSteps` for du spesifiserer hva som skal skje på den siste knappen.
 
@@ -206,6 +206,25 @@ Bruk `hideMobileStepButtons` for å skjule knappene i mobil-versjon.
 
 </CodeExamplePreview>
 
+### Skjule bestemte steg
+
+Bruk `hideStep`-propertyen på individuelle steg for å skjule dem fra visningen. Stepper-komponenten vil automatisk hoppe over skjulte steg ved navigasjon.
+
+<CodeExamplePreview>
+
+```html
+<nve-stepper
+  steps='
+  [
+  {"title":"Steg 1","description":"Dette steget er synlig","state":1,"isSelected":true,"readyForEntrance":true},
+  {"title":"Steg 2","description":"Dette steget er skjult","state":0,"isSelected":false,"readyForEntrance":true,"hideStep":true},
+  {"title":"Steg 3","description":"Dette steget er synlig","state":0,"isSelected":false,"readyForEntrance":true}]'
+>
+</nve-stepper>
+```
+
+</CodeExamplePreview>
+
 ## Vue eksempler
 
 Her er eksempler på hvordan du bruker Nve-Stepper i Vue:
@@ -776,3 +795,175 @@ const handlePrevStep = () => {
 ```
 
 </SandboxPreview>
+
+### Skjul bestemte steg i Vue
+
+Du kan kontrollere visningen av bestemte steg ved å bruke `hideStep`-propertyen. Dette eksempelet viser hvordan du kan dynamisk vise eller skjule steg i en Vue-applikasjon:
+
+```vue
+<template>
+  <div>
+    <nve-button @click="toggleStepVisibility">{{ showAllSteps ? 'Skjul steg 2' : 'Vis alle steg' }}</nve-button>
+    <nve-stepper ref="stepper" :steps="steps"></nve-stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+import 'nve-designsystem/components/nve-stepper/nve-stepper.component';
+import 'nve-designsystem/components/nve-button/nve-button.component';
+
+import { StepProps } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
+import { StepState } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
+import { INveStepper } from 'nve-designsystem/components/nve-stepper/nve-stepper.component';
+
+const showAllSteps = ref(true);
+const stepper = ref<HTMLElement | null>(null);
+
+const steps = ref<StepProps[]>([
+  {
+    title: 'Steg 1',
+    description: 'Første steg',
+    state: StepState.Active,
+    isSelected: true,
+    readyForEntrance: true,
+  },
+  {
+    title: 'Steg 2',
+    description: 'Andre steg',
+    state: StepState.NotStarted,
+    isSelected: false,
+    readyForEntrance: true,
+    hideStep: false, // Steg er synlig som standard
+  },
+  {
+    title: 'Steg 3',
+    description: 'Tredje steg',
+    state: StepState.NotStarted,
+    isSelected: false,
+    readyForEntrance: true,
+  },
+]);
+
+const toggleStepVisibility = () => {
+  showAllSteps.value = !showAllSteps.value;
+
+  // For å sikre at endringer i hideStep blir oppdaget av Lit-komponenten,
+  // må vi lage en helt ny kopi av steps-arrayet
+  steps.value = steps.value.map((step, index) => {
+    if (index === 1) {
+      return {
+        ...step,
+        hideStep: !showAllSteps.value,
+        title: step.title + '.', // Denne endringen fungerer allerede
+      };
+    }
+    return step;
+  });
+
+  // Gi beskjed til stepper at den skal oppdatere seg
+  if (stepper.value) {
+    (stepper.value as unknown as INveStepper).reRender();
+  }
+};
+
+onMounted(() => {
+  // Initialiser stepper
+  if (stepper.value) {
+    const nveStepper = stepper.value as unknown as INveStepper;
+  }
+});
+</script>
+```
+
+Når du endrer `hideStep`-egenskapen på et steg, bør du kalle `reRender()`-metoden for å sikre at stepper-komponenten oppdaterer visningen. Stepper-komponenten vil automatisk håndtere navigasjon og hoppe over skjulte steg.
+
+<SandboxPreview>
+
+```
+<template>
+  <div>
+    <nve-button @click="toggleStepVisibility">{{ showAllSteps ? 'Skjul steg 2' : 'Vis alle steg' }}</nve-button>
+    <nve-stepper ref="stepper" :steps="steps"></nve-stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+import 'nve-designsystem/components/nve-stepper/nve-stepper.component';
+import 'nve-designsystem/components/nve-button/nve-button.component';
+
+import { StepProps } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
+import { StepState } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
+import { INveStepper } from 'nve-designsystem/components/nve-stepper/nve-stepper.component';
+
+const showAllSteps = ref(true);
+const stepper = ref<HTMLElement | null>(null);
+
+const steps = ref<StepProps[]>([
+  {
+    title: 'Steg 1',
+    description: 'Første steg',
+    state: StepState.Active,
+    isSelected: true,
+    readyForEntrance: true,
+  },
+  {
+    title: 'Steg 2',
+    description: 'Andre steg',
+    state: StepState.NotStarted,
+    isSelected: false,
+    readyForEntrance: true,
+    hideStep: false, // Steg er synlig som standard
+  },
+  {
+    title: 'Steg 3',
+    description: 'Tredje steg',
+    state: StepState.NotStarted,
+    isSelected: false,
+    readyForEntrance: true,
+  },
+]);
+
+const toggleStepVisibility = () => {
+  showAllSteps.value = !showAllSteps.value;
+
+  // For å sikre at hideStep-endringer oppdages må vi gjøre en mer
+  // omfattende endring av steps-arrayet enn bare å endre enkeltegenskaper
+  const hideSecondStep = !showAllSteps.value;
+
+  // Lag et helt nytt array med oppdaterte verdier
+  // Dette sikrer at Lit oppfatter endringen som en faktisk endring av data
+  const updatedSteps: StepProps[] = [
+    { ...steps.value[0] }, // Første steg - uendret
+    {
+      ...steps.value[1],
+      hideStep: hideSecondStep,
+      title: steps.value[1].title + '.' // Denne endringen fungerer allerede
+    }, // Andre steg - oppdatert
+    { ...steps.value[2] } // Tredje steg - uendret
+  ];
+
+  // Sett det nye arrayet som steps.value
+  steps.value = updatedSteps;
+
+  // Fortell Lit-komponenten at den må oppdatere seg
+  if (stepper.value) {
+    (stepper.value as unknown as INveStepper).reRender();
+  }
+};
+
+onMounted(() => {
+  // Initialiser stepper
+  if (stepper.value) {
+    const nveStepper = stepper.value as unknown as INveStepper;
+  }
+});
+
+</script>
+
+```
+
+</SandboxPreview>

From 897bd95199560715cd150301bff484c73b6c462c Mon Sep 17 00:00:00 2001
From: Lars Thomas Bredland <ltbre@nve.no>
Date: Fri, 23 May 2025 09:53:16 +0200
Subject: [PATCH 2/3] =?UTF-8?q?feat(hideStep):=20hideStep=20for=20nve-step?=
 =?UTF-8?q?=20som=20gj=C3=B8r=20at=20vi=20kan=20skjule=20steg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nve-step/nve-step.component.ts            | 20 ++--
 .../nve-stepper/nve-step/nve-step.styles.ts   |  2 +-
 .../nve-stepper/nve-stepper.component.ts      | 95 ++++++++++++++++---
 3 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/src/components/nve-stepper/nve-step/nve-step.component.ts b/src/components/nve-stepper/nve-step/nve-step.component.ts
index c288cbb7..b8ac2065 100644
--- a/src/components/nve-stepper/nve-step/nve-step.component.ts
+++ b/src/components/nve-stepper/nve-step/nve-step.component.ts
@@ -20,7 +20,8 @@ export interface StepProps {
   readyForEntrance: boolean;
   orientation?: string;
   hideStateText?: boolean;
-  hideDescriptions?: boolean;
+  hideDescription?: boolean;
+  hideStep?: boolean;
 }
 
 /** Komponent for et enkelt steg i en stepper */
@@ -73,7 +74,11 @@ export default class NveStep extends LitElement {
 
   /** Angir om beskrivelser skal skjules */
   @property({ type: Boolean })
-  hideDescriptions: boolean = false;
+  hideDescription: boolean = false;
+
+  /** Angir omhele steget skal skjules */
+  @property({ type: Boolean })
+  hideStep?: boolean = false;
 
   /** Brukes for å justere høyden for den vertikale skilleveggen blir så høy som nær Step har en description. */
   @query('.step-description')
@@ -204,7 +209,7 @@ export default class NveStep extends LitElement {
   private renderDescription(): TemplateResult | string {
     if (!this.isDescriptionValid(this.description)) {
       // Return an empty div with min-height to maintain spacing when no description
-      return html`<div class="step-description empty-description ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}"></div>`;
+      return html`<div class="step-description step-description-empty ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}"></div>`;
     }
     return html`<div class="step-description ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}">${this.description}</div>`;
   }
@@ -232,7 +237,8 @@ export default class NveStep extends LitElement {
   }
 
   private renderVerticalStep(): TemplateResult {
-    return html`
+    return this.hideStep === true ? html`` : 
+    html`
       <div class="vertical-container">
         <div class="step-figure-vertical">
           <div
@@ -248,7 +254,7 @@ export default class NveStep extends LitElement {
             ${this.hideStateText ? '' : this.getStateText(this.state)}
           </div>
           <div>       
-            ${this.hideDescriptions ? '' : this.renderDescription()}
+            ${this.hideDescription ? '' : this.renderDescription()}
           </div>
         </div>
       </div>
@@ -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`
         <div class="step-figure">
           <span
             class=" ${this.getIconClass(this.state)}"
@@ -270,7 +276,7 @@ export default class NveStep extends LitElement {
           <div class="step-state ${this.getStateColorClass(this.state)}">
             ${this.hideStateText ? '' : this.getStateText(this.state)}
           </div>       
-            ${this.hideDescriptions ? '' : this.renderDescription()}
+            ${this.hideDescription ? '' : this.renderDescription()}
         </div>
     `;
   }
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}
               >
               </nve-step>
             `

From d0848b2405f5d5c83e0ffbe6279e37ecdbd9847a Mon Sep 17 00:00:00 2001
From: Lars Thomas Bredland <ltbre@nve.no>
Date: Fri, 23 May 2025 10:17:05 +0200
Subject: [PATCH 3/3] doc(hideStep): tatt ut debug-kode

---
 doc-site/components/nve-stepper.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/doc-site/components/nve-stepper.md b/doc-site/components/nve-stepper.md
index 9be73a8e..12035f38 100644
--- a/doc-site/components/nve-stepper.md
+++ b/doc-site/components/nve-stepper.md
@@ -856,7 +856,6 @@ const toggleStepVisibility = () => {
       return {
         ...step,
         hideStep: !showAllSteps.value,
-        title: step.title + '.', // Denne endringen fungerer allerede
       };
     }
     return step;
@@ -941,7 +940,6 @@ const toggleStepVisibility = () => {
     {
       ...steps.value[1],
       hideStep: hideSecondStep,
-      title: steps.value[1].title + '.' // Denne endringen fungerer allerede
     }, // Andre steg - oppdatert
     { ...steps.value[2] } // Tredje steg - uendret
   ];