@ndwnu/design-system 9.1.0 → 10.0.0

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

@@ -11,6 +11,7 @@ export declare class MultiSelectComponent {
     readonly noResultText: import("@angular/core").InputSignal<string>;
     readonly chevron: import("@angular/core").InputSignal<boolean>;
     readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly selectAmountHidden: import("@angular/core").InputSignal<boolean>;
     readonly selectAllText: import("@angular/core").InputSignal<SelectAllText>;
     readonly dataSource: import("@angular/core").ModelSignal<CheckboxData[]>;
     protected readonly lastCheckedElementId: import("@angular/core").ModelSignal<string | number | null | undefined>;
@@ -24,5 +25,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, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "lastCheckedElementId": "lastCheckedElementIdChange"; "searchInputValue": "searchInputValueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAmountHidden": { "alias": "selectAmountHidden"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "lastCheckedElementId": "lastCheckedElementIdChange"; "searchInputValue": "searchInputValueChange"; }, never, never, true, never>;
 }

package/lib/components/popover/popover-trigger.directive.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+type PopoverPosition = 'nextToTriggerButton' | 'overTriggerButton';
 export declare class PopoverTriggerDirective implements OnDestroy {
     popoverToggled: EventEmitter<boolean>;
-    popoverPosition: import("@angular/core").InputSignal<string>;
+    popoverPosition: import("@angular/core").InputSignal<PopoverPosition>;
     popoverContent: import("@angular/core").InputSignal<TemplateRef<unknown>>;
     toggleOnClick: import("@angular/core").InputSignal<boolean>;
     isOpen: import("@angular/core").ModelSignal<boolean>;
@@ -25,3 +26,4 @@ export declare class PopoverTriggerDirective implements OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[ndwPopoverTrigger]", ["ndwPopoverTrigger"], { "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverContent": { "alias": "ndwPopoverTrigger"; "required": true; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "popoverToggled": "popoverToggled"; "isOpen": "isOpenChange"; }, never, never, true, never>;
 }
+export {};

package/lib/components/router-breadcrumbs/router-breadcrumbs.component.d.ts

@@ -1,15 +1,6 @@
+import { CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
 import * as i0 from "@angular/core";
-interface RouteBreadcrumb {
-    url: string;
-    title: string;
-}
-export declare const breadcrumbRouteDataKey = "breadcrumb";
-export declare class RouterBreadcrumbsComponent {
-    private readonly route;
-    private readonly router;
-    protected readonly breadcrumbs$: import("rxjs").Observable<RouteBreadcrumb[]>;
-    private getBreadcrumbs;
+export declare class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<RouterBreadcrumbsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RouterBreadcrumbsComponent, "ndw-router-breadcrumbs", never, {}, {}, never, never, true, never>;
 }
-export {};

package/lib/components/tab-group/tab-group.component.d.ts

@@ -5,9 +5,10 @@ export declare class TabGroupComponent {
     private readonly _tabButtons;
     tabs: import("@angular/core").Signal<TabComponent[]>;
     activeTab: import("@angular/core").ModelSignal<number>;
+    inlinePadding: import("@angular/core").InputSignal<number>;
     selectTab(index: number): void;
     onKeyDown(event: KeyboardEvent): void;
     private getNextEnabledIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_tabs"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "inlinePadding": { "alias": "inlinePadding"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_tabs"], never, true, never>;
 }

package/lib/components/table/ag-grid-theme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeDefaultParams } from 'ag-grid-community';
+export declare const ndwAgGridTheme: Partial<ThemeDefaultParams>;

package/lib/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from './ag-grid-theme';

package/lib/components/toast/toast-list/toast-list.component.d.ts

@@ -0,0 +1,17 @@
+import { ToastComponent, ToastDimensions } from '../toast.component';
+import { ToastService } from '../toast.service';
+import * as i0 from "@angular/core";
+export declare class ToastListComponent {
+    protected readonly toastService: ToastService;
+    protected readonly toastComponents: import("@angular/core").Signal<readonly ToastComponent[]>;
+    protected readonly toastDimensions: import("@angular/core").WritableSignal<Map<string, ToastDimensions>>;
+    protected readonly toastOffsetHeights: import("@angular/core").Signal<number[]>;
+    protected readonly firstToastHeight: import("@angular/core").Signal<number>;
+    protected readonly totalHeightExcludingGaps: import("@angular/core").Signal<number>;
+    protected readonly maxToastWidth: import("@angular/core").Signal<number>;
+    protected setToastDimensions(id: string, dimensions: ToastDimensions): void;
+    protected pause(): void;
+    protected resume(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastListComponent, "ndw-toast-list", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,20 +1,19 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ToastComponent implements OnInit, OnDestroy {
-    private readonly renderer;
-    readonly message: import("@angular/core").InputSignal<string>;
-    readonly close: import("@angular/core").OutputEmitterRef<void>;
-    private readonly toastContainer;
-    private readonly toastProgress;
-    private interval;
-    private timeout;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    open(): void;
-    private updateProgressWidth;
-    protected startFadeOut(): void;
-    private clearInterval;
-    private clearTimeout;
+export interface ToastDimensions {
+    width: number;
+    height: number;
+}
+export declare class ToastComponent implements AfterViewInit {
+    #private;
+    message: import("@angular/core").InputSignal<string>;
+    id: import("@angular/core").InputSignal<string | undefined>;
+    duration: import("@angular/core").InputSignal<number>;
+    paused: import("@angular/core").InputSignal<boolean>;
+    showProgress: import("@angular/core").InputSignal<boolean>;
+    closed: import("@angular/core").OutputEmitterRef<void>;
+    elementDimensions: import("@angular/core").OutputEmitterRef<ToastDimensions>;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "paused": { "alias": "paused"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "elementDimensions": "elementDimensions"; }, never, never, true, never>;
 }

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

@@ -1,12 +1,31 @@
-import { OverlayRef } from '@angular/cdk/overlay';
+import { Signal } from '@angular/core';
 import * as i0 from "@angular/core";
+type ToastId = string;
+interface ToastData {
+    id: ToastId;
+    message: string;
+    duration: number;
+    remainingTime: number;
+}
 export declare class ToastService {
-    private readonly overlay;
-    private isOpen;
-    overlayRef?: OverlayRef;
-    detach(): void;
-    dispose(): void;
-    open(message: string): void;
+    #private;
+    paused: Signal<boolean>;
+    get toasts(): Signal<ToastData[]>;
+    constructor();
+    /**
+     * Close a toast by its ID. If no ID is provided, all toasts will be closed.
+     */
+    close(id?: string): void;
+    /**
+     * Open a toast notification with the given message and optional duration.
+     * @param message The message to display in the toast.
+     * @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
+     * @returns The ID of the created toast. Can be used to close the toast.
+     */
+    open(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    pause(): void;
+    resume(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
 }
+export {};

package/lib/models/index.d.ts

@@ -1 +1,2 @@
+export { Image } from '@ndwnu/core';
 export * from './aria.model';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "peerDependencies": {
     "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",
@@ -8,9 +8,11 @@
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ndwnu/core": "0.0.2-beta.1",
+    "@ndwnu/core": "0.0.3-beta.5",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/angular": "8.6.12",
+    "ag-grid-angular": "^33.3.0",
+    "ag-grid-community": "^33.3.0",
     "rxjs": "^7.8.0"
   },
   "sideEffects": false,

package/styles/base/_colors.scss

@@ -8,6 +8,7 @@
   --_grey-300: 192, 5%, 82%;
   --_grey-200: 204, 11%, 91%;
   --_grey-100: 200, 16%, 96%;
+  --_grey-50: 0, 0%, 99%;
   --_white: 0, 0%, 100%;
 
   --ndw-color-grey-700: hsl(var(--_grey-700));
@@ -17,6 +18,7 @@
   --ndw-color-grey-300: hsl(var(--_grey-300));
   --ndw-color-grey-200: hsl(var(--_grey-200));
   --ndw-color-grey-100: hsl(var(--_grey-100));
+  --ndw-color-grey-50: hsl(var(--_grey-50));
   --ndw-color-white: hsl(var(--_white));
 
   // Primary
@@ -187,7 +189,7 @@
   --_primary-200: 176, 44%, 73%;
   --_primary-300: 176, 50%, 60%;
   --_primary-400: 176, 55%, 48%;
-  --_primary-500: 176, 58%, 41%;
+  --_primary-500: 176, 53%, 33%;
   --_primary-600: 176, 60%, 34%;
   --_primary-700: 176, 68%, 21%;
   --_primary-800: 176, 68%, 13%;

package/styles/base/_variables.scss

@@ -28,6 +28,7 @@
   --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
   --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
   --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-elevation-toast: 0 0.75rem 1.25rem hsla(var(--_grey-600), 0.125);
   --ndw-backdrop-color: var(--ndw-alpha-black-040);
 
   /* Animation */

package/styles/base/colors.stories.model.ts

@@ -1,16 +1,6 @@
-import { alphas, colors, header } from './colors.stories.utils';
+import { ColorGroup } from '@ndwnu/core';
 
-interface ColorValue {
-  value?: number;
-  subName?: string;
-}
-
-export interface ColorGroup {
-  name: string;
-  colors: ColorValue[];
-}
-
-const primary: ColorGroup = {
+export const PRIMARY: ColorGroup = {
   name: 'Primary',
   colors: [
     { value: 50 },
@@ -25,7 +15,7 @@ const primary: ColorGroup = {
   ],
 };
 
-const secondary: ColorGroup = {
+export const SECONDARY: ColorGroup = {
   name: 'Secondary',
   colors: [
     { value: 50 },
@@ -39,14 +29,15 @@ const secondary: ColorGroup = {
   ],
 };
 
-const tertiary: ColorGroup = {
+export const TERTIARY: ColorGroup = {
   name: 'Tertiary',
   colors: [{ value: 400 }, { value: 500 }],
 };
 
-const grey: ColorGroup = {
+export const GREY: ColorGroup = {
   name: 'Grey',
   colors: [
+    { value: undefined, altName: 'White' },
     { value: 100 },
     { value: 200 },
     { value: 300 },
@@ -57,87 +48,32 @@ const grey: ColorGroup = {
   ],
 };
 
-const white: ColorGroup = {
-  name: 'White',
-  colors: [{ value: undefined }],
-};
-
-const links: ColorGroup = {
+export const LINK: ColorGroup = {
   name: 'Link',
   colors: [{ value: 400 }, { value: 500 }],
 };
 
-const positive: ColorGroup = {
-  name: 'Positive',
-  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
-};
-
-const warning: ColorGroup = {
-  name: 'Warning',
-  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
-};
-
-const info: ColorGroup = {
-  name: 'Info',
-  colors: [{ value: 100 }, { value: 500 }],
-};
-
-const alternative: ColorGroup = {
-  name: 'Alternative',
-  colors: [{ value: 100 }, { value: 500 }],
+export const NOTIFICATIONS: ColorGroup = {
+  name: 'Notifications',
+  colors: [
+    { value: 100, altName: 'Positive' },
+    { value: 500, altName: 'Positive' },
+    { value: 600, altName: 'Positive' },
+    { value: 100, altName: 'Warning' },
+    { value: 500, altName: 'Warning' },
+    { value: 600, altName: 'Warning' },
+    { value: 100, altName: 'Critical' },
+    { value: 200, altName: 'Critical' },
+    { value: 300, altName: 'Critical' },
+    { value: 500, altName: 'Critical' },
+    { value: 100, altName: 'Info' },
+    { value: 500, altName: 'Info' },
+    { value: 100, altName: 'Alternative' },
+    { value: 500, altName: 'Alternative' },
+  ],
 };
 
-const critical: ColorGroup = {
-  name: 'Critical',
-  colors: [{ value: 100 }, { value: 200 }, { value: 300 }, { value: 500 }],
+export const ALPHAS: ColorGroup = {
+  name: 'Alphas',
+  alphas: ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'],
 };
-
-const alphaValues = ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'];
-
-// Todo - Update color values when switching between themes
-export const template = `
-  <div class="sb">
-    <div class="sb_content overview colors">
-      <section>
-        <h2 class="ndw-heading-md">Primary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(primary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Secondary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(secondary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Tertiary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(tertiary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Grey</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(white)}
-        ${colors(grey)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Links</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(links)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Notifications</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(positive)}
-        ${colors(info)}
-        ${colors(warning)}
-        ${colors(critical)}
-        ${colors(alternative)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Alpha</h2>
-        ${header(['Alpha', 'Name', 'Value', 'Variable'])}
-        ${alphas(alphaValues)}
-      </section>
-    </div>
-  </div>
-`;

package/styles/base/colors.stories.ts

@@ -1,11 +1,21 @@
+import { template } from '@ndwnu/core';
 import { type Meta, type StoryObj } from '@storybook/angular';
 
-import { template } from './colors.stories.model';
+import {
+  ALPHAS,
+  GREY,
+  LINK,
+  NOTIFICATIONS,
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+} from './colors.stories.model';
 
 const meta: Meta = {
   title: 'Core/Colors',
-  tags: ['autodocs', 'ndw', 'nwb', 'ntm'],
-  render: () => ({ template }),
+  render: () => ({
+    template: template([PRIMARY, SECONDARY, TERTIARY, GREY, LINK, NOTIFICATIONS, ALPHAS]),
+  }),
 } as Meta;
 
 export default meta;

package/styles/base/typography.stories.ts

@@ -1,16 +1,11 @@
+import { TypographyVariant } from '@ndwnu/core';
 import { type Meta, type StoryObj } from '@storybook/angular';
 
 interface StoryArgs {
-  typographyList: Typography[];
+  typographyList: TypographyVariant[];
 }
 
-interface Typography {
-  fontSize: string;
-  fontSizeInRem: string;
-  class: string;
-}
-
-const typographyList: Typography[] = [
+const typographyList: TypographyVariant[] = [
   {
     fontSize: '40px',
     fontSizeInRem: '2.5rem',
@@ -92,7 +87,7 @@ const meta: Meta<StoryArgs> = {
             </div>
             ${typographyList
               .map(
-                (typography: Typography) => `
+                (typography: TypographyVariant) => `
               <div class="content ${typography.class}">
                 <span>${typography.fontSize} / ${typography.fontSizeInRem}</span>
                 <span>150%</span>

package/styles/components/_divider.scss

@@ -1,5 +1,5 @@
 hr[ndwDivider] {
-  background-color: var(--ndw-color-grey-300);
+  background-color: var(--ndw-color-grey-200);
   border: none;
   height: var(--ndw-border-size-sm);
   margin: var(--ndw-spacing-xs) 0;

package/styles/components/_input.scss

@@ -100,10 +100,6 @@
   padding-inline-end: var(--ndw-spacing-xs);
 }
 
-.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
-  background-color: var(--ndw-color-white);
-}
-
 .input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
   background-color: var(--ndw-color-white);
   select[ndwInput] {

package/styles/components/_map.scss

@@ -0,0 +1,114 @@
+@use '../base/typography' as *;
+
+.map-control {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+
+  height: 40px;
+  min-width: 40px;
+  line-height: 100%;
+
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border-radius: var(--ndw-border-radius-sm);
+  box-shadow: var(--ndw-elevation-content);
+
+  @include ndw-paragraph-bold-md;
+  color: var(--ndw-color-grey-500);
+  background-color: var(--ndw-color-white);
+  transition: var(--ndw-animation-speed-default);
+  will-change: background-color, color;
+
+  &:hover {
+    background-color: var(--ndw-color-grey-100);
+  }
+
+  &.active {
+    color: var(--ndw-color-primary-500);
+
+    ndw-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    .map-control__chevron {
+      rotate: 180deg;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    color: var(--ndw-color-grey-300);
+  }
+
+  .map-control__chevron {
+    pointer-events: none;
+    padding: 0.25rem;
+    color: var(--ndw-color-primary);
+
+    transition-property: rotate;
+    transition-duration: var(--ndw-animation-speed-fast);
+    transition-timing-function: ease-out;
+    transition-delay: 0s;
+  }
+
+  .content-wrapper:not(:empty) {
+    @include ndw-paragraph-bold-md;
+    line-height: 1rem;
+    padding-inline: var(--ndw-spacing-xs);
+  }
+
+  > button {
+    @include ndw-paragraph-bold-md;
+
+    border: none;
+    background: none;
+    padding: var(--ndw-spacing-xs);
+
+    color: var(--ndw-color-grey-600);
+    font-size: var(--ndw-font-size-sm);
+    font-weight: var(--ndw-font-weight-bold);
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+.map-control-dropdown {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  padding: var(--ndw-spacing-2xs);
+  width: 226px;
+
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border-radius: var(--ndw-border-radius-sm);
+  box-shadow: var(--ndw-elevation-dropdown);
+
+  background-color: var(--ndw-color-white);
+
+  &:not(.fixed) {
+    max-height: 380px;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ndw-spacing-xs);
+    padding: var(--ndw-spacing-xs) 0 var(--ndw-spacing-xs) var(--ndw-spacing-2xs);
+
+    h3 {
+      color: var(--ndw-color-grey-600);
+      margin-block: 0;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}

package/styles/components/_table.scss

@@ -0,0 +1,8 @@
+.ag-root-wrapper {
+  padding: var(--ndw-spacing-md);
+  box-shadow: var(--ndw-elevation-content);
+
+  .ag-header-cell-text {
+    text-transform: uppercase;
+  }
+}

package/styles/components/index.scss

@@ -10,3 +10,5 @@
 @forward 'menu-button';
 @forward 'popover';
 @forward 'summary-card';
+@forward 'table';
+@forward 'map';

package/lib/components/form-field/autosuggest/autosuggest-option/autosuggest-option.model.d.ts

@@ -1,5 +0,0 @@
-import { AutosuggestOptionComponent } from './autosuggest-option.component';
-import { AutosuggestAddOptionComponent } from '../autosuggest-add-option';
-export type AutosuggestOption<T = string> = T;
-export type AutosuggestOptions<T = string> = AutosuggestOption<T>[];
-export type AutosuggestOptionComponentType<T> = AutosuggestOptionComponent<T> | AutosuggestAddOptionComponent<T>;

package/lib/components/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.d.ts

@@ -1,26 +0,0 @@
-import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
-import { EventEmitter, OnDestroy } from '@angular/core';
-import { AutocompleteOptionSelectionChange } from './autosuggest-option.component';
-import * as i0 from "@angular/core";
-export declare abstract class BaseAutosuggestOptionComponent<T> implements FocusableOption, OnDestroy {
-    readonly value: import("@angular/core").InputSignal<T | undefined>;
-    readonly selectionChange: EventEmitter<AutocompleteOptionSelectionChange<T>>;
-    protected _active: boolean;
-    protected _selected: boolean;
-    get active(): boolean;
-    get selected(): boolean;
-    private readonly element;
-    private readonly changeDetectorRef;
-    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
-    setActiveStyles(): void;
-    setInactiveStyles(): void;
-    select(emitEvent?: boolean): void;
-    deselect(emitEvent?: boolean): void;
-    handleKeydown(event: KeyboardEvent): void;
-    selectViaInteraction(): void;
-    protected abstract emitSelectionChangeEvent(isUserInput?: boolean): void;
-    ngOnDestroy(): void;
-    protected getHostElement(): HTMLElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseAutosuggestOptionComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BaseAutosuggestOptionComponent<any>, "ng-component", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}