@ndwnu/design-system 12.0.0 → 12.1.0

package/index.d.ts

@@ -1,10 +1,11 @@
-import { CoreAutosuggestPanelComponent, CoreAutosuggestDirective, CoreAutosuggestOptionComponent, Image, CoreAutosuggestAddOptionComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, InputType, CheckableComponent, PillColor, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreIconComponent, CoreKeyValueListComponent, CorePillComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
+import { CoreAutosuggestPanelComponent, CoreAutosuggestDirective, CoreAutosuggestOptionComponent, Image, CoreAutosuggestAddOptionComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, InputType, CheckableComponent, PillColor, CoreBadgeComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreIconComponent, CoreKeyValueListComponent, CorePillComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
 export { AutosuggestOption, AutosuggestOptions, AutosuggestSearchFn, IconSize, KeyValueRow } from '@ndwnu/core';
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnInit, AfterContentInit, AfterViewInit, OnDestroy, InjectionToken, EventEmitter, TemplateRef, Signal, OnChanges } from '@angular/core';
+import { OnDestroy, Signal, ElementRef, EventEmitter, TemplateRef, OnInit, AfterContentInit, AfterViewInit, InjectionToken, OnChanges } from '@angular/core';
 import { ControlValueAccessor, AbstractControl, NgControl } from '@angular/forms';
 import { Subject, Observable } from 'rxjs';
-import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
+import * as _angular_material_datepicker from '@angular/material/datepicker';
+import { DateFilterFn, MatCalendar } from '@angular/material/datepicker';
 import { Params } from '@angular/router';
 import * as _ndwnu_design_system from '@ndwnu/design-system';
 import { Point } from '@angular/cdk/drag-drop';
@@ -65,10 +66,113 @@ declare class CheckboxGroupComponent extends CoreCheckboxGroupComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxGroupComponent, "ndw-checkbox-group", never, {}, {}, never, ["*"], true, never>;
 }
 
-declare class DatepickerComponent {
-    dateClass: MatCalendarCellClassFunction<Date>;
+type DatepickerMode = 'single' | 'range' | 'multiple' | 'month';
+
+declare class CalendarComponent implements ControlValueAccessor, OnDestroy {
+    #private;
+    readonly mode: _angular_core.InputSignal<DatepickerMode>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly startAt: _angular_core.InputSignal<Date | null>;
+    readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
+    readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
+    readonly elevated: _angular_core.InputSignal<boolean>;
+    protected internalDateEnabledFilter: Signal<(date: Date | null) => boolean>;
+    protected readonly calendar: Signal<MatCalendar<any> | undefined>;
+    protected readonly calendarElement: Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly value: _angular_core.WritableSignal<Date[]>;
+    protected readonly startView: Signal<"month" | "year">;
+    protected readonly dateClass: Signal<_angular_material_datepicker.MatCalendarCellClassFunction<Date>>;
+    constructor();
+    ngOnDestroy(): void;
+    private addMouseMoveListener;
+    private removeMouseMoveListener;
+    private addRangePreviewClasses;
+    private removeRangePreviewClasses;
+    protected onDateSelected(date: Date | Date[] | null, toggle?: boolean): void;
+    protected onMonthSelected(date: Date): void;
+    writeValue(value: Date | Date[] | null): void;
+    registerOnChange(fn: (value: Date | Date[] | null) => void): void;
+    registerOnTouched(_fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ndw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
+}
+
+type PopoverPosition = 'nextToTriggerButton' | 'overTriggerButton';
+declare class PopoverTriggerDirective implements OnDestroy {
+    popoverToggled: EventEmitter<boolean>;
+    popoverPosition: _angular_core.InputSignal<PopoverPosition>;
+    popoverContent: _angular_core.InputSignal<TemplateRef<unknown>>;
+    toggleOnClick: _angular_core.InputSignal<boolean>;
+    isOpen: _angular_core.ModelSignal<boolean>;
+    toggle(): void;
+    private destroyRef;
+    private elementRef;
+    private overlay;
+    private viewContainerRef;
+    private focusTrapFactory;
+    private overlayRef?;
+    ngOnDestroy(): void;
+    togglePopover(): void;
+    private open;
+    private trapFocus;
+    private closeOverlayOnEscapeKey;
+    private nodeOrParentsHaveAttribute;
+    private closeOverlayOnBackdropClick;
+    private close;
+    private getPopoverPosition;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[ndwPopoverTrigger]", ["ndwPopoverTrigger"], { "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverContent": { "alias": "ndwPopoverTrigger"; "required": true; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "popoverToggled": "popoverToggled"; "isOpen": "isOpenChange"; }, never, never, true, never>;
+}
+
+declare class InputDirective implements OnInit {
+    set disabled(disabled: boolean);
+    get error(): boolean;
+    set error(error: boolean);
+    set success(success: boolean);
+    set id(id: string);
+    set ariaDescribedBy(id: string);
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly ngControl;
+    get element(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+    get control(): AbstractControl | null;
+    ngOnInit(): void;
+    updateErrorAttribute(formFieldError?: boolean): void;
+    private setSelectPlaceholderAttribute;
+    private updateRequiredAttribute;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputDirective, "input[ndwInput], select[ndwInput], textarea[ndwInput]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DatepickerComponent implements ControlValueAccessor {
+    #private;
+    readonly mode: _angular_core.InputSignal<DatepickerMode>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly openCalendarLabel: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly dateEnabledFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
+    readonly dateWithIndicatorFilter: _angular_core.InputSignal<DateFilterFn<Date | null>>;
+    readonly input: _angular_core.Signal<InputDirective>;
+    protected readonly popoverTrigger: _angular_core.Signal<PopoverTriggerDirective>;
+    protected readonly value: _angular_core.ModelSignal<Date[]>;
+    protected readonly startAt: _angular_core.Signal<Date | null>;
+    protected readonly formattedValue: _angular_core.Signal<string>;
+    protected readonly showTags: _angular_core.Signal<boolean>;
+    protected onDateInput(input: string): void;
+    protected removeDate(date: Date): void;
+    protected onDateSelected(date: Date | Date[] | null): void;
+    writeValue(value: Date | Date[] | null): void;
+    registerOnChange(fn: (value: Date | Date[] | null) => void): void;
+    registerOnTouched(_fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateEnabledFilter": { "alias": "dateEnabledFilter"; "required": false; "isSignal": true; }; "dateWithIndicatorFilter": { "alias": "dateWithIndicatorFilter"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class ErrorComponent {
@@ -86,6 +190,7 @@ declare class FileUploadComponent implements ControlValueAccessor {
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly fileUploadText: _angular_core.InputSignal<FileUploadText>;
     readonly maxFileSizeInBytes: _angular_core.InputSignal<number>;
+    readonly mimeTypeMap: _angular_core.InputSignal<Record<string, string>>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly uploadDate: _angular_core.InputSignal<string>;
     readonly draggingOver: _angular_core.ModelSignal<boolean>;
@@ -118,31 +223,11 @@ declare class FileUploadComponent implements ControlValueAccessor {
      * Ensures that the provided File has a valid MIME type.
      *
      * NOTE: Some file extensions are not automatically mapped to a valid MIME type by the operating system.
-     * In such cases, the MIME_TYPE_MAP is used to assign the correct MIME type.
+     * In such cases, the MIME_TYPE_MAP in combination with the mimeTypeMap input is used to assign the correct MIME type.
      */
     private ensureFileType;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "ndw-file-upload", never, { "allowedFileTypeRegex": { "alias": "allowedFileTypeRegex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "maxFileSizeInBytes": { "alias": "maxFileSizeInBytes"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "uploadDate": { "alias": "uploadDate"; "required": false; "isSignal": true; }; "draggingOver": { "alias": "draggingOver"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "incorrectFileSize": { "alias": "incorrectFileSize"; "required": false; "isSignal": true; }; "incorrectFileType": { "alias": "incorrectFileType"; "required": false; "isSignal": true; }; "selectedFile": { "alias": "selectedFile"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "draggingOver": "draggingOverChange"; "error": "errorChange"; "incorrectFileSize": "incorrectFileSizeChange"; "incorrectFileType": "incorrectFileTypeChange"; "selectedFile": "selectedFileChange"; "success": "successChange"; }, never, never, true, never>;
-}
-
-declare class InputDirective implements OnInit {
-    set disabled(disabled: boolean);
-    get error(): boolean;
-    set error(error: boolean);
-    set success(success: boolean);
-    set id(id: string);
-    set ariaDescribedBy(id: string);
-    private readonly elementRef;
-    private readonly destroyRef;
-    private readonly ngControl;
-    get element(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    get control(): AbstractControl | null;
-    ngOnInit(): void;
-    updateErrorAttribute(formFieldError?: boolean): void;
-    private setSelectPlaceholderAttribute;
-    private updateRequiredAttribute;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputDirective, "input[ndwInput], select[ndwInput], textarea[ndwInput]", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "ndw-file-upload", never, { "allowedFileTypeRegex": { "alias": "allowedFileTypeRegex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "maxFileSizeInBytes": { "alias": "maxFileSizeInBytes"; "required": false; "isSignal": true; }; "mimeTypeMap": { "alias": "mimeTypeMap"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "uploadDate": { "alias": "uploadDate"; "required": false; "isSignal": true; }; "draggingOver": { "alias": "draggingOver"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "incorrectFileSize": { "alias": "incorrectFileSize"; "required": false; "isSignal": true; }; "incorrectFileType": { "alias": "incorrectFileType"; "required": false; "isSignal": true; }; "selectedFile": { "alias": "selectedFile"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "draggingOver": "draggingOverChange"; "error": "errorChange"; "incorrectFileSize": "incorrectFileSizeChange"; "incorrectFileType": "incorrectFileTypeChange"; "selectedFile": "selectedFileChange"; "success": "successChange"; }, never, never, true, never>;
 }
 
 declare class MonthInputComponent implements ControlValueAccessor, OnInit {
@@ -200,6 +285,7 @@ declare class FormFieldComponent {
     readonly tooltip: _angular_core.InputSignal<string>;
     readonly clearButtonClicked: _angular_core.OutputEmitterRef<void>;
     protected readonly monthInput: _angular_core.Signal<MonthInputComponent | undefined>;
+    protected readonly dateInput: _angular_core.Signal<DatepickerComponent | undefined>;
     protected readonly regularInput: _angular_core.Signal<InputDirective | undefined>;
     protected readonly input: _angular_core.Signal<InputDirective | undefined>;
     protected readonly inputType: _angular_core.Signal<InputType | undefined>;
@@ -215,7 +301,7 @@ declare class FormFieldComponent {
     private setInputId;
     private setAriaDescribedBy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "ndw-form-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "clearButtonClicked": "clearButtonClicked"; }, ["monthInput", "regularInput"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "ndw-form-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "clearButtonClicked": "clearButtonClicked"; }, ["monthInput", "dateInput", "regularInput"], ["*"], true, never>;
 }
 
 declare enum FormFieldElement {
@@ -458,22 +544,9 @@ declare class AvatarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ndw-avatar", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class BadgeComponent {
-    /**
-     * The value of the badge
-     */
-    value: _angular_core.InputSignal<number | undefined>;
-    /**
-     * The aria label, used by screen readers to give context.
-     */
-    ariaLabel: _angular_core.InputSignal<string | undefined>;
-    /**
-     * When true, the badge will display values above 99.
-     * When false (default), the badge will display values above 99 as a dot
-     */
-    displayLargeNumbers: _angular_core.InputSignal<boolean>;
+declare class BadgeComponent extends CoreBadgeComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ndw-badge", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "displayLargeNumbers": { "alias": "displayLargeNumbers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ndw-badge", never, {}, {}, never, never, true, never>;
 }
 
 type BannerType = 'critical' | 'info' | 'info-grey' | 'warning' | 'positive';
@@ -595,33 +668,6 @@ declare class DashboardCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardCardComponent, "ndw-dashboard-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "imgSource": { "alias": "imgSource"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": true; "isSignal": true; }; "linkTarget": { "alias": "linkTarget"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type PopoverPosition = 'nextToTriggerButton' | 'overTriggerButton';
-declare class PopoverTriggerDirective implements OnDestroy {
-    popoverToggled: EventEmitter<boolean>;
-    popoverPosition: _angular_core.InputSignal<PopoverPosition>;
-    popoverContent: _angular_core.InputSignal<TemplateRef<unknown>>;
-    toggleOnClick: _angular_core.InputSignal<boolean>;
-    isOpen: _angular_core.ModelSignal<boolean>;
-    toggle(): void;
-    private destroyRef;
-    private elementRef;
-    private overlay;
-    private viewContainerRef;
-    private focusTrapFactory;
-    private overlayRef?;
-    ngOnDestroy(): void;
-    togglePopover(): void;
-    private open;
-    private trapFocus;
-    private closeOverlayOnEscapeKey;
-    private nodeOrParentsHaveAttribute;
-    private closeOverlayOnBackdropClick;
-    private close;
-    private getPopoverPosition;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[ndwPopoverTrigger]", ["ndwPopoverTrigger"], { "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverContent": { "alias": "ndwPopoverTrigger"; "required": true; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "popoverToggled": "popoverToggled"; "isOpen": "isOpenChange"; }, never, never, true, never>;
-}
-
 declare class DropdownComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly chevron: _angular_core.InputSignal<boolean>;
@@ -772,7 +818,7 @@ declare class LoaderComponent {
 
 declare class MapButtonComponent {
     #private;
-    readonly icon: _angular_core.InputSignal<"search" | "direction" | "gps" | "high-res" | "layers" | "polygon" | "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" | "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>;
@@ -1168,12 +1214,13 @@ declare class TabComponent implements OnInit {
     get content(): TemplatePortal | null;
     title: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
+    hasError: _angular_core.InputSignal<boolean>;
     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; }; "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; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class TabGroupComponent {
@@ -1284,5 +1331,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, 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, 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, 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, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "peerDependencies": {
     "@angular/animations": "^20.0.0",
     "@angular/cdk": "^20.0.0",
@@ -9,7 +9,7 @@
     "@angular/forms": "^20.0.0",
     "@angular/material": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@ndwnu/core": "2.0.0",
+    "@ndwnu/core": "2.1.0",
     "ag-grid-angular": "^34.0.2",
     "ag-grid-community": "^34.0.2",
     "rxjs": "^7.8.0"

package/styles/base/_material.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+html {
+  @include mat.theme(
+    (
+      color: mat.$orange-palette,
+      typography: (
+        plain-family: var(--ndw-font-family-body),
+        brand-family: var(--ndw-font-family-heading),
+        bold-weight: var(--ndw-font-weight-bold),
+        medium-weight: var(--ndw-font-weight-bold),
+        regular-weight: var(--ndw-font-weight-regular),
+      ),
+      density: 0,
+    )
+  );
+}

package/styles/base/index.scss

@@ -1,3 +1,4 @@
 @forward 'colors';
+@forward 'material';
 @forward 'typography';
 @forward 'variables';

package/styles/components/_datepicker.scss

@@ -3,41 +3,88 @@
 :root {
   @include mat.datepicker-overrides(
     (
-      calendar-body-label-text-color: var(--ndw-color-primary),
-      calendar-date-text-color: var(--ndw-color-black),
+      toggle-icon-color: var(--ndw-color-primary),
+      calendar-container-background-color: var(--ndw-color-grey-100),
+      calendar-container-elevation-shadow: var(--ndw-elevation-content),
+      calendar-container-shape: var(--ndw-border-radius-md),
       calendar-text-font: var(--ndw-font-family-body),
       calendar-text-size: var(--ndw-font-size-sm),
-      toggle-icon-color: var(--ndw-color-primary),
+      calendar-header-text-size: var(--ndw-font-size-sm),
+      calendar-body-label-text-size: var(--ndw-font-size-sm),
+      calendar-period-button-text-size: var(--ndw-font-size-sm),
+      calendar-date-text-color: var(--ndw-color-text),
+      calendar-date-today-outline-color: var(--ndw-color-secondary-200),
+      calendar-date-selected-state-background-color: var(--ndw-color-secondary-400),
+      calendar-date-today-selected-state-outline-color: var(--ndw-color-secondary-400),
+      calendar-date-preview-state-outline-color: var(--ndw-color-secondary-300),
+      calendar-date-hover-state-background-color: var(--ndw-color-secondary-300),
+      calendar-date-focus-state-background-color: var(--ndw-color-secondary-300),
     )
   );
 
-  mat-calendar.ndw-calendar {
-    background-color: var(--ndw-color-white);
-    border-radius: var(--ndw-border-radius-sm);
-  }
+  mat-calendar {
+    --range-preview-border: var(--ndw-border-size-sm) dashed var(--ndw-color-secondary-300);
+
+    .ndw-date-selected > :first-child {
+      background-color: var(--ndw-color-secondary-400) !important;
+      color: var(--ndw-color-white) !important;
+    }
+
+    .ndw-date-range-start {
+      background-color: var(--ndw-color-secondary-200);
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
 
-  button.ndw-date {
-    border-radius: 50%;
+    .ndw-date-range-end {
+      background-color: var(--ndw-color-secondary-200);
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    }
+
+    .ndw-date-in-range {
+      background-color: var(--ndw-color-secondary-200);
+    }
 
-    &:hover {
-      background: var(--ndw-color-primary-100);
+    .ndw-date-range-start-preview {
+      background-color: var(--ndw-color-secondary-100);
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
     }
 
-    &:active {
-      background: var(--ndw-color-primary-200);
+    .ndw-date-range-end-preview {
+      background-color: var(--ndw-color-secondary-100);
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
     }
 
-    &.highlighted {
-      background: var(--ndw-color-secondary-400);
-      border-radius: 50%;
-      color: var(--ndw-color-white);
+    .ndw-date-in-range-preview {
+      background-color: var(--ndw-color-secondary-100);
+    }
+
+    // Add a dot below dates with the ndw-date-indicator class
+    .ndw-date-indicator > :first-child {
+      &::after {
+        content: '';
+        background: var(--ndw-color-primary);
+        position: absolute;
+        bottom: 2px;
+        left: calc(50% - 4px);
+        width: 8px;
+        height: 8px;
+        box-sizing: border-box;
+        border-radius: 4px;
+      }
+    }
 
-      &:hover {
-        background: var(--ndw-color-secondary-500);
+    // Disable the month view when in 'month' mode
+    &.month-picker {
+      .mat-calendar-period-button {
+        pointer-events: none;
       }
 
-      &:active {
-        background: var(--ndw-color-secondary-600);
+      .mat-calendar-arrow {
+        display: none;
       }
     }
   }

package/styles/components/_input.scss

@@ -109,7 +109,8 @@
 
 // When an ndwInput is contained in an input-container hide the
 // ndwInput borders and instead put the borders on the container.
-.input-container:has(> [ndwInput]) {
+.input-container:has(> [ndwInput]),
+.input-container:has(> ndw-datepicker > [ndwInput]) {
   @include shared-style();
 
   // When input has a ndw-input-icon enable the inline padding

package/styles/layout/_grid.scss

@@ -1,5 +1,12 @@
 @use '../base/variables' as *;
 
+$breakpoints: (
+  2xs: $ndw-screen-2xs,
+  xs: $ndw-screen-xs,
+  sm: $ndw-screen-sm,
+  md: $ndw-screen-md,
+);
+
 @mixin column($span) {
   grid-column: span $span;
 }
@@ -99,3 +106,60 @@
     }
   }
 }
+
+.ndw-c-grid {
+  display: flex;
+  flex-wrap: wrap;
+  container-type: inline-size;
+  container-name: ndw-c-grid;
+
+  @mixin ndw-c-col-span($size, $important: false) {
+    $flag: if($important, '!important', '');
+    flex: 0 0 calc((100% / 12) * #{$size}) #{$flag};
+    max-width: calc((100% / 12) * #{$size}) #{$flag};
+  }
+
+  @mixin ndw-c-breakpoint($name, $min-width) {
+    @container ndw-c-grid (min-width: #{$min-width}) {
+      @content;
+    }
+  }
+
+  @for $i from 1 through 12 {
+    .ndw-c-col-#{$i} {
+      @include ndw-c-col-span($i, false);
+    }
+  }
+
+  @each $name, $width in $breakpoints {
+    @include ndw-c-breakpoint($name, $width) {
+      @for $i from 1 through 12 {
+        .ndw-c-col-#{$name}-#{$i} {
+          @include ndw-c-col-span($i, true);
+        }
+      }
+    }
+  }
+
+  $order-range: 0 1 2 3 4 5;
+
+  @each $i in $order-range {
+    .ndw-c-order-#{$i} {
+      order: $i !important;
+    }
+  }
+
+  @each $name, $width in $breakpoints {
+    @container ndw-c-grid (min-width: #{$width}) {
+      @each $i in $order-range {
+        .ndw-c-order-#{$name}-#{$i} {
+          order: $i !important;
+        }
+      }
+    }
+  }
+}
+
+.ndw-c-col {
+  flex: 1 1 100%;
+}