@ndwnu/design-system 9.2.0 → 10.0.0

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

@@ -1,12 +1,31 @@
-import { OverlayRef } from '@angular/cdk/overlay';
+import { Signal } from '@angular/core';
 import * as i0 from "@angular/core";
+type ToastId = string;
+interface ToastData {
+    id: ToastId;
+    message: string;
+    duration: number;
+    remainingTime: number;
+}
 export declare class ToastService {
-    private readonly overlay;
-    private isOpen;
-    overlayRef?: OverlayRef;
-    detach(): void;
-    dispose(): void;
-    open(message: string): void;
+    #private;
+    paused: Signal<boolean>;
+    get toasts(): Signal<ToastData[]>;
+    constructor();
+    /**
+     * Close a toast by its ID. If no ID is provided, all toasts will be closed.
+     */
+    close(id?: string): void;
+    /**
+     * Open a toast notification with the given message and optional duration.
+     * @param message The message to display in the toast.
+     * @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}`;
+    pause(): void;
+    resume(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
 }
+export {};

package/lib/models/index.d.ts

@@ -1,2 +1,2 @@
+export { Image } from '@ndwnu/core';
 export * from './aria.model';
-export * from './image.model';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "9.2.0",
+  "version": "10.0.0",
   "peerDependencies": {
     "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",
@@ -8,9 +8,11 @@
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ndwnu/core": "0.0.3-beta.1",
+    "@ndwnu/core": "0.0.3-beta.5",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/angular": "8.6.12",
+    "ag-grid-angular": "^33.3.0",
+    "ag-grid-community": "^33.3.0",
     "rxjs": "^7.8.0"
   },
   "sideEffects": false,

package/styles/base/_colors.scss

@@ -8,6 +8,7 @@
   --_grey-300: 192, 5%, 82%;
   --_grey-200: 204, 11%, 91%;
   --_grey-100: 200, 16%, 96%;
+  --_grey-50: 0, 0%, 99%;
   --_white: 0, 0%, 100%;
 
   --ndw-color-grey-700: hsl(var(--_grey-700));
@@ -17,6 +18,7 @@
   --ndw-color-grey-300: hsl(var(--_grey-300));
   --ndw-color-grey-200: hsl(var(--_grey-200));
   --ndw-color-grey-100: hsl(var(--_grey-100));
+  --ndw-color-grey-50: hsl(var(--_grey-50));
   --ndw-color-white: hsl(var(--_white));
 
   // Primary

package/styles/base/_variables.scss

@@ -28,6 +28,7 @@
   --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
   --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
   --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-elevation-toast: 0 0.75rem 1.25rem hsla(var(--_grey-600), 0.125);
   --ndw-backdrop-color: var(--ndw-alpha-black-040);
 
   /* Animation */

package/styles/components/_map.scss

@@ -0,0 +1,114 @@
+@use '../base/typography' as *;
+
+.map-control {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+
+  height: 40px;
+  min-width: 40px;
+  line-height: 100%;
+
+  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);
+
+  @include ndw-paragraph-bold-md;
+  color: var(--ndw-color-grey-500);
+  background-color: var(--ndw-color-white);
+  transition: var(--ndw-animation-speed-default);
+  will-change: background-color, color;
+
+  &:hover {
+    background-color: var(--ndw-color-grey-100);
+  }
+
+  &.active {
+    color: var(--ndw-color-primary-500);
+
+    ndw-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    .map-control__chevron {
+      rotate: 180deg;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    color: var(--ndw-color-grey-300);
+  }
+
+  .map-control__chevron {
+    pointer-events: none;
+    padding: 0.25rem;
+    color: var(--ndw-color-primary);
+
+    transition-property: rotate;
+    transition-duration: var(--ndw-animation-speed-fast);
+    transition-timing-function: ease-out;
+    transition-delay: 0s;
+  }
+
+  .content-wrapper:not(:empty) {
+    @include ndw-paragraph-bold-md;
+    line-height: 1rem;
+    padding-inline: var(--ndw-spacing-xs);
+  }
+
+  > button {
+    @include ndw-paragraph-bold-md;
+
+    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);
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+.map-control-dropdown {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  padding: var(--ndw-spacing-2xs);
+  width: 226px;
+
+  border: var(--ndw-border-size-sm) 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);
+
+  &:not(.fixed) {
+    max-height: 380px;
+  }
+
+  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);
+
+    h3 {
+      color: var(--ndw-color-grey-600);
+      margin-block: 0;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}

package/styles/components/_table.scss

@@ -0,0 +1,8 @@
+.ag-root-wrapper {
+  padding: var(--ndw-spacing-md);
+  box-shadow: var(--ndw-elevation-content);
+
+  .ag-header-cell-text {
+    text-transform: uppercase;
+  }
+}

package/styles/components/index.scss

@@ -10,3 +10,5 @@
 @forward 'menu-button';
 @forward 'popover';
 @forward 'summary-card';
+@forward 'table';
+@forward 'map';

package/lib/components/form-field/autosuggest/autosuggest-option/autosuggest-option.model.d.ts

@@ -1,5 +0,0 @@
-import { AutosuggestOptionComponent } from './autosuggest-option.component';
-import { AutosuggestAddOptionComponent } from '../autosuggest-add-option';
-export type AutosuggestOption<T = string> = T;
-export type AutosuggestOptions<T = string> = AutosuggestOption<T>[];
-export type AutosuggestOptionComponentType<T> = AutosuggestOptionComponent<T> | AutosuggestAddOptionComponent<T>;

package/lib/components/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.d.ts

@@ -1,26 +0,0 @@
-import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
-import { EventEmitter, OnDestroy } from '@angular/core';
-import { AutocompleteOptionSelectionChange } from './autosuggest-option.component';
-import * as i0 from "@angular/core";
-export declare abstract class BaseAutosuggestOptionComponent<T> implements FocusableOption, OnDestroy {
-    readonly value: import("@angular/core").InputSignal<T | undefined>;
-    readonly selectionChange: EventEmitter<AutocompleteOptionSelectionChange<T>>;
-    protected _active: boolean;
-    protected _selected: boolean;
-    get active(): boolean;
-    get selected(): boolean;
-    private readonly element;
-    private readonly changeDetectorRef;
-    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
-    setActiveStyles(): void;
-    setInactiveStyles(): void;
-    select(emitEvent?: boolean): void;
-    deselect(emitEvent?: boolean): void;
-    handleKeydown(event: KeyboardEvent): void;
-    selectViaInteraction(): void;
-    protected abstract emitSelectionChangeEvent(isUserInput?: boolean): void;
-    ngOnDestroy(): void;
-    protected getHostElement(): HTMLElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseAutosuggestOptionComponent<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseAutosuggestOptionComponent<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}

package/lib/models/image.model.d.ts

@@ -1,4 +0,0 @@
-export interface Image {
-    src: string;
-    alt: string;
-}