@ndwnu/design-system 12.3.0 → 13.0.0

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "12.3.0",
+  "version": "13.0.0",
   "peerDependencies": {
-    "@angular/cdk": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@ndwnu/core": "2.1.1",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "@github/markdown-toolbar-element": "2.2.3",
     "dompurify": "^3.3.0",
     "marked": "^17.0.1",
+    "@ndwnu/core": "2.1.1",
     "ag-grid-angular": "^34.0.2",
     "ag-grid-community": "^34.0.2",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "shepherd.js": "^14.5.1"
   },
   "sideEffects": false,
   "module": "fesm2022/ndwnu-design-system.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/ndwnu-design-system.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/ndwnu-design-system.d.ts",
       "default": "./fesm2022/ndwnu-design-system.mjs"
     }
   },

package/styles/components/_guided-tour.scss

@@ -0,0 +1,70 @@
+@use 'shepherd.js/dist/css/shepherd.css';
+@use '../base/typography' as typo;
+@use '../components/button' as ndwButton;
+
+.shepherd-theme-ndw {
+  --image-height: 200px;
+
+  position: relative;
+  background-color: var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
+  padding: var(--ndw-spacing-lg);
+
+  &.shepherd-has-title {
+    .shepherd-header {
+      padding: 0;
+      background-color: var(--ndw-color-white);
+
+      .shepherd-title {
+        @include typo.ndw-heading-sm;
+      }
+    }
+  }
+
+  // Add padding-top when image is present to make room for the absolute positioned image
+  &.shepherd-has-image {
+    padding-top: calc(var(--image-height) + var(--ndw-spacing-lg));
+  }
+
+  .shepherd-text {
+    display: block;
+    padding: 0;
+    margin-block: var(--ndw-spacing-md);
+    @include typo.ndw-paragraph-md;
+
+    // Styling for optional step images - positioned absolutely above title
+    .shepherd-step-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      width: 100%;
+      height: var(--image-height);
+      border-radius: var(--ndw-border-radius-md) var(--ndw-border-radius-md) 0 0;
+      object-fit: cover;
+    }
+  }
+
+  .shepherd-footer {
+    padding: 0;
+
+    .primary.shepherd-button {
+      @extend [ndwButton];
+    }
+
+    .secondary.shepherd-button {
+      @extend [ndwButton], [secondary];
+    }
+
+    .tertiary.shepherd-button {
+      @extend [ndwButton], [tertiary];
+    }
+  }
+
+  // Override Shepherd's default grey arrow for elements with titles
+  &.shepherd-has-title[data-popper-placement^='bottom'] > .shepherd-arrow:before {
+    background-color: var(--ndw-color-white);
+  }
+}

package/styles/components/_input.scss

@@ -161,6 +161,19 @@
   &:has(textarea) {
     padding-inline: 0;
   }
+
+  // Set correct background color for max char counter for text areas
+  & .max-char-counter {
+    background-color: var(--ndw-color-white);
+  }
+
+  &[success] .max-char-counter {
+    background-color: var(--ndw-color-positive-100);
+  }
+
+  &[error] .max-char-counter {
+    background-color: var(--ndw-color-critical-100);
+  }
 }
 
 [ndwInput] {

package/styles/components/_menu-button.scss

@@ -3,7 +3,7 @@
     background-color: transparent;
     border-color: transparent;
     border-radius: 0;
-    color: var(--ndw-color-grey-400);
+    color: var(--ndw-color-grey-300);
     gap: var(--ndw-spacing-xs);
     height: 2.625rem;
     padding-inline: 0;

package/styles/components/index.scss

@@ -5,6 +5,7 @@
 @forward 'dropdown';
 @forward 'edit-bar';
 @forward 'filter-button';
+@forward 'guided-tour';
 @forward 'input';
 @forward 'label';
 @forward 'link';

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: 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%;
+  --_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%;
 
   --ndw-color-secondary-050: hsl(var(--_secondary-050));
   --ndw-color-secondary-100: hsl(var(--_secondary-100));

package/{index.d.ts → types/ndwnu-design-system.d.ts}

@@ -6,6 +6,7 @@ import { ControlValueAccessor, AbstractControl, NgControl } from '@angular/forms
 import { Subject, Observable } from 'rxjs';
 import * as _angular_material_datepicker from '@angular/material/datepicker';
 import { DateFilterFn, MatCalendar } from '@angular/material/datepicker';
+import Shepherd, { StepOptions, TourOptions as TourOptions$1, StepOptionsButton } from 'shepherd.js';
 import { Params } from '@angular/router';
 import * as _ndwnu_design_system from '@ndwnu/design-system';
 import { Point } from '@angular/cdk/drag-drop';
@@ -19,6 +20,7 @@ declare class CollapsibleComponent {
     checkable: _angular_core.InputSignal<boolean>;
     subtitle: _angular_core.InputSignal<string | undefined>;
     value: _angular_core.InputSignal<number | undefined>;
+    displayLargeNumbers: _angular_core.InputSignal<boolean>;
     expanded: _angular_core.ModelSignal<boolean>;
     private readonly accordionService;
     private readonly uuid;
@@ -26,7 +28,7 @@ declare class CollapsibleComponent {
     readonly sectionUuid: string;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["custom-header-content", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "displayLargeNumbers": { "alias": "displayLargeNumbers"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["custom-header-content", "*"], true, never>;
 }
 
 declare class AutosuggestPanelComponent extends CoreAutosuggestPanelComponent {
@@ -389,7 +391,7 @@ declare class OptionGroupComponent implements ControlValueAccessor {
     readonly mode: _angular_core.InputSignal<OptionGroupMode>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly success: _angular_core.InputSignal<boolean>;
-    protected readonly checkedValues: _angular_core.ModelSignal<unknown[]>;
+    readonly checkedValues: _angular_core.ModelSignal<unknown[]>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     protected readonly fluidColumnStyle: _angular_core.Signal<string | null>;
     readonly children: _angular_core.Signal<readonly OptionComponent[]>;
@@ -488,6 +490,7 @@ declare class ListItemComponent implements CheckableComponent {
     #private;
     active: _angular_core.ModelSignal<boolean>;
     badgeValue: _angular_core.InputSignal<number | undefined>;
+    displayLargeNumbers: _angular_core.InputSignal<boolean>;
     buttonIcon: _angular_core.InputSignal<string | undefined>;
     buttonLabel: _angular_core.InputSignal<string | undefined>;
     checkable: _angular_core.InputSignal<boolean>;
@@ -512,7 +515,7 @@ declare class ListItemComponent implements CheckableComponent {
     onCheckClick(event: Event): void;
     onListItemSelect(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ndw-list-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "checkType": { "alias": "checkType"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indented": { "alias": "indented"; "required": false; "isSignal": true; }; "pillColor": { "alias": "pillColor"; "required": false; "isSignal": true; }; "pillLabel": { "alias": "pillLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "buttonClicked": "buttonClicked"; "checked": "checkedChange"; "expanded": "expandedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ndw-list-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "displayLargeNumbers": { "alias": "displayLargeNumbers"; "required": false; "isSignal": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "checkType": { "alias": "checkType"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indented": { "alias": "indented"; "required": false; "isSignal": true; }; "pillColor": { "alias": "pillColor"; "required": false; "isSignal": true; }; "pillLabel": { "alias": "pillLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "buttonClicked": "buttonClicked"; "checked": "checkedChange"; "expanded": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 declare class ListComponent implements AfterContentInit {
@@ -749,6 +752,180 @@ declare class FavoriteComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FavoriteComponent, "ndw-favorite", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
 }
 
+interface RequiredElement {
+    message: string;
+    selector: string;
+    title: string;
+}
+interface TourOptions {
+    modal?: boolean;
+    confirmCancel?: boolean;
+}
+interface StepImage {
+    url: string;
+    alt?: string;
+}
+/**
+ * Extended step options with NDW-specific features.
+ * Extends Shepherd's StepOptions with additional properties like image support.
+ *
+ * Note: When using the `image` property, the 'shepherd-has-image' class will be added automatically.
+ */
+interface NdwStepOptions extends StepOptions {
+    /**
+     * Optional image to display at the top of the tour step
+     */
+    image?: StepImage;
+}
+
+declare class GuidedTourService {
+    #private;
+    confirmCancel: TourOptions$1['confirmCancel'];
+    confirmCancelMessage?: TourOptions$1['confirmCancelMessage'];
+    defaultStepOptions: StepOptions;
+    errorTitle?: string;
+    exitOnEsc: TourOptions$1['exitOnEsc'];
+    isActive: boolean;
+    keyboardNavigation: TourOptions$1['keyboardNavigation'];
+    messageForUser: string | null;
+    modal: boolean;
+    requiredElements: RequiredElement[];
+    tourName: TourOptions$1['tourName'];
+    tourObject: InstanceType<typeof Shepherd.Tour> | null;
+    back(): void;
+    cancel(): void;
+    complete(): void;
+    hide(): void;
+    next(): void;
+    /**
+     * Show a specific step, by passing its id
+     * @param id The id of the step you want to show
+     */
+    show(id: string | number): void;
+    start(): void;
+    /**
+     * Take a set of steps and create a tour object based on the current configuration
+     * @param steps An array of steps
+     */
+    addSteps(steps: StepOptions[]): void;
+    /**
+     * Observes the array of requiredElements, which are the elements that must be present at the start of the tour,
+     * and determines if they exist, and are visible, if either is false, it will stop the tour from executing.
+     */
+    private requiredElementsPresent;
+    /**
+     * Initializes the tour, creates a new Shepherd.Tour. sets options, and binds events
+     */
+    private _initialize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GuidedTourService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GuidedTourService>;
+}
+
+/**
+ * Abstract base class for creating tour services with storage persistence.
+ * Extend this class to create a tour that remembers if the user has already seen it.
+ */
+declare abstract class BaseTourService {
+    #private;
+    protected readonly guidedTourService: GuidedTourService;
+    protected readonly browserStorage: Storage;
+    protected abstract storageKey: string;
+    protected abstract getTourSteps(): NdwStepOptions[];
+    protected tourOptions: TourOptions;
+    /**
+     * Converts NdwStepOptions to Shepherd StepOptions.
+     * Processes image property and adds appropriate classes.
+     */
+    private processStepOptions;
+    startTour({ skipStorageCheck }?: {
+        skipStorageCheck?: boolean;
+    }): void;
+    /**
+     * Called when the tour is completed.
+     * By default, marks the tour as completed in storage.
+     * Override this method to add custom completion logic.
+     */
+    protected onComplete(): void;
+    /**
+     * Called when the tour is cancelled.
+     * By default, marks the tour as completed in storage.
+     * Override this method to add custom cancellation logic.
+     */
+    protected onCancel(): void;
+}
+
+declare const BROWSER_STORAGE: InjectionToken<Storage>;
+type ButtonType = 'back' | 'cancel' | 'next';
+declare const nextButton: {
+    text: string;
+    type: ButtonType;
+    classes: string;
+};
+declare const backButton: {
+    text: string;
+    type: ButtonType;
+    classes: string;
+};
+declare const cancelButton: {
+    text: string;
+    type: ButtonType;
+    classes: string;
+};
+declare const finishButton: {
+    text: string;
+    type: ButtonType;
+    classes: string;
+};
+declare const defaultStepOptions: {
+    classes: string;
+    scrollTo: boolean;
+    cancelIcon: {
+        enabled: boolean;
+    };
+};
+/**
+ * Helper function to format step text with an optional image at the top.
+ * When using this with an image, make sure to add 'shepherd-has-image' to the step's classes.
+ *
+ * @param text - The text content for the step (can be HTML)
+ * @param imageUrl - Optional URL of the image to display at the top of the step
+ * @param imageAlt - Optional alt text for the image (defaults to 'Tour step image')
+ * @returns Formatted HTML string with image (if provided) and text
+ *
+ * @example
+ * ```typescript
+ * {
+ *   title: 'Welcome',
+ *   text: formatStepWithImage('Description', 'https://example.com/image.jpg'),
+ *   classes: 'shepherd-theme-ndw shepherd-has-image', // Add shepherd-has-image class
+ *   buttons: [nextButton]
+ * }
+ * ```
+ */
+declare const formatStepWithImage: (text: string, imageUrl?: string, imageAlt?: string) => string;
+
+type ShepherdButton = StepOptionsButton & {
+    type?: 'back' | 'cancel' | 'next';
+};
+/**
+ * Creates a button of the specified type, with the given classes and text
+ *
+ * @param this The GuidedTourService instance to bind the button actions to
+ * @param button The button configuration
+ * @returns The constructed button
+ */
+declare function makeButton(this: GuidedTourService, button: ShepherdButton): ShepherdButton;
+
+/**
+ * Checks if an element is hidden from the user.
+ * Detects: display:none, visibility:hidden, opacity:0, zero dimensions,
+ * and hidden ancestors.
+ *
+ * @param element The element to check for visibility
+ * @returns true if element is hidden
+ */
+declare function elementIsHidden(element: HTMLElement): boolean;
+
 interface HoverableListItemAction {
     id: string | number;
     icon: string;
@@ -847,7 +1024,7 @@ declare class LoaderComponent {
 
 declare class MapButtonComponent {
     #private;
-    readonly icon: _angular_core.InputSignal<"search" | "polygon" | "direction" | "gps" | "high-res" | "layers" | "zoom-in" | "zoom-out" | "add-traffic-sign" | "add-zone" | "download" | "hectometer" | "low-res" | "zoom-to-content">;
+    readonly icon: _angular_core.InputSignal<"search" | "polygon" | "direction" | "gps" | "high-res" | "layers" | "zoom-in" | "zoom-out" | "mail" | "add-traffic-sign" | "add-zone" | "download" | "hectometer" | "low-res" | "zoom-to-content">;
     readonly active: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -859,9 +1036,9 @@ declare class MapButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapButtonComponent, "ndw-map-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
-declare const fontMapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out"];
+declare const fontMapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out", "mail"];
 declare const svgMapButtonIcons: readonly ["add-traffic-sign", "add-zone", "download", "hectometer", "low-res", "zoom-to-content"];
-declare const mapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out", "add-traffic-sign", "add-zone", "download", "hectometer", "low-res", "zoom-to-content"];
+declare const mapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out", "mail", "add-traffic-sign", "add-zone", "download", "hectometer", "low-res", "zoom-to-content"];
 type MapButtonIcon = (typeof mapButtonIcons)[number];
 
 type DisplayOptionType = 'none' | 'button' | 'radio' | 'checkbox';
@@ -1094,20 +1271,25 @@ declare class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent
 declare class SplitterComponent implements AfterViewInit, OnDestroy {
     readonly disabled: _angular_core.InputSignal<boolean>;
     /**
-     * Optional width of the first panel (in pixels) when the component is initialized.
+     * If true, the splitter is horizontal (splits top and bottom panels).
+     * Otherwise, it is vertical (splits left and right panels).
+     */
+    readonly horizontal: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional size of the first panel (in pixels) when the component is initialized.
      */
-    readonly initialPanelWidth: _angular_core.InputSignal<number | undefined>;
+    readonly initialPanelSize: _angular_core.InputSignal<number | null>;
     /**
-     * Minimum width of both panels (in pixels).
+     * Minimum size of both panels (in pixels).
      */
-    readonly minimumPanelWidth: _angular_core.InputSignal<number>;
-    protected readonly firstPanelWidth: _angular_core.WritableSignal<number>;
-    protected readonly secondPanelWidth: _angular_core.Signal<number>;
+    readonly minimumPanelSize: _angular_core.InputSignal<number>;
+    protected readonly firstPanelSize: _angular_core.WritableSignal<number>;
+    protected readonly secondPanelSize: _angular_core.Signal<number>;
     protected readonly isDragging: _angular_core.WritableSignal<boolean>;
     private readonly container;
     private readonly splitter;
     private readonly cdkDrag;
-    private storedFirstPanelWidth;
+    private storedFirstPanelSize;
     /**
      * Flag to indicate if the mouse click event should be
      * ignored because the user is dragging the splitter.
@@ -1120,42 +1302,42 @@ declare class SplitterComponent implements AfterViewInit, OnDestroy {
     private readonly dragElementDimensions;
     private readonly resizeObserver;
     /**
-     * Available width for the panels, without considering the `minimumPanelWidth` input.
+     * Available size for the panels, without considering the `minimumPanelSize` input.
      */
-    private readonly availableWidth;
+    private readonly availableSize;
     /**
      * Position of the drag handle when the component is initialized.
      * The drag position is always relative to this starting position.
      */
     private readonly dragStartPosition;
     /**
-     * Minimum panel width that is safe to use, considering the
-     * available container width and the `minimumPanelWidth` input.
+     * Minimum panel size that is safe to use, considering the
+     * available container size and the `minimumPanelSize` input.
      */
-    protected readonly safeMinPanelWidth: _angular_core.Signal<number>;
+    protected readonly safeMinPanelSize: _angular_core.Signal<number>;
     /**
-     * Maximum panel width that is safe to use, considering the
-     * available container width and the `minimumPanelWidth
+     * Maximum panel size that is safe to use, considering the
+     * available container size and the `minimumPanelSize
      */
-    protected readonly safeMaxPanelWidth: _angular_core.Signal<number>;
+    protected readonly safeMaxPanelSize: _angular_core.Signal<number>;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    protected constrainPosition: (userPointerPosition: Point) => {
+    protected constrainPosition: _angular_core.Signal<(userPointerPosition: Point) => {
         x: number;
         y: number;
-    };
+    }>;
     protected onDragStarted(): void;
     protected onDragEnded(): void;
     protected onDragMoved(): void;
     protected onSplitterMouseDown(): void;
     protected onSplitterMouseUp(): void;
     protected setDragPosition(position: number): void;
-    protected storeFirstPanelWidth(): void;
-    private setFirstPanelWidth;
-    private clampPanelWidth;
+    protected storeFirstPanelSize(): void;
+    private setFirstPanelSize;
+    private clampPanelSize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "initialPanelWidth": { "alias": "initialPanelWidth"; "required": false; "isSignal": true; }; "minimumPanelWidth": { "alias": "minimumPanelWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "initialPanelSize": { "alias": "initialPanelSize"; "required": false; "isSignal": true; }; "minimumPanelSize": { "alias": "minimumPanelSize"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
 }
 
 type SummaryActionsView = 'visible' | 'popover' | 'auto';
@@ -1207,8 +1389,9 @@ declare class SummaryCardSubtitleComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SummaryCardSubtitleComponent, "ndw-summary-card-subtitle", never, {}, {}, never, ["ndw-icon", "*"], true, never>;
 }
 
+type SwitcherValue = string | number | boolean;
 interface SwitcherOption {
-    value: string;
+    value: SwitcherValue;
     label: string;
     icon?: string;
     disabled?: boolean;
@@ -1217,21 +1400,21 @@ interface SwitcherOption {
 declare class SwitcherComponent implements ControlValueAccessor, OnInit {
     #private;
     readonly options: _angular_core.InputSignal<SwitcherOption[]>;
-    readonly selectedValue: _angular_core.ModelSignal<string | undefined>;
+    readonly selectedValue: _angular_core.ModelSignal<SwitcherValue | undefined>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly vertical: _angular_core.InputSignal<boolean>;
-    readonly selectionChange: _angular_core.OutputEmitterRef<string>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<SwitcherValue>;
     sliderHeight: string;
     sliderWidth: string;
     sliderPosition: string;
     private onChange;
     private onTouched;
     ngOnInit(): void;
-    writeValue(value: string): void;
-    registerOnChange(fn: (value: string) => void): void;
+    writeValue(value: SwitcherValue): void;
+    registerOnChange(fn: (value: SwitcherValue) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    selectOption(value: string): void;
+    selectOption(value: SwitcherValue): void;
     onKeyDown(event: KeyboardEvent, _currentIndex: number): void;
     generateId(index: number): string;
     get componentName(): string;
@@ -1248,12 +1431,13 @@ declare class TabComponent implements OnInit {
     title: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     hasError: _angular_core.InputSignal<boolean>;
+    icon: _angular_core.InputSignal<string | undefined>;
     active: boolean;
     id: _angular_core.InputSignal<string | number>;
     ngOnInit(): void;
     getNativeElement(): HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ndw-tab", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ndw-tab", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class TabGroupComponent implements OnDestroy {
@@ -1379,5 +1563,5 @@ declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, 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, 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, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, 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, OptionGroupMode, PolygonMapLegendOption, PopoverPosition, SelectAllText, SubMenuItem, SummaryActionsView, SwitcherOption, Theme, ToastDimensions };
+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 };