@helsevestikt/hviktor-angular 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helsevestikt/hviktor-angular",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <22.0.0",
@@ -23,6 +23,7 @@
   },
   "files": [
     "fesm2022/",
+    "types/",
     "index.d.ts",
     "styles.css",
     "README.md",

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

@@ -0,0 +1,776 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, AfterViewInit, OnChanges, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient } 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/
+ */
+declare class HviAlert {
+    /** Sets the type of alert by changing the color and  */
+    color?: 'info' | 'success' | 'warning' | 'danger';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviAlert, "hvi-alert", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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/
+ */
+declare class HviAvatar {
+    /** The name of the person the avatar represents */
+    ariaLabel?: string;
+    /** The shape of the avatar */
+    variant?: 'circle' | 'square';
+    /** Initials displayed inside the avatar */
+    initials?: string;
+    /** The size of the avatar */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** The color theme of the avatar */
+    color?: 'accent' | 'brand1' | 'brand2' | 'brand3' | 'neutral' | 'danger';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviAvatar, "hvi-avatar", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HviBadgePosition {
+    /** Overlap of the badge */
+    overlap: 'rectangle' | 'circle';
+    /** Placement of the badge */
+    placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviBadgePosition, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviBadgePosition, "hvi-badge-position", never, { "overlap": { "alias": "overlap"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HviBadge {
+    /** The variants of the badge */
+    variant?: 'base' | 'tinted';
+    /** count text of the badge*/
+    count?: string;
+    /** The color theme of the badge */
+    color?: 'neutral' | 'danger' | 'warning' | 'info' | 'success' | 'accent' | 'brand1' | 'brand2' | 'brand3';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviBadge, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviBadge, "hvi-badge", never, { "variant": { "alias": "variant"; "required": false; }; "count": { "alias": "count"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+interface BreadcrumbItem {
+    label: string;
+    href: string;
+    ariaLabel?: string;
+}
+/**
+ * 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
+ */
+declare class HviBreadcrumbs {
+    /** Accessible label for the breadcrumb navigation */
+    ariaLabel: string;
+    /** Optional back link object */
+    backLink?: {
+        label: string;
+        href: string;
+        ariaLabel?: string;
+    };
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviBreadcrumbs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviBreadcrumbs, "nav[hviBreadcrumbs]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "backLink": { "alias": "backLink"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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/
+ */
+declare class HviButton {
+    /** The size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Used to change the appearance of the button. */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /** The type of button */
+    type?: 'button' | 'submit' | 'reset';
+    /** The color of the button */
+    color?: 'accent' | 'brand1' | 'brand2' | 'brand3' | 'neutral' | 'danger';
+    /** 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: boolean;
+    /** Sets the button in a loading state.
+     * Loading indicators such as spinners must be added manually, e.g., with hvi-spinner
+     */
+    loading: boolean;
+    /** Makes the button full width */
+    fullWidth: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviButton, "button[hviButton], a[hviButton]", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "type": { "alias": "type"; "required": false; }; "color": { "alias": "color"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_icon: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_fullWidth: unknown;
+}
+
+/**
+ * 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
+ */
+declare class HviCardBlock {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviCardBlock, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviCardBlock, "[hviCardBlock]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviCard {
+    /** Sets the background of the card */
+    variant?: 'default' | 'tinted';
+    /** The color theme of the card */
+    color?: 'accent' | 'brand1' | 'brand2' | 'brand3' | 'neutral';
+    /** Maximum width of the card, for example '320px' or '20rem' */
+    maxWidth?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviCard, "hvi-card", never, { "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HviChipButton {
+    /** Whether the chip is removable*/
+    removable: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviChipButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviChipButton, "button[hviChip]", never, { "removable": { "alias": "removable"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_removable: unknown;
+}
+
+declare class HviChipLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviChipLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviChipLabel, "label[hviChip]", never, {}, {}, never, never, true, never>;
+}
+
+declare class HviDetailsContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDetailsContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviDetailsContent, "hvi-details-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class HviDetailsSummary {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDetailsSummary, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviDetailsSummary, "hvi-details-summary", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviDetails {
+    /** Variant of the details component */
+    variant: 'default' | 'tinted';
+    /** Control open state of the details component */
+    open: true | false;
+    /** Set default open state of the details component */
+    defaultOpen: true | false;
+    /** Event handler for toggle event */
+    onToggle: (event: Event) => void;
+    handleToggle(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDetails, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviDetails, "hvi-details", never, { "variant": { "alias": "variant"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "onToggle": { "alias": "onToggle"; "required": false; }; }, {}, never, ["hvi-details-summary", "hvi-details-content"], true, never>;
+}
+
+declare class HviDialogBlock {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDialogBlock, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviDialogBlock, "[hviDialogBlock]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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/
+ */
+declare class HviDialog {
+    id?: string;
+    set open(value: boolean);
+    get open(): boolean;
+    modal: boolean;
+    readonly openChange: EventEmitter<boolean>;
+    private readonly element;
+    openModal(): void;
+    close(): void;
+    handleClose(): void;
+    handleCancel(event: Event): void;
+    private setOpen;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDialog, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviDialog, "dialog[hviDialog]", never, { "id": { "alias": "id"; "required": false; }; "open": { "alias": "open"; "required": false; }; "modal": { "alias": "modal"; "required": false; }; }, { "openChange": "openChange"; }, never, never, true, never>;
+}
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <hr hviDivider />
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/divider/overview
+ */
+declare class HviDivider {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDivider, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviDivider, "hr[hviDivider]", never, {}, {}, never, never, true, never>;
+}
+
+type HviValidationMessages = Partial<Record<string, string>>;
+declare class HviValidationMessage {
+    /**
+     * Control name in the nearest parent FormGroup (matches formControlName).
+     * Example: hviValidationMessage="firstName"
+     */
+    controlName: string;
+    /**
+     * Map errorKey -> message, e.g. { required: 'Påkrevd', minlength: 'Minst 2 tegn' }
+     */
+    messages: HviValidationMessages;
+    /**
+     * Optional error priority order. Defaults to a sensible order.
+     */
+    errorPriority: readonly string[];
+    private readonly container;
+    private readonly hviForm;
+    private get control();
+    get message(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviValidationMessage, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviValidationMessage, "[hviValidationMessage]", never, { "controlName": { "alias": "hviValidationMessage"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "errorPriority": { "alias": "errorPriority"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Item model used by manual error summaries. Provide `message` and `href` for each invalid field.
+ */
+type HviErrorSummaryItem = {
+    /** Text shown in the list */
+    message: string;
+    /** Link target (should be "#<field-id>") */
+    href: string;
+};
+type HviErrorSummaryMessages = Record<string, HviValidationMessages>;
+/**
+ * @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
+ */
+declare class HviErrorSummary {
+    /** Heading text shown above the list */
+    heading: string;
+    /** Heading level for the heading element (1-6). Defaults to 2 per DS */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Manual mode: items displayed in the summary.
+     * If non-empty, manual mode takes precedence over auto mode.
+     */
+    errors: HviErrorSummaryItem[];
+    /** Auto mode: reactive form to derive errors from */
+    form?: FormGroup;
+    /**
+     * 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?: HviErrorSummaryMessages;
+    /**
+     * Auto mode: map controlName -> element id.
+     * Default is `id === controlName`.
+     */
+    idMap?: Record<string, string>;
+    /** Auto mode: error key priority (first match wins) */
+    errorPriority: readonly string[];
+    /** Used for aria-labelledby on the container */
+    headingId: string;
+    /** When to show errors from the form controls */
+    showWhen: 'submitted' | 'touched' | 'always';
+    private container?;
+    focus(): void;
+    get computedErrors(): HviErrorSummaryItem[];
+    private pickMessage;
+    private readonly hviForm;
+    get shouldShow(): boolean;
+    private anyInvalidTouched;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviErrorSummary, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviErrorSummary, "hvi-error-summary", never, { "heading": { "alias": "heading"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "form": { "alias": "form"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "idMap": { "alias": "idMap"; "required": false; }; "errorPriority": { "alias": "errorPriority"; "required": false; }; "headingId": { "alias": "headingId"; "required": false; }; "showWhen": { "alias": "showWhen"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviFieldAffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldAffix, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviFieldAffix, "hvi-field-affix", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviFieldAffixes {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldAffixes, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviFieldAffixes, "hvi-field-affixes", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class HviFieldDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviFieldDescription, "[hviFieldDescription]", never, {}, {}, never, never, true, never>;
+}
+
+declare class HviFieldOptional {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldOptional, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviFieldOptional, "[hviFieldOptional]", never, {}, {}, never, never, true, never>;
+}
+
+declare class HviFieldValidation {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldValidation, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviFieldValidation, "[hviFieldValidation]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviField implements AfterViewInit {
+    /** Position of toggle inputs (radio, checkbox, switch) in field */
+    position?: 'start' | 'end';
+    private readonly el;
+    private readonly destroyRef;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviField, "hvi-field", never, { "position": { "alias": "position"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare function fieldObserver(fieldElement: HTMLElement | null): (() => void) | undefined;
+declare const isElement: (node: Node) => node is Element;
+declare const isLabel: (node: Node) => node is HTMLLabelElement;
+declare const isInputLike: (node: unknown) => node is HTMLInputElement;
+
+/**
+ * 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
+ */
+declare class HviFieldset {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviFieldset, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviFieldset, "fieldset[hviFieldset]", never, {}, {}, never, never, true, never>;
+}
+
+type HviAriaRole = 'switch' | 'button' | 'checkbox' | 'radio' | 'textbox' | 'searchbox' | string;
+declare class HviInput {
+    type?: 'number' | 'hidden' | 'color' | 'checkbox' | 'date' | 'datetime-local' | 'email' | 'file' | 'month' | 'password' | 'radio' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    size?: number;
+    /** Set role, e.g. `switch` when `checkbox` or `radio` */
+    role?: HviAriaRole;
+    protected _disabled: boolean;
+    protected _readOnly: boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    set readOnly(value: boolean);
+    get readOnly(): boolean;
+    set readonly(value: boolean);
+    private get isToggle();
+    onClick(event: MouseEvent): void;
+    onChange(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviInput, "input[hviInput]", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readOnly: unknown;
+    static ngAcceptInputType_readonly: unknown;
+}
+
+/**
+ * @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
+ */
+declare class HviForm {
+    /** Emits when the form has been submitted */
+    hviSubmitted: EventEmitter<void>;
+    /** True after first submit attempt */
+    submitted: boolean;
+    /** Optional focus target (e.g. HviErrorSummaryComponent) */
+    focusOnInvalid?: {
+        focus?: () => void;
+    } | null;
+    private readonly formGroupDir;
+    onSubmit(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviForm, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviForm, "form[hviForm]", never, { "focusOnInvalid": { "alias": "focusOnInvalid"; "required": false; }; }, { "hviSubmitted": "hviSubmitted"; }, never, never, true, never>;
+}
+
+/**
+ * @summary
+ * Directive to set `aria-invalid` on form controls based on their validation state.
+ *
+ * Usage:
+ * ```html
+ * <input hviControlInvalid formControlName="email" />
+ * ```
+ */
+declare class HviControlInvalid {
+    private readonly ngControl;
+    private readonly hviForm;
+    get ariaInvalid(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviControlInvalid, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviControlInvalid, "[hviControlInvalid]", never, {}, {}, never, never, true, never>;
+}
+
+declare const HviFieldKit: readonly [typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes];
+declare const HviValidationKit: readonly [typeof ReactiveFormsModule, typeof HviForm, typeof HviControlInvalid, typeof HviValidationMessage];
+declare const HviForms: readonly [typeof ReactiveFormsModule, typeof HviForm, typeof HviControlInvalid, typeof HviValidationMessage, typeof HviField, typeof HviFieldValidation, typeof HviFieldDescription, typeof HviFieldOptional, typeof HviFieldAffix, typeof HviFieldAffixes, typeof HviInput, typeof HviFieldset, typeof HviErrorSummary];
+
+/**
+ * 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
+ */
+declare class HviHeading {
+    /** The size of the heading */
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviHeading, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviHeading, "h1[hviHeading], h2[hviHeading], h3[hviHeading], h4[hviHeading], h5[hviHeading], h6[hviHeading]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type IconName = 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown' | 'ExclamationmarkTriangle' | 'Triangle' | 'Person';
+type IconSize = 'sm' | 'md' | 'lg' | 'xl';
+type IconColor = 'currentColor' | 'danger';
+
+declare class HviIcon implements OnChanges {
+    private http;
+    private elementRef;
+    private cdr;
+    icon: IconName;
+    color?: IconColor;
+    size: IconSize;
+    ariaHidden: boolean;
+    constructor(http: HttpClient, elementRef: ElementRef, cdr: ChangeDetectorRef);
+    ngOnChanges(): void;
+    private loadIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviIcon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviIcon, "hvi-icon", never, { "icon": { "alias": "icon"; "required": true; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "ariaHidden": { "alias": "ariaHidden"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_ariaHidden: unknown;
+}
+
+/**
+ * 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
+ */
+declare class HviLabel {
+    /** The font weight of the label */
+    weight?: 'regular' | 'medium' | 'semibold';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviLabel, "label[hviLabel], legend[hviLabel]", never, { "weight": { "alias": "weight"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Info
+ *
+ * Eksempel på bruk:
+ * ```html
+ * <a hviLink />
+ * ```
+ *
+ * Dokumentasjon: https://designsystemet.no/no/components/docs/input/overview
+ */
+declare class HviLink {
+    /** Used to change the appearance of the link. */
+    color?: 'default' | 'neutral';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviLink, "a[hviLink]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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
+ */
+declare class HviParagraph {
+    /** Adjusts the style for the length of the paragraph */
+    variant?: 'long' | 'default' | 'short';
+    /** Paragraph is available in several text sizes to suit different needs */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviParagraph, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviParagraph, "p[hviParagraph]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @summary
+ * Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.
+ *
+ * @example
+ * ```html
+ * <hvi-tag variant="outline" size="sm" color="info">Small info tag</hvi-tag>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/tag/code
+ */
+declare class HviTag {
+    /** The variants of the tag */
+    variant?: 'default' | 'outline';
+    /** The sizes of the tag */
+    size?: 'sm' | 'md' | 'lg';
+    /** The color theme of the tag */
+    color?: 'neutral' | 'danger' | 'warning' | 'info' | 'success' | 'accent' | 'brand1' | 'brand2' | 'brand3';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviTag, "hvi-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviParagraph, HviTag, HviValidationKit, HviValidationMessage, fieldObserver, isElement, isInputLike, isLabel };
+export type { HviErrorSummaryItem, HviErrorSummaryMessages, HviValidationMessages };