@ndwnu/design-system 13.0.1 → 13.1.0
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/fesm2022/ndwnu-design-system.mjs +114 -59
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/package.json +2 -2
- package/styles/base/_colors.scss +8 -8
- package/styles/components/_datepicker.scss +30 -0
- package/styles/layout/_grid.scss +1 -1
- package/styles/storybook/overrides.css +16 -16
- package/styles/utils/classes.stories.ts +157 -0
- package/types/ndwnu-design-system.d.ts +28 -14
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndwnu/design-system",
|
|
3
|
-
"version": "13.0
|
|
3
|
+
"version": "13.1.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/cdk": "^21.0.0",
|
|
6
6
|
"@angular/common": "^21.0.0",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@github/markdown-toolbar-element": "2.2.3",
|
|
12
12
|
"dompurify": "^3.3.0",
|
|
13
13
|
"marked": "^17.0.1",
|
|
14
|
-
"@ndwnu/core": "3.0.
|
|
14
|
+
"@ndwnu/core": "3.0.1",
|
|
15
15
|
"ag-grid-angular": "^34.0.2",
|
|
16
16
|
"ag-grid-community": "^34.0.2",
|
|
17
17
|
"rxjs": "^7.8.0",
|
package/styles/base/_colors.scss
CHANGED
|
@@ -215,14 +215,14 @@
|
|
|
215
215
|
--ndw-color-primary-800: hsl(var(--_primary-800));
|
|
216
216
|
|
|
217
217
|
// Secondary
|
|
218
|
-
--_secondary-050:
|
|
219
|
-
--_secondary-100:
|
|
220
|
-
--_secondary-200:
|
|
221
|
-
--_secondary-300:
|
|
222
|
-
--_secondary-400:
|
|
223
|
-
--_secondary-500:
|
|
224
|
-
--_secondary-600:
|
|
225
|
-
--_secondary-700:
|
|
218
|
+
--_secondary-050: 339, 100%, 96%;
|
|
219
|
+
--_secondary-100: 333, 85%, 91%;
|
|
220
|
+
--_secondary-200: 327, 85%, 78%;
|
|
221
|
+
--_secondary-300: 324, 85%, 69%;
|
|
222
|
+
--_secondary-400: 320, 70%, 60%;
|
|
223
|
+
--_secondary-500: 312, 50%, 41%;
|
|
224
|
+
--_secondary-600: 312, 50%, 32%;
|
|
225
|
+
--_secondary-700: 312, 100%, 20%;
|
|
226
226
|
|
|
227
227
|
--ndw-color-secondary-050: hsl(var(--_secondary-050));
|
|
228
228
|
--ndw-color-secondary-100: hsl(var(--_secondary-100));
|
|
@@ -89,3 +89,33 @@
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
+
|
|
93
|
+
ndw-calendar.show-week-numbers {
|
|
94
|
+
--week-number-size: 16px;
|
|
95
|
+
|
|
96
|
+
padding-left: 1rem;
|
|
97
|
+
|
|
98
|
+
thead {
|
|
99
|
+
tr::before {
|
|
100
|
+
content: '';
|
|
101
|
+
width: var(--week-number-size);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
tbody {
|
|
106
|
+
tr[data-week-number] {
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Display week numbers in the calendar
|
|
111
|
+
tr[data-week-number]::before {
|
|
112
|
+
content: attr(data-week-number);
|
|
113
|
+
position: absolute;
|
|
114
|
+
top: calc(50% - 9px);
|
|
115
|
+
left: calc(-1 * var(--week-number-size));
|
|
116
|
+
height: 8px;
|
|
117
|
+
font-size: var(--ndw-font-size-sm);
|
|
118
|
+
color: var(--ndw-color-grey-400);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
package/styles/layout/_grid.scss
CHANGED
|
@@ -114,7 +114,7 @@ $breakpoints: (
|
|
|
114
114
|
container-name: ndw-c-grid;
|
|
115
115
|
|
|
116
116
|
@mixin ndw-c-col-span($size, $important: false) {
|
|
117
|
-
$flag: if($important, '!important', '');
|
|
117
|
+
$flag: if(sass($important), '!important', '');
|
|
118
118
|
flex: 0 0 calc((100% / 12) * #{$size}) #{$flag};
|
|
119
119
|
max-width: calc((100% / 12) * #{$size}) #{$flag};
|
|
120
120
|
}
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
--ndw-color-primary-hover: var(--ndw-color-primary-600);
|
|
43
43
|
--ndw-color-primary-active: var(--ndw-color-primary-700);
|
|
44
44
|
|
|
45
|
-
--_secondary-050:
|
|
46
|
-
--_secondary-100:
|
|
47
|
-
--_secondary-200:
|
|
48
|
-
--_secondary-300:
|
|
49
|
-
--_secondary-400:
|
|
50
|
-
--_secondary-500:
|
|
51
|
-
--_secondary-600:
|
|
52
|
-
--_secondary-700:
|
|
45
|
+
--_secondary-050: 209, 100%, 96%;
|
|
46
|
+
--_secondary-100: 209, 85%, 91%;
|
|
47
|
+
--_secondary-200: 209, 85%, 78%;
|
|
48
|
+
--_secondary-300: 209, 85%, 69%;
|
|
49
|
+
--_secondary-400: 208, 100%, 46%;
|
|
50
|
+
--_secondary-500: 208, 100%, 41%;
|
|
51
|
+
--_secondary-600: 209, 100%, 32%;
|
|
52
|
+
--_secondary-700: 209, 100%, 18%;
|
|
53
53
|
|
|
54
54
|
--ndw-color-secondary-050: hsl(var(--_secondary-050));
|
|
55
55
|
--ndw-color-secondary-100: hsl(var(--_secondary-100));
|
|
@@ -248,14 +248,14 @@
|
|
|
248
248
|
--ndw-color-primary-700: hsl(var(--_primary-700));
|
|
249
249
|
--ndw-color-primary-800: hsl(var(--_primary-800));
|
|
250
250
|
|
|
251
|
-
--_secondary-050:
|
|
252
|
-
--_secondary-100:
|
|
253
|
-
--_secondary-200:
|
|
254
|
-
--_secondary-300:
|
|
255
|
-
--_secondary-400:
|
|
256
|
-
--_secondary-500:
|
|
257
|
-
--_secondary-600:
|
|
258
|
-
--_secondary-700:
|
|
251
|
+
--_secondary-050: 339, 100%, 96%;
|
|
252
|
+
--_secondary-100: 333, 85%, 91%;
|
|
253
|
+
--_secondary-200: 327, 85%, 78%;
|
|
254
|
+
--_secondary-300: 324, 85%, 69%;
|
|
255
|
+
--_secondary-400: 320, 70%, 60%;
|
|
256
|
+
--_secondary-500: 312, 50%, 41%;
|
|
257
|
+
--_secondary-600: 312, 50%, 32%;
|
|
258
|
+
--_secondary-700: 312, 100%, 20%;
|
|
259
259
|
|
|
260
260
|
--ndw-color-secondary-050: hsl(var(--_secondary-050));
|
|
261
261
|
--ndw-color-secondary-100: hsl(var(--_secondary-100));
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/angular';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
|
|
5
|
+
* This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
|
|
6
|
+
* Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
|
|
7
|
+
*
|
|
8
|
+
* Below is a representation of the util classes in our design system. <br>
|
|
9
|
+
* Are you missing a util class? Then please contact us so we can improve this.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const meta: Meta = {
|
|
13
|
+
title: 'Core/Util classes',
|
|
14
|
+
tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
|
|
15
|
+
parameters: {
|
|
16
|
+
viewport: {
|
|
17
|
+
defaultViewport: 'mobile',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
render: () => ({
|
|
21
|
+
template: `
|
|
22
|
+
<style>
|
|
23
|
+
.demo-box {
|
|
24
|
+
background: var(--ndw-color-primary-050);
|
|
25
|
+
border: 1px solid var(--ndw-color-primary-500);
|
|
26
|
+
padding: 0.5rem;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-container {
|
|
31
|
+
background: var(--ndw-color-grey-100);
|
|
32
|
+
border: 1px dashed var(--ndw-color-grey-500);
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
|
|
36
|
+
<div class="d-flex flex-column gap-4 p-3">
|
|
37
|
+
|
|
38
|
+
<!-- Display & Flex -->
|
|
39
|
+
<section>
|
|
40
|
+
<h3>Display & Flex</h3>
|
|
41
|
+
<div class="demo-container d-flex gap-2 p-2">
|
|
42
|
+
<div class="demo-box">d-flex</div>
|
|
43
|
+
<div class="demo-box">gap-2</div>
|
|
44
|
+
<div class="demo-box">flex-row</div>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<!-- Flex direction -->
|
|
49
|
+
<section>
|
|
50
|
+
<h3>Flex direction</h3>
|
|
51
|
+
<div class="demo-container d-flex flex-column gap-1 p-2">
|
|
52
|
+
<div class="demo-box">d-flex</div>
|
|
53
|
+
<div class="demo-box">flex-column</div>
|
|
54
|
+
<div class="demo-box">gap-1</div>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<!-- Justify content -->
|
|
59
|
+
<section>
|
|
60
|
+
<h3>Justify content</h3>
|
|
61
|
+
<div class="demo-container d-flex justify-content-between p-2">
|
|
62
|
+
<div class="demo-box">justify-content-between</div>
|
|
63
|
+
<div class="demo-box">justify-content-between</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="demo-container d-flex justify-content-start p-2">
|
|
66
|
+
<div class="demo-box">justify-content-start</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="demo-container d-flex justify-content-end p-2">
|
|
69
|
+
<div class="demo-box">justify-content-end</div>
|
|
70
|
+
</div>
|
|
71
|
+
</section>
|
|
72
|
+
|
|
73
|
+
<!-- Align items -->
|
|
74
|
+
<section>
|
|
75
|
+
<h3>Align items</h3>
|
|
76
|
+
<div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
|
|
77
|
+
<div class="demo-box">align-items-center</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
|
|
80
|
+
<div class="demo-box">align-items-start</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
|
|
83
|
+
<div class="demo-box">align-items-end</div>
|
|
84
|
+
</div>
|
|
85
|
+
</section>
|
|
86
|
+
|
|
87
|
+
<!-- Spacing utilities -->
|
|
88
|
+
<section>
|
|
89
|
+
<h3>Spacing (margin, padding, gap)</h3>
|
|
90
|
+
|
|
91
|
+
<div class="demo-container p-3">
|
|
92
|
+
<div class="demo-box mb-2">mb-2</div>
|
|
93
|
+
<div class="demo-box mt-2">mt-2</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="demo-container p-3">
|
|
96
|
+
<div class="p-2">
|
|
97
|
+
<div class="demo-box">p-2</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="pt-2">
|
|
100
|
+
<div class="demo-box">pt-2</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="pb-2">
|
|
103
|
+
<div class="demo-box">pb-2</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
|
|
108
|
+
<div class="demo-box">m-auto</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="demo-container d-flex gap-3 p-2 mt-2">
|
|
112
|
+
<div class="demo-box">gap-3</div>
|
|
113
|
+
<div class="demo-box">gap-3</div>
|
|
114
|
+
<div class="demo-box">gap-3</div>
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<!-- Width / height -->
|
|
119
|
+
<section>
|
|
120
|
+
<h3>Width & Height</h3>
|
|
121
|
+
<div class="demo-container p-2" style="height: 100px;">
|
|
122
|
+
<div class="demo-box w-100 h-100">
|
|
123
|
+
w-100 / h-100
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="demo-container p-2" style="height: 100px;width: 200px;">
|
|
127
|
+
<div class="demo-box w-auto h-auto">
|
|
128
|
+
w-auto h-auto
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</section>
|
|
132
|
+
|
|
133
|
+
<!-- Text utilities -->
|
|
134
|
+
<section>
|
|
135
|
+
<h3>Text alignment</h3>
|
|
136
|
+
<div class="demo-container p-2">
|
|
137
|
+
<div class="text-start">
|
|
138
|
+
<span class="demo-box">text-start</span>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="text-center">
|
|
141
|
+
<span class="demo-box">text-center</span>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="text-end">
|
|
144
|
+
<span class="demo-box">text-end</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
150
|
+
`,
|
|
151
|
+
}),
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export default meta;
|
|
155
|
+
type Story = StoryObj;
|
|
156
|
+
|
|
157
|
+
export const Default: Story = {};
|
|
@@ -79,6 +79,7 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
|
|
|
79
79
|
readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
|
|
80
80
|
readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
|
|
81
81
|
readonly elevated: _angular_core.InputSignal<boolean>;
|
|
82
|
+
readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
|
|
82
83
|
protected internalDateEnabledFilter: Signal<(date: Date | null) => boolean>;
|
|
83
84
|
protected readonly calendar: Signal<MatCalendar<any> | undefined>;
|
|
84
85
|
protected readonly calendarElement: Signal<ElementRef<HTMLElement> | undefined>;
|
|
@@ -89,8 +90,17 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
|
|
|
89
90
|
ngOnDestroy(): void;
|
|
90
91
|
private addMouseMoveListener;
|
|
91
92
|
private removeMouseMoveListener;
|
|
93
|
+
private disconnectCalendarRowMutationObserver;
|
|
92
94
|
private addRangePreviewClasses;
|
|
93
95
|
private removeRangePreviewClasses;
|
|
96
|
+
/**
|
|
97
|
+
* Adds a data attribute with the week number to each calendar row for styling purposes.
|
|
98
|
+
* The week number is calculated based on the date of the first button in the row, which represents the first day of that week.
|
|
99
|
+
*
|
|
100
|
+
* A mutation observer is used to handle the dynamic rendering of calendar rows by Angular Material,
|
|
101
|
+
* ensuring that the week numbers are correctly assigned whenever the calendar view changes (e.g., when navigating between months).
|
|
102
|
+
*/
|
|
103
|
+
private addWeekNumberAttributes;
|
|
94
104
|
protected onDateSelected(date: Date | Date[] | null, toggle?: boolean): void;
|
|
95
105
|
protected onMonthSelected(date: Date): void;
|
|
96
106
|
writeValue(value: Date | Date[] | null): void;
|
|
@@ -98,7 +108,7 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
|
|
|
98
108
|
registerOnTouched(_fn: () => void): void;
|
|
99
109
|
setDisabledState?(isDisabled: boolean): void;
|
|
100
110
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
|
|
101
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ndw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
111
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ndw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
102
112
|
}
|
|
103
113
|
|
|
104
114
|
type PopoverPosition = 'nextToTriggerButton' | 'overTriggerButton';
|
|
@@ -159,6 +169,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
|
|
|
159
169
|
readonly maxDate: _angular_core.InputSignal<Date | null>;
|
|
160
170
|
readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
|
|
161
171
|
readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
|
|
172
|
+
readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
|
|
162
173
|
readonly input: _angular_core.Signal<InputDirective>;
|
|
163
174
|
protected readonly popoverTrigger: _angular_core.Signal<PopoverTriggerDirective>;
|
|
164
175
|
protected readonly value: _angular_core.ModelSignal<Date[]>;
|
|
@@ -174,7 +185,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
|
|
|
174
185
|
registerOnTouched(_fn: () => void): void;
|
|
175
186
|
setDisabledState?(isDisabled: boolean): void;
|
|
176
187
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
|
|
177
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
|
|
188
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
|
|
178
189
|
}
|
|
179
190
|
|
|
180
191
|
declare class ErrorComponent {
|
|
@@ -571,7 +582,7 @@ declare class AlertComponent {
|
|
|
571
582
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ndw-alert", never, { "actionable": { "alias": "actionable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
|
|
572
583
|
}
|
|
573
584
|
|
|
574
|
-
type AvatarStatus = 'approved' | 'open' | 'none';
|
|
585
|
+
type AvatarStatus = 'approved' | 'declined' | 'open' | 'none';
|
|
575
586
|
type AvatarColor = 'default' | 'blue' | 'purple' | 'red' | 'green' | 'yellow' | 'orange';
|
|
576
587
|
|
|
577
588
|
declare class AvatarComponent {
|
|
@@ -1125,7 +1136,7 @@ declare const MAP_LAYER_IMAGES: {
|
|
|
1125
1136
|
};
|
|
1126
1137
|
declare const MAP_LAYERS: Record<string, MapDisplayOption>;
|
|
1127
1138
|
|
|
1128
|
-
type MapLegendOptionType = 'image' | 'line' | 'circle' | 'polygon' | 'icon';
|
|
1139
|
+
type MapLegendOptionType = 'image' | 'line' | 'circle' | 'polygon' | 'icon' | 'area';
|
|
1129
1140
|
interface BaseMapLegendOption {
|
|
1130
1141
|
type: MapLegendOptionType;
|
|
1131
1142
|
label: string;
|
|
@@ -1139,6 +1150,7 @@ interface LineMapLegendOption extends BaseMapLegendOption {
|
|
|
1139
1150
|
type: 'line';
|
|
1140
1151
|
color: string;
|
|
1141
1152
|
fillMode: 'solid' | 'dashed';
|
|
1153
|
+
outline?: boolean;
|
|
1142
1154
|
}
|
|
1143
1155
|
interface CircleMapLegendOption extends BaseMapLegendOption {
|
|
1144
1156
|
type: 'circle';
|
|
@@ -1148,11 +1160,15 @@ interface PolygonMapLegendOption extends BaseMapLegendOption {
|
|
|
1148
1160
|
type: 'polygon';
|
|
1149
1161
|
color: string;
|
|
1150
1162
|
}
|
|
1163
|
+
interface AreaMapLegendOption extends BaseMapLegendOption {
|
|
1164
|
+
type: 'area';
|
|
1165
|
+
color: string;
|
|
1166
|
+
}
|
|
1151
1167
|
interface IconMapLegendOption extends BaseMapLegendOption {
|
|
1152
1168
|
type: 'icon';
|
|
1153
1169
|
iconName: string;
|
|
1154
1170
|
}
|
|
1155
|
-
type MapLegendOption = ImageMapLegendOption | LineMapLegendOption | CircleMapLegendOption | PolygonMapLegendOption | IconMapLegendOption;
|
|
1171
|
+
type MapLegendOption = ImageMapLegendOption | LineMapLegendOption | CircleMapLegendOption | PolygonMapLegendOption | AreaMapLegendOption | IconMapLegendOption;
|
|
1156
1172
|
interface MapLegendOptionGroup {
|
|
1157
1173
|
label?: string;
|
|
1158
1174
|
options: MapLegendOption[];
|
|
@@ -1222,6 +1238,7 @@ interface CheckboxData {
|
|
|
1222
1238
|
value: boolean;
|
|
1223
1239
|
icon?: string;
|
|
1224
1240
|
image?: Image;
|
|
1241
|
+
disabled?: boolean;
|
|
1225
1242
|
}
|
|
1226
1243
|
|
|
1227
1244
|
interface SelectAllText {
|
|
@@ -1230,7 +1247,6 @@ interface SelectAllText {
|
|
|
1230
1247
|
}
|
|
1231
1248
|
|
|
1232
1249
|
declare class MultiSelectComponent {
|
|
1233
|
-
readonly dropdownTrigger: _angular_core.Signal<PopoverTriggerDirective>;
|
|
1234
1250
|
readonly buttonText: _angular_core.InputSignal<string>;
|
|
1235
1251
|
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
1236
1252
|
readonly prefixIcon: _angular_core.InputSignal<string>;
|
|
@@ -1240,22 +1256,20 @@ declare class MultiSelectComponent {
|
|
|
1240
1256
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1241
1257
|
readonly selectAmountHidden: _angular_core.InputSignal<boolean>;
|
|
1242
1258
|
readonly selectAllText: _angular_core.InputSignal<SelectAllText>;
|
|
1259
|
+
readonly allowSelectAll: _angular_core.InputSignal<boolean>;
|
|
1243
1260
|
readonly dataSource: _angular_core.ModelSignal<CheckboxData[]>;
|
|
1244
|
-
protected readonly lastCheckedElementId: _angular_core.ModelSignal<string | number | null | undefined>;
|
|
1245
|
-
protected readonly searchInputValue: _angular_core.ModelSignal<string>;
|
|
1246
1261
|
protected readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
1262
|
+
protected readonly searchInputValue: _angular_core.WritableSignal<string>;
|
|
1247
1263
|
protected readonly dataSourceSorted: _angular_core.WritableSignal<CheckboxData[]>;
|
|
1264
|
+
protected readonly dataSourceFiltered: _angular_core.Signal<CheckboxData[]>;
|
|
1265
|
+
protected readonly lastCheckedElementId: _angular_core.Signal<string | number | null>;
|
|
1248
1266
|
readonly selectAmount: _angular_core.Signal<number>;
|
|
1249
1267
|
readonly noSearchResults: _angular_core.Signal<boolean>;
|
|
1250
|
-
filterSearch(value: string): boolean;
|
|
1251
1268
|
searchInputChanged(event: Event): void;
|
|
1252
1269
|
checkboxChanged(id: string | number): void;
|
|
1253
1270
|
toggleSelectAll(selectAll?: boolean): void;
|
|
1254
|
-
isOpenChanged(isOpen: boolean): void;
|
|
1255
|
-
private determineLastCheckedElement;
|
|
1256
|
-
private sortDataSource;
|
|
1257
1271
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
|
|
1258
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAmountHidden": { "alias": "selectAmountHidden"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "
|
|
1272
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAmountHidden": { "alias": "selectAmountHidden"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "allowSelectAll": { "alias": "allowSelectAll"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; }, never, never, true, never>;
|
|
1259
1273
|
}
|
|
1260
1274
|
|
|
1261
1275
|
declare class PillComponent extends CorePillComponent {
|
|
@@ -1564,4 +1578,4 @@ declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
|
|
|
1564
1578
|
}
|
|
1565
1579
|
|
|
1566
1580
|
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
|
|
1567
|
-
export type { AlertType, AvatarColor, AvatarStatus, BannerType, BaseMapLegendOption, CheckType, CheckboxData, CircleMapLegendOption, DatepickerMode, DisplayOptionDirection, DisplayOptionType, EditBarPosition, EditBarWidth, Environment, FileUploadText, HoverableListItemAction, IconMapLegendOption, ImageMapLegendOption, LineMapLegendOption, MapBackgroundOption, MapBackgrounds, MapButtonIcon, MapDisplayOption, MapLegendOption, MapLegendOptionGroup, MapLegendOptionType, MapLegendViewMode, MenuItem, ModalSize, NdwStepOptions, OptionGroupMode, PolygonMapLegendOption, PopoverPosition, RequiredElement, SelectAllText, ShepherdButton, StepImage, SubMenuItem, SummaryActionsView, SwitcherOption, SwitcherValue, Theme, ToastDimensions, TourOptions };
|
|
1581
|
+
export type { AlertType, AreaMapLegendOption, AvatarColor, AvatarStatus, BannerType, BaseMapLegendOption, CheckType, CheckboxData, CircleMapLegendOption, DatepickerMode, DisplayOptionDirection, DisplayOptionType, EditBarPosition, EditBarWidth, Environment, FileUploadText, HoverableListItemAction, IconMapLegendOption, ImageMapLegendOption, LineMapLegendOption, MapBackgroundOption, MapBackgrounds, MapButtonIcon, MapDisplayOption, MapLegendOption, MapLegendOptionGroup, MapLegendOptionType, MapLegendViewMode, MenuItem, ModalSize, NdwStepOptions, OptionGroupMode, PolygonMapLegendOption, PopoverPosition, RequiredElement, SelectAllText, ShepherdButton, StepImage, SubMenuItem, SummaryActionsView, SwitcherOption, SwitcherValue, Theme, ToastDimensions, TourOptions };
|