@ks-digital/designsystem-angular 0.0.1-alpha.75 → 0.0.1-alpha.76
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,74 +1,200 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import * as i1 from
|
|
4
|
-
import {
|
|
5
|
-
import { Spinner } from
|
|
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
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, booleanAttribute, input } from "@angular/core";
|
|
3
|
+
import * as i1 from "@ks-digital/designsystem-angular/__internals";
|
|
4
|
+
import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
|
|
5
|
+
import { Spinner } from "@ks-digital/designsystem-angular/spinner";
|
|
6
|
+
var Button = class Button {
|
|
7
|
+
variant = input("primary", {
|
|
8
|
+
...ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {},
|
|
9
|
+
alias: "data-variant"
|
|
10
|
+
});
|
|
11
|
+
loading = input(false, {
|
|
12
|
+
...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
|
|
13
|
+
transform: booleanAttribute
|
|
14
|
+
});
|
|
15
|
+
disabled = input(false, {
|
|
16
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
17
|
+
transform: booleanAttribute
|
|
18
|
+
});
|
|
19
|
+
icon = input(false, {
|
|
20
|
+
...ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {},
|
|
21
|
+
transform: booleanAttribute
|
|
22
|
+
});
|
|
23
|
+
dataIcon = input(false, {
|
|
24
|
+
...ngDevMode ? { debugName: "dataIcon" } : /* istanbul ignore next */ {},
|
|
25
|
+
transform: booleanAttribute,
|
|
26
|
+
alias: "data-icon"
|
|
27
|
+
});
|
|
28
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
29
|
+
minVersion: "12.0.0",
|
|
30
|
+
version: "22.2.0",
|
|
31
|
+
ngImport: i0,
|
|
32
|
+
type: Button,
|
|
33
|
+
deps: [],
|
|
34
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
35
|
+
});
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
37
|
+
minVersion: "17.0.0",
|
|
38
|
+
version: "22.2.0",
|
|
39
|
+
type: Button,
|
|
40
|
+
isStandalone: true,
|
|
41
|
+
selector: "button[ksd-button], a[ksd-button]",
|
|
42
|
+
inputs: {
|
|
43
|
+
variant: {
|
|
44
|
+
classPropertyName: "variant",
|
|
45
|
+
publicName: "data-variant",
|
|
46
|
+
isSignal: true,
|
|
47
|
+
isRequired: false,
|
|
48
|
+
transformFunction: null
|
|
49
|
+
},
|
|
50
|
+
loading: {
|
|
51
|
+
classPropertyName: "loading",
|
|
52
|
+
publicName: "loading",
|
|
53
|
+
isSignal: true,
|
|
54
|
+
isRequired: false,
|
|
55
|
+
transformFunction: null
|
|
56
|
+
},
|
|
57
|
+
disabled: {
|
|
58
|
+
classPropertyName: "disabled",
|
|
59
|
+
publicName: "disabled",
|
|
60
|
+
isSignal: true,
|
|
61
|
+
isRequired: false,
|
|
62
|
+
transformFunction: null
|
|
63
|
+
},
|
|
64
|
+
icon: {
|
|
65
|
+
classPropertyName: "icon",
|
|
66
|
+
publicName: "icon",
|
|
67
|
+
isSignal: true,
|
|
68
|
+
isRequired: false,
|
|
69
|
+
transformFunction: null
|
|
70
|
+
},
|
|
71
|
+
dataIcon: {
|
|
72
|
+
classPropertyName: "dataIcon",
|
|
73
|
+
publicName: "data-icon",
|
|
74
|
+
isSignal: true,
|
|
75
|
+
isRequired: false,
|
|
76
|
+
transformFunction: null
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
host: {
|
|
80
|
+
properties: {
|
|
81
|
+
"attr.data-variant": "variant()",
|
|
82
|
+
"attr.data-icon": "icon() || dataIcon() || null",
|
|
83
|
+
"attr.disabled": "disabled() ? true : null",
|
|
84
|
+
"attr.aria-busy": "loading() ? true : null"
|
|
85
|
+
},
|
|
86
|
+
classAttribute: "ds-button"
|
|
87
|
+
},
|
|
88
|
+
hostDirectives: [{
|
|
89
|
+
directive: i1.HostSize,
|
|
90
|
+
inputs: ["data-size", "data-size"]
|
|
91
|
+
}, {
|
|
92
|
+
directive: i1.HostColor,
|
|
93
|
+
inputs: ["data-color", "data-color"]
|
|
94
|
+
}],
|
|
95
|
+
ngImport: i0,
|
|
96
|
+
template: `
|
|
34
97
|
@if (loading()) {
|
|
35
98
|
<ksd-spinner aria-hidden="true" />
|
|
36
99
|
}
|
|
37
100
|
@if (!(loading() && (icon() || dataIcon()))) {
|
|
38
101
|
<ng-content />
|
|
39
102
|
}
|
|
40
|
-
`,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
103
|
+
`,
|
|
104
|
+
isInline: true,
|
|
105
|
+
styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-glyph__size, 1.3em)}\n"],
|
|
106
|
+
dependencies: [{
|
|
107
|
+
kind: "component",
|
|
108
|
+
type: Spinner,
|
|
109
|
+
selector: "ksd-spinner",
|
|
110
|
+
inputs: [
|
|
111
|
+
"aria-label",
|
|
112
|
+
"aria-hidden",
|
|
113
|
+
"data-size"
|
|
114
|
+
]
|
|
115
|
+
}],
|
|
116
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
120
|
+
minVersion: "12.0.0",
|
|
121
|
+
version: "22.2.0",
|
|
122
|
+
ngImport: i0,
|
|
123
|
+
type: Button,
|
|
124
|
+
decorators: [{
|
|
125
|
+
type: Component,
|
|
126
|
+
args: [{
|
|
127
|
+
selector: "button[ksd-button], a[ksd-button]",
|
|
128
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
129
|
+
hostDirectives: [{
|
|
130
|
+
directive: HostSize,
|
|
131
|
+
inputs: ["data-size"]
|
|
132
|
+
}, {
|
|
133
|
+
directive: HostColor,
|
|
134
|
+
inputs: ["data-color"]
|
|
135
|
+
}],
|
|
136
|
+
imports: [Spinner],
|
|
137
|
+
host: {
|
|
138
|
+
class: "ds-button",
|
|
139
|
+
"[attr.data-variant]": "variant()",
|
|
140
|
+
"[attr.data-icon]": "icon() || dataIcon() || null",
|
|
141
|
+
"[attr.disabled]": "disabled() ? true : null",
|
|
142
|
+
"[attr.aria-busy]": "loading() ? true : null"
|
|
143
|
+
},
|
|
144
|
+
template: `
|
|
60
145
|
@if (loading()) {
|
|
61
146
|
<ksd-spinner aria-hidden="true" />
|
|
62
147
|
}
|
|
63
148
|
@if (!(loading() && (icon() || dataIcon()))) {
|
|
64
149
|
<ng-content />
|
|
65
150
|
}
|
|
66
|
-
`,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
151
|
+
`,
|
|
152
|
+
styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-glyph__size, 1.3em)}\n"]
|
|
153
|
+
}]
|
|
154
|
+
}],
|
|
155
|
+
propDecorators: {
|
|
156
|
+
variant: [{
|
|
157
|
+
type: i0.Input,
|
|
158
|
+
args: [{
|
|
159
|
+
isSignal: true,
|
|
160
|
+
alias: "data-variant",
|
|
161
|
+
required: false
|
|
162
|
+
}]
|
|
163
|
+
}],
|
|
164
|
+
loading: [{
|
|
165
|
+
type: i0.Input,
|
|
166
|
+
args: [{
|
|
167
|
+
isSignal: true,
|
|
168
|
+
alias: "loading",
|
|
169
|
+
required: false
|
|
170
|
+
}]
|
|
171
|
+
}],
|
|
172
|
+
disabled: [{
|
|
173
|
+
type: i0.Input,
|
|
174
|
+
args: [{
|
|
175
|
+
isSignal: true,
|
|
176
|
+
alias: "disabled",
|
|
177
|
+
required: false
|
|
178
|
+
}]
|
|
179
|
+
}],
|
|
180
|
+
icon: [{
|
|
181
|
+
type: i0.Input,
|
|
182
|
+
args: [{
|
|
183
|
+
isSignal: true,
|
|
184
|
+
alias: "icon",
|
|
185
|
+
required: false
|
|
186
|
+
}]
|
|
187
|
+
}],
|
|
188
|
+
dataIcon: [{
|
|
189
|
+
type: i0.Input,
|
|
190
|
+
args: [{
|
|
191
|
+
isSignal: true,
|
|
192
|
+
alias: "data-icon",
|
|
193
|
+
required: false
|
|
194
|
+
}]
|
|
195
|
+
}]
|
|
196
|
+
}
|
|
197
|
+
});
|
|
73
198
|
export { Button };
|
|
74
|
-
|
|
199
|
+
|
|
200
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-button.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","names":[],"sources":["../../../../packages/angular/button/src/button.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n} from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n selector: 'button[ksd-button], a[ksd-button]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n imports: [Spinner],\n host: {\n class: 'ds-button',\n '[attr.data-variant]': 'variant()',\n '[attr.data-icon]': 'icon() || dataIcon() || null',\n '[attr.disabled]': 'disabled() ? true : null',\n '[attr.aria-busy]': 'loading() ? true : null',\n },\n styles: `\n /* Ensure transcluded icons are aligned properly */\n :host ::ng-deep > * {\n display: inline-flex;\n }\n\n :host ::ng-deep ng-icon {\n font-size: var(--ng-glyph__size, 1.3em);\n }\n `,\n\n template: `\n @if (loading()) {\n <ksd-spinner aria-hidden=\"true\" />\n }\n @if (!(loading() && (icon() || dataIcon()))) {\n <ng-content />\n }\n `,\n})\nexport class Button {\n /**\n * Specify which variant to use\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n alias: 'data-variant',\n })\n\n /**\n * Toggle loading state.\n * Pass an element if you want to display a custom loader.\n *\n * @default false\n */\n readonly loading = input(false, { transform: booleanAttribute })\n\n /**\n * Disables element\n */\n readonly disabled = input(false, { transform: booleanAttribute })\n\n /**\n * If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.\n * @deprecated Use `data-icon` instead.\n */\n readonly icon = input(false, { transform: booleanAttribute })\n\n /** If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon. */\n readonly dataIcon = input(false, {\n transform: booleanAttribute,\n alias: 'data-icon',\n })\n}\n"],"mappings":";;;;;AAqDA,IAAa,SAAb,MAAa,OAAM;CAKR,UAAU,MAA4C,WAAS;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EACtE,OAAO;CAAc,CAAA;CASd,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAKpD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAMrD,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGjD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAC7B,WAAW;EACX,OAAO;CAAW,CAAA;CA/BT,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,kBAAA;IAAA,iBAAA;IAAA,kBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UATP;;;;;;;;EAOT,UAAA;EAAA,QAAA,CAAA,yGAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MA1BS;GAAO,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA4BN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAzClB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAmC,iBAC5B,wBAAwB;GAAM,gBAC/B,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GAAA,SACQ,CAAC,OAAO;GAAC,MACZ;IACJ,OAAO;IACP,uBAAuB;IACvB,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;GACrB;GAAA,UAYS;;;;;;;;GAOT,QAAA,CAAA,yGAAA;EAAA,CAAA"}
|
|
@@ -1,87 +1,137 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import * as i1 from
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, afterNextRender, inject, input } from "@angular/core";
|
|
3
|
+
import "@digdir/designsystemet-web/clickdelegatefor";
|
|
4
|
+
import * as i1 from "@ks-digital/designsystem-angular/__internals";
|
|
5
|
+
import { HostColor, HostSize, randomId } from "@ks-digital/designsystem-angular/__internals";
|
|
6
|
+
const ATTR_CLICKDELEGATE = "data-clickdelegatefor";
|
|
7
|
+
const SELECTOR_LINK = ":is(h1,h2,h3,h4,h5,h6) a";
|
|
8
|
+
const SELECTOR_SKIP = "a,button,label,details,dialog,[role=\"button\"],[popover],[contenteditable]";
|
|
9
|
+
var Card = class Card {
|
|
10
|
+
variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
11
|
+
el = inject(ElementRef);
|
|
12
|
+
destroyRef = inject(DestroyRef);
|
|
13
|
+
generatedId = `ksd-card-link-${randomId()}`;
|
|
14
|
+
originalId = null;
|
|
15
|
+
constructor() {
|
|
16
|
+
afterNextRender(() => {
|
|
17
|
+
const card = this.el.nativeElement;
|
|
18
|
+
const link = card.querySelector(SELECTOR_LINK);
|
|
19
|
+
const skip = !link || link.parentElement?.closest(SELECTOR_SKIP);
|
|
20
|
+
if (card.hasAttribute(ATTR_CLICKDELEGATE) || skip) return;
|
|
21
|
+
this.originalId = link.id || null;
|
|
22
|
+
link.id = link.id || this.generatedId;
|
|
23
|
+
card.setAttribute(ATTR_CLICKDELEGATE, link.id);
|
|
24
|
+
this.destroyRef.onDestroy(() => {
|
|
25
|
+
if (this.originalId) link.id = this.originalId;
|
|
26
|
+
else link.removeAttribute("id");
|
|
27
|
+
card.removeAttribute(ATTR_CLICKDELEGATE);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
32
|
+
minVersion: "12.0.0",
|
|
33
|
+
version: "22.2.0",
|
|
34
|
+
ngImport: i0,
|
|
35
|
+
type: Card,
|
|
36
|
+
deps: [],
|
|
37
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
38
|
+
});
|
|
39
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
40
|
+
minVersion: "17.1.0",
|
|
41
|
+
version: "22.2.0",
|
|
42
|
+
type: Card,
|
|
43
|
+
isStandalone: true,
|
|
44
|
+
selector: "[ksd-card]",
|
|
45
|
+
inputs: { variant: {
|
|
46
|
+
classPropertyName: "variant",
|
|
47
|
+
publicName: "variant",
|
|
48
|
+
isSignal: true,
|
|
49
|
+
isRequired: false,
|
|
50
|
+
transformFunction: null
|
|
51
|
+
} },
|
|
52
|
+
host: {
|
|
53
|
+
properties: { "attr.data-variant": "variant()" },
|
|
54
|
+
classAttribute: "ds-card"
|
|
55
|
+
},
|
|
56
|
+
hostDirectives: [{
|
|
57
|
+
directive: i1.HostSize,
|
|
58
|
+
inputs: ["data-size", "data-size"]
|
|
59
|
+
}, {
|
|
60
|
+
directive: i1.HostColor,
|
|
61
|
+
inputs: ["data-color", "data-color"]
|
|
62
|
+
}],
|
|
63
|
+
ngImport: i0
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
67
|
+
minVersion: "12.0.0",
|
|
68
|
+
version: "22.2.0",
|
|
69
|
+
ngImport: i0,
|
|
70
|
+
type: Card,
|
|
71
|
+
decorators: [{
|
|
72
|
+
type: Directive,
|
|
73
|
+
args: [{
|
|
74
|
+
selector: "[ksd-card]",
|
|
75
|
+
hostDirectives: [{
|
|
76
|
+
directive: HostSize,
|
|
77
|
+
inputs: ["data-size"]
|
|
78
|
+
}, {
|
|
79
|
+
directive: HostColor,
|
|
80
|
+
inputs: ["data-color"]
|
|
81
|
+
}],
|
|
82
|
+
host: {
|
|
83
|
+
class: "ds-card",
|
|
84
|
+
"[attr.data-variant]": "variant()"
|
|
85
|
+
}
|
|
86
|
+
}]
|
|
87
|
+
}],
|
|
88
|
+
ctorParameters: () => [],
|
|
89
|
+
propDecorators: { variant: [{
|
|
90
|
+
type: i0.Input,
|
|
91
|
+
args: [{
|
|
92
|
+
isSignal: true,
|
|
93
|
+
alias: "variant",
|
|
94
|
+
required: false
|
|
95
|
+
}]
|
|
96
|
+
}] }
|
|
97
|
+
});
|
|
98
|
+
var CardBlock = class CardBlock {
|
|
99
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
100
|
+
minVersion: "12.0.0",
|
|
101
|
+
version: "22.2.0",
|
|
102
|
+
ngImport: i0,
|
|
103
|
+
type: CardBlock,
|
|
104
|
+
deps: [],
|
|
105
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
106
|
+
});
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
108
|
+
minVersion: "14.0.0",
|
|
109
|
+
version: "22.2.0",
|
|
110
|
+
type: CardBlock,
|
|
111
|
+
isStandalone: true,
|
|
112
|
+
selector: "[ksd-card-block]",
|
|
113
|
+
host: { classAttribute: "ds-card__block" },
|
|
114
|
+
ngImport: i0,
|
|
115
|
+
template: `<ng-content />`,
|
|
116
|
+
isInline: true,
|
|
117
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
121
|
+
minVersion: "12.0.0",
|
|
122
|
+
version: "22.2.0",
|
|
123
|
+
ngImport: i0,
|
|
124
|
+
type: CardBlock,
|
|
125
|
+
decorators: [{
|
|
126
|
+
type: Component,
|
|
127
|
+
args: [{
|
|
128
|
+
selector: "[ksd-card-block]",
|
|
129
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
130
|
+
host: { class: "ds-card__block" },
|
|
131
|
+
template: `<ng-content />`
|
|
132
|
+
}]
|
|
133
|
+
}]
|
|
134
|
+
});
|
|
86
135
|
export { Card, CardBlock };
|
|
87
|
-
|
|
136
|
+
|
|
137
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-card.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-card.mjs","sources":["../../../../packages/angular/card/src/card.ts","../../../../packages/angular/card/src/card-block.ts"
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-card.mjs","names":[],"sources":["../../../../packages/angular/card/src/card.ts","../../../../packages/angular/card/src/card-block.ts"],"sourcesContent":["import {\n afterNextRender,\n DestroyRef,\n Directive,\n ElementRef,\n inject,\n input,\n} from '@angular/core'\nimport '@digdir/designsystemet-web/clickdelegatefor'\nimport {\n HostColor,\n HostSize,\n randomId,\n} from '@ks-digital/designsystem-angular/__internals'\n\nconst ATTR_CLICKDELEGATE = 'data-clickdelegatefor'\nconst SELECTOR_LINK = ':is(h1,h2,h3,h4,h5,h6) a'\nconst SELECTOR_SKIP =\n 'a,button,label,details,dialog,[role=\"button\"],[popover],[contenteditable]'\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[ksd-card]',\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-card',\n '[attr.data-variant]': 'variant()',\n },\n})\nexport class Card {\n /**\n * Change the background color of the card\n * @default 'default'\n */\n public variant = input<'tinted' | 'default'>('default')\n private el = inject<ElementRef<HTMLElement>>(ElementRef)\n private destroyRef = inject(DestroyRef)\n private generatedId = `ksd-card-link-${randomId()}`\n private originalId: string | null = null\n\n constructor() {\n afterNextRender(() => {\n const card = this.el.nativeElement\n const link = card.querySelector<HTMLAnchorElement>(SELECTOR_LINK)\n const skip = !link || link.parentElement?.closest(SELECTOR_SKIP)\n\n if (card.hasAttribute(ATTR_CLICKDELEGATE) || skip) return\n\n this.originalId = link.id || null\n link.id = link.id || this.generatedId\n card.setAttribute(ATTR_CLICKDELEGATE, link.id)\n\n this.destroyRef.onDestroy(() => {\n if (this.originalId) {\n link.id = this.originalId\n } else {\n link.removeAttribute('id')\n }\n card.removeAttribute(ATTR_CLICKDELEGATE)\n })\n })\n }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n selector: '[ksd-card-block]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'ds-card__block',\n },\n template: `<ng-content />`,\n})\nexport class CardBlock {}\n"],"mappings":";;;;;AAeA,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,gBACJ;AAoBF,IAAa,OAAb,MAAa,KAAI;CAKR,UAAU,MAA4B,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/C,KAAK,OAAgC,UAAU;CAC/C,aAAa,OAAO,UAAU;CAC9B,cAAc,iBAAiB,SAAQ;CACvC,aAA4B;CAEpC,cAAA;EACE,sBAAqB;GACnB,MAAM,OAAO,KAAK,GAAG;GACrB,MAAM,OAAO,KAAK,cAAiC,aAAa;GAChE,MAAM,OAAO,CAAC,QAAQ,KAAK,eAAe,QAAQ,aAAa;GAE/D,IAAI,KAAK,aAAa,kBAAkB,KAAK,MAAM;GAEnD,KAAK,aAAa,KAAK,MAAM;GAC7B,KAAK,KAAK,KAAK,MAAM,KAAK;GAC1B,KAAK,aAAa,oBAAoB,KAAK,EAAE;GAE7C,KAAK,WAAW,gBAAe;IAC7B,IAAI,KAAK,YACP,KAAK,KAAK,KAAK;SAEf,KAAK,gBAAgB,IAAI;IAE3B,KAAK,gBAAgB,kBAAkB;GACzC,CAAC;EACH,CAAC;CACH;CAhCW,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,QAAA,EAAA,SAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,qBAAA,YAAA;GAAA,gBAAA;EAAA;EAAA,gBAAA,CAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,aAAA,WAAA;EAAA,GAAA;GAAA,WAAA,GAAA;GAAA,QAAA,CAAA,cAAA,YAAA;EAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAJ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAI,YAAA,CAAA;EAlBhB,MAAA;EAAU,MAAA,CAAA;GAET,UAAU;GACV,gBAAgB,CACd;IACE,WAAW;IACX,QAAQ,CAAC,WAAW;GACrB,GACD;IACE,WAAW;IACX,QAAQ,CAAC,YAAY;GACtB,CACF;GACD,MAAM;IACJ,OAAO;IACP,uBAAuB;GACxB;EACF,CAAA;;;;;;;;;;;;AC3BD,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,iBAAA;EAAA,UAAA;EAAA,UAFV;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EARrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM,EACJ,OAAO,iBACR;GACD,UAAU;EACX,CAAA"}
|