@ndwnu/design-system 1.1.1 → 2.0.0

package/components/multi-select/multi-select.component.d.ts

@@ -3,19 +3,20 @@ import { CheckboxData } from './checkbox-data.interface';
 import { SelectAllText } from './select-all-text.interface';
 import * as i0 from "@angular/core";
 export declare class MultiSelectComponent {
-    readonly disabled: import("@angular/core").InputSignal<boolean>;
     readonly dropdownTrigger: import("@angular/core").Signal<PopoverTriggerDirective>;
     readonly buttonText: import("@angular/core").InputSignal<string>;
+    readonly searchLabel: import("@angular/core").InputSignal<string>;
     readonly prefixIcon: import("@angular/core").InputSignal<string>;
-    readonly chevron: import("@angular/core").InputSignal<boolean>;
-    readonly searchInputValue: import("@angular/core").ModelSignal<string>;
     readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
     readonly noResultText: import("@angular/core").InputSignal<string>;
+    readonly chevron: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
     readonly selectAllText: import("@angular/core").InputSignal<SelectAllText>;
     readonly lastCheckedElementId: import("@angular/core").ModelSignal<string | number | null | undefined>;
+    readonly dataSource: import("@angular/core").ModelSignal<CheckboxData[]>;
+    readonly searchInputValue: import("@angular/core").ModelSignal<string>;
     readonly selectAmount: import("@angular/core").Signal<number>;
     readonly noSearchResults: import("@angular/core").Signal<boolean>;
-    readonly dataSource: import("@angular/core").ModelSignal<CheckboxData[]>;
     filterSearch(value: string): boolean;
     searchInputChanged(event: Event): void;
     checkboxChanged(id: string | number): void;
@@ -23,5 +24,5 @@ export declare class MultiSelectComponent {
     isOpenChanged(isOpen: boolean): void;
     private determineLastCheckedElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; }, { "searchInputValue": "searchInputValueChange"; "lastCheckedElementId": "lastCheckedElementIdChange"; "dataSource": "dataSourceChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": true; "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; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; }, { "lastCheckedElementId": "lastCheckedElementIdChange"; "dataSource": "dataSourceChange"; "searchInputValue": "searchInputValueChange"; }, never, never, true, never>;
 }

package/components/pill/pill.component.d.ts

@@ -1,8 +1,16 @@
 import { PillColor } from './pill.model';
 import * as i0 from "@angular/core";
 export declare class PillComponent {
+    /**
+     * The color of the pill.
+     */
     readonly color: import("@angular/core").InputSignal<PillColor>;
+    /**
+     * The content of the pill.
+     */
+    private readonly content;
     get hostClass(): string[];
+    protected get title(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<PillComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "ndw-pill", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/removable-pill/removable-pill.component.d.ts

@@ -1,7 +1,14 @@
 import * as i0 from "@angular/core";
 export declare class RemovablePillComponent {
+    /**
+     * Disables the pill
+     */
     disabled: import("@angular/core").InputSignal<boolean>;
-    get tabindexAttr(): number;
+    /**
+     * Aria label for the remove button
+     */
+    removeAriaLabel: import("@angular/core").InputSignal<string>;
+    onClick: import("@angular/core").OutputEmitterRef<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RemovablePillComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RemovablePillComponent, "ndw-removable-pill", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RemovablePillComponent, "ndw-removable-pill", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }

package/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toast.component';
+export * from './toast.service';

package/components/toast/toast.component.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ToastComponent implements OnInit, OnDestroy {
+    readonly message: import("@angular/core").ModelSignal<string>;
+    readonly close: import("@angular/core").OutputEmitterRef<void>;
+    private interval;
+    private readonly renderer;
+    private readonly toastContainer;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    open(): void;
+    private updateGradient;
+    protected startFadeOut(): void;
+    private checkForExistingToast;
+    private truncateText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "message": "messageChange"; "close": "close"; }, never, never, true, never>;
+}

package/components/toast/toast.service.d.ts

@@ -0,0 +1,12 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+export declare class ToastService {
+    private readonly overlay;
+    private isOpen;
+    overlayRef?: OverlayRef;
+    detach(): void;
+    dispose(): void;
+    open(message: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}

package/components/tooltip/tooltip.directive.d.ts

@@ -4,11 +4,15 @@ export declare class TooltipDirective implements OnDestroy, OnInit {
     text: import("@angular/core").InputSignal<string>;
     private readonly elementRef;
     private readonly overlay;
+    private readonly ariaDescriber;
     private overlayRef;
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected show(): void;
     protected hide(): void;
+    protected hideOnEscape(): void;
+    private updateAriaDescription;
+    private getFlexibleConnectedPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/core/styles/ndw-styles.scss

@@ -264,6 +264,7 @@
   --ndw-font-family-body: "Nunito Sans", sans-serif;
   --ndw-font-family-heading: "DM Sans", sans-serif;
   --ndw-base-font-size: 16px;
+  --ndw-font-size-2xs: 0.5625rem;
   --ndw-font-size-xs: 0.6875rem;
   --ndw-font-size-sm: 0.8125rem;
   --ndw-font-size-md: 1.125rem;
@@ -275,9 +276,27 @@
   --ndw-line-height-md: 1.5em;
   /* Transform */
   --ndw-rotate-half: rotate(180deg);
+  /* Modal */
+  --ndw-modal-width-sm: 31.25rem;
+  --ndw-modal-width-md: 45rem;
 }
 
 /* Screen sizes */
+/**
+ Utilities for improving accessibility with screen readers.
+*/
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+}
+
 /* Mixins */
 /* Classes */
 .ndw-heading-xl {
@@ -562,12 +581,21 @@
   }
 }
 
+.ndw-overlay-backdrop {
+  background-color: var(--ndw-backdrop-color);
+}
+
+button:not(:disabled) {
+  cursor: pointer;
+}
+
 [ndwButton] {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--ndw-spacing-2xs);
   height: var(--ndw-spacing-xl);
+  justify-content: center;
   padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
   width: fit-content;
   cursor: pointer;
@@ -580,6 +608,7 @@
   font-size: var(--ndw-font-size-sm);
   font-weight: var(--ndw-font-weight-regular);
   text-align: start;
+  text-decoration: none;
 }
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
@@ -594,35 +623,43 @@
   border-color: var(--ndw-background-primary-active);
   color: var(--ndw-foreground-primary-active);
 }
-[ndwButton][outline] {
+[ndwButton][secondary], [ndwButton][tertiary] {
   background-color: transparent;
-  border-color: var(--ndw-background-primary);
   color: var(--ndw-text-primary);
 }
-[ndwButton][outline]:hover {
-  background-color: var(--ndw-background-primary);
+[ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
+  background-color: var(--ndw-alpha-primary-007);
+  color: var(--ndw-text-primary);
+}
+[ndwButton][secondary]:active, [ndwButton][tertiary]:active {
+  background-color: var(--ndw-alpha-primary-015);
+}
+[ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
+  color: var(--ndw-color-grey-700);
+}
+[ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
+  background-color: var(--ndw-alpha-black-007);
+}
+[ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
+  background-color: var(--ndw-alpha-black-015);
+}
+[ndwButton][secondary] {
   border-color: var(--ndw-background-primary);
-  color: var(--ndw-foreground-primary);
 }
-[ndwButton][outline]:active {
-  background-color: var(--ndw-background-primary-hover);
+[ndwButton][secondary]:active {
   border-color: var(--ndw-background-primary-hover);
-  color: var(--ndw-foreground-primary-hover);
 }
-[ndwButton][secondary] {
-  background-color: transparent;
+[ndwButton][secondary][alternative] {
   border-color: var(--ndw-color-grey-300);
-  color: var(--ndw-color-grey-700);
 }
-[ndwButton][secondary]:hover {
-  background-color: var(--ndw-color-grey-500);
+[ndwButton][secondary][alternative]:hover {
   border-color: var(--ndw-color-grey-500);
-  color: var(--ndw-color-white);
 }
-[ndwButton][secondary]:active {
-  background-color: var(--ndw-color-grey-700);
+[ndwButton][secondary][alternative]:active {
   border-color: var(--ndw-color-grey-700);
-  color: var(--ndw-color-white);
+}
+[ndwButton][tertiary] {
+  border-color: transparent;
 }
 [ndwButton][large] {
   height: var(--ndw-spacing-2xl);
@@ -775,37 +812,36 @@ textarea[ndwInput] {
   color: var(--ndw-color-grey-400);
 }
 
-a[ndwLink] {
-  align-items: baseline;
-  color: var(--ndw-color-link-400);
+[ndwLink] {
   display: inline-flex;
-  font-size: inherit;
+  align-items: baseline;
   gap: var(--ndw-spacing-2xs);
+  padding: 0;
+  border: 0;
+  font-size: inherit;
   text-decoration: underline var(--ndw-border-size-sm) transparent;
   text-underline-offset: var(--ndw-border-size-md);
+  color: var(--ndw-color-link-400);
+  background-color: transparent;
   transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
 }
-a[ndwLink] > * {
+[ndwLink] > * {
   align-self: center;
 }
-a[ndwLink] ndw-icon {
+[ndwLink] ndw-icon {
   font-size: 1.25em;
   overflow: hidden;
 }
-a[ndwLink]:hover {
+[ndwLink]:hover {
   color: var(--ndw-color-link-500);
   text-decoration-color: var(--ndw-color-link-500);
 }
-a[ndwLink][disabled] {
+[ndwLink][disabled] {
   color: var(--ndw-color-grey-400);
   pointer-events: none;
   user-select: none;
 }
 
-.ndw-overlay-backdrop {
-  background-color: var(--ndw-backdrop-color);
-}
-
 @keyframes show {
   from {
     opacity: 0;
@@ -814,8 +850,8 @@ a[ndwLink][disabled] {
     opacity: 1;
   }
 }
-.cdk-overlay-pane.ndw-popover-panel {
-  animation: show var(--ndw-animation-speed-default) ease-in;
+.cdk-overlay-pane.ndw-popover-panel [role=dialog] {
+  animation: show var(--ndw-animation-speed-fast) ease-out;
   background-color: var(--ndw-color-white);
   border-radius: var(--ndw-border-radius-md);
   box-shadow: var(--ndw-elevation-popover);
@@ -844,3 +880,35 @@ a[ndwLink][disabled] {
   border-color: transparent;
   color: var(--ndw-color-white);
 }
+
+.toast-container {
+  color: var(--ndw-color-white);
+  background: var(--ndw-color-grey-700);
+  padding: 0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);
+  border-radius: var(--ndw-spacing-2xs);
+  gap: var(--ndw-spacing-xs);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  font-size: var(--ndw-font-size-sm);
+  height: var(--ndw-spacing-lg);
+  width: fit-content;
+  opacity: 1;
+}
+.toast-container .toast-content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+}
+.toast-container ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+  justify-self: end;
+  cursor: pointer;
+}
+
+.toast-container.fade-out {
+  transition: opacity 200ms ease-in;
+  opacity: 0;
+}

package/core/styles/nwb-styles.scss

@@ -232,6 +232,7 @@
   --ndw-font-family-body: "Nunito Sans", sans-serif;
   --ndw-font-family-heading: "DM Sans", sans-serif;
   --ndw-base-font-size: 16px;
+  --ndw-font-size-2xs: 0.5625rem;
   --ndw-font-size-xs: 0.6875rem;
   --ndw-font-size-sm: 0.8125rem;
   --ndw-font-size-md: 1.125rem;
@@ -243,9 +244,27 @@
   --ndw-line-height-md: 1.5em;
   /* Transform */
   --ndw-rotate-half: rotate(180deg);
+  /* Modal */
+  --ndw-modal-width-sm: 31.25rem;
+  --ndw-modal-width-md: 45rem;
 }
 
 /* Screen sizes */
+/**
+ Utilities for improving accessibility with screen readers.
+*/
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+}
+
 /* Mixins */
 /* Classes */
 .ndw-heading-xl {
@@ -530,12 +549,21 @@
   }
 }
 
+.ndw-overlay-backdrop {
+  background-color: var(--ndw-backdrop-color);
+}
+
+button:not(:disabled) {
+  cursor: pointer;
+}
+
 [ndwButton] {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--ndw-spacing-2xs);
   height: var(--ndw-spacing-xl);
+  justify-content: center;
   padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
   width: fit-content;
   cursor: pointer;
@@ -548,6 +576,7 @@
   font-size: var(--ndw-font-size-sm);
   font-weight: var(--ndw-font-weight-regular);
   text-align: start;
+  text-decoration: none;
 }
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
@@ -562,35 +591,43 @@
   border-color: var(--ndw-background-primary-active);
   color: var(--ndw-foreground-primary-active);
 }
-[ndwButton][outline] {
+[ndwButton][secondary], [ndwButton][tertiary] {
   background-color: transparent;
-  border-color: var(--ndw-background-primary);
   color: var(--ndw-text-primary);
 }
-[ndwButton][outline]:hover {
-  background-color: var(--ndw-background-primary);
+[ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
+  background-color: var(--ndw-alpha-primary-007);
+  color: var(--ndw-text-primary);
+}
+[ndwButton][secondary]:active, [ndwButton][tertiary]:active {
+  background-color: var(--ndw-alpha-primary-015);
+}
+[ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
+  color: var(--ndw-color-grey-700);
+}
+[ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
+  background-color: var(--ndw-alpha-black-007);
+}
+[ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
+  background-color: var(--ndw-alpha-black-015);
+}
+[ndwButton][secondary] {
   border-color: var(--ndw-background-primary);
-  color: var(--ndw-foreground-primary);
 }
-[ndwButton][outline]:active {
-  background-color: var(--ndw-background-primary-hover);
+[ndwButton][secondary]:active {
   border-color: var(--ndw-background-primary-hover);
-  color: var(--ndw-foreground-primary-hover);
 }
-[ndwButton][secondary] {
-  background-color: transparent;
+[ndwButton][secondary][alternative] {
   border-color: var(--ndw-color-grey-300);
-  color: var(--ndw-color-grey-700);
 }
-[ndwButton][secondary]:hover {
-  background-color: var(--ndw-color-grey-500);
+[ndwButton][secondary][alternative]:hover {
   border-color: var(--ndw-color-grey-500);
-  color: var(--ndw-color-white);
 }
-[ndwButton][secondary]:active {
-  background-color: var(--ndw-color-grey-700);
+[ndwButton][secondary][alternative]:active {
   border-color: var(--ndw-color-grey-700);
-  color: var(--ndw-color-white);
+}
+[ndwButton][tertiary] {
+  border-color: transparent;
 }
 [ndwButton][large] {
   height: var(--ndw-spacing-2xl);
@@ -743,37 +780,36 @@ textarea[ndwInput] {
   color: var(--ndw-color-grey-400);
 }
 
-a[ndwLink] {
-  align-items: baseline;
-  color: var(--ndw-color-link-400);
+[ndwLink] {
   display: inline-flex;
-  font-size: inherit;
+  align-items: baseline;
   gap: var(--ndw-spacing-2xs);
+  padding: 0;
+  border: 0;
+  font-size: inherit;
   text-decoration: underline var(--ndw-border-size-sm) transparent;
   text-underline-offset: var(--ndw-border-size-md);
+  color: var(--ndw-color-link-400);
+  background-color: transparent;
   transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
 }
-a[ndwLink] > * {
+[ndwLink] > * {
   align-self: center;
 }
-a[ndwLink] ndw-icon {
+[ndwLink] ndw-icon {
   font-size: 1.25em;
   overflow: hidden;
 }
-a[ndwLink]:hover {
+[ndwLink]:hover {
   color: var(--ndw-color-link-500);
   text-decoration-color: var(--ndw-color-link-500);
 }
-a[ndwLink][disabled] {
+[ndwLink][disabled] {
   color: var(--ndw-color-grey-400);
   pointer-events: none;
   user-select: none;
 }
 
-.ndw-overlay-backdrop {
-  background-color: var(--ndw-backdrop-color);
-}
-
 @keyframes show {
   from {
     opacity: 0;
@@ -782,8 +818,8 @@ a[ndwLink][disabled] {
     opacity: 1;
   }
 }
-.cdk-overlay-pane.ndw-popover-panel {
-  animation: show var(--ndw-animation-speed-default) ease-in;
+.cdk-overlay-pane.ndw-popover-panel [role=dialog] {
+  animation: show var(--ndw-animation-speed-fast) ease-out;
   background-color: var(--ndw-color-white);
   border-radius: var(--ndw-border-radius-md);
   box-shadow: var(--ndw-elevation-popover);
@@ -812,3 +848,35 @@ a[ndwLink][disabled] {
   border-color: transparent;
   color: var(--ndw-color-white);
 }
+
+.toast-container {
+  color: var(--ndw-color-white);
+  background: var(--ndw-color-grey-700);
+  padding: 0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);
+  border-radius: var(--ndw-spacing-2xs);
+  gap: var(--ndw-spacing-xs);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  font-size: var(--ndw-font-size-sm);
+  height: var(--ndw-spacing-lg);
+  width: fit-content;
+  opacity: 1;
+}
+.toast-container .toast-content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+}
+.toast-container ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+  justify-self: end;
+  cursor: pointer;
+}
+
+.toast-container.fade-out {
+  transition: opacity 200ms ease-in;
+  opacity: 0;
+}

package/esm2022/components/accordion/accordion.component.mjs

@@ -1,15 +1,19 @@
-import { Component, contentChildren, inject, input } from '@angular/core';
+import { Component, contentChildren, inject, input, DestroyRef } from '@angular/core';
 import { AccordionService } from './accordion.service';
 import { CollapsibleComponent } from '../collapsible';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i0 from "@angular/core";
 export class AccordionComponent {
     constructor() {
         this.collapseOthers = input(false);
         this.collapsibles = contentChildren(CollapsibleComponent);
         this.accordionService = inject(AccordionService);
+        this.destroyRef = inject(DestroyRef);
     }
     ngOnInit() {
-        this.accordionService.expanded$.subscribe((index) => {
+        this.accordionService.expanded$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((index) => {
             if (!this.collapseOthers()) {
                 return;
             }
@@ -19,10 +23,10 @@ export class AccordionComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: [""] }); }
+    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: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-accordion', standalone: true, imports: [], template: "<ng-content />\n" }]
+            args: [{ selector: 'ndw-accordion', standalone: true, imports: [], providers: [AccordionService], template: "<ng-content />\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsZUFBZSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdkQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBU3RELE1BQU0sT0FBTyxrQkFBa0I7SUFQL0I7UUFRUyxtQkFBYyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUU5QixpQkFBWSxHQUFHLGVBQWUsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBRTNDLHFCQUFnQixHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0tBYTlEO0lBWFEsUUFBUTtRQUNiLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBYSxFQUFFLEVBQUU7WUFDMUQsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxDQUFDO2dCQUMzQixPQUFPO1lBQ1QsQ0FBQztZQUVELElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxXQUFpQyxFQUFFLEVBQUU7Z0JBQ2hFLFdBQVcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxLQUFLLENBQUMsQ0FBQztZQUMxRCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0FqQlUsa0JBQWtCO2tHQUFsQixrQkFBa0IscVFBR1Msb0JBQW9CLDZDQ2Y1RCxrQkFDQTs7MkZEV2Esa0JBQWtCO2tCQVA5QixTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1AsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBjb250ZW50Q2hpbGRyZW4sIGluamVjdCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWNjb3JkaW9uU2VydmljZSB9IGZyb20gJy4vYWNjb3JkaW9uLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ29sbGFwc2libGVDb21wb25lbnQgfSBmcm9tICcuLi9jb2xsYXBzaWJsZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25kdy1hY2NvcmRpb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjY29yZGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9hY2NvcmRpb24uY29tcG9uZW50LnNjc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgY29sbGFwc2VPdGhlcnMgPSBpbnB1dChmYWxzZSk7XG5cbiAgcHVibGljIGNvbGxhcHNpYmxlcyA9IGNvbnRlbnRDaGlsZHJlbihDb2xsYXBzaWJsZUNvbXBvbmVudCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBhY2NvcmRpb25TZXJ2aWNlID0gaW5qZWN0KEFjY29yZGlvblNlcnZpY2UpO1xuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmFjY29yZGlvblNlcnZpY2UuZXhwYW5kZWQkLnN1YnNjcmliZSgoaW5kZXg6IG51bWJlcikgPT4ge1xuICAgICAgaWYgKCF0aGlzLmNvbGxhcHNlT3RoZXJzKCkpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICB0aGlzLmNvbGxhcHNpYmxlcygpLmZvckVhY2goKGNvbGxhcHNpYmxlOiBDb2xsYXBzaWJsZUNvbXBvbmVudCkgPT4ge1xuICAgICAgICBjb2xsYXBzaWJsZS5leHBhbmRlZC5zZXQoY29sbGFwc2libGUuaW5kZXgoKSA9PT0gaW5kZXgpO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50IC8+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25kdy9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsZUFBZSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTlGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQVVoRSxNQUFNLE9BQU8sa0JBQWtCO0lBUi9CO1FBU1MsbUJBQWMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFOUIsaUJBQVksR0FBRyxlQUFlLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUUzQyxxQkFBZ0IsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUM1QyxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0tBZWxEO0lBYlEsUUFBUTtRQUNiLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTO2FBQzVCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDekMsU0FBUyxDQUFDLENBQUMsS0FBYSxFQUFFLEVBQUU7WUFDM0IsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxDQUFDO2dCQUMzQixPQUFPO1lBQ1QsQ0FBQztZQUVELElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxXQUFpQyxFQUFFLEVBQUU7Z0JBQ2hFLFdBQVcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxLQUFLLENBQUMsQ0FBQztZQUMxRCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs4R0FwQlUsa0JBQWtCO2tHQUFsQixrQkFBa0IsMk5BRmxCLENBQUMsZ0JBQWdCLENBQUMsdURBS1Msb0JBQW9CLDZDQ2pCNUQsa0JBQ0E7OzJGRGFhLGtCQUFrQjtrQkFSOUIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLEVBQUUsYUFHQSxDQUFDLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIGNvbnRlbnRDaGlsZHJlbiwgaW5qZWN0LCBpbnB1dCwgRGVzdHJveVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBBY2NvcmRpb25TZXJ2aWNlIH0gZnJvbSAnLi9hY2NvcmRpb24uc2VydmljZSc7XG5pbXBvcnQgeyBDb2xsYXBzaWJsZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbGxhcHNpYmxlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmR3LWFjY29yZGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtdLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2FjY29yZGlvbi5jb21wb25lbnQuc2NzcycsXG4gIHByb3ZpZGVyczogW0FjY29yZGlvblNlcnZpY2VdLFxufSlcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgY29sbGFwc2VPdGhlcnMgPSBpbnB1dChmYWxzZSk7XG5cbiAgcHVibGljIGNvbGxhcHNpYmxlcyA9IGNvbnRlbnRDaGlsZHJlbihDb2xsYXBzaWJsZUNvbXBvbmVudCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBhY2NvcmRpb25TZXJ2aWNlID0gaW5qZWN0KEFjY29yZGlvblNlcnZpY2UpO1xuICBwcml2YXRlIHJlYWRvbmx5IGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYWNjb3JkaW9uU2VydmljZS5leHBhbmRlZCRcbiAgICAgIC5waXBlKHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxuICAgICAgLnN1YnNjcmliZSgoaW5kZXg6IG51bWJlcikgPT4ge1xuICAgICAgICBpZiAoIXRoaXMuY29sbGFwc2VPdGhlcnMoKSkge1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY29sbGFwc2libGVzKCkuZm9yRWFjaCgoY29sbGFwc2libGU6IENvbGxhcHNpYmxlQ29tcG9uZW50KSA9PiB7XG4gICAgICAgICAgY29sbGFwc2libGUuZXhwYW5kZWQuc2V0KGNvbGxhcHNpYmxlLmluZGV4KCkgPT09IGluZGV4KTtcbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cbiJdfQ==

package/esm2022/components/accordion/accordion.service.mjs

@@ -9,12 +9,9 @@ export class AccordionService {
         this.expanded$.next(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            type: Injectable
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZHcvc3JjL2NvbXBvbmVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFLL0IsTUFBTSxPQUFPLGdCQUFnQjtJQUg3QjtRQUlTLGNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBVSxDQUFDO0tBSzFDO0lBSFEsc0JBQXNCLENBQUMsS0FBYTtRQUN6QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDOzhHQUxVLGdCQUFnQjtrSEFBaEIsZ0JBQWdCLGNBRmYsTUFBTTs7MkZBRVAsZ0JBQWdCO2tCQUg1QixVQUFVO21CQUFDO29CQUNWLFVBQVUsRUFBRSxNQUFNO2lCQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuQEluamVjdGFibGUoe1xuICBwcm92aWRlZEluOiAncm9vdCcsXG59KVxuZXhwb3J0IGNsYXNzIEFjY29yZGlvblNlcnZpY2Uge1xuICBwdWJsaWMgZXhwYW5kZWQkID0gbmV3IFN1YmplY3Q8bnVtYmVyPigpO1xuXG4gIHB1YmxpYyBzZXRFeHBhbmRlZENvbGxhcHNpYmxlKGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLmV4cGFuZGVkJC5uZXh0KGluZGV4KTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZHcvc3JjL2NvbXBvbmVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFHL0IsTUFBTSxPQUFPLGdCQUFnQjtJQUQ3QjtRQUVTLGNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBVSxDQUFDO0tBSzFDO0lBSFEsc0JBQXNCLENBQUMsS0FBYTtRQUN6QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDOzhHQUxVLGdCQUFnQjtrSEFBaEIsZ0JBQWdCOzsyRkFBaEIsZ0JBQWdCO2tCQUQ1QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uU2VydmljZSB7XG4gIHB1YmxpYyBleHBhbmRlZCQgPSBuZXcgU3ViamVjdDxudW1iZXI+KCk7XG5cbiAgcHVibGljIHNldEV4cGFuZGVkQ29sbGFwc2libGUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMuZXhwYW5kZWQkLm5leHQoaW5kZXgpO1xuICB9XG59XG4iXX0=