@dso-design-system/ui 0.1.0 → 0.1.2

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 (12) hide show
  1. package/esm2022/lib/badge/badge.directive.mjs +68 -0
  2. package/esm2022/public-api.mjs +4 -2
  3. package/fesm2022/dso-design-system-ui.mjs +68 -71
  4. package/fesm2022/dso-design-system-ui.mjs.map +1 -1
  5. package/lib/assets/icons/sprite.svg +48 -48
  6. package/lib/badge/badge.directive.d.ts +15 -0
  7. package/lib/styles/_styles.scss +124 -0
  8. package/lib/styles/_variables.scss +571 -0
  9. package/package.json +1 -1
  10. package/public-api.d.ts +3 -1
  11. package/esm2022/lib/directives/truncate.directive.mjs +0 -71
  12. package/lib/directives/truncate.directive.d.ts +0 -23
package/lib/styles/_variables.scss ADDED
@@ -0,0 +1,571 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $base-color-palette-blue-50: #f6fbfd;
5
+ $base-color-palette-blue-100: #e0f0f9;
6
+ $base-color-palette-blue-200: #b1dbef;
7
+ $base-color-palette-blue-300: #84c5e6;
8
+ $base-color-palette-blue-400: #53afdc;
9
+ $base-color-palette-blue-500: #1993d0;
10
+ $base-color-palette-blue-600: #0077b2;
11
+ $base-color-palette-blue-700: #006596;
12
+ $base-color-palette-blue-800: #005179;
13
+ $base-color-palette-blue-900: #003c5a;
14
+ $base-color-palette-green-50: #f7fbeb;
15
+ $base-color-palette-green-100: #dff3dc;
16
+ $base-color-palette-green-200: #b0e1aa;
17
+ $base-color-palette-green-300: #7fce7a;
18
+ $base-color-palette-green-400: #69ad65;
19
+ $base-color-palette-green-500: #51834e;
20
+ $base-color-palette-green-600: #42673f;
21
+ $base-color-palette-green-700: #365233;
22
+ $base-color-palette-green-800: #2a3e28;
23
+ $base-color-palette-green-900: #1e2b1d;
24
+ $base-color-palette-red-50: #fffbfb;
25
+ $base-color-palette-red-100: #ffe9e5;
26
+ $base-color-palette-red-200: #ffc7bf;
27
+ $base-color-palette-red-300: #fca69c;
28
+ $base-color-palette-red-400: #f37a73;
29
+ $base-color-palette-red-500: #ba5a56;
30
+ $base-color-palette-red-600: #934846;
31
+ $base-color-palette-red-700: #743a3a;
32
+ $base-color-palette-red-800: #572d2d;
33
+ $base-color-palette-red-900: #3b2020;
34
+ $base-color-palette-gray-50: #f9fafb;
35
+ $base-color-palette-gray-100: #f3f4f6;
36
+ $base-color-palette-gray-200: #e5e7eb;
37
+ $base-color-palette-gray-300: #d1d5db;
38
+ $base-color-palette-gray-400: #9ca3af;
39
+ $base-color-palette-gray-500: #6b7280;
40
+ $base-color-palette-gray-700: #374151;
41
+ $base-color-palette-gray-900: #111827;
42
+ $base-opacity-0: 0;
43
+ $base-opacity-10: 0.1;
44
+ $base-opacity-30: 0.3;
45
+ $base-opacity-40: 0.4;
46
+ $base-opacity-50: 0.5;
47
+ $base-spacing-spacing-1: 4px;
48
+ $base-spacing-spacing-2: 8px;
49
+ $base-spacing-spacing-3: 12px;
50
+ $base-spacing-spacing-4: 16px;
51
+ $base-spacing-spacing-5: 24px;
52
+ $base-spacing-spacing-6: 32px;
53
+ $base-spacing-spacing-7: 36px;
54
+ $base-font-size-font-size-10: 10px;
55
+ $base-font-size-font-size-12: 12px;
56
+ $base-font-size-font-size-16: 16px;
57
+ $base-font-size-font-size-20: 20px;
58
+ $base-font-size-font-size-24: 24px;
59
+ $base-font-weight-400: 400;
60
+ $base-font-weight-500: 500;
61
+ $base-font-weight-700: 700;
62
+ $base-font-line-height-line-height-1: 1.2;
63
+ $base-font-line-height-line-height-2: 1.4;
64
+ $base-font-line-height-line-height-3: 1.6;
65
+ $base-radius-radius-1: 4px;
66
+ $base-radius-radius-2: 8px;
67
+ $base-radius-radius-3: 12px;
68
+ $base-radius-radius-full: 9999px;
69
+ $semantic-color-bg-primary: #1993d0;
70
+ $semantic-color-bg-primary-hover: #1993d0;
71
+ $semantic-color-bg-primary-active: #1993d0;
72
+ $semantic-color-bg-primary-focus: #1993d0;
73
+ $semantic-color-bg-secondary: #51834e;
74
+ $semantic-color-bg-secondary-hover: #51834e;
75
+ $semantic-color-bg-secondary-active: #51834e;
76
+ $semantic-color-bg-secondary-focus: #51834e;
77
+ $semantic-color-bg-surface: #f9fafb;
78
+ $semantic-color-bg-surface-hover: #f9fafb;
79
+ $semantic-color-bg-surface-active: #f9fafb;
80
+ $semantic-color-bg-surface-focus: #f9fafb;
81
+ $semantic-color-bg-surface-alt: #f3f4f6;
82
+ $semantic-color-bg-surface-alt-hover: #f3f4f6;
83
+ $semantic-color-bg-surface-alt-active: #f3f4f6;
84
+ $semantic-color-bg-surface-alt-focus: #f3f4f6;
85
+ $semantic-color-bg-danger: #ba5a56;
86
+ $semantic-color-bg-danger-hover: #ba5a56;
87
+ $semantic-color-bg-danger-active: #ba5a56;
88
+ $semantic-color-bg-danger-focus: #ba5a56;
89
+ $semantic-color-bg-success: #51834e;
90
+ $semantic-color-bg-success-hover: #51834e;
91
+ $semantic-color-bg-success-active: #51834e;
92
+ $semantic-color-bg-success-focus: #51834e;
93
+ $semantic-color-bg-warning: #fca69c;
94
+ $semantic-color-bg-warning-hover: #fca69c;
95
+ $semantic-color-bg-warning-active: #fca69c;
96
+ $semantic-color-bg-warning-focus: #fca69c;
97
+ $semantic-color-bg-info: #b1dbef;
98
+ $semantic-color-bg-info-hover: #b1dbef;
99
+ $semantic-color-bg-info-active: #b1dbef;
100
+ $semantic-color-bg-info-focus: #b1dbef;
101
+ $semantic-color-text-primary: #111827;
102
+ $semantic-color-text-primary-hover: #111827;
103
+ $semantic-color-text-primary-active: #111827;
104
+ $semantic-color-text-primary-focus: #111827;
105
+ $semantic-color-text-secondary: #374151;
106
+ $semantic-color-text-secondary-hover: #374151;
107
+ $semantic-color-text-secondary-active: #374151;
108
+ $semantic-color-text-secondary-focus: #374151;
109
+ $semantic-color-text-muted: #6b7280;
110
+ $semantic-color-text-muted-hover: #6b7280;
111
+ $semantic-color-text-muted-active: #6b7280;
112
+ $semantic-color-text-muted-focus: #6b7280;
113
+ $semantic-color-text-danger: #934846;
114
+ $semantic-color-text-danger-hover: #934846;
115
+ $semantic-color-text-danger-active: #934846;
116
+ $semantic-color-text-danger-focus: #934846;
117
+ $semantic-color-text-success: #42673f;
118
+ $semantic-color-text-success-hover: #42673f;
119
+ $semantic-color-text-success-active: #42673f;
120
+ $semantic-color-text-success-focus: #42673f;
121
+ $semantic-color-border-default: #d1d5db;
122
+ $semantic-color-border-default-hover: #d1d5db;
123
+ $semantic-color-border-default-active: #d1d5db;
124
+ $semantic-color-border-default-focus: #d1d5db;
125
+ $semantic-color-border-focus: #1993d0;
126
+ $semantic-color-border-focus-hover: #1993d0;
127
+ $semantic-color-border-focus-active: #1993d0;
128
+ $semantic-color-border-focus-focus: #1993d0;
129
+ $semantic-color-border-danger: #934846;
130
+ $semantic-color-border-danger-hover: #934846;
131
+ $semantic-color-border-danger-active: #934846;
132
+ $semantic-color-border-danger-focus: #934846;
133
+ $semantic-color-border-muted: #e5e7eb;
134
+ $semantic-color-border-muted-hover: #e5e7eb;
135
+ $semantic-color-border-muted-active: #e5e7eb;
136
+ $semantic-color-border-muted-focus: #e5e7eb;
137
+ $semantic-spacing-small-gutter: 8px;
138
+ $semantic-spacing-medium-gutter: 16px;
139
+ $semantic-spacing-large-gutter: 32px;
140
+ $semantic-font-heading-size: 20px;
141
+ $semantic-font-heading-weight: 700;
142
+ $semantic-font-heading-line-height: 1.6;
143
+ $semantic-font-body-size: 16px;
144
+ $semantic-font-body-weight: 400;
145
+ $semantic-font-body-line-height: 1.4;
146
+ $semantic-font-caption-size: 12px;
147
+ $semantic-font-caption-weight: 500;
148
+ $semantic-font-caption-line-height: 1.2;
149
+ $semantic-opacity-disabled: 0.5;
150
+ $semantic-opacity-muted: 0.4;
151
+ $semantic-opacity-overlay: 0.3;
152
+ $semantic-opacity-ghost: 0.1;
153
+ $semantic-opacity-hidden: 0;
154
+ $semantic-radius-small: 4px;
155
+ $semantic-radius-medium: 8px;
156
+ $semantic-radius-large: 12px;
157
+ $semantic-radius-pill: 9999px;
158
+ $component-button-primary-radius: 8px;
159
+ $component-button-primary-font-size: 16px;
160
+ $component-button-primary-line-height: 1.4;
161
+ $component-button-primary-padding: 16px;
162
+ $component-button-primary-hover-bg: #1993d0;
163
+ $component-button-primary-hover-color: #111827;
164
+ $component-button-primary-hover-border: #d1d5db;
165
+ $component-button-primary-active-bg: #1993d0;
166
+ $component-button-primary-active-color: #111827;
167
+ $component-button-primary-active-border: #d1d5db;
168
+ $component-button-primary-focus-bg: #1993d0;
169
+ $component-button-primary-focus-color: #111827;
170
+ $component-button-primary-focus-border: #d1d5db;
171
+ $component-button-primary-disabled-bg: #1993d0;
172
+ $component-button-primary-disabled-color: #111827;
173
+ $component-button-primary-disabled-border: #d1d5db;
174
+ $component-button-danger-radius: 8px;
175
+ $component-button-danger-font-size: 16px;
176
+ $component-button-danger-line-height: 1.4;
177
+ $component-button-danger-padding: 16px;
178
+ $component-button-danger-hover-bg: #ba5a56;
179
+ $component-button-danger-hover-color: #111827;
180
+ $component-button-danger-hover-border: #d1d5db;
181
+ $component-button-danger-active-bg: #ba5a56;
182
+ $component-button-danger-active-color: #111827;
183
+ $component-button-danger-active-border: #d1d5db;
184
+ $component-button-danger-focus-bg: #ba5a56;
185
+ $component-button-danger-focus-color: #111827;
186
+ $component-button-danger-focus-border: #d1d5db;
187
+ $component-button-danger-disabled-bg: #ba5a56;
188
+ $component-button-danger-disabled-color: #111827;
189
+ $component-button-danger-disabled-border: #d1d5db;
190
+ $component-button-success-radius: 8px;
191
+ $component-button-success-font-size: 16px;
192
+ $component-button-success-line-height: 1.4;
193
+ $component-button-success-padding: 16px;
194
+ $component-button-success-hover-bg: #51834e;
195
+ $component-button-success-hover-color: #111827;
196
+ $component-button-success-hover-border: #d1d5db;
197
+ $component-button-success-active-bg: #51834e;
198
+ $component-button-success-active-color: #111827;
199
+ $component-button-success-active-border: #d1d5db;
200
+ $component-button-success-focus-bg: #51834e;
201
+ $component-button-success-focus-color: #111827;
202
+ $component-button-success-focus-border: #d1d5db;
203
+ $component-button-success-disabled-bg: #51834e;
204
+ $component-button-success-disabled-color: #111827;
205
+ $component-button-success-disabled-border: #d1d5db;
206
+ $component-button-warning-radius: 8px;
207
+ $component-button-warning-font-size: 16px;
208
+ $component-button-warning-line-height: 1.4;
209
+ $component-button-warning-padding: 16px;
210
+ $component-button-warning-hover-bg: #fca69c;
211
+ $component-button-warning-hover-color: #111827;
212
+ $component-button-warning-hover-border: #d1d5db;
213
+ $component-button-warning-active-bg: #fca69c;
214
+ $component-button-warning-active-color: #111827;
215
+ $component-button-warning-active-border: #d1d5db;
216
+ $component-button-warning-focus-bg: #fca69c;
217
+ $component-button-warning-focus-color: #111827;
218
+ $component-button-warning-focus-border: #d1d5db;
219
+ $component-button-warning-disabled-bg: #fca69c;
220
+ $component-button-warning-disabled-color: #111827;
221
+ $component-button-warning-disabled-border: #d1d5db;
222
+ $component-checkbox-radius: 8px;
223
+ $component-checkbox-font-size: 16px;
224
+ $component-checkbox-line-height: 1.4;
225
+ $component-checkbox-padding: 16px;
226
+ $component-checkbox-hover-bg: #1993d0;
227
+ $component-checkbox-hover-color: #111827;
228
+ $component-checkbox-hover-border: #d1d5db;
229
+ $component-checkbox-active-bg: #1993d0;
230
+ $component-checkbox-active-color: #111827;
231
+ $component-checkbox-active-border: #d1d5db;
232
+ $component-checkbox-focus-bg: #1993d0;
233
+ $component-checkbox-focus-color: #111827;
234
+ $component-checkbox-focus-border: #d1d5db;
235
+ $component-checkbox-disabled-bg: #1993d0;
236
+ $component-checkbox-disabled-color: #111827;
237
+ $component-checkbox-disabled-border: #d1d5db;
238
+ $component-radio-radius: 8px;
239
+ $component-radio-font-size: 16px;
240
+ $component-radio-line-height: 1.4;
241
+ $component-radio-padding: 16px;
242
+ $component-radio-hover-bg: #1993d0;
243
+ $component-radio-hover-color: #111827;
244
+ $component-radio-hover-border: #d1d5db;
245
+ $component-radio-active-bg: #1993d0;
246
+ $component-radio-active-color: #111827;
247
+ $component-radio-active-border: #d1d5db;
248
+ $component-radio-focus-bg: #1993d0;
249
+ $component-radio-focus-color: #111827;
250
+ $component-radio-focus-border: #d1d5db;
251
+ $component-radio-disabled-bg: #1993d0;
252
+ $component-radio-disabled-color: #111827;
253
+ $component-radio-disabled-border: #d1d5db;
254
+ $component-input-field-radius: 8px;
255
+ $component-input-field-font-size: 16px;
256
+ $component-input-field-line-height: 1.4;
257
+ $component-input-field-padding: 16px;
258
+ $component-input-field-hover-bg: #1993d0;
259
+ $component-input-field-hover-color: #111827;
260
+ $component-input-field-hover-border: #d1d5db;
261
+ $component-input-field-active-bg: #1993d0;
262
+ $component-input-field-active-color: #111827;
263
+ $component-input-field-active-border: #d1d5db;
264
+ $component-input-field-focus-bg: #1993d0;
265
+ $component-input-field-focus-color: #111827;
266
+ $component-input-field-focus-border: #d1d5db;
267
+ $component-input-field-disabled-bg: #1993d0;
268
+ $component-input-field-disabled-color: #111827;
269
+ $component-input-field-disabled-border: #d1d5db;
270
+ $component-text-input-radius: 8px;
271
+ $component-text-input-font-size: 16px;
272
+ $component-text-input-line-height: 1.4;
273
+ $component-text-input-padding: 16px;
274
+ $component-text-input-hover-bg: #1993d0;
275
+ $component-text-input-hover-color: #111827;
276
+ $component-text-input-hover-border: #d1d5db;
277
+ $component-text-input-active-bg: #1993d0;
278
+ $component-text-input-active-color: #111827;
279
+ $component-text-input-active-border: #d1d5db;
280
+ $component-text-input-focus-bg: #1993d0;
281
+ $component-text-input-focus-color: #111827;
282
+ $component-text-input-focus-border: #d1d5db;
283
+ $component-text-input-disabled-bg: #1993d0;
284
+ $component-text-input-disabled-color: #111827;
285
+ $component-text-input-disabled-border: #d1d5db;
286
+ $component-single-select-radius: 8px;
287
+ $component-single-select-font-size: 16px;
288
+ $component-single-select-line-height: 1.4;
289
+ $component-single-select-padding: 16px;
290
+ $component-single-select-hover-bg: #1993d0;
291
+ $component-single-select-hover-color: #111827;
292
+ $component-single-select-hover-border: #d1d5db;
293
+ $component-single-select-active-bg: #1993d0;
294
+ $component-single-select-active-color: #111827;
295
+ $component-single-select-active-border: #d1d5db;
296
+ $component-single-select-focus-bg: #1993d0;
297
+ $component-single-select-focus-color: #111827;
298
+ $component-single-select-focus-border: #d1d5db;
299
+ $component-single-select-disabled-bg: #1993d0;
300
+ $component-single-select-disabled-color: #111827;
301
+ $component-single-select-disabled-border: #d1d5db;
302
+ $component-date-picker-radius: 8px;
303
+ $component-date-picker-font-size: 16px;
304
+ $component-date-picker-line-height: 1.4;
305
+ $component-date-picker-padding: 16px;
306
+ $component-date-picker-hover-bg: #1993d0;
307
+ $component-date-picker-hover-color: #111827;
308
+ $component-date-picker-hover-border: #d1d5db;
309
+ $component-date-picker-active-bg: #1993d0;
310
+ $component-date-picker-active-color: #111827;
311
+ $component-date-picker-active-border: #d1d5db;
312
+ $component-date-picker-focus-bg: #1993d0;
313
+ $component-date-picker-focus-color: #111827;
314
+ $component-date-picker-focus-border: #d1d5db;
315
+ $component-date-picker-disabled-bg: #1993d0;
316
+ $component-date-picker-disabled-color: #111827;
317
+ $component-date-picker-disabled-border: #d1d5db;
318
+ $component-tabs-radius: 8px;
319
+ $component-tabs-font-size: 16px;
320
+ $component-tabs-line-height: 1.4;
321
+ $component-tabs-padding: 16px;
322
+ $component-tabs-hover-bg: #1993d0;
323
+ $component-tabs-hover-color: #111827;
324
+ $component-tabs-hover-border: #d1d5db;
325
+ $component-tabs-active-bg: #1993d0;
326
+ $component-tabs-active-color: #111827;
327
+ $component-tabs-active-border: #d1d5db;
328
+ $component-tabs-focus-bg: #1993d0;
329
+ $component-tabs-focus-color: #111827;
330
+ $component-tabs-focus-border: #d1d5db;
331
+ $component-tabs-disabled-bg: #1993d0;
332
+ $component-tabs-disabled-color: #111827;
333
+ $component-tabs-disabled-border: #d1d5db;
334
+ $component-badge-primary-radius: 8px;
335
+ $component-badge-primary-font-size: 16px;
336
+ $component-badge-primary-line-height: 1.4;
337
+ $component-badge-primary-padding: 16px;
338
+ $component-badge-primary-bg: #1993d0;
339
+ $component-badge-primary-color: #111827;
340
+ $component-badge-primary-border: #d1d5db;
341
+ $component-badge-success-radius: 8px;
342
+ $component-badge-success-font-size: 16px;
343
+ $component-badge-success-line-height: 1.4;
344
+ $component-badge-success-padding: 16px;
345
+ $component-badge-success-bg: #51834e;
346
+ $component-badge-success-color: #111827;
347
+ $component-badge-success-border: #d1d5db;
348
+ $component-badge-warning-radius: 8px;
349
+ $component-badge-warning-font-size: 16px;
350
+ $component-badge-warning-line-height: 1.4;
351
+ $component-badge-warning-padding: 16px;
352
+ $component-badge-warning-bg: #fca69c;
353
+ $component-badge-warning-color: #111827;
354
+ $component-badge-warning-border: #d1d5db;
355
+ $component-badge-danger-radius: 8px;
356
+ $component-badge-danger-font-size: 16px;
357
+ $component-badge-danger-line-height: 1.4;
358
+ $component-badge-danger-padding: 16px;
359
+ $component-badge-danger-bg: #ba5a56;
360
+ $component-badge-danger-color: #111827;
361
+ $component-badge-danger-border: #d1d5db;
362
+ $component-progress-bar-primary-radius: 8px;
363
+ $component-progress-bar-primary-font-size: 16px;
364
+ $component-progress-bar-primary-line-height: 1.4;
365
+ $component-progress-bar-primary-padding: 16px;
366
+ $component-progress-bar-primary-bg: #1993d0;
367
+ $component-progress-bar-primary-color: #111827;
368
+ $component-progress-bar-primary-border: #d1d5db;
369
+ $component-progress-bar-success-radius: 8px;
370
+ $component-progress-bar-success-font-size: 16px;
371
+ $component-progress-bar-success-line-height: 1.4;
372
+ $component-progress-bar-success-padding: 16px;
373
+ $component-progress-bar-success-bg: #51834e;
374
+ $component-progress-bar-success-color: #111827;
375
+ $component-progress-bar-success-border: #d1d5db;
376
+ $component-progress-bar-warning-radius: 8px;
377
+ $component-progress-bar-warning-font-size: 16px;
378
+ $component-progress-bar-warning-line-height: 1.4;
379
+ $component-progress-bar-warning-padding: 16px;
380
+ $component-progress-bar-warning-bg: #fca69c;
381
+ $component-progress-bar-warning-color: #111827;
382
+ $component-progress-bar-warning-border: #d1d5db;
383
+ $component-progress-bar-danger-radius: 8px;
384
+ $component-progress-bar-danger-font-size: 16px;
385
+ $component-progress-bar-danger-line-height: 1.4;
386
+ $component-progress-bar-danger-padding: 16px;
387
+ $component-progress-bar-danger-bg: #ba5a56;
388
+ $component-progress-bar-danger-color: #111827;
389
+ $component-progress-bar-danger-border: #d1d5db;
390
+ $component-spinner-radius: 8px;
391
+ $component-spinner-font-size: 16px;
392
+ $component-spinner-line-height: 1.4;
393
+ $component-spinner-padding: 16px;
394
+ $component-spinner-bg: #1993d0;
395
+ $component-spinner-color: #111827;
396
+ $component-spinner-border: #d1d5db;
397
+ $component-alert-primary-radius: 8px;
398
+ $component-alert-primary-font-size: 16px;
399
+ $component-alert-primary-line-height: 1.4;
400
+ $component-alert-primary-padding: 16px;
401
+ $component-alert-primary-bg: #1993d0;
402
+ $component-alert-primary-color: #111827;
403
+ $component-alert-primary-border: #d1d5db;
404
+ $component-alert-success-radius: 8px;
405
+ $component-alert-success-font-size: 16px;
406
+ $component-alert-success-line-height: 1.4;
407
+ $component-alert-success-padding: 16px;
408
+ $component-alert-success-bg: #51834e;
409
+ $component-alert-success-color: #111827;
410
+ $component-alert-success-border: #d1d5db;
411
+ $component-alert-warning-radius: 8px;
412
+ $component-alert-warning-font-size: 16px;
413
+ $component-alert-warning-line-height: 1.4;
414
+ $component-alert-warning-padding: 16px;
415
+ $component-alert-warning-bg: #fca69c;
416
+ $component-alert-warning-color: #111827;
417
+ $component-alert-warning-border: #d1d5db;
418
+ $component-alert-danger-radius: 8px;
419
+ $component-alert-danger-font-size: 16px;
420
+ $component-alert-danger-line-height: 1.4;
421
+ $component-alert-danger-padding: 16px;
422
+ $component-alert-danger-bg: #ba5a56;
423
+ $component-alert-danger-color: #111827;
424
+ $component-alert-danger-border: #d1d5db;
425
+ $component-toast-primary-radius: 8px;
426
+ $component-toast-primary-font-size: 16px;
427
+ $component-toast-primary-line-height: 1.4;
428
+ $component-toast-primary-padding: 16px;
429
+ $component-toast-primary-bg: #1993d0;
430
+ $component-toast-primary-color: #111827;
431
+ $component-toast-primary-border: #d1d5db;
432
+ $component-toast-success-radius: 8px;
433
+ $component-toast-success-font-size: 16px;
434
+ $component-toast-success-line-height: 1.4;
435
+ $component-toast-success-padding: 16px;
436
+ $component-toast-success-bg: #51834e;
437
+ $component-toast-success-color: #111827;
438
+ $component-toast-success-border: #d1d5db;
439
+ $component-toast-warning-radius: 8px;
440
+ $component-toast-warning-font-size: 16px;
441
+ $component-toast-warning-line-height: 1.4;
442
+ $component-toast-warning-padding: 16px;
443
+ $component-toast-warning-bg: #fca69c;
444
+ $component-toast-warning-color: #111827;
445
+ $component-toast-warning-border: #d1d5db;
446
+ $component-toast-danger-radius: 8px;
447
+ $component-toast-danger-font-size: 16px;
448
+ $component-toast-danger-line-height: 1.4;
449
+ $component-toast-danger-padding: 16px;
450
+ $component-toast-danger-bg: #ba5a56;
451
+ $component-toast-danger-color: #111827;
452
+ $component-toast-danger-border: #d1d5db;
453
+ $component-breadcrumb-radius: 8px;
454
+ $component-breadcrumb-font-size: 16px;
455
+ $component-breadcrumb-line-height: 1.4;
456
+ $component-breadcrumb-padding: 16px;
457
+ $component-breadcrumb-hover-bg: #1993d0;
458
+ $component-breadcrumb-hover-color: #111827;
459
+ $component-breadcrumb-hover-border: #d1d5db;
460
+ $component-breadcrumb-active-bg: #1993d0;
461
+ $component-breadcrumb-active-color: #111827;
462
+ $component-breadcrumb-active-border: #d1d5db;
463
+ $component-breadcrumb-focus-bg: #1993d0;
464
+ $component-breadcrumb-focus-color: #111827;
465
+ $component-breadcrumb-focus-border: #d1d5db;
466
+ $component-breadcrumb-disabled-bg: #1993d0;
467
+ $component-breadcrumb-disabled-color: #111827;
468
+ $component-breadcrumb-disabled-border: #d1d5db;
469
+ $component-pagination-radius: 8px;
470
+ $component-pagination-font-size: 16px;
471
+ $component-pagination-line-height: 1.4;
472
+ $component-pagination-padding: 16px;
473
+ $component-pagination-hover-bg: #1993d0;
474
+ $component-pagination-hover-color: #111827;
475
+ $component-pagination-hover-border: #d1d5db;
476
+ $component-pagination-active-bg: #1993d0;
477
+ $component-pagination-active-color: #111827;
478
+ $component-pagination-active-border: #d1d5db;
479
+ $component-pagination-focus-bg: #1993d0;
480
+ $component-pagination-focus-color: #111827;
481
+ $component-pagination-focus-border: #d1d5db;
482
+ $component-pagination-disabled-bg: #1993d0;
483
+ $component-pagination-disabled-color: #111827;
484
+ $component-pagination-disabled-border: #d1d5db;
485
+ $component-dialog-radius: 8px;
486
+ $component-dialog-font-size: 16px;
487
+ $component-dialog-line-height: 1.4;
488
+ $component-dialog-padding: 16px;
489
+ $component-dialog-bg: #1993d0;
490
+ $component-dialog-color: #111827;
491
+ $component-dialog-border: #d1d5db;
492
+ $component-sidebar-navigation-radius: 8px;
493
+ $component-sidebar-navigation-font-size: 16px;
494
+ $component-sidebar-navigation-line-height: 1.4;
495
+ $component-sidebar-navigation-padding: 16px;
496
+ $component-sidebar-navigation-bg: #1993d0;
497
+ $component-sidebar-navigation-color: #111827;
498
+ $component-sidebar-navigation-border: #d1d5db;
499
+ $component-top-navigation-radius: 8px;
500
+ $component-top-navigation-font-size: 16px;
501
+ $component-top-navigation-line-height: 1.4;
502
+ $component-top-navigation-padding: 16px;
503
+ $component-top-navigation-bg: #1993d0;
504
+ $component-top-navigation-color: #111827;
505
+ $component-top-navigation-border: #d1d5db;
506
+ $component-table-radius: 8px;
507
+ $component-table-font-size: 16px;
508
+ $component-table-line-height: 1.4;
509
+ $component-table-padding: 16px;
510
+ $component-table-hover-bg: #1993d0;
511
+ $component-table-hover-color: #111827;
512
+ $component-table-hover-border: #d1d5db;
513
+ $component-table-active-bg: #1993d0;
514
+ $component-table-active-color: #111827;
515
+ $component-table-active-border: #d1d5db;
516
+ $component-table-focus-bg: #1993d0;
517
+ $component-table-focus-color: #111827;
518
+ $component-table-focus-border: #d1d5db;
519
+ $component-table-disabled-bg: #1993d0;
520
+ $component-table-disabled-color: #111827;
521
+ $component-table-disabled-border: #d1d5db;
522
+ $component-file-upload-radius: 8px;
523
+ $component-file-upload-font-size: 16px;
524
+ $component-file-upload-line-height: 1.4;
525
+ $component-file-upload-padding: 16px;
526
+ $component-file-upload-bg: #1993d0;
527
+ $component-file-upload-color: #111827;
528
+ $component-file-upload-border: #d1d5db;
529
+ $component-tooltip-radius: 8px;
530
+ $component-tooltip-font-size: 16px;
531
+ $component-tooltip-line-height: 1.4;
532
+ $component-tooltip-padding: 16px;
533
+ $component-tooltip-bg: #1993d0;
534
+ $component-tooltip-color: #111827;
535
+ $component-tooltip-border: #d1d5db;
536
+ $base-shadow-shadow-1-x: 0;
537
+ $base-shadow-shadow-1-y: 1;
538
+ $base-shadow-shadow-1-blur: 3;
539
+ $base-shadow-shadow-1-spread: 0;
540
+ $base-shadow-shadow-1-color: rgba(0, 0, 0, 0.12);
541
+ $base-shadow-shadow-1-type: dropShadow;
542
+ $base-shadow-shadow-2-x: 0;
543
+ $base-shadow-shadow-2-y: 4;
544
+ $base-shadow-shadow-2-blur: 6;
545
+ $base-shadow-shadow-2-spread: 0;
546
+ $base-shadow-shadow-2-color: rgba(0, 0, 0, 0.15);
547
+ $base-shadow-shadow-2-type: dropShadow;
548
+ $base-shadow-shadow-3-x: 0;
549
+ $base-shadow-shadow-3-y: 10;
550
+ $base-shadow-shadow-3-blur: 15;
551
+ $base-shadow-shadow-3-spread: 0;
552
+ $base-shadow-shadow-3-color: rgba(0, 0, 0, 0.2);
553
+ $base-shadow-shadow-3-type: dropShadow;
554
+ $semantic-shadow-surface-x: 0;
555
+ $semantic-shadow-surface-y: 1;
556
+ $semantic-shadow-surface-blur: 3;
557
+ $semantic-shadow-surface-spread: 0;
558
+ $semantic-shadow-surface-color: rgba(0, 0, 0, 0.12);
559
+ $semantic-shadow-surface-type: dropShadow;
560
+ $semantic-shadow-raised-x: 0;
561
+ $semantic-shadow-raised-y: 4;
562
+ $semantic-shadow-raised-blur: 6;
563
+ $semantic-shadow-raised-spread: 0;
564
+ $semantic-shadow-raised-color: rgba(0, 0, 0, 0.15);
565
+ $semantic-shadow-raised-type: dropShadow;
566
+ $semantic-shadow-floating-x: 0;
567
+ $semantic-shadow-floating-y: 10;
568
+ $semantic-shadow-floating-blur: 15;
569
+ $semantic-shadow-floating-spread: 0;
570
+ $semantic-shadow-floating-color: rgba(0, 0, 0, 0.2);
571
+ $semantic-shadow-floating-type: dropShadow;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-design-system/ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://singaporedso@dev.azure.com/singaporedso/Design%20Systems/_git/DesignSystem"
package/public-api.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  export * from './lib/alert/alert.component';
2
2
  export * from './lib/badge/badge.component';
3
+ export * from './lib/badge/badge.directive';
3
4
  export * from './lib/breadcrumb/breadcrumb.component';
4
5
  export * from './lib/button/button.component';
5
6
  export * from './lib/checkbox/checkbox.component';
6
7
  export * from './lib/datepicker/datepicker.component';
7
8
  export * from './lib/dialog/dialog.component';
8
- export * from './lib/directives/truncate.directive';
9
9
  export * from './lib/dropdown-list/dropdown-list.component';
10
10
  export * from './lib/file-upload-items/file-upload-items.component';
11
11
  export * from './lib/file-upload-multiple/file-upload-multiple.component';
@@ -20,8 +20,10 @@ export * from './lib/side-navigation-bar/side-navigation-bar.component';
20
20
  export * from './lib/spinner/spinner.component';
21
21
  export * from './lib/table/table.component';
22
22
  export * from './lib/tabs/tabs.component';
23
+ export * from './lib/tabs/tab.component';
23
24
  export * from './lib/tag/tag.component';
24
25
  export * from './lib/text-area/text-area.component';
25
26
  export * from './lib/toast/toast.component';
26
27
  export * from './lib/tooltip/tooltip.component';
28
+ export * from './lib/tooltip/tooltip.directive';
27
29
  export * from './lib/top-navigation-bar/top-navigation-bar.component';
package/esm2022/lib/directives/truncate.directive.mjs DELETED
@@ -1,71 +0,0 @@
1
- import { Directive, Input, HostListener } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export class DsoTruncateDirective {
4
- el;
5
- /**
6
- * Enable or disable truncation.
7
- * Can be used as `<div dsoTruncate>` (enabled by default) or `[dsoTruncate]="false"`.
8
- */
9
- enableTruncate = true;
10
- /** Optional: override tooltip text when text is truncated */
11
- truncateTooltipText;
12
- constructor(el) {
13
- this.el = el;
14
- }
15
- /** Initialize truncation after the view is loaded */
16
- ngAfterViewInit() {
17
- if (this.enableTruncate) {
18
- this.applyTruncationStyles();
19
- this.updateTooltip();
20
- }
21
- }
22
- /** Re-check overflow and update tooltip on window resize */
23
- onResize() {
24
- if (this.enableTruncate) {
25
- this.updateTooltip();
26
- }
27
- }
28
- // -------------------------
29
- // PRIVATE METHODS
30
- // -------------------------
31
- /** Apply CSS styles necessary for truncation */
32
- applyTruncationStyles() {
33
- const element = this.el.nativeElement;
34
- element.style.whiteSpace = 'nowrap';
35
- element.style.overflow = 'hidden';
36
- element.style.textOverflow = 'ellipsis';
37
- element.style.display = 'inline-block';
38
- element.style.maxWidth = '100%';
39
- }
40
- /** Update tooltip based on overflow state */
41
- updateTooltip() {
42
- const el = this.el.nativeElement;
43
- const isOverflowing = el.scrollWidth > el.clientWidth;
44
- if (isOverflowing) {
45
- // Add or update tooltip with either the provided text or element content
46
- el.setAttribute('dsoDirectiveTooltip', this.truncateTooltipText || el.textContent || '');
47
- }
48
- else {
49
- // Remove tooltip if content fits
50
- el.removeAttribute('dsoDirectiveTooltip');
51
- }
52
- }
53
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
54
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DsoTruncateDirective, isStandalone: true, selector: "[dsoTruncate]", inputs: { enableTruncate: ["dsoTruncate", "enableTruncate"], truncateTooltipText: "truncateTooltipText" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
55
- }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, decorators: [{
57
- type: Directive,
58
- args: [{
59
- selector: '[dsoTruncate]',
60
- standalone: true
61
- }]
62
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableTruncate: [{
63
- type: Input,
64
- args: ['dsoTruncate']
65
- }], truncateTooltipText: [{
66
- type: Input
67
- }], onResize: [{
68
- type: HostListener,
69
- args: ['window:resize']
70
- }] } });
71
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJ1bmNhdGUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9kaXJlY3RpdmVzL3RydW5jYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBaUIsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU0xRixNQUFNLE9BQU8sb0JBQW9CO0lBV1g7SUFUcEI7OztPQUdHO0lBQ21CLGNBQWMsR0FBaUIsSUFBSSxDQUFDO0lBRTFELDZEQUE2RDtJQUNwRCxtQkFBbUIsQ0FBVTtJQUV0QyxZQUFvQixFQUEyQjtRQUEzQixPQUFFLEdBQUYsRUFBRSxDQUF5QjtJQUFHLENBQUM7SUFFbkQscURBQXFEO0lBQ3JELGVBQWU7UUFDYixJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQztJQUNILENBQUM7SUFFRCw0REFBNEQ7SUFFNUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVELDRCQUE0QjtJQUM1QixrQkFBa0I7SUFDbEIsNEJBQTRCO0lBRTVCLGdEQUFnRDtJQUN4QyxxQkFBcUI7UUFDM0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFDdEMsT0FBTyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQ3BDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUNsQyxPQUFPLENBQUMsS0FBSyxDQUFDLFlBQVksR0FBRyxVQUFVLENBQUM7UUFDeEMsT0FBTyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsY0FBYyxDQUFDO1FBQ3ZDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQztJQUNsQyxDQUFDO0lBRUQsNkNBQTZDO0lBQ3JDLGFBQWE7UUFDbkIsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFFakMsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDLFdBQVcsR0FBRyxFQUFFLENBQUMsV0FBVyxDQUFDO1FBRXRELElBQUksYUFBYSxFQUFFLENBQUM7WUFDbEIseUVBQXlFO1lBQ3pFLEVBQUUsQ0FBQyxZQUFZLENBQUMscUJBQXFCLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixJQUFJLEVBQUUsQ0FBQyxXQUFXLElBQUksRUFBRSxDQUFDLENBQUM7UUFDM0YsQ0FBQzthQUFNLENBQUM7WUFDTixpQ0FBaUM7WUFDakMsRUFBRSxDQUFDLGVBQWUsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDSCxDQUFDO3dHQXhEVSxvQkFBb0I7NEZBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFKaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOytFQU91QixjQUFjO3NCQUFuQyxLQUFLO3VCQUFDLGFBQWE7Z0JBR1gsbUJBQW1CO3NCQUEzQixLQUFLO2dCQWNOLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbnB1dCwgQWZ0ZXJWaWV3SW5pdCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tkc29UcnVuY2F0ZV0nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWVcclxufSlcclxuZXhwb3J0IGNsYXNzIERzb1RydW5jYXRlRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcblxyXG4gIC8qKiBcclxuICAgKiBFbmFibGUgb3IgZGlzYWJsZSB0cnVuY2F0aW9uLiAgXHJcbiAgICogQ2FuIGJlIHVzZWQgYXMgYDxkaXYgZHNvVHJ1bmNhdGU+YCAoZW5hYmxlZCBieSBkZWZhdWx0KSBvciBgW2Rzb1RydW5jYXRlXT1cImZhbHNlXCJgLlxyXG4gICAqL1xyXG4gIEBJbnB1dCgnZHNvVHJ1bmNhdGUnKSBlbmFibGVUcnVuY2F0ZTogYm9vbGVhbiB8ICcnID0gdHJ1ZTtcclxuXHJcbiAgLyoqIE9wdGlvbmFsOiBvdmVycmlkZSB0b29sdGlwIHRleHQgd2hlbiB0ZXh0IGlzIHRydW5jYXRlZCAqL1xyXG4gIEBJbnB1dCgpIHRydW5jYXRlVG9vbHRpcFRleHQ/OiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7fVxyXG5cclxuICAvKiogSW5pdGlhbGl6ZSB0cnVuY2F0aW9uIGFmdGVyIHRoZSB2aWV3IGlzIGxvYWRlZCAqL1xyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIGlmICh0aGlzLmVuYWJsZVRydW5jYXRlKSB7XHJcbiAgICAgIHRoaXMuYXBwbHlUcnVuY2F0aW9uU3R5bGVzKCk7XHJcbiAgICAgIHRoaXMudXBkYXRlVG9vbHRpcCgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLyoqIFJlLWNoZWNrIG92ZXJmbG93IGFuZCB1cGRhdGUgdG9vbHRpcCBvbiB3aW5kb3cgcmVzaXplICovXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXHJcbiAgb25SZXNpemUoKSB7XHJcbiAgICBpZiAodGhpcy5lbmFibGVUcnVuY2F0ZSkge1xyXG4gICAgICB0aGlzLnVwZGF0ZVRvb2x0aXAoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cclxuICAvLyBQUklWQVRFIE1FVEhPRFNcclxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcblxyXG4gIC8qKiBBcHBseSBDU1Mgc3R5bGVzIG5lY2Vzc2FyeSBmb3IgdHJ1bmNhdGlvbiAqL1xyXG4gIHByaXZhdGUgYXBwbHlUcnVuY2F0aW9uU3R5bGVzKCkge1xyXG4gICAgY29uc3QgZWxlbWVudCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcclxuICAgIGVsZW1lbnQuc3R5bGUud2hpdGVTcGFjZSA9ICdub3dyYXAnO1xyXG4gICAgZWxlbWVudC5zdHlsZS5vdmVyZmxvdyA9ICdoaWRkZW4nO1xyXG4gICAgZWxlbWVudC5zdHlsZS50ZXh0T3ZlcmZsb3cgPSAnZWxsaXBzaXMnO1xyXG4gICAgZWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ2lubGluZS1ibG9jayc7XHJcbiAgICBlbGVtZW50LnN0eWxlLm1heFdpZHRoID0gJzEwMCUnO1xyXG4gIH1cclxuXHJcbiAgLyoqIFVwZGF0ZSB0b29sdGlwIGJhc2VkIG9uIG92ZXJmbG93IHN0YXRlICovXHJcbiAgcHJpdmF0ZSB1cGRhdGVUb29sdGlwKCkge1xyXG4gICAgY29uc3QgZWwgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcblxyXG4gICAgY29uc3QgaXNPdmVyZmxvd2luZyA9IGVsLnNjcm9sbFdpZHRoID4gZWwuY2xpZW50V2lkdGg7XHJcblxyXG4gICAgaWYgKGlzT3ZlcmZsb3dpbmcpIHtcclxuICAgICAgLy8gQWRkIG9yIHVwZGF0ZSB0b29sdGlwIHdpdGggZWl0aGVyIHRoZSBwcm92aWRlZCB0ZXh0IG9yIGVsZW1lbnQgY29udGVudFxyXG4gICAgICBlbC5zZXRBdHRyaWJ1dGUoJ2Rzb0RpcmVjdGl2ZVRvb2x0aXAnLCB0aGlzLnRydW5jYXRlVG9vbHRpcFRleHQgfHwgZWwudGV4dENvbnRlbnQgfHwgJycpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgLy8gUmVtb3ZlIHRvb2x0aXAgaWYgY29udGVudCBmaXRzXHJcbiAgICAgIGVsLnJlbW92ZUF0dHJpYnV0ZSgnZHNvRGlyZWN0aXZlVG9vbHRpcCcpO1xyXG4gICAgfVxyXG4gIH1cclxufSJdfQ==