@ks-digital/designsystem-angular 0.0.1-alpha.8 → 0.0.1-alpha.80

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

@@ -0,0 +1,248 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+var Table = class Table {
+	hover = input(false, {
+		...ngDevMode ? { debugName: "hover" } : /* istanbul ignore next */ {},
+		alias: "data-hover",
+		transform: booleanAttribute
+	});
+	border = input(false, {
+		...ngDevMode ? { debugName: "border" } : /* istanbul ignore next */ {},
+		alias: "data-border",
+		transform: booleanAttribute
+	});
+	stickyHeader = input(false, {
+		...ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {},
+		alias: "data-sticky-header",
+		transform: booleanAttribute
+	});
+	zebra = input(false, {
+		...ngDevMode ? { debugName: "zebra" } : /* istanbul ignore next */ {},
+		alias: "data-zebra",
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Table,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: Table,
+		isStandalone: true,
+		selector: "table[ksd-table]",
+		inputs: {
+			hover: {
+				classPropertyName: "hover",
+				publicName: "data-hover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			border: {
+				classPropertyName: "border",
+				publicName: "data-border",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stickyHeader: {
+				classPropertyName: "stickyHeader",
+				publicName: "data-sticky-header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			zebra: {
+				classPropertyName: "zebra",
+				publicName: "data-zebra",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-hover": "hover() || undefined",
+				"attr.data-border": "border() || undefined",
+				"attr.data-sticky-header": "stickyHeader() || undefined",
+				"attr.data-zebra": "zebra() || undefined"
+			},
+			classAttribute: "ds-table"
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Table,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "table[ksd-table]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<ng-content />`,
+			host: {
+				class: "ds-table",
+				"[attr.data-hover]": "hover() || undefined",
+				"[attr.data-border]": "border() || undefined",
+				"[attr.data-sticky-header]": "stickyHeader() || undefined",
+				"[attr.data-zebra]": "zebra() || undefined"
+			}
+		}]
+	}],
+	propDecorators: {
+		hover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-hover",
+				required: false
+			}]
+		}],
+		border: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-border",
+				required: false
+			}]
+		}],
+		stickyHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-sticky-header",
+				required: false
+			}]
+		}],
+		zebra: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-zebra",
+				required: false
+			}]
+		}]
+	}
+});
+var TableHeaderCell = class TableHeaderCell {
+	sort = input(void 0, {
+		...ngDevMode ? { debugName: "sort" } : /* istanbul ignore next */ {},
+		alias: "aria-sort"
+	});
+	sortChange = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TableHeaderCell,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: TableHeaderCell,
+		isStandalone: true,
+		selector: "th[ksd-header-cell]",
+		inputs: { sort: {
+			classPropertyName: "sort",
+			publicName: "aria-sort",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { sortChange: "sortChange" },
+		host: { properties: { "attr.aria-sort": "sort()" } },
+		ngImport: i0,
+		template: `
+    @if (sort()) {
+      <button
+        type="button"
+        (click)="sortChange.emit(); $event.stopPropagation()"
+      >
+        <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+      </button>
+    } @else {
+      <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+    }
+
+    <ng-template #headerTitle>
+      <ng-content />
+    </ng-template>
+  `,
+		isInline: true,
+		styles: ["button{padding:var(--dsc-table-padding)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TableHeaderCell,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "th[ksd-header-cell]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (sort()) {
+      <button
+        type="button"
+        (click)="sortChange.emit(); $event.stopPropagation()"
+      >
+        <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+      </button>
+    } @else {
+      <ng-container *ngTemplateOutlet="headerTitle"></ng-container>
+    }
+
+    <ng-template #headerTitle>
+      <ng-content />
+    </ng-template>
+  `,
+			imports: [NgTemplateOutlet],
+			host: { "[attr.aria-sort]": "sort()" },
+			styles: ["button{padding:var(--dsc-table-padding)}\n"]
+		}]
+	}],
+	propDecorators: {
+		sort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-sort",
+				required: false
+			}]
+		}],
+		sortChange: [{
+			type: i0.Output,
+			args: ["sortChange"]
+		}]
+	}
+});
+export { Table, TableHeaderCell };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-table.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-table.mjs","names":[],"sources":["../../../../packages/angular/table/src/table.ts","../../../../packages/angular/table/src/table-header-cell.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  input,\n} from '@angular/core'\n\n@Component({\n  selector: 'table[ksd-table]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-table',\n    '[attr.data-hover]': 'hover() || undefined',\n    '[attr.data-border]': 'border() || undefined',\n    '[attr.data-sticky-header]': 'stickyHeader() || undefined',\n    '[attr.data-zebra]': 'zebra() || undefined',\n  },\n})\nexport class Table {\n  /**\n   * Will give the table a hover effect on rows\n   * @default false\n   */\n  readonly hover = input(false, {\n    alias: 'data-hover',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will give the table a rounded border\n   * @default false\n   */\n  readonly border = input(false, {\n    alias: 'data-border',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will make the table header sticky\n   * @default false\n   */\n  readonly stickyHeader = input(false, {\n    alias: 'data-sticky-header',\n    transform: booleanAttribute,\n  })\n  /**\n   * Will give the table zebra striping\n   * @default false\n   */\n  readonly zebra = input(false, {\n    alias: 'data-zebra',\n    transform: booleanAttribute,\n  })\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n} from '@angular/core'\n@Component({\n  selector: 'th[ksd-header-cell]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (sort()) {\n      <button\n        type=\"button\"\n        (click)=\"sortChange.emit(); $event.stopPropagation()\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n      </button>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n    }\n\n    <ng-template #headerTitle>\n      <ng-content />\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet],\n  host: {\n    '[attr.aria-sort]': 'sort()',\n  },\n  styles: `\n    button {\n      padding: var(--dsc-table-padding);\n    }\n  `,\n})\nexport class TableHeaderCell {\n  /**\n   * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon\n   * @default undefined\n   */\n  readonly sort = input<'none' | 'ascending' | 'descending'>(undefined, {\n    alias: 'aria-sort',\n  })\n  /**\n   * Emitted when the sort button is clicked\n   * @emits void\n   */\n  readonly sortChange = output()\n}\n"],"mappings":";;;AAmBA,IAAa,QAAb,MAAa,MAAK;CAKP,QAAQ,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAC1B,OAAO;EACP,WAAW;CAAgB,CAAA;CAMpB,SAAS,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAC3B,OAAO;EACP,WAAW;CAAgB,CAAA;CAMpB,eAAe,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,eAAA,+BAAA,CAAA;EACjC,OAAO;EACP,WAAW;CAAgB,CAAA;CAMpB,QAAQ,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAC1B,OAAO;EACP,WAAW;CAAgB,CAAA;CA/BlB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAK,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAL,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAK,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,oBAAA;IAAA,2BAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UATN;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AASf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAK,YAAA,CAAA;EAZjB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,UAAU;GACV,MAAM;IACJ,OAAO;IACP,qBAAqB;IACrB,sBAAsB;IACtB,6BAA6B;IAC7B,qBAAqB;GACtB;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACkBD,IAAa,kBAAb,MAAa,gBAAe;CAKjB,OAAO,MAA2C,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAClE,OAAO;CAAW,CAAA;CAMX,aAAa,OAAM;CAZjB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,SAAA,EAAA,YAAA,aAAA;EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,SAAA,EAAA;EAAA,UAAA;EAAA,UA1BhB;;;;;;;;;;;;;;;;EAeT,UAAA;EAAA,QAAA,CAAA,4CAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MACS;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAUf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EA7B3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,iBACd,wBAAwB;GAAM,UACrC;;;;;;;;;;;;;;;;GAeT,SACQ,CAAC,gBAAgB;GAAC,MACrB,EACJ,oBAAoB,SACrB;GAAA,QAAA,CAAA,4CAAA;EAAA,CAAA"}

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

@@ -0,0 +1,325 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, booleanAttribute, contentChildren, input, output, viewChild } from "@angular/core";
+import "@digdir/designsystemet-web/ds-tabs";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var TabsTab = class TabsTab {
+	tabId = input(...ngDevMode ? [void 0, { debugName: "tabId" }] : /* istanbul ignore next */ []);
+	ariaSelected = input(false, {
+		...ngDevMode ? { debugName: "ariaSelected" } : /* istanbul ignore next */ {},
+		alias: "aria-selected",
+		transform: booleanAttribute
+	});
+	tabClicked = output();
+	templateRef = viewChild("tpl", ...ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []);
+	emitTabClicked(event) {
+		this.tabClicked.emit(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TabsTab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: TabsTab,
+		isStandalone: true,
+		selector: "ksd-tabs-tab",
+		inputs: {
+			tabId: {
+				classPropertyName: "tabId",
+				publicName: "tabId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaSelected: {
+				classPropertyName: "ariaSelected",
+				publicName: "aria-selected",
+				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: "22.2.2",
+	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
+			}]
+		}],
+		ariaSelected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-selected",
+				required: false
+			}]
+		}],
+		tabClicked: [{
+			type: i0.Output,
+			args: ["tabClicked"]
+		}],
+		templateRef: [{
+			type: i0.ViewChild,
+			args: ["tpl", { isSignal: true }]
+		}]
+	}
+});
+var Tabs = class Tabs {
+	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: "22.2.2",
+		ngImport: i0,
+		type: Tabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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)"
+            [selected]="tab.ariaSelected()"
+          >
+            <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: "22.2.2",
+	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)"
+            [selected]="tab.ariaSelected()"
+          >
+            <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
+			}]
+		}]
+	}
+});
+var TabsList = class TabsList {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TabsList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		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: "22.2.2",
+	ngImport: i0,
+	type: TabsList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: `ksd-tabs-list`,
+			template: `<ng-content /> `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}]
+});
+var TabsPanel = class TabsPanel {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TabsPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		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: "22.2.2",
+	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
+		}]
+	}]
+});
+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","names":[],"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"],"sourcesContent":["import {\n  booleanAttribute,\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   * Marks this tab as the selected tab, forwarded to the underlying `ds-tab`.\n   *\n   * @default false\n   */\n  readonly ariaSelected = input(false, {\n    alias: 'aria-selected',\n    transform: booleanAttribute,\n  })\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\n            (click)=\"onTabClick(index, tab)\"\n            [selected]=\"tab.ariaSelected()\"\n          >\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"],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var Tag = class Tag {
+	variant = input("default", {
+		...ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {},
+		alias: "data-variant"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Tag,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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: "22.2.2",
+	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
+		}]
+	}] }
+});
+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","names":[],"sources":["../../../../packages/angular/tag/src/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"],"mappings":";;;;AA8BA,IAAa,MAAb,MAAa,IAAG;CAML,UAAU,MAA6B,WAAS;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EACvD,OAAO;CAAc,CAAA;CAPZ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAG,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAH,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAG,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,SAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,qBAAA,YAAA;GAAA,gBAAA;EAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UAFJ;EAAkB,UAAA;EAAA,QAAA,CAAA,yDAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAG,YAAA,CAAA;EAxBf,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,iBACF,wBAAwB;GAAM,gBAC/B,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,MACK;IACJ,OAAO;IACP,uBAAuB;GACxB;GAAA,UAMS;GAAkB,QAAA,CAAA,yDAAA;EAAA,CAAA"}