@ndwnu/design-system 12.1.0 → 12.2.0

package/index.d.ts

@@ -167,6 +167,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
     protected onDateInput(input: string): void;
     protected removeDate(date: Date): void;
     protected onDateSelected(date: Date | Date[] | null): void;
+    protected onPopoverOpenChange(isOpen: boolean): void;
     writeValue(value: Date | Date[] | null): void;
     registerOnChange(fn: (value: Date | Date[] | null) => void): void;
     registerOnTouched(_fn: () => void): void;
@@ -333,6 +334,33 @@ declare class InputIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputIconComponent, "ndw-input-icon", never, {}, {}, never, ["*"], true, never>;
 }
 
+declare class MarkdownEditorComponent implements ControlValueAccessor {
+    private readonly ngControl;
+    readonly uuid: _angular_core.InputSignal<`${string}-${string}-${string}-${string}-${string}`>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly error: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly success: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly toolbar: _angular_core.InputSignal<string[]>;
+    readonly bold: _angular_core.Signal<boolean>;
+    readonly header: _angular_core.Signal<boolean>;
+    readonly italic: _angular_core.Signal<boolean>;
+    readonly quote: _angular_core.Signal<boolean>;
+    readonly unorderedList: _angular_core.Signal<boolean>;
+    readonly orderedList: _angular_core.Signal<boolean>;
+    readonly taskList: _angular_core.Signal<boolean>;
+    get isRequiredOrHasRequiredValidator(): boolean | null;
+    constructor();
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string | null | undefined) => void): void;
+    registerOnTouched(): void;
+    setDisabledState?(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MarkdownEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MarkdownEditorComponent, "ndw-markdown-editor", never, { "uuid": { "alias": "uuid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+}
+
 type OptionGroupMode = 'single' | 'multiple';
 
 declare class OptionComponent {
@@ -1038,6 +1066,7 @@ declare class MultiSelectComponent {
     protected readonly lastCheckedElementId: _angular_core.ModelSignal<string | number | null | undefined>;
     protected readonly searchInputValue: _angular_core.ModelSignal<string>;
     protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly viewItems: _angular_core.Signal<CheckboxData[]>;
     readonly selectAmount: _angular_core.Signal<number>;
     readonly noSearchResults: _angular_core.Signal<boolean>;
     filterSearch(value: string): boolean;
@@ -1223,17 +1252,32 @@ declare class TabComponent implements OnInit {
     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 {
+declare class TabGroupComponent implements OnDestroy {
+    private readonly _injector;
+    private readonly _destroyRef;
     private readonly _tabs;
     private readonly _tabButtons;
-    tabs: _angular_core.Signal<TabComponent[]>;
+    private readonly _tabGroupContainer;
     hasPadding: _angular_core.InputSignal<boolean>;
     activeTabId: _angular_core.ModelSignal<string | number | undefined>;
     inlinePadding: _angular_core.InputSignal<number>;
+    private readonly _scrollLeft;
+    private readonly _scrollWidth;
+    private readonly _clientWidth;
+    tabs: _angular_core.Signal<TabComponent[]>;
+    canScrollLeft: _angular_core.Signal<boolean>;
+    canScrollRight: _angular_core.Signal<boolean>;
+    private _resizeObserver?;
     constructor();
+    ngOnDestroy(): void;
+    private _setupScrollDetection;
+    private _updateScrollState;
+    scrollTo(direction: 'left' | 'right'): void;
     selectTab(index: number): void;
     onKeyDown(event: KeyboardEvent): void;
     private getNextEnabledIndex;
+    private getFirstEnabledIndex;
+    private getLastEnabledIndex;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "hasPadding": { "alias": "hasPadding"; "required": false; "isSignal": true; }; "activeTabId": { "alias": "activeTabId"; "required": false; "isSignal": true; }; "inlinePadding": { "alias": "inlinePadding"; "required": false; "isSignal": true; }; }, { "activeTabId": "activeTabIdChange"; }, ["_tabs"], never, true, never>;
 }
@@ -1331,5 +1375,5 @@ declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, 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 { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, 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.1.0",
+  "version": "12.2.0",
   "peerDependencies": {
     "@angular/animations": "^20.0.0",
     "@angular/cdk": "^20.0.0",
@@ -10,6 +10,7 @@
     "@angular/material": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@ndwnu/core": "2.1.0",
+    "@github/markdown-toolbar-element": "2.2.3",
     "ag-grid-angular": "^34.0.2",
     "ag-grid-community": "^34.0.2",
     "rxjs": "^7.8.0"

package/styles/components/_input.scss

@@ -90,17 +90,17 @@
   outline-width: 1px;
 }
 
-.input-container:has(> [ndwInput][error]) {
+.input-container:has([ndwInput][error]) {
   background-color: var(--ndw-color-critical-100);
   border-color: var(--ndw-color-critical-500);
 }
 
 // Add input container right padding when select element is used
-.input-container:has(> select[ndwInput]) {
+.input-container:has(select[ndwInput]) {
   padding-inline-end: var(--ndw-spacing-xs);
 }
 
-.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
+.input-container[error]:has([ndwInput]:is(:active, :focus, :focus-visible)) {
   background-color: var(--ndw-color-white);
   select[ndwInput] {
     background-color: var(--ndw-color-white);
@@ -109,10 +109,11 @@
 
 // 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(> ndw-datepicker > [ndwInput]) {
+.input-container:has([ndwInput]) {
   @include shared-style();
 
+  gap: var(--ndw-spacing-xs);
+
   // When input has a ndw-input-icon enable the inline padding
   &:has(> ndw-input-icon) {
     padding-inline: var(--ndw-spacing-xs);
@@ -121,8 +122,6 @@
     padding-inline-end: var(--ndw-spacing-xs);
   }
 
-  gap: var(--ndw-spacing-xs);
-
   // Any elements before the input have a lighter grey color
   > *:has(~ [ndwInput]) {
     color: var(--ndw-color-grey-400);