@ks-digital/designsystem-angular 0.0.1-alpha.28 → 0.0.1-alpha.30

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/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/fesm2022/ks-digital-designsystem-angular-__internals.mjs

@@ -39,7 +39,7 @@ const logIfDevMode = ({ component, message, }) => {
 };
 
 const randomId = () => {
-    return `:${Math.random().toString(36).slice(2, 7)}`;
+    return `${Math.random().toString(36).slice(2, 7)}`;
 };
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/colors.ts","../../../../packages/angular/__internals/src/common-inputs.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":["/**\nLifted from https://github.com/digdir/designsystemet/blob/main/packages/react/src/colors.ts\n**/\n\n// EmptyObject implementation from https://github.com/sindresorhus/type-fest/blob/main/source/empty-object.d.ts\ndeclare const emptyObjectSymbol: unique symbol\ntype EmptyObject = { [emptyObjectSymbol]?: never }\n\n/**\n * Base interface for available colors in the design system.\n * The CLI will generate augmentations of this interface to allow\n * type safety of custom color names.\n */\n\n// eslint-disable-next-line\nexport interface MainAndSupportColors {}\n\n/**\n * If {@link MainAndSupportColors} has been extended to include color names, return T,\n * otherwise return the arbitrary string type.\n */\ntype ColorWithFallback<T> = MainAndSupportColors extends EmptyObject\n  ? string\n  : T\n\nexport type SeverityInfo = 'info'\nexport type SeveritySuccess = 'success'\nexport type SeverityWarning = 'warning'\nexport type SeverityDanger = 'danger'\nexport type SeverityColors =\n  | SeverityInfo\n  | SeveritySuccess\n  | SeverityWarning\n  | SeverityDanger\n\nexport type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>\n","/* 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 * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive\n */\n\nimport { Directive, input } from '@angular/core'\nimport { Color } from './colors'\n\nexport type Size = 'sm' | 'md' | 'lg'\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","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":";;;AAAA;;AAEG;;ACFH;AAEA;;;;;;AAMG;MAQU,YAAY,CAAA;AACvB;;;AAGG;AACH,IAAA,QAAQ,GAAG,KAAK,CAAO,SAAS,4CAAI,KAAK,EAAE,WAAW,EAAA,CAAA,GAAA,CAApB,EAAE,KAAK,EAAE,WAAW,EAAE,GAAC;AAEzD;;;;AAIG;AACH,IAAA,SAAS,GAAG,KAAK,CAAQ,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;uGAZjD,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB;;;ACbM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,OAAO,GAIR,KAAI;IACH,IAAI,SAAS,EAAE,EAAE;QACf,OAAO,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC;IAC1C;AACF;;ACZO,MAAM,QAAQ,GAAG,MAAK;AAC3B,IAAA,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;AACrD;;ACFA;;AAEG;;;;"}
+{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/colors.ts","../../../../packages/angular/__internals/src/common-inputs.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":["/**\nLifted from https://github.com/digdir/designsystemet/blob/main/packages/react/src/colors.ts\n**/\n\n// EmptyObject implementation from https://github.com/sindresorhus/type-fest/blob/main/source/empty-object.d.ts\ndeclare const emptyObjectSymbol: unique symbol\ntype EmptyObject = { [emptyObjectSymbol]?: never }\n\n/**\n * Base interface for available colors in the design system.\n * The CLI will generate augmentations of this interface to allow\n * type safety of custom color names.\n */\n\n// eslint-disable-next-line\nexport interface MainAndSupportColors {}\n\n/**\n * If {@link MainAndSupportColors} has been extended to include color names, return T,\n * otherwise return the arbitrary string type.\n */\ntype ColorWithFallback<T> = MainAndSupportColors extends EmptyObject\n  ? string\n  : T\n\nexport type SeverityInfo = 'info'\nexport type SeveritySuccess = 'success'\nexport type SeverityWarning = 'warning'\nexport type SeverityDanger = 'danger'\nexport type SeverityColors =\n  | SeverityInfo\n  | SeveritySuccess\n  | SeverityWarning\n  | SeverityDanger\n\nexport type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>\n","/* 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 * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive\n */\n\nimport { Directive, input } from '@angular/core'\nimport { Color } from './colors'\n\nexport type Size = 'sm' | 'md' | 'lg'\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","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":";;;AAAA;;AAEG;;ACFH;AAEA;;;;;;AAMG;MAQU,YAAY,CAAA;AACvB;;;AAGG;AACH,IAAA,QAAQ,GAAG,KAAK,CAAO,SAAS,4CAAI,KAAK,EAAE,WAAW,EAAA,CAAA,GAAA,CAApB,EAAE,KAAK,EAAE,WAAW,EAAE,GAAC;AAEzD;;;;AAIG;AACH,IAAA,SAAS,GAAG,KAAK,CAAQ,SAAS,6CAAI,KAAK,EAAE,YAAY,EAAA,CAAA,GAAA,CAArB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAC;uGAZjD,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB;;;ACbM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,OAAO,GAIR,KAAI;IACH,IAAI,SAAS,EAAE,EAAE;QACf,OAAO,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC;IAC1C;AACF;;ACZO,MAAM,QAAQ,GAAG,MAAK;AAC3B,IAAA,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;AACpD;;ACFA;;AAEG;;;;"}

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

@@ -0,0 +1,199 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, model, contentChildren, effect } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { randomId, CommonInputs } from '@ks-digital/designsystem-angular/__internals';
+
+class TabsTab {
+    /**
+     * Unique value that will be set in the Tabs components state when the tab is activated
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    elementRef = inject(ElementRef);
+    ariaControls = signal(undefined, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    buttonId = computed(() => this.id() ?? 'tab-' + randomId(), ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    tabs = inject(Tabs);
+    isFocused = computed(() => this.tabs.focusedValue() === this.value(), ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isSelected = computed(() => this.tabs.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: TabsTab, isStandalone: true, selector: "button[ksd-tabs-tab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "tabs.changeTab(value())", "keydown": "tabs.onKeyDown($event)" }, properties: { "id": "buttonId()", "attr.aria-controls": "ariaControls()", "attr.aria-selected": "isSelected()", "attr.tab-index": "isFocused() ? 0 : -1" }, classAttribute: "ds-button" }, hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `button[ksd-tabs-tab]`,
+                    template: ` <ng-content /> `,
+                    host: {
+                        role: 'tab',
+                        class: 'ds-button',
+                        '[id]': 'buttonId()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.tab-index]': 'isFocused() ? 0 : -1',
+                        '(click)': 'tabs.changeTab(value())',
+                        '(keydown)': 'tabs.onKeyDown($event)',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [],
+                    hostDirectives: [
+                        {
+                            directive: CommonInputs,
+                            inputs: ['data-size', 'data-color'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+class Tabs {
+    defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    focusedValue = computed(() => this.tabs()[this.focusedIndex()]?.value(), ...(ngDevMode ? [{ debugName: "focusedValue" }] : []));
+    tabs = contentChildren(TabsTab, ...(ngDevMode ? [{ debugName: "tabs", descendants: true }] : [{ descendants: true }]));
+    focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    constructor() {
+        effect(() => {
+            if (!this.value()) {
+                const value = this.defaultValue();
+                if (undefined !== value) {
+                    this.changeTab(value);
+                }
+            }
+        });
+    }
+    onKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                this.focusTab((this.focusedIndex() + this.tabs().length - 1) % this.tabs().length);
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                this.focusTab((this.focusedIndex() + 1) % this.tabs().length);
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case 'Space':
+                {
+                    const value = this.focusedValue();
+                    if (value) {
+                        this.changeTab(value);
+                    }
+                }
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.focusTab(0);
+                event.preventDefault();
+                break;
+            case 'End':
+                this.focusTab(this.tabs().length - 1);
+                event.preventDefault();
+                break;
+        }
+    }
+    changeTab(value) {
+        const index = this.tabs().findIndex((tab) => tab.value() === value);
+        this.value.set(value);
+        this.focusTab(index);
+    }
+    focusTab(index) {
+        this.focusedIndex.set(index);
+        this.tabs()[index]?.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Tabs, isStandalone: true, selector: "ksd-tabs", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.CommonInputs, inputs: ["data-size", "data-size", "data-color", "data-color"] }], ngImport: i0, template: `
+    <div class="ds-tabs">
+      <ng-content select="ksd-tabs-list" />
+      <ng-content select="ksd-tabs-panel" />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs`,
+                    template: `
+    <div class="ds-tabs">
+      <ng-content select="ksd-tabs-list" />
+      <ng-content select="ksd-tabs-panel" />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: CommonInputs,
+                            inputs: ['data-size', 'data-color'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class TabsList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", host: { attributes: { "role": "tablist" } }, ngImport: i0, template: `<ng-content select="button[ksd-tabs-tab]" />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs-list`,
+                    template: `<ng-content select="button[ksd-tabs-tab]" />`,
+                    host: {
+                        role: 'tablist',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class TabsPanel {
+    elementRef = inject(ElementRef);
+    group = inject(Tabs);
+    hasTabbableElement = signal(false, ...(ngDevMode ? [{ debugName: "hasTabbableElement" }] : []));
+    /**
+     * When this value is selected as the current state, render this TabsPanel component. Must match the value of a Tabs.Tab component.
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    labelledBy = computed(() => this.group
+        .tabs()
+        .find((tab) => tab.value() === this.value())
+        ?.buttonId(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    panelId = computed(() => this.id() ?? 'tabpanel-' + randomId(), ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    isSelected = computed(() => this.group.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    tabIndex = computed(() => (this.hasTabbableElement() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    constructor() {
+        effect(() => {
+            this.group
+                .tabs()
+                .find((tab) => tab.value() === this.value())
+                ?.ariaControls.set(this.panelId());
+        });
+    }
+    ngAfterContentInit() {
+        this.hasTabbableElement.set(this.elementRef.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "hidden": "!isSelected()", "attr.aria-labelledby": "labelledBy()", "tabIndex": "tabIndex()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TabsPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs-panel`,
+                    template: `<ng-content />`,
+                    host: {
+                        role: 'tabpanel',
+                        '[id]': 'panelId()',
+                        '[hidden]': '!isSelected()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[tabIndex]': 'tabIndex()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tabs, TabsList, TabsPanel, TabsTab };
+//# sourceMappingURL=ks-digital-designsystem-angular-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-tabs.mjs","sources":["../../../../packages/angular/tabs/src/tabs-tab.ts","../../../../packages/angular/tabs/src/tabs.ts","../../../../packages/angular/tabs/src/tabs-list.ts","../../../../packages/angular/tabs/src/tabs-panel.ts","../../../../packages/angular/tabs/src/ks-digital-designsystem-angular-tabs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core'\nimport {\n  CommonInputs,\n  randomId,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Tabs } from './tabs'\n\n@Component({\n  selector: `button[ksd-tabs-tab]`,\n  template: ` <ng-content /> `,\n  host: {\n    role: 'tab',\n    class: 'ds-button',\n    '[id]': 'buttonId()',\n    '[attr.aria-controls]': 'ariaControls()',\n    '[attr.aria-selected]': 'isSelected()',\n    '[attr.tab-index]': 'isFocused() ? 0 : -1',\n    '(click)': 'tabs.changeTab(value())',\n    '(keydown)': 'tabs.onKeyDown($event)',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [],\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n})\nexport class TabsTab {\n  /**\n   * Unique value that will be set in the Tabs components state when the tab is activated\n   */\n  readonly value = input.required<string>()\n  readonly id = input<string>()\n  readonly elementRef = inject(ElementRef)\n  readonly ariaControls = signal<string | undefined>(undefined)\n  readonly buttonId = computed(() => this.id() ?? 'tab-' + randomId())\n\n  protected tabs = inject(Tabs)\n  protected isFocused = computed(\n    () => this.tabs.focusedValue() === this.value(),\n  )\n  protected isSelected = computed(() => this.tabs.value() === this.value())\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  input,\n  model,\n  signal,\n} from '@angular/core'\nimport { CommonInputs } from '@ks-digital/designsystem-angular/__internals'\nimport { TabsTab } from './tabs-tab'\n\n@Component({\n  selector: `ksd-tabs`,\n  template: `\n    <div class=\"ds-tabs\">\n      <ng-content select=\"ksd-tabs-list\" />\n      <ng-content select=\"ksd-tabs-panel\" />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: CommonInputs,\n      inputs: ['data-size', 'data-color'],\n    },\n  ],\n})\nexport class Tabs {\n  readonly defaultValue = input<string>()\n  readonly value = model<string>('')\n  readonly focusedValue = computed(() =>\n    this.tabs()[this.focusedIndex()]?.value(),\n  )\n  readonly tabs = contentChildren(TabsTab, { descendants: true })\n  private focusedIndex = signal<number>(0)\n\n  constructor() {\n    effect(() => {\n      if (!this.value()) {\n        const value = this.defaultValue()\n        if (undefined !== value) {\n          this.changeTab(value)\n        }\n      }\n    })\n  }\n\n  onKeyDown(event: KeyboardEvent) {\n    switch (event.code) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        this.focusTab(\n          (this.focusedIndex() + this.tabs().length - 1) % this.tabs().length,\n        )\n        event.preventDefault()\n        break\n      case 'ArrowRight':\n      case 'ArrowDown':\n        this.focusTab((this.focusedIndex() + 1) % this.tabs().length)\n        event.preventDefault()\n        break\n      case 'Enter':\n      case 'Space':\n        {\n          const value = this.focusedValue()\n          if (value) {\n            this.changeTab(value)\n          }\n        }\n        event.preventDefault()\n        break\n      case 'Home':\n        this.focusTab(0)\n        event.preventDefault()\n        break\n      case 'End':\n        this.focusTab(this.tabs().length - 1)\n        event.preventDefault()\n        break\n    }\n  }\n\n  public changeTab(value: string) {\n    const index = this.tabs().findIndex((tab) => tab.value() === value)\n    this.value.set(value)\n    this.focusTab(index)\n  }\n\n  private focusTab(index: number) {\n    this.focusedIndex.set(index)\n    this.tabs()[index]?.elementRef.nativeElement.focus()\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: `ksd-tabs-list`,\n  template: `<ng-content select=\"button[ksd-tabs-tab]\" />`,\n  host: {\n    role: 'tablist',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsList {}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core'\nimport { randomId } from '@ks-digital/designsystem-angular/__internals'\nimport { Tabs } from './tabs'\n\n@Component({\n  selector: `ksd-tabs-panel`,\n  template: `<ng-content />`,\n  host: {\n    role: 'tabpanel',\n    '[id]': 'panelId()',\n    '[hidden]': '!isSelected()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[tabIndex]': 'tabIndex()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsPanel implements AfterContentInit {\n  private elementRef = inject(ElementRef)\n  private group = inject(Tabs)\n  private hasTabbableElement = signal(false)\n\n  /**\n   * When this value is selected as the current state, render this TabsPanel component. Must match the value of a Tabs.Tab component.\n   */\n  readonly value = input.required<string>()\n  readonly id = input<string>()\n\n  protected readonly labelledBy = computed(() =>\n    this.group\n      .tabs()\n      .find((tab) => tab.value() === this.value())\n      ?.buttonId(),\n  )\n  protected readonly panelId = computed(\n    () => this.id() ?? 'tabpanel-' + randomId(),\n  )\n  protected isSelected = computed(() => this.group.value() === this.value())\n  protected tabIndex = computed(() => (this.hasTabbableElement() ? -1 : 0))\n\n  constructor() {\n    effect(() => {\n      this.group\n        .tabs()\n        .find((tab) => tab.value() === this.value())\n        ?.ariaControls.set(this.panelId())\n    })\n  }\n\n  ngAfterContentInit(): void {\n    this.hasTabbableElement.set(\n      this.elementRef.nativeElement.querySelector(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    )\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/forms/README.md

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

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.28",
+  "version": "0.0.1-alpha.30",
   "license": "MIT",
   "private": false,
   "publishConfig": {
@@ -70,6 +70,10 @@
       "types": "./spinner/index.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-spinner.mjs"
     },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-tabs.mjs"
+    },
     "./validation-message": {
       "types": "./validation-message/index.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-validation-message.mjs"

package/paragraph/README.md

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

package/popover/README.md

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

package/search/README.md

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

package/spinner/README.md

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

package/tabs/README.md

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

package/tabs/index.d.ts

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, AfterContentInit } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class TabsTab {
+    /**
+     * Unique value that will be set in the Tabs components state when the tab is activated
+     */
+    readonly value: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    readonly elementRef: ElementRef<any>;
+    readonly ariaControls: _angular_core.WritableSignal<string | undefined>;
+    readonly buttonId: _angular_core.Signal<string>;
+    protected tabs: Tabs;
+    protected isFocused: _angular_core.Signal<boolean>;
+    protected isSelected: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsTab, "button[ksd-tabs-tab]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.CommonInputs; inputs: { "data-size": "data-size"; "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class Tabs {
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly focusedValue: _angular_core.Signal<string>;
+    readonly tabs: _angular_core.Signal<readonly TabsTab[]>;
+    private focusedIndex;
+    constructor();
+    onKeyDown(event: KeyboardEvent): void;
+    changeTab(value: string): void;
+    private focusTab;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "ksd-tabs", never, { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["tabs"], ["ksd-tabs-list", "ksd-tabs-panel"], true, [{ directive: typeof i1.CommonInputs; inputs: { "data-size": "data-size"; "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class TabsList {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsList, "ksd-tabs-list", never, {}, {}, never, ["button[ksd-tabs-tab]"], true, never>;
+}
+
+declare class TabsPanel implements AfterContentInit {
+    private elementRef;
+    private group;
+    private hasTabbableElement;
+    /**
+     * When this value is selected as the current state, render this TabsPanel component. Must match the value of a Tabs.Tab component.
+     */
+    readonly value: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    protected readonly labelledBy: _angular_core.Signal<string | undefined>;
+    protected readonly panelId: _angular_core.Signal<string>;
+    protected isSelected: _angular_core.Signal<boolean>;
+    protected tabIndex: _angular_core.Signal<0 | -1>;
+    constructor();
+    ngAfterContentInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsPanel, "ksd-tabs-panel", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Tabs, TabsList, TabsPanel, TabsTab };

package/validation-message/README.md

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