nve-designsystem 0.1.24 → 0.1.25

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

@@ -4,9 +4,9 @@ import { SlCheckbox } from '@shoelace-style/shoelace';
  */
 export default class NveCheckbox extends SlCheckbox {
     constructor();
-    /** Checks if input is valid */
-    invalid: boolean;
     static styles: import("lit").CSSResultGroup[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,39 +1,54 @@
 import { LitElement } from 'lit';
 /**
  * Representerer en tilpasset sjekboksgruppekomponent.
- * Denne komponenten burde brukes kun med <nve-checkbox> komponent. isValid property endrer fargene på alle
+ * 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.
+ * 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
  * */
 export default class NveCheckboxGroup extends LitElement {
     constructor();
-    /**
-     * Bestemmer om sjekkboksgruppe er valid. Hvis ikke alle sjekkbokser i gruppe blir markert som feil
-     */
-    invalid: boolean;
-    /**
-     * Disable eller enable gruppa
-     */
+    /** Deaktiverer alle sjekkbokser hvis 'true' */
     disabled: boolean;
-    /**
-     * Viser label til en gruppe
-     */
+    /** Om minst en sjekkboks er sjekket på */
+    required: boolean;
+    /** Viser label til sjekboksgruppen */
     label?: string;
-    /**
-     * Viser i ikone og tooltip tekst ved siden av label. Skal ikke fungere uten label
-     */
+    /** Viser i ikone og tooltip tekst ved siden av label. Skal ikke fungere uten label */
     tooltip?: string;
-    /**
-     * Om gruppen skal rendres horisontalt eller vertikalt
-     */
+    /** Om gruppen skal rendres horisontalt eller vertikalt */
     orientation: 'horizontal' | 'vertical';
-    /**
-     * Viser feil melding under gruppen
-     */
+    /** Feil melding 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 */
+    requiredLabel: string;
+    /** Returnerer et array av value-attributet til alle sjekkbokser som er valgt */
+    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. */
+    protected isCustomValidationError: boolean;
     static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
     updated(changedProperties: any): void;
+    /** En 'fake' metode som gjør custom validering enklere på checkbox-group komponent */
+    setCustomValidity(message?: string): void;
+    private handleSubmit;
+    private handleChange;
+    /** Oppdaterer selectedValues property hver gang man endrer noen av sjekkbokser i sjekkboksgruppen.  */
+    private updateSelectedValues;
+    /** Sjekker validity basert på constraint validation. Man kan legge til flere properties. */
+    private checkValidity;
+    /** Toggler riktig validering attribute for å vise riktig style */
+    private toggleValidationAttributes;
+    private resetValidation;
+    private makeInvalid;
+    private checkIfRequiredValid;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -3,7 +3,7 @@ import { SlDivider } from '@shoelace-style/shoelace';
  * En Shoelace-divider i NVE-forkledning.
  * Se https://shoelace.style/components/divider
  */
-export declare class NveDivider extends SlDivider {
+export default class NveDivider extends SlDivider {
     constructor();
     static styles: import("lit").CSSResultGroup[];
 }

package/index.d.ts

@@ -4,6 +4,7 @@ export { default as NveButton } from './components/nve-button/nve-button.compone
 export { default as NveCheckbox } from './components/nve-checkbox/nve-checkbox.component';
 export { default as NveCheckboxGroup } from './components/nve-checkbox-group/nve-checkbox-group.component';
 export { default as NveDialog } from './components/nve-dialog/nve-dialog.component';
+export { default as NveDivider } from './components/nve-divider/nve-divider.component';
 export { default as NveDropdown } from './components/nve-dropdown/nve-dropdown.component';
 export { default as NveIcon } from './components/nve-icon/nve-icon.component';
 export { default as NveInput } from './components/nve-input/nve-input.component';