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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-heading.mjs","names":[],"sources":["../../../../packages/angular/heading/src/heading.ts"],"sourcesContent":["import { Directive, input, signal } from '@angular/core'\n\n@Directive({\n  selector:\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    'h1[ksd-heading], h2[ksd-heading], h3[ksd-heading], h4[ksd-heading], h5[ksd-heading], h6[ksd-heading]',\n  host: {\n    class: 'ds-heading',\n    '[attr.data-size]': 'dataSize() || null',\n    '[attr.id]': 'id() || null',\n  },\n})\nexport class Heading {\n  public id = signal<string | undefined>(undefined)\n  /**\n   * Changes text sizing\n   * @default 'md'\n   */\n  readonly dataSize = input<'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(\n    undefined,\n    {\n      alias: 'data-size',\n    },\n  )\n\n  /**\n   * Set the id of the heading\n   * @param id\n   */\n  setId(id: string) {\n    this.id.set(id)\n  }\n}\n"],"mappings":";;AAYA,IAAa,UAAb,MAAa,QAAO;CACX,KAAK,OAA2B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,KAAA,CAAA,+BAAA,CAAA,CAAA;CAKxC,WAAW,MAClB,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAEP,OAAO;CAAW,CAAA;CAQtB,MAAM,IAAU;EACd,KAAK,GAAG,IAAI,EAAE;CAChB;CAnBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,UAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,kBAAA;IAAA,WAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAVnB,MAAA;EAAU,MAAA,CAAA;GACT,UAEE;GACF,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,aAAa;GACd;EACF,CAAA"}

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

@@ -0,0 +1,60 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var Link = class Link {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Link,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: Link,
+		isStandalone: true,
+		selector: "a[ksd-link]",
+		host: { classAttribute: "ds-link" },
+		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:has(>span)>::ng-deep :is(ng-icon,svg){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ::ng-deep ng-icon,:host>::ng-deep svg{display:inline-flex;vertical-align:middle;font-size:var(--ng-glyph__size, 1.3em)}:host ::ng-deep svg{width:1em;height:1em}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Link,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[ksd-link]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ` <ng-content /> `,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			host: { class: "ds-link" },
+			styles: [":host:has(>span)>::ng-deep :is(ng-icon,svg){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ::ng-deep ng-icon,:host>::ng-deep svg{display:inline-flex;vertical-align:middle;font-size:var(--ng-glyph__size, 1.3em)}:host ::ng-deep svg{width:1em;height:1em}\n"]
+		}]
+	}]
+});
+export { Link };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-link.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-link.mjs","names":[],"sources":["../../../../packages/angular/link/src/link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n  selector: 'a[ksd-link]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <ng-content /> `,\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-link',\n  },\n  styles: `\n    /* Transcluded icons need ::ng-deep: they carry the consumer's scoping attribute */\n    :host:has(> span) > ::ng-deep :is(ng-icon, svg) {\n      margin-inline: var(--ds-size-1);\n      margin-inline-start: 0;\n    }\n\n    :host ::ng-deep ng-icon,\n    :host > ::ng-deep svg {\n      display: inline-flex;\n      vertical-align: middle;\n      font-size: var(--ng-glyph__size, 1.3em);\n    }\n\n    :host ::ng-deep svg {\n      width: 1em;\n      height: 1em;\n    }\n  `,\n})\nexport class Link {}\n"],"mappings":";;;;AA2CA,IAAa,OAAb,MAAa,KAAI;CAAJ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAI,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAJ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAI,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,UAAA;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,UAlCL;EAAkB,UAAA;EAAA,QAAA,CAAA,2QAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAkCjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAI,YAAA,CAAA;EArChB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,iBACN,wBAAwB;GAAM,UACrC;GAAkB,gBACZ,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,MACK,EACJ,OAAO,UACR;GAAA,QAAA,CAAA,2QAAA;EAAA,CAAA"}

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

@@ -0,0 +1,471 @@
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Directive, computed, input, numberAttribute, output } from "@angular/core";
+import { pagination } from "@digdir/designsystemet-web/ds-pagination";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var PaginationButton = class PaginationButton {
+	page = input(null, {
+		...ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {},
+		alias: "ksdPaginationButton"
+	});
+	pageNumber = computed(() => {
+		const value = this.page();
+		if (typeof value === "number") return value || null;
+		if (typeof value === "object" && value?.type === "page") return value.page;
+		return null;
+	}, ...ngDevMode ? [{ debugName: "pageNumber" }] : /* istanbul ignore next */ []);
+	isCurrent = computed(() => {
+		const value = this.page();
+		return typeof value === "object" && value?.type === "page" && value.current;
+	}, ...ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PaginationButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: PaginationButton,
+		isStandalone: true,
+		selector: "[ksdPaginationButton]",
+		inputs: { page: {
+			classPropertyName: "page",
+			publicName: "ksdPaginationButton",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-variant": "tertiary" },
+			properties: {
+				"attr.data-page": "pageNumber()",
+				"attr.aria-current": "isCurrent() ? \"true\" : null"
+			},
+			classAttribute: "ds-button"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PaginationButton,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[ksdPaginationButton]",
+			host: {
+				class: "ds-button",
+				"data-variant": "tertiary",
+				"[attr.data-page]": "pageNumber()",
+				"[attr.aria-current]": "isCurrent() ? \"true\" : null"
+			}
+		}]
+	}],
+	propDecorators: { page: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "ksdPaginationButton",
+			required: false
+		}]
+	}] }
+});
+const isModifiedClick = (e) => e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
+var Pagination = class Pagination {
+	current = input.required({
+		...ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	total = input.required({
+		...ngDevMode ? { debugName: "total" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	ariaLabel = input("Bla i sider", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	show = input(7, {
+		...ngDevMode ? { debugName: "show" } : /* istanbul ignore next */ {},
+		transform: (value) => numberAttribute(value, 7)
+	});
+	href = input(...ngDevMode ? [void 0, { debugName: "href" }] : /* istanbul ignore next */ []);
+	previousLabel = input("Forrige", ...ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input("Neste", ...ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	pageLabel = input("Side %d", ...ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []);
+	pageClicked = output();
+	pages = computed(() => {
+		const result = pagination({
+			current: this.current(),
+			total: this.total(),
+			show: this.show()
+		});
+		return {
+			pages: result.pages.map((p) => p.page === 0 ? {
+				type: "ellipsis",
+				key: p.key
+			} : {
+				type: "page",
+				page: p.page,
+				current: p.current === "page",
+				key: p.key
+			}),
+			prev: result.prev,
+			next: result.next
+		};
+	}, ...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
+	hrefFor(page) {
+		return page ? this.href()?.replace("%d", String(page)) ?? null : null;
+	}
+	labelFor(page) {
+		return this.pageLabel().replace("%d", String(page));
+	}
+	onClick(e) {
+		const root = e.currentTarget;
+		const target = e.target.closest("button,a");
+		if (!target || !root.contains(target)) return;
+		if (target.matches("a[href]") && isModifiedClick(e)) return;
+		const page = Number(target.getAttribute("data-page"));
+		if (!page || page === this.current()) return;
+		e.preventDefault();
+		this.pageClicked.emit(page);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Pagination,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: Pagination,
+		isStandalone: true,
+		selector: "ksd-pagination",
+		inputs: {
+			current: {
+				classPropertyName: "current",
+				publicName: "current",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			total: {
+				classPropertyName: "total",
+				publicName: "total",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			show: {
+				classPropertyName: "show",
+				publicName: "show",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			href: {
+				classPropertyName: "href",
+				publicName: "href",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageLabel: {
+				classPropertyName: "pageLabel",
+				publicName: "pageLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pageClicked: "pageClicked" },
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
+    <ds-pagination
+      class="ds-pagination"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick($event)"
+    >
+      <ng-content>
+        <ol>
+          <li>
+            @if (href()) {
+              <a
+                [ksdPaginationButton]="pages().prev"
+                [attr.href]="hrefFor(pages().prev)"
+                [attr.aria-hidden]="pages().prev ? null : 'true'"
+                >{{ previousLabel() }}</a
+              >
+            } @else {
+              <button
+                type="button"
+                [ksdPaginationButton]="pages().prev"
+                [disabled]="!pages().prev"
+                [attr.aria-hidden]="pages().prev ? null : 'true'"
+              >
+                {{ previousLabel() }}
+              </button>
+            }
+          </li>
+          @for (page of pages().pages; track page.key) {
+            @if (page.type === 'page') {
+              <li>
+                @if (href()) {
+                  <a
+                    [ksdPaginationButton]="page"
+                    [attr.href]="hrefFor(page.page)"
+                    [attr.aria-label]="labelFor(page.page)"
+                    >{{ page.page }}</a
+                  >
+                } @else {
+                  <button
+                    type="button"
+                    [ksdPaginationButton]="page"
+                    [attr.aria-label]="labelFor(page.page)"
+                  >
+                    {{ page.page }}
+                  </button>
+                }
+              </li>
+            } @else {
+              <li></li>
+            }
+          }
+          <li>
+            @if (href()) {
+              <a
+                [ksdPaginationButton]="pages().next"
+                [attr.href]="hrefFor(pages().next)"
+                [attr.aria-hidden]="pages().next ? null : 'true'"
+                >{{ nextLabel() }}</a
+              >
+            } @else {
+              <button
+                type="button"
+                [ksdPaginationButton]="pages().next"
+                [disabled]="!pages().next"
+                [attr.aria-hidden]="pages().next ? null : 'true'"
+              >
+                {{ nextLabel() }}
+              </button>
+            }
+          </li>
+        </ol>
+      </ng-content>
+    </ds-pagination>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: PaginationButton,
+			selector: "[ksdPaginationButton]",
+			inputs: ["ksdPaginationButton"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Pagination,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-pagination",
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			imports: [PaginationButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <ds-pagination
+      class="ds-pagination"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick($event)"
+    >
+      <ng-content>
+        <ol>
+          <li>
+            @if (href()) {
+              <a
+                [ksdPaginationButton]="pages().prev"
+                [attr.href]="hrefFor(pages().prev)"
+                [attr.aria-hidden]="pages().prev ? null : 'true'"
+                >{{ previousLabel() }}</a
+              >
+            } @else {
+              <button
+                type="button"
+                [ksdPaginationButton]="pages().prev"
+                [disabled]="!pages().prev"
+                [attr.aria-hidden]="pages().prev ? null : 'true'"
+              >
+                {{ previousLabel() }}
+              </button>
+            }
+          </li>
+          @for (page of pages().pages; track page.key) {
+            @if (page.type === 'page') {
+              <li>
+                @if (href()) {
+                  <a
+                    [ksdPaginationButton]="page"
+                    [attr.href]="hrefFor(page.page)"
+                    [attr.aria-label]="labelFor(page.page)"
+                    >{{ page.page }}</a
+                  >
+                } @else {
+                  <button
+                    type="button"
+                    [ksdPaginationButton]="page"
+                    [attr.aria-label]="labelFor(page.page)"
+                  >
+                    {{ page.page }}
+                  </button>
+                }
+              </li>
+            } @else {
+              <li></li>
+            }
+          }
+          <li>
+            @if (href()) {
+              <a
+                [ksdPaginationButton]="pages().next"
+                [attr.href]="hrefFor(pages().next)"
+                [attr.aria-hidden]="pages().next ? null : 'true'"
+                >{{ nextLabel() }}</a
+              >
+            } @else {
+              <button
+                type="button"
+                [ksdPaginationButton]="pages().next"
+                [disabled]="!pages().next"
+                [attr.aria-hidden]="pages().next ? null : 'true'"
+              >
+                {{ nextLabel() }}
+              </button>
+            }
+          </li>
+        </ol>
+      </ng-content>
+    </ds-pagination>
+  `,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}]
+		}]
+	}],
+	propDecorators: {
+		current: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "current",
+				required: true
+			}]
+		}],
+		total: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "total",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		show: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "show",
+				required: false
+			}]
+		}],
+		href: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "href",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		pageLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageLabel",
+				required: false
+			}]
+		}],
+		pageClicked: [{
+			type: i0.Output,
+			args: ["pageClicked"]
+		}]
+	}
+});
+export { Pagination, PaginationButton };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-pagination.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-pagination.mjs","names":[],"sources":["../../../../packages/angular/pagination/src/pagination.button.ts","../../../../packages/angular/pagination/src/pagination.ts"],"sourcesContent":["import { computed, Directive, input } from '@angular/core'\nimport type { PaginationPage } from './pagination'\n\n/** Accepts a string so the valueless `<button ksdPaginationButton>` form still type-checks. */\ntype PageInput = PaginationPage | number | string | null | undefined\n\n@Directive({\n  selector: '[ksdPaginationButton]',\n  host: {\n    class: 'ds-button',\n    // The pagination CSS restores the primary look for [aria-current=true].\n    'data-variant': 'tertiary',\n    '[attr.data-page]': 'pageNumber()',\n    '[attr.aria-current]': 'isCurrent() ? \"true\" : null',\n  },\n})\nexport class PaginationButton {\n  /**\n   * The page this control targets. Pass an entry from `pages().pages`, or a\n   * number for the previous/next controls.\n   */\n  readonly page = input<PageInput>(null, { alias: 'ksdPaginationButton' })\n\n  protected readonly pageNumber = computed(() => {\n    const value = this.page()\n    if (typeof value === 'number') return value || null\n    if (typeof value === 'object' && value?.type === 'page') return value.page\n    return null\n  })\n\n  protected readonly isCurrent = computed(() => {\n    const value = this.page()\n    return typeof value === 'object' && value?.type === 'page' && value.current\n  })\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  CUSTOM_ELEMENTS_SCHEMA,\n  input,\n  numberAttribute,\n  output,\n} from '@angular/core'\nimport { pagination } from '@digdir/designsystemet-web/ds-pagination'\nimport {\n  HostColor,\n  HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { PaginationButton } from './pagination.button'\n\n/**\n * A page entry, or an ellipsis placeholder that renders as an empty `<li>`.\n */\nexport type PaginationPage =\n  | { type: 'page'; page: number; current: boolean; key: string }\n  | { type: 'ellipsis'; key: string }\n\nexport interface PaginationPages {\n  pages: PaginationPage[]\n  prev: number\n  next: number\n}\n\n/** Open-in-new-tab and similar, which the browser should handle itself. */\nconst isModifiedClick = (e: MouseEvent) =>\n  e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey\n\n@Component({\n  selector: 'ksd-pagination',\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  imports: [PaginationButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  // Deliberately no data-current/data-total. Those put <ds-pagination> into the\n  // mode where it rewrites aria-label, role, tabindex, value and href on every\n  // button/a child. We render the accessible markup ourselves instead.\n  template: `\n    <ds-pagination\n      class=\"ds-pagination\"\n      [attr.aria-label]=\"ariaLabel()\"\n      (click)=\"onClick($event)\"\n    >\n      <ng-content>\n        <ol>\n          <li>\n            @if (href()) {\n              <a\n                [ksdPaginationButton]=\"pages().prev\"\n                [attr.href]=\"hrefFor(pages().prev)\"\n                [attr.aria-hidden]=\"pages().prev ? null : 'true'\"\n                >{{ previousLabel() }}</a\n              >\n            } @else {\n              <button\n                type=\"button\"\n                [ksdPaginationButton]=\"pages().prev\"\n                [disabled]=\"!pages().prev\"\n                [attr.aria-hidden]=\"pages().prev ? null : 'true'\"\n              >\n                {{ previousLabel() }}\n              </button>\n            }\n          </li>\n          @for (page of pages().pages; track page.key) {\n            @if (page.type === 'page') {\n              <li>\n                @if (href()) {\n                  <a\n                    [ksdPaginationButton]=\"page\"\n                    [attr.href]=\"hrefFor(page.page)\"\n                    [attr.aria-label]=\"labelFor(page.page)\"\n                    >{{ page.page }}</a\n                  >\n                } @else {\n                  <button\n                    type=\"button\"\n                    [ksdPaginationButton]=\"page\"\n                    [attr.aria-label]=\"labelFor(page.page)\"\n                  >\n                    {{ page.page }}\n                  </button>\n                }\n              </li>\n            } @else {\n              <li></li>\n            }\n          }\n          <li>\n            @if (href()) {\n              <a\n                [ksdPaginationButton]=\"pages().next\"\n                [attr.href]=\"hrefFor(pages().next)\"\n                [attr.aria-hidden]=\"pages().next ? null : 'true'\"\n                >{{ nextLabel() }}</a\n              >\n            } @else {\n              <button\n                type=\"button\"\n                [ksdPaginationButton]=\"pages().next\"\n                [disabled]=\"!pages().next\"\n                [attr.aria-hidden]=\"pages().next ? null : 'true'\"\n              >\n                {{ nextLabel() }}\n              </button>\n            }\n          </li>\n        </ol>\n      </ng-content>\n    </ds-pagination>\n  `,\n  hostDirectives: [\n    {\n      directive: HostSize,\n      inputs: ['data-size'],\n    },\n    {\n      directive: HostColor,\n      inputs: ['data-color'],\n    },\n  ],\n})\nexport class Pagination {\n  /**\n   * The current page\n   */\n  readonly current = input.required<number, string | number>({\n    transform: numberAttribute,\n  })\n\n  /**\n   * The total number of pages\n   */\n  readonly total = input.required<number, string | number>({\n    transform: numberAttribute,\n  })\n\n  /**\n   * Sets the screen reader label for the pagination\n   */\n  readonly ariaLabel = input<string>('Bla i sider', { alias: 'aria-label' })\n\n  /**\n   * How many pages to show. Default is 7\n   */\n  readonly show = input(7, {\n    // numberAttribute defaults to NaN, which would collapse the page list.\n    transform: (value: unknown) => numberAttribute(value, 7),\n  })\n\n  /**\n   * E.g if \"?page=%d\" all the links will set href to \"?page=1\", \"?page=2\".\n   */\n  readonly href = input<string>()\n\n  /**\n   * Label for the previous button. Only used when no content is projected.\n   */\n  readonly previousLabel = input('Forrige')\n\n  /**\n   * Label for the next button. Only used when no content is projected.\n   */\n  readonly nextLabel = input('Neste')\n\n  /**\n   * Screen reader label for each page. Only used when no content is projected.\n   */\n  readonly pageLabel = input('Side %d')\n\n  /**\n   * Emits the page number when a page is clicked\n   */\n  readonly pageClicked = output<number>()\n\n  /**\n   * Exposes pagination data for consumer use\n   */\n  readonly pages = computed<PaginationPages>(() => {\n    const result = pagination({\n      current: this.current(),\n      total: this.total(),\n      show: this.show(),\n    })\n    return {\n      pages: result.pages.map((p) =>\n        // The page helper uses 0 as the ellipsis sentinel.\n        p.page === 0\n          ? { type: 'ellipsis', key: p.key }\n          : {\n              type: 'page',\n              page: p.page,\n              current: p.current === 'page',\n              key: p.key,\n            },\n      ),\n      prev: result.prev,\n      next: result.next,\n    }\n  })\n\n  protected hrefFor(page: number) {\n    return page ? (this.href()?.replace('%d', String(page)) ?? null) : null\n  }\n\n  protected labelFor(page: number) {\n    return this.pageLabel().replace('%d', String(page))\n  }\n\n  protected onClick(e: MouseEvent) {\n    const root = e.currentTarget as HTMLElement\n    const target = (e.target as HTMLElement).closest('button,a')\n    if (!target || !root.contains(target)) return\n\n    if (target.matches('a[href]') && isModifiedClick(e)) return\n\n    const page = Number(target.getAttribute('data-page'))\n    if (!page || page === this.current()) return\n\n    e.preventDefault()\n    this.pageClicked.emit(page)\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+var Paragraph = class Paragraph {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: Paragraph,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: Paragraph,
+		isStandalone: true,
+		selector: "p[ksd-paragraph]",
+		host: { classAttribute: "ds-paragraph" },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: Paragraph,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p[ksd-paragraph]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<ng-content />`,
+			host: { class: "ds-paragraph" }
+		}]
+	}]
+});
+export { Paragraph };
+
+//# sourceMappingURL=ks-digital-designsystem-angular-paragraph.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ks-digital-designsystem-angular-paragraph.mjs","names":[],"sources":["../../../../packages/angular/paragraph/src/paragraph.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: 'p[ksd-paragraph]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<ng-content />`,\n  host: {\n    class: 'ds-paragraph',\n  },\n})\nexport class Paragraph {}\n"],"mappings":";;AAUA,IAAa,YAAb,MAAa,UAAS;CAAT,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,eAAA;EAAA,UAAA;EAAA,UALV;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EARrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,UAAU;GACV,MAAM,EACJ,OAAO,eACR;EACF,CAAA"}