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

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

@@ -0,0 +1,148 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, contentChildren } from '@angular/core';
+import '@digdir/designsystemet-web/ds-tabs';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
+
+class TabsTab {
+    /**
+     * Stable identifier for this tab.
+     *
+     * Recommended for logic such as analytics, routing and persisted state.
+     *
+     * If omitted, `tabClicked` emits `tabId: undefined`.
+     */
+    tabId = input(...(ngDevMode ? [undefined, { debugName: "tabId" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits tab click details when this tab is clicked.
+     */
+    tabClicked = output();
+    /**
+     * Hack to get the content of the tab from outside so that we can
+     * keep the dom structure needed without additional host elements
+     */
+    templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+    /* Exposed function so Tabs can emit tab click events */
+    emitTabClicked(event) {
+        this.tabClicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClicked: "tabClicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs-tab`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: ` <ng-template #tpl><ng-content /></ng-template> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [],
+                    hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }], tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+
+class Tabs {
+    /**
+     * Emits tab click details when any tab is clicked.
+     */
+    tabClicked = output();
+    tabs = contentChildren(TabsTab, { ...(ngDevMode ? { debugName: "tabs" } : /* istanbul ignore next */ {}), descendants: true });
+    onTabClick(index, tab) {
+        const event = {
+            index,
+            tabId: tab.tabId(),
+        };
+        this.tabClicked.emit(event);
+        tab.emitTabClicked(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "ksd-tabs", outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+    <ds-tabs class="ds-tabs">
+      <ds-tablist>
+        @for (tab of tabs(); track tab; let index = $index) {
+          <ds-tab (click)="onTabClick(index, tab)">
+            <ng-container *ngTemplateOutlet="tab.templateRef()" />
+          </ds-tab>
+        }
+      </ds-tablist>
+      <ng-content select="ksd-tabs-panel" />
+    </ds-tabs>
+  `, isInline: true, styles: [":host ::ng-deep :is(.ds-tabs [role=tab],.ds-tabs ds-tab,.ds-tabs u-tab)>:where(ng-icon,svg,img){font-size:1.25em;width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: `ksd-tabs`, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <ds-tabs class="ds-tabs">
+      <ds-tablist>
+        @for (tab of tabs(); track tab; let index = $index) {
+          <ds-tab (click)="onTabClick(index, tab)">
+            <ng-container *ngTemplateOutlet="tab.templateRef()" />
+          </ds-tab>
+        }
+      </ds-tablist>
+      <ng-content select="ksd-tabs-panel" />
+    </ds-tabs>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ], styles: [":host ::ng-deep :is(.ds-tabs [role=tab],.ds-tabs ds-tab,.ds-tabs u-tab)>:where(ng-icon,svg,img){font-size:1.25em;width:1em;height:1em}\n"] }]
+        }], propDecorators: { tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class TabsList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", ngImport: i0, template: `<ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs-list`,
+                    template: `<ng-content /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class TabsPanel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", ngImport: i0, template: `
+    <ds-tabpanel>
+      <ng-content />
+    </ds-tabpanel>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `ksd-tabs-panel`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `
+    <ds-tabpanel>
+      <ng-content />
+    </ds-tabpanel>
+  `,
+                    host: {},
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * 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  CUSTOM_ELEMENTS_SCHEMA,\n  input,\n  output,\n  TemplateRef,\n  viewChild,\n} from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Payload emitted from `tabClicked` on both `ksd-tabs` and `ksd-tabs-tab`.\n */\nexport interface TabClickEvent {\n  /**\n   * Zero-based index of the clicked tab in its current render order.\n   */\n  index: number\n\n  /**\n   * Consumer-provided stable tab identifier from `tabId`.\n   *\n   * `undefined` when `tabId` is not provided.\n   */\n  tabId: string | undefined\n}\n\n@Component({\n  selector: `ksd-tabs-tab`,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: ` <ng-template #tpl><ng-content /></ng-template> `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [],\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class TabsTab {\n  /**\n   * Stable identifier for this tab.\n   *\n   * Recommended for logic such as analytics, routing and persisted state.\n   *\n   * If omitted, `tabClicked` emits `tabId: undefined`.\n   */\n  readonly tabId = input<string>()\n\n  /**\n   * Emits tab click details when this tab is clicked.\n   */\n  readonly tabClicked = output<TabClickEvent>()\n\n  /**\n   * Hack to get the content of the tab from outside so that we can\n   * keep the dom structure needed without additional host elements\n   */\n  templateRef = viewChild<TemplateRef<unknown>>('tpl')\n\n  /* Exposed function so Tabs can emit tab click events */\n  emitTabClicked(event: TabClickEvent) {\n    this.tabClicked.emit(event)\n  }\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  contentChildren,\n  CUSTOM_ELEMENTS_SCHEMA,\n  output,\n} from '@angular/core'\nimport '@digdir/designsystemet-web/ds-tabs'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { TabClickEvent, TabsTab } from './tabs-tab'\n\n@Component({\n  selector: `ksd-tabs`,\n  imports: [NgTemplateOutlet],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `\n    <ds-tabs class=\"ds-tabs\">\n      <ds-tablist>\n        @for (tab of tabs(); track tab; let index = $index) {\n          <ds-tab (click)=\"onTabClick(index, tab)\">\n            <ng-container *ngTemplateOutlet=\"tab.templateRef()\" />\n          </ds-tab>\n        }\n      </ds-tablist>\n      <ng-content select=\"ksd-tabs-panel\" />\n    </ds-tabs>\n  `,\n  styles: `\n    :host\n      ::ng-deep\n      :is(.ds-tabs [role='tab'], .ds-tabs ds-tab, .ds-tabs u-tab)\n      > :where(ng-icon, svg, img) {\n      font-size: calc(1em * 1.25);\n      width: 1em;\n      height: 1em;\n    }\n  `,\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})\nexport class Tabs {\n  /**\n   * Emits tab click details when any tab is clicked.\n   */\n  readonly tabClicked = output<TabClickEvent>()\n\n  readonly tabs = contentChildren(TabsTab, { descendants: true })\n\n  protected onTabClick(index: number, tab: TabsTab) {\n    const event: TabClickEvent = {\n      index,\n      tabId: tab.tabId(),\n    }\n\n    this.tabClicked.emit(event)\n    tab.emitTabClicked(event)\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: `ksd-tabs-list`,\n  template: `<ng-content /> `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsList {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\n\n@Component({\n  selector: `ksd-tabs-panel`,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `\n    <ds-tabpanel>\n      <ng-content />\n    </ds-tabpanel>\n  `,\n  host: {},\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsPanel {}\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-tag.mjs

@@ -0,0 +1,38 @@
+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 Tag {
+    /**
+     * The visual variant of the tag
+     *
+     * @default 'default'
+     */
+    variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Tag, isStandalone: true, selector: "ksd-tag", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-tag" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":host ::ng-deep>*{margin-inline-end:var(--ds-size-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tag, decorators: [{
+            type: Component,
+            args: [{ selector: 'ksd-tag', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: HostSize,
+                            inputs: ['data-size'],
+                        },
+                        {
+                            directive: HostColor,
+                            inputs: ['data-color'],
+                        },
+                    ], host: {
+                        class: 'ds-tag',
+                        '[attr.data-variant]': 'variant()',
+                    }, template: ` <ng-content /> `, styles: [":host ::ng-deep>*{margin-inline-end:var(--ds-size-1)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tag };
+//# sourceMappingURL=ks-digital-designsystem-angular-tag.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-tag.mjs","sources":["../../../../packages/angular/tag/src/tag.ts","../../../../packages/angular/tag/src/ks-digital-designsystem-angular-tag.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: 'ksd-tag',\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  host: {\n    class: 'ds-tag',\n    '[attr.data-variant]': 'variant()',\n  },\n  styles: `\n    :host ::ng-deep > * {\n      margin-inline-end: var(--ds-size-1);\n    }\n  `,\n  template: ` <ng-content /> `,\n})\nexport class Tag {\n  /**\n   * The visual variant of the tag\n   *\n   * @default 'default'\n   */\n  readonly variant = input<'default' | 'outline'>('default', {\n    alias: 'data-variant',\n  })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MA8Ba,GAAG,CAAA;AACd;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAwB,SAAS,+EACvD,KAAK,EAAE,cAAc,EAAA,CACrB;uGARS,GAAG,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAH,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAG,6bAFJ,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEjB,GAAG,EAAA,UAAA,EAAA,CAAA;kBAxBf,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,eAAA,EACF,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;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;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,QAAQ;AACf,wBAAA,qBAAqB,EAAE,WAAW;AACnC,qBAAA,EAAA,QAAA,EAMS,CAAA,gBAAA,CAAkB,EAAA,MAAA,EAAA,CAAA,yDAAA,CAAA,EAAA;;;AC5B9B;;AAEG;;;;"}

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

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { Directive } from '@angular/core';
+
+class ValidationMessage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ValidationMessage, isStandalone: true, selector: "[ksd-validation-message]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ValidationMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[ksd-validation-message]',
+                    host: {
+                        class: 'ds-validation-message',
+                        'data-field': 'validation',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ValidationMessage };
+//# sourceMappingURL=ks-digital-designsystem-angular-validation-message.mjs.map

package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-validation-message.mjs","sources":["../../../../packages/angular/validation-message/src/validation-message.ts","../../../../packages/angular/validation-message/src/ks-digital-designsystem-angular-validation-message.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[ksd-validation-message]',\n  host: {\n    class: 'ds-validation-message',\n    'data-field': 'validation',\n  },\n})\nexport class ValidationMessage {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAUa,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,0BAA0B;AACpC,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,uBAAuB;AAC9B,wBAAA,YAAY,EAAE,YAAY;AAC3B,qBAAA;AACF,iBAAA;;;ACTD;;AAEG;;;;"}

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

@@ -0,0 +1,7 @@
+// Needs an export to compile
+var index = void 0;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=ks-digital-designsystem-angular.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular.mjs","sources":["../../../../packages/angular/src/index.ts","../../../../packages/angular/src/ks-digital-designsystem-angular.ts"],"sourcesContent":["// Needs an export to compile\nexport default void 0\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACA,YAAe,KAAK,CAAC;;ACDrB;;AAEG"}

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/heading/README.md

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

package/link/README.md

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

package/package.json

@@ -5,42 +5,127 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.71",
   "license": "MIT",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
-  "type": "module",
-  "files": [
-    "./dist"
-  ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@digdir/designsystemet-css": "1.0.5"
+    "@digdir/designsystemet-web": "1.21.0",
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=20.0.0",
-    "@angular/core": ">=20.0.0",
-    "@angular/platform-browser": ">=20.0.0",
-    "@angular/platform-server": ">=20.0.0"
+    "@angular/common": ">= 21.0.0 < 22.0.0",
+    "@angular/core": ">= 21.0.0 < 22.0.0",
+    "@angular/forms": ">= 21.0.0 < 22.0.0"
   },
-  "devDependencies": {
-    "@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",
-    "angular-eslint": "^20.0.0",
-    "jsdom": "~22.1.0",
-    "ng-packagr": "^20.0.1"
+  "module": "fesm2022/ks-digital-designsystem-angular.mjs",
+  "typings": "types/ks-digital-designsystem-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ks-digital-designsystem-angular.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular.mjs"
+    },
+    "./__internals": {
+      "types": "./types/ks-digital-designsystem-angular-__internals.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-__internals.mjs"
+    },
+    "./alert": {
+      "types": "./types/ks-digital-designsystem-angular-alert.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-alert.mjs"
+    },
+    "./breadcrumbs": {
+      "types": "./types/ks-digital-designsystem-angular-breadcrumbs.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs"
+    },
+    "./button": {
+      "types": "./types/ks-digital-designsystem-angular-button.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-button.mjs"
+    },
+    "./card": {
+      "types": "./types/ks-digital-designsystem-angular-card.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-card.mjs"
+    },
+    "./chip": {
+      "types": "./types/ks-digital-designsystem-angular-chip.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-chip.mjs"
+    },
+    "./details": {
+      "types": "./types/ks-digital-designsystem-angular-details.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-details.mjs"
+    },
+    "./dialog": {
+      "types": "./types/ks-digital-designsystem-angular-dialog.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-dialog.mjs"
+    },
+    "./dropdown": {
+      "types": "./types/ks-digital-designsystem-angular-dropdown.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-dropdown.mjs"
+    },
+    "./error-summary": {
+      "types": "./types/ks-digital-designsystem-angular-error-summary.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-error-summary.mjs"
+    },
+    "./forms": {
+      "types": "./types/ks-digital-designsystem-angular-forms.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-forms.mjs"
+    },
+    "./heading": {
+      "types": "./types/ks-digital-designsystem-angular-heading.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-heading.mjs"
+    },
+    "./link": {
+      "types": "./types/ks-digital-designsystem-angular-link.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-link.mjs"
+    },
+    "./pagination": {
+      "types": "./types/ks-digital-designsystem-angular-pagination.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-pagination.mjs"
+    },
+    "./paragraph": {
+      "types": "./types/ks-digital-designsystem-angular-paragraph.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-paragraph.mjs"
+    },
+    "./popover": {
+      "types": "./types/ks-digital-designsystem-angular-popover.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-popover.mjs"
+    },
+    "./search": {
+      "types": "./types/ks-digital-designsystem-angular-search.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-search.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/ks-digital-designsystem-angular-skeleton.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-skeleton.mjs"
+    },
+    "./spinner": {
+      "types": "./types/ks-digital-designsystem-angular-spinner.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-spinner.mjs"
+    },
+    "./suggestion": {
+      "types": "./types/ks-digital-designsystem-angular-suggestion.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-suggestion.mjs"
+    },
+    "./table": {
+      "types": "./types/ks-digital-designsystem-angular-table.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/ks-digital-designsystem-angular-tabs.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-tabs.mjs"
+    },
+    "./tag": {
+      "types": "./types/ks-digital-designsystem-angular-tag.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-tag.mjs"
+    },
+    "./validation-message": {
+      "types": "./types/ks-digital-designsystem-angular-validation-message.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-validation-message.mjs"
+    }
   },
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json"
-  }
+  "sideEffects": false
 }

package/pagination/README.md

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

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/skeleton/README.md

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

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/suggestion/README.md

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

package/table/README.md

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

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/tag/README.md

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

package/types/ks-digital-designsystem-angular-__internals.d.ts

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+export { ColorDefinitions as Color, SeverityColorDefinitions as SeverityColors, Size } from '@ks-digital/designsystem-themes/types';
+
+/**
+ * Applies data-size attribute to host-element.
+ */
+declare class HostSize {
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    readonly dataSize: i0.InputSignal<Size>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HostSize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HostSize, never, never, { "dataSize": { "alias": "data-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Applies data-color attribute to host-element for all colors, including severity colors.
+ */
+declare class HostColor {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    readonly dataColor: i0.InputSignal<string | number | symbol | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HostColor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HostColor, never, never, { "dataColor": { "alias": "data-color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Applies data-color attribute to host-element for severity colors.
+ */
+declare class HostSeverityColors {
+    /**
+     * Changes color for descendant Designsystemet components.
+     * Select from predefined colors and colors defined in theme.
+     * @attribute data-color
+     */
+    readonly dataColor: i0.InputSignal<string | number | symbol | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HostSeverityColors, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HostSeverityColors, never, never, { "dataColor": { "alias": "data-color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const logIfDevMode: ({ component, message, }: {
+    component: string;
+    message: string;
+}) => void;
+
+declare const randomId: () => string;
+
+export { HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };

package/types/ks-digital-designsystem-angular-alert.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ */
+declare class Alert {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Alert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Alert, "ksd-alert", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostSeverityColors; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Alert };

package/types/ks-digital-designsystem-angular-breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Breadcrumbs {
+    /**
+     * Sets the screen reader label for the pagination
+     */
+    readonly ariaLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Breadcrumbs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Breadcrumbs, "ksd-breadcrumbs", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Breadcrumbs };

package/types/ks-digital-designsystem-angular-button.d.ts

@@ -0,0 +1,32 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Button {
+    /**
+     * Specify which variant to use
+     * @default 'primary'
+     */
+    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "tertiary">;
+    /**
+     * Toggle loading state.
+     * Pass an element if you want to display a custom loader.
+     *
+     * @default false
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Disables element
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     */
+    readonly icon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon. */
+    readonly dataIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "button[ksd-button], a[ksd-button]", never, { "variant": { "alias": "data-variant"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dataIcon": { "alias": "data-icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Button };

package/types/ks-digital-designsystem-angular-card.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Card {
+    /**
+     * Change the background color of the card
+     * @default 'default'
+     */
+    variant: i0.InputSignal<"tinted" | "default">;
+    private el;
+    private destroyRef;
+    private generatedId;
+    private originalId;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<Card, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Card, "[ksd-card]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class CardBlock {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardBlock, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardBlock, "[ksd-card-block]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { Card, CardBlock };