@helsevestikt/hviktor-angular 0.0.12 → 0.0.14

package/fesm2022/helsevestikt-hviktor-angular.mjs

@@ -3,6 +3,7 @@ import { Input, Component, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA,
 import '@u-elements/u-details';
 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.
@@ -842,6 +843,19 @@ class HviErrorSummary {
     focus() {
         this.container?.nativeElement.focus();
     }
+    /**
+     * Handles click on error links to prevent Angular Router navigation
+     * and instead focus/scroll to the target element.
+     */
+    onLinkClick(event, href) {
+        event.preventDefault();
+        const id = href.startsWith('#') ? href.slice(1) : href;
+        const target = document.getElementById(id);
+        if (target) {
+            target.focus();
+            target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
     get computedErrors() {
         // 1) Manual mode wins
         if (this.errors?.length)
@@ -936,7 +950,13 @@ class HviErrorSummary {
       <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>
+            <a
+              class="ds-link"
+              data-color="neutral"
+              [href]="err.href"
+              (click)="onLinkClick($event, err.href)"
+              >{{ err.message }}</a
+            >
           </li>
         }
       </ul>
@@ -980,7 +1000,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       <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>
+            <a
+              class="ds-link"
+              data-color="neutral"
+              [href]="err.href"
+              (click)="onLinkClick($event, err.href)"
+              >{{ err.message }}</a
+            >
           </li>
         }
       </ul>
@@ -1010,117 +1036,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 +1150,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.
  *
@@ -1907,6 +1933,333 @@ 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
+ * Select allows users to choose an option from a list.
+ *
+ * @example
+ * ```html
+ * <select hviSelect width="auto" id="select">
+ *  <option value="" disabled="" selected="">Select an option</option>
+ *  <option value="option1">Option 1</option>
+ *  <option value="option2">Option 2</option>
+ * </select>
+ * ```
+ *
+ * Documentation: https://designsystemet.no/en/components/docs/select/code
+ */
+class HviSelect {
+    /** Defines the width of Select, where "auto" matches the content width. */
+    width;
+    _readOnly = false;
+    _disabled = false;
+    /** Disabled Select. */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /** Readonly Select. */
+    set readOnly(value) {
+        this._readOnly = value;
+    }
+    get readOnly() {
+        return this._readOnly;
+    }
+    onMouseDown(event) {
+        if (this._readOnly) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onChange(event) {
+        if (this._readOnly) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onKeydown(event) {
+        if (!this._readOnly)
+            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: HviSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.2", type: HviSelect, isStandalone: true, selector: "select[hviSelect]", inputs: { width: "width", disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)", "change": "onChange($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-width": "width", "attr.readonly": "_readOnly ? \"\" : null", "attr.disabled": "_disabled ? \"\" : null" }, classAttribute: "ds-select ds-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[hviSelect]',
+                    standalone: true,
+                    host: {
+                        class: 'ds-select ds-input',
+                        '[attr.data-width]': 'width',
+                        '[attr.readonly]': '_readOnly ? "" : null',
+                        '[attr.disabled]': '_disabled ? "" : null',
+                    },
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @summary
+ * Skeleton component description.
+ *
+ * @example
+ * ```html
+ * <hvi-skeleton variant="rectangle" width="100px" height="20px"></hvi-skeleton>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/skeleton/code}
+ */
+class HviSkeleton {
+    variant = 'rectangle';
+    width;
+    height;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HviSkeleton, isStandalone: true, selector: "hvi-skeleton", inputs: { variant: "variant", width: "width", height: "height" }, host: { properties: { "attr.aria-hidden": "true", "attr.data-variant": "variant", "style.width": "width", "style.height": "height" }, classAttribute: "ds-skeleton" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HviSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hvi-skeleton',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'ds-skeleton',
+                        '[attr.aria-hidden]': 'true',
+                        '[attr.data-variant]': 'variant',
+                        '[style.width]': 'width',
+                        '[style.height]': 'height',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                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.
@@ -1957,5 +2310,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, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
+export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviParagraph, HviPopover, HviSelect, HviSkeleton, 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