@helsevestikt/hviktor-angular 0.0.11 → 0.0.13

package/fesm2022/helsevestikt-hviktor-angular.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
 import { Input, Component, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, ViewChild, DestroyRef, HostBinding, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import '@u-elements/u-details';
-import { FormGroupDirective, NgControl, ControlContainer, ReactiveFormsModule } from '@angular/forms';
+import { FormGroupDirective, NgControl, ControlContainer, Validators, ReactiveFormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
+import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 
 /**
  * Alert provides users with information that is especially important for them to see and understand.
@@ -1010,117 +1011,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 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)
@@ -1235,6 +1125,117 @@ function createOptimizedMutationObserver(callback) {
     return observer;
 }
 
+/**
+ * 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',
+                    },
+                }]
+        }] });
+
 /**
  * Field is a helper component to automatically associate a field with hviLabel, hviFieldDescription and hviFieldValidation.
  *
@@ -1319,7 +1320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }] });
 
 class HviInput {
+    /** Supported input types */
     type;
+    /** Set size attribute on input element */
     size;
     /** Set role, e.g. `switch` when `checkbox` or `radio` */
     role;
@@ -1516,6 +1519,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Extracts validators and messages from an array of validator bundles.
+ *
+ * @example
+ * ```ts
+ * const config = hviValidators([
+ *   hviRequired('Fornavn er påkrevd'),
+ *   hviMinLength(2, 'Fornavn må være minst 2 tegn'),
+ * ]);
+ *
+ * form = new FormGroup({
+ *   firstName: new FormControl('', config.validators),
+ * });
+ *
+ * // In template: [messages]="config.messages"
+ * ```
+ */
+function hviValidators(bundles) {
+    return {
+        validators: bundles.map((b) => b.validator),
+        messages: bundles.reduce((acc, b) => ({ ...acc, [b.key]: b.message }), {}),
+    };
+}
+/**
+ * Extracts only the validator functions from bundles.
+ * Useful when you need just the validators for a FormControl.
+ */
+function hviExtractValidators(bundles) {
+    return bundles.map((b) => b.validator);
+}
+/**
+ * Extracts only the messages from bundles.
+ * Useful when you need just the messages object.
+ */
+function hviExtractMessages(bundles) {
+    return bundles.reduce((acc, b) => ({ ...acc, [b.key]: b.message }), {});
+}
+
+/**
+ * Creates a required validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviRequired('Dette feltet er påkrevd')
+ * ```
+ */
+function hviRequired(message) {
+    return { validator: Validators.required, key: 'required', message };
+}
+/**
+ * Creates a requiredTrue validator bundle (for checkboxes that must be checked).
+ *
+ * @example
+ * ```ts
+ * hviRequiredTrue('Du må godta vilkårene')
+ * ```
+ */
+function hviRequiredTrue(message) {
+    return { validator: Validators.requiredTrue, key: 'required', message };
+}
+/**
+ * Creates a minLength validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviMinLength(2, 'Må være minst 2 tegn')
+ * ```
+ */
+function hviMinLength(length, message) {
+    return { validator: Validators.minLength(length), key: 'minlength', message };
+}
+/**
+ * Creates a maxLength validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviMaxLength(100, 'Kan ikke være mer enn 100 tegn')
+ * ```
+ */
+function hviMaxLength(length, message) {
+    return { validator: Validators.maxLength(length), key: 'maxlength', message };
+}
+/**
+ * Creates an email validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviEmail('Ugyldig e-postadresse')
+ * ```
+ */
+function hviEmail(message) {
+    return { validator: Validators.email, key: 'email', message };
+}
+/**
+ * Creates a pattern validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviPattern(/^\d+$/, 'Kan kun inneholde tall')
+ * ```
+ */
+function hviPattern(pattern, message) {
+    return { validator: Validators.pattern(pattern), key: 'pattern', message };
+}
+/**
+ * Creates a min value validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviMin(0, 'Må være minst 0')
+ * ```
+ */
+function hviMin(min, message) {
+    return { validator: Validators.min(min), key: 'min', message };
+}
+/**
+ * Creates a max value validator bundle.
+ *
+ * @example
+ * ```ts
+ * hviMax(100, 'Kan ikke være mer enn 100')
+ * ```
+ */
+function hviMax(max, message) {
+    return { validator: Validators.max(max), key: 'max', message };
+}
+/**
+ * Creates a custom validator bundle with a specified error key.
+ * Use this for custom validators or validators not covered by the built-in functions.
+ *
+ * @example
+ * ```ts
+ * // Custom validator that checks if value matches a specific format
+ * const norwegianPhoneValidator: ValidatorFn = (control) => {
+ *   const valid = /^(\+47)?\d{8}$/.test(control.value);
+ *   return valid ? null : { norwegianPhone: true };
+ * };
+ *
+ * hviCustom('norwegianPhone', norwegianPhoneValidator, 'Ugyldig norsk telefonnummer')
+ * ```
+ */
+function hviCustom(key, validator, message) {
+    return { validator, key, message };
+}
+/**
+ * Creates a nullValidator bundle (always valid, useful for conditional validation).
+ * Note: This validator always passes, so the message will never be shown.
+ */
+function hviNullValidator() {
+    return { validator: Validators.nullValidator, key: 'null', message: '' };
+}
+
 // 1) Bare field-byggesteiner
 const HviFieldKit = [
     HviField,
@@ -1753,6 +1908,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }] } });
 
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        if (rects.reference.width > rects.floating.width) {
+            arrowX = `${Math.round(rects.floating.width / 2)}px`;
+        }
+        if (rects.reference.height > rects.floating.height) {
+            arrowY = `${Math.round(rects.floating.height / 2)}px`;
+        }
+        switch (placement.split('-')[0]) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.setAttribute('data-placement', placement.split('-')[0]);
+        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
+        return data;
+    },
+};
+/**
+ * @summary
+ * Popover vises over andre elementer i grensesnittet og er koblet til et spesifikt element.
+ * Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden.
+ *
+ * @example
+ * ```html
+ * <button hviButton popovertarget="popover1">Open popover</button>
+ * <hvi-popover id="popover1"> Popover content </hvi-popover>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/popover/code}
+ */
+class HviPopover {
+    el = inject((ElementRef));
+    cleanupAutoUpdate;
+    boundHandleClick;
+    boundHandleKeydown;
+    /** Popover type - 'manual' krever manuell lukking, 'auto' lukkes ved klikk utenfor */
+    type = 'manual';
+    /** Visuell variant */
+    variant = 'default';
+    /** Farge-tema */
+    color = 'neutral';
+    /** Plassering av popover relativt til trigger */
+    placement = 'top';
+    /** Aktiver automatisk repositjonering hvis det ikke er plass */
+    autoPlacement = true;
+    /** Event når popover åpnes */
+    opened = new EventEmitter();
+    /** Event når popover lukkes */
+    closed = new EventEmitter();
+    get popoverElement() {
+        return this.el.nativeElement;
+    }
+    get triggerElement() {
+        const id = this.popoverElement.id;
+        return id ? document.querySelector(`[popovertarget="${id}"]`) : null;
+    }
+    ngOnInit() {
+        this.setupEventListeners();
+    }
+    ngOnDestroy() {
+        this.stopAutoUpdate();
+        this.removeEventListeners();
+    }
+    setupEventListeners() {
+        const popover = this.popoverElement;
+        // Click utenfor lukker popover
+        this.boundHandleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(`[popovertarget="${popover.id}"]`);
+            const isOutside = !isTrigger && !popover.contains(el);
+            if (isTrigger) {
+                event.preventDefault();
+                popover.togglePopover?.();
+            }
+            if (isOutside && popover.matches(':popover-open')) {
+                popover.togglePopover?.();
+            }
+        };
+        // Escape lukker popover
+        this.boundHandleKeydown = (event) => {
+            if (event.key !== 'Escape' || !popover.matches(':popover-open'))
+                return;
+            event.preventDefault();
+            popover.togglePopover?.();
+        };
+        addEventListener('click', this.boundHandleClick);
+        addEventListener('keydown', this.boundHandleKeydown);
+        // Toggle events
+        popover.addEventListener('beforetoggle', this.handleBeforeToggle);
+        popover.addEventListener('toggle', this.handleToggle);
+    }
+    removeEventListeners() {
+        if (this.boundHandleClick) {
+            removeEventListener('click', this.boundHandleClick);
+        }
+        if (this.boundHandleKeydown) {
+            removeEventListener('keydown', this.boundHandleKeydown);
+        }
+        this.popoverElement.removeEventListener('beforetoggle', this.handleBeforeToggle);
+        this.popoverElement.removeEventListener('toggle', this.handleToggle);
+    }
+    handleBeforeToggle = (event) => {
+        const toggleEvent = event;
+        if (toggleEvent.newState === 'open') {
+            this.updatePosition();
+        }
+    };
+    handleToggle = (event) => {
+        const toggleEvent = event;
+        if (toggleEvent.newState === 'open') {
+            this.startAutoUpdate();
+            this.opened.emit();
+        }
+        else {
+            this.stopAutoUpdate();
+            this.closed.emit();
+        }
+    };
+    updatePosition() {
+        const trigger = this.triggerElement;
+        const popover = this.popoverElement;
+        if (!trigger || !popover)
+            return;
+        computePosition(trigger, popover, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: [
+                offset((data) => {
+                    const styles = getComputedStyle(data.elements.floating, '::before');
+                    return parseFloat(styles.height) || 12;
+                }),
+                ...(this.autoPlacement ? [flip({ fallbackAxisSideDirection: 'start' }), shift()] : []),
+                arrowPseudoElement,
+            ],
+        }).then(({ x, y }) => {
+            popover.style.translate = `${x}px ${y}px`;
+        });
+    }
+    startAutoUpdate() {
+        this.stopAutoUpdate();
+        const trigger = this.triggerElement;
+        const popover = this.popoverElement;
+        if (!trigger || !popover)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.updatePosition());
+    }
+    stopAutoUpdate() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviPopover, isStandalone: true, selector: "hvi-popover", inputs: { type: "type", variant: "variant", color: "color", placement: "placement", autoPlacement: "autoPlacement" }, outputs: { opened: "opened", closed: "closed" }, host: { properties: { "attr.popover": "type", "attr.data-variant": "variant", "attr.data-color": "color" }, classAttribute: "ds-popover" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviPopover, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-popover',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-popover',
+                        '[attr.popover]': 'type',
+                        '[attr.data-variant]': 'variant',
+                        '[attr.data-color]': 'color',
+                    },
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], autoPlacement: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
 /**
  * @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.
@@ -1803,5 +2157,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviParagraph, HviTag, HviValidationKit, HviValidationMessage, fieldObserver, isElement, isInputLike, isLabel };
+export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviParagraph, HviPopover, HviTag, HviValidationKit, HviValidationMessage, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
 //# sourceMappingURL=helsevestikt-hviktor-angular.mjs.map