@ndwnu/design-system 13.0.1 → 13.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "13.0.1",
+  "version": "13.0.2",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",
@@ -11,7 +11,7 @@
     "@github/markdown-toolbar-element": "2.2.3",
     "dompurify": "^3.3.0",
     "marked": "^17.0.1",
-    "@ndwnu/core": "3.0.0",
+    "@ndwnu/core": "3.0.1",
     "ag-grid-angular": "^34.0.2",
     "ag-grid-community": "^34.0.2",
     "rxjs": "^7.8.0",

package/styles/base/_colors.scss

@@ -215,14 +215,14 @@
   --ndw-color-primary-800: hsl(var(--_primary-800));
 
   // Secondary
-  --_secondary-050: 0, 100%, 95%;
-  --_secondary-100: 0, 100%, 90%;
-  --_secondary-200: 0, 100%, 82%;
-  --_secondary-300: 0, 100%, 74%;
-  --_secondary-400: 0, 100%, 66%;
-  --_secondary-500: 0, 100%, 58%;
-  --_secondary-600: 0, 75%, 42%;
-  --_secondary-700: 0, 79%, 26%;
+  --_secondary-050: 339, 100%, 96%;
+  --_secondary-100: 333, 85%, 91%;
+  --_secondary-200: 327, 85%, 78%;
+  --_secondary-300: 324, 85%, 69%;
+  --_secondary-400: 320, 70%, 60%;
+  --_secondary-500: 312, 50%, 41%;
+  --_secondary-600: 312, 50%, 32%;
+  --_secondary-700: 312, 100%, 20%;
 
   --ndw-color-secondary-050: hsl(var(--_secondary-050));
   --ndw-color-secondary-100: hsl(var(--_secondary-100));

package/styles/components/_datepicker.scss

@@ -89,3 +89,33 @@
     }
   }
 }
+
+ndw-calendar.show-week-numbers {
+  --week-number-size: 16px;
+
+  padding-left: 1rem;
+
+  thead {
+    tr::before {
+      content: '';
+      width: var(--week-number-size);
+    }
+  }
+
+  tbody {
+    tr[data-week-number] {
+      position: relative;
+    }
+
+    // Display week numbers in the calendar
+    tr[data-week-number]::before {
+      content: attr(data-week-number);
+      position: absolute;
+      top: calc(50% - 9px);
+      left: calc(-1 * var(--week-number-size));
+      height: 8px;
+      font-size: var(--ndw-font-size-sm);
+      color: var(--ndw-color-grey-400);
+    }
+  }
+}

package/styles/layout/_grid.scss

@@ -114,7 +114,7 @@ $breakpoints: (
   container-name: ndw-c-grid;
 
   @mixin ndw-c-col-span($size, $important: false) {
-    $flag: if($important, '!important', '');
+    $flag: if(sass($important), '!important', '');
     flex: 0 0 calc((100% / 12) * #{$size}) #{$flag};
     max-width: calc((100% / 12) * #{$size}) #{$flag};
   }

package/styles/storybook/overrides.css

@@ -42,14 +42,14 @@
   --ndw-color-primary-hover: var(--ndw-color-primary-600);
   --ndw-color-primary-active: var(--ndw-color-primary-700);
 
-  --_secondary-050: 339, 67%, 94%;
-  --_secondary-100: 333, 19%, 70%;
-  --_secondary-200: 327, 17%, 47%;
-  --_secondary-300: 324, 25%, 29%;
-  --_secondary-400: 317, 26%, 23%;
-  --_secondary-500: 312, 29%, 18%;
-  --_secondary-600: 312, 29%, 15%;
-  --_secondary-700: 312, 30%, 12%;
+  --_secondary-050: 209, 100%, 96%;
+  --_secondary-100: 209, 85%, 91%;
+  --_secondary-200: 209, 85%, 78%;
+  --_secondary-300: 209, 85%, 69%;
+  --_secondary-400: 208, 100%, 46%;
+  --_secondary-500: 208, 100%, 41%;
+  --_secondary-600: 209, 100%, 32%;
+  --_secondary-700: 209, 100%, 18%;
 
   --ndw-color-secondary-050: hsl(var(--_secondary-050));
   --ndw-color-secondary-100: hsl(var(--_secondary-100));
@@ -248,14 +248,14 @@
   --ndw-color-primary-700: hsl(var(--_primary-700));
   --ndw-color-primary-800: hsl(var(--_primary-800));
 
-  --_secondary-050: 0, 100%, 95%;
-  --_secondary-100: 0, 100%, 90%;
-  --_secondary-200: 0, 100%, 82%;
-  --_secondary-300: 0, 100%, 74%;
-  --_secondary-400: 0, 100%, 66%;
-  --_secondary-500: 0, 100%, 58%;
-  --_secondary-600: 0, 75%, 42%;
-  --_secondary-700: 0, 79%, 26%;
+  --_secondary-050: 339, 100%, 96%;
+  --_secondary-100: 333, 85%, 91%;
+  --_secondary-200: 327, 85%, 78%;
+  --_secondary-300: 324, 85%, 69%;
+  --_secondary-400: 320, 70%, 60%;
+  --_secondary-500: 312, 50%, 41%;
+  --_secondary-600: 312, 50%, 32%;
+  --_secondary-700: 312, 100%, 20%;
 
   --ndw-color-secondary-050: hsl(var(--_secondary-050));
   --ndw-color-secondary-100: hsl(var(--_secondary-100));

package/styles/utils/classes.stories.ts

@@ -0,0 +1,157 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+/**
+ * The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
+ * This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
+ * Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
+ *
+ * Below is a representation of the util classes in our design system. <br>
+ * Are you missing a util class? Then please contact us so we can improve this.
+ */
+
+const meta: Meta = {
+  title: 'Core/Util classes',
+  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  render: () => ({
+    template: `
+      <style>
+        .demo-box {
+          background: var(--ndw-color-primary-050);
+          border: 1px solid var(--ndw-color-primary-500);
+          padding: 0.5rem;
+          text-align: center;
+        }
+
+        .demo-container {
+          background: var(--ndw-color-grey-100);
+          border: 1px dashed var(--ndw-color-grey-500);
+        }
+      </style>
+
+      <div class="d-flex flex-column gap-4 p-3">
+
+        <!-- Display & Flex -->
+        <section>
+          <h3>Display & Flex</h3>
+          <div class="demo-container d-flex gap-2 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">gap-2</div>
+            <div class="demo-box">flex-row</div>
+          </div>
+        </section>
+
+        <!-- Flex direction -->
+        <section>
+          <h3>Flex direction</h3>
+          <div class="demo-container d-flex flex-column gap-1 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">flex-column</div>
+            <div class="demo-box">gap-1</div>
+          </div>
+        </section>
+
+        <!-- Justify content -->
+        <section>
+          <h3>Justify content</h3>
+          <div class="demo-container d-flex justify-content-between p-2">
+            <div class="demo-box">justify-content-between</div>
+            <div class="demo-box">justify-content-between</div>
+          </div>
+          <div class="demo-container d-flex justify-content-start p-2">
+            <div class="demo-box">justify-content-start</div>
+          </div>
+          <div class="demo-container d-flex justify-content-end p-2">
+            <div class="demo-box">justify-content-end</div>
+          </div>
+        </section>
+
+        <!-- Align items -->
+        <section>
+          <h3>Align items</h3>
+          <div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
+            <div class="demo-box">align-items-center</div>
+          </div>
+          <div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
+            <div class="demo-box">align-items-start</div>
+          </div>
+          <div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
+            <div class="demo-box">align-items-end</div>
+          </div>
+        </section>
+
+        <!-- Spacing utilities -->
+        <section>
+          <h3>Spacing (margin, padding, gap)</h3>
+
+          <div class="demo-container p-3">
+            <div class="demo-box mb-2">mb-2</div>
+            <div class="demo-box mt-2">mt-2</div>
+          </div>
+          <div class="demo-container p-3">
+            <div class="p-2">
+              <div class="demo-box">p-2</div>
+            </div>
+            <div class="pt-2">
+              <div class="demo-box">pt-2</div>
+            </div>
+            <div class="pb-2">
+              <div class="demo-box">pb-2</div>
+            </div>
+          </div>
+
+          <div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
+            <div class="demo-box">m-auto</div>
+          </div>
+
+          <div class="demo-container d-flex gap-3 p-2 mt-2">
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+          </div>
+        </section>
+
+        <!-- Width / height -->
+        <section>
+          <h3>Width & Height</h3>
+          <div class="demo-container p-2" style="height: 100px;">
+            <div class="demo-box w-100 h-100">
+              w-100 / h-100
+            </div>
+          </div>
+          <div class="demo-container p-2" style="height: 100px;width: 200px;">
+            <div class="demo-box w-auto h-auto">
+              w-auto h-auto
+            </div>
+          </div>
+        </section>
+
+        <!-- Text utilities -->
+        <section>
+          <h3>Text alignment</h3>
+          <div class="demo-container p-2">
+            <div class="text-start">
+              <span class="demo-box">text-start</span>
+            </div>
+            <div class="text-center">
+              <span class="demo-box">text-center</span>
+            </div>
+            <div class="text-end">
+              <span class="demo-box">text-end</span>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};

package/types/ndwnu-design-system.d.ts

@@ -79,6 +79,7 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
     readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
     readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
     readonly elevated: _angular_core.InputSignal<boolean>;
+    readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
     protected internalDateEnabledFilter: Signal<(date: Date | null) => boolean>;
     protected readonly calendar: Signal<MatCalendar<any> | undefined>;
     protected readonly calendarElement: Signal<ElementRef<HTMLElement> | undefined>;
@@ -89,8 +90,17 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
     ngOnDestroy(): void;
     private addMouseMoveListener;
     private removeMouseMoveListener;
+    private disconnectCalendarRowMutationObserver;
     private addRangePreviewClasses;
     private removeRangePreviewClasses;
+    /**
+     * Adds a data attribute with the week number to each calendar row for styling purposes.
+     * The week number is calculated based on the date of the first button in the row, which represents the first day of that week.
+     *
+     * A mutation observer is used to handle the dynamic rendering of calendar rows by Angular Material,
+     * ensuring that the week numbers are correctly assigned whenever the calendar view changes (e.g., when navigating between months).
+     */
+    private addWeekNumberAttributes;
     protected onDateSelected(date: Date | Date[] | null, toggle?: boolean): void;
     protected onMonthSelected(date: Date): void;
     writeValue(value: Date | Date[] | null): void;
@@ -98,7 +108,7 @@ declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
     registerOnTouched(_fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ndw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ndw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 type PopoverPosition = 'nextToTriggerButton' | 'overTriggerButton';
@@ -159,6 +169,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
     readonly maxDate: _angular_core.InputSignal<Date | null>;
     readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
     readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
+    readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
     readonly input: _angular_core.Signal<InputDirective>;
     protected readonly popoverTrigger: _angular_core.Signal<PopoverTriggerDirective>;
     protected readonly value: _angular_core.ModelSignal<Date[]>;
@@ -174,7 +185,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
     registerOnTouched(_fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class ErrorComponent {
@@ -571,7 +582,7 @@ declare class AlertComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ndw-alert", never, { "actionable": { "alias": "actionable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
 }
 
-type AvatarStatus = 'approved' | 'open' | 'none';
+type AvatarStatus = 'approved' | 'declined' | 'open' | 'none';
 type AvatarColor = 'default' | 'blue' | 'purple' | 'red' | 'green' | 'yellow' | 'orange';
 
 declare class AvatarComponent {
@@ -1125,7 +1136,7 @@ declare const MAP_LAYER_IMAGES: {
 };
 declare const MAP_LAYERS: Record<string, MapDisplayOption>;
 
-type MapLegendOptionType = 'image' | 'line' | 'circle' | 'polygon' | 'icon';
+type MapLegendOptionType = 'image' | 'line' | 'circle' | 'polygon' | 'icon' | 'area';
 interface BaseMapLegendOption {
     type: MapLegendOptionType;
     label: string;
@@ -1139,6 +1150,7 @@ interface LineMapLegendOption extends BaseMapLegendOption {
     type: 'line';
     color: string;
     fillMode: 'solid' | 'dashed';
+    outline?: boolean;
 }
 interface CircleMapLegendOption extends BaseMapLegendOption {
     type: 'circle';
@@ -1148,11 +1160,15 @@ interface PolygonMapLegendOption extends BaseMapLegendOption {
     type: 'polygon';
     color: string;
 }
+interface AreaMapLegendOption extends BaseMapLegendOption {
+    type: 'area';
+    color: string;
+}
 interface IconMapLegendOption extends BaseMapLegendOption {
     type: 'icon';
     iconName: string;
 }
-type MapLegendOption = ImageMapLegendOption | LineMapLegendOption | CircleMapLegendOption | PolygonMapLegendOption | IconMapLegendOption;
+type MapLegendOption = ImageMapLegendOption | LineMapLegendOption | CircleMapLegendOption | PolygonMapLegendOption | AreaMapLegendOption | IconMapLegendOption;
 interface MapLegendOptionGroup {
     label?: string;
     options: MapLegendOption[];
@@ -1222,6 +1238,7 @@ interface CheckboxData {
     value: boolean;
     icon?: string;
     image?: Image;
+    disabled?: boolean;
 }
 
 interface SelectAllText {
@@ -1230,7 +1247,6 @@ interface SelectAllText {
 }
 
 declare class MultiSelectComponent {
-    readonly dropdownTrigger: _angular_core.Signal<PopoverTriggerDirective>;
     readonly buttonText: _angular_core.InputSignal<string>;
     readonly searchLabel: _angular_core.InputSignal<string>;
     readonly prefixIcon: _angular_core.InputSignal<string>;
@@ -1240,22 +1256,20 @@ declare class MultiSelectComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly selectAmountHidden: _angular_core.InputSignal<boolean>;
     readonly selectAllText: _angular_core.InputSignal<SelectAllText>;
+    readonly allowSelectAll: _angular_core.InputSignal<boolean>;
     readonly dataSource: _angular_core.ModelSignal<CheckboxData[]>;
-    protected readonly lastCheckedElementId: _angular_core.ModelSignal<string | number | null | undefined>;
-    protected readonly searchInputValue: _angular_core.ModelSignal<string>;
     protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly searchInputValue: _angular_core.WritableSignal<string>;
     protected readonly dataSourceSorted: _angular_core.WritableSignal<CheckboxData[]>;
+    protected readonly dataSourceFiltered: _angular_core.Signal<CheckboxData[]>;
+    protected readonly lastCheckedElementId: _angular_core.Signal<string | number | null>;
     readonly selectAmount: _angular_core.Signal<number>;
     readonly noSearchResults: _angular_core.Signal<boolean>;
-    filterSearch(value: string): boolean;
     searchInputChanged(event: Event): void;
     checkboxChanged(id: string | number): void;
     toggleSelectAll(selectAll?: boolean): void;
-    isOpenChanged(isOpen: boolean): void;
-    private determineLastCheckedElement;
-    private sortDataSource;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAmountHidden": { "alias": "selectAmountHidden"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "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: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAmountHidden": { "alias": "selectAmountHidden"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "allowSelectAll": { "alias": "allowSelectAll"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; }, never, never, true, never>;
 }
 
 declare class PillComponent extends CorePillComponent {
@@ -1564,4 +1578,4 @@ declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
 }
 
 export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
-export type { AlertType, AvatarColor, AvatarStatus, BannerType, BaseMapLegendOption, CheckType, CheckboxData, CircleMapLegendOption, DatepickerMode, DisplayOptionDirection, DisplayOptionType, EditBarPosition, EditBarWidth, Environment, FileUploadText, HoverableListItemAction, IconMapLegendOption, ImageMapLegendOption, LineMapLegendOption, MapBackgroundOption, MapBackgrounds, MapButtonIcon, MapDisplayOption, MapLegendOption, MapLegendOptionGroup, MapLegendOptionType, MapLegendViewMode, MenuItem, ModalSize, NdwStepOptions, OptionGroupMode, PolygonMapLegendOption, PopoverPosition, RequiredElement, SelectAllText, ShepherdButton, StepImage, SubMenuItem, SummaryActionsView, SwitcherOption, SwitcherValue, Theme, ToastDimensions, TourOptions };
+export type { AlertType, AreaMapLegendOption, AvatarColor, AvatarStatus, BannerType, BaseMapLegendOption, CheckType, CheckboxData, CircleMapLegendOption, DatepickerMode, DisplayOptionDirection, DisplayOptionType, EditBarPosition, EditBarWidth, Environment, FileUploadText, HoverableListItemAction, IconMapLegendOption, ImageMapLegendOption, LineMapLegendOption, MapBackgroundOption, MapBackgrounds, MapButtonIcon, MapDisplayOption, MapLegendOption, MapLegendOptionGroup, MapLegendOptionType, MapLegendViewMode, MenuItem, ModalSize, NdwStepOptions, OptionGroupMode, PolygonMapLegendOption, PopoverPosition, RequiredElement, SelectAllText, ShepherdButton, StepImage, SubMenuItem, SummaryActionsView, SwitcherOption, SwitcherValue, Theme, ToastDimensions, TourOptions };