@helsevestikt/hviktor-angular 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helsevestikt/hviktor-angular",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <22.0.0",

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

@@ -970,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.
  *
@@ -1216,6 +1302,222 @@ declare class HviSpinner {
     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.
  *
@@ -1464,5 +1766,5 @@ declare class HviTooltip implements OnInit, OnDestroy {
     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, HviParagraph, HviPopover, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSpinner, HviTab, HviTabPanel, 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, SpinnerSize };
+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 };