@ndwnu/design-system 7.1.0 → 8.0.1

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

@@ -0,0 +1,9 @@
+import { AvatarStatus, AvatarColor } from './avatar.model';
+import * as i0 from "@angular/core";
+export declare class AvatarComponent {
+    status: import("@angular/core").InputSignal<AvatarStatus>;
+    initials: import("@angular/core").InputSignal<boolean>;
+    color: import("@angular/core").InputSignal<AvatarColor | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵ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>;
+}

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

@@ -0,0 +1,2 @@
+export type AvatarStatus = 'approved' | 'open' | 'none';
+export type AvatarColor = 'default' | 'blue' | 'purple' | 'red' | 'green' | 'yellow' | 'orange';

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

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

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

@@ -8,7 +8,7 @@ export declare class CollapsibleComponent {
     private readonly uuid;
     readonly toggleUuid: string;
     readonly sectionUuid: string;
-    animationState: import("@angular/core").Signal<"closed" | "open">;
+    animationState: import("@angular/core").Signal<"open" | "closed">;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;

package/lib/components/form-field/input/input.directive.d.ts

@@ -3,6 +3,7 @@ import { AbstractControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class InputDirective implements OnInit {
     set disabled(disabled: boolean);
+    get error(): boolean;
     set error(error: boolean);
     set success(success: boolean);
     set id(id: string);
@@ -13,6 +14,7 @@ export declare class InputDirective implements OnInit {
     get element(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
     get control(): AbstractControl | null;
     ngOnInit(): void;
+    updateErrorAttribute(formFieldError?: boolean): void;
     private setSelectPlaceholderAttribute;
     private updateRequiredAttribute;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputDirective, never>;

package/lib/components/form-field/month-input/month-input.component.d.ts

@@ -29,6 +29,7 @@ export declare class MonthInputComponent implements ControlValueAccessor, OnInit
     private onChange;
     constructor();
     ngOnInit(): void;
+    updateErrorAttribute(formFieldError?: boolean): void;
     writeValue(value: Date | null): void;
     registerOnChange(fn: (value: Date | null) => void): void;
     setDisabledState(isDisabled: boolean): void;

package/lib/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './alert';
+export * from './avatar';
 export * from './badge';
 export * from './banner';
 export * from './breadcrumb';
@@ -21,9 +22,10 @@ export * from './multi-select';
 export * from './pill';
 export * from './popover';
 export * from './router-breadcrumbs';
+export * from './splitter';
+export * from './summary-card';
 export * from './tab';
 export * from './tab-group';
 export * from './tag';
 export * from './toast';
 export * from './tooltip';
-export * from './summary-card';

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

@@ -22,7 +22,7 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     childMenuTemplate: import("@angular/core").Signal<TemplateRef<MainNavigationMenuComponent>>;
     isMobile: import("@angular/core").WritableSignal<boolean>;
     brandImagePath: import("@angular/core").Signal<string>;
-    environmentPillColor: import("@angular/core").Signal<"gray" | "green" | "blue" | "yellow">;
+    environmentPillColor: import("@angular/core").Signal<"blue" | "green" | "yellow" | "gray">;
     activeId?: number;
     protected mobilePortal?: TemplatePortal<MainNavigationMenuComponent>;
     onMouseMove(event: MouseEvent): void;

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

@@ -7,4 +7,4 @@ import { IconComponent } from '../icon';
 import { MainNavigationMenuComponent } from '../main-navigation-menu';
 import { TooltipDirective } from '../tooltip';
 import { PillComponent } from '../pill';
-export declare const MAIN_NAVIGATION_IMPORTS: (typeof NgTemplateOutlet | typeof IconComponent | typeof NgClass | typeof TooltipDirective | typeof BadgeComponent | typeof CdkPortalOutlet | typeof MainNavigationMenuComponent | typeof OverlayModule | typeof PillComponent | typeof RouterLink)[];
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof BadgeComponent | typeof IconComponent | typeof NgClass | typeof NgTemplateOutlet | typeof RouterLink | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof PillComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];

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

@@ -0,0 +1 @@
+export * from './splitter.component';

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

@@ -0,0 +1,69 @@
+import { Point } from '@angular/cdk/drag-drop';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SplitterComponent implements AfterViewInit, OnDestroy {
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional width of the first panel (in pixels) when the component is initialized.
+     */
+    readonly initialPanelWidth: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * Minimum width of both panels (in pixels).
+     */
+    readonly minimumPanelWidth: import("@angular/core").InputSignal<number>;
+    protected readonly firstPanelWidth: import("@angular/core").WritableSignal<number>;
+    protected readonly secondPanelWidth: import("@angular/core").Signal<number>;
+    protected readonly isDragging: import("@angular/core").WritableSignal<boolean>;
+    private readonly container;
+    private readonly splitter;
+    private readonly cdkDrag;
+    private storedFirstPanelWidth;
+    /**
+     * Flag to indicate if the mouse click event should be
+     * ignored because the user is dragging the splitter.
+     */
+    private ignoreMouseClick;
+    /**
+     * Reactive object to store the dimensions of the drag elements.
+     * Updated by a resize observer on the container.
+     */
+    private readonly dragElementDimensions;
+    private readonly resizeObserver;
+    /**
+     * Available width for the panels, without considering the `minimumPanelWidth` input.
+     */
+    private readonly availableWidth;
+    /**
+     * Position of the drag handle when the component is initialized.
+     * The drag position is always relative to this starting position.
+     */
+    private readonly dragStartPosition;
+    /**
+     * Minimum panel width that is safe to use, considering the
+     * available container width and the `minimumPanelWidth` input.
+     */
+    protected readonly safeMinPanelWidth: import("@angular/core").Signal<number>;
+    /**
+     * Maximum panel width that is safe to use, considering the
+     * available container width and the `minimumPanelWidth
+     */
+    protected readonly safeMaxPanelWidth: import("@angular/core").Signal<number>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    protected constrainPosition: (userPointerPosition: Point) => {
+        x: number;
+        y: number;
+    };
+    protected onDragStarted(): void;
+    protected onDragEnded(): void;
+    protected onDragMoved(): void;
+    protected onSplitterMouseDown(): void;
+    protected onSplitterMouseUp(): void;
+    protected setDragPosition(position: number): void;
+    protected storeFirstPanelWidth(): void;
+    private setFirstPanelWidth;
+    private clampPanelWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "initialPanelWidth": { "alias": "initialPanelWidth"; "required": false; "isSignal": true; }; "minimumPanelWidth": { "alias": "minimumPanelWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
+}

package/lib/components/summary-card/index.d.ts

@@ -2,7 +2,6 @@ export * from './summary-card.model';
 export * from './summary-card.component';
 export * from './summary-card-actions/summary-card-actions.component';
 export * from './summary-card-action/summary-card-action.component';
-export * from './summary-card-avatar/summary-card-avatar.component';
 export * from './summary-card-content/summary-card-content.component';
 export * from './summary-card-header/summary-card-header.component';
 export * from './summary-card-tags/summary-card-tags.component';

package/lib/components/summary-card/summary-card.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class SummaryCardComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardComponent, "ndw-summary-card", never, {}, {}, never, ["ndw-summary-card-avatar", "ndw-summary-card-header", "ndw-summary-card-content", "ndw-summary-card-tags"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardComponent, "ndw-summary-card", never, {}, {}, never, ["ndw-avatar", "ndw-summary-card-header", "ndw-summary-card-content", "ndw-summary-card-tags"], true, never>;
 }

package/lib/components/summary-card/summary-card.model.d.ts

@@ -1,2 +1 @@
-export type SummaryVariant = 'default' | 'orange' | 'blue' | 'green' | 'yellow' | 'red' | 'purple';
 export type SummaryActionsView = 'visible' | 'popover' | 'auto';

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "peerDependencies": {
-    "@angular/animations": "~19.0.0",
-    "@angular/cdk": "~19.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
-    "@angular/forms": "~19.0.0",
-    "@angular/router": "~19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@ndwnu/core": "0.0.1-beta.1",
     "@storybook/addon-actions": "8.5.0",
     "@storybook/angular": "8.5.0",
-    "rxjs": "~7.8.0"
+    "rxjs": "^7.8.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ndwnu-design-system.mjs",

package/styles/base/typography.stories.ts

@@ -98,7 +98,7 @@ const meta: Meta<StoryArgs> = {
                 <span>150%</span>
                 <span>.${typography.class}</span>
               </div>
-            `
+            `,
               )
               .join('')}
           </section>

package/styles/components/_divider.scss

@@ -1,12 +1,10 @@
-hr {
-  &[ndwDivider] {
-    background-color: var(--ndw-color-grey-300);
-    border: none;
-    height: var(--ndw-border-size-sm);
-    margin: var(--ndw-spacing-xs) 0;
-  }
+hr[ndwDivider] {
+  background-color: var(--ndw-color-grey-300);
+  border: none;
+  height: var(--ndw-border-size-sm);
+  margin: var(--ndw-spacing-xs) 0;
 
-  &[noMargin] {
+  & [noMargin] {
     margin-block: 0;
   }
 }

package/styles/components/_input.scss

@@ -47,6 +47,10 @@
     background-color: var(--ndw-color-critical-100);
     border-color: var(--ndw-color-critical-500);
 
+    [ndwInput] {
+      background-color: var(--ndw-color-critical-100);
+    }
+
     &:hover {
       border-color: var(--ndw-color-grey-300);
     }
@@ -69,17 +73,37 @@
     color: var(--ndw-color-grey-500);
     pointer-events: none;
 
+    [ndwInput] {
+      background-color: var(--ndw-color-grey-100);
+    }
+
     ndw-icon {
-      color: var(--ndw-color-grey-300);
+      color: var(--ndw-color-grey-500);
     }
   }
 }
 
+.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]) {
   padding-inline-end: var(--ndw-spacing-xs);
 }
 
+.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
+  background-color: var(--ndw-color-white);
+}
+
+.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
+  background-color: var(--ndw-color-white);
+  select[ndwInput] {
+    background-color: var(--ndw-color-white);
+  }
+}
+
 // 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]) {

package/styles/components/_link.scss

@@ -6,6 +6,7 @@
   border: 0;
 
   font-size: inherit;
+  font-family: var(--ndw-font-family-body);
   text-decoration: underline var(--ndw-border-size-sm) transparent;
   text-underline-offset: var(--ndw-border-size-md);
 

package/styles/components/_summary-card.scss

@@ -18,15 +18,13 @@
   }
 
   &__wrapper {
-    overflow: hidden;
-
     display: grid;
     gap: var(--ndw-spacing-md);
     height: 100%;
     align-items: start;
     box-sizing: border-box;
 
-    &:has(ndw-summary-card-avatar) {
+    &:has(ndw-avatar) {
       grid-template-columns: max-content 1fr;
     }
 
@@ -140,63 +138,6 @@
     color: var(--ndw-color-grey-500);
   }
 
-  .ndw-summary-card-avatar {
-    display: grid;
-    place-content: center;
-    position: relative;
-    width: 30px;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
-    font-size: var(--ndw-font-size-sm);
-
-    &.ndw-summary-card-avatar--default {
-      color: var(--ndw-color-grey-700);
-      background-color: var(--ndw-color-grey-300);
-    }
-
-    &.ndw-summary-card-avatar--orange {
-      color: var(--ndw-color-primary-700);
-      background-color: var(--ndw-color-primary-050);
-    }
-
-    &.ndw-summary-card-avatar--blue {
-      color: var(--ndw-color-info-500);
-      background-color: var(--ndw-color-info-100);
-    }
-
-    &.ndw-summary-card-avatar--green {
-      color: var(--ndw-color-positive-500);
-      background-color: var(--ndw-color-positive-100);
-    }
-
-    &.ndw-summary-card-avatar--red {
-      color: var(--ndw-color-critical-500);
-      background-color: var(--ndw-color-critical-100);
-    }
-
-    &.ndw-summary-card-avatar--yellow {
-      color: var(--ndw-color-warning-500);
-      background-color: var(--ndw-color-warning-100);
-    }
-
-    &.ndw-summary-card-avatar--purple {
-      color: var(--ndw-color-alternative-500);
-      background-color: var(--ndw-color-alternative-100);
-    }
-
-    > img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-    }
-
-    ndw-icon {
-      font-size: var(--ndw-font-size-lg);
-    }
-  }
-
   .ndw-summary-card-actions {
     flex: 1;
     display: flex;

package/styles/components/link.stories.ts

@@ -50,7 +50,7 @@ const meta: Meta<StoryArgs> = {
   title: 'Components/Link',
   decorators: [
     componentWrapperDecorator(
-      (story) => `<div style="font-size: var(--ndw-font-size-sm);">${story}</div>`
+      (story) => `<div style="font-size: var(--ndw-font-size-sm);">${story}</div>`,
     ),
     moduleMetadata({
       imports: [IconComponent],

package/styles/layout/grid.stories.ts

@@ -59,7 +59,7 @@ const meta: Meta<StoryArgs> = {
             (classes, index) =>
               `<div class="${classes.join(' ')}">
                 ${index + 1}
-              </div>`
+              </div>`,
           )
           .join('')}
       </div>

package/styles/storybook/_reset.scss

@@ -8,6 +8,7 @@
 
 body {
   font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-base-font-size);
 }
 
 h1,

package/lib/components/summary-card/summary-card-avatar/summary-card-avatar.component.d.ts

@@ -1,8 +0,0 @@
-import { SummaryVariant } from '../summary-card.model';
-import * as i0 from "@angular/core";
-export declare class SummaryCardAvatarComponent {
-    readonly variant: import("@angular/core").InputSignal<SummaryVariant>;
-    protected readonly variantClass: import("@angular/core").Signal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardAvatarComponent, "ndw-summary-card-avatar", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}