@helsevestikt/hviktor-angular 0.0.3

package/fesm2022/helsevestikt-hviktor-angular.mjs

@@ -0,0 +1,1776 @@
+import * as i0 from '@angular/core';
+import { Input, Component, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, ViewChild, DestroyRef, HostBinding, ViewEncapsulation } from '@angular/core';
+import '@u-elements/u-details';
+import { FormGroupDirective, NgControl, ControlContainer, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/common/http';
+
+/**
+ * Alert provides users with information that is especially important for them to see and understand.
+ * The component is designed to capture users' attention.
+ * The text in the alert should be short and clear.
+ *
+ * @example
+ * ```html
+ * <hvi-alert color="warning">
+ *  Dette er et advarselsvarsel!
+ * </hvi-alert>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/alert/code/
+ */
+class HviAlert {
+    /** Sets the type of alert by changing the color and  */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviAlert, isStandalone: true, selector: "hvi-alert", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-alert" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviAlert, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-alert',
+                    standalone: true,
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-alert',
+                        '[attr.data-color]': 'color',
+                    },
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+/**
+ * Avatar displays an image, initials, or icon for a person, entity, or profile.
+ *
+ * @example
+ * ```html
+ * <hvi-avatar
+ *  ariaLabel="Ola Nordmann"
+ *  variant="circle"
+ *  initials="ON"
+ *  size="md"
+ *  color="brand1">
+ * </hvi-avatar>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/avatar/code/
+ */
+class HviAvatar {
+    /** The name of the person the avatar represents */
+    ariaLabel;
+    /** The shape of the avatar */
+    variant;
+    /** Initials displayed inside the avatar */
+    initials;
+    /** The size of the avatar */
+    size;
+    /** The color theme of the avatar */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviAvatar, isStandalone: true, selector: "hvi-avatar", inputs: { ariaLabel: "ariaLabel", variant: "variant", initials: "initials", size: "size", color: "color" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel ?? null", "attr.data-variant": "variant ?? null", "attr.data-initials": "initials ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-avatar" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviAvatar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-avatar',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-avatar',
+                        role: 'img',
+                        '[attr.aria-label]': 'ariaLabel ?? null',
+                        '[attr.data-variant]': 'variant ?? null',
+                        '[attr.data-initials]': 'initials ?? null',
+                        '[attr.data-size]': 'size ?? null',
+                        '[attr.data-color]': 'color ?? null',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class HviBadgePosition {
+    /** Overlap of the badge */
+    overlap = 'rectangle';
+    /** Placement of the badge */
+    placement = 'top-right';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBadgePosition, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviBadgePosition, isStandalone: true, selector: "hvi-badge-position", inputs: { overlap: "overlap", placement: "placement" }, host: { properties: { "attr.data-overlap": "overlap", "attr.data-placement": "placement" }, classAttribute: "ds-badge--position" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBadgePosition, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-badge-position',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-badge--position',
+                        '[attr.data-overlap]': 'overlap',
+                        '[attr.data-placement]': 'placement',
+                    },
+                }]
+        }], propDecorators: { overlap: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }] } });
+
+class HviBadge {
+    /** The variants of the badge */
+    variant;
+    /** count text of the badge*/
+    count;
+    /** The color theme of the badge */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviBadge, isStandalone: true, selector: "hvi-badge", inputs: { variant: "variant", count: "count", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-count": "count ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-badge" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-badge',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-badge',
+                        '[attr.data-variant]': 'variant ?? null',
+                        '[attr.data-count]': 'count ?? null',
+                        '[attr.data-color]': 'color ?? null',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <nav hviBreadcrumbs
+ *      ariaLabel="Du er her:"
+ *      [backLink]="{
+ *          label: 'Nivå 3',
+ *          href: '#',
+ *          ariaLabel: 'Tilbake til Nivå 3'
+ *      }"
+ *      [items]="[
+ *           { label: 'Nivå 1', href: '#' },
+ *           { label: 'Nivå 2', href: '#' },
+ *           { label: 'Nivå 3', href: '#' },
+ *           { label: 'Nivå 4', href: '#' }
+ *       ]"
+ * ></nav>
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/breadcrumbs/overview
+ */
+class HviBreadcrumbs {
+    /** Accessible label for the breadcrumb navigation */
+    ariaLabel = 'Du er her:';
+    /** Optional back link object */
+    backLink;
+    /** Array of breadcrumb items */
+    items = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HviBreadcrumbs, isStandalone: true, selector: "nav[hviBreadcrumbs]", inputs: { ariaLabel: "ariaLabel", backLink: "backLink", items: "items" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel ?? null" }, classAttribute: "ds-breadcrumbs" }, ngImport: i0, template: `
+    <!-- Back link (optional) -->
+    @if (backLink) {
+      <a class="ds-link" [href]="backLink.href" [attr.aria-label]="backLink.ariaLabel ?? null">
+        {{ backLink.label }}
+      </a>
+    }
+
+    <ol>
+      @for (item of items; let last = $last; track item) {
+        <li>
+          <a
+            class="ds-link"
+            [href]="item.href"
+            [attr.aria-label]="item.ariaLabel ?? null"
+            [attr.aria-current]="last ? 'page' : null"
+          >
+            {{ item.label }}
+          </a>
+        </li>
+      }
+    </ol>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviBreadcrumbs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nav[hviBreadcrumbs]',
+                    standalone: true,
+                    template: `
+    <!-- Back link (optional) -->
+    @if (backLink) {
+      <a class="ds-link" [href]="backLink.href" [attr.aria-label]="backLink.ariaLabel ?? null">
+        {{ backLink.label }}
+      </a>
+    }
+
+    <ol>
+      @for (item of items; let last = $last; track item) {
+        <li>
+          <a
+            class="ds-link"
+            [href]="item.href"
+            [attr.aria-label]="item.ariaLabel ?? null"
+            [attr.aria-current]="last ? 'page' : null"
+          >
+            {{ item.label }}
+          </a>
+        </li>
+      }
+    </ol>
+  `,
+                    host: {
+                        class: 'ds-breadcrumbs',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel ?? null',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], backLink: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }] } });
+
+/**
+ * @summary
+ * Button allows users to perform actions.
+ *
+ * @example
+ * ```html
+ * <button hviButton color="brand1" variant="primary" size="md">
+ *   Click me
+ * </button>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/button/code/
+ */
+class HviButton {
+    /** The size of the button */
+    size;
+    /** Used to change the appearance of the button. */
+    variant;
+    /** The type of button */
+    type;
+    /** The color of the button */
+    color;
+    /** If you have only an icon in the button, you can set icon="true" to make it square.
+     * If you have other content, such as text, the button will automatically have space around the icon.
+     */
+    icon = false;
+    /** Sets the button in a loading state.
+     * Loading indicators such as spinners must be added manually, e.g., with hvi-spinner
+     */
+    loading = false;
+    /** Makes the button full width */
+    fullWidth = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.2", type: HviButton, isStandalone: true, selector: "button[hviButton], a[hviButton]", inputs: { size: "size", variant: "variant", type: "type", color: "color", icon: ["icon", "icon", booleanAttribute], loading: ["loading", "loading", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute] }, host: { properties: { "attr.type": "type", "attr.data-size": "size", "attr.data-variant": "variant", "attr.data-color": "color", "attr.data-fullwidth": "fullWidth ? \"\" : null", "attr.data-icon": "icon ? \"\" : null", "attr.aria-busy": "loading ? \"true\" : null" }, classAttribute: "ds-button" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[hviButton], a[hviButton]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-button',
+                        '[attr.type]': 'type',
+                        '[attr.data-size]': 'size',
+                        '[attr.data-variant]': 'variant',
+                        '[attr.data-color]': 'color',
+                        '[attr.data-fullwidth]': 'fullWidth ? "" : null',
+                        '[attr.data-icon]': 'icon ? "" : null',
+                        '[attr.aria-busy]': 'loading ? "true" : null',
+                    },
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], icon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * Use multiple <div hviCardBlock> elements if you want to divide the card with separators or add images or video that extend to the edge.
+ * Note that when you use <div hviCardBlock>, all content must be placed inside a <div hviCardBlock> and not directly in the Card.
+ *
+ * @example
+ * ```html
+ * <hvi-card variant="tinted" color="brand1" maxWidth="400px">
+ *  <div hviCardBlock>
+ *   <h2>This is a card</h2>
+ *   <p>The content of the card goes here.</p>
+ *  </div>
+ * </hvi-card>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/card/code#with-sections
+ */
+class HviCardBlock {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviCardBlock, isStandalone: true, selector: "[hviCardBlock]", host: { classAttribute: "ds-card__block" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviCardBlock, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviCardBlock]',
+                    standalone: true,
+                    host: { class: 'ds-card__block' },
+                }]
+        }] });
+
+/**
+ * Card highlight information or tasks that are related.
+ * The component comes in two variants and can contain text, images, text fields, buttons, and links.
+ *
+ * @example
+ * ```html
+ * <hvi-card variant="tinted" color="brand1" maxWidth="400px">
+ *  <h2>This is a card</h2>
+ *  <p>The content of the card goes here.</p>
+ * </hvi-card>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/card/overview
+ */
+class HviCard {
+    /** Sets the background of the card */
+    variant;
+    /** The color theme of the card */
+    color;
+    /** Maximum width of the card, for example '320px' or '20rem' */
+    maxWidth;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviCard, isStandalone: true, selector: "hvi-card", inputs: { variant: "variant", color: "color", maxWidth: "maxWidth" }, host: { properties: { "attr.data-variant": "variant", "attr.data-color": "color", "style.max-width": "maxWidth" }, classAttribute: "ds-card" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-card',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-card',
+                        '[attr.data-variant]': 'variant',
+                        '[attr.data-color]': 'color',
+                        '[style.max-width]': 'maxWidth',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }] } });
+
+class HviChipButton {
+    /** Whether the chip is removable*/
+    removable = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviChipButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.2", type: HviChipButton, isStandalone: true, selector: "button[hviChip]", inputs: { removable: ["removable", "removable", booleanAttribute] }, host: { properties: { "attr.data-removable": "removable ? \"true\" : null" }, classAttribute: "ds-chip" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviChipButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[hviChip]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-chip',
+                        '[attr.data-removable]': 'removable ? "true" : null',
+                    },
+                }]
+        }], propDecorators: { removable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class HviChipLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviChipLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviChipLabel, isStandalone: true, selector: "label[hviChip]", host: { classAttribute: "ds-chip" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviChipLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[hviChip]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-chip',
+                    },
+                }]
+        }] });
+
+class HviDetailsContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviDetailsContent, isStandalone: true, selector: "hvi-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetailsContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-details-content',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class HviDetailsSummary {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviDetailsSummary, isStandalone: true, selector: "hvi-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetailsSummary, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-details-summary',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <hvi-details>
+ *   <hvi-details-summary>
+ *     <p size="md">Detaljer</p>
+ *   </hvi-details-summary>
+ *   <hvi-details-content>
+ *     <p>Her er innholdet i detaljene.</p>
+ *   </hvi-details-content>
+ * </hvi-details>
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/details/overview
+ */
+class HviDetails {
+    /** Variant of the details component */
+    variant = 'default';
+    /** Control open state of the details component */
+    open = false;
+    /** Set default open state of the details component */
+    defaultOpen = false;
+    /** Event handler for toggle event */
+    onToggle = () => { };
+    handleToggle(event) {
+        console.log('Toggled!', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviDetails, isStandalone: true, selector: "hvi-details", inputs: { variant: "variant", open: "open", defaultOpen: "defaultOpen", onToggle: "onToggle" }, ngImport: i0, template: ` <u-details
+    #detailsRef
+    class="ds-details"
+    [attr.data-variant]="variant"
+    [attr.defaultOpen]="defaultOpen || undefined"
+    [attr.open]="open || undefined"
+    (toggle)="onToggle($event)"
+  >
+    <u-summary>
+      <ng-content select="hvi-details-summary" />
+    </u-summary>
+    <div>
+      <ng-content select="hvi-details-content" />
+    </div>
+  </u-details>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDetails, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-details',
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    standalone: true,
+                    template: ` <u-details
+    #detailsRef
+    class="ds-details"
+    [attr.data-variant]="variant"
+    [attr.defaultOpen]="defaultOpen || undefined"
+    [attr.open]="open || undefined"
+    (toggle)="onToggle($event)"
+  >
+    <u-summary>
+      <ng-content select="hvi-details-summary" />
+    </u-summary>
+    <div>
+      <ng-content select="hvi-details-content" />
+    </div>
+  </u-details>`,
+                    host: {},
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], defaultOpen: [{
+                type: Input
+            }], onToggle: [{
+                type: Input
+            }] } });
+
+class HviDialogBlock {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDialogBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviDialogBlock, isStandalone: true, selector: "[hviDialogBlock]", host: { classAttribute: "ds-dialog__block" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDialogBlock, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviDialogBlock]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-dialog__block',
+                    },
+                }]
+        }] });
+
+/**
+ * @summary
+ * Dialog allows you to create both modal and non-modal dialogs based on the HTML dialog element.
+ * You have to connect the <dialog> element to a trigger yourself, and handle opening and closing the dialog with JavaScript.
+ *
+ * @example
+ * HTML:
+ * ```html
+ * <dialog hviDialog [id]="exampleDialog" [open]="dialogOpen()" (openChange)="toggleDialog($event)">
+ *  <h3 hviHeading size="md">Example dialog</h3>
+ *  <p hviParagraph>This is an example of a dialog component.</p>
+ *  <button hviButton variant="primary" (click)="closeDialog()">Close dialog</button>
+ * </dialog>
+ * ```
+ *
+ * TypeScript:
+ * ```ts
+ * export class DialogExampleComponent {
+ *  readonly dialogOpen = signal(false);
+ *  toggleDialog(nextState?: boolean): void {
+ *    if (typeof nextState === 'boolean') {
+ *      this.dialogOpen.set(nextState);
+ *      return;
+ *    }
+ *    this.dialogOpen.update((current) => !current);
+ *   }
+ * }
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/dialog/code/
+ */
+class HviDialog {
+    id;
+    set open(value) {
+        this.setOpen(Boolean(value));
+    }
+    get open() {
+        return this.element.open;
+    }
+    modal = true;
+    openChange = new EventEmitter();
+    element = inject((ElementRef)).nativeElement;
+    openModal() {
+        this.setOpen(true);
+    }
+    close() {
+        this.setOpen(false);
+    }
+    handleClose() {
+        this.openChange.emit(false);
+    }
+    handleCancel(event) {
+        event.preventDefault();
+        this.setOpen(false);
+    }
+    setOpen(shouldOpen) {
+        if (shouldOpen) {
+            if (this.element.open) {
+                return;
+            }
+            if (this.modal) {
+                this.element.showModal();
+            }
+            else {
+                this.element.show();
+            }
+            this.openChange.emit(true);
+            return;
+        }
+        if (!this.element.open) {
+            return;
+        }
+        this.element.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviDialog, isStandalone: true, selector: "dialog[hviDialog]", inputs: { id: "id", open: "open", modal: "modal" }, outputs: { openChange: "openChange" }, host: { attributes: { "id": "{{ id }}" }, listeners: { "close": "handleClose()", "cancel": "handleCancel($event)" }, classAttribute: "ds-dialog" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDialog, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dialog[hviDialog]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-dialog',
+                        id: '{{ id }}',
+                    },
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], handleClose: [{
+                type: HostListener,
+                args: ['close']
+            }], handleCancel: [{
+                type: HostListener,
+                args: ['cancel', ['$event']]
+            }] } });
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <hr hviDivider />
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/divider/overview
+ */
+class HviDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviDivider, isStandalone: true, selector: "hr[hviDivider]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "ds-divider" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviDivider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hr[hviDivider]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-divider',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * @summary
+ * Adds submit handling for Angular reactive forms:
+ * - Tracks submitted state
+ * - Marks all controls as touched on submit
+ * - Optionally focuses an ErrorSummary when invalid
+ *
+ * @example
+ * ```html
+ * <[hviForm]></[hviForm]>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/form/code
+ */
+class HviForm {
+    /** Emits when the form has been submitted */
+    hviSubmitted = new EventEmitter();
+    /** True after first submit attempt */
+    submitted = false;
+    /** Optional focus target (e.g. HviErrorSummaryComponent) */
+    focusOnInvalid;
+    // Optional injection: present when the form uses [formGroup] and ReactiveFormsModule is in scope
+    formGroupDir = inject(FormGroupDirective, { optional: true });
+    onSubmit(event) {
+        this.submitted = true;
+        this.hviSubmitted.emit();
+        const form = this.formGroupDir?.form;
+        if (!form)
+            return;
+        form.markAllAsTouched();
+        if (form.invalid) {
+            event.preventDefault();
+            queueMicrotask(() => this.focusOnInvalid?.focus?.());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviForm, isStandalone: true, selector: "form[hviForm]", inputs: { focusOnInvalid: "focusOnInvalid" }, outputs: { hviSubmitted: "hviSubmitted" }, host: { listeners: { "submit": "onSubmit($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[hviForm]',
+                    standalone: true,
+                }]
+        }], propDecorators: { hviSubmitted: [{
+                type: Output
+            }], focusOnInvalid: [{
+                type: Input
+            }], onSubmit: [{
+                type: HostListener,
+                args: ['submit', ['$event']]
+            }] } });
+
+const DEFAULT_ERROR_PRIORITY$1 = [
+    'required',
+    'minlength',
+    'maxlength',
+    'email',
+    'pattern',
+    'min',
+    'max',
+];
+let errorSummaryIdCounter = 0;
+const nextErrorSummaryHeadingId = () => `hvi-error-summary-heading-${++errorSummaryIdCounter}`;
+/**
+ * @summary
+ * ErrorSummary lists blocking validation errors so users can quickly find and fix them.
+ *
+ * @remarks
+ * Modes:
+ * - Manual: provide `[errors]` as `{ message, href }[]`.
+ * - Auto (recommended): provide `[form]` + `[messages]` (and optionally `[idMap]`) to derive errors from invalid
+ *   controls in a reactive form.
+ *
+ * Auto mode should be rendered inside `<form hviForm ...>` so it can follow submit visibility (`showWhen`) and
+ * be focused automatically via `[focusOnInvalid]`.
+ *
+ * Each item link must point to a field id (e.g. `href="#firstName"`). Prefer `id === formControlName`.
+ *
+ * @example
+ * Manual mode:
+ * ```html
+ * <hvi-error-summary
+ *   [errors]="[
+ *     { message: 'Fornavn må være minst 2 tegn', href: '#firstName' },
+ *     { message: 'Telefonnummer kan kun inneholde siffer', href: '#phone' }
+ *   ]"
+ * />
+ * ```
+ *
+ * @example
+ * Auto mode (HTML + TS):
+ *
+ * ```html
+ * HTML:
+ * <form hviForm [formGroup]="form" [focusOnInvalid]="summary">
+ *   <hvi-error-summary #summary [form]="form" [messages]="messages" showWhen="submitted" />
+ *
+ *   <hvi-field>
+ *     <label hviLabel for="firstName" weight="medium">Fornavn</label>
+ *     <input hviInput id="firstName" formControlName="firstName" hviControlInvalid />
+ *     <p hviFieldValidation hviValidationMessage="firstName" [messages]="messages.firstName"></p>
+ *   </hvi-field>
+ *
+ *   <hvi-field>
+ *     <label hviLabel for="phone" weight="medium">Telefon</label>
+ *     <input hviInput id="phone" type="tel" formControlName="phone" hviControlInvalid />
+ *     <p hviFieldValidation hviValidationMessage="phone" [messages]="messages.phone"></p>
+ *   </hvi-field>
+ *
+ *   <button hviButton type="submit" variant="primary">Send inn</button>
+ * </form>
+ * ```
+ *
+ * ```ts
+ * TS:
+ * form = new FormGroup({
+ *   firstName: new FormControl('', [Validators.required, Validators.minLength(2)]),
+ *   phone: new FormControl('', [Validators.required, Validators.pattern(/^\d+$/)]),
+ * });
+ *
+ * messages = {
+ *   firstName: { required: 'Fornavn er påkrevd', minlength: 'Fornavn må være minst 2 tegn' },
+ *   phone: { required: 'Telefon er påkrevd', pattern: 'Telefonnummer kan kun inneholde siffer' },
+ * } as const;
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/error-summary/code
+ */
+class HviErrorSummary {
+    /** Heading text shown above the list */
+    heading = 'For å gå videre må du rette opp følgende feil:';
+    /** Heading level for the heading element (1-6). Defaults to 2 per DS */
+    headingLevel = 2;
+    /**
+     * Manual mode: items displayed in the summary.
+     * If non-empty, manual mode takes precedence over auto mode.
+     */
+    errors = [];
+    /** Auto mode: reactive form to derive errors from */
+    form;
+    /**
+     * Auto mode: messages per controlName.
+     * Example:
+     * {
+     *   firstName: { required: 'Fornavn er påkrevd', minlength: 'Fornavn må være minst 2 tegn' },
+     *   phone: { required: 'Telefon er påkrevd', pattern: 'Telefonnummer kan kun inneholde siffer' }
+     * }
+     */
+    messages;
+    /**
+     * Auto mode: map controlName -> element id.
+     * Default is `id === controlName`.
+     */
+    idMap;
+    /** Auto mode: error key priority (first match wins) */
+    errorPriority = DEFAULT_ERROR_PRIORITY$1;
+    /** Used for aria-labelledby on the container */
+    headingId = nextErrorSummaryHeadingId();
+    /** When to show errors from the form controls */
+    showWhen = 'submitted';
+    container;
+    focus() {
+        this.container?.nativeElement.focus();
+    }
+    get computedErrors() {
+        // 1) Manual mode wins
+        if (this.errors?.length)
+            return this.errors;
+        // 2) Auto mode
+        const form = this.form;
+        const messages = this.messages;
+        if (!form || !messages)
+            return [];
+        const items = [];
+        for (const controlName of Object.keys(form.controls)) {
+            const ctrl = form.controls[controlName];
+            if (!ctrl?.invalid)
+                continue;
+            const errs = ctrl.errors ?? {};
+            const msgMap = messages[controlName] ?? {};
+            const message = this.pickMessage(errs, msgMap);
+            if (!message)
+                continue;
+            const id = this.idMap?.[controlName] ?? controlName;
+            items.push({ message, href: `#${id}` });
+        }
+        return items;
+    }
+    pickMessage(errors, messages) {
+        for (const key of this.errorPriority) {
+            if (errors[key] && messages[key])
+                return messages[key];
+        }
+        for (const key of Object.keys(errors)) {
+            if (messages[key])
+                return messages[key];
+        }
+        return Object.keys(errors).length ? 'Ugyldig verdi' : '';
+    }
+    hviForm = inject(HviForm, { optional: true });
+    get shouldShow() {
+        if (this.computedErrors.length === 0)
+            return false;
+        switch (this.showWhen) {
+            case 'always':
+                return true;
+            case 'touched':
+                // show when any invalid control is touched OR the form has been submitted
+                return (this.hviForm?.submitted ?? false) || this.anyInvalidTouched();
+            case 'submitted':
+            default:
+                return this.hviForm?.submitted ?? false;
+        }
+    }
+    anyInvalidTouched() {
+        const form = this.form;
+        if (!form)
+            return false;
+        for (const name of Object.keys(form.controls)) {
+            const c = form.controls[name];
+            if (c?.invalid && c.touched)
+                return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HviErrorSummary, isStandalone: true, selector: "hvi-error-summary", inputs: { heading: "heading", headingLevel: "headingLevel", errors: "errors", form: "form", messages: "messages", idMap: "idMap", errorPriority: "errorPriority", headingId: "headingId", showWhen: "showWhen" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      #container
+      class="ds-error-summary"
+      tabindex="-1"
+      [attr.aria-labelledby]="headingId"
+      [hidden]="!shouldShow"
+    >
+      @switch (headingLevel) {
+        @case (1) {
+          <h1 class="ds-heading" [id]="headingId">{{ heading }}</h1>
+        }
+        @case (2) {
+          <h2 class="ds-heading" [id]="headingId">{{ heading }}</h2>
+        }
+        @case (3) {
+          <h3 class="ds-heading" [id]="headingId">{{ heading }}</h3>
+        }
+        @case (4) {
+          <h4 class="ds-heading" [id]="headingId">{{ heading }}</h4>
+        }
+        @case (5) {
+          <h5 class="ds-heading" [id]="headingId">{{ heading }}</h5>
+        }
+        @default {
+          <h6 class="ds-heading" [id]="headingId">{{ heading }}</h6>
+        }
+      }
+
+      <ul class="ds-list">
+        @for (err of computedErrors; track err.href) {
+          <li>
+            <a class="ds-link" data-color="neutral" [href]="err.href">{{ err.message }}</a>
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviErrorSummary, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-error-summary',
+                    standalone: true,
+                    template: `
+    <div
+      #container
+      class="ds-error-summary"
+      tabindex="-1"
+      [attr.aria-labelledby]="headingId"
+      [hidden]="!shouldShow"
+    >
+      @switch (headingLevel) {
+        @case (1) {
+          <h1 class="ds-heading" [id]="headingId">{{ heading }}</h1>
+        }
+        @case (2) {
+          <h2 class="ds-heading" [id]="headingId">{{ heading }}</h2>
+        }
+        @case (3) {
+          <h3 class="ds-heading" [id]="headingId">{{ heading }}</h3>
+        }
+        @case (4) {
+          <h4 class="ds-heading" [id]="headingId">{{ heading }}</h4>
+        }
+        @case (5) {
+          <h5 class="ds-heading" [id]="headingId">{{ heading }}</h5>
+        }
+        @default {
+          <h6 class="ds-heading" [id]="headingId">{{ heading }}</h6>
+        }
+      }
+
+      <ul class="ds-list">
+        @for (err of computedErrors; track err.href) {
+          <li>
+            <a class="ds-link" data-color="neutral" [href]="err.href">{{ err.message }}</a>
+          </li>
+        }
+      </ul>
+    </div>
+  `,
+                }]
+        }], propDecorators: { heading: [{
+                type: Input
+            }], headingLevel: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], idMap: [{
+                type: Input
+            }], errorPriority: [{
+                type: Input
+            }], headingId: [{
+                type: Input
+            }], showWhen: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }] } });
+
+/**
+ * Decorative affix container displayed alongside a text input.
+ *
+ * @remarks
+ * Used together with the `hvi-field-affixes` component to wrap leading and trailing adornments.
+ *
+ * @example
+ * ```html
+ *  <hvi-field-affixes>
+ *    <hvi-field-affix>NOK</hvi-field-affix>
+ *    <input hviInput type="text" placeholder="Amount" />
+ *    <hvi-field-affix>per month</hvi-field-affix>
+ * </hvi-field-affixes>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/field/code#prefixsuffix
+ */
+class HviFieldAffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldAffix, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldAffix, isStandalone: true, selector: "hvi-field-affix", host: { properties: { "aria-hidden": "true" }, classAttribute: "ds-field-affix" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldAffix, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-field-affix',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-field-affix',
+                        '[aria-hidden]': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * Container for decorative affixes displayed alongside a text input.
+ *
+ * @remarks
+ * Wraps leading and trailing adornments provided by `hvi-field-affix` components.
+ *
+ * @example
+ * ```html
+ *   <hvi-field-affixes>
+ *       <hvi-field-affix>NOK</hvi-field-affix>
+ *       <input hviInput type="text" placeholder="Amount" />
+ *       <hvi-field-affix>per month</hvi-field-affix>
+ * </hvi-field-affixes>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/field/code#prefixsuffix
+ */
+class HviFieldAffixes {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldAffixes, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldAffixes, isStandalone: true, selector: "hvi-field-affixes", host: { classAttribute: "ds-field-affixes" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldAffixes, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-field-affixes',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-field-affixes',
+                    },
+                }]
+        }] });
+
+class HviFieldDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldDescription, isStandalone: true, selector: "[hviFieldDescription]", host: { attributes: { "data-field": "description" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviFieldDescription]',
+                    standalone: true,
+                    host: {
+                        'data-field': 'description',
+                    },
+                }]
+        }] });
+
+class HviFieldOptional {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldOptional, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldOptional, isStandalone: true, selector: "[hviFieldOptional]", host: { attributes: { "data-field": "optional" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldOptional, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviFieldOptional]',
+                    standalone: true,
+                    host: {
+                        'data-field': 'optional',
+                    },
+                }]
+        }] });
+
+class HviFieldValidation {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldValidation, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldValidation, isStandalone: true, selector: "[hviFieldValidation]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldValidation, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviFieldValidation]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-validation-message',
+                        'data-field': 'validation',
+                    },
+                }]
+        }] });
+
+// Copied from https://github.com/digdir/designsystemet/blob/main/packages/react/src/components/field/field-observer.ts
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const typeCounter = new Map(); // Track count for each data-field type
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el) && !el.hidden) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        // Reset type counters since we reprocess all elements
+        typeCounter.clear();
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            let id;
+            if (descriptionType) {
+                // Increment type counter for this type
+                const count = (typeCounter.get(descriptionType) || 0) + 1;
+                typeCounter.set(descriptionType, count);
+                id = `${inputId}:${descriptionType}:${count}`;
+            }
+            else {
+                id = inputId;
+            }
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (!describedbyIds.includes(el.id)) {
+                if (descriptionType === 'validation')
+                    describedbyIds.unshift(el.id); // Validations to the front
+                else if (descriptionType)
+                    describedbyIds.push(el.id); // Other descriptions to the back
+            }
+        }
+        // Prune aria-describedby so it does not reference removed elements
+        const prunedDescribedbyIds = describedbyIds.filter((id) => {
+            if (!id)
+                return false;
+            if (id === inputId)
+                return true;
+            // Keep if it still exists anywhere in the document.
+            // This preserves "original aria-describedby" entries that live outside the field subtree.
+            return !!fieldElement.ownerDocument?.getElementById(id);
+        });
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', prunedDescribedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement && 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+/**
+ * Field is a helper component to automatically associate a field with hviLabel, hviFieldDescription and hviFieldValidation.
+ *
+ * @example
+ * ```html
+ * <hvi-field>
+ *  <label hviLabel>Name</label>
+ *  <span hviFieldDescription>Fill in your full name.</span>
+ *  <input type="text" />
+ *  <span hviFieldValidation>This field is required.</span>
+ * </hvi-field>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/field/overview
+ */
+class HviField {
+    /** Position of toggle inputs (radio, checkbox, switch) in field */
+    position;
+    el = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    ngAfterViewInit() {
+        const stop = fieldObserver(this.el.nativeElement);
+        this.destroyRef.onDestroy(() => stop?.());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviField, isStandalone: true, selector: "hvi-field", inputs: { position: "position" }, host: { properties: { "attr.data-position": "position ?? null" }, classAttribute: "ds-field" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-field',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-field',
+                        '[attr.data-position]': 'position ?? null',
+                    },
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }] } });
+
+/**
+ * Fieldset is used to group and label fields that naturally belong together, such as date fields or address fields.
+ * The component helps organize information, make forms more manageable, and improve accessibility for screen readers.
+ *
+ * @example
+ * ```html
+ *  <fieldset hviFieldset>
+ *    <legend hviLabel>Which framework do you like best?</legend>
+ *    <p hviParagraph>Your choice will help us improve the service.</p>
+ *    <hvi-field>
+ *      <input type="radio" id="angular" name="framework" value="angular" />
+ *      <label hviLabel for="angular">Angular</label>
+ *    </hvi-field>
+ *    <hvi-field>
+ *      <input type="radio" id="react" name="framework" value="react" />
+ *      <label hviLabel for="react">React</label>
+ *    </hvi-field>
+ *    <hvi-field>
+ *      <input type="radio" id="vue" name="framework" value="vue" />
+ *      <label hviLabel for="vue">Vue</label>
+ *    </hvi-field>
+ *  </fieldset>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/fieldset/overview
+ */
+class HviFieldset {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviFieldset, isStandalone: true, selector: "fieldset[hviFieldset]", host: { classAttribute: "ds-fieldset" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviFieldset, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fieldset[hviFieldset]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-fieldset',
+                    },
+                }]
+        }] });
+
+class HviInput {
+    type;
+    size;
+    /** Set role, e.g. `switch` when `checkbox` or `radio` */
+    role;
+    _disabled = false;
+    _readOnly = false;
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set readOnly(value) {
+        this._readOnly = value;
+    }
+    get readOnly() {
+        return this._readOnly;
+    }
+    set readonly(value) {
+        this._readOnly = value;
+    }
+    get isToggle() {
+        return this.type === 'checkbox' || this.type === 'radio';
+    }
+    onClick(event) {
+        if (this._readOnly && this.isToggle) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onChange(event) {
+        if (this._readOnly && this.isToggle) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onKeydown(event) {
+        if (!this._readOnly || !this.isToggle)
+            return;
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.2", type: HviInput, isStandalone: true, selector: "input[hviInput]", inputs: { type: "type", size: "size", role: "role", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.type": "type ?? null", "attr.size": "size ?? null", "attr.disabled": "_disabled ? \"\" : null", "attr.readonly": "_readOnly ? \"\" : null", "attr.role": "role ?? null" }, classAttribute: "ds-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[hviInput]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-input',
+                        '[attr.type]': 'type ?? null',
+                        '[attr.size]': 'size ?? null',
+                        '[attr.disabled]': '_disabled ? "" : null',
+                        '[attr.readonly]': '_readOnly ? "" : null',
+                        '[attr.role]': 'role ?? null',
+                    },
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @summary
+ * Directive to set `aria-invalid` on form controls based on their validation state.
+ *
+ * Usage:
+ * ```html
+ * <input hviControlInvalid formControlName="email" />
+ * ```
+ */
+class HviControlInvalid {
+    ngControl = inject(NgControl, { self: true, optional: true });
+    hviForm = inject(HviForm, { optional: true });
+    get ariaInvalid() {
+        const control = this.ngControl?.control;
+        if (!control)
+            return null;
+        const submitted = this.hviForm?.submitted ?? false;
+        const show = control.invalid && (control.touched || submitted);
+        return show ? 'true' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviControlInvalid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviControlInvalid, isStandalone: true, selector: "[hviControlInvalid]", host: { properties: { "attr.aria-invalid": "this.ariaInvalid" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviControlInvalid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviControlInvalid]',
+                    standalone: true,
+                }]
+        }], propDecorators: { ariaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }] } });
+
+const DEFAULT_ERROR_PRIORITY = [
+    'required',
+    'minlength',
+    'maxlength',
+    'email',
+    'pattern',
+    'min',
+    'max',
+];
+class HviValidationMessage {
+    /**
+     * Control name in the nearest parent FormGroup (matches formControlName).
+     * Example: hviValidationMessage="firstName"
+     */
+    controlName;
+    /**
+     * Map errorKey -> message, e.g. { required: 'Påkrevd', minlength: 'Minst 2 tegn' }
+     */
+    messages = {};
+    /**
+     * Optional error priority order. Defaults to a sensible order.
+     */
+    errorPriority = DEFAULT_ERROR_PRIORITY;
+    container = inject(ControlContainer, { optional: true });
+    hviForm = inject(HviForm, { optional: true });
+    get control() {
+        const group = this.container?.control;
+        if (!group || !this.controlName)
+            return null;
+        return group.get(this.controlName);
+    }
+    get message() {
+        const ctrl = this.control;
+        if (!ctrl)
+            return '';
+        const submitted = this.hviForm?.submitted ?? false;
+        const show = ctrl.invalid && (ctrl.touched || submitted);
+        if (!show)
+            return '';
+        const errors = ctrl.errors ?? {};
+        // 1) Prioritized keys first
+        for (const key of this.errorPriority) {
+            if (errors[key] && this.messages[key])
+                return this.messages[key];
+        }
+        // 2) Any remaining mapped key
+        for (const key of Object.keys(errors)) {
+            if (this.messages[key])
+                return this.messages[key];
+        }
+        return 'Ugyldig verdi';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviValidationMessage, isStandalone: true, selector: "[hviValidationMessage]", inputs: { controlName: ["hviValidationMessage", "controlName"], messages: "messages", errorPriority: "errorPriority" }, host: { properties: { "textContent": "message", "hidden": "!message" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviValidationMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hviValidationMessage]',
+                    standalone: true,
+                    host: {
+                        // Sett tekstinnhold direkte på elementet (typisk <p hviFieldValidation ...>)
+                        '[textContent]': 'message',
+                        // Skjul elementet når det ikke er noen feilmelding
+                        '[hidden]': '!message',
+                    },
+                }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: ['hviValidationMessage']
+            }], messages: [{
+                type: Input
+            }], errorPriority: [{
+                type: Input
+            }] } });
+
+// 1) Bare field-byggesteiner
+const HviFieldKit = [
+    HviField,
+    HviFieldValidation,
+    HviFieldDescription,
+    HviFieldOptional,
+    HviFieldAffix,
+    HviFieldAffixes,
+];
+// 2) Reactive forms + invalid/validation glue + submit behavior
+const HviValidationKit = [
+    ReactiveFormsModule,
+    HviForm,
+    HviControlInvalid,
+    HviValidationMessage,
+];
+// 3) “Alt du trenger for DS forms”
+const HviForms = [
+    ...HviValidationKit,
+    ...HviFieldKit,
+    HviInput,
+    HviFieldset,
+    HviErrorSummary,
+];
+
+/**
+ * Heading is used to structure content and create hierarchy on a page.
+ *
+ * @example
+ * ```html
+ * <h1 hviHeading size="xl">This is a heading</h1>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/heading/overview
+ */
+class HviHeading {
+    /** The size of the heading */
+    size;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviHeading, isStandalone: true, selector: "h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]", inputs: { size: "size" }, host: { properties: { "attr.data-size": "size" }, classAttribute: "ds-heading" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-heading',
+                        '[attr.data-size]': 'size',
+                    },
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }] } });
+
+class HviIcon {
+    http;
+    elementRef;
+    cdr;
+    icon;
+    color;
+    size = 'md';
+    ariaHidden = false;
+    constructor(http, elementRef, cdr) {
+        this.http = http;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+    }
+    ngOnChanges() {
+        this.loadIcon();
+    }
+    loadIcon() {
+        this.http
+            .get(`/assets/icons/${this.icon}.svg`, {
+            responseType: 'text',
+        })
+            .subscribe({
+            next: (svg) => {
+                this.elementRef.nativeElement.innerHTML = svg;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                console.error('Failed to load icon:', this.icon, err);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviIcon, deps: [{ token: i1.HttpClient }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.2", type: HviIcon, isStandalone: true, selector: "hvi-icon", inputs: { icon: "icon", color: "color", size: "size", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute] }, host: { properties: { "attr.data-size": "size", "attr.data-color": "color", "attr.aria-hidden": "ariaHidden" }, classAttribute: "hvi-icon" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: ["hvi-icon{display:inline-block}svg{display:inline-block}hvi-icon[data-size=sm] svg{width:16px;height:16px}hvi-icon[data-size=md] svg{width:24px;height:24px}hvi-icon[data-size=lg] svg{width:32px;height:32px}hvi-icon[data-size=xl] svg{width:40px;height:40px}hvi-icon svg path{fill:currentColor}hvi-icon[data-color=danger] svg path{fill:var(--ds-color-danger-base-default)}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvi-icon', standalone: true, template: '', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'hvi-icon',
+                        '[attr.data-size]': 'size',
+                        '[attr.data-color]': 'color',
+                        '[attr.aria-hidden]': 'ariaHidden',
+                    }, styles: ["hvi-icon{display:inline-block}svg{display:inline-block}hvi-icon[data-size=sm] svg{width:16px;height:16px}hvi-icon[data-size=md] svg{width:24px;height:24px}hvi-icon[data-size=lg] svg{width:32px;height:32px}hvi-icon[data-size=xl] svg{width:40px;height:40px}hvi-icon svg path{fill:currentColor}hvi-icon[data-color=danger] svg path{fill:var(--ds-color-danger-base-default)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
+                type: Input,
+                args: [{ required: true }]
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], ariaHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * Label functions as a clear and accessible text label that tells the user what an associated form element is about.
+ *
+ * @example
+ * ```html
+ * <label hviLabel weight="semibold">Name</label>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/label/overview
+ */
+class HviLabel {
+    /** The font weight of the label */
+    weight;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviLabel, isStandalone: true, selector: "label[hviLabel], legend[hviLabel]", inputs: { weight: "weight" }, host: { properties: { "attr.data-weight": "weight ?? null" }, classAttribute: "ds-label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[hviLabel], legend[hviLabel]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-label',
+                        '[attr.data-weight]': 'weight ?? null',
+                    },
+                }]
+        }], propDecorators: { weight: [{
+                type: Input
+            }] } });
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <a hviLink />
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/input/overview
+ */
+class HviLink {
+    /** Used to change the appearance of the link. */
+    color = 'default';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviLink, isStandalone: true, selector: "a[hviLink]", inputs: { color: "color" }, host: { properties: { "attr.data-color": "color" }, classAttribute: "ds-link" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[hviLink]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-link',
+                        '[attr.data-color]': 'color',
+                    },
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+/**
+ * Paragraph is used for continuous text and is typically applied in articles, components, help text, and similar content.
+ *
+ * @example
+ * ```html
+ * <p hviParagraph variant="long" size="md">
+ *  This is a paragraph with body text that can be adjusted in size and variant.
+ * </p>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/paragraph/overview
+ */
+class HviParagraph {
+    /** Adjusts the style for the length of the paragraph */
+    variant;
+    /** Paragraph is available in several text sizes to suit different needs */
+    size;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviParagraph, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HviParagraph, isStandalone: true, selector: "p[hviParagraph]", inputs: { variant: "variant", size: "size" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null" }, classAttribute: "ds-paragraph" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviParagraph, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'p[hviParagraph]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-paragraph',
+                        '[attr.data-variant]': 'variant ?? null',
+                        '[attr.data-size]': 'size ?? null',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+/**
+ * @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.
+ *
+ * @example
+ * ```html
+ * <hvi-tag variant="outline" size="sm" color="info">Small info tag</hvi-tag>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/tag/code
+ */
+class HviTag {
+    /** The variants of the tag */
+    variant;
+    /** The sizes of the tag */
+    size;
+    /** The color theme of the tag */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviTag, isStandalone: true, selector: "hvi-tag", inputs: { variant: "variant", size: "size", color: "color" }, host: { properties: { "attr.data-variant": "variant ?? null", "attr.data-size": "size ?? null", "attr.data-color": "color ?? null" }, classAttribute: "ds-tag" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-tag',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-tag',
+                        '[attr.data-variant]': 'variant ?? null',
+                        '[attr.data-size]': 'size ?? null',
+                        '[attr.data-color]': 'color ?? null',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of hviktor
+ */
+
+/**
+ * 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, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviParagraph, HviTag, HviValidationKit, HviValidationMessage, fieldObserver, isElement, isInputLike, isLabel };
+//# sourceMappingURL=helsevestikt-hviktor-angular.mjs.map