@helsevestikt/hviktor-angular 0.0.15 → 0.0.16

package/fesm2022/helsevestikt-hviktor-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, ViewChild, DestroyRef, signal, input, computed, HostBinding, ChangeDetectorRef, ViewEncapsulation, ContentChildren, forwardRef, Renderer2 } from '@angular/core';
+import { Input, Component, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, ViewChild, DestroyRef, signal, input, computed, HostBinding, ChangeDetectorRef, ViewEncapsulation, numberAttribute, ContentChildren, forwardRef, Renderer2 } from '@angular/core';
 import '@u-elements/u-details';
 import { FormGroupDirective, NgControl, ControlContainer, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
@@ -2021,6 +2021,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }]
         }] });
 
+/**
+ * @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}
+ */
+class HviPagination {
+    /** Totalt antall elementer som pagineres */
+    set totalItems(value) {
+        this._totalItems.set(value);
+    }
+    /** Antall elementer per side */
+    set pageSize(value) {
+        this._pageSize.set(value);
+    }
+    /** Nåværende side (1-indeksert) */
+    set currentPage(value) {
+        this._currentPage.set(value);
+    }
+    /** Antall sider som skal vises rundt nåværende side */
+    siblingCount = 1;
+    /** Vis alltid første og siste side */
+    showEdges = true;
+    /** Vis "Forrige" og "Neste" tekst på knappene */
+    showPreviousNextLabels = true;
+    /** Aria-label for hele navigasjonen */
+    ariaLabel = 'Sidenavigering';
+    /** Tekst for forrige-knappen */
+    previousLabel = 'Forrige';
+    /** Tekst for neste-knappen */
+    nextLabel = 'Neste';
+    /** Event som emitteres når siden endres */
+    currentPageChange = new EventEmitter();
+    /** Event som emitteres med mer detaljer om sideendring */
+    pageChange = new EventEmitter();
+    // Internal signals
+    _totalItems = signal(0, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
+    _pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+    _currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
+    /** Beregnet totalt antall sider */
+    totalPages = computed(() => {
+        return Math.max(1, Math.ceil(this._totalItems() / this._pageSize()));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    /** Er vi på første side? */
+    isFirstPage = computed(() => this._currentPage() <= 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+    /** Er vi på siste side? */
+    isLastPage = computed(() => this._currentPage() >= this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+    /** Beregner hvilke elementer som skal vises i pagineringen */
+    paginationItems = computed(() => {
+        const current = this._currentPage();
+        const total = this.totalPages();
+        const siblings = this.siblingCount;
+        if (total <= 1)
+            return [];
+        const items = [];
+        // Beregn range rundt nåværende side
+        const leftSibling = Math.max(current - siblings, 1);
+        const rightSibling = Math.min(current + siblings, total);
+        const showLeftEllipsis = this.showEdges && leftSibling > 2;
+        const showRightEllipsis = this.showEdges && rightSibling < total - 1;
+        // Første side (hvis showEdges)
+        if (this.showEdges && leftSibling > 1) {
+            items.push({ type: 'page', page: 1 });
+            if (showLeftEllipsis) {
+                items.push({ type: 'ellipsis' });
+            }
+        }
+        // Sider rundt nåværende
+        for (let page = leftSibling; page <= rightSibling; page++) {
+            items.push({ type: 'page', page });
+        }
+        // Siste side (hvis showEdges)
+        if (this.showEdges && rightSibling < total) {
+            if (showRightEllipsis) {
+                items.push({ type: 'ellipsis' });
+            }
+            items.push({ type: 'page', page: total });
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "paginationItems" }] : []));
+    /** Gå til en spesifikk side */
+    goToPage(page) {
+        const previousPage = this._currentPage();
+        const newPage = Math.max(1, Math.min(page, this.totalPages()));
+        if (newPage !== previousPage) {
+            this._currentPage.set(newPage);
+            this.currentPageChange.emit(newPage);
+            this.pageChange.emit({ page: newPage, previousPage });
+        }
+    }
+    /** Gå til forrige side */
+    goToPrevious() {
+        if (!this.isFirstPage()) {
+            this.goToPage(this._currentPage() - 1);
+        }
+    }
+    /** Gå til neste side */
+    goToNext() {
+        if (!this.isLastPage()) {
+            this.goToPage(this._currentPage() + 1);
+        }
+    }
+    /** Gå til første side */
+    goToFirst() {
+        this.goToPage(1);
+    }
+    /** Gå til siste side */
+    goToLast() {
+        this.goToPage(this.totalPages());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HviPagination, isStandalone: true, selector: "hvi-pagination", inputs: { totalItems: ["totalItems", "totalItems", numberAttribute], pageSize: ["pageSize", "pageSize", numberAttribute], currentPage: ["currentPage", "currentPage", numberAttribute], siblingCount: ["siblingCount", "siblingCount", numberAttribute], showEdges: ["showEdges", "showEdges", booleanAttribute], showPreviousNextLabels: ["showPreviousNextLabels", "showPreviousNextLabels", booleanAttribute], ariaLabel: "ariaLabel", previousLabel: "previousLabel", nextLabel: "nextLabel" }, outputs: { currentPageChange: "currentPageChange", pageChange: "pageChange" }, host: { classAttribute: "hvi-pagination" }, ngImport: i0, template: `
+    <nav [attr.aria-label]="ariaLabel" class="ds-pagination">
+      <ul>
+        <!-- Forrige -->
+        <li>
+          <button
+            class="ds-button"
+            data-variant="tertiary"
+            type="button"
+            [attr.aria-label]="previousLabel"
+            [disabled]="isFirstPage()"
+            (click)="goToPrevious()"
+          >
+            {{ showPreviousNextLabels ? previousLabel : '' }}
+          </button>
+        </li>
+
+        <!-- Sidetall -->
+        @for (item of paginationItems(); track $index) {
+          @if (item.type === 'page') {
+            <li>
+              <button
+                class="ds-button"
+                [attr.data-variant]="item.page === _currentPage() ? 'primary' : 'tertiary'"
+                type="button"
+                [attr.aria-label]="'Side ' + item.page"
+                [attr.aria-current]="item.page === _currentPage() ? 'page' : null"
+                (click)="goToPage(item.page)"
+              >
+                {{ item.page }}
+              </button>
+            </li>
+          } @else if (item.type === 'ellipsis') {
+            <li></li>
+          }
+        }
+
+        <!-- Neste -->
+        <li>
+          <button
+            class="ds-button"
+            data-variant="tertiary"
+            type="button"
+            [attr.aria-label]="nextLabel"
+            [disabled]="isLastPage()"
+            (click)="goToNext()"
+          >
+            {{ showPreviousNextLabels ? nextLabel : '' }}
+          </button>
+        </li>
+      </ul>
+    </nav>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviPagination, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-pagination',
+                    standalone: true,
+                    template: `
+    <nav [attr.aria-label]="ariaLabel" class="ds-pagination">
+      <ul>
+        <!-- Forrige -->
+        <li>
+          <button
+            class="ds-button"
+            data-variant="tertiary"
+            type="button"
+            [attr.aria-label]="previousLabel"
+            [disabled]="isFirstPage()"
+            (click)="goToPrevious()"
+          >
+            {{ showPreviousNextLabels ? previousLabel : '' }}
+          </button>
+        </li>
+
+        <!-- Sidetall -->
+        @for (item of paginationItems(); track $index) {
+          @if (item.type === 'page') {
+            <li>
+              <button
+                class="ds-button"
+                [attr.data-variant]="item.page === _currentPage() ? 'primary' : 'tertiary'"
+                type="button"
+                [attr.aria-label]="'Side ' + item.page"
+                [attr.aria-current]="item.page === _currentPage() ? 'page' : null"
+                (click)="goToPage(item.page)"
+              >
+                {{ item.page }}
+              </button>
+            </li>
+          } @else if (item.type === 'ellipsis') {
+            <li></li>
+          }
+        }
+
+        <!-- Neste -->
+        <li>
+          <button
+            class="ds-button"
+            data-variant="tertiary"
+            type="button"
+            [attr.aria-label]="nextLabel"
+            [disabled]="isLastPage()"
+            (click)="goToNext()"
+          >
+            {{ showPreviousNextLabels ? nextLabel : '' }}
+          </button>
+        </li>
+      </ul>
+    </nav>
+  `,
+                    host: {
+                        class: 'hvi-pagination',
+                    },
+                }]
+        }], propDecorators: { totalItems: [{
+                type: Input,
+                args: [{ transform: numberAttribute, required: true }]
+            }], pageSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], currentPage: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], siblingCount: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], showEdges: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showPreviousNextLabels: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaLabel: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], currentPageChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }] } });
+
 /**
  * Paragraph is used for continuous text and is typically applied in articles, components, help text, and similar content.
  *
@@ -2608,6 +2875,442 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * @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}
+ */
+class HviTable {
+    /** Gir tabellen zebrastriper (annenhver rad har alternativ bakgrunn) */
+    zebra = false;
+    /** Gir tabellen en avrundet kant rundt */
+    border = false;
+    /** Gir tabellen hover-effekt på rader */
+    hover = false;
+    /** Gjør tabellens header sticky (fester seg til toppen ved scrolling) */
+    stickyHeader = false;
+    /** Data som skal vises i tabellen */
+    set value(data) {
+        this._value.set(data ?? []);
+    }
+    /** Felt som data skal sorteres etter (valgfri initial verdi) */
+    set sortField(field) {
+        if (field) {
+            this._sortField.set(field);
+        }
+    }
+    /** Sorteringsretning: 1 = ascending, -1 = descending, 0 = none */
+    set sortOrder(order) {
+        this._sortOrder.set(order);
+    }
+    /** Felt som global søk skal søke i */
+    globalFilterFields = [];
+    /** Aktiver paginering */
+    paginator = false;
+    /** Antall rader per side (når paginator er aktivert) */
+    set rows(value) {
+        this._rows.set(value);
+    }
+    /** Indeks for første rad som vises (0-basert) */
+    set first(value) {
+        this._first.set(value);
+    }
+    /** Event som emitteres når sortering endres */
+    sortChange = new EventEmitter();
+    /** Event som emitteres når side endres */
+    pageChange = new EventEmitter();
+    /** Event som emitteres med nåværende side (1-basert, for two-way binding) */
+    currentPageChange = new EventEmitter();
+    // Internal signals
+    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _sortField = signal(null, ...(ngDevMode ? [{ debugName: "_sortField" }] : []));
+    _sortOrder = signal(0, ...(ngDevMode ? [{ debugName: "_sortOrder" }] : [])); // 0 = none, 1 = asc, -1 = desc
+    _globalFilter = signal(null, ...(ngDevMode ? [{ debugName: "_globalFilter" }] : []));
+    _rows = signal(10, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
+    _first = signal(0, ...(ngDevMode ? [{ debugName: "_first" }] : []));
+    /** Kun sortert data (uten søk) - for bakoverkompatibilitet */
+    sortedValue = computed(() => {
+        return this.applySorting(this._value());
+    }, ...(ngDevMode ? [{ debugName: "sortedValue" }] : []));
+    /** Filtrert og sortert data - bruk denne i template */
+    filteredValue = computed(() => {
+        const data = this._value();
+        const filtered = this.applyGlobalFilter(data);
+        return this.applySorting(filtered);
+    }, ...(ngDevMode ? [{ debugName: "filteredValue" }] : []));
+    /** Paginert, filtrert og sortert data - bruk denne når paginator er aktivert */
+    paginatedValue = computed(() => {
+        const data = this.filteredValue();
+        if (!this.paginator)
+            return data;
+        const first = this._first();
+        const rows = this._rows();
+        return data.slice(first, first + rows);
+    }, ...(ngDevMode ? [{ debugName: "paginatedValue" }] : []));
+    /** Antall rader etter søk */
+    totalFilteredRecords = computed(() => this.filteredValue().length, ...(ngDevMode ? [{ debugName: "totalFilteredRecords" }] : []));
+    /** Antall rader totalt (før søk) */
+    totalRecords = computed(() => this._value().length, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    /** Totalt antall sider */
+    pageCount = computed(() => {
+        if (!this.paginator)
+            return 1;
+        return Math.max(1, Math.ceil(this.totalFilteredRecords() / this._rows()));
+    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+    /** Nåværende side (1-basert) */
+    currentPage = computed(() => {
+        return Math.floor(this._first() / this._rows()) + 1;
+    }, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    /** Er vi på første side? */
+    isFirstPage = computed(() => this._first() === 0, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+    /** Er vi på siste side? */
+    isLastPage = computed(() => {
+        return this._first() + this._rows() >= this.totalFilteredRecords();
+    }, ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+    /** Nåværende sorteringsfelt */
+    currentSortField = computed(() => this._sortField(), ...(ngDevMode ? [{ debugName: "currentSortField" }] : []));
+    /** Nåværende sorteringsretning som SortDirection */
+    currentSortDirection = computed(() => {
+        const order = this._sortOrder();
+        if (order === 1)
+            return 'ascending';
+        if (order === -1)
+            return 'descending';
+        return 'none';
+    }, ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
+    /** Nåværende søkeverdi */
+    currentGlobalFilter = computed(() => this._globalFilter(), ...(ngDevMode ? [{ debugName: "currentGlobalFilter" }] : []));
+    /**
+     * Global søk - søker på tvers av alle felt i globalFilterFields.
+     * @param value Søkeverdi
+     */
+    filterGlobal(value) {
+        this._globalFilter.set(value?.trim() || null);
+    }
+    /**
+     * Nullstiller søk.
+     */
+    clearFilter() {
+        this._globalFilter.set(null);
+    }
+    /**
+     * Nullstiller hele tabellen (sortering og søk).
+     */
+    clear() {
+        this._sortField.set(null);
+        this._sortOrder.set(0);
+        this._globalFilter.set(null);
+        this._first.set(0);
+    }
+    // ========== Paginering ==========
+    /**
+     * Gå til en spesifikk side (1-basert).
+     */
+    goToPage(page) {
+        const totalPages = this.pageCount();
+        const validPage = Math.max(1, Math.min(page, totalPages));
+        const newFirst = (validPage - 1) * this._rows();
+        if (newFirst !== this._first()) {
+            this._first.set(newFirst);
+            this.emitPageEvent();
+        }
+    }
+    /**
+     * Gå til første side.
+     */
+    goToFirstPage() {
+        this.goToPage(1);
+    }
+    /**
+     * Gå til siste side.
+     */
+    goToLastPage() {
+        this.goToPage(this.pageCount());
+    }
+    /**
+     * Gå til forrige side.
+     */
+    goToPreviousPage() {
+        if (!this.isFirstPage()) {
+            this.goToPage(this.currentPage() - 1);
+        }
+    }
+    /**
+     * Gå til neste side.
+     */
+    goToNextPage() {
+        if (!this.isLastPage()) {
+            this.goToPage(this.currentPage() + 1);
+        }
+    }
+    /**
+     * Endre antall rader per side.
+     */
+    setRows(rows) {
+        this._rows.set(rows);
+        this._first.set(0); // Reset til første side
+        this.emitPageEvent();
+    }
+    emitPageEvent() {
+        this.pageChange.emit({
+            first: this._first(),
+            rows: this._rows(),
+            page: this.currentPage(),
+            pageCount: this.pageCount(),
+        });
+        this.currentPageChange.emit(this.currentPage());
+    }
+    /**
+     * Sorterer tabellen etter et felt.
+     * Kalles av hviSortableColumn directive.
+     */
+    sort(field) {
+        const currentField = this._sortField();
+        const currentOrder = this._sortOrder();
+        let newOrder;
+        if (currentField === field) {
+            // Samme felt - sykl gjennom: asc → desc → none
+            if (currentOrder === 1) {
+                newOrder = -1;
+            }
+            else if (currentOrder === -1) {
+                newOrder = 0;
+            }
+            else {
+                newOrder = 1;
+            }
+        }
+        else {
+            // Nytt felt - start med ascending
+            newOrder = 1;
+        }
+        this._sortField.set(newOrder === 0 ? null : field);
+        this._sortOrder.set(newOrder);
+        const direction = newOrder === 1 ? 'ascending' : newOrder === -1 ? 'descending' : 'none';
+        this.sortChange.emit({ field, direction });
+    }
+    /**
+     * Henter sorteringsretning for et spesifikt felt.
+     * Brukes av hviSortableColumn for å vise riktig aria-sort.
+     */
+    getSortDirection(field) {
+        if (this._sortField() !== field) {
+            return 'none';
+        }
+        return this.currentSortDirection();
+    }
+    // ========== Private methods ==========
+    applyGlobalFilter(data) {
+        const globalFilter = this._globalFilter();
+        const globalFields = this.globalFilterFields;
+        if (!globalFilter || globalFields.length === 0 || data.length === 0) {
+            return data;
+        }
+        const searchTerm = globalFilter.toLowerCase();
+        return data.filter((item) => {
+            return globalFields.some((field) => {
+                const value = this.getFieldValue(item, field);
+                return String(value ?? '')
+                    .toLowerCase()
+                    .includes(searchTerm);
+            });
+        });
+    }
+    applySorting(data) {
+        const field = this._sortField();
+        const order = this._sortOrder();
+        if (!field || order === 0 || data.length === 0) {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const valueA = this.getFieldValue(a, field);
+            const valueB = this.getFieldValue(b, field);
+            let comparison = 0;
+            if (valueA == null && valueB == null) {
+                comparison = 0;
+            }
+            else if (valueA == null) {
+                comparison = -1;
+            }
+            else if (valueB == null) {
+                comparison = 1;
+            }
+            else if (typeof valueA === 'string' && typeof valueB === 'string') {
+                comparison = valueA.localeCompare(valueB, 'nb');
+            }
+            else if (typeof valueA === 'number' && typeof valueB === 'number') {
+                comparison = valueA - valueB;
+            }
+            else {
+                comparison = String(valueA).localeCompare(String(valueB), 'nb');
+            }
+            return order * comparison;
+        });
+    }
+    /**
+     * Henter verdi fra et objekt basert på felt-path (støtter nested: "user.name")
+     */
+    getFieldValue(obj, field) {
+        const keys = field.split('.');
+        let value = obj;
+        for (const key of keys) {
+            if (value == null)
+                return null;
+            value = value[key];
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.2", type: HviTable, isStandalone: true, selector: "[hviTable]", inputs: { zebra: ["zebra", "zebra", booleanAttribute], border: ["border", "border", booleanAttribute], hover: ["hover", "hover", booleanAttribute], stickyHeader: ["stickyHeader", "stickyHeader", booleanAttribute], value: "value", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute] }, outputs: { sortChange: "sortChange", pageChange: "pageChange", currentPageChange: "currentPageChange" }, host: { properties: { "attr.data-zebra": "zebra || null", "attr.data-border": "border || null", "attr.data-hover": "hover || null", "attr.data-sticky-header": "stickyHeader || null" }, classAttribute: "ds-table" }, exportAs: ["hviTable"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviTable]',
+                    standalone: true,
+                    exportAs: 'hviTable',
+                    host: {
+                        class: 'ds-table',
+                        '[attr.data-zebra]': 'zebra || null',
+                        '[attr.data-border]': 'border || null',
+                        '[attr.data-hover]': 'hover || null',
+                        '[attr.data-sticky-header]': 'stickyHeader || null',
+                    },
+                }]
+        }], propDecorators: { zebra: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], border: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], stickyHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], globalFilterFields: [{
+                type: Input
+            }], paginator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], rows: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], first: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], currentPageChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @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}
+ */
+class HviSortableColumn {
+    table = inject(HviTable, { optional: true });
+    /**
+     * Feltet som denne kolonnen sorterer etter.
+     * Må matche property-navn i data-objektene.
+     */
+    field;
+    /**
+     * Henter sorteringsretning fra parent table.
+     */
+    get sortDirection() {
+        return this.table?.getSortDirection(this.field) ?? 'none';
+    }
+    onClick(event) {
+        const target = event.target;
+        // Bare håndter klikk på button inne i th
+        if (target.tagName === 'BUTTON' || target.closest('button')) {
+            this.table?.sort(this.field);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviSortableColumn, isStandalone: true, selector: "th[hviSortableColumn]", inputs: { field: ["hviSortableColumn", "field"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "sortDirection" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviSortableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[hviSortableColumn]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-sort]': 'sortDirection',
+                    },
+                }]
+        }], propDecorators: { field: [{
+                type: Input,
+                args: [{ required: true, alias: 'hviSortableColumn' }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 /**
  * TabPanel inneholder innholdet som vises når en tilhørende Tab er aktiv.
  *
@@ -3386,5 +4089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=helsevestikt-hviktor-angular.mjs.map