nve-designsystem 0.1.69 → 0.1.71

package/components/nve-alert/nve-alert.component.d.ts

@@ -1,7 +1,6 @@
 import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 /**
- * En Shoelace-alert med Nve styling
- * Se https://shoelace.style/components/alert
+ * Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup
  */
 export default class NveAlert extends SlAlert {
     constructor();

package/components/nve-badge/nve-badge.component.d.ts

@@ -1,11 +1,9 @@
 import { LitElement } from 'lit';
 /**
  * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.
- * Kan også brukes med knappen som i Shoelace
- * Importerer ingen styles fra shoelace derfor pill og pulse property skal ikke fungere.
  * @property {string} size = small, medium eller large
  * @property {string} variant = primary, success, neutral, warning, danger, brand
- * @property {boolean} low = viser svakere farger på badgen
+ * @property {boolean} low = gir lysere bakgrunnsfarge
  */
 export default class NveBadge extends LitElement {
     static styles: import("lit").CSSResult[];

package/components/nve-button/nve-button.component.d.ts

@@ -1,15 +1,9 @@
 import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
- * En Shoelace-knapp i NVE-forkledning.
- * Se https://shoelace.style/components/button
- *
- * For å lage en lenke knapp legg til href på nve-button og den skal automatisk bli gjort om til <a>
- *
- * Vi skal ikke bruke properties:
- * - circle
- * - caret
- * - pill
+ * Selveste NVE-knappen.
+ * Bruk href for å gjøre den om til en link.
+ * Disse feltene skal ikke brukes: circle, caret og pill
  */
 export default class NveButton extends SlButton implements INveComponent {
     constructor();

package/components/nve-button/nve-button.styles.js

@@ -6,13 +6,14 @@ const a = t`
     width: fit-content;
     align-items: center;
     box-sizing: border-box;
+    position: relative;
   }
 
   .button ::slotted(nve-badge) {
     position: absolute;
     top: 0;
     right: 0;
-    translate: 50% -50%;
+    transform: translate(50%, -50%);
     pointer-events: none;
   }
 

package/components/nve-checkbox/nve-checkbox.component.d.ts

@@ -1,9 +1,7 @@
 import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
 /**
- * En sl-checkbox.
- * Mer info: https://shoelace.style/components/checkbox
- * Kan brukes akkurat som en vanlig sl-checkbox komponent.
- * Vi burde ikke justere størrelsen på den siden det finnes bare en 'size' alternativ i design systemet.
+ * En avkrysningsboks.
+ * Ikke bruk `size`, i NVE bruker vi kun en størrelse på avkrysningsbokser.
  */
 export default class NveCheckbox extends SlCheckbox {
     constructor();

package/components/nve-checkbox-group/nve-checkbox-group.component.d.ts

@@ -1,12 +1,11 @@
 import { LitElement } from 'lit';
 /**
- * Representerer en tilpasset sjekboksgruppekomponent.
- * Denne komponenten burde brukes kun med <nve-checkbox> komponent.
- * Man kan ta i bruk selectedValues som inneholder value-attributet fra alle aktive sjekkbokser inn i sjekkboksgruppen. Den
- * oppdaterer seg automatisk når mån klikker på sjekkbokser. Man kan lagre både primitiver og objekter i selectedValues.
- * Valideres både med constraint validation (kun required støttes per i dag), og custom validering. Custom validering prioriteres når man submitter formen.
- * <nve-checkbox> komponenter som er wrappet i <nve-checkbox-group>
- * @slot default - innholder alle nve-checkbox komponenter for global style styring og validering
+ * Bruk denne for å håndtere flere avkrysningsbokser (nve-checkbox) som hører sammen.
+ * selectedValues inneholder `value` til hver av avkrysningsboksene som er valgt i gruppa.
+ * Gruppa oppdaterer seg automatisk når man klikker på en avkrysningsboks.
+ * Støtter både constraint validation (kun `required`) og tilpasset validering.
+ * Tilpasset validering prioriteres foran `required`.
+ * @slot default - legg avkrysningsboksene inni denne.
  * */
 export default class NveCheckboxGroup extends LitElement {
     constructor();
@@ -14,22 +13,22 @@ export default class NveCheckboxGroup extends LitElement {
     disabled: boolean;
     /** Om minst en sjekkboks er sjekket på */
     required: boolean;
-    /** Viser label til sjekboksgruppen */
+    /** Ledetekst */
     label?: string;
-    /** Viser i ikone og tooltip tekst ved siden av label. Skal ikke fungere uten label */
+    /** Viser i-ikon og hjelpetekst ved siden av label. Du må ha en label for å bruke denne. */
     tooltip?: string;
-    /** Om gruppen skal rendres horisontalt eller vertikalt */
+    /** Om gruppa skal vises horisontalt eller vertikalt */
     orientation: 'horizontal' | 'vertical';
-    /** Feil melding som vises under gruppe hvis validering feiler */
+    /** Feilmelding som vises under gruppe hvis validering feiler */
     errorMessage?: string;
-    /** Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard */
+    /** Tekst som vises for å markere at et felt er obligatorisk */
     requiredLabel: string;
-    /** Returnerer et array av value-attributet til alle sjekkbokser som er valgt */
+    /** Returnerer en tabell av value-attributet til alle sjekkbokser som er valgt. Man kan lagre både primitiver og objekter i selectedValues. */
     selectedValues?: string[];
     slot: any;
     /** Bestemmer om feilmelding skal vises når validering feiler  */
     protected showErrorMessage: boolean;
-    /** State på custom validering. Den trengs for å kunne kjøre både constaraint- og custom validering samtidig. */
+    /** Status for tilpasset validering. Den trengs for å kunne kjøre både constraint- og tilpasset validering samtidig. */
     protected isCustomValidationError: boolean;
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
@@ -40,7 +39,7 @@ export default class NveCheckboxGroup extends LitElement {
     setCustomValidity(message?: string): void;
     private handleSubmit;
     private handleChange;
-    /** Oppdaterer selectedValues property hver gang man endrer noen av sjekkbokser i sjekkboksgruppen.  */
+    /** Oppdaterer selectedValues property hver gang man endrer noen av sjekkbokser i sjekkboksgruppa.  */
     private updateSelectedValues;
     /** Sjekker validity basert på constraint validation. Man kan legge til flere properties. */
     private checkValidity;

package/components/nve-checkbox-group/nve-checkbox-group.component.js

@@ -23,11 +23,10 @@ var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (e, t, s
 let r = class extends b {
   constructor() {
     super(), this.disabled = !1, this.required = !1, this.orientation = "vertical", this.requiredLabel = "*Obligatorisk", this.showErrorMessage = !1, this.isCustomValidationError = !1, this.updateSelectedValues = (e) => {
-      if (!this.selectedValues) return;
       const t = e.target;
       if (t.checked)
-        this.selectedValues.push(t.value);
-      else {
+        this.selectedValues || (this.selectedValues = []), this.selectedValues.push(t.value);
+      else if (this.selectedValues) {
         const s = this.selectedValues.findIndex((i) => u(i, t.value));
         s !== -1 && this.selectedValues.splice(s, 1);
       }

package/components/nve-dialog/nve-dialog.component.d.ts

@@ -1,15 +1,12 @@
 import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 /**
- * En sl-dialog i NVE-forkledning.
- * Mer info: https://shoelace.style/components/dialog
- *
- * Vil du ha ikon foran tittelen kan du angi navnet på ikonet som attributt "icon".
- * Skal det ikke være mulig å trykke utenfor for å lukke dialogen, sett på disableDialog attributt
+ * En dialogboks.
+ * Vil du ha ikon foran overskriften, bruk `icon`.
+ * Skal det ikke være mulig å trykke utenfor for å lukke dialogen, bruk `disableBackground`.
  *
  * @slot label - teksten som skal vises i overskriften. Eller du kan bruke label-attributtet
  * @slot body - hovedinnholdet
- * @slot footer - feltet i bunden hvor knappene er plassert
- *
+ * @slot footer - feltet i bunnen hvor knappene er plassert
  */
 export default class NveDialog extends SlDialog {
     /**
@@ -17,12 +14,11 @@ export default class NveDialog extends SlDialog {
      */
     icon: string;
     /**
-     * Hvis disableBacground er true, kan man ikke trykke utenfor dialogen for å lukke den.
+     * Hvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den.
      */
     disableBackground: boolean;
     constructor();
     /**
-     *
      * Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
      */
     handleRequestClose(event: any): void;

package/components/nve-dialog/nve-dialog.component.js

@@ -369,7 +369,6 @@ let p = class extends D {
     super(), this.icon = "", this.disableBackground = !1;
   }
   /**
-   *
    * Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
    */
   handleRequestClose(e) {

package/components/nve-divider/nve-divider.component.d.ts

@@ -1,7 +1,6 @@
 import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.js';
 /**
- * En Shoelace-divider i NVE-forkledning.
- * Se https://shoelace.style/components/divider
+ * Bruk denne til å skille innhold fra hverandre
  */
 export default class NveDivider extends SlDivider {
     constructor();

package/components/nve-dropdown/nve-dropdown.component.d.ts

@@ -2,8 +2,7 @@ import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdo
 import NveMenu from '../nve-menu/nve-menu.component';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
- * En Shoelace-dropdown i NVE-forkledning.
- * Se https://shoelace.style/components/dropdown
+ * TODO: Beskrivelse mangler
  */
 export default class NveDropdown extends SlDropdown implements INveComponent {
     constructor();

package/components/nve-icon/nve-icon.component.d.ts

@@ -1,12 +1,14 @@
 import { LitElement } from 'lit';
 /**
  * Et ikon.
- * Vi bruker ikoner fra Material Symbols. Man kan bruke både 'Sharp' og 'Outlined' ikoner.
+ * Vi bruker ikoner fra Material Symbols.
+ * Vi bruker strek-tykkelse 400 uansett størrelse på ikonet.
+ * Fill skal ikke brukes.
  * @see https://fonts.google.com/icons
  */
 export default class NveIcon extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Bestemmer om man skal bruke 'sharp' eller 'outlined' ikoner */
+    /** Skarpe eller myke hjørner. Ikonene i ikonsettet skal i utgangspunktet ha skarpe hjørner, men hjørner kan være avrundet om det gjør motivet tydeligere. */
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;

package/components/nve-icon/nve-icon.component.js

@@ -1,14 +1,14 @@
 import { s as m, x as c } from "../../chunks/lit-element.js";
 import { n as p, t as y } from "../../chunks/property.js";
 import f from "./nve-icon.styles.js";
-var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (e, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? d(s, i) : s, a = e.length - 1, l; a >= 0; a--)
-    (l = e[a]) && (t = (o ? l(s, i, t) : l(t)) || t);
-  return o && t && h(s, i, t), t;
+var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (e, s, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(s, a) : s, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (t = (o ? l(s, a, t) : l(t)) || t);
+  return o && t && h(s, a, t), t;
 };
 let r = class extends m {
   constructor() {
-    super(...arguments), this.library = "Outlined", this.name = "";
+    super(...arguments), this.library = "Sharp", this.name = "";
   }
   firstUpdated() {
     if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {

package/components/nve-input/nve-input.component.d.ts

@@ -1,27 +1,23 @@
 import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
 import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
- * En sl-input i NVE-forkledning.
- * Mer info: https://shoelace.style/components/input
- *
+ * Et tekstfelt.
  * Vil du ha info-ikon med hjelpetekst etter ledeteksten, putt en nve-label i label-slot.
- * Disse attributtene skal ikke brukes:
- * - pill
- *
- * TODO: Felte blir breddere når feil ikone vises. Alt på grunn av at det dukker opp i en slot. Hvis Vi bestemmer oss
- * å ha en fast verdi på sloten, kan det kanksje påvirke andre elementer som skal vises i sloten.
+ * pill skal ikke brukes.
+ * TODO: Feltet blir bredere hvis validering feiler, fordi vi må ha plass til feil-ikonet.
  */
 export default class NveInput extends SlInput implements INveComponent {
     /**
-     * Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
+     * Tekst som vises for å markere at et felt er obligatorisk
      */
     requiredLabel: string;
     /**
-     * Brukes til enkel constraint validation til å overskrive default nettleseren melding
+     * Feilmelding som vises hvis validering feiler
      */
     errorMessage?: string;
     /**
-     * Hjelpe variabler som sjekker om input feltet er allerede invalid
+     * Intern hjelpevariabler som brukes i validering
+     * TODO: Kan denne være private?
      */
     /**
       * Brukes for å kunne identifisere komponenten i tester

package/components/nve-label/nve-label.component.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * Ledetekst med valgfritt verktøy-hint (og tilhørende info-ikon)
+ * Ledetekst med verktøy-hint (og tilhørende info-ikon)
  *
- * Kan brukes med inn i nve-menu (hvor den har en spesiell styling) som kategori skiller.
+ * Kan også brukes i nve-menu for å skille kategorier. Her får den en spesiell utforming.
  *
  * @slot (default) - teksten som skal vises. Eller du kan bruke value-attributtet
  * @slot tooltip - innhold i denne blir vist som en tooltip hvis man svever over info-ikonet

package/components/nve-option/nve-option.component.d.ts

@@ -1,7 +1,6 @@
 import SlOption from '@shoelace-style/shoelace/dist/components/option/option.js';
 /**
- * En Shoelace-option i NVE-forkledning.
- * Se https://shoelace.style/components/option
+ * Representerer et valg i nve-select.
  */
 export default class NveOption extends SlOption {
     constructor();

package/components/nve-popup/nve-popup.component.d.ts

@@ -1,7 +1,6 @@
 import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.js';
 /**
- * En sl-popup med NVE design.
- * Mer info: https://shoelace.style/components/popup
+ * TODO: Mangler beskrivelse
  */
 export default class NvePopup extends SlPopup {
     constructor();

package/components/nve-radio-group/nve-radio-group.component.d.ts

@@ -1,19 +1,17 @@
 import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
 import { PropertyValues } from 'lit';
 /**
- * En sl-radio-group i NVE-forkledning.
- * Se https://shoelace.style/components/radio-group
- * Denne komponenten tillater bruk av nve-radio og nve-radio-button elementer inne i <nve-radio-group></nve-radio-group>
- * ved å overstyre noen private metoder i SlRadioGroup.
+ * Brukes til å gruppere radioknapper som hører sammen. Den kan inneholde både nve-radio og nve-radio-button.
+ * Pass på at nve-radio eller nva-radio-button har en value, ellers vil ikke radiogruppa fungere som forventet.
  *
  * @extends SlRadioGroup
  *
  * @dependency NveRadioButton, NveRadio
  *
- * @property {string} orientation = horizontal eller vertical - Om radio-gruppen skal rendres horisontalt
- * @property {boolean} disabled = disable eller enable gruppen med radio-knapper
+ * @property {string} orientation = horizontal eller vertical - Om radiogruppen skal vises vannrett eller loddrett
+ * @property {boolean} disabled = deaktivere eller aktivere gruppen med radioknapper
  *
- * @slot Standard slot hvor `<nve-radio>` eller `<nve-radio-button>` plasseres
+ * @slot Standard slot hvor <nve-radio> eller <nve-radio-button> plasseres
  *
  * @example <nve-radio-group horizontal value="1"><nve-radio value="1">Value 1 (checked)</nve-radio></nve-radio-group>
  * @example <nve-radio-group vertical value="1"><nve-radio value="1">Value 1 (checked)</nve-radio></nve-radio-group>
@@ -27,11 +25,11 @@ export default class NveRadioGroup extends SlRadioGroup {
      */
     orientation: 'horizontal' | 'vertical';
     /**
-     * Deaktivere alle radio knapper i gruppen
+     * Deaktivere alle radioknapper i gruppen
      */
     disabled: boolean;
     /**
-     * Feil melding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen
+     * Feilmelding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen
      */
     errorMessage?: string;
     /**
@@ -39,7 +37,7 @@ export default class NveRadioGroup extends SlRadioGroup {
      */
     requiredLabel: string;
     /**
-     * Hjelpe variabel som sjekker om radio gruppe er allerede invalid
+     * Hjelpevariabel som sjekker om radio gruppe er allerede invalid
      */
     testId: string;
     private alreadyInvalid;

package/components/nve-select/nve-select.component.d.ts

@@ -1,9 +1,8 @@
 import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.js';
 /**
- * En Shoelace-select i NVE-forkledning.
- * Se https://shoelace.style/components/select. Bruker constraint og custom validering. Klarte ikke å sette feil ikone når
- * validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men
- * funka ikke med ikonen.
+ * En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn.
+ * TODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men
+ * funka ikke med ikonet.
  * Man kan bruke .focus() for å fokusere komponenten programatisk. Sjekk https://shoelace.style/getting-started/usage#methods for å se hvordan å bruke det.
  * Kan være at i Vue applikasjon man må kjøre .focus i neste tick for å fokusere komponenten.
  */

package/components/nve-spinner/nve-spinner.component.d.ts

@@ -1,7 +1,6 @@
 import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 /**
- * En Shoelace-spinner i NVE-forkledning.
- * Se https://shoelace.style/components/spinner
+ * Ei snurre
  */
 export default class NveSpinner extends SlSpinner {
     constructor();

package/components/nve-stepper/nve-step/nve-step.component.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 export declare enum StepState {
     NotStarted = 0,
     Started = 1,
@@ -7,50 +7,52 @@ export declare enum StepState {
 }
 export interface StepProps {
     title: string;
-    description: string;
+    description?: string;
     state: StepState;
     isSelected: boolean;
     readyForEntrance: boolean;
+    disableClick?: boolean;
+    orientation?: string;
 }
 export default class NveStep extends LitElement {
     title: string;
-    /**
-     * Avstand mellom steppene
-     */
+    /** Avstand mellom Steps */
     spaceBetweenSteps: number;
-    /**
-     * Hvilken ikonbibliotek som skal brukes, Sharp eller Outlined.
-     */
-    iconLibrary: 'Outlined' | 'Sharp';
-    /**
-     * Stegets index
-     */
+    /** Step index */
     index: number;
     description: string;
     /**
-     * Er steget besøkt, ikke besøkt, fullført eller feilet
+     * Er Step besøkt, ikke besøkt, fullført eller feilet
      * @type {StepState}
      */
     state: StepState;
     selectedStepIndex: number;
-    /**
-     * Er steget valgt
-     */
+    /** Er Step valgt */
     isSelected: boolean;
-    /**
-     * Er steget det siste i rekken
-     */
+    /** Er Step det siste i rekken */
     isLast: boolean;
-    /**
-     * Er det lov å gå inn i steget, alle krav er oppfylt
-     */
-    entraceAllowed: boolean;
+    /**  Er det lov å gå inn i Step, alle krav er oppfylt  */
+    entranceAllowed: boolean;
+    /** Deaktiverer muligheten til å klikke på komponenten slik at den blir valgt.*/
+    disableClick: boolean;
+    /**  Hvilken retning Steps skal gå. */
+    orientation: 'horizontal' | 'vertical';
     firstUpdated(): void;
     updated(): void;
-    static styles: import("lit").CSSResult[];
+    static styles: CSSResultArray;
+    isOrientationVertical(): boolean;
     iconForState(state: StepState): string;
+    getStateText(state: StepState): string;
+    getStateColorClass(state: StepState): string;
+    getTitleClass(state: StepState): string;
+    getIconClass(state: StepState): string;
+    getIsClickableClass(): string;
+    getDividerColorClass(): string;
     onClick(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    renderDivider(): TemplateResult | string;
+    renderDescription(): TemplateResult | string;
+    renderVerticalStep(): TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {