@ndwnu/design-system 10.0.1 → 11.0.0

package/index.d.ts

@@ -1,2 +1,2 @@
-export { IconSize } from '@ndwnu/core';
+export { IconSize, KeyValueRow } from '@ndwnu/core';
 export * from './lib/components';

package/lib/components/hoverable-list-item/hoverable-list-item.component.d.ts

@@ -0,0 +1,18 @@
+import { Params } from '@angular/router';
+import { HoverableListItemAction } from './hoverable-list-item.model';
+import * as i0 from "@angular/core";
+export declare class HoverableListItemComponent {
+    actions: import("@angular/core").InputSignal<HoverableListItemAction[] | undefined>;
+    disabled: import("@angular/core").InputSignal<boolean>;
+    path: import("@angular/core").InputSignal<string[] | undefined>;
+    prefixIcon: import("@angular/core").InputSignal<string | undefined>;
+    queryParams: import("@angular/core").InputSignal<Params | undefined>;
+    subtitle: import("@angular/core").InputSignal<string | undefined>;
+    title: import("@angular/core").InputSignal<string | undefined>;
+    actionSelected: import("@angular/core").OutputEmitterRef<HoverableListItemAction>;
+    selected: import("@angular/core").OutputEmitterRef<void>;
+    onActionButtonClick(event: Event, action: HoverableListItemAction): void;
+    onButtonClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HoverableListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HoverableListItemComponent, "ndw-hoverable-list-item", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "path": { "alias": "path"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "actionSelected": "actionSelected"; "selected": "selected"; }, never, ["*"], true, never>;
+}

package/lib/components/hoverable-list-item/hoverable-list-item.model.d.ts

@@ -0,0 +1,9 @@
+import { Params } from '@angular/router';
+export interface HoverableListItemAction {
+    id: string | number;
+    icon: string;
+    label: string;
+    callback?: () => void;
+    path?: string[];
+    queryParams?: Params;
+}

package/lib/components/hoverable-list-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hoverable-list-item.component';
+export * from './hoverable-list-item.model';

package/lib/components/index.d.ts

@@ -13,7 +13,9 @@ export * from './dropdown';
 export * from './edit-bar';
 export * from './favorite';
 export * from './form-field';
+export * from './hoverable-list-item';
 export * from './icon';
+export * from './key-value-list';
 export * from './layout';
 export * from './layout-banners';
 export * from './list';
@@ -31,6 +33,7 @@ export * from './popover';
 export * from './router-breadcrumbs';
 export * from './splitter';
 export * from './summary-card';
+export * from './switcher';
 export * from './tab';
 export * from './tab-group';
 export * from './table';

package/lib/components/key-value-list/index.d.ts

@@ -0,0 +1 @@
+export * from './key-value-list.component';

package/lib/components/key-value-list/key-value-list.component.d.ts

@@ -0,0 +1,6 @@
+import { CoreKeyValueListComponent } from '@ndwnu/core';
+import * as i0 from "@angular/core";
+export declare class KeyValueListComponent extends CoreKeyValueListComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyValueListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KeyValueListComponent, "ndw-key-value-list", never, {}, {}, never, never, true, never>;
+}

package/lib/components/list-item/list-item.component.d.ts

@@ -1,6 +1,5 @@
-import { CheckableComponent } from '@ndwnu/core';
+import { CheckableComponent, PillColor } from '@ndwnu/core';
 import { CheckType, RadioButtonComponent } from '../form-field';
-import { PillColor } from '../pill';
 import * as i0 from "@angular/core";
 export declare class ListItemComponent implements CheckableComponent {
     #private;

package/lib/components/main-navigation/main-navigation-header/main-navigation-header.component.d.ts

@@ -2,10 +2,8 @@ import { Environment } from '../main-navigation.model';
 import * as i0 from "@angular/core";
 export declare class MainNavigationHeaderComponent {
     applicationName: import("@angular/core").InputSignal<string>;
-    closeButtonLabel: import("@angular/core").InputSignal<string>;
     isExpanded: import("@angular/core").InputSignal<boolean>;
     isMobile: import("@angular/core").InputSignal<boolean>;
-    menuButtonLabel: import("@angular/core").InputSignal<string>;
     theme: import("@angular/core").InputSignal<string>;
     themeImagePath: import("@angular/core").InputSignal<string>;
     environment: import("@angular/core").InputSignal<Environment | undefined>;
@@ -13,5 +11,5 @@ export declare class MainNavigationHeaderComponent {
     environmentColor: import("@angular/core").Signal<"blue" | "gray" | "green" | "yellow">;
     toggleMobileMenu(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationHeaderComponent, "ndw-main-navigation-header", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": true; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": true; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": true; "isSignal": true; }; "themeImagePath": { "alias": "themeImagePath"; "required": true; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "isMobileMenuOpen": { "alias": "isMobileMenuOpen"; "required": true; "isSignal": true; }; }, { "isMobileMenuOpen": "isMobileMenuOpenChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationHeaderComponent, "ndw-main-navigation-header", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": true; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": true; "isSignal": true; }; "themeImagePath": { "alias": "themeImagePath"; "required": true; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "isMobileMenuOpen": { "alias": "isMobileMenuOpen"; "required": true; "isSignal": true; }; }, { "isMobileMenuOpen": "isMobileMenuOpenChange"; }, never, never, true, never>;
 }

package/lib/components/main-navigation/main-navigation.component.d.ts

@@ -6,11 +6,9 @@ export declare class MainNavigationComponent implements AfterViewInit {
     applicationName: import("@angular/core").InputSignal<string>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     bottomMenuItems: import("@angular/core").InputSignal<MenuItem[] | undefined>;
-    closeButtonLabel: import("@angular/core").InputSignal<string>;
     environment: import("@angular/core").InputSignal<Environment | undefined>;
     footerTexts: import("@angular/core").InputSignal<string[] | undefined>;
     isCollapsible: import("@angular/core").InputSignal<boolean>;
-    menuButtonLabel: import("@angular/core").InputSignal<string>;
     version: import("@angular/core").InputSignal<string | undefined>;
     isMobile: import("@angular/core").WritableSignal<boolean>;
     isMobileMenuOpen: import("@angular/core").WritableSignal<boolean>;
@@ -23,5 +21,5 @@ export declare class MainNavigationComponent implements AfterViewInit {
     onWindowResize(): void;
     toggleView(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "isExpanded": "isExpandedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "isExpanded": "isExpandedChange"; }, never, never, true, never>;
 }

package/lib/components/pill/index.d.ts

@@ -1,2 +1 @@
 export * from './pill.component';
-export * from './pill.model';

package/lib/components/pill/pill.component.d.ts

@@ -1,14 +1,6 @@
-import { PillColor } from './pill.model';
+import { CorePillComponent } from '@ndwnu/core';
 import * as i0 from "@angular/core";
-export declare class PillComponent {
-    /**
-     * The color of the pill.
-     */
-    readonly color: import("@angular/core").InputSignal<PillColor>;
-    /**
-     * The content of the pill.
-     */
-    private readonly content;
+export declare class PillComponent extends CorePillComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<PillComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "ndw-pill", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "ndw-pill", never, {}, {}, never, ["*"], true, never>;
 }

package/lib/components/switcher/index.d.ts

@@ -0,0 +1,2 @@
+export * from './model';
+export * from './switcher.component';

package/lib/components/switcher/model.d.ts

@@ -0,0 +1,6 @@
+export interface SwitcherOption {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}

package/lib/components/switcher/switcher.component.d.ts

@@ -0,0 +1,26 @@
+import { OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SwitcherOption } from './';
+import * as i0 from "@angular/core";
+export declare class SwitcherComponent implements ControlValueAccessor, OnInit {
+    #private;
+    readonly options: import("@angular/core").InputSignal<SwitcherOption[]>;
+    readonly selectedValue: import("@angular/core").ModelSignal<string | undefined>;
+    readonly disabled: import("@angular/core").ModelSignal<boolean>;
+    readonly selectionChange: import("@angular/core").OutputEmitterRef<string>;
+    sliderWidth: string;
+    sliderPosition: string;
+    private onChange;
+    private onTouched;
+    ngOnInit(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    selectOption(value: string): void;
+    onKeyDown(event: KeyboardEvent, _currentIndex: number): void;
+    generateId(index: number): string;
+    get componentName(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitcherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitcherComponent, "ndw-switcher", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}

package/lib/components/tab/tab.component.d.ts

@@ -10,9 +10,9 @@ export declare class TabComponent implements OnInit {
     title: import("@angular/core").InputSignal<string>;
     disabled: import("@angular/core").InputSignal<boolean>;
     active: boolean;
-    id: `${string}-${string}-${string}-${string}-${string}`;
+    id: import("@angular/core").InputSignal<string | number>;
     ngOnInit(): void;
     getNativeElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "ndw-tab", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/lib/components/tab-group/tab-group.component.d.ts

@@ -4,11 +4,13 @@ export declare class TabGroupComponent {
     private readonly _tabs;
     private readonly _tabButtons;
     tabs: import("@angular/core").Signal<TabComponent[]>;
-    activeTab: import("@angular/core").ModelSignal<number>;
+    hasPadding: import("@angular/core").InputSignal<boolean>;
+    activeTabId: import("@angular/core").ModelSignal<string | number | undefined>;
     inlinePadding: import("@angular/core").InputSignal<number>;
+    constructor();
     selectTab(index: number): void;
     onKeyDown(event: KeyboardEvent): void;
     private getNextEnabledIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "inlinePadding": { "alias": "inlinePadding"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_tabs"], never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/lib/components/toast/toast.component.d.ts

@@ -7,6 +7,7 @@ export interface ToastDimensions {
 export declare class ToastComponent implements AfterViewInit {
     #private;
     message: import("@angular/core").InputSignal<string>;
+    closeButtonLabel: import("@angular/core").InputSignal<string>;
     id: import("@angular/core").InputSignal<string | undefined>;
     duration: import("@angular/core").InputSignal<number>;
     paused: import("@angular/core").InputSignal<boolean>;
@@ -15,5 +16,5 @@ export declare class ToastComponent implements AfterViewInit {
     elementDimensions: import("@angular/core").OutputEmitterRef<ToastDimensions>;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "paused": { "alias": "paused"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "elementDimensions": "elementDimensions"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "paused": { "alias": "paused"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "elementDimensions": "elementDimensions"; }, never, never, true, never>;
 }

package/lib/components/toast/toast.service.d.ts

@@ -6,6 +6,7 @@ interface ToastData {
     message: string;
     duration: number;
     remainingTime: number;
+    closeButtonLabel?: string;
 }
 export declare class ToastService {
     #private;
@@ -22,7 +23,7 @@ export declare class ToastService {
      * @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
      * @returns The ID of the created toast. Can be used to close the toast.
      */
-    open(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    open(message: string, duration?: number, closeButtonLabel?: string): ToastId;
     pause(): void;
     resume(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "10.0.1",
+  "version": "11.0.0",
   "peerDependencies": {
     "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",
@@ -8,11 +8,11 @@
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ndwnu/core": "1.0.0",
+    "@ndwnu/core": "1.1.1",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/angular": "8.6.12",
-    "ag-grid-angular": "^33.3.0",
-    "ag-grid-community": "^33.3.0",
+    "ag-grid-angular": "^34.0.2",
+    "ag-grid-community": "^34.0.2",
     "rxjs": "^7.8.0"
   },
   "sideEffects": false,

package/styles/base/_variables.scss

@@ -23,6 +23,11 @@
   --ndw-border-radius-md: 0.5rem;
   --ndw-border-radius-lg: 1.5rem;
 
+  /* Letter spacing */
+  --ndw-letter-spacing-sm: 0.1rem;
+  --ndw-letter-spacing-md: 0.2rem;
+  --ndw-letter-spacing-lg: 0.3rem;
+
   /* Elevation */
   --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
   --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
@@ -77,7 +82,7 @@
   /* Navigation */
   --main-navigation-collapse-width: 2.75rem;
   --main-navigation-expanded-width: 12.5rem;
-  --main-navigation-mobile-header-height: 6.25rem;
+  --main-navigation-mobile-header-height: 3.5rem;
 }
 
 /* Screen sizes */

package/styles/components/_edit-bar.scss

@@ -64,7 +64,7 @@ $min-width-sm: variables.$ndw-screen-sm + 0.1;
     flex-wrap: wrap;
   }
 
-  .grid {
+  .ndw-grid {
     box-sizing: border-box;
   }
 }

package/styles/components/_list-item.scss

@@ -0,0 +1,19 @@
+@use 'components/list-item' as *;
+@use '../base/typography' as *;
+
+[ndwListItem] {
+  cursor: pointer;
+
+  @include ndw-paragraph-md;
+  --list-item-animation-speed: var(--ndw-animation-speed-fast);
+  --list-item-background-color: var(--ndw-color-white);
+  --list-item-border-radius: var(--ndw-border-radius-sm);
+  --list-item-color: var(--ndw-color-grey-700);
+  --list-item-disabled-background-color: var(--ndw-color-grey-100);
+  --list-item-disabled-color: var(--ndw-color-grey-400);
+  --list-item-font-size: initial;
+  --list-item-gap: var(--ndw-spacing-sm);
+  --list-item-hover-background-color: var(--ndw-color-grey-100);
+  --list-item-min-height: var(--ndw-spacing-2xl);
+  --list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);
+}

package/styles/components/index.scss

@@ -7,8 +7,9 @@
 @forward 'input';
 @forward 'label';
 @forward 'link';
+@forward 'list-item';
+@forward 'map';
 @forward 'menu-button';
 @forward 'popover';
 @forward 'summary-card';
 @forward 'table';
-@forward 'map';

package/styles/layout/_grid.scss

@@ -4,7 +4,7 @@
   grid-column: span $span;
 }
 
-.grid {
+.ndw-grid {
   $grid-columns-2xs: 2;
   $grid-columns-xs: 4;
   $grid-columns-sm: 6;

package/styles/layout/grid.stories.ts

@@ -27,7 +27,7 @@ interface StoryArgs {
  *
  * ## Disable padding
  * Sometimes you may want to disable padding on the columns, for example when using a card component.
- * To do this, add the class `grid--no-padding` to the `.grid` element.
+ * To do this, add the class `ndw-grid--no-padding` to the `.ndw-grid` element.
  */
 
 const meta: Meta<StoryArgs> = {
@@ -42,18 +42,18 @@ const meta: Meta<StoryArgs> = {
     props,
     styles: [
       `
-        .grid > div {
+        .ndw-grid > div {
           background-color: var(--ndw-color-grey-300);
           padding: var(--ndw-spacing-xs);
         }
-        .grid {
+        .ndw-grid {
           background-color: var(--ndw-color-grey-100);
           margin-bottom: var(--ndw-spacing-xl);
         }
       `,
     ],
     template: `
-      <div class="grid ${props.disablePadding ? 'grid--no-padding' : ''}">
+      <div class="ndw-grid ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
         ${props.columnClasses
           .map(
             (classes, index) =>

package/styles/storybook/overrides.css

@@ -281,6 +281,18 @@ body {
   font-size: var(--ndw-base-font-size);
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &.css-11knh3z,
+  &.css-wzniqs {
+    font-family: var(--ndw-font-family-heading);
+  }
+}
+
 .sidebar-container.css-r1cy5n {
   background-color: var(--ndw-color-grey-700);
   color: var(--ndw-color-grey-400);

package/lib/components/pill/pill.model.d.ts

@@ -1 +0,0 @@
-export type PillColor = 'blue' | 'gray' | 'green' | 'purple' | 'red' | 'yellow';