@ks-digital/designsystem-angular 0.0.1-alpha.7 → 0.0.1-alpha.70

package/README.md

@@ -1,10 +1,10 @@
-# 🚧 KS Digital Designsystem for Angular
+# KS Digital Designsystem for Angular
 
-> This is an experimental POC as for now
+> ⚠ This library is currently experimental. However, we actively use and test it in internal applications, and we strive to keep it stable at all times.
 
 This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
 
-## Installation (WIP)
+## Installation
 
 Install the required packages using your preferred package manager:
 
@@ -19,25 +19,42 @@ pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
 Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
 
 ```html
-<link
-  href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
 ```
 
 ### 2. Import Base Styles and Themes
 
 Import the base styles and the theme you want to use in your application:
 
-```javascript
-import '@ks-digital/designsystem-themes/base.css'
-import '@ks-digital/designsystem-themes/ledsagerbevis.css'
+```css
+@import url('@ks-digital/designsystem-themes/base.css');
+@import url('@ks-digital/designsystem-themes/ksdigital.css');
 ```
 
 ### 3. Use Components
 
-To be written.
+```ts
+import { Button } from '@ks-digital/designsystem-angular'
+
+@Component({
+  imports: [Button],
+  template: `
+  <button ksd-button>
+    Click me
+  </button>
+  `,
+})
+```
 
 ## Example
 
 A complete example setup is available in the `angular-demo` located under the `apps` folder.
+
+## Development
+
+`pnpm nx run @ks-digital/designsystem-angular:storybook`
+
+## Update snapshots
+
+In folder `apps/angular-demo-e2e`:
+`docker compose run --rm update-snapshots`

package/__internals/README.md

@@ -0,0 +1,3 @@
+# Internals
+
+This entry point is intended only for internal use and may change without notice. Avoid depending on it directly in applications.

package/alert/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/alert
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/alert`.

package/breadcrumbs/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/breadcrumbs
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/breadcrumbs`.

package/button/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/button
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/button`.

package/card/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/card
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/card`.

package/details/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/details
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/details`.

package/dialog/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/dialog
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/dialog`.

package/dropdown/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/dropdown
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/dropdown`.

package/error-summary/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/errorsummary
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/errorsummary`.

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

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { input, Directive, isDevMode } from '@angular/core';
+
+/**
+ * Applies data-size attribute to host-element.
+ */
+class HostSize {
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : /* istanbul ignore next */ {}), alias: 'data-size' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostSize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: HostSize, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "dataSize() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostSize, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-size]': 'dataSize() || null',
+                    },
+                }]
+        }], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }] } });
+/**
+ * Applies data-color attribute to host-element for all colors, including severity colors.
+ */
+class HostColor {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : /* istanbul ignore next */ {}), alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostColor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: HostColor, isStandalone: true, inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostColor, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-color]': 'dataColor() || null',
+                    },
+                }]
+        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+/**
+ * Applies data-color attribute to host-element for severity colors.
+ */
+class HostSeverityColors {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : /* istanbul ignore next */ {}), alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostSeverityColors, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: HostSeverityColors, isStandalone: true, inputs: { dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HostSeverityColors, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.data-color]': 'dataColor() || null',
+                    },
+                }]
+        }], propDecorators: { dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
+
+const logIfDevMode = ({ component, message, }) => {
+    if (isDevMode()) {
+        console.log(`[${component}] ${message}`);
+    }
+};
+
+const randomId = () => {
+    return `${Math.random().toString(36).slice(2, 7)}`;
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };
+//# sourceMappingURL=ks-digital-designsystem-angular-__internals.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/host-directives.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts","../../../../packages/angular/__internals/src/ks-digital-designsystem-angular-__internals.ts"],"sourcesContent":["import { Directive, input } from '@angular/core'\nimport {\n  ColorDefinitions,\n  SeverityColorDefinitions,\n  Size,\n} from '@ks-digital/designsystem-themes/types'\n\n/**\n * Applies data-size attribute to host-element.\n */\n@Directive({\n  host: {\n    '[attr.data-size]': 'dataSize() || null',\n  },\n})\nexport class HostSize {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  readonly dataSize = input<Size>(undefined, {\n    alias: 'data-size',\n  })\n}\n\n/**\n * Applies data-color attribute to host-element for all colors, including severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostColor {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<\n    keyof ColorDefinitions | keyof SeverityColorDefinitions\n  >(undefined, { alias: 'data-color' })\n}\n\n/**\n * Applies data-color attribute to host-element for severity colors.\n */\n@Directive({\n  host: {\n    '[attr.data-color]': 'dataColor() || null',\n  },\n})\nexport class HostSeverityColors {\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined in theme.\n   * @attribute data-color\n   */\n  readonly dataColor = input<keyof SeverityColorDefinitions>(undefined, {\n    alias: 'data-color',\n  })\n}\n","import { isDevMode } from '@angular/core'\n\nexport const logIfDevMode = ({\n  component,\n  message,\n}: {\n  component: string\n  message: string\n}) => {\n  if (isDevMode()) {\n    console.log(`[${component}] ${message}`)\n  }\n}\n","export const randomId = () => {\n  return `${Math.random().toString(36).slice(2, 7)}`\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostSeverityColors } from '@ks-digital/designsystem-angular/__internals';
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ */
+class Alert {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Alert, isStandalone: true, selector: "ksd-alert", host: { classAttribute: "ds-alert" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostSeverityColors, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content />`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Alert, decorators: [{
+            type: Component,
+            args: [{ selector: 'ksd-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <ng-content />`, host: {
+                        class: 'ds-alert',
+                    }, hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostSeverityColors,
+                            inputs: ['data-color'],
+                        },
+                    ], styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Alert };
+//# sourceMappingURL=ks-digital-designsystem-angular-alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-alert.mjs","sources":["../../../../packages/angular/alert/src/alert.ts","../../../../packages/angular/alert/src/ks-digital-designsystem-angular-alert.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\nimport {\n  HostSeverityColors,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Alerts are used to inform users about important information, warnings, errors, or success.\n */\n@Component({\n  selector: 'ksd-alert',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <ng-content />`,\n  host: {\n    class: 'ds-alert',\n  },\n  styles: `\n    :host {\n      display: block;\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostSeverityColors,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Alert {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAMA;;AAEG;MAwBU,KAAK,CAAA;uGAAL,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,yQApBN,CAAA,eAAA,CAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAoBhB,KAAK,EAAA,UAAA,EAAA,CAAA;kBAvBjB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBACJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,KAAK,EAAE,UAAU;qBAClB,EAAA,cAAA,EAMe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,kBAAkB;4BAC7B,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AC9BH;;AAEG;;;;"}

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

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@digdir/designsystemet-web';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+
+class Breadcrumbs {
+    /**
+     * Sets the screen reader label for the pagination
+     */
+    ariaLabel = input('Du er her:', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Breadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Breadcrumbs, isStandalone: true, selector: "ksd-breadcrumbs", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "null" } }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+    <ds-breadcrumbs class="ds-breadcrumbs" [attr.aria-label]="ariaLabel()">
+      <ng-content />
+    </ds-breadcrumbs>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Breadcrumbs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ksd-breadcrumbs',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `
+    <ds-breadcrumbs class="ds-breadcrumbs" [attr.aria-label]="ariaLabel()">
+      <ng-content />
+    </ds-breadcrumbs>
+  `,
+                    host: {
+                        '[attr.aria-label]': 'null',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Breadcrumbs };
+//# sourceMappingURL=ks-digital-designsystem-angular-breadcrumbs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-breadcrumbs.mjs","sources":["../../../../packages/angular/breadcrumbs/src/breadcrumbs.ts","../../../../packages/angular/breadcrumbs/src/ks-digital-designsystem-angular-breadcrumbs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  CUSTOM_ELEMENTS_SCHEMA,\n  input,\n} from '@angular/core'\nimport '@digdir/designsystemet-web'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'ksd-breadcrumbs',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `\n    <ds-breadcrumbs class=\"ds-breadcrumbs\" [attr.aria-label]=\"ariaLabel()\">\n      <ng-content />\n    </ds-breadcrumbs>\n  `,\n  host: {\n    '[attr.aria-label]': 'null',\n  },\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Breadcrumbs {\n  /**\n   * Sets the screen reader label for the pagination\n   */\n  readonly ariaLabel = input<string>('Du er her:', { alias: 'aria-label' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAmCa,WAAW,CAAA;AACtB;;AAEG;IACM,SAAS,GAAG,KAAK,CAAS,YAAY,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;uGAJ9D,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnBZ;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAeU,WAAW,EAAA,UAAA,EAAA,CAAA;kBAvBvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,mBAAmB,EAAE,MAAM;AAC5B,qBAAA;AACD,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA;AACF,iBAAA;;;AClCD;;AAEG;;;;"}

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

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+import { Spinner } from '@ks-digital/designsystem-angular/spinner';
+
+class Button {
+    /**
+     * Specify which variant to use
+     * @default 'primary'
+     */
+    variant = input('primary', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
+    /**
+     * Toggle loading state.
+     * Pass an element if you want to display a custom loader.
+     *
+     * @default false
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Disables element
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.
+     * @deprecated Use `data-icon` instead.
+     */
+    icon = input(false, { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon. */
+    dataIcon = input(false, { ...(ngDevMode ? { debugName: "dataIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'data-icon' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Button, isStandalone: true, selector: "button[ksd-button], a[ksd-button]", inputs: { variant: { classPropertyName: "variant", publicName: "data-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 }, dataIcon: { classPropertyName: "dataIcon", publicName: "data-icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-icon": "icon() || dataIcon() || null", "attr.disabled": "disabled() ? true : null", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+    @if (loading()) {
+      <ksd-spinner aria-hidden="true" />
+    }
+    @if (!(loading() && (icon() || dataIcon()))) {
+      <ng-content />
+    }
+  `, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "aria-hidden", "data-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[ksd-button], a[ksd-button]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ], imports: [Spinner], host: {
+                        class: 'ds-button',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-icon]': 'icon() || dataIcon() || null',
+                        '[attr.disabled]': 'disabled() ? true : null',
+                        '[attr.aria-busy]': 'loading() ? true : null',
+                    }, template: `
+    @if (loading()) {
+      <ksd-spinner aria-hidden="true" />
+    }
+    @if (!(loading() && (icon() || dataIcon()))) {
+      <ng-content />
+    }
+  `, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-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 }] }], dataIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-icon", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Button };
+//# sourceMappingURL=ks-digital-designsystem-angular-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  input,\n} from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n  selector: 'button[ksd-button], a[ksd-button]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  imports: [Spinner],\n  host: {\n    class: 'ds-button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-icon]': 'icon() || dataIcon() || null',\n    '[attr.disabled]': 'disabled() ? true : null',\n    '[attr.aria-busy]': 'loading() ? true : null',\n  },\n  styles: `\n    /* Ensure transcluded icons are aligned properly */\n    :host ::ng-deep > * {\n      display: inline-flex;\n    }\n\n    :host ::ng-deep ng-icon {\n      font-size: var(--ng-icon-size, 1.3em);\n    }\n  `,\n\n  template: `\n    @if (loading()) {\n      <ksd-spinner aria-hidden=\"true\" />\n    }\n    @if (!(loading() && (icon() || dataIcon()))) {\n      <ng-content />\n    }\n  `,\n})\nexport class Button {\n  /**\n   * Specify which variant to use\n   * @default 'primary'\n   */\n  readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n    alias: 'data-variant',\n  })\n\n  /**\n   * Toggle loading state.\n   * Pass an element if you want to display a custom loader.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: booleanAttribute })\n\n  /**\n   * Disables element\n   */\n  readonly disabled = input(false, { transform: booleanAttribute })\n\n  /**\n   * If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.\n   * @deprecated Use `data-icon` instead.\n   */\n  readonly icon = input(false, { transform: booleanAttribute })\n\n  /** If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon. */\n  readonly dataIcon = input(false, {\n    transform: booleanAttribute,\n    alias: 'data-icon',\n  })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, DestroyRef, afterNextRender, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { randomId, HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+
+const ATTR_CLICKDELEGATE = 'data-clickdelegatefor';
+const SELECTOR_LINK = ':is(h1,h2,h3,h4,h5,h6) a';
+const SELECTOR_SKIP = 'a,button,label,details,dialog,[role="button"],[popover],[contenteditable]';
+class Card {
+    /**
+     * Change the background color of the card
+     * @default 'default'
+     */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    generatedId = `ksd-card-link-${randomId()}`;
+    originalId = null;
+    constructor() {
+        afterNextRender(() => {
+            const card = this.el.nativeElement;
+            const link = card.querySelector(SELECTOR_LINK);
+            const skip = !link || link.parentElement?.closest(SELECTOR_SKIP);
+            if (card.hasAttribute(ATTR_CLICKDELEGATE) || skip)
+                return;
+            this.originalId = link.id || null;
+            link.id = link.id || this.generatedId;
+            card.setAttribute(ATTR_CLICKDELEGATE, link.id);
+            this.destroyRef.onDestroy(() => {
+                if (this.originalId) {
+                    link.id = this.originalId;
+                }
+                else {
+                    link.removeAttribute('id');
+                }
+                card.removeAttribute(ATTR_CLICKDELEGATE);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: Card, isStandalone: true, selector: "[ksd-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-card" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Card, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[ksd-card]',
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
+                    host: {
+                        class: 'ds-card',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class CardBlock {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CardBlock, isStandalone: true, selector: "[ksd-card-block]", host: { classAttribute: "ds-card__block" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CardBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ksd-card-block]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'ds-card__block',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Card, CardBlock };
+//# sourceMappingURL=ks-digital-designsystem-angular-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-card.mjs","sources":["../../../../packages/angular/card/src/card.ts","../../../../packages/angular/card/src/card-block.ts","../../../../packages/angular/card/src/ks-digital-designsystem-angular-card.ts"],"sourcesContent":["import {\n  afterNextRender,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n  randomId,\n} from '@ks-digital/designsystem-angular/__internals'\n\nconst ATTR_CLICKDELEGATE = 'data-clickdelegatefor'\nconst SELECTOR_LINK = ':is(h1,h2,h3,h4,h5,h6) a'\nconst SELECTOR_SKIP =\n  'a,button,label,details,dialog,[role=\"button\"],[popover],[contenteditable]'\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[ksd-card]',\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n  host: {\n    class: 'ds-card',\n    '[attr.data-variant]': 'variant()',\n  },\n})\nexport class Card {\n  /**\n   * Change the background color of the card\n   * @default 'default'\n   */\n  public variant = input<'tinted' | 'default'>('default')\n  private el = inject<ElementRef<HTMLElement>>(ElementRef)\n  private destroyRef = inject(DestroyRef)\n  private generatedId = `ksd-card-link-${randomId()}`\n  private originalId: string | null = null\n\n  constructor() {\n    afterNextRender(() => {\n      const card = this.el.nativeElement\n      const link = card.querySelector<HTMLAnchorElement>(SELECTOR_LINK)\n      const skip = !link || link.parentElement?.closest(SELECTOR_SKIP)\n\n      if (card.hasAttribute(ATTR_CLICKDELEGATE) || skip) return\n\n      this.originalId = link.id || null\n      link.id = link.id || this.generatedId\n      card.setAttribute(ATTR_CLICKDELEGATE, link.id)\n\n      this.destroyRef.onDestroy(() => {\n        if (this.originalId) {\n          link.id = this.originalId\n        } else {\n          link.removeAttribute('id')\n        }\n        card.removeAttribute(ATTR_CLICKDELEGATE)\n      })\n    })\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: '[ksd-card-block]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ds-card__block',\n  },\n  template: `<ng-content />`,\n})\nexport class CardBlock {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+
+class Chip {
+    /**
+     * Whether the chip is removable or not. If true, a remove icon will be displayed.
+     * If using this, you should add an aria-label as well, e.g "Slett {item}"
+     * @attribute data-removable
+     */
+    dataRemovable = input(false, { ...(ngDevMode ? { debugName: "dataRemovable" } : /* istanbul ignore next */ {}), alias: 'data-removable' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Chip, isStandalone: true, selector: "label[ksd-chip], button[ksd-chip]", inputs: { dataRemovable: { classPropertyName: "dataRemovable", publicName: "data-removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ds-chip" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Chip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'label[ksd-chip], button[ksd-chip]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-chip',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { dataRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-removable", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Chip };
+//# sourceMappingURL=ks-digital-designsystem-angular-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-chip.mjs","sources":["../../../../packages/angular/chip/src/chip.ts","../../../../packages/angular/chip/src/ks-digital-designsystem-angular-chip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'label[ksd-chip], button[ksd-chip]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-chip',\n  },\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Chip {\n  /**\n   * Whether the chip is removable or not. If true, a remove icon will be displayed.\n   * If using this, you should add an aria-label as well, e.g \"Slett {item}\"\n   * @attribute data-removable\n   */\n  dataRemovable = input<boolean>(false, { alias: 'data-removable' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAwBa,IAAI,CAAA;AACf;;;;AAIG;IACH,aAAa,GAAG,KAAK,CAAU,KAAK,qFAAI,KAAK,EAAE,gBAAgB,EAAA,CAAG;uGANvD,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,obAfL,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAef,IAAI,EAAA,UAAA,EAAA,CAAA;kBAlBhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;oBAC7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA;AACD,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA;AACF,iBAAA;;;ACvBD;;AAEG;;;;"}

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

@@ -0,0 +1,64 @@
+import * as i0 from '@angular/core';
+import { input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+
+class Details {
+    dataVariant = input('default', { ...(ngDevMode ? { debugName: "dataVariant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Details, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: Details, isStandalone: true, selector: "details[ksd-details]", inputs: { dataVariant: { classPropertyName: "dataVariant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "dataVariant()" }, classAttribute: "ds-details" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Details, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'details[ksd-details]',
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
+                    host: {
+                        class: 'ds-details',
+                        '[attr.data-variant]': 'dataVariant()',
+                    },
+                }]
+        }], propDecorators: { dataVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }] } });
+
+class DetailsContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DetailsContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: DetailsContent, isStandalone: true, selector: "ksd-details-content", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DetailsContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ksd-details-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class DetailsSummary {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DetailsSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: DetailsSummary, isStandalone: true, selector: "ksd-details-summary", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DetailsSummary, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ksd-details-summary',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Details, DetailsContent, DetailsSummary };
+//# sourceMappingURL=ks-digital-designsystem-angular-details.mjs.map