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

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

@@ -0,0 +1,1100 @@
+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, ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ 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, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", ngImport: i0, type: CommonInputs, decorators: [{
+            type: Directive
+        }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+
+/**
+ * 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, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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"] }]
+        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+
+/* eslint-disable @angular-eslint/no-input-rename */
+class Spinner {
+    /**
+     * Aria-label for the spinner
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    /**
+     * Aria-label for the spinner
+     */
+    dataSize = input(undefined, ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ alias: 'data-size' }]));
+    /**
+     * Aria-label for the spinner
+     */
+    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{ alias: 'data-color' }]));
+    /**
+     * Aria-hidden for the spinner
+     */
+    ariaHidden = input(undefined, ...(ngDevMode ? [{ debugName: "ariaHidden", transform: booleanAttribute,
+            alias: 'aria-hidden' }] : [{
+            transform: booleanAttribute,
+            alias: 'aria-hidden',
+        }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }] } });
+
+class Button {
+    /**
+     * Specify which variant to use
+     * @default 'primary'
+     */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Toggle loading state.
+     * Pass an element if you want to display a custom loader.
+     *
+     * @default false
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Disables element
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * If this is a button with only an icon
+     */
+    icon = input(false, ...(ngDevMode ? [{ debugName: "icon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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.3.9", 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"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class Card {
+    /**
+     * Change the background color of the card
+     * @default 'default'
+     */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    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.3.9", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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)',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class CardBlock {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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, ...(ngDevMode ? [{ debugName: "dataSize", 
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: 'data-size' }] : [{
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: 'data-size',
+        }]));
+    dataColor = input(undefined, ...(ngDevMode ? [{ debugName: "dataColor", 
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: 'data-color' }] : [{
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: 'data-color',
+        }]));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
+    open = input(undefined, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    toggled = output();
+    detailsRef = viewChild('detailsRef', ...(ngDevMode ? [{ debugName: "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.3.9", ngImport: i0, type: Details, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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.3.9", 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"] }]
+        }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], detailsRef: [{ type: i0.ViewChild, args: ['detailsRef', { isSignal: true }] }] } });
+
+class DetailsContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: DetailsContent, isStandalone: true, selector: "ksd-details-content", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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.3.9", ngImport: i0, type: DetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: DetailsSummary, isStandalone: true, selector: "ksd-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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, ...(ngDevMode ? [{ debugName: "hasExceededCounter" }] : []));
+    /**
+     * Whether the field has errors projected from the outside
+     */
+    hasProjectedErrors = signal(false, ...(ngDevMode ? [{ debugName: "hasProjectedErrors" }] : []));
+    /**
+     * Whether the field has any errors associated with it
+     */
+    hasError = computed(() => this.hasExceededCounter() || this.hasProjectedErrors(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldState, decorators: [{
+            type: Injectable
+        }] });
+
+class Input {
+    /**
+     * The value of the input
+     */
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Whether the input is readonly
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Disables element
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whether the element is invalid.
+     */
+    ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid", transform: booleanAttribute,
+            alias: 'aria-invalid' }] : [{
+            transform: booleanAttribute,
+            alias: 'aria-invalid',
+        }]));
+    /**
+     * Displays a character counter. pass a number to set a limit.
+     */
+    counter = input(0, ...(ngDevMode ? [{ debugName: "counter", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    fieldState = inject(FieldState, { optional: true });
+    onClick(event) {
+        if (this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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)',
+                    },
+                }]
+        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }] } });
+
+class Label {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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.3.9", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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(...(ngDevMode ? [{ debugName: "limit" }] : []));
+    /**
+     * How many characters have been typed.
+     *
+     **/
+    count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
+    remainder = computed(() => this.limit() - this.count(), ...(ngDevMode ? [{ debugName: "remainder" }] : []));
+    excessCount = computed(() => Math.abs(this.remainder()), ...(ngDevMode ? [{ debugName: "excessCount" }] : []));
+    hasExceededLimit = computed(() => this.count() > this.limit(), ...(ngDevMode ? [{ debugName: "hasExceededLimit" }] : []));
+    fieldState = inject(FieldState);
+    constructor() {
+        effect(() => {
+            this.fieldState.hasExceededCounter.set(this.hasExceededLimit());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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.3.9", 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: () => [], propDecorators: { limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }] } });
+
+/**
+ * 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', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    fieldState = inject(FieldState);
+    input = contentChild(Input, ...(ngDevMode ? [{ debugName: "input" }] : []));
+    label = contentChild(Label, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    projectedErrors = contentChildren(ValidationMessage, ...(ngDevMode ? [{ debugName: "projectedErrors" }] : []));
+    el = inject(ElementRef);
+    count = computed(() => this.input()?.value().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    limit = computed(() => this.input()?.counter(), ...(ngDevMode ? [{ debugName: "limit" }] : []));
+    hasCounter = computed(() => this.limit(), ...(ngDevMode ? [{ debugName: "hasCounter" }] : []));
+    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.3.9", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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.3.9", 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: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Input), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Label), { isSignal: true }] }], projectedErrors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ValidationMessage), { isSignal: true }] }] } });
+
+class FieldDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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.3.9", ngImport: i0, type: FieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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.3.9", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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.3.9", ngImport: i0, type: FieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: FieldsetDescription, isStandalone: true, selector: "p[ksd-fieldset-description]", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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.3.9", ngImport: i0, type: FieldsetLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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.3.9", ngImport: i0, type: Paragraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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(...(ngDevMode ? [{ debugName: "popoverId" }] : []));
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    autoPlacement = input(true, ...(ngDevMode ? [{ debugName: "autoPlacement", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    // for controlled component
+    open = input(undefined, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ 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, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
+    controlledOpen = computed(() => this.open() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "controlledOpen" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    dataSize = input('md', ...(ngDevMode ? [{ debugName: "dataSize", alias: 'data-size' }] : [{ alias: 'data-size' }]));
+    dataColor = input('neutral', ...(ngDevMode ? [{ debugName: "dataColor", alias: 'data-color' }] : [{
+            alias: 'data-color',
+        }]));
+    popoverRef = viewChild('myPopover', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
+    // 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);
+        });
+    }, ...(ngDevMode ? [{ debugName: "controlledComponent" }] : [{}]));
+    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`;
+                });
+            });
+        }
+    }, ...(ngDevMode ? [{ debugName: "positionPopover" }] : [{}]));
+    // 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.3.9", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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.3.9", 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: [],
+                }]
+        }], propDecorators: { popoverId: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverId", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlacement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], triggeredClose: [{ type: i0.Output, args: ["triggeredClose"] }], triggeredOpen: [{ type: i0.Output, args: ["triggeredOpen"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: ['myPopover', { isSignal: true }] }] } });
+
+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.3.9", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", 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.3.9", 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, ...(ngDevMode ? [{ debugName: "input" }] : []));
+    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.3.9", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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.3.9", 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: () => [], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchInput), { isSignal: true }] }] } });
+
+/**
+ * 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', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Aria label for the button
+     */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SearchButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * 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', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ 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.3.9", ngImport: i0, type: SearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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.3.9", 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)',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clearInput: [{ type: i0.Output, args: ["clearInput"] }] } });
+
+/**
+ * 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