@ndwnu/design-system 9.0.0 → 9.1.0

package/fesm2022/ndwnu-design-system.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, Component, ChangeDetectionStrategy, output, model, inject, computed, Injectable, contentChildren, DestroyRef, ElementRef, Directive, viewChild, InjectionToken, contentChild, signal, EventEmitter, ViewContainerRef, Output, ChangeDetectorRef, Pipe, NgZone, forwardRef, TemplateRef, ViewChildren, PLATFORM_ID, effect, Renderer2, afterNextRender, untracked, viewChildren } from '@angular/core';
+import { input, Component, ChangeDetectionStrategy, output, model, inject, computed, Injectable, contentChildren, DestroyRef, ElementRef, Directive, viewChild, InjectionToken, contentChild, signal, EventEmitter, ViewContainerRef, Output, ChangeDetectorRef, NgZone, forwardRef, TemplateRef, ViewChildren, PLATFORM_ID, effect, Renderer2, afterNextRender, linkedSignal, untracked, viewChildren } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { CoreIconComponent } from '@ndwnu/core';
+import { CoreIconComponent, MatchBoldPipe } from '@ndwnu/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Subject, take, merge, filter, of, map, defer, switchMap, fromEvent, delay, startWith } from 'rxjs';
-import { NgClass, NgTemplateOutlet, DOCUMENT, isPlatformBrowser, AsyncPipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, DOCUMENT, isPlatformBrowser, CommonModule, AsyncPipe } from '@angular/common';
 import { RouterLink, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { ConfigurableFocusTrapFactory, ActiveDescendantKeyManager, AriaDescriber } from '@angular/cdk/a11y';
-import { Overlay, ViewportRuler, OverlayConfig, ConnectionPositionPair } from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
+import { Overlay, ViewportRuler, OverlayConfig, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
@@ -15,7 +16,7 @@ import { hasModifierKey } from '@angular/cdk/keycodes';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { Dialog } from '@angular/cdk/dialog';
-import * as i1$1 from '@angular/cdk/drag-drop';
+import * as i1$2 from '@angular/cdk/drag-drop';
 import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 
 class BadgeComponent {
@@ -27,12 +28,17 @@ class BadgeComponent {
      * The aria label, used by screen readers to give context.
      */
     ariaLabel = input();
+    /**
+     * When true, the badge will display values above 99.
+     * When false (default), the badge will display values above 99 as a dot
+     */
+    displayLargeNumbers = input(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @if (value === 0 || value < -9 || value > 99) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--min-badge-size: 1.25rem;background-color:var(--ndw-color-notification);border-radius:var(--min-badge-size);box-sizing:border-box;color:var(--ndw-color-white);display:flex;align-items:center;justify-content:center;height:var(--min-badge-size);letter-spacing:-1px;text-align:center;padding-inline:var(--ndw-spacing-2xs);min-width:var(--min-badge-size);max-width:fit-content}.dot{display:block;background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);width:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n  @if (value === 0 || value < -9 || value > 99) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--min-badge-size: 1.25rem;background-color:var(--ndw-color-notification);border-radius:var(--min-badge-size);box-sizing:border-box;color:var(--ndw-color-white);display:flex;align-items:center;justify-content:center;height:var(--min-badge-size);letter-spacing:-1px;text-align:center;padding-inline:var(--ndw-spacing-2xs);min-width:var(--min-badge-size);max-width:fit-content}.dot{display:block;background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);width:var(--ndw-spacing-2xs)}\n"] }]
         }] });
 
 class IconComponent extends CoreIconComponent {
@@ -125,7 +131,7 @@ class CollapsibleComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()" } }, ngImport: i0, template: "<div class=\"collapsible\">\n  <h3 class=\"collapsible__header\">\n    <button\n      class=\"collapsible__button\"\n      type=\"button\"\n      [id]=\"toggleUuid\"\n      [attr.aria-controls]=\"sectionUuid\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"toggle()\"\n    >\n      {{ title() }}\n\n      @if (value(); as value) {\n        <ndw-badge [value]=\"value\" />\n      }\n\n      <ndw-icon>keyboard_arrow_down</ndw-icon>\n    </button>\n  </h3>\n\n  <section\n    role=\"region\"\n    class=\"collapsible__section\"\n    [id]=\"sectionUuid\"\n    [attr.aria-labelledby]=\"toggleUuid\"\n    [@collapsible]=\"animationState()\"\n  >\n    <ng-content />\n  </section>\n</div>\n", styles: [".collapsible{display:block;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.collapsible__header{margin:0}.collapsible__button{overflow:hidden;display:flex;gap:var(--ndw-spacing-xs);justify-content:space-between;align-items:center;padding:0;width:100%;padding-block:var(--ndw-spacing-md);border:none;font-size:var(--ndw-font-size-sm);font-family:var(--ndw-font-family-body);font-weight:var(--ndw-font-weight-bold);word-break:break-word;cursor:pointer;background-color:transparent;transition:color var(--ndw-animation-speed-fast) ease-in-out}.collapsible__button:hover{color:var(--ndw-color-primary)}.collapsible__button:focus-visible{box-shadow:var(--ndw-elevation-info);outline:none;color:var(--ndw-color-primary)}.collapsible__button ndw-icon{margin-left:auto;color:var(--ndw-color-primary);transition:transform var(--ndw-animation-speed-fast) ease-in-out;font-size:var(--ndw-spacing-lg)}.collapsible__section{display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host(.expanded) .collapsible__header ndw-icon{transform:rotate(-180deg)}:host(.expanded) .collapsible__section{display:block;margin-block:var(--ndw-spacing-sm) var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], animations: [collapsibleAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()" } }, ngImport: i0, template: "<div class=\"collapsible\">\n  <h3 class=\"collapsible__header\">\n    <button\n      class=\"collapsible__button\"\n      type=\"button\"\n      [id]=\"toggleUuid\"\n      [attr.aria-controls]=\"sectionUuid\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"toggle()\"\n    >\n      {{ title() }}\n\n      @if (value(); as value) {\n        <ndw-badge [value]=\"value\" />\n      }\n\n      <ndw-icon>keyboard_arrow_down</ndw-icon>\n    </button>\n  </h3>\n\n  <section\n    role=\"region\"\n    class=\"collapsible__section\"\n    [id]=\"sectionUuid\"\n    [attr.aria-labelledby]=\"toggleUuid\"\n    [@collapsible]=\"animationState()\"\n  >\n    <ng-content />\n  </section>\n</div>\n", styles: [".collapsible{display:block;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.collapsible__header{margin:0}.collapsible__button{overflow:hidden;display:flex;gap:var(--ndw-spacing-xs);justify-content:space-between;align-items:center;padding:0;width:100%;padding-block:var(--ndw-spacing-md);border:none;font-size:var(--ndw-font-size-sm);font-family:var(--ndw-font-family-body);font-weight:var(--ndw-font-weight-bold);word-break:break-word;cursor:pointer;background-color:transparent;transition:color var(--ndw-animation-speed-fast) ease-in-out}.collapsible__button:hover{color:var(--ndw-color-primary)}.collapsible__button:focus-visible{box-shadow:var(--ndw-elevation-info);outline:none;color:var(--ndw-color-primary)}.collapsible__button ndw-icon{margin-left:auto;color:var(--ndw-color-primary);transition:transform var(--ndw-animation-speed-fast) ease-in-out;font-size:var(--ndw-spacing-lg)}.collapsible__section{display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host(.expanded) .collapsible__header ndw-icon{transform:rotate(-180deg)}:host(.expanded) .collapsible__section{display:block;margin-block:var(--ndw-spacing-sm) var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], animations: [collapsibleAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CollapsibleComponent, decorators: [{
             type: Component,
@@ -774,24 +780,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 
 const INPUT_CONTAINER_CLASS = 'input-container';
 
-class MatchBoldPipe {
-    transform(value, searchTerm) {
-        if (!searchTerm || typeof value !== 'string') {
-            return `${value}`;
-        }
-        const regex = new RegExp(`(${searchTerm})`, 'gi');
-        return value.replace(regex, '<b>$1</b>');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MatchBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: MatchBoldPipe, isStandalone: true, name: "matchBold" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MatchBoldPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'matchBold',
-                }]
-        }] });
-
 class BaseAutosuggestOptionComponent {
     value = input();
     selectionChange = new EventEmitter();
@@ -2850,6 +2838,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [disabled]=\"disabled()\"\n  [class.active]=\"active()\"\n  [attr.aria-label]=\"iconLabel()\"\n  (click)=\"clicked.emit()\"\n  [ndwTooltip]=\"iconLabel()\"\n>\n  @if (svgIcon()) {\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n    </svg>\n  } @else {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}button{display:flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;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);color:var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}button .content-wrapper:not(:empty){font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:1rem;padding-inline:var(--ndw-spacing-xs)}button.active{color:var(--ndw-color-primary-500)}button.active ndw-icon{font-variation-settings:\"FILL\" 1}button:hover{background-color:var(--ndw-color-grey-100)}button:disabled{pointer-events:none;color:var(--ndw-color-grey-300)}\n"] }]
         }] });
 
+class MapDisplayOptionComponent {
+    option = input.required();
+    direction = input('row');
+    type = input('checkbox');
+    group = input();
+    selectionChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapDisplayOptionComponent, isStandalone: true, selector: "ndw-map-display-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "@if (type() === 'button') {\n  <button\n    type=\"button\"\n    [title]=\"option()?.description ?? ''\"\n    [class.column]=\"direction() === 'column'\"\n    (click)=\"selectionChange.emit(option())\"\n  >\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option()?.description ?? ''\">\n    <input\n      [type]=\"type()\"\n      name=\"{{ group() }}\"\n      [checked]=\"option().active\"\n      (change)=\"selectionChange.emit(option())\"\n    />\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </label>\n} @else {\n  <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n  @if (option().imageLink) {\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n  } @else {\n    <ndw-icon>stacks</ndw-icon>\n  }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-map-display-option', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'button') {\n  <button\n    type=\"button\"\n    [title]=\"option()?.description ?? ''\"\n    [class.column]=\"direction() === 'column'\"\n    (click)=\"selectionChange.emit(option())\"\n  >\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option()?.description ?? ''\">\n    <input\n      [type]=\"type()\"\n      name=\"{{ group() }}\"\n      [checked]=\"option().active\"\n      (change)=\"selectionChange.emit(option())\"\n    />\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </label>\n} @else {\n  <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n  @if (option().imageLink) {\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n  } @else {\n    <ndw-icon>stacks</ndw-icon>\n  }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"] }]
+        }] });
+
+class MapDisplayComponent {
+    title = input('Kaarweergave');
+    backgroundsTitle = input('Achtergrond');
+    layersTitle = input('Gegevens');
+    enableClearLayers = input(true);
+    layerOptionType = input('checkbox');
+    backgroundOptions = input([], {
+        transform: (options) => (options ?? []).map((bg) => ({ ...bg })),
+    });
+    layerOptions = input([], {
+        transform: (options) => (options ?? []).map((layer) => ({ ...layer })),
+    });
+    backgroundChange = output();
+    layerChange = output();
+    clearAllLayers = output();
+    open = model(false);
+    htmlIsRendered = signal(false);
+    showPopover = computed(() => this.open() && this.htmlIsRendered());
+    linkedBackgroundOptions = linkedSignal(this.backgroundOptions);
+    activeBackgroundOption = computed(() => this.linkedBackgroundOptions()?.find((opt) => opt.active));
+    linkedLayerOptions = linkedSignal(this.layerOptions);
+    numberOfSelectedLayers = computed(() => this.linkedLayerOptions()?.filter((opt) => opt.active)?.length ?? 0);
+    constructor() {
+        afterNextRender(() => this.htmlIsRendered.set(true));
+    }
+    ngOnInit() {
+        this.#initBackgroundOptions();
+    }
+    selectBackground(option) {
+        this.linkedBackgroundOptions.update((options) => options.map((opt) => ({ ...opt, active: opt.id === option.id })));
+        this.backgroundChange.emit(option);
+    }
+    toggleLayer(option) {
+        const isRadio = this.layerOptionType() === 'radio';
+        if (isRadio) {
+            this.#resetAllLayers();
+        }
+        this.linkedLayerOptions.update((options) => options.map((opt) => {
+            let newActive = !!opt.active;
+            if (opt.id === option.id) {
+                newActive = isRadio ? true : !opt.active;
+            }
+            const newOption = { ...opt, active: newActive };
+            if (newOption.active !== opt.active) {
+                this.layerChange.emit(newOption);
+            }
+            return newOption;
+        }));
+    }
+    clearLayers() {
+        this.#resetAllLayers();
+        this.clearAllLayers.emit();
+    }
+    #resetAllLayers(options) {
+        const { emitEvent = true } = options || {};
+        this.linkedLayerOptions.update((options) => options.map((opt) => {
+            const newOption = { ...opt, active: false };
+            if (opt.active && emitEvent) {
+                this.layerChange.emit(newOption);
+            }
+            return newOption;
+        }));
+    }
+    #initBackgroundOptions() {
+        const options = this.linkedBackgroundOptions();
+        const activeBackground = options?.find((opt) => opt.active);
+        if (!activeBackground && options?.length) {
+            this.selectBackground(options[0]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapDisplayComponent, isStandalone: true, selector: "ndw-map-display", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backgroundsTitle: { classPropertyName: "backgroundsTitle", publicName: "backgroundsTitle", isSignal: true, isRequired: false, transformFunction: null }, layersTitle: { classPropertyName: "layersTitle", publicName: "layersTitle", isSignal: true, isRequired: false, transformFunction: null }, enableClearLayers: { classPropertyName: "enableClearLayers", publicName: "enableClearLayers", isSignal: true, isRequired: false, transformFunction: null }, layerOptionType: { classPropertyName: "layerOptionType", publicName: "layerOptionType", isSignal: true, isRequired: false, transformFunction: null }, backgroundOptions: { classPropertyName: "backgroundOptions", publicName: "backgroundOptions", isSignal: true, isRequired: false, transformFunction: null }, layerOptions: { classPropertyName: "layerOptions", publicName: "layerOptions", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundChange: "backgroundChange", layerChange: "layerChange", clearAllLayers: "clearAllLayers", open: "openChange" }, ngImport: i0, template: "<div class=\"display\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon>keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"display-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary title=\"Button\" type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n      </button>\n    </header>\n\n    <div class=\"display-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ backgroundsTitle() }}</h4>\n          <ul class=\"display-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions()?.length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".display{position:relative;overflow:hidden;display:inline-flex;gap:var(--ndw-spacing-2xs);align-items:center;height:40px;padding:.25rem;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);background-color:var(--ndw-color-white);transition:var(--ndw-animation-speed-default)}.display:hover{background-color:var(--ndw-color-grey-100)}.display.active ndw-icon{rotate:180deg}.display button{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)}.display button:after{content:\"\";position:absolute;inset:0}.display ndw-icon{pointer-events:none;padding:.25rem;color:var(--ndw-color-primary);transition-property:rotate;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out;transition-delay:0s}.display-dropdown{max-height:380px;display:grid;grid-template-rows:max-content 1fr;padding:var(--ndw-spacing-2xs);width:226px;border:1px 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)}.display-dropdown 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)}.display-dropdown header h3{color:var(--ndw-color-grey-600);margin-block:0}.display-dropdown__content{overflow-y:auto}.display-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.display-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.display-dropdown ul.display-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.display-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-map-display', imports: [CommonModule, MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"display\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon>keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"display-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary title=\"Button\" type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n      </button>\n    </header>\n\n    <div class=\"display-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ backgroundsTitle() }}</h4>\n          <ul class=\"display-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions()?.length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".display{position:relative;overflow:hidden;display:inline-flex;gap:var(--ndw-spacing-2xs);align-items:center;height:40px;padding:.25rem;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);background-color:var(--ndw-color-white);transition:var(--ndw-animation-speed-default)}.display:hover{background-color:var(--ndw-color-grey-100)}.display.active ndw-icon{rotate:180deg}.display button{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)}.display button:after{content:\"\";position:absolute;inset:0}.display ndw-icon{pointer-events:none;padding:.25rem;color:var(--ndw-color-primary);transition-property:rotate;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out;transition-delay:0s}.display-dropdown{max-height:380px;display:grid;grid-template-rows:max-content 1fr;padding:var(--ndw-spacing-2xs);width:226px;border:1px 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)}.display-dropdown 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)}.display-dropdown header h3{color:var(--ndw-color-grey-600);margin-block:0}.display-dropdown__content{overflow-y:auto}.display-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.display-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.display-dropdown ul.display-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.display-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+const MAP_BACKGROUND_IMAGES = {
+    OSM_DEFAULT: '/assets/images/map-backgrounds/osm-default.webp',
+    OSM_BASIC: '/assets/images/map-backgrounds/osm-basic.webp',
+    OSM_COLOR_BLIND: '/assets/images/map-backgrounds/osm-color-blind.webp',
+    OSM_DARK: '/assets/images/map-backgrounds/osm-dark.webp',
+    OSM_NO_ROADS: '/assets/images/map-backgrounds/osm-default-no-roads.webp',
+    OSM_FCD_LINKS: '/assets/images/map-backgrounds/osm-default-with-fcd-links_1-5.webp',
+    OSM_FCD_ROADS: '/assets/images/map-backgrounds/osm-default-with-fcd-roads.webp',
+    OSM_FCD_SEGMENTS: '/assets/images/map-backgrounds/osm-default-with-fcd-segments.webp',
+    OSM_MST: '/assets/images/map-backgrounds/osm-default-with-mst.webp',
+    OSM_NWB_ROADS_WHITE: '/assets/images/map-backgrounds/osm-default-with-nwb-roads-white.webp',
+    OSM_NWB_ROADS: '/assets/images/map-backgrounds/osm-default-with-nwb-roads.webp',
+    OSM_DEFAULT_FULL: '/assets/images/map-backgrounds/osm-default.webp',
+    OSM_FRONT_DARK: '/assets/images/map-backgrounds/osm-front-office-dark.webp',
+    OSM_FRONT_LIGHT_NWB: '/assets/images/map-backgrounds/osm-front-office-light-with-nwb-roads.webp',
+    OSM_FRONT_LIGHT: '/assets/images/map-backgrounds/osm-front-office-light.webp',
+    OSM_GREEN: '/assets/images/map-backgrounds/osm-green.webp',
+};
+const MAP_BACKGROUNDS = {
+    OSM_BASIC: {
+        id: 'OSM_BASIC',
+        name: 'Basis',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_BASIC,
+        style: 'https://maps.ndw.nu/styles/osm-basic.json',
+    },
+    OSM_DEFAULT: {
+        id: 'OSM_DEFAULT',
+        name: 'Standaard',
+        description: 'Standaard',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_DEFAULT,
+        style: 'https://maps.ndw.nu/styles/osm-default.json',
+    },
+    OSM_COLOR_BLIND: {
+        id: 'OSM_COLOR_BLIND',
+        name: 'Kleuren',
+        description: 'Kleurenblind',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_COLOR_BLIND,
+        style: 'https://maps.ndw.nu/styles/osm-color-blind.json',
+    },
+    OSM_DARK: {
+        id: 'OSM_DARK',
+        name: 'Donker',
+        description: 'Donker',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_DARK,
+        style: 'https://maps.ndw.nu/styles/osm-dark.json',
+    },
+    OSM_NO_ROADS: {
+        id: 'OSM_NO_ROADS',
+        name: 'OSM N.R.',
+        description: 'OSM zonder wegen',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_NO_ROADS,
+        style: 'https://maps.ndw.nu/styles/osm-default-no-roads.json',
+    },
+    OSM_FCD_LINKS: {
+        id: 'OSM_FCD_LINKS',
+        name: 'FCD L.',
+        description: 'OSM met FCD links',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FCD_LINKS,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-fcd-links_1-5.json',
+    },
+    OSM_FCD_ROADS: {
+        id: 'OSM_FCD_ROADS',
+        name: 'FCD R.',
+        description: 'OSM met FCD wegen',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FCD_ROADS,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-fcd-roads.json',
+    },
+    OSM_FCD_SEGMENTS: {
+        id: 'OSM_FCD_SEGMENTS',
+        name: 'FCD S.',
+        description: 'OSM met FCD segmenten',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FCD_SEGMENTS,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-fcd-segments.json',
+    },
+    OSM_MST: {
+        id: 'OSM_MST',
+        name: 'OSM MST',
+        description: 'OSM met MST',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_MST,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-mst.json',
+    },
+    OSM_NWB_ROADS_WHITE: {
+        id: 'OSM_NWB_ROADS_WHITE',
+        name: 'NWB W.',
+        description: 'OSM met NWB wegen (wit)',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_NWB_ROADS_WHITE,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-nwb-roads-white.json',
+    },
+    OSM_NWB_ROADS: {
+        id: 'OSM_NWB_ROADS',
+        name: 'NWB',
+        description: 'OSM met NWB',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_NWB_ROADS,
+        style: 'https://maps.ndw.nu/styles/osm-default-with-nwb-roads.json',
+    },
+    OSM_DEFAULT_FULL: {
+        id: 'OSM_DEFAULT_FULL',
+        name: 'Default',
+        description: 'OSM standaard',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_DEFAULT_FULL,
+        style: 'https://maps.ndw.nu/styles/osm-default.json',
+    },
+    OSM_FRONT_DARK: {
+        id: 'OSM_FRONT_DARK',
+        name: 'OSM F.D.',
+        description: 'OSM front office donker',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FRONT_DARK,
+        style: 'https://maps.ndw.nu/styles/osm-front-office-dark.json',
+    },
+    OSM_FRONT_LIGHT_NWB: {
+        id: 'OSM_FRONT_LIGHT_NWB',
+        name: 'F.L. NWB',
+        description: 'OSM front office licht met NWB wegen',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FRONT_LIGHT_NWB,
+        style: 'https://maps.ndw.nu/styles/osm-front-office-light-with-nwb-roads.json',
+    },
+    OSM_FRONT_LIGHT: {
+        id: 'OSM_FRONT_LIGHT',
+        name: 'F.L.',
+        description: 'OSM front office licht',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_FRONT_LIGHT,
+        style: 'https://maps.ndw.nu/styles/osm-front-office-light.json',
+    },
+    OSM_GREEN: {
+        id: 'OSM_GREEN',
+        name: 'OSM G.',
+        description: 'OSM groen',
+        imageLink: MAP_BACKGROUND_IMAGES.OSM_GREEN,
+        style: 'https://maps.ndw.nu/styles/osm-green.json',
+    },
+};
+const DEFAULT_BACKGROUNDS = [
+    MAP_BACKGROUNDS['OSM_NWB_ROADS'],
+    MAP_BACKGROUNDS['OSM_COLOR_BLIND'],
+    MAP_BACKGROUNDS['OSM_DARK'],
+];
+
+const MAP_LAYER_IMAGES = {
+    ACTUAL_TRAFFIC_V1: '/assets/images/map-layers/actueelverkeer1.webp',
+    ACTUAL_TRAFFIC_V2: '/assets/images/map-layers/actueelverkeerv2.webp',
+    IMAGE_MODE_V1: '/assets/images/map-layers/beeldstand1.webp',
+    IMAGE_MODE_V2: '/assets/images/map-layers/beeldstand2.webp',
+    HECTOMETRY: '/assets/images/map-layers/hectometrering.webp',
+    ROAD_WORKS: '/assets/images/map-layers/wegwerkzaamheden.webp',
+};
+const MAP_LAYERS = {
+    ACTUAL_TRAFFIC_V1: {
+        id: 'ACTUAL_TRAFFIC_V1',
+        name: 'Actueel verkeer 1',
+        imageLink: MAP_LAYER_IMAGES.ACTUAL_TRAFFIC_V1,
+    },
+    ACTUAL_TRAFFIC_V2: {
+        id: 'ACTUAL_TRAFFIC_V2',
+        name: 'Actueel verkeer 2',
+        imageLink: MAP_LAYER_IMAGES.ACTUAL_TRAFFIC_V2,
+    },
+    IMAGE_MODE_V1: {
+        id: 'IMAGE_MODE_V1',
+        name: 'Beeldstand 1',
+        imageLink: MAP_LAYER_IMAGES.IMAGE_MODE_V1,
+    },
+    IMAGE_MODE_V2: {
+        id: 'IMAGE_MODE_V2',
+        name: 'Beeldstand 2',
+        imageLink: MAP_LAYER_IMAGES.IMAGE_MODE_V2,
+    },
+    HECTOMETRY: {
+        id: 'HECTOMETRY',
+        name: 'Hectometrering',
+        imageLink: MAP_LAYER_IMAGES.HECTOMETRY,
+    },
+    ROAD_WORKS: {
+        id: 'ROAD_WORKS',
+        name: 'Wegwerkzaamheden',
+        imageLink: MAP_LAYER_IMAGES.ROAD_WORKS,
+    },
+};
+
 class ModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ModalContentComponent, isStandalone: true, selector: "ndw-modal-content", ngImport: i0, template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3183,7 +3441,7 @@ class SplitterComponent {
         return clamp(width, this.safeMinPanelWidth(), this.safeMaxPanelWidth());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SplitterComponent, isStandalone: true, selector: "ndw-splitter", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, initialPanelWidth: { classPropertyName: "initialPanelWidth", publicName: "initialPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, minimumPanelWidth: { classPropertyName: "minimumPanelWidth", publicName: "minimumPanelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true, isSignal: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"panels\" [class.dragging]=\"isDragging()\">\n  <div class=\"panel\" [style.width]=\"firstPanelWidth() + 'px'\">\n    <ng-content select=\"[first-panel]\"></ng-content>\n  </div>\n  <div\n    #splitter\n    class=\"splitter\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-valuenow]=\"firstPanelWidth()\"\n    [attr.aria-valuemin]=\"safeMinPanelWidth()\"\n    [attr.aria-valuemax]=\"safeMaxPanelWidth()\"\n    cdkDrag\n    cdkDragLockAxis=\"x\"\n    [class.disabled]=\"disabled()\"\n    [cdkDragBoundary]=\"container\"\n    (cdkDragStarted)=\"onDragStarted()\"\n    (cdkDragMoved)=\"onDragMoved()\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    (mousedown)=\"onSplitterMouseDown()\"\n    (mouseup)=\"onSplitterMouseUp()\"\n    [cdkDragConstrainPosition]=\"constrainPosition\"\n  >\n    <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n      @for (i of [0, 1, 2]; track i) {\n        <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\n      }\n    </svg>\n  </div>\n  <div class=\"panel\" [style.width]=\"secondPanelWidth() + 'px'\">\n    <ng-content select=\"[second-panel]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm);--half-splitter-width: calc(var(--splitter-width) / 2)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;height:100%;width:50%;min-width:0;flex-grow:1;overflow:auto}.panels .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels .splitter{position:absolute;left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:ew-resize;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400);width:var(--ndw-spacing-2xs)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:width var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SplitterComponent, isStandalone: true, selector: "ndw-splitter", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, initialPanelWidth: { classPropertyName: "initialPanelWidth", publicName: "initialPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, minimumPanelWidth: { classPropertyName: "minimumPanelWidth", publicName: "minimumPanelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true, isSignal: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"panels\" [class.dragging]=\"isDragging()\">\n  <div class=\"panel\" [style.width]=\"firstPanelWidth() + 'px'\">\n    <ng-content select=\"[first-panel]\"></ng-content>\n  </div>\n  <div\n    #splitter\n    class=\"splitter\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-valuenow]=\"firstPanelWidth()\"\n    [attr.aria-valuemin]=\"safeMinPanelWidth()\"\n    [attr.aria-valuemax]=\"safeMaxPanelWidth()\"\n    cdkDrag\n    cdkDragLockAxis=\"x\"\n    [class.disabled]=\"disabled()\"\n    [cdkDragBoundary]=\"container\"\n    (cdkDragStarted)=\"onDragStarted()\"\n    (cdkDragMoved)=\"onDragMoved()\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    (mousedown)=\"onSplitterMouseDown()\"\n    (mouseup)=\"onSplitterMouseUp()\"\n    [cdkDragConstrainPosition]=\"constrainPosition\"\n  >\n    <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n      @for (i of [0, 1, 2]; track i) {\n        <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\n      }\n    </svg>\n  </div>\n  <div class=\"panel\" [style.width]=\"secondPanelWidth() + 'px'\">\n    <ng-content select=\"[second-panel]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm);--half-splitter-width: calc(var(--splitter-width) / 2)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;height:100%;width:50%;min-width:0;flex-grow:1;overflow:auto}.panels .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels .splitter{position:absolute;left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:ew-resize;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400);width:var(--ndw-spacing-2xs)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:width var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
@@ -3492,5 +3750,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutocompleteOptionSelectionChange, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, LayoutBannersComponent, LayoutComponent, LoaderComponent, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, breadcrumbRouteDataKey, fontMapButtonIcons, mapButtonIcons, svgMapButtonIcons };
+export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutocompleteOptionSelectionChange, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, LayoutBannersComponent, LayoutComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, breadcrumbRouteDataKey, fontMapButtonIcons, mapButtonIcons, svgMapButtonIcons };
 //# sourceMappingURL=ndwnu-design-system.mjs.map