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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ks-digital-designsystem-angular-pagination.mjs +217 -56
  2. package/fesm2022/ks-digital-designsystem-angular-pagination.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ks-digital-designsystem-angular-pagination.d.ts +35 -9
package/fesm2022/ks-digital-designsystem-angular-pagination.mjs CHANGED
@@ -1,9 +1,46 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, numberAttribute, output, computed, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, inject, ElementRef, DestroyRef, Directive } from '@angular/core';
2
+ import { input, computed, Directive, numberAttribute, output, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
3
3
  import { pagination } from '@digdir/designsystemet-web/ds-pagination';
4
4
  import * as i1 from '@ks-digital/designsystem-angular/__internals';
5
5
  import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
6
6
 
7
+ class PaginationButton {
8
+ /**
9
+ * The page this control targets. Pass an entry from `pages().pages`, or a
10
+ * number for the previous/next controls.
11
+ */
12
+ page = input(null, { ...(ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {}), alias: 'ksdPaginationButton' });
13
+ pageNumber = computed(() => {
14
+ const value = this.page();
15
+ if (typeof value === 'number')
16
+ return value || null;
17
+ if (typeof value === 'object' && value?.type === 'page')
18
+ return value.page;
19
+ return null;
20
+ }, ...(ngDevMode ? [{ debugName: "pageNumber" }] : /* istanbul ignore next */ []));
21
+ isCurrent = computed(() => {
22
+ const value = this.page();
23
+ return typeof value === 'object' && value?.type === 'page' && value.current;
24
+ }, ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
25
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
26
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", 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 });
27
+ }
28
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, decorators: [{
29
+ type: Directive,
30
+ args: [{
31
+ selector: '[ksdPaginationButton]',
32
+ host: {
33
+ class: 'ds-button',
34
+ // The pagination CSS restores the primary look for [aria-current=true].
35
+ 'data-variant': 'tertiary',
36
+ '[attr.data-page]': 'pageNumber()',
37
+ '[attr.aria-current]': 'isCurrent() ? "true" : null',
38
+ },
39
+ }]
40
+ }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "ksdPaginationButton", required: false }] }] } });
41
+
42
+ /** Open-in-new-tab and similar, which the browser should handle itself. */
43
+ const isModifiedClick = (e) => e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
7
44
  class Pagination {
8
45
  /**
9
46
  * The current page
@@ -20,11 +57,25 @@ class Pagination {
20
57
  /**
21
58
  * How many pages to show. Default is 7
22
59
  */
23
- show = input(7, { ...(ngDevMode ? { debugName: "show" } : /* istanbul ignore next */ {}), transform: numberAttribute });
60
+ show = input(7, { ...(ngDevMode ? { debugName: "show" } : /* istanbul ignore next */ {}),
61
+ // numberAttribute defaults to NaN, which would collapse the page list.
62
+ transform: (value) => numberAttribute(value, 7) });
24
63
  /**
25
64
  * E.g if "?page=%d" all the links will set href to "?page=1", "?page=2".
26
65
  */
27
66
  href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
67
+ /**
68
+ * Label for the previous button. Only used when no content is projected.
69
+ */
70
+ previousLabel = input('Forrige', ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
71
+ /**
72
+ * Label for the next button. Only used when no content is projected.
73
+ */
74
+ nextLabel = input('Neste', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
75
+ /**
76
+ * Screen reader label for each page. Only used when no content is projected.
77
+ */
78
+ pageLabel = input('Side %d', ...(ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []));
28
79
  /**
29
80
  * Emits the page number when a page is clicked
30
81
  */
@@ -39,58 +90,197 @@ class Pagination {
39
90
  show: this.show(),
40
91
  });
41
92
  return {
42
- pages: result.pages.map((p) => ({
43
- page: p.page,
44
- current: p.current === 'page',
45
- key: p.key,
46
- })),
93
+ pages: result.pages.map((p) =>
94
+ // The page helper uses 0 as the ellipsis sentinel.
95
+ p.page === 0
96
+ ? { type: 'ellipsis', key: p.key }
97
+ : {
98
+ type: 'page',
99
+ page: p.page,
100
+ current: p.current === 'page',
101
+ key: p.key,
102
+ }),
47
103
  prev: result.prev,
48
104
  next: result.next,
49
105
  };
50
106
  }, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
107
+ hrefFor(page) {
108
+ return page ? (this.href()?.replace('%d', String(page)) ?? null) : null;
109
+ }
110
+ labelFor(page) {
111
+ return this.pageLabel().replace('%d', String(page));
112
+ }
51
113
  onClick(e) {
52
- const target = e.target.closest('[aria-label]');
53
- if (!target)
114
+ const root = e.currentTarget;
115
+ const target = e.target.closest('button,a');
116
+ if (!target || !root.contains(target))
54
117
  return;
55
- const label = target.getAttribute('aria-label');
56
- if (!label)
118
+ if (target.matches('a[href]') && isModifiedClick(e))
57
119
  return;
58
- const page = Number(label);
59
- if (!isNaN(page) && page !== this.current()) {
60
- e.preventDefault();
61
- this.pageClicked.emit(page);
62
- }
120
+ const page = Number(target.getAttribute('data-page'));
121
+ if (!page || page === this.current())
122
+ return;
123
+ e.preventDefault();
124
+ this.pageClicked.emit(page);
63
125
  }
64
126
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
65
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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 } }, outputs: { pageClicked: "pageClicked" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
127
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
66
128
  <ds-pagination
67
129
  class="ds-pagination"
68
- [attr.data-current]="current()"
69
- [attr.data-total]="total()"
70
- [attr.data-href]="href()"
71
130
  [attr.aria-label]="ariaLabel()"
72
131
  (click)="onClick($event)"
73
132
  >
74
- <ng-content />
133
+ <ng-content>
134
+ <ol>
135
+ <li>
136
+ @if (href()) {
137
+ <a
138
+ [ksdPaginationButton]="pages().prev"
139
+ [attr.href]="hrefFor(pages().prev)"
140
+ [attr.aria-hidden]="pages().prev ? null : 'true'"
141
+ >{{ previousLabel() }}</a
142
+ >
143
+ } @else {
144
+ <button
145
+ type="button"
146
+ [ksdPaginationButton]="pages().prev"
147
+ [disabled]="!pages().prev"
148
+ [attr.aria-hidden]="pages().prev ? null : 'true'"
149
+ >
150
+ {{ previousLabel() }}
151
+ </button>
152
+ }
153
+ </li>
154
+ @for (page of pages().pages; track page.key) {
155
+ @if (page.type === 'page') {
156
+ <li>
157
+ @if (href()) {
158
+ <a
159
+ [ksdPaginationButton]="page"
160
+ [attr.href]="hrefFor(page.page)"
161
+ [attr.aria-label]="labelFor(page.page)"
162
+ >{{ page.page }}</a
163
+ >
164
+ } @else {
165
+ <button
166
+ type="button"
167
+ [ksdPaginationButton]="page"
168
+ [attr.aria-label]="labelFor(page.page)"
169
+ >
170
+ {{ page.page }}
171
+ </button>
172
+ }
173
+ </li>
174
+ } @else {
175
+ <li></li>
176
+ }
177
+ }
178
+ <li>
179
+ @if (href()) {
180
+ <a
181
+ [ksdPaginationButton]="pages().next"
182
+ [attr.href]="hrefFor(pages().next)"
183
+ [attr.aria-hidden]="pages().next ? null : 'true'"
184
+ >{{ nextLabel() }}</a
185
+ >
186
+ } @else {
187
+ <button
188
+ type="button"
189
+ [ksdPaginationButton]="pages().next"
190
+ [disabled]="!pages().next"
191
+ [attr.aria-hidden]="pages().next ? null : 'true'"
192
+ >
193
+ {{ nextLabel() }}
194
+ </button>
195
+ }
196
+ </li>
197
+ </ol>
198
+ </ng-content>
75
199
  </ds-pagination>
76
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
200
+ `, isInline: true, dependencies: [{ kind: "directive", type: PaginationButton, selector: "[ksdPaginationButton]", inputs: ["ksdPaginationButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
77
201
  }
78
202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Pagination, decorators: [{
79
203
  type: Component,
80
204
  args: [{
81
205
  selector: 'ksd-pagination',
82
206
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
207
+ imports: [PaginationButton],
83
208
  changeDetection: ChangeDetectionStrategy.OnPush,
209
+ // Deliberately no data-current/data-total. Those put <ds-pagination> into the
210
+ // mode where it rewrites aria-label, role, tabindex, value and href on every
211
+ // button/a child. We render the accessible markup ourselves instead.
84
212
  template: `
85
213
  <ds-pagination
86
214
  class="ds-pagination"
87
- [attr.data-current]="current()"
88
- [attr.data-total]="total()"
89
- [attr.data-href]="href()"
90
215
  [attr.aria-label]="ariaLabel()"
91
216
  (click)="onClick($event)"
92
217
  >
93
- <ng-content />
218
+ <ng-content>
219
+ <ol>
220
+ <li>
221
+ @if (href()) {
222
+ <a
223
+ [ksdPaginationButton]="pages().prev"
224
+ [attr.href]="hrefFor(pages().prev)"
225
+ [attr.aria-hidden]="pages().prev ? null : 'true'"
226
+ >{{ previousLabel() }}</a
227
+ >
228
+ } @else {
229
+ <button
230
+ type="button"
231
+ [ksdPaginationButton]="pages().prev"
232
+ [disabled]="!pages().prev"
233
+ [attr.aria-hidden]="pages().prev ? null : 'true'"
234
+ >
235
+ {{ previousLabel() }}
236
+ </button>
237
+ }
238
+ </li>
239
+ @for (page of pages().pages; track page.key) {
240
+ @if (page.type === 'page') {
241
+ <li>
242
+ @if (href()) {
243
+ <a
244
+ [ksdPaginationButton]="page"
245
+ [attr.href]="hrefFor(page.page)"
246
+ [attr.aria-label]="labelFor(page.page)"
247
+ >{{ page.page }}</a
248
+ >
249
+ } @else {
250
+ <button
251
+ type="button"
252
+ [ksdPaginationButton]="page"
253
+ [attr.aria-label]="labelFor(page.page)"
254
+ >
255
+ {{ page.page }}
256
+ </button>
257
+ }
258
+ </li>
259
+ } @else {
260
+ <li></li>
261
+ }
262
+ }
263
+ <li>
264
+ @if (href()) {
265
+ <a
266
+ [ksdPaginationButton]="pages().next"
267
+ [attr.href]="hrefFor(pages().next)"
268
+ [attr.aria-hidden]="pages().next ? null : 'true'"
269
+ >{{ nextLabel() }}</a
270
+ >
271
+ } @else {
272
+ <button
273
+ type="button"
274
+ [ksdPaginationButton]="pages().next"
275
+ [disabled]="!pages().next"
276
+ [attr.aria-hidden]="pages().next ? null : 'true'"
277
+ >
278
+ {{ nextLabel() }}
279
+ </button>
280
+ }
281
+ </li>
282
+ </ol>
283
+ </ng-content>
94
284
  </ds-pagination>
95
285
  `,
96
286
  hostDirectives: [
@@ -104,36 +294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
104
294
  },
105
295
  ],
106
296
  }]
107
- }], 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 }] }], pageClicked: [{ type: i0.Output, args: ["pageClicked"] }] } });
108
-
109
- class PaginationButton {
110
- el = inject(ElementRef);
111
- destroyRef = inject(DestroyRef);
112
- constructor() {
113
- const observer = new MutationObserver(() => this.updateVariant());
114
- observer.observe(this.el.nativeElement, {
115
- attributes: true,
116
- attributeFilter: ['aria-current'],
117
- });
118
- this.updateVariant();
119
- this.destroyRef.onDestroy(() => observer.disconnect());
120
- }
121
- updateVariant() {
122
- const isCurrent = this.el.nativeElement.getAttribute('aria-current') === 'true';
123
- this.el.nativeElement.setAttribute('data-variant', isCurrent ? 'primary' : 'tertiary');
124
- }
125
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
126
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: PaginationButton, isStandalone: true, selector: "[ksdPaginationButton]", host: { classAttribute: "ds-button" }, ngImport: i0 });
127
- }
128
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, decorators: [{
129
- type: Directive,
130
- args: [{
131
- selector: '[ksdPaginationButton]',
132
- host: {
133
- class: 'ds-button',
134
- },
135
- }]
136
- }], ctorParameters: () => [] });
297
+ }], 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"] }] } });
137
298
 
138
299
  /**
139
300
  * Generated bundle index. Do not edit.
package/fesm2022/ks-digital-designsystem-angular-pagination.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ks-digital-designsystem-angular-pagination.mjs","sources":["../../../../packages/angular/pagination/src/pagination.ts","../../../../packages/angular/pagination/src/pagination.button.ts","../../../../packages/angular/pagination/src/ks-digital-designsystem-angular-pagination.ts"],"sourcesContent":["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'\n\nexport interface PaginationPage {\n page: number\n current: boolean\n key: string\n}\n\nexport interface PaginationPages {\n pages: PaginationPage[]\n prev: number\n next: number\n}\n\n@Component({\n selector: 'ksd-pagination',\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <ds-pagination\n class=\"ds-pagination\"\n [attr.data-current]=\"current()\"\n [attr.data-total]=\"total()\"\n [attr.data-href]=\"href()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n >\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, { transform: numberAttribute })\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 * 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 page: p.page,\n current: p.current === 'page',\n key: p.key,\n })),\n prev: result.prev,\n next: result.next,\n }\n })\n\n protected onClick(e: Event) {\n const target = (e.target as HTMLElement).closest('[aria-label]')\n if (!target) return\n\n const label = target.getAttribute('aria-label')\n if (!label) return\n\n const page = Number(label)\n if (!isNaN(page) && page !== this.current()) {\n e.preventDefault()\n this.pageClicked.emit(page)\n }\n }\n}\n","import { DestroyRef, Directive, ElementRef, inject } from '@angular/core'\n\n@Directive({\n selector: '[ksdPaginationButton]',\n host: {\n class: 'ds-button',\n },\n})\nexport class PaginationButton {\n private el = inject<ElementRef<HTMLElement>>(ElementRef)\n private destroyRef = inject(DestroyRef)\n\n constructor() {\n const observer = new MutationObserver(() => this.updateVariant())\n observer.observe(this.el.nativeElement, {\n attributes: true,\n attributeFilter: ['aria-current'],\n })\n this.updateVariant()\n\n this.destroyRef.onDestroy(() => observer.disconnect())\n }\n\n private updateVariant() {\n const isCurrent =\n this.el.nativeElement.getAttribute('aria-current') === 'true'\n this.el.nativeElement.setAttribute(\n 'data-variant',\n isCurrent ? 'primary' : 'tertiary',\n )\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ks-digital-designsystem-angular-pagination.mjs","sources":["../../../../packages/angular/pagination/src/pagination.button.ts","../../../../packages/angular/pagination/src/pagination.ts","../../../../packages/angular/pagination/src/ks-digital-designsystem-angular-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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "https://github.com/ks-no/designsystem.git",
6
6
  "directory": "packages/angular"
7
7
  },
8
- "version": "0.0.1-alpha.71",
8
+ "version": "0.0.1-alpha.72",
9
9
  "license": "MIT",
10
10
  "private": false,
11
11
  "publishConfig": {
package/types/ks-digital-designsystem-angular-pagination.d.ts CHANGED
@@ -1,11 +1,18 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import * as i1 from '@ks-digital/designsystem-angular/__internals';
3
3
 
4
- interface PaginationPage {
4
+ /**
5
+ * A page entry, or an ellipsis placeholder that renders as an empty `<li>`.
6
+ */
7
+ type PaginationPage = {
8
+ type: 'page';
5
9
  page: number;
6
10
  current: boolean;
7
11
  key: string;
8
- }
12
+ } | {
13
+ type: 'ellipsis';
14
+ key: string;
15
+ };
9
16
  interface PaginationPages {
10
17
  pages: PaginationPage[];
11
18
  prev: number;
@@ -32,6 +39,18 @@ declare class Pagination {
32
39
  * E.g if "?page=%d" all the links will set href to "?page=1", "?page=2".
33
40
  */
34
41
  readonly href: _angular_core.InputSignal<string | undefined>;
42
+ /**
43
+ * Label for the previous button. Only used when no content is projected.
44
+ */
45
+ readonly previousLabel: _angular_core.InputSignal<string>;
46
+ /**
47
+ * Label for the next button. Only used when no content is projected.
48
+ */
49
+ readonly nextLabel: _angular_core.InputSignal<string>;
50
+ /**
51
+ * Screen reader label for each page. Only used when no content is projected.
52
+ */
53
+ readonly pageLabel: _angular_core.InputSignal<string>;
35
54
  /**
36
55
  * Emits the page number when a page is clicked
37
56
  */
@@ -40,18 +59,25 @@ declare class Pagination {
40
59
  * Exposes pagination data for consumer use
41
60
  */
42
61
  readonly pages: _angular_core.Signal<PaginationPages>;
43
- protected onClick(e: Event): void;
62
+ protected hrefFor(page: number): string | null;
63
+ protected labelFor(page: number): string;
64
+ protected onClick(e: MouseEvent): void;
44
65
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
45
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "ksd-pagination", never, { "current": { "alias": "current"; "required": true; "isSignal": true; }; "total": { "alias": "total"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "pageClicked": "pageClicked"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
66
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "ksd-pagination", never, { "current": { "alias": "current"; "required": true; "isSignal": true; }; "total": { "alias": "total"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "pageLabel": { "alias": "pageLabel"; "required": false; "isSignal": true; }; }, { "pageClicked": "pageClicked"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
46
67
  }
47
68
 
69
+ /** Accepts a string so the valueless `<button ksdPaginationButton>` form still type-checks. */
70
+ type PageInput = PaginationPage | number | string | null | undefined;
48
71
  declare class PaginationButton {
49
- private el;
50
- private destroyRef;
51
- constructor();
52
- private updateVariant;
72
+ /**
73
+ * The page this control targets. Pass an entry from `pages().pages`, or a
74
+ * number for the previous/next controls.
75
+ */
76
+ readonly page: _angular_core.InputSignal<PageInput>;
77
+ protected readonly pageNumber: _angular_core.Signal<number | null>;
78
+ protected readonly isCurrent: _angular_core.Signal<boolean>;
53
79
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationButton, never>;
54
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PaginationButton, "[ksdPaginationButton]", never, {}, {}, never, never, true, never>;
80
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PaginationButton, "[ksdPaginationButton]", never, { "page": { "alias": "ksdPaginationButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
55
81
  }
56
82
 
57
83
  export { Pagination, PaginationButton };