@ks-digital/designsystem-angular 0.0.1-alpha.75 → 0.0.1-alpha.77
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.
- package/.npmignore +25 -0
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs +148 -78
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-alert.mjs +59 -33
- package/fesm2022/ks-digital-designsystem-angular-alert.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs +79 -43
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-button.mjs +187 -61
- package/fesm2022/ks-digital-designsystem-angular-button.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-card.mjs +136 -86
- package/fesm2022/ks-digital-designsystem-angular-card.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs +76 -42
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-details.mjs +148 -64
- package/fesm2022/ks-digital-designsystem-angular-details.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-dialog.mjs +106 -48
- package/fesm2022/ks-digital-designsystem-angular-dialog.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-dropdown.mjs +147 -45
- package/fesm2022/ks-digital-designsystem-angular-dropdown.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-error-summary.mjs +83 -48
- package/fesm2022/ks-digital-designsystem-angular-error-summary.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs +495 -210
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs +69 -39
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-link.mjs +59 -30
- package/fesm2022/ks-digital-designsystem-angular-link.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs +324 -157
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-paragraph.mjs +41 -24
- package/fesm2022/ks-digital-designsystem-angular-paragraph.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs +147 -45
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-search.mjs +266 -144
- package/fesm2022/ks-digital-designsystem-angular-search.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-skeleton.mjs +78 -34
- package/fesm2022/ks-digital-designsystem-angular-skeleton.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs +132 -53
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs +561 -297
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-table.mjs +219 -76
- package/fesm2022/ks-digital-designsystem-angular-table.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-tabs.mjs +269 -120
- package/fesm2022/ks-digital-designsystem-angular-tabs.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs +84 -37
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs +42 -24
- package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular.mjs +1 -6
- package/fesm2022/ks-digital-designsystem-angular.mjs.map +1 -1
- package/package.json +6 -5
- package/types/ks-digital-designsystem-angular-__internals.d.ts +51 -37
- package/types/ks-digital-designsystem-angular-alert.d.ts +18 -9
- package/types/ks-digital-designsystem-angular-breadcrumbs.d.ts +29 -13
- package/types/ks-digital-designsystem-angular-button.d.ts +67 -32
- package/types/ks-digital-designsystem-angular-card.d.ts +38 -23
- package/types/ks-digital-designsystem-angular-chip.d.ts +30 -15
- package/types/ks-digital-designsystem-angular-details.d.ts +32 -18
- package/types/ks-digital-designsystem-angular-dialog.d.ts +40 -18
- package/types/ks-digital-designsystem-angular-dropdown.d.ts +44 -13
- package/types/ks-digital-designsystem-angular-error-summary.d.ts +17 -14
- package/types/ks-digital-designsystem-angular-forms.d.ts +136 -71
- package/types/ks-digital-designsystem-angular-heading.d.ts +22 -19
- package/types/ks-digital-designsystem-angular-link.d.ts +18 -9
- package/types/ks-digital-designsystem-angular-pagination.d.ts +131 -75
- package/types/ks-digital-designsystem-angular-paragraph.d.ts +5 -8
- package/types/ks-digital-designsystem-angular-popover.d.ts +44 -13
- package/types/ks-digital-designsystem-angular-search.d.ts +62 -38
- package/types/ks-digital-designsystem-angular-skeleton.d.ts +18 -15
- package/types/ks-digital-designsystem-angular-spinner.d.ts +42 -23
- package/types/ks-digital-designsystem-angular-suggestion.d.ts +182 -116
- package/types/ks-digital-designsystem-angular-table.d.ts +67 -42
- package/types/ks-digital-designsystem-angular-tabs.d.ts +85 -56
- package/types/ks-digital-designsystem-angular-tag.d.ts +30 -15
- package/types/ks-digital-designsystem-angular-validation-message.d.ts +5 -8
- package/types/ks-digital-designsystem-angular.d.ts +2 -2
|
@@ -1,130 +1,222 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import { pagination } from
|
|
4
|
-
import * as i1 from
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Directive, computed, input, numberAttribute, output } from "@angular/core";
|
|
3
|
+
import { pagination } from "@digdir/designsystemet-web/ds-pagination";
|
|
4
|
+
import * as i1 from "@ks-digital/designsystem-angular/__internals";
|
|
5
|
+
import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
|
|
6
|
+
var PaginationButton = class PaginationButton {
|
|
7
|
+
page = input(null, {
|
|
8
|
+
...ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {},
|
|
9
|
+
alias: "ksdPaginationButton"
|
|
10
|
+
});
|
|
11
|
+
pageNumber = computed(() => {
|
|
12
|
+
const value = this.page();
|
|
13
|
+
if (typeof value === "number") return value || null;
|
|
14
|
+
if (typeof value === "object" && value?.type === "page") return value.page;
|
|
15
|
+
return null;
|
|
16
|
+
}, ...ngDevMode ? [{ debugName: "pageNumber" }] : /* istanbul ignore next */ []);
|
|
17
|
+
isCurrent = computed(() => {
|
|
18
|
+
const value = this.page();
|
|
19
|
+
return typeof value === "object" && value?.type === "page" && value.current;
|
|
20
|
+
}, ...ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []);
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
22
|
+
minVersion: "12.0.0",
|
|
23
|
+
version: "22.2.1",
|
|
24
|
+
ngImport: i0,
|
|
25
|
+
type: PaginationButton,
|
|
26
|
+
deps: [],
|
|
27
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
28
|
+
});
|
|
29
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
30
|
+
minVersion: "17.1.0",
|
|
31
|
+
version: "22.2.1",
|
|
32
|
+
type: PaginationButton,
|
|
33
|
+
isStandalone: true,
|
|
34
|
+
selector: "[ksdPaginationButton]",
|
|
35
|
+
inputs: { page: {
|
|
36
|
+
classPropertyName: "page",
|
|
37
|
+
publicName: "ksdPaginationButton",
|
|
38
|
+
isSignal: true,
|
|
39
|
+
isRequired: false,
|
|
40
|
+
transformFunction: null
|
|
41
|
+
} },
|
|
42
|
+
host: {
|
|
43
|
+
attributes: { "data-variant": "tertiary" },
|
|
44
|
+
properties: {
|
|
45
|
+
"attr.data-page": "pageNumber()",
|
|
46
|
+
"attr.aria-current": "isCurrent() ? \"true\" : null"
|
|
47
|
+
},
|
|
48
|
+
classAttribute: "ds-button"
|
|
49
|
+
},
|
|
50
|
+
ngImport: i0
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
54
|
+
minVersion: "12.0.0",
|
|
55
|
+
version: "22.2.1",
|
|
56
|
+
ngImport: i0,
|
|
57
|
+
type: PaginationButton,
|
|
58
|
+
decorators: [{
|
|
59
|
+
type: Directive,
|
|
60
|
+
args: [{
|
|
61
|
+
selector: "[ksdPaginationButton]",
|
|
62
|
+
host: {
|
|
63
|
+
class: "ds-button",
|
|
64
|
+
"data-variant": "tertiary",
|
|
65
|
+
"[attr.data-page]": "pageNumber()",
|
|
66
|
+
"[attr.aria-current]": "isCurrent() ? \"true\" : null"
|
|
67
|
+
}
|
|
68
|
+
}]
|
|
69
|
+
}],
|
|
70
|
+
propDecorators: { page: [{
|
|
71
|
+
type: i0.Input,
|
|
72
|
+
args: [{
|
|
73
|
+
isSignal: true,
|
|
74
|
+
alias: "ksdPaginationButton",
|
|
75
|
+
required: false
|
|
76
|
+
}]
|
|
77
|
+
}] }
|
|
78
|
+
});
|
|
43
79
|
const isModifiedClick = (e) => e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
|
|
44
|
-
class Pagination {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
80
|
+
var Pagination = class Pagination {
|
|
81
|
+
current = input.required({
|
|
82
|
+
...ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {},
|
|
83
|
+
transform: numberAttribute
|
|
84
|
+
});
|
|
85
|
+
total = input.required({
|
|
86
|
+
...ngDevMode ? { debugName: "total" } : /* istanbul ignore next */ {},
|
|
87
|
+
transform: numberAttribute
|
|
88
|
+
});
|
|
89
|
+
ariaLabel = input("Bla i sider", {
|
|
90
|
+
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
91
|
+
alias: "aria-label"
|
|
92
|
+
});
|
|
93
|
+
show = input(7, {
|
|
94
|
+
...ngDevMode ? { debugName: "show" } : /* istanbul ignore next */ {},
|
|
95
|
+
transform: (value) => numberAttribute(value, 7)
|
|
96
|
+
});
|
|
97
|
+
href = input(...ngDevMode ? [void 0, { debugName: "href" }] : /* istanbul ignore next */ []);
|
|
98
|
+
previousLabel = input("Forrige", ...ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []);
|
|
99
|
+
nextLabel = input("Neste", ...ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []);
|
|
100
|
+
pageLabel = input("Side %d", ...ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []);
|
|
101
|
+
pageClicked = output();
|
|
102
|
+
pages = computed(() => {
|
|
103
|
+
const result = pagination({
|
|
104
|
+
current: this.current(),
|
|
105
|
+
total: this.total(),
|
|
106
|
+
show: this.show()
|
|
107
|
+
});
|
|
108
|
+
return {
|
|
109
|
+
pages: result.pages.map((p) => p.page === 0 ? {
|
|
110
|
+
type: "ellipsis",
|
|
111
|
+
key: p.key
|
|
112
|
+
} : {
|
|
113
|
+
type: "page",
|
|
114
|
+
page: p.page,
|
|
115
|
+
current: p.current === "page",
|
|
116
|
+
key: p.key
|
|
117
|
+
}),
|
|
118
|
+
prev: result.prev,
|
|
119
|
+
next: result.next
|
|
120
|
+
};
|
|
121
|
+
}, ...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
|
|
122
|
+
hrefFor(page) {
|
|
123
|
+
return page ? this.href()?.replace("%d", String(page)) ?? null : null;
|
|
124
|
+
}
|
|
125
|
+
labelFor(page) {
|
|
126
|
+
return this.pageLabel().replace("%d", String(page));
|
|
127
|
+
}
|
|
128
|
+
onClick(e) {
|
|
129
|
+
const root = e.currentTarget;
|
|
130
|
+
const target = e.target.closest("button,a");
|
|
131
|
+
if (!target || !root.contains(target)) return;
|
|
132
|
+
if (target.matches("a[href]") && isModifiedClick(e)) return;
|
|
133
|
+
const page = Number(target.getAttribute("data-page"));
|
|
134
|
+
if (!page || page === this.current()) return;
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
this.pageClicked.emit(page);
|
|
137
|
+
}
|
|
138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
139
|
+
minVersion: "12.0.0",
|
|
140
|
+
version: "22.2.1",
|
|
141
|
+
ngImport: i0,
|
|
142
|
+
type: Pagination,
|
|
143
|
+
deps: [],
|
|
144
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
145
|
+
});
|
|
146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
147
|
+
minVersion: "17.0.0",
|
|
148
|
+
version: "22.2.1",
|
|
149
|
+
type: Pagination,
|
|
150
|
+
isStandalone: true,
|
|
151
|
+
selector: "ksd-pagination",
|
|
152
|
+
inputs: {
|
|
153
|
+
current: {
|
|
154
|
+
classPropertyName: "current",
|
|
155
|
+
publicName: "current",
|
|
156
|
+
isSignal: true,
|
|
157
|
+
isRequired: true,
|
|
158
|
+
transformFunction: null
|
|
159
|
+
},
|
|
160
|
+
total: {
|
|
161
|
+
classPropertyName: "total",
|
|
162
|
+
publicName: "total",
|
|
163
|
+
isSignal: true,
|
|
164
|
+
isRequired: true,
|
|
165
|
+
transformFunction: null
|
|
166
|
+
},
|
|
167
|
+
ariaLabel: {
|
|
168
|
+
classPropertyName: "ariaLabel",
|
|
169
|
+
publicName: "aria-label",
|
|
170
|
+
isSignal: true,
|
|
171
|
+
isRequired: false,
|
|
172
|
+
transformFunction: null
|
|
173
|
+
},
|
|
174
|
+
show: {
|
|
175
|
+
classPropertyName: "show",
|
|
176
|
+
publicName: "show",
|
|
177
|
+
isSignal: true,
|
|
178
|
+
isRequired: false,
|
|
179
|
+
transformFunction: null
|
|
180
|
+
},
|
|
181
|
+
href: {
|
|
182
|
+
classPropertyName: "href",
|
|
183
|
+
publicName: "href",
|
|
184
|
+
isSignal: true,
|
|
185
|
+
isRequired: false,
|
|
186
|
+
transformFunction: null
|
|
187
|
+
},
|
|
188
|
+
previousLabel: {
|
|
189
|
+
classPropertyName: "previousLabel",
|
|
190
|
+
publicName: "previousLabel",
|
|
191
|
+
isSignal: true,
|
|
192
|
+
isRequired: false,
|
|
193
|
+
transformFunction: null
|
|
194
|
+
},
|
|
195
|
+
nextLabel: {
|
|
196
|
+
classPropertyName: "nextLabel",
|
|
197
|
+
publicName: "nextLabel",
|
|
198
|
+
isSignal: true,
|
|
199
|
+
isRequired: false,
|
|
200
|
+
transformFunction: null
|
|
201
|
+
},
|
|
202
|
+
pageLabel: {
|
|
203
|
+
classPropertyName: "pageLabel",
|
|
204
|
+
publicName: "pageLabel",
|
|
205
|
+
isSignal: true,
|
|
206
|
+
isRequired: false,
|
|
207
|
+
transformFunction: null
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
outputs: { pageClicked: "pageClicked" },
|
|
211
|
+
hostDirectives: [{
|
|
212
|
+
directive: i1.HostSize,
|
|
213
|
+
inputs: ["data-size", "data-size"]
|
|
214
|
+
}, {
|
|
215
|
+
directive: i1.HostColor,
|
|
216
|
+
inputs: ["data-color", "data-color"]
|
|
217
|
+
}],
|
|
218
|
+
ngImport: i0,
|
|
219
|
+
template: `
|
|
128
220
|
<ds-pagination
|
|
129
221
|
class="ds-pagination"
|
|
130
222
|
[attr.aria-label]="ariaLabel()"
|
|
@@ -197,19 +289,30 @@ class Pagination {
|
|
|
197
289
|
</ol>
|
|
198
290
|
</ng-content>
|
|
199
291
|
</ds-pagination>
|
|
200
|
-
`,
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
292
|
+
`,
|
|
293
|
+
isInline: true,
|
|
294
|
+
dependencies: [{
|
|
295
|
+
kind: "directive",
|
|
296
|
+
type: PaginationButton,
|
|
297
|
+
selector: "[ksdPaginationButton]",
|
|
298
|
+
inputs: ["ksdPaginationButton"]
|
|
299
|
+
}],
|
|
300
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
301
|
+
});
|
|
302
|
+
};
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
304
|
+
minVersion: "12.0.0",
|
|
305
|
+
version: "22.2.1",
|
|
306
|
+
ngImport: i0,
|
|
307
|
+
type: Pagination,
|
|
308
|
+
decorators: [{
|
|
309
|
+
type: Component,
|
|
310
|
+
args: [{
|
|
311
|
+
selector: "ksd-pagination",
|
|
312
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
313
|
+
imports: [PaginationButton],
|
|
314
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
315
|
+
template: `
|
|
213
316
|
<ds-pagination
|
|
214
317
|
class="ds-pagination"
|
|
215
318
|
[attr.aria-label]="ariaLabel()"
|
|
@@ -283,22 +386,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
283
386
|
</ng-content>
|
|
284
387
|
</ds-pagination>
|
|
285
388
|
`,
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
389
|
+
hostDirectives: [{
|
|
390
|
+
directive: HostSize,
|
|
391
|
+
inputs: ["data-size"]
|
|
392
|
+
}, {
|
|
393
|
+
directive: HostColor,
|
|
394
|
+
inputs: ["data-color"]
|
|
395
|
+
}]
|
|
396
|
+
}]
|
|
397
|
+
}],
|
|
398
|
+
propDecorators: {
|
|
399
|
+
current: [{
|
|
400
|
+
type: i0.Input,
|
|
401
|
+
args: [{
|
|
402
|
+
isSignal: true,
|
|
403
|
+
alias: "current",
|
|
404
|
+
required: true
|
|
405
|
+
}]
|
|
406
|
+
}],
|
|
407
|
+
total: [{
|
|
408
|
+
type: i0.Input,
|
|
409
|
+
args: [{
|
|
410
|
+
isSignal: true,
|
|
411
|
+
alias: "total",
|
|
412
|
+
required: true
|
|
413
|
+
}]
|
|
414
|
+
}],
|
|
415
|
+
ariaLabel: [{
|
|
416
|
+
type: i0.Input,
|
|
417
|
+
args: [{
|
|
418
|
+
isSignal: true,
|
|
419
|
+
alias: "aria-label",
|
|
420
|
+
required: false
|
|
421
|
+
}]
|
|
422
|
+
}],
|
|
423
|
+
show: [{
|
|
424
|
+
type: i0.Input,
|
|
425
|
+
args: [{
|
|
426
|
+
isSignal: true,
|
|
427
|
+
alias: "show",
|
|
428
|
+
required: false
|
|
429
|
+
}]
|
|
430
|
+
}],
|
|
431
|
+
href: [{
|
|
432
|
+
type: i0.Input,
|
|
433
|
+
args: [{
|
|
434
|
+
isSignal: true,
|
|
435
|
+
alias: "href",
|
|
436
|
+
required: false
|
|
437
|
+
}]
|
|
438
|
+
}],
|
|
439
|
+
previousLabel: [{
|
|
440
|
+
type: i0.Input,
|
|
441
|
+
args: [{
|
|
442
|
+
isSignal: true,
|
|
443
|
+
alias: "previousLabel",
|
|
444
|
+
required: false
|
|
445
|
+
}]
|
|
446
|
+
}],
|
|
447
|
+
nextLabel: [{
|
|
448
|
+
type: i0.Input,
|
|
449
|
+
args: [{
|
|
450
|
+
isSignal: true,
|
|
451
|
+
alias: "nextLabel",
|
|
452
|
+
required: false
|
|
453
|
+
}]
|
|
454
|
+
}],
|
|
455
|
+
pageLabel: [{
|
|
456
|
+
type: i0.Input,
|
|
457
|
+
args: [{
|
|
458
|
+
isSignal: true,
|
|
459
|
+
alias: "pageLabel",
|
|
460
|
+
required: false
|
|
461
|
+
}]
|
|
462
|
+
}],
|
|
463
|
+
pageClicked: [{
|
|
464
|
+
type: i0.Output,
|
|
465
|
+
args: ["pageClicked"]
|
|
466
|
+
}]
|
|
467
|
+
}
|
|
468
|
+
});
|
|
303
469
|
export { Pagination, PaginationButton };
|
|
304
|
-
|
|
470
|
+
|
|
471
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-pagination.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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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"}
|
|
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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"}
|
|
@@ -1,25 +1,42 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import { ChangeDetectionStrategy, Component } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from "@angular/core";
|
|
3
|
+
var Paragraph = class Paragraph {
|
|
4
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
5
|
+
minVersion: "12.0.0",
|
|
6
|
+
version: "22.2.1",
|
|
7
|
+
ngImport: i0,
|
|
8
|
+
type: Paragraph,
|
|
9
|
+
deps: [],
|
|
10
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
11
|
+
});
|
|
12
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
13
|
+
minVersion: "14.0.0",
|
|
14
|
+
version: "22.2.1",
|
|
15
|
+
type: Paragraph,
|
|
16
|
+
isStandalone: true,
|
|
17
|
+
selector: "p[ksd-paragraph]",
|
|
18
|
+
host: { classAttribute: "ds-paragraph" },
|
|
19
|
+
ngImport: i0,
|
|
20
|
+
template: `<ng-content />`,
|
|
21
|
+
isInline: true,
|
|
22
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
26
|
+
minVersion: "12.0.0",
|
|
27
|
+
version: "22.2.1",
|
|
28
|
+
ngImport: i0,
|
|
29
|
+
type: Paragraph,
|
|
30
|
+
decorators: [{
|
|
31
|
+
type: Component,
|
|
32
|
+
args: [{
|
|
33
|
+
selector: "p[ksd-paragraph]",
|
|
34
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
|
+
template: `<ng-content />`,
|
|
36
|
+
host: { class: "ds-paragraph" }
|
|
37
|
+
}]
|
|
38
|
+
}]
|
|
39
|
+
});
|
|
24
40
|
export { Paragraph };
|
|
25
|
-
|
|
41
|
+
|
|
42
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-paragraph.mjs.map
|