@helsevestikt/hviktor-angular 0.0.14 → 0.0.16

package/types/helsevestikt-hviktor-angular.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, AfterViewInit, OnChanges, OnInit, OnDestroy } from '@angular/core';
-import { FormGroup, ValidatorFn, ReactiveFormsModule } from '@angular/forms';
+import { EventEmitter, AfterViewInit, OnChanges, OnInit, OnDestroy, TemplateRef, AfterContentInit, ElementRef, QueryList } from '@angular/core';
+import { FormGroup, ValidatorFn, ReactiveFormsModule, ControlValueAccessor } from '@angular/forms';
 import { Placement } from '@floating-ui/dom';
 
 /**
@@ -518,6 +518,71 @@ declare class HviFieldAffixes {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviFieldAffixes, "hvi-field-affixes", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Counter component that displays remaining/exceeded character count for a field.
+ *
+ * @remarks
+ * Shows a visual counter and provides accessible announcements via aria-live.
+ * Must be used inside a `hvi-field` component alongside a textarea or input.
+ *
+ * The component automatically finds and tracks the input/textarea in the same field,
+ * so you only need to provide the `limit` property.
+ *
+ * @example
+ * Simple usage (auto-tracking):
+ * ```html
+ * <hvi-field>
+ *   <label hviLabel for="description" weight="medium">Beskrivelse</label>
+ *   <textarea hviInput id="description" rows="3" maxlength="100"></textarea>
+ *   <hvi-field-counter [limit]="100" />
+ * </hvi-field>
+ * ```
+ *
+ * @example
+ * Manual tracking (for custom scenarios):
+ * ```html
+ * <hvi-field>
+ *   <label hviLabel for="description" weight="medium">Beskrivelse</label>
+ *   <textarea hviInput id="description" rows="3" #textarea></textarea>
+ *   <hvi-field-counter [limit]="100" [count]="textarea.value.length" />
+ * </hvi-field>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/field/code
+ */
+declare class HviFieldCounter implements AfterViewInit {
+    private readonly el;
+    private readonly destroyRef;
+    /** Auto-tracked character count from the input/textarea in the same field */
+    private readonly autoCount;
+    /**
+     * Current character count. If not provided, the component will
+     * automatically track the input/textarea in the same hvi-field.
+     */
+    count: i0.InputSignal<number | undefined>;
+    /** Maximum allowed characters */
+    limit: i0.InputSignal<number>;
+    /** Label template when limit is exceeded. Use %d for the count. */
+    over: i0.InputSignal<string>;
+    /** Label template for remaining characters. Use %d for the count. */
+    under: i0.InputSignal<string>;
+    /** Hint text for screen readers about max characters. Use %d for the limit. */
+    hint: i0.InputSignal<string>;
+    /** Effective count - uses manual count if provided, otherwise auto-tracked */
+    private readonly effectiveCount;
+    /** Computed difference between limit and current count */
+    remaining: i0.Signal<number>;
+    /** Whether the limit has been exceeded */
+    isOver: i0.Signal<boolean>;
+    /** The formatted message to display */
+    message: i0.Signal<string>;
+    /** The formatted hint for screen readers */
+    formattedHint: i0.Signal<string>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldCounter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviFieldCounter, "hvi-field-counter", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": true; "isSignal": true; }; "over": { "alias": "over"; "required": false; "isSignal": true; }; "under": { "alias": "under"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class HviFieldDescription {
     static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldDescription, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<HviFieldDescription, "[hviFieldDescription]", never, {}, {}, never, never, true, never>;
@@ -605,11 +670,11 @@ declare class HviInput {
     get readOnly(): boolean;
     set readonly(value: boolean);
     private get isToggle();
-    onClick(event: MouseEvent): void;
+    onClick(event: Event): void;
     onChange(event: Event): void;
-    onKeydown(event: KeyboardEvent): void;
+    onKeydown(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HviInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HviInput, "input[hviInput]", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviInput, "input[hviInput], textarea[hviInput]", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_readOnly: unknown;
     static ngAcceptInputType_readonly: unknown;
@@ -805,9 +870,9 @@ declare function hviCustom(key: string, validator: ValidatorFn, message: string)
  */
 declare function hviNullValidator(): HviValidatorBundle;
 
-declare const HviFieldKit: readonly [typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes];
+declare const HviFieldKit: readonly [typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes, typeof HviFieldCounter];
 declare const HviValidationKit: readonly [typeof ReactiveFormsModule, typeof HviForm, typeof HviControlInvalid, typeof HviValidationMessage];
-declare const HviForms: readonly [typeof ReactiveFormsModule, typeof HviForm, typeof HviControlInvalid, typeof HviValidationMessage, typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes, typeof HviInput, typeof HviFieldset, typeof HviErrorSummary];
+declare const HviForms: readonly [typeof ReactiveFormsModule, typeof HviForm, typeof HviControlInvalid, typeof HviValidationMessage, typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes, typeof HviFieldCounter, typeof HviInput, typeof HviFieldset, typeof HviErrorSummary];
 
 /**
  * Heading is used to structure content and create hierarchy on a page.
@@ -905,6 +970,92 @@ declare class HviList {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HviList, "ol[hviList], ul[hviList]", never, {}, {}, never, never, true, never>;
 }
 
+/** Type for hvert element i pagineringslisten */
+type PaginationItem = {
+    type: 'page';
+    page: number;
+} | {
+    type: 'ellipsis';
+} | {
+    type: 'previous';
+} | {
+    type: 'next';
+};
+/** Event som emitteres ved sideendring */
+interface PageChangeEvent {
+    page: number;
+    previousPage: number;
+}
+/**
+ * @summary
+ * Pagination er en liste med knapper som brukes for å navigere mellom
+ * ulike sider med innhold, for eksempel søkeresultater eller tabeller.
+ *
+ * @example
+ * ```html
+ * <hvi-pagination
+ *   [totalItems]="100"
+ *   [pageSize]="10"
+ *   [(currentPage)]="currentPage"
+ * />
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/docs/pagination/code}
+ */
+declare class HviPagination {
+    /** Totalt antall elementer som pagineres */
+    set totalItems(value: number);
+    /** Antall elementer per side */
+    set pageSize(value: number);
+    /** Nåværende side (1-indeksert) */
+    set currentPage(value: number);
+    /** Antall sider som skal vises rundt nåværende side */
+    siblingCount: number;
+    /** Vis alltid første og siste side */
+    showEdges: boolean;
+    /** Vis "Forrige" og "Neste" tekst på knappene */
+    showPreviousNextLabels: boolean;
+    /** Aria-label for hele navigasjonen */
+    ariaLabel: string;
+    /** Tekst for forrige-knappen */
+    previousLabel: string;
+    /** Tekst for neste-knappen */
+    nextLabel: string;
+    /** Event som emitteres når siden endres */
+    currentPageChange: EventEmitter<number>;
+    /** Event som emitteres med mer detaljer om sideendring */
+    pageChange: EventEmitter<PageChangeEvent>;
+    readonly _totalItems: i0.WritableSignal<number>;
+    readonly _pageSize: i0.WritableSignal<number>;
+    readonly _currentPage: i0.WritableSignal<number>;
+    /** Beregnet totalt antall sider */
+    readonly totalPages: i0.Signal<number>;
+    /** Er vi på første side? */
+    readonly isFirstPage: i0.Signal<boolean>;
+    /** Er vi på siste side? */
+    readonly isLastPage: i0.Signal<boolean>;
+    /** Beregner hvilke elementer som skal vises i pagineringen */
+    readonly paginationItems: i0.Signal<PaginationItem[]>;
+    /** Gå til en spesifikk side */
+    goToPage(page: number): void;
+    /** Gå til forrige side */
+    goToPrevious(): void;
+    /** Gå til neste side */
+    goToNext(): void;
+    /** Gå til første side */
+    goToFirst(): void;
+    /** Gå til siste side */
+    goToLast(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviPagination, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviPagination, "hvi-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; }; "pageSize": { "alias": "pageSize"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "siblingCount": { "alias": "siblingCount"; "required": false; }; "showEdges": { "alias": "showEdges"; "required": false; }; "showPreviousNextLabels": { "alias": "showPreviousNextLabels"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "previousLabel": { "alias": "previousLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; }, { "currentPageChange": "currentPageChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+    static ngAcceptInputType_totalItems: unknown;
+    static ngAcceptInputType_pageSize: unknown;
+    static ngAcceptInputType_currentPage: unknown;
+    static ngAcceptInputType_siblingCount: unknown;
+    static ngAcceptInputType_showEdges: unknown;
+    static ngAcceptInputType_showPreviousNextLabels: unknown;
+}
+
 /**
  * Paragraph is used for continuous text and is typically applied in articles, components, help text, and similar content.
  *
@@ -973,6 +1124,79 @@ declare class HviPopover implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviPopover, "hvi-popover", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "autoPlacement": { "alias": "autoPlacement"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+/**
+ * @summary
+ * SearchClear is a button directive for clearing the search input.
+ * It automatically finds the input field inside the parent `hvi-search` component and clears it.
+ *
+ * @example
+ * ```html
+ * <hvi-search>
+ *   <input hviInput type="search" placeholder="" aria-label="Søk" />
+ *   <button hviSearchClear type="reset" aria-label="Tøm"></button>
+ *   <button hviButton variant="primary" type="submit">Søk</button>
+ * </hvi-search>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/search}
+ */
+declare class HviSearchClear {
+    private readonly elementRef;
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviSearchClear, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviSearchClear, "button[hviSearchClear]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @summary
+ * Search allows users to quickly find relevant content on a website or in an application.
+ * The component consists of a search field, with or without a search button.
+ *
+ * Use `hviInput` with `type="search"` for the input field.
+ * Use `hviSearchClear` for the clear button.
+ * Use `hviButton` for the submit button.
+ *
+ * Important: Add an empty `placeholder=""` on the input if you have a clear button.
+ *
+ * @example
+ * Basic search with clear and submit button:
+ * ```html
+ * <hvi-search>
+ *   <input hviInput type="search" placeholder="" aria-label="Søk" />
+ *   <button hviSearchClear type="reset" aria-label="Tøm"></button>
+ *   <button hviButton variant="primary" type="submit">Søk</button>
+ * </hvi-search>
+ * ```
+ *
+ * @example
+ * Search without submit button:
+ * ```html
+ * <hvi-search>
+ *   <input hviInput type="search" placeholder="" aria-label="Søk" />
+ *   <button hviSearchClear type="reset" aria-label="Tøm"></button>
+ * </hvi-search>
+ * ```
+ *
+ * @example
+ * Search with label using hvi-field:
+ * ```html
+ * <hvi-field>
+ *   <label hviLabel>Søk etter katter</label>
+ *   <hvi-search>
+ *     <input hviInput type="search" placeholder="" name="cat-search" />
+ *     <button hviSearchClear type="reset" aria-label="Tøm"></button>
+ *     <button hviButton variant="primary" type="submit">Søk</button>
+ *   </hvi-search>
+ * </hvi-field>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/search}
+ */
+declare class HviSearch {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviSearch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviSearch, "hvi-search", never, {}, {}, never, ["*"], true, never>;
+}
+
 /**
  * @summary
  * Select allows users to choose an option from a list.
@@ -1027,6 +1251,339 @@ declare class HviSkeleton {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviSkeleton, "hvi-skeleton", never, { "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * @summary
+ * SkipLink hjelper folk som bruker tastaturnavigasjon til å navigere,
+ * slik at de enkelt kan gå til det viktigste innholdet på en side.
+ *
+ * @example
+ * ```html
+ * <a hviSkipLink href="#main-content">Hopp til hovedinnhold</a>
+ *
+ * <main id="main-content" tabindex="-1">
+ *   Hovedinnhold her
+ * </main>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/komponenter/skip-link}
+ */
+declare class HviSkipLink {
+    private el;
+    /**
+     * Handles click to prevent Angular Router navigation
+     * and instead focus/scroll to the target element.
+     */
+    onClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviSkipLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviSkipLink, "a[hviSkipLink]", never, {}, {}, never, never, true, never>;
+}
+
+/** Available sizes for the Spinner */
+type SpinnerSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * @summary
+ * Spinner brukes for å indikere at innhold eller en handling er i ferd med å laste,
+ * og at brukeren må vente før de kan fortsette.
+ *
+ * @example
+ * ```html
+ * <hvi-spinner label="Laster..." />
+ * <hvi-spinner label="Henter data" size="lg" />
+ * ```
+ *
+ * @see {@link https://designsystemet.no/komponenter/spinner}
+ */
+declare class HviSpinner {
+    /** Accessible label describing what is loading */
+    label: string;
+    /** Size of the spinner */
+    size?: SpinnerSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviSpinner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviSpinner, "hvi-spinner", never, { "label": { "alias": "label"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/** Sorteringsretninger for tabell-kolonner */
+type SortDirection = 'none' | 'ascending' | 'descending';
+/** Event som emitteres ved sorteringsendring */
+interface TableSortEvent {
+    field: string;
+    direction: SortDirection;
+}
+/** Event som emitteres ved sideendring */
+interface TablePageEvent {
+    first: number;
+    rows: number;
+    page: number;
+    pageCount: number;
+}
+/**
+ * @summary
+ * Table brukes for å vise strukturert informasjon på en ryddig og oversiktlig måte.
+ * Tabeller kan gjøre det enklere for brukerne å skanne og sammenligne informasjon.
+ *
+ * @example
+ * ```html
+ * <!-- Enkel bruk med innebygd sortering og søk -->
+ * <table hviTable [value]="persons" [globalFilterFields]="['navn', 'epost']" #table="hviTable">
+ *   <caption>
+ *     <input type="search" (input)="table.filterGlobal($event.target.value)" />
+ *   </caption>
+ *   <thead>
+ *     <tr>
+ *       <th hviSortableColumn="navn">
+ *         <button>Navn</button>
+ *       </th>
+ *       <th>Epost</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     @for (person of table.filteredValue(); track person.id) {
+ *       <tr>
+ *         <td>{{ person.navn }}</td>
+ *         <td>{{ person.epost }}</td>
+ *       </tr>
+ *     }
+ *   </tbody>
+ * </table>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/docs/table/code}
+ */
+declare class HviTable<T = unknown> {
+    /** Gir tabellen zebrastriper (annenhver rad har alternativ bakgrunn) */
+    zebra: boolean;
+    /** Gir tabellen en avrundet kant rundt */
+    border: boolean;
+    /** Gir tabellen hover-effekt på rader */
+    hover: boolean;
+    /** Gjør tabellens header sticky (fester seg til toppen ved scrolling) */
+    stickyHeader: boolean;
+    /** Data som skal vises i tabellen */
+    set value(data: T[] | null | undefined);
+    /** Felt som data skal sorteres etter (valgfri initial verdi) */
+    set sortField(field: string | null | undefined);
+    /** Sorteringsretning: 1 = ascending, -1 = descending, 0 = none */
+    set sortOrder(order: number);
+    /** Felt som global søk skal søke i */
+    globalFilterFields: string[];
+    /** Aktiver paginering */
+    paginator: boolean;
+    /** Antall rader per side (når paginator er aktivert) */
+    set rows(value: number);
+    /** Indeks for første rad som vises (0-basert) */
+    set first(value: number);
+    /** Event som emitteres når sortering endres */
+    sortChange: EventEmitter<TableSortEvent>;
+    /** Event som emitteres når side endres */
+    pageChange: EventEmitter<TablePageEvent>;
+    /** Event som emitteres med nåværende side (1-basert, for two-way binding) */
+    currentPageChange: EventEmitter<number>;
+    private _value;
+    private _sortField;
+    private _sortOrder;
+    private _globalFilter;
+    private _rows;
+    private _first;
+    /** Kun sortert data (uten søk) - for bakoverkompatibilitet */
+    readonly sortedValue: i0.Signal<T[]>;
+    /** Filtrert og sortert data - bruk denne i template */
+    readonly filteredValue: i0.Signal<T[]>;
+    /** Paginert, filtrert og sortert data - bruk denne når paginator er aktivert */
+    readonly paginatedValue: i0.Signal<T[]>;
+    /** Antall rader etter søk */
+    readonly totalFilteredRecords: i0.Signal<number>;
+    /** Antall rader totalt (før søk) */
+    readonly totalRecords: i0.Signal<number>;
+    /** Totalt antall sider */
+    readonly pageCount: i0.Signal<number>;
+    /** Nåværende side (1-basert) */
+    readonly currentPage: i0.Signal<number>;
+    /** Er vi på første side? */
+    readonly isFirstPage: i0.Signal<boolean>;
+    /** Er vi på siste side? */
+    readonly isLastPage: i0.Signal<boolean>;
+    /** Nåværende sorteringsfelt */
+    readonly currentSortField: i0.Signal<string | null>;
+    /** Nåværende sorteringsretning som SortDirection */
+    readonly currentSortDirection: i0.Signal<SortDirection>;
+    /** Nåværende søkeverdi */
+    readonly currentGlobalFilter: i0.Signal<string | null>;
+    /**
+     * Global søk - søker på tvers av alle felt i globalFilterFields.
+     * @param value Søkeverdi
+     */
+    filterGlobal(value: string | null): void;
+    /**
+     * Nullstiller søk.
+     */
+    clearFilter(): void;
+    /**
+     * Nullstiller hele tabellen (sortering og søk).
+     */
+    clear(): void;
+    /**
+     * Gå til en spesifikk side (1-basert).
+     */
+    goToPage(page: number): void;
+    /**
+     * Gå til første side.
+     */
+    goToFirstPage(): void;
+    /**
+     * Gå til siste side.
+     */
+    goToLastPage(): void;
+    /**
+     * Gå til forrige side.
+     */
+    goToPreviousPage(): void;
+    /**
+     * Gå til neste side.
+     */
+    goToNextPage(): void;
+    /**
+     * Endre antall rader per side.
+     */
+    setRows(rows: number): void;
+    private emitPageEvent;
+    /**
+     * Sorterer tabellen etter et felt.
+     * Kalles av hviSortableColumn directive.
+     */
+    sort(field: string): void;
+    /**
+     * Henter sorteringsretning for et spesifikt felt.
+     * Brukes av hviSortableColumn for å vise riktig aria-sort.
+     */
+    getSortDirection(field: string): SortDirection;
+    private applyGlobalFilter;
+    private applySorting;
+    /**
+     * Henter verdi fra et objekt basert på felt-path (støtter nested: "user.name")
+     */
+    private getFieldValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTable<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviTable<any>, "[hviTable]", ["hviTable"], { "zebra": { "alias": "zebra"; "required": false; }; "border": { "alias": "border"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "value": { "alias": "value"; "required": false; }; "sortField": { "alias": "sortField"; "required": false; }; "sortOrder": { "alias": "sortOrder"; "required": false; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; }; "paginator": { "alias": "paginator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "first": { "alias": "first"; "required": false; }; }, { "sortChange": "sortChange"; "pageChange": "pageChange"; "currentPageChange": "currentPageChange"; }, never, never, true, never>;
+    static ngAcceptInputType_zebra: unknown;
+    static ngAcceptInputType_border: unknown;
+    static ngAcceptInputType_hover: unknown;
+    static ngAcceptInputType_stickyHeader: unknown;
+    static ngAcceptInputType_paginator: unknown;
+    static ngAcceptInputType_rows: unknown;
+    static ngAcceptInputType_first: unknown;
+}
+
+/**
+ * @summary
+ * Directive for sorterbare tabell-header celler.
+ * Kommuniserer automatisk med parent HviTable for å håndtere sortering.
+ *
+ * @example
+ * ```html
+ * <table hviTable [value]="persons" #table>
+ *   <thead>
+ *     <tr>
+ *       <th hviSortableColumn="navn">
+ *         <button>Navn</button>
+ *       </th>
+ *       <th>Epost</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     @for (person of table.sortedValue(); track person.id) {
+ *       <tr>
+ *         <td>{{ person.navn }}</td>
+ *         <td>{{ person.epost }}</td>
+ *       </tr>
+ *     }
+ *   </tbody>
+ * </table>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/docs/table/code}
+ */
+declare class HviSortableColumn {
+    private table;
+    /**
+     * Feltet som denne kolonnen sorterer etter.
+     * Må matche property-navn i data-objektene.
+     */
+    field: string;
+    /**
+     * Henter sorteringsretning fra parent table.
+     */
+    get sortDirection(): SortDirection;
+    onClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviSortableColumn, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviSortableColumn, "th[hviSortableColumn]", never, { "field": { "alias": "hviSortableColumn"; "required": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * TabPanel inneholder innholdet som vises når en tilhørende Tab er aktiv.
+ *
+ * @example
+ * ```html
+ * <hvi-tab-panel value="tab1">
+ *   Innhold for tab 1
+ * </hvi-tab-panel>
+ * ```
+ */
+declare class HviTabPanel {
+    templateRef: TemplateRef<unknown>;
+    /** When this value is selected, render this TabPanel. Must match the value of a Tab. */
+    value: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTabPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviTabPanel, "hvi-tab-panel", never, { "value": { "alias": "value"; "required": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Tab er en enkelt fane som kan klikkes for å vise tilhørende TabPanel.
+ *
+ * @example
+ * ```html
+ * <hvi-tab value="tab1">Tab 1</hvi-tab>
+ * ```
+ */
+declare class HviTab {
+    templateRef: TemplateRef<unknown>;
+    /** Unique value that will be set in the Tabs components state when the tab is activated */
+    value: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviTab, "hvi-tab", never, { "value": { "alias": "value"; "required": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Tabs lar brukerne navigere mellom relaterte deler av innholdet,
+ * der én del vises om gangen.
+ *
+ * @example
+ * ```html
+ * <hvi-tabs defaultValue="tab1">
+ *   <hvi-tab value="tab1">Tab 1</hvi-tab>
+ *   <hvi-tab value="tab2">Tab 2</hvi-tab>
+ *   <hvi-tab-panel value="tab1">Content 1</hvi-tab-panel>
+ *   <hvi-tab-panel value="tab2">Content 2</hvi-tab-panel>
+ * </hvi-tabs>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/docs/tabs/overview}
+ */
+declare class HviTabs implements AfterContentInit {
+    uTabsRef: ElementRef;
+    tabs: QueryList<HviTab>;
+    panels: QueryList<HviTabPanel>;
+    /** Controlled state for Tabs component */
+    value?: string;
+    /** Default selected tab value */
+    defaultValue?: string;
+    /** Callback when selected tab changes */
+    valueChange: EventEmitter<string>;
+    ngAfterContentInit(): void;
+    private setupTabs;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTabs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviTabs, "hvi-tabs", never, { "value": { "alias": "value"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; }, { "valueChange": "valueChange"; }, ["tabs", "panels"], ["*"], true, never>;
+}
+
 /**
  * @summary
  * Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.
@@ -1049,5 +1606,165 @@ declare class HviTag {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviTag, "hvi-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
-export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviParagraph, HviPopover, HviSelect, HviSkeleton, HviTag, HviValidationKit, HviValidationMessage, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
-export type { HviErrorSummaryItem, HviErrorSummaryMessages, HviValidationMessages, HviValidatorBundle, HviValidatorConfig };
+/**
+ * @summary
+ * ToggleGroup collects related options. The component consists of a group of
+ * buttons that are connected, where only one button can be selected at a time.
+ *
+ * @example
+ * ```html
+ * <hvi-toggle-group [(value)]="selected" variant="primary">
+ *   <button hviToggleGroupItem value="innboks">Innboks</button>
+ *   <button hviToggleGroupItem value="utkast">Utkast</button>
+ *   <button hviToggleGroupItem value="sendt">Sendt</button>
+ * </hvi-toggle-group>
+ * ```
+ *
+ * @example
+ * With reactive forms:
+ * ```html
+ * <hvi-toggle-group formControlName="view" variant="secondary">
+ *   <button hviToggleGroupItem value="list">Liste</button>
+ *   <button hviToggleGroupItem value="grid">Rutenett</button>
+ * </hvi-toggle-group>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/toggle-group}
+ */
+declare class HviToggleGroup implements ControlValueAccessor {
+    private items;
+    private readonly registeredItems;
+    /** The variant of the toggle group */
+    readonly _variant: i0.WritableSignal<"primary" | "secondary">;
+    /** Form element name */
+    readonly _name: i0.WritableSignal<string>;
+    /** The currently selected value */
+    private readonly _value;
+    /** Event emitted when value changes */
+    valueChange: EventEmitter<string>;
+    private onChange;
+    private onTouched;
+    set value(val: string | undefined);
+    set variant(val: 'primary' | 'secondary');
+    set name(val: string);
+    /** Register an item with this group */
+    registerItem(item: HviToggleGroupItem): void;
+    /** Unregister an item from this group */
+    unregisterItem(item: HviToggleGroupItem): void;
+    /** Select an item and update all states */
+    selectItem(item: HviToggleGroupItem): void;
+    /** Handle keyboard navigation (roving tabindex) */
+    handleKeydown(event: KeyboardEvent, currentItem: HviToggleGroupItem): void;
+    private updateItemStates;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviToggleGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviToggleGroup, "hvi-toggle-group", never, { "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueChange": "valueChange"; }, ["items"], ["*"], true, never>;
+}
+declare const HviToggleGroupItemToken: unique symbol;
+
+/**
+ * @summary
+ * ToggleGroupItem is a button directive for use inside HviToggleGroup.
+ *
+ * @example
+ * ```html
+ * <hvi-toggle-group [(value)]="selected">
+ *   <button hviToggleGroupItem value="option1">Option 1</button>
+ *   <button hviToggleGroupItem value="option2">Option 2</button>
+ * </hvi-toggle-group>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/no/components/toggle-group}
+ */
+declare class HviToggleGroupItem implements OnInit, OnDestroy {
+    readonly group: HviToggleGroup;
+    private readonly elementRef;
+    /** Unique ID for this item */
+    readonly id: string;
+    /** The value of this toggle item */
+    value: string;
+    /** Toggle icon-only styling */
+    icon: boolean;
+    /** Internal signal for tracking selection state */
+    private readonly _isSelected;
+    /** Whether this item is currently selected */
+    readonly isSelected: i0.Signal<boolean>;
+    /** Computed variant based on selection state */
+    readonly computedVariant: i0.Signal<"primary" | "secondary" | "tertiary">;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Update the selected state (called by parent group) */
+    setSelected(selected: boolean): void;
+    /** Focus this item's button element */
+    focus(): void;
+    protected onClick(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviToggleGroupItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviToggleGroupItem, "button[hviToggleGroupItem]", never, { "value": { "alias": "value"; "required": true; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_icon: unknown;
+}
+
+/**
+ * @summary
+ * Tooltip viser kort informasjon når brukeren holder musepekeren over
+ * eller fokuserer på et element. Den brukes til sekundær informasjon,
+ * for eksempel til å forklare hva et symbol betyr.
+ *
+ * @example
+ * ```html
+ * <button hviButton hviTooltip="Kopier">📋</button>
+ * <span hviTooltip="Organisasjonsnummer">Org.nr.</span>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/tooltip/code}
+ */
+declare class HviTooltip implements OnInit, OnDestroy {
+    private el;
+    private renderer;
+    private tooltipElement;
+    private tooltipId;
+    private cleanupAutoUpdate?;
+    private showTimeout?;
+    private hideTimeout?;
+    private isOpen;
+    private listeners;
+    /** Tooltip content */
+    hviTooltip: string;
+    /** Placement of the tooltip relative to the trigger */
+    tooltipPlacement: Placement;
+    /** Enable auto placement when there's not enough space */
+    tooltipAutoPlacement: boolean;
+    /**
+     * Override ARIA attribute type.
+     * - 'describedby': tooltip describes the element (default for elements with text)
+     * - 'labelledby': tooltip labels the element (default for icon-only buttons)
+     */
+    tooltipType?: 'describedby' | 'labelledby';
+    /** Delay before showing tooltip (ms) */
+    tooltipShowDelay: number;
+    /** Delay before hiding tooltip (ms) */
+    tooltipHideDelay: number;
+    private get hostElement();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private createTooltipElement;
+    private setupTriggerAttributes;
+    private detectAriaType;
+    private setupEventListeners;
+    private scheduleShow;
+    private scheduleHide;
+    private clearTimeouts;
+    private show;
+    private hide;
+    private updatePosition;
+    private startAutoUpdate;
+    private stopAutoUpdate;
+    private cleanup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTooltip, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviTooltip, "[hviTooltip]", never, { "hviTooltip": { "alias": "hviTooltip"; "required": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "tooltipAutoPlacement": { "alias": "tooltipAutoPlacement"; "required": false; }; "tooltipType": { "alias": "tooltipType"; "required": false; }; "tooltipShowDelay": { "alias": "tooltipShowDelay"; "required": false; }; "tooltipHideDelay": { "alias": "tooltipHideDelay"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldCounter, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviPagination, HviParagraph, HviPopover, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
+export type { HviErrorSummaryItem, HviErrorSummaryMessages, HviValidationMessages, HviValidatorBundle, HviValidatorConfig, PageChangeEvent, PaginationItem, SortDirection, SpinnerSize, TablePageEvent, TableSortEvent };