@ks-digital/designsystem-angular 0.0.1-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 KS Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# 🚧 KS Digital Designsystem for Angular
+
+> This is an experimental POC as for now
+
+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)
+
+Install the required packages using your preferred package manager:
+
+```bash
+pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
+```
+
+## Setup
+
+### 1. Include the Inter Font
+
+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: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:
+
+```css
+@import url('@ks-digital/designsystem-themes/base.css');
+@import url('@ks-digital/designsystem-themes/forvaltning.css');
+```
+
+### 3. Use Components
+
+To be written.
+
+## Example
+
+A complete example setup is available in the `angular-demo` located under the `apps` folder.

package/dist/README.md

@@ -0,0 +1,40 @@
+# 🚧 KS Digital Designsystem for Angular
+
+> This is an experimental POC as for now
+
+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)
+
+Install the required packages using your preferred package manager:
+
+```bash
+pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
+```
+
+## Setup
+
+### 1. Include the Inter Font
+
+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: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:
+
+```css
+@import url('@ks-digital/designsystem-themes/base.css');
+@import url('@ks-digital/designsystem-themes/forvaltning.css');
+```
+
+### 3. Use Components
+
+To be written.
+
+## Example
+
+A complete example setup is available in the `angular-demo` located under the `apps` folder.

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

@@ -0,0 +1,376 @@
+import * as i0 from '@angular/core';
+import { input, Directive, isDevMode, signal, booleanAttribute, numberAttribute, Component, computed, contentChild, inject, ElementRef, afterNextRender } from '@angular/core';
+
+/* 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.
+ */
+class CommonInputs {
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    dataSize = input(undefined, { alias: 'data-size' });
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined using theme.designsystemet.no.
+     * @attribute data-color
+     */
+    dataColor = input(undefined, { alias: 'data-color' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: CommonInputs, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommonInputs, decorators: [{
+            type: Directive
+        }] });
+
+const logIfDevMode = ({ component, message, }) => {
+    if (isDevMode()) {
+        console.log(`[${component}] ${message}`);
+    }
+};
+
+class Input {
+    /**
+     * The value of the input
+     */
+    value = signal('');
+    /**
+     * Whether the input is readonly
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Displays a character counter. pass a number to set a limit.
+     */
+    counter = input(0, { transform: numberAttribute });
+    onClick(event) {
+        if (this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: Input, isStandalone: true, selector: "input[ksd-input], textarea[ksd-input]", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", 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" }, classAttribute: "ds-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Input, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'input[ksd-input], textarea[ksd-input]',
+                    host: {
+                        class: 'ds-input',
+                        '[attr.readonly]': 'readonly() ? true : null',
+                        '(click)': 'onClick($event)',
+                        '(input)': 'value.set($event.target.value)',
+                    },
+                }]
+        }] });
+
+class Label {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Label, isStandalone: true, selector: "ksd-label", hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
+    <label class="ds-label"><ng-content /></label>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Label, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ksd-label',
+                    hostDirectives: [
+                        {
+                            directive: CommonInputs,
+                            inputs: ['data-size', 'data-color'],
+                        },
+                    ],
+                    template: `
+    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
+    <label class="ds-label"><ng-content /></label>
+  `,
+                }]
+        }] });
+
+class ValidationMessage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ValidationMessage, isStandalone: true, selector: "p[ksd-validation-message]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ValidationMessage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p[ksd-validation-message]',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-validation-message',
+                        'data-field': 'validation',
+                    },
+                }]
+        }] });
+
+class FieldCounter {
+    /**
+     * The maximum allowed characters.
+     *
+     **/
+    limit = input.required();
+    /**
+     * How many characters have been typed.
+     *
+     **/
+    count = input.required();
+    remainder = computed(() => this.limit() - this.count());
+    excessCount = computed(() => Math.abs(this.remainder()));
+    hasExceededLimit = computed(() => this.count() > this.limit());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: FieldCounter, isStandalone: true, selector: "ksd-field-counter", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div data-field="description" class="ds-sr-only" aria-live="polite">
+      @if (hasExceededLimit()) {
+        {{ excessCount() }} tegn for mye
+      }
+    </div>
+    @if (hasExceededLimit()) {
+      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>
+    } @else {
+      <p data-field="validation">{{ remainder() }} tegn igjen</p>
+    }
+  `, isInline: true, styles: [":host>*{margin-top:var(--dsc-field-content-spacing)}\n"], dependencies: [{ kind: "component", type: ValidationMessage, selector: "p[ksd-validation-message]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldCounter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ksd-field-counter', imports: [ValidationMessage], template: `
+    <div data-field="description" class="ds-sr-only" aria-live="polite">
+      @if (hasExceededLimit()) {
+        {{ excessCount() }} tegn for mye
+      }
+    </div>
+    @if (hasExceededLimit()) {
+      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>
+    } @else {
+      <p data-field="validation">{{ remainder() }} tegn igjen</p>
+    }
+  `, styles: [":host>*{margin-top:var(--dsc-field-content-spacing)}\n"] }]
+        }] });
+
+/**
+ * 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 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;
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : 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');
+    input = contentChild(Input);
+    label = contentChild(Label);
+    el = inject(ElementRef);
+    count = computed(() => this.input()?.value().length);
+    limit = computed(() => this.input()?.counter());
+    hasCounter = computed(() => this.limit());
+    constructor() {
+        afterNextRender(() => {
+            if (!this.label() || !this.input()) {
+                logIfDevMode({
+                    component: 'Field',
+                    message: 'Missing required elements: ksd-label and ksd-input must be provided as children. Check imports and markup.',
+                });
+            }
+            fieldObserver(this.el.nativeElement);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: Field, isStandalone: true, selector: "ksd-field", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dataPosition": "position()" }, classAttribute: "ds-field" }, queries: [{ propertyName: "input", first: true, predicate: Input, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: Label, descendants: true, isSignal: true }], hostDirectives: [{ directive: CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    <ng-content />
+    @if (hasCounter()) {
+      <ksd-field-counter [limit]="limit() ?? 0" [count]="count() ?? 0" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FieldCounter, selector: "ksd-field-counter", inputs: ["limit", "count"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Field, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ksd-field',
+                    hostDirectives: [
+                        {
+                            directive: CommonInputs,
+                            inputs: ['data-size', 'data-color'],
+                        },
+                    ],
+                    host: {
+                        class: 'ds-field',
+                        '[attr.dataPosition]': 'position()',
+                    },
+                    template: `
+    <ng-content />
+    @if (hasCounter()) {
+      <ksd-field-counter [limit]="limit() ?? 0" [count]="count() ?? 0" />
+    }
+  `,
+                    imports: [FieldCounter],
+                }]
+        }], ctorParameters: () => [] });
+
+class Fieldset {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Fieldset, isStandalone: true, selector: "fieldset[ksd-fieldset]", host: { attributes: { "role": "fieldset" }, classAttribute: "ds-fieldset" }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Fieldset, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fieldset[ksd-fieldset]',
+                    host: {
+                        role: 'fieldset',
+                        class: 'ds-fieldset',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+
+class FieldsetDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldsetDescription, isStandalone: true, selector: "p[ksd-fieldset-description]", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetDescription, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p[ksd-fieldset-description]',
+                    template: `<ng-content />`,
+                    host: {},
+                }]
+        }] });
+
+class FieldsetLegend {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: FieldsetLegend, isStandalone: true, selector: "legend[ksd-fieldset-legend]", host: { attributes: { "role": "legend" }, classAttribute: "ds-label" }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FieldsetLegend, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'legend[ksd-fieldset-legend]',
+                    host: {
+                        role: 'legend',
+                        class: 'ds-label',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+
+class Paragraph {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Paragraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: Paragraph, isStandalone: true, selector: "p[ksd-paragraph]", host: { classAttribute: "ds-paragraph" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: Paragraph, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p[ksd-paragraph]',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ds-paragraph',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommonInputs, Field, Fieldset, FieldsetDescription, FieldsetLegend, Input, Label, Paragraph, ValidationMessage };
+//# sourceMappingURL=ks-digital-designsystem-angular.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular.mjs","sources":["../../src/components/common-inputs.ts","../../src/utils/log-if-devmode.ts","../../src/components/input/input.ts","../../src/components/label/label.ts","../../src/components/validation-message/validation-message.ts","../../src/components/field/field-counter.ts","../../src/components/field/field-observer.ts","../../src/components/field/field.ts","../../src/components/fieldset/fieldset.ts","../../src/components/fieldset/fieldset-description.ts","../../src/components/fieldset/fieldset-legend.ts","../../src/components/paragraph/paragraph.ts","../../src/ks-digital-designsystem-angular.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\n\n/**\n * We use input aliasing to bridge the gap between Angular's camelCase property naming convention and our HTML data attributes.\n * This approach allows us to use valid HTML data attributes as documented by Designsystemet while maintaining\n * proper TypeScript intellisense support.\n */\n\nimport { Directive, input } from '@angular/core'\nimport { Color } from './colors'\n\nexport type Size = 'sm' | 'md' | 'lg' | 'xl'\n\n@Directive()\nexport class CommonInputs {\n  /**\n   * Changes size for descendant Designsystemet components. Select from predefined sizes.\n   * @attribute data-size\n   */\n  dataSize = input<Size>(undefined, { alias: 'data-size' })\n\n  /**\n   * Changes color for descendant Designsystemet components.\n   * Select from predefined colors and colors defined using theme.designsystemet.no.\n   * @attribute data-color\n   */\n  dataColor = input<Color>(undefined, { alias: 'data-color' })\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","import {\n  booleanAttribute,\n  Directive,\n  input,\n  numberAttribute,\n  signal,\n} from '@angular/core'\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'input[ksd-input], textarea[ksd-input]',\n  host: {\n    class: 'ds-input',\n    '[attr.readonly]': 'readonly() ? true : null',\n    '(click)': 'onClick($event)',\n    '(input)': 'value.set($event.target.value)',\n  },\n})\nexport class Input {\n  /**\n   * The value of the input\n   */\n  value = signal('')\n\n  /**\n   * Whether the input is readonly\n   */\n  readonly = input(false, { transform: booleanAttribute })\n\n  /**\n   * Displays a character counter. pass a number to set a limit.\n   */\n  counter = input(0, { transform: numberAttribute })\n\n  onClick(event: Event) {\n    if (this.readonly()) {\n      event.preventDefault()\n    }\n  }\n}\n","import { Component } from '@angular/core'\nimport { CommonInputs } from '../common-inputs'\n\n@Component({\n  selector: 'ksd-label',\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n  template: `\n    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->\n    <label class=\"ds-label\"><ng-content /></label>\n  `,\n})\nexport class Label {}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: 'p[ksd-validation-message]',\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-validation-message',\n    'data-field': 'validation',\n  },\n})\nexport class ValidationMessage {}\n","import { Component, computed, input } from '@angular/core'\nimport { ValidationMessage } from '../validation-message'\n\n@Component({\n  selector: 'ksd-field-counter',\n  imports: [ValidationMessage],\n  template: `\n    <div data-field=\"description\" class=\"ds-sr-only\" aria-live=\"polite\">\n      @if (hasExceededLimit()) {\n        {{ excessCount() }} tegn for mye\n      }\n    </div>\n    @if (hasExceededLimit()) {\n      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>\n    } @else {\n      <p data-field=\"validation\">{{ remainder() }} tegn igjen</p>\n    }\n  `,\n\n  /**\n   * Apply custom styles here to get correct spacing because\n   * the rendered host element from Angular is getting in the way\n   */\n  styles: `\n    :host > * {\n      margin-top: var(--dsc-field-content-spacing);\n    }\n  `,\n})\nexport class FieldCounter {\n  /**\n   * The maximum allowed characters.\n   *\n   **/\n  readonly limit = input.required<number>()\n\n  /**\n   * How many characters have been typed.\n   *\n   **/\n  readonly count = input.required<number>()\n  protected readonly remainder = computed(() => this.limit() - this.count())\n  protected readonly excessCount = computed(() => Math.abs(this.remainder()))\n  protected readonly hasExceededLimit = computed(\n    () => this.count() > this.limit(),\n  )\n}\n","/**\n * Lifted from Designsystemet core repo.\n * Takes care of binding ids, labels and aria-describedby attributes\n *\n * @param fieldElement - The field element to observe\n * @returns A function to disconnect the observer\n * */\nexport function fieldObserver(fieldElement: HTMLElement | null) {\n  if (!fieldElement) return\n\n  const elements = new Map<Element, string | null>()\n  const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`\n  let input: Element | null = null\n  let describedby = ''\n\n  const process = (mutations: Partial<MutationRecord>[]) => {\n    const changed: Node[] = []\n    const removed: Node[] = []\n\n    // Merge MutationRecords\n    for (const mutation of mutations) {\n      if (mutation.attributeName) changed.push(mutation.target ?? fieldElement)\n      // @ts-expect-error - addedNodes is not typed\n      changed.push(...(mutation.addedNodes || []))\n      removed.push(...(mutation.removedNodes || []))\n    }\n\n    // Register elements\n    for (const el of changed) {\n      if (!isElement(el)) continue\n      if (isLabel(el)) elements.set(el, el.htmlFor)\n      else if (el.hasAttribute('data-field')) elements.set(el, el.id)\n      else if (isInputLike(el)) {\n        input = el\n        describedby = el.getAttribute('aria-describedby') || ''\n      }\n    }\n\n    // Reset removed elements\n    for (const el of removed) {\n      if (!isElement(el)) continue\n\n      if (input === el) input = null\n      if (elements.has(el)) {\n        setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el))\n        elements.delete(el)\n      }\n    }\n\n    // Connect elements\n    const describedbyIds = [describedby] // Keep original aria-describedby\n    const inputId = input?.id || uuid\n\n    for (const [el, value] of elements) {\n      const descriptionType = el.getAttribute('data-field')\n      const id = descriptionType ? `${inputId}:${descriptionType}` : inputId\n\n      if (!value) setAttr(el, isLabel(el) ? 'for' : 'id', id) // Ensure we have a value\n      if (descriptionType === 'validation')\n        describedbyIds.unshift(el.id) // Validations to the front\n      else if (descriptionType) describedbyIds.push(el.id) // Other descriptions to the back\n    }\n\n    setAttr(input, 'id', inputId)\n    setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim())\n  }\n\n  const observer = createOptimizedMutationObserver(process)\n  observer.observe(fieldElement, {\n    attributeFilter: ['id', 'for', 'aria-describedby'],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  })\n\n  process([{ addedNodes: fieldElement.querySelectorAll('*') }]) // Initial setup\n  observer.takeRecords() // Clear initial setup queue\n  return () => observer.disconnect()\n}\n\n// Utilities\nexport const isElement = (node: Node) => node instanceof Element\nexport const isLabel = (node: Node) => node instanceof HTMLLabelElement\nexport const isInputLike = (node: unknown): node is HTMLInputElement =>\n  node instanceof HTMLElement &&\n  'validity' in node &&\n  !(node instanceof HTMLButtonElement) // Matches input, textarea, select and form accosiated custom elements\n\nconst setAttr = (el: Element | null, name: string, value?: string | null) =>\n  value ? el?.setAttribute(name, value) : el?.removeAttribute(name)\n\n// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible\nfunction createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = []\n  const observer = new MutationObserver((mutations) => {\n    if (!queue.length) requestAnimationFrame(process)\n    queue.push(...mutations)\n  })\n\n  const process = () => {\n    callback(queue, observer)\n    queue.length = 0 // Reset queue\n    observer.takeRecords() // Clear queue due to DOM changes in callback\n  }\n\n  return observer\n}\n","import {\n  afterNextRender,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core'\nimport { logIfDevMode } from '../../utils/log-if-devmode'\nimport { CommonInputs } from '../common-inputs'\nimport { Input } from '../input/input'\nimport { Label } from '../label/label'\nimport { FieldCounter } from './field-counter'\nimport { fieldObserver } from './field-observer'\n\n/**\n * Use the Field component to connect inputs and labels\n */\n@Component({\n  selector: 'ksd-field',\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n  host: {\n    class: 'ds-field',\n    '[attr.dataPosition]': 'position()',\n  },\n  template: `\n    <ng-content />\n    @if (hasCounter()) {\n      <ksd-field-counter [limit]=\"limit() ?? 0\" [count]=\"count() ?? 0\" />\n    }\n  `,\n  imports: [FieldCounter],\n})\nexport class Field {\n  /**\n   * Position of toggle inputs (radio, checkbox, switch) in field\n   * @default start\n   */\n  position = input<'start' | 'end'>('start')\n\n  private input = contentChild(Input)\n  private label = contentChild(Label)\n\n  private el = inject(ElementRef)\n  protected count = computed(() => this.input()?.value().length)\n  protected limit = computed(() => this.input()?.counter())\n  protected hasCounter = computed(() => this.limit())\n\n  constructor() {\n    afterNextRender(() => {\n      if (!this.label() || !this.input()) {\n        logIfDevMode({\n          component: 'Field',\n          message:\n            'Missing required elements: ksd-label and ksd-input must be provided as children. Check imports and markup.',\n        })\n      }\n\n      fieldObserver(this.el.nativeElement)\n    })\n  }\n}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: 'fieldset[ksd-fieldset]',\n  host: {\n    role: 'fieldset',\n    class: 'ds-fieldset',\n  },\n  template: ` <ng-content /> `,\n})\nexport class Fieldset {}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: 'p[ksd-fieldset-description]',\n  template: `<ng-content />`,\n  host: {},\n})\nexport class FieldsetDescription {}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: 'legend[ksd-fieldset-legend]',\n  host: {\n    role: 'legend',\n    class: 'ds-label',\n  },\n  template: ` <ng-content /> `,\n})\nexport class FieldsetLegend {}\n","import { Component } from '@angular/core'\n\n@Component({\n  selector: 'p[ksd-paragraph]',\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-paragraph',\n  },\n})\nexport class Paragraph {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.CommonInputs"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+import * as i0 from '@angular/core';
+
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+declare class CommonInputs {
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    dataSize: i0.InputSignal<Size>;
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined using theme.designsystemet.no.
+     * @attribute data-color
+     */
+    dataColor: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommonInputs, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CommonInputs, never, never, { "dataSize": { "alias": "data-size"; "required": false; "isSignal": true; }; "dataColor": { "alias": "data-color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Use the Field component to connect inputs and labels
+ */
+declare class Field {
+    /**
+     * Position of toggle inputs (radio, checkbox, switch) in field
+     * @default start
+     */
+    position: i0.InputSignal<"start" | "end">;
+    private input;
+    private label;
+    private el;
+    protected count: i0.Signal<number>;
+    protected limit: i0.Signal<number>;
+    protected hasCounter: i0.Signal<number>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<Field, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Field, "ksd-field", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, ["input", "label"], ["*"], true, [{ directive: typeof CommonInputs; inputs: { "data-size": "data-size"; "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class Fieldset {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Fieldset, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Fieldset, "fieldset[ksd-fieldset]", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class FieldsetDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetDescription, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetDescription, "p[ksd-fieldset-description]", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class FieldsetLegend {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetLegend, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetLegend, "legend[ksd-fieldset-legend]", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class Input {
+    /**
+     * The value of the input
+     */
+    value: i0.WritableSignal<string>;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Displays a character counter. pass a number to set a limit.
+     */
+    counter: i0.InputSignalWithTransform<number, unknown>;
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Input, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Input, "input[ksd-input], textarea[ksd-input]", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class Label {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Label, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Label, "ksd-label", never, {}, {}, never, ["*"], true, [{ directive: typeof CommonInputs; inputs: { "data-size": "data-size"; "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class Paragraph {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Paragraph, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Paragraph, "p[ksd-paragraph]", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class ValidationMessage {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationMessage, "p[ksd-validation-message]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { CommonInputs, Field, Fieldset, FieldsetDescription, FieldsetLegend, Input, Label, Paragraph, ValidationMessage };
+export type { Size };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@ks-digital/designsystem-angular",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ks-no/designsystem.git",
+    "directory": "packages/angular"
+  },
+  "version": "0.0.1-alpha.10",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "./dist"
+  ],
+  "main": "./dist/fesm2022/ks-digital-designsystem-angular.mjs",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/platform-browser": ">=20.0.0",
+    "@angular/platform-server": ">=20.0.0"
+  },
+  "devDependencies": {
+    "@analogjs/storybook-angular": "^1.18.0",
+    "@analogjs/vite-plugin-angular": "~1.17.1",
+    "@analogjs/vitest-angular": "~1.17.1",
+    "@angular-eslint/builder": "^20.0.0",
+    "@angular-eslint/bundled-angular-compiler": "^20.0.0",
+    "@angular-eslint/eslint-plugin": "^20.0.0",
+    "@angular-eslint/eslint-plugin-template": "^20.0.0",
+    "@angular-eslint/schematics": "^20.0.0",
+    "@angular-eslint/template-parser": "^20.0.0",
+    "@testing-library/angular": "^17.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "angular-eslint": "^20.0.0",
+    "jsdom": "~22.1.0",
+    "ng-packagr": "^20.0.1"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json"
+  }
+}