@ndwnu/design-system 1.1.0 → 2.0.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/components/accordion/accordion.component.d.ts +1 -0
- package/components/alert/alert.component.d.ts +18 -2
- package/components/alert/alert.model.d.ts +1 -0
- package/components/badge/badge.component.d.ts +8 -1
- package/components/card/card-footer/card-footer.component.d.ts +0 -1
- package/components/card/card-header/card-header.component.d.ts +0 -3
- package/components/card/card.component.d.ts +2 -8
- package/components/card/index.d.ts +3 -1
- package/components/collapsible/collapsible.component.d.ts +4 -3
- package/components/dropdown/dropdown.component.d.ts +5 -5
- package/components/form-field/checkbox/checkbox.component.d.ts +0 -1
- package/components/form-field/file-upload/file-upload-text.interface.d.ts +4 -0
- package/components/form-field/file-upload/file-upload.component.d.ts +44 -0
- package/components/form-field/file-upload/index.d.ts +2 -0
- package/components/form-field/form-field.component.d.ts +8 -2
- package/components/form-field/index.d.ts +3 -0
- package/components/form-field/input/input.directive.d.ts +1 -0
- package/components/form-field/option-group/index.d.ts +2 -0
- package/components/form-field/option-group/option-group.component.d.ts +18 -0
- package/components/form-field/option-group/option.component.d.ts +8 -0
- package/components/form-field/radio-button/radio-button.component.d.ts +0 -4
- package/components/form-field/radio-group/radio-group.component.d.ts +1 -1
- package/components/form-field/textarea/auto-grow.directive.d.ts +19 -0
- package/components/form-field/textarea/index.d.ts +1 -0
- package/components/icon/action-icon/action-icon.component.d.ts +33 -0
- package/components/icon/icon.component.d.ts +4 -6
- package/components/icon/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/components/main-navigation/main-navigation.component.d.ts +2 -1
- package/components/modal/index.d.ts +7 -1
- package/components/modal/modal-content/index.d.ts +1 -0
- package/components/modal/modal-content/modal-content.component.d.ts +5 -0
- package/components/modal/modal-footer/index.d.ts +1 -0
- package/components/modal/modal-footer/modal-footer.component.d.ts +5 -0
- package/components/modal/modal-header/index.d.ts +1 -0
- package/components/modal/modal-header/modal-header.component.d.ts +7 -0
- package/components/modal/modal.component.d.ts +11 -0
- package/components/modal/modal.service.d.ts +0 -1
- package/components/multi-select/multi-select.component.d.ts +6 -5
- package/components/pill/pill.component.d.ts +8 -0
- package/components/removable-pill/removable-pill.component.d.ts +9 -2
- package/components/toast/index.d.ts +2 -0
- package/components/toast/toast.component.d.ts +18 -0
- package/components/toast/toast.service.d.ts +12 -0
- package/components/tooltip/tooltip.directive.d.ts +4 -0
- package/core/styles/ndw-styles.scss +99 -31
- package/core/styles/nwb-styles.scss +99 -31
- package/esm2022/components/accordion/accordion.component.mjs +9 -5
- package/esm2022/components/accordion/accordion.service.mjs +3 -6
- package/esm2022/components/alert/alert.component.mjs +28 -4
- package/esm2022/components/alert/alert.model.mjs +1 -1
- package/esm2022/components/badge/badge.component.mjs +10 -3
- package/esm2022/components/breadcrumb-group/breadcrumb-group.component.mjs +3 -3
- package/esm2022/components/card/card-footer/card-footer.component.mjs +1 -4
- package/esm2022/components/card/card-header/card-header.component.mjs +4 -12
- package/esm2022/components/card/card.component.mjs +5 -22
- package/esm2022/components/card/index.mjs +12 -2
- package/esm2022/components/collapsible/collapsible.component.mjs +6 -13
- package/esm2022/components/dropdown/dropdown.component.mjs +8 -9
- package/esm2022/components/form-field/checkbox/checkbox.component.mjs +8 -17
- package/esm2022/components/form-field/error/error.component.mjs +3 -3
- package/esm2022/components/form-field/file-upload/file-upload-text.interface.mjs +2 -0
- package/esm2022/components/form-field/file-upload/file-upload.component.mjs +210 -0
- package/esm2022/components/form-field/file-upload/index.mjs +3 -0
- package/esm2022/components/form-field/form-field.component.mjs +30 -5
- package/esm2022/components/form-field/index.mjs +4 -1
- package/esm2022/components/form-field/info/info.component.mjs +2 -2
- package/esm2022/components/form-field/input/input.directive.mjs +5 -3
- package/esm2022/components/form-field/option-group/index.mjs +3 -0
- package/esm2022/components/form-field/option-group/option-group.component.mjs +53 -0
- package/esm2022/components/form-field/option-group/option.component.mjs +22 -0
- package/esm2022/components/form-field/radio-button/radio-button.component.mjs +8 -35
- package/esm2022/components/form-field/radio-group/radio-group.component.mjs +4 -6
- package/esm2022/components/form-field/textarea/auto-grow.directive.mjs +45 -0
- package/esm2022/components/form-field/textarea/index.mjs +2 -0
- package/esm2022/components/icon/action-icon/action-icon.component.mjs +39 -0
- package/esm2022/components/icon/icon.component.mjs +10 -24
- package/esm2022/components/icon/index.mjs +2 -1
- package/esm2022/components/index.mjs +2 -1
- package/esm2022/components/main-navigation/main-navigation.component.mjs +4 -3
- package/esm2022/components/modal/index.mjs +18 -2
- package/esm2022/components/modal/modal-content/index.mjs +2 -0
- package/esm2022/components/modal/modal-content/modal-content.component.mjs +11 -0
- package/esm2022/components/modal/modal-footer/index.mjs +2 -0
- package/esm2022/components/modal/modal-footer/modal-footer.component.mjs +11 -0
- package/esm2022/components/modal/modal-header/index.mjs +2 -0
- package/esm2022/components/modal/modal-header/modal-header.component.mjs +19 -0
- package/esm2022/components/modal/modal.component.mjs +32 -0
- package/esm2022/components/modal/modal.service.mjs +5 -10
- package/esm2022/components/multi-select/multi-select.component.mjs +10 -8
- package/esm2022/components/pill/pill.component.mjs +17 -4
- package/esm2022/components/removable-pill/removable-pill.component.mjs +13 -11
- package/esm2022/components/toast/index.mjs +3 -0
- package/esm2022/components/toast/toast.component.mjs +74 -0
- package/esm2022/components/toast/toast.service.mjs +43 -0
- package/esm2022/components/tooltip/tooltip.component.mjs +5 -3
- package/esm2022/components/tooltip/tooltip.directive.mjs +43 -18
- package/fesm2022/ndwnu-design-system.mjs +884 -334
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { OverlayRef } from '@angular/cdk/overlay';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ToastService {
|
|
4
|
+
private readonly overlay;
|
|
5
|
+
private isOpen;
|
|
6
|
+
overlayRef?: OverlayRef;
|
|
7
|
+
detach(): void;
|
|
8
|
+
dispose(): void;
|
|
9
|
+
open(message: string): void;
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
|
|
11
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
|
|
12
|
+
}
|
|
@@ -4,11 +4,15 @@ export declare class TooltipDirective implements OnDestroy, OnInit {
|
|
|
4
4
|
text: import("@angular/core").InputSignal<string>;
|
|
5
5
|
private readonly elementRef;
|
|
6
6
|
private readonly overlay;
|
|
7
|
+
private readonly ariaDescriber;
|
|
7
8
|
private overlayRef;
|
|
8
9
|
ngOnInit(): void;
|
|
9
10
|
ngOnDestroy(): void;
|
|
10
11
|
protected show(): void;
|
|
11
12
|
protected hide(): void;
|
|
13
|
+
protected hideOnEscape(): void;
|
|
14
|
+
private updateAriaDescription;
|
|
15
|
+
private getFlexibleConnectedPositionStrategy;
|
|
12
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
|
|
13
17
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
14
18
|
}
|
|
@@ -264,6 +264,7 @@
|
|
|
264
264
|
--ndw-font-family-body: "Nunito Sans", sans-serif;
|
|
265
265
|
--ndw-font-family-heading: "DM Sans", sans-serif;
|
|
266
266
|
--ndw-base-font-size: 16px;
|
|
267
|
+
--ndw-font-size-2xs: 0.5625rem;
|
|
267
268
|
--ndw-font-size-xs: 0.6875rem;
|
|
268
269
|
--ndw-font-size-sm: 0.8125rem;
|
|
269
270
|
--ndw-font-size-md: 1.125rem;
|
|
@@ -275,9 +276,27 @@
|
|
|
275
276
|
--ndw-line-height-md: 1.5em;
|
|
276
277
|
/* Transform */
|
|
277
278
|
--ndw-rotate-half: rotate(180deg);
|
|
279
|
+
/* Modal */
|
|
280
|
+
--ndw-modal-width-sm: 31.25rem;
|
|
281
|
+
--ndw-modal-width-md: 45rem;
|
|
278
282
|
}
|
|
279
283
|
|
|
280
284
|
/* Screen sizes */
|
|
285
|
+
/**
|
|
286
|
+
Utilities for improving accessibility with screen readers.
|
|
287
|
+
*/
|
|
288
|
+
.sr-only {
|
|
289
|
+
position: absolute;
|
|
290
|
+
overflow: hidden;
|
|
291
|
+
width: 1px;
|
|
292
|
+
height: 1px;
|
|
293
|
+
padding: 0;
|
|
294
|
+
margin: -1px;
|
|
295
|
+
border-width: 0;
|
|
296
|
+
white-space: nowrap;
|
|
297
|
+
clip: rect(0, 0, 0, 0);
|
|
298
|
+
}
|
|
299
|
+
|
|
281
300
|
/* Mixins */
|
|
282
301
|
/* Classes */
|
|
283
302
|
.ndw-heading-xl {
|
|
@@ -562,12 +581,21 @@
|
|
|
562
581
|
}
|
|
563
582
|
}
|
|
564
583
|
|
|
584
|
+
.ndw-overlay-backdrop {
|
|
585
|
+
background-color: var(--ndw-backdrop-color);
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
button:not(:disabled) {
|
|
589
|
+
cursor: pointer;
|
|
590
|
+
}
|
|
591
|
+
|
|
565
592
|
[ndwButton] {
|
|
566
593
|
box-sizing: border-box;
|
|
567
594
|
display: flex;
|
|
568
595
|
align-items: center;
|
|
569
596
|
gap: var(--ndw-spacing-2xs);
|
|
570
597
|
height: var(--ndw-spacing-xl);
|
|
598
|
+
justify-content: center;
|
|
571
599
|
padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
|
|
572
600
|
width: fit-content;
|
|
573
601
|
cursor: pointer;
|
|
@@ -580,6 +608,7 @@
|
|
|
580
608
|
font-size: var(--ndw-font-size-sm);
|
|
581
609
|
font-weight: var(--ndw-font-weight-regular);
|
|
582
610
|
text-align: start;
|
|
611
|
+
text-decoration: none;
|
|
583
612
|
}
|
|
584
613
|
[ndwButton] ndw-icon {
|
|
585
614
|
font-size: var(--ndw-spacing-md);
|
|
@@ -594,35 +623,43 @@
|
|
|
594
623
|
border-color: var(--ndw-background-primary-active);
|
|
595
624
|
color: var(--ndw-foreground-primary-active);
|
|
596
625
|
}
|
|
597
|
-
[ndwButton][
|
|
626
|
+
[ndwButton][secondary], [ndwButton][tertiary] {
|
|
598
627
|
background-color: transparent;
|
|
599
|
-
border-color: var(--ndw-background-primary);
|
|
600
628
|
color: var(--ndw-text-primary);
|
|
601
629
|
}
|
|
602
|
-
[ndwButton][
|
|
603
|
-
background-color: var(--ndw-
|
|
630
|
+
[ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
|
|
631
|
+
background-color: var(--ndw-alpha-primary-007);
|
|
632
|
+
color: var(--ndw-text-primary);
|
|
633
|
+
}
|
|
634
|
+
[ndwButton][secondary]:active, [ndwButton][tertiary]:active {
|
|
635
|
+
background-color: var(--ndw-alpha-primary-015);
|
|
636
|
+
}
|
|
637
|
+
[ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
|
|
638
|
+
color: var(--ndw-color-grey-700);
|
|
639
|
+
}
|
|
640
|
+
[ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
|
|
641
|
+
background-color: var(--ndw-alpha-black-007);
|
|
642
|
+
}
|
|
643
|
+
[ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
|
|
644
|
+
background-color: var(--ndw-alpha-black-015);
|
|
645
|
+
}
|
|
646
|
+
[ndwButton][secondary] {
|
|
604
647
|
border-color: var(--ndw-background-primary);
|
|
605
|
-
color: var(--ndw-foreground-primary);
|
|
606
648
|
}
|
|
607
|
-
[ndwButton][
|
|
608
|
-
background-color: var(--ndw-background-primary-hover);
|
|
649
|
+
[ndwButton][secondary]:active {
|
|
609
650
|
border-color: var(--ndw-background-primary-hover);
|
|
610
|
-
color: var(--ndw-foreground-primary-hover);
|
|
611
651
|
}
|
|
612
|
-
[ndwButton][secondary] {
|
|
613
|
-
background-color: transparent;
|
|
652
|
+
[ndwButton][secondary][alternative] {
|
|
614
653
|
border-color: var(--ndw-color-grey-300);
|
|
615
|
-
color: var(--ndw-color-grey-700);
|
|
616
654
|
}
|
|
617
|
-
[ndwButton][secondary]:hover {
|
|
618
|
-
background-color: var(--ndw-color-grey-500);
|
|
655
|
+
[ndwButton][secondary][alternative]:hover {
|
|
619
656
|
border-color: var(--ndw-color-grey-500);
|
|
620
|
-
color: var(--ndw-color-white);
|
|
621
657
|
}
|
|
622
|
-
[ndwButton][secondary]:active {
|
|
623
|
-
background-color: var(--ndw-color-grey-700);
|
|
658
|
+
[ndwButton][secondary][alternative]:active {
|
|
624
659
|
border-color: var(--ndw-color-grey-700);
|
|
625
|
-
|
|
660
|
+
}
|
|
661
|
+
[ndwButton][tertiary] {
|
|
662
|
+
border-color: transparent;
|
|
626
663
|
}
|
|
627
664
|
[ndwButton][large] {
|
|
628
665
|
height: var(--ndw-spacing-2xl);
|
|
@@ -775,37 +812,36 @@ textarea[ndwInput] {
|
|
|
775
812
|
color: var(--ndw-color-grey-400);
|
|
776
813
|
}
|
|
777
814
|
|
|
778
|
-
|
|
779
|
-
align-items: baseline;
|
|
780
|
-
color: var(--ndw-color-link-400);
|
|
815
|
+
[ndwLink] {
|
|
781
816
|
display: inline-flex;
|
|
782
|
-
|
|
817
|
+
align-items: baseline;
|
|
783
818
|
gap: var(--ndw-spacing-2xs);
|
|
819
|
+
padding: 0;
|
|
820
|
+
border: 0;
|
|
821
|
+
font-size: inherit;
|
|
784
822
|
text-decoration: underline var(--ndw-border-size-sm) transparent;
|
|
785
823
|
text-underline-offset: var(--ndw-border-size-md);
|
|
824
|
+
color: var(--ndw-color-link-400);
|
|
825
|
+
background-color: transparent;
|
|
786
826
|
transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
|
|
787
827
|
}
|
|
788
|
-
|
|
828
|
+
[ndwLink] > * {
|
|
789
829
|
align-self: center;
|
|
790
830
|
}
|
|
791
|
-
|
|
831
|
+
[ndwLink] ndw-icon {
|
|
792
832
|
font-size: 1.25em;
|
|
793
833
|
overflow: hidden;
|
|
794
834
|
}
|
|
795
|
-
|
|
835
|
+
[ndwLink]:hover {
|
|
796
836
|
color: var(--ndw-color-link-500);
|
|
797
837
|
text-decoration-color: var(--ndw-color-link-500);
|
|
798
838
|
}
|
|
799
|
-
|
|
839
|
+
[ndwLink][disabled] {
|
|
800
840
|
color: var(--ndw-color-grey-400);
|
|
801
841
|
pointer-events: none;
|
|
802
842
|
user-select: none;
|
|
803
843
|
}
|
|
804
844
|
|
|
805
|
-
.ndw-overlay-backdrop {
|
|
806
|
-
background-color: var(--ndw-backdrop-color);
|
|
807
|
-
}
|
|
808
|
-
|
|
809
845
|
@keyframes show {
|
|
810
846
|
from {
|
|
811
847
|
opacity: 0;
|
|
@@ -814,8 +850,8 @@ a[ndwLink][disabled] {
|
|
|
814
850
|
opacity: 1;
|
|
815
851
|
}
|
|
816
852
|
}
|
|
817
|
-
.cdk-overlay-pane.ndw-popover-panel {
|
|
818
|
-
animation: show var(--ndw-animation-speed-
|
|
853
|
+
.cdk-overlay-pane.ndw-popover-panel [role=dialog] {
|
|
854
|
+
animation: show var(--ndw-animation-speed-fast) ease-out;
|
|
819
855
|
background-color: var(--ndw-color-white);
|
|
820
856
|
border-radius: var(--ndw-border-radius-md);
|
|
821
857
|
box-shadow: var(--ndw-elevation-popover);
|
|
@@ -844,3 +880,35 @@ a[ndwLink][disabled] {
|
|
|
844
880
|
border-color: transparent;
|
|
845
881
|
color: var(--ndw-color-white);
|
|
846
882
|
}
|
|
883
|
+
|
|
884
|
+
.toast-container {
|
|
885
|
+
color: var(--ndw-color-white);
|
|
886
|
+
background: var(--ndw-color-grey-700);
|
|
887
|
+
padding: 0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);
|
|
888
|
+
border-radius: var(--ndw-spacing-2xs);
|
|
889
|
+
gap: var(--ndw-spacing-xs);
|
|
890
|
+
display: grid;
|
|
891
|
+
grid-template-columns: 1fr auto;
|
|
892
|
+
align-items: center;
|
|
893
|
+
font-size: var(--ndw-font-size-sm);
|
|
894
|
+
height: var(--ndw-spacing-lg);
|
|
895
|
+
width: fit-content;
|
|
896
|
+
opacity: 1;
|
|
897
|
+
}
|
|
898
|
+
.toast-container .toast-content {
|
|
899
|
+
white-space: nowrap;
|
|
900
|
+
overflow: hidden;
|
|
901
|
+
text-overflow: ellipsis;
|
|
902
|
+
max-width: 100%;
|
|
903
|
+
display: inline-block;
|
|
904
|
+
}
|
|
905
|
+
.toast-container ndw-icon {
|
|
906
|
+
font-size: var(--ndw-font-size-lg);
|
|
907
|
+
justify-self: end;
|
|
908
|
+
cursor: pointer;
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.toast-container.fade-out {
|
|
912
|
+
transition: opacity 200ms ease-in;
|
|
913
|
+
opacity: 0;
|
|
914
|
+
}
|
|
@@ -232,6 +232,7 @@
|
|
|
232
232
|
--ndw-font-family-body: "Nunito Sans", sans-serif;
|
|
233
233
|
--ndw-font-family-heading: "DM Sans", sans-serif;
|
|
234
234
|
--ndw-base-font-size: 16px;
|
|
235
|
+
--ndw-font-size-2xs: 0.5625rem;
|
|
235
236
|
--ndw-font-size-xs: 0.6875rem;
|
|
236
237
|
--ndw-font-size-sm: 0.8125rem;
|
|
237
238
|
--ndw-font-size-md: 1.125rem;
|
|
@@ -243,9 +244,27 @@
|
|
|
243
244
|
--ndw-line-height-md: 1.5em;
|
|
244
245
|
/* Transform */
|
|
245
246
|
--ndw-rotate-half: rotate(180deg);
|
|
247
|
+
/* Modal */
|
|
248
|
+
--ndw-modal-width-sm: 31.25rem;
|
|
249
|
+
--ndw-modal-width-md: 45rem;
|
|
246
250
|
}
|
|
247
251
|
|
|
248
252
|
/* Screen sizes */
|
|
253
|
+
/**
|
|
254
|
+
Utilities for improving accessibility with screen readers.
|
|
255
|
+
*/
|
|
256
|
+
.sr-only {
|
|
257
|
+
position: absolute;
|
|
258
|
+
overflow: hidden;
|
|
259
|
+
width: 1px;
|
|
260
|
+
height: 1px;
|
|
261
|
+
padding: 0;
|
|
262
|
+
margin: -1px;
|
|
263
|
+
border-width: 0;
|
|
264
|
+
white-space: nowrap;
|
|
265
|
+
clip: rect(0, 0, 0, 0);
|
|
266
|
+
}
|
|
267
|
+
|
|
249
268
|
/* Mixins */
|
|
250
269
|
/* Classes */
|
|
251
270
|
.ndw-heading-xl {
|
|
@@ -530,12 +549,21 @@
|
|
|
530
549
|
}
|
|
531
550
|
}
|
|
532
551
|
|
|
552
|
+
.ndw-overlay-backdrop {
|
|
553
|
+
background-color: var(--ndw-backdrop-color);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
button:not(:disabled) {
|
|
557
|
+
cursor: pointer;
|
|
558
|
+
}
|
|
559
|
+
|
|
533
560
|
[ndwButton] {
|
|
534
561
|
box-sizing: border-box;
|
|
535
562
|
display: flex;
|
|
536
563
|
align-items: center;
|
|
537
564
|
gap: var(--ndw-spacing-2xs);
|
|
538
565
|
height: var(--ndw-spacing-xl);
|
|
566
|
+
justify-content: center;
|
|
539
567
|
padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
|
|
540
568
|
width: fit-content;
|
|
541
569
|
cursor: pointer;
|
|
@@ -548,6 +576,7 @@
|
|
|
548
576
|
font-size: var(--ndw-font-size-sm);
|
|
549
577
|
font-weight: var(--ndw-font-weight-regular);
|
|
550
578
|
text-align: start;
|
|
579
|
+
text-decoration: none;
|
|
551
580
|
}
|
|
552
581
|
[ndwButton] ndw-icon {
|
|
553
582
|
font-size: var(--ndw-spacing-md);
|
|
@@ -562,35 +591,43 @@
|
|
|
562
591
|
border-color: var(--ndw-background-primary-active);
|
|
563
592
|
color: var(--ndw-foreground-primary-active);
|
|
564
593
|
}
|
|
565
|
-
[ndwButton][
|
|
594
|
+
[ndwButton][secondary], [ndwButton][tertiary] {
|
|
566
595
|
background-color: transparent;
|
|
567
|
-
border-color: var(--ndw-background-primary);
|
|
568
596
|
color: var(--ndw-text-primary);
|
|
569
597
|
}
|
|
570
|
-
[ndwButton][
|
|
571
|
-
background-color: var(--ndw-
|
|
598
|
+
[ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
|
|
599
|
+
background-color: var(--ndw-alpha-primary-007);
|
|
600
|
+
color: var(--ndw-text-primary);
|
|
601
|
+
}
|
|
602
|
+
[ndwButton][secondary]:active, [ndwButton][tertiary]:active {
|
|
603
|
+
background-color: var(--ndw-alpha-primary-015);
|
|
604
|
+
}
|
|
605
|
+
[ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
|
|
606
|
+
color: var(--ndw-color-grey-700);
|
|
607
|
+
}
|
|
608
|
+
[ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
|
|
609
|
+
background-color: var(--ndw-alpha-black-007);
|
|
610
|
+
}
|
|
611
|
+
[ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
|
|
612
|
+
background-color: var(--ndw-alpha-black-015);
|
|
613
|
+
}
|
|
614
|
+
[ndwButton][secondary] {
|
|
572
615
|
border-color: var(--ndw-background-primary);
|
|
573
|
-
color: var(--ndw-foreground-primary);
|
|
574
616
|
}
|
|
575
|
-
[ndwButton][
|
|
576
|
-
background-color: var(--ndw-background-primary-hover);
|
|
617
|
+
[ndwButton][secondary]:active {
|
|
577
618
|
border-color: var(--ndw-background-primary-hover);
|
|
578
|
-
color: var(--ndw-foreground-primary-hover);
|
|
579
619
|
}
|
|
580
|
-
[ndwButton][secondary] {
|
|
581
|
-
background-color: transparent;
|
|
620
|
+
[ndwButton][secondary][alternative] {
|
|
582
621
|
border-color: var(--ndw-color-grey-300);
|
|
583
|
-
color: var(--ndw-color-grey-700);
|
|
584
622
|
}
|
|
585
|
-
[ndwButton][secondary]:hover {
|
|
586
|
-
background-color: var(--ndw-color-grey-500);
|
|
623
|
+
[ndwButton][secondary][alternative]:hover {
|
|
587
624
|
border-color: var(--ndw-color-grey-500);
|
|
588
|
-
color: var(--ndw-color-white);
|
|
589
625
|
}
|
|
590
|
-
[ndwButton][secondary]:active {
|
|
591
|
-
background-color: var(--ndw-color-grey-700);
|
|
626
|
+
[ndwButton][secondary][alternative]:active {
|
|
592
627
|
border-color: var(--ndw-color-grey-700);
|
|
593
|
-
|
|
628
|
+
}
|
|
629
|
+
[ndwButton][tertiary] {
|
|
630
|
+
border-color: transparent;
|
|
594
631
|
}
|
|
595
632
|
[ndwButton][large] {
|
|
596
633
|
height: var(--ndw-spacing-2xl);
|
|
@@ -743,37 +780,36 @@ textarea[ndwInput] {
|
|
|
743
780
|
color: var(--ndw-color-grey-400);
|
|
744
781
|
}
|
|
745
782
|
|
|
746
|
-
|
|
747
|
-
align-items: baseline;
|
|
748
|
-
color: var(--ndw-color-link-400);
|
|
783
|
+
[ndwLink] {
|
|
749
784
|
display: inline-flex;
|
|
750
|
-
|
|
785
|
+
align-items: baseline;
|
|
751
786
|
gap: var(--ndw-spacing-2xs);
|
|
787
|
+
padding: 0;
|
|
788
|
+
border: 0;
|
|
789
|
+
font-size: inherit;
|
|
752
790
|
text-decoration: underline var(--ndw-border-size-sm) transparent;
|
|
753
791
|
text-underline-offset: var(--ndw-border-size-md);
|
|
792
|
+
color: var(--ndw-color-link-400);
|
|
793
|
+
background-color: transparent;
|
|
754
794
|
transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
|
|
755
795
|
}
|
|
756
|
-
|
|
796
|
+
[ndwLink] > * {
|
|
757
797
|
align-self: center;
|
|
758
798
|
}
|
|
759
|
-
|
|
799
|
+
[ndwLink] ndw-icon {
|
|
760
800
|
font-size: 1.25em;
|
|
761
801
|
overflow: hidden;
|
|
762
802
|
}
|
|
763
|
-
|
|
803
|
+
[ndwLink]:hover {
|
|
764
804
|
color: var(--ndw-color-link-500);
|
|
765
805
|
text-decoration-color: var(--ndw-color-link-500);
|
|
766
806
|
}
|
|
767
|
-
|
|
807
|
+
[ndwLink][disabled] {
|
|
768
808
|
color: var(--ndw-color-grey-400);
|
|
769
809
|
pointer-events: none;
|
|
770
810
|
user-select: none;
|
|
771
811
|
}
|
|
772
812
|
|
|
773
|
-
.ndw-overlay-backdrop {
|
|
774
|
-
background-color: var(--ndw-backdrop-color);
|
|
775
|
-
}
|
|
776
|
-
|
|
777
813
|
@keyframes show {
|
|
778
814
|
from {
|
|
779
815
|
opacity: 0;
|
|
@@ -782,8 +818,8 @@ a[ndwLink][disabled] {
|
|
|
782
818
|
opacity: 1;
|
|
783
819
|
}
|
|
784
820
|
}
|
|
785
|
-
.cdk-overlay-pane.ndw-popover-panel {
|
|
786
|
-
animation: show var(--ndw-animation-speed-
|
|
821
|
+
.cdk-overlay-pane.ndw-popover-panel [role=dialog] {
|
|
822
|
+
animation: show var(--ndw-animation-speed-fast) ease-out;
|
|
787
823
|
background-color: var(--ndw-color-white);
|
|
788
824
|
border-radius: var(--ndw-border-radius-md);
|
|
789
825
|
box-shadow: var(--ndw-elevation-popover);
|
|
@@ -812,3 +848,35 @@ a[ndwLink][disabled] {
|
|
|
812
848
|
border-color: transparent;
|
|
813
849
|
color: var(--ndw-color-white);
|
|
814
850
|
}
|
|
851
|
+
|
|
852
|
+
.toast-container {
|
|
853
|
+
color: var(--ndw-color-white);
|
|
854
|
+
background: var(--ndw-color-grey-700);
|
|
855
|
+
padding: 0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);
|
|
856
|
+
border-radius: var(--ndw-spacing-2xs);
|
|
857
|
+
gap: var(--ndw-spacing-xs);
|
|
858
|
+
display: grid;
|
|
859
|
+
grid-template-columns: 1fr auto;
|
|
860
|
+
align-items: center;
|
|
861
|
+
font-size: var(--ndw-font-size-sm);
|
|
862
|
+
height: var(--ndw-spacing-lg);
|
|
863
|
+
width: fit-content;
|
|
864
|
+
opacity: 1;
|
|
865
|
+
}
|
|
866
|
+
.toast-container .toast-content {
|
|
867
|
+
white-space: nowrap;
|
|
868
|
+
overflow: hidden;
|
|
869
|
+
text-overflow: ellipsis;
|
|
870
|
+
max-width: 100%;
|
|
871
|
+
display: inline-block;
|
|
872
|
+
}
|
|
873
|
+
.toast-container ndw-icon {
|
|
874
|
+
font-size: var(--ndw-font-size-lg);
|
|
875
|
+
justify-self: end;
|
|
876
|
+
cursor: pointer;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.toast-container.fade-out {
|
|
880
|
+
transition: opacity 200ms ease-in;
|
|
881
|
+
opacity: 0;
|
|
882
|
+
}
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
import { Component, contentChildren, inject, input } from '@angular/core';
|
|
1
|
+
import { Component, contentChildren, inject, input, DestroyRef } from '@angular/core';
|
|
2
2
|
import { AccordionService } from './accordion.service';
|
|
3
3
|
import { CollapsibleComponent } from '../collapsible';
|
|
4
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
export class AccordionComponent {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.collapseOthers = input(false);
|
|
8
9
|
this.collapsibles = contentChildren(CollapsibleComponent);
|
|
9
10
|
this.accordionService = inject(AccordionService);
|
|
11
|
+
this.destroyRef = inject(DestroyRef);
|
|
10
12
|
}
|
|
11
13
|
ngOnInit() {
|
|
12
|
-
this.accordionService.expanded
|
|
14
|
+
this.accordionService.expanded$
|
|
15
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
16
|
+
.subscribe((index) => {
|
|
13
17
|
if (!this.collapseOthers()) {
|
|
14
18
|
return;
|
|
15
19
|
}
|
|
@@ -19,10 +23,10 @@ export class AccordionComponent {
|
|
|
19
23
|
});
|
|
20
24
|
}
|
|
21
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [""] }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AccordionService], queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [""] }); }
|
|
23
27
|
}
|
|
24
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
25
29
|
type: Component,
|
|
26
|
-
args: [{ selector: 'ndw-accordion', standalone: true, imports: [], template: "<ng-content />\n" }]
|
|
30
|
+
args: [{ selector: 'ndw-accordion', standalone: true, imports: [], providers: [AccordionService], template: "<ng-content />\n" }]
|
|
27
31
|
}] });
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsZUFBZSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTlGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQVVoRSxNQUFNLE9BQU8sa0JBQWtCO0lBUi9CO1FBU1MsbUJBQWMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFOUIsaUJBQVksR0FBRyxlQUFlLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUUzQyxxQkFBZ0IsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUM1QyxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0tBZWxEO0lBYlEsUUFBUTtRQUNiLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTO2FBQzVCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDekMsU0FBUyxDQUFDLENBQUMsS0FBYSxFQUFFLEVBQUU7WUFDM0IsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxDQUFDO2dCQUMzQixPQUFPO1lBQ1QsQ0FBQztZQUVELElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxXQUFpQyxFQUFFLEVBQUU7Z0JBQ2hFLFdBQVcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxLQUFLLENBQUMsQ0FBQztZQUMxRCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs4R0FwQlUsa0JBQWtCO2tHQUFsQixrQkFBa0IsMk5BRmxCLENBQUMsZ0JBQWdCLENBQUMsdURBS1Msb0JBQW9CLDZDQ2pCNUQsa0JBQ0E7OzJGRGFhLGtCQUFrQjtrQkFSOUIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLEVBQUUsYUFHQSxDQUFDLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIGNvbnRlbnRDaGlsZHJlbiwgaW5qZWN0LCBpbnB1dCwgRGVzdHJveVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBBY2NvcmRpb25TZXJ2aWNlIH0gZnJvbSAnLi9hY2NvcmRpb24uc2VydmljZSc7XG5pbXBvcnQgeyBDb2xsYXBzaWJsZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbGxhcHNpYmxlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmR3LWFjY29yZGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtdLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2FjY29yZGlvbi5jb21wb25lbnQuc2NzcycsXG4gIHByb3ZpZGVyczogW0FjY29yZGlvblNlcnZpY2VdLFxufSlcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgY29sbGFwc2VPdGhlcnMgPSBpbnB1dChmYWxzZSk7XG5cbiAgcHVibGljIGNvbGxhcHNpYmxlcyA9IGNvbnRlbnRDaGlsZHJlbihDb2xsYXBzaWJsZUNvbXBvbmVudCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBhY2NvcmRpb25TZXJ2aWNlID0gaW5qZWN0KEFjY29yZGlvblNlcnZpY2UpO1xuICBwcml2YXRlIHJlYWRvbmx5IGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYWNjb3JkaW9uU2VydmljZS5leHBhbmRlZCRcbiAgICAgIC5waXBlKHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxuICAgICAgLnN1YnNjcmliZSgoaW5kZXg6IG51bWJlcikgPT4ge1xuICAgICAgICBpZiAoIXRoaXMuY29sbGFwc2VPdGhlcnMoKSkge1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY29sbGFwc2libGVzKCkuZm9yRWFjaCgoY29sbGFwc2libGU6IENvbGxhcHNpYmxlQ29tcG9uZW50KSA9PiB7XG4gICAgICAgICAgY29sbGFwc2libGUuZXhwYW5kZWQuc2V0KGNvbGxhcHNpYmxlLmluZGV4KCkgPT09IGluZGV4KTtcbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cbiJdfQ==
|
|
@@ -9,12 +9,9 @@ export class AccordionService {
|
|
|
9
9
|
this.expanded$.next(index);
|
|
10
10
|
}
|
|
11
11
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
12
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService
|
|
12
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService }); }
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, decorators: [{
|
|
15
|
-
type: Injectable
|
|
16
|
-
args: [{
|
|
17
|
-
providedIn: 'root',
|
|
18
|
-
}]
|
|
15
|
+
type: Injectable
|
|
19
16
|
}] });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
17
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZHcvc3JjL2NvbXBvbmVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFHL0IsTUFBTSxPQUFPLGdCQUFnQjtJQUQ3QjtRQUVTLGNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBVSxDQUFDO0tBSzFDO0lBSFEsc0JBQXNCLENBQUMsS0FBYTtRQUN6QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDOzhHQUxVLGdCQUFnQjtrSEFBaEIsZ0JBQWdCOzsyRkFBaEIsZ0JBQWdCO2tCQUQ1QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uU2VydmljZSB7XG4gIHB1YmxpYyBleHBhbmRlZCQgPSBuZXcgU3ViamVjdDxudW1iZXI+KCk7XG5cbiAgcHVibGljIHNldEV4cGFuZGVkQ29sbGFwc2libGUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMuZXhwYW5kZWQkLm5leHQoaW5kZXgpO1xuICB9XG59XG4iXX0=
|