@ks-digital/designsystem-angular 0.0.1-alpha.24 → 0.0.1-alpha.25

package/dist/fesm2022/ks-digital-designsystem-angular.mjs

@@ -1,1094 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, Directive, Component, booleanAttribute, inject, ElementRef, output, viewChild, CUSTOM_ELEMENTS_SCHEMA, signal, computed, Injectable, numberAttribute, effect, contentChild, contentChildren, afterNextRender, isDevMode } from '@angular/core';
-import '@u-elements/u-details';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
-
-/* eslint-disable @angular-eslint/no-input-rename */
-/**
- * We use input aliasing to bridge the gap between Angular's camelCase property naming convention and our HTML data attributes.
- * This approach allows us to use valid HTML data attributes as documented by Designsystemet while maintaining
- * proper TypeScript intellisense support.
- *
- * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive
- */
-class CommonInputs {
-    /**
-     * Changes size for descendant Designsystemet components. Select from predefined sizes.
-     * @attribute data-size
-     */
-    dataSize = input(undefined, { alias: 'data-size' });
-    /**
-     * Changes color for descendant Designsystemet components.
-     * Select from predefined colors and colors defined using theme.designsystemet.no.
-     * @attribute data-color
-     */
-    dataColor = input(undefined, { alias: 'data-color' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: CommonInputs, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommonInputs, decorators: [{
-            type: Directive
-        }] });
-
-/**
- * Alerts are used to inform users about important information, warnings, errors, or success.
- */
-class Alert {
-    /**
-     * The color variant of the alert.
-     */
-    /* eslint-disable-next-line @angular-eslint/no-input-rename */
-    dataColor = input(undefined, { alias: 'data-color' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: Alert, isStandalone: true, selector: "ksd-alert", inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ds-alert" }, hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size"] }], ngImport: i0, template: ` <ng-content />`, isInline: true, styles: [":host{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\")}:host[data-color=warning]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\")}:host[data-color=success]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}:host[data-color=danger]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Alert, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-alert', template: ` <ng-content />`, host: {
-                        class: 'ds-alert',
-                    }, hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size'],
-                        },
-                    ], styles: [":host{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E\")}:host[data-color=warning]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E\")}:host[data-color=success]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}:host[data-color=danger]{--dsc-alert-icon-url: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E\")}\n"] }]
-        }] });
-
-/* eslint-disable @angular-eslint/no-input-rename */
-class Spinner {
-    /**
-     * Aria-label for the spinner
-     */
-    ariaLabel = input(undefined, { alias: 'aria-label' });
-    /**
-     * Aria-label for the spinner
-     */
-    dataSize = input(undefined, { alias: 'data-size' });
-    /**
-     * Aria-label for the spinner
-     */
-    dataColor = input(undefined, { alias: 'data-color' });
-    /**
-     * Aria-hidden for the spinner
-     */
-    ariaHidden = input(undefined, {
-        transform: booleanAttribute,
-        alias: 'aria-hidden',
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: Spinner, isStandalone: true, selector: "ksd-spinner", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      class="ds-spinner"
-      role="img"
-      viewBox="0 0 50 50"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
-    >
-      <circle
-        class="ds-spinner__background"
-        cx="25"
-        cy="25"
-        r="20"
-        fill="none"
-        stroke-width="5"
-      />
-      <circle
-        class="ds-spinner__circle"
-        cx="25"
-        cy="25"
-        r="20"
-        fill="none"
-        stroke-width="5"
-      />
-    </svg>
-  `, isInline: true, styles: [":host{display:contents}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Spinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-spinner', template: `
-    <svg
-      class="ds-spinner"
-      role="img"
-      viewBox="0 0 50 50"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
-    >
-      <circle
-        class="ds-spinner__background"
-        cx="25"
-        cy="25"
-        r="20"
-        fill="none"
-        stroke-width="5"
-      />
-      <circle
-        class="ds-spinner__circle"
-        cx="25"
-        cy="25"
-        r="20"
-        fill="none"
-        stroke-width="5"
-      />
-    </svg>
-  `, styles: [":host{display:contents}\n"] }]
-        }] });
-
-class Button {
-    /**
-     * Specify which variant to use
-     * @default 'primary'
-     */
-    variant = input('primary');
-    /**
-     * Toggle loading state.
-     * Pass an element if you want to display a custom loader.
-     *
-     * @default false
-     */
-    loading = input(false, { transform: booleanAttribute });
-    /**
-     * Disables element
-     */
-    disabled = input(false, { transform: booleanAttribute });
-    /**
-     * If this is a button with only an icon
-     */
-    icon = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: Button, isStandalone: true, selector: "button[ksd-button], a[ksd-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-variant": "variant()", "attr.data-icon": "icon() || null", "attr.disabled": "disabled() ? true : null", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
-    @if (loading()) {
-      <ksd-spinner aria-hidden="true" />
-    }
-    <ng-content />
-  `, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "data-size", "data-color", "aria-hidden"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Button, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[ksd-button], a[ksd-button]', hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ], imports: [Spinner], host: {
-                        class: 'ds-button',
-                        type: 'button',
-                        '[attr.data-variant]': 'variant()',
-                        '[attr.data-icon]': 'icon() || null',
-                        '[attr.disabled]': 'disabled() ? true : null',
-                        '[attr.aria-busy]': 'loading() ? true : null',
-                    }, template: `
-    @if (loading()) {
-      <ksd-spinner aria-hidden="true" />
-    }
-    <ng-content />
-  `, styles: [":host ::ng-deep>*{display:inline-flex}\n"] }]
-        }] });
-
-class Card {
-    /**
-     * Change the background color of the card
-     * @default 'default'
-     */
-    variant = input('default');
-    elementRef = inject(ElementRef);
-    projectedLink() {
-        const el = this.elementRef.nativeElement;
-        return el?.querySelector('h1 a, h2 a, h3 a, h4 a, h5 a, h6 a');
-    }
-    handleClick = (event) => {
-        const link = this.projectedLink();
-        if (!link)
-            return;
-        if (event.metaKey || event.ctrlKey) {
-            window.open(link.href, '_blank', 'noopener,noreferrer');
-        }
-        else {
-            link.click();
-        }
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: Card, isStandalone: true, selector: "[ksd-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-card" }, hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Card, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ksd-card]',
-                    template: ` <ng-content /> `,
-                    hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ],
-                    host: {
-                        class: 'ds-card',
-                        '[attr.data-variant]': 'variant()',
-                        '(click)': 'handleClick($event)',
-                    },
-                }]
-        }] });
-
-class CardBlock {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: CardBlock, isStandalone: true, selector: "[ksd-card-block]", host: { classAttribute: "ds-card__block" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CardBlock, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ksd-card-block]',
-                    host: {
-                        class: 'ds-card__block',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class Details {
-    dataSize = input(undefined, {
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        alias: 'data-size',
-    });
-    dataColor = input(undefined, {
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        alias: 'data-color',
-    });
-    variant = input('default');
-    defaultOpen = input(false);
-    open = input(undefined);
-    toggled = output();
-    detailsRef = viewChild('detailsRef');
-    onToggle(event) {
-        const details = this.detailsRef()?.nativeElement;
-        if (details && details.open !== this.open()) {
-            this.toggled.emit(event);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Details, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: Details, isStandalone: true, selector: "ksd-details", inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, viewQueries: [{ propertyName: "detailsRef", first: true, predicate: ["detailsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <u-details
-      #detailsRef
-      class="ds-details"
-      [attr.data-variant]="variant()"
-      [attr.open]="(open() ?? defaultOpen()) || undefined"
-      [attr.data-color]="dataColor()"
-      [attr.data-size]="dataSize()"
-      (toggle)="onToggle($event)"
-    >
-      <u-summary>
-        <ng-content select="ksd-details-summary" />
-      </u-summary>
-      <div>
-        <ng-content select="ksd-details-content" />
-      </div>
-    </u-details>
-  `, isInline: true, styles: [".ds-card>:host(:last-of-type)>.ds-details{border-bottom:0}.ds-card>:host(:first-of-type)>.ds-details{border-top:0}:host(:not(:first-of-type))>.ds-details{border-top:0;margin-top:0}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Details, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-details', schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <u-details
-      #detailsRef
-      class="ds-details"
-      [attr.data-variant]="variant()"
-      [attr.open]="(open() ?? defaultOpen()) || undefined"
-      [attr.data-color]="dataColor()"
-      [attr.data-size]="dataSize()"
-      (toggle)="onToggle($event)"
-    >
-      <u-summary>
-        <ng-content select="ksd-details-summary" />
-      </u-summary>
-      <div>
-        <ng-content select="ksd-details-content" />
-      </div>
-    </u-details>
-  `, styles: [".ds-card>:host(:last-of-type)>.ds-details{border-bottom:0}.ds-card>:host(:first-of-type)>.ds-details{border-top:0}:host(:not(:first-of-type))>.ds-details{border-top:0;margin-top:0}\n"] }]
-        }] });
-
-class DetailsContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: DetailsContent, isStandalone: true, selector: "ksd-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DetailsContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-details-content',
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class DetailsSummary {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: DetailsSummary, isStandalone: true, selector: "ksd-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DetailsSummary, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-details-summary',
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class FieldState {
-    /**
-     * Whether the field counter has exceeded its limit
-     */
-    hasExceededCounter = signal(false);
-    /**
-     * Whether the field has errors projected from the outside
-     */
-    hasProjectedErrors = signal(false);
-    /**
-     * Whether the field has any errors associated with it
-     */
-    hasError = computed(() => this.hasExceededCounter() || this.hasProjectedErrors());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldState });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldState, decorators: [{
-            type: Injectable
-        }] });
-
-class Input {
-    /**
-     * The value of the input
-     */
-    value = signal('');
-    /**
-     * Whether the input is readonly
-     */
-    readonly = input(false, { transform: booleanAttribute });
-    /**
-     * Disables element
-     */
-    disabled = input(false, { transform: booleanAttribute });
-    /**
-     * Whether the element is invalid.
-     */
-    ariaInvalid = input(false, {
-        transform: booleanAttribute,
-        alias: 'aria-invalid',
-    });
-    /**
-     * Displays a character counter. pass a number to set a limit.
-     */
-    counter = input(0, { transform: numberAttribute });
-    fieldState = inject(FieldState, { optional: true });
-    onClick(event) {
-        if (this.readonly()) {
-            event.preventDefault();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: Input, isStandalone: true, selector: "input[ksd-input], textarea[ksd-input], select[ksd-input]", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "input": "value.set($event.target.value)" }, properties: { "attr.readonly": "readonly() ? true : null", "attr.disabled": "disabled() ? true : null", "attr.aria-invalid": "ariaInvalid() ? true : (fieldState?.hasError() ? true:  null)" }, classAttribute: "ds-input" }, hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Input, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'input[ksd-input], textarea[ksd-input], select[ksd-input]',
-                    hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ],
-                    host: {
-                        class: 'ds-input',
-                        '[attr.readonly]': 'readonly() ? true : null',
-                        '[attr.disabled]': 'disabled() ? true : null',
-                        '[attr.aria-invalid]': 'ariaInvalid() ? true : (fieldState?.hasError() ? true:  null)',
-                        '(click)': 'onClick($event)',
-                        '(input)': 'value.set($event.target.value)',
-                    },
-                }]
-        }] });
-
-class Label {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Label, isStandalone: true, selector: "ksd-label", hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
-    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
-    <label class="ds-label"><ng-content /></label>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Label, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-label',
-                    hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ],
-                    template: `
-    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
-    <label class="ds-label"><ng-content /></label>
-  `,
-                }]
-        }] });
-
-class ValidationMessage {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: ValidationMessage, isStandalone: true, selector: "[ksd-validation-message]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ValidationMessage, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[ksd-validation-message]',
-                    host: {
-                        class: 'ds-validation-message',
-                        'data-field': 'validation',
-                    },
-                }]
-        }] });
-
-class FieldCounter {
-    /**
-     * The maximum allowed characters.
-     *
-     **/
-    limit = input.required();
-    /**
-     * How many characters have been typed.
-     *
-     **/
-    count = input.required();
-    remainder = computed(() => this.limit() - this.count());
-    excessCount = computed(() => Math.abs(this.remainder()));
-    hasExceededLimit = computed(() => this.count() > this.limit());
-    fieldState = inject(FieldState);
-    constructor() {
-        effect(() => {
-            this.fieldState.hasExceededCounter.set(this.hasExceededLimit());
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: FieldCounter, isStandalone: true, selector: "ksd-field-counter", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div data-field="description" class="ds-sr-only" aria-live="polite">
-      @if (hasExceededLimit()) {
-        {{ excessCount() }} tegn for mye
-      }
-    </div>
-    @if (hasExceededLimit()) {
-      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>
-    } @else {
-      <p data-field="validation">{{ remainder() }} tegn igjen</p>
-    }
-  `, isInline: true, styles: [":host>*{margin-top:var(--dsc-field-content-spacing)}\n"], dependencies: [{ kind: "directive", type: ValidationMessage, selector: "[ksd-validation-message]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldCounter, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-field-counter', imports: [ValidationMessage], template: `
-    <div data-field="description" class="ds-sr-only" aria-live="polite">
-      @if (hasExceededLimit()) {
-        {{ excessCount() }} tegn for mye
-      }
-    </div>
-    @if (hasExceededLimit()) {
-      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>
-    } @else {
-      <p data-field="validation">{{ remainder() }} tegn igjen</p>
-    }
-  `, styles: [":host>*{margin-top:var(--dsc-field-content-spacing)}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * Lifted from Designsystemet core repo.
- * Takes care of binding ids, labels and aria-describedby attributes
- *
- * @param fieldElement - The field element to observe
- * @returns A function to disconnect the observer
- * */
-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);
-            // @ts-expect-error - addedNodes is not typed
-            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)) {
-                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]; // 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 (descriptionType === 'validation')
-                describedbyIds.unshift(el.id); // Validations to the front
-            else if (descriptionType)
-                describedbyIds.push(el.id); // Other descriptions to the back
-        }
-        setAttr(input, 'id', inputId);
-        setAttr(input, 'aria-describedby', describedbyIds.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;
-}
-
-/**
- * Use the Field component to connect inputs and labels
- */
-class Field {
-    /**
-     * Position of toggle inputs (radio, checkbox, switch) in field
-     * @default start
-     */
-    position = input('start');
-    fieldState = inject(FieldState);
-    input = contentChild(Input);
-    label = contentChild(Label);
-    projectedErrors = contentChildren(ValidationMessage);
-    el = inject(ElementRef);
-    count = computed(() => this.input()?.value().length);
-    limit = computed(() => this.input()?.counter());
-    hasCounter = computed(() => this.limit());
-    constructor() {
-        afterNextRender(() => {
-            fieldObserver(this.el.nativeElement);
-        });
-        effect(() => {
-            this.fieldState.hasProjectedErrors.set(this.projectedErrors().length > 0);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: Field, isStandalone: true, selector: "ksd-field", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dataPosition": "position()" }, classAttribute: "ds-field" }, providers: [FieldState], queries: [{ propertyName: "input", first: true, predicate: Input, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: Label, descendants: true, isSignal: true }, { propertyName: "projectedErrors", predicate: ValidationMessage, isSignal: true }], hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
-    <ng-content />
-    @if (hasCounter()) {
-      <ksd-field-counter [limit]="limit() ?? 0" [count]="count() ?? 0" />
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: FieldCounter, selector: "ksd-field-counter", inputs: ["limit", "count"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Field, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-field',
-                    hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ],
-                    host: {
-                        class: 'ds-field',
-                        '[attr.dataPosition]': 'position()',
-                    },
-                    template: `
-    <ng-content />
-    @if (hasCounter()) {
-      <ksd-field-counter [limit]="limit() ?? 0" [count]="count() ?? 0" />
-    }
-  `,
-                    imports: [FieldCounter],
-                    providers: [FieldState],
-                }]
-        }], ctorParameters: () => [] });
-
-class FieldDescription {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldDescription, isStandalone: true, selector: "[ksd-field-description]", host: { attributes: { "data-field": "description" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldDescription, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ksd-field-description]',
-                    host: {
-                        'data-field': 'description',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class FieldError {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldError, isStandalone: true, selector: "[ksd-error]", hostDirectives: [{ directive: ValidationMessage }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldError, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ksd-error]',
-                    template: `<ng-content />`,
-                    hostDirectives: [
-                        {
-                            directive: ValidationMessage,
-                        },
-                    ],
-                }]
-        }] });
-
-class Fieldset {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Fieldset, isStandalone: true, selector: "fieldset[ksd-fieldset]", host: { attributes: { "role": "fieldset" }, classAttribute: "ds-fieldset" }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Fieldset, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fieldset[ksd-fieldset]',
-                    host: {
-                        role: 'fieldset',
-                        class: 'ds-fieldset',
-                    },
-                    template: ` <ng-content /> `,
-                }]
-        }] });
-
-class FieldsetDescription {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldsetDescription, isStandalone: true, selector: "p[ksd-fieldset-description]", ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetDescription, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p[ksd-fieldset-description]',
-                    template: `<ng-content />`,
-                    host: {},
-                }]
-        }] });
-
-class FieldsetLegend {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldsetLegend, isStandalone: true, selector: "legend[ksd-fieldset-legend]", host: { attributes: { "role": "legend" }, classAttribute: "ds-label" }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetLegend, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'legend[ksd-fieldset-legend]',
-                    host: {
-                        role: 'legend',
-                        class: 'ds-label',
-                    },
-                    template: ` <ng-content /> `,
-                }]
-        }] });
-
-class Paragraph {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Paragraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Paragraph, isStandalone: true, selector: "p[ksd-paragraph]", host: { classAttribute: "ds-paragraph" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Paragraph, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p[ksd-paragraph]',
-                    template: `<ng-content />`,
-                    host: {
-                        class: 'ds-paragraph',
-                    },
-                }]
-        }] });
-
-/* eslint-disable @angular-eslint/no-input-rename */
-class Popover {
-    // use popoverId instead of id since id will be put on the angular element and not the popover-div
-    popoverId = input.required();
-    placement = input('top');
-    autoPlacement = input(true, { transform: booleanAttribute });
-    // for controlled component
-    open = input(undefined, { transform: booleanAttribute });
-    /*
-    the naming here is different from Designsystemet
-    since we need to use outputs for onOpen and onClose
-    */
-    triggeredClose = output();
-    triggeredOpen = output();
-    internalOpen = signal(false);
-    controlledOpen = computed(() => this.open() ?? this.internalOpen());
-    variant = input('default');
-    dataSize = input('md', { alias: 'data-size' });
-    dataColor = input('neutral', {
-        alias: 'data-color',
-    });
-    popoverRef = viewChild('myPopover');
-    // enable controlled component
-    controlledComponent = effect((onCleanup) => {
-        const popover = this.popoverRef()?.nativeElement;
-        const handleClick = (event) => {
-            const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${this.popoverId()}"]`);
-            const isOutside = !isTrigger && !popover?.contains(el);
-            if (isTrigger) {
-                event.preventDefault(); // Prevent native Popover API
-                this.internalOpen.update((open) => !open);
-                this.triggeredOpen.emit();
-            }
-            if (isOutside) {
-                this.internalOpen.set(false);
-                this.triggeredClose.emit();
-            }
-        };
-        const handleKeydown = (event) => {
-            if (event.key !== 'Escape' || !this.controlledOpen())
-                return;
-            event.preventDefault(); // Prevent closing fullscreen in Safari
-            this.internalOpen.set(false);
-            this.triggeredClose.emit();
-        };
-        popover?.togglePopover?.(this.controlledOpen());
-        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
-        document.addEventListener('keydown', handleKeydown);
-        onCleanup(() => {
-            document.removeEventListener('click', handleClick, true);
-            document.removeEventListener('keydown', handleKeydown);
-        });
-    }, {});
-    positionPopover = effect(() => {
-        const popover = this.popoverRef()?.nativeElement;
-        const trigger = document.querySelector(`[popovertarget="${this.popoverId()}"]`);
-        const placement = this.placement();
-        if (popover && trigger && this.controlledOpen()) {
-            autoUpdate(trigger, popover, () => {
-                computePosition(trigger, popover, {
-                    placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset((data) => {
-                            // get pseudo element arrow size
-                            const styles = getComputedStyle(data.elements.floating, '::before');
-                            return parseFloat(styles.height);
-                        }),
-                        ...(this.autoPlacement()
-                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
-                            : []),
-                        this.arrowPseudoElement,
-                    ],
-                }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
-                });
-            });
-        }
-    }, {});
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    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]); // We only need top/left/right/bottom
-            elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
-            elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
-            return data;
-        },
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: Popover, isStandalone: true, selector: "ksd-popover", inputs: { popoverId: { classPropertyName: "popoverId", publicName: "popoverId", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoPlacement: { classPropertyName: "autoPlacement", publicName: "autoPlacement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggeredClose: "triggeredClose", triggeredOpen: "triggeredOpen" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["myPopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      #myPopover
-      popover="manual"
-      class="ds-popover"
-      data-testid="popover"
-      [id]="popoverId()"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
-      [attr.data-variant]="variant()"
-    >
-      @if (controlledOpen()) {
-        <ng-content />
-      }
-    </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Popover, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-popover',
-                    template: `
-    <div
-      #myPopover
-      popover="manual"
-      class="ds-popover"
-      data-testid="popover"
-      [id]="popoverId()"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
-      [attr.data-variant]="variant()"
-    >
-      @if (controlledOpen()) {
-        <ng-content />
-      }
-    </div>
-  `,
-                    imports: [],
-                }]
-        }] });
-
-const logIfDevMode = ({ component, message, }) => {
-    if (isDevMode()) {
-        console.log(`[${component}] ${message}`);
-    }
-};
-
-/**
- * Search input
- *
- * Used within Search to provide a search input.
- */
-class SearchInput {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: SearchInput, isStandalone: true, selector: "input[ksd-search-input]", host: { attributes: { "type": "search", "placeholder": "" }, classAttribute: "ds-input" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchInput, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'input[ksd-search-input]',
-                    standalone: true,
-                    host: {
-                        class: 'ds-input',
-                        type: 'search',
-                        placeholder: '', // Need empty placeholder to enable show/hide for clear button
-                    },
-                }]
-        }] });
-
-/**
- * Search Component
- *
- * Use to contain the search input and buttons.
- * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.
- *
- * @example
- * <div ksd-search>
- *   <input ksd-search-input />
- *   <button ksd-search-clear></button>
- *   <button ksd-search-button></button>
- * </div>
- */
-class Search {
-    input = contentChild(SearchInput);
-    constructor() {
-        afterNextRender(() => {
-            if (!this.input()) {
-                logIfDevMode({
-                    component: 'Search',
-                    message: 'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',
-                });
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: Search, isStandalone: true, selector: "ksd-search", host: { classAttribute: "ds-search" }, queries: [{ propertyName: "input", first: true, predicate: SearchInput, descendants: true, isSignal: true }], hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
-    <ng-content select="[ksd-search-input]" />
-    <ng-content select="[ksd-search-clear]" />
-    <ng-content select="[ksd-search-button]" />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Search, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-search',
-                    template: `
-    <ng-content select="[ksd-search-input]" />
-    <ng-content select="[ksd-search-clear]" />
-    <ng-content select="[ksd-search-button]" />
-  `,
-                    host: {
-                        class: 'ds-search',
-                    },
-                    hostDirectives: [
-                        {
-                            directive: CommonInputs,
-                            inputs: ['data-size', 'data-color'],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Search button
- *
- * Used within Search to provide a submit button.
- *
- * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use
- * @param {string} [aria-label] - Aria label for the button
- *
- */
-class SearchButton {
-    /**
-     * Specify which button variant to use
-     *
-     * @default 'primary'
-     */
-    variant = input('primary');
-    /**
-     * Aria label for the button
-     */
-    ariaLabel = input('', { alias: 'aria-label' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: SearchButton, isStandalone: true, selector: "button[ksd-search-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "submit" }, properties: { "attr.aria-label": "this.ariaLabel()", "attr.data-variant": "this.variant()" }, classAttribute: "ds-button" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchButton, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'button[ksd-search-button]',
-                    standalone: true,
-                    host: {
-                        class: 'ds-button',
-                        type: 'submit',
-                        '[attr.aria-label]': 'this.ariaLabel()',
-                        '[attr.data-variant]': 'this.variant()',
-                    },
-                }]
-        }] });
-
-/**
- * Search clear button
- *
- * Used within Search to provide a clear button.
- *
- * @param {string} [aria-label] - Aria label for the button.
- *
- * @event clearInput - Emitted when the clear button is clicked.
- * Use this to notify controlled forms that the input should be cleared.
- *
- */
-class SearchClear {
-    /**
-     * Aria label for the button
-     * @default 'Tøm'
-     */
-    ariaLabel = input('Tøm', { alias: 'aria-label' });
-    /**
-     * Output to notify controlled forms that input should be cleared
-     */
-    clearInput = output();
-    handleClear(e) {
-        const target = e.target;
-        let inputElement = null;
-        if (target instanceof HTMLElement) {
-            inputElement = target.closest('.ds-search')?.querySelector('input');
-        }
-        if (!inputElement)
-            throw new Error('Input is missing');
-        if (!(inputElement instanceof HTMLInputElement)) {
-            throw new Error('Input is not an input element');
-        }
-        e.preventDefault();
-        inputElement.value = '';
-        this.clearInput.emit();
-        inputElement.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: SearchClear, isStandalone: true, selector: "button[ksd-search-clear]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearInput: "clearInput" }, host: { attributes: { "type": "reset" }, listeners: { "click": "handleClear($event)" }, properties: { "attr.data-variant": "'tertiary'", "attr.aria-label": "this.ariaLabel()" }, classAttribute: "ds-button" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SearchClear, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'button[ksd-search-clear]',
-                    standalone: true,
-                    host: {
-                        class: 'ds-button',
-                        type: 'reset',
-                        '[attr.data-variant]': "'tertiary'",
-                        '[attr.aria-label]': 'this.ariaLabel()',
-                        '(click)': 'handleClear($event)',
-                    },
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { Alert, Button, Card, CardBlock, CommonInputs, Details, DetailsContent, DetailsSummary, Field, FieldDescription, FieldError, Fieldset, FieldsetDescription, FieldsetLegend, Input, Label, Paragraph, Popover, Search, SearchButton, SearchClear, SearchInput, Spinner, ValidationMessage };
-//# sourceMappingURL=ks-digital-designsystem-angular.mjs.map