@ndwnu/design-system 11.1.1 → 12.1.0

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "11.1.1",
+  "version": "12.1.0",
   "peerDependencies": {
-    "@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/material": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@ndwnu/core": "1.1.5",
-    "@storybook/addon-actions": "8.6.12",
-    "@storybook/angular": "8.6.12",
+    "@angular/animations": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/material": "^20.0.0",
+    "@angular/router": "^20.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/_divider.scss

@@ -4,7 +4,7 @@ hr[ndwDivider] {
   height: var(--ndw-border-size-sm);
   margin: var(--ndw-spacing-xs) 0;
 
-  & [noMargin] {
+  &[noMargin] {
     margin-block: 0;
   }
 }

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/components/divider.stories.ts

@@ -40,7 +40,7 @@ const meta: Meta<StoryArgs> = {
     styles: [
       `
         .content {
-          background-color: var(--ndw-color-grey-200);
+          background-color: var(--ndw-color-grey-100);
           padding: var(--ndw-spacing-xs);
         }
       `,

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%;
+}

package/styles/layout/grid.stories.ts

@@ -3,17 +3,19 @@ import { type Meta, type StoryObj } from '@storybook/angular';
 interface StoryArgs {
   columnClasses: string[][];
   disablePadding?: boolean;
+  useContainerQueries?: boolean;
 }
 
 /**
- * Create a responsive grid layout with columns. There are multiple breakpoints:
+ * Create a responsive grid layout with columns. There are multiple breakpoints based
+ * on the viewport size. Each breakpoint has a specific number of columns:
  * - Above 1024px (sm): 12 columns
  * - 768px-1024px (xs): 6 columns
  * - 480px-768px (2xs): 4 columns
  * - Below 480px: 2 columns
  * - Maximum width: 1440px
  *
- * The grid needs a container element with the class `grid`. Column elements
+ * The grid needs a container element with the class `ndw-grid`. Column elements
  * should have classes like:
  * - `column-{span}`: all screen sizes
  * - `column-2xs-{span}`: below 480px
@@ -26,8 +28,22 @@ interface StoryArgs {
  * Use the viewport tool to see responsive behavior.
  *
  * ## 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 `ndw-grid--no-padding` to the `.ndw-grid` element.
+ *
+ * ## Container grid
+ *
+ * It is also possible to use a container grid which uses breakpoints
+ * based on it's container instead of the viewport.
+ *
+ * There are a few notable differences when using a container grid:
+ * - Container queries are used instead of media queries.
+ * - The container element must have the `ndw-c-grid` class instead of `ndw-grid`.
+ * - The column classes are prefixed with `ndw-c-col-` instead of `column-`
+ * - The container grid always has 12 columns, regardless of the container size.
+ * - The container grid does not have padding on the outside of between columns.
+ * - The container grid uses flex layout instead of CSS grid.
  */
 
 const meta: Meta<StoryArgs> = {
@@ -42,22 +58,26 @@ const meta: Meta<StoryArgs> = {
     props,
     styles: [
       `
-        .ndw-grid > div {
+        .ndw-grid > div,
+        .ndw-c-grid > div {
+          text-align: center;
           background-color: var(--ndw-color-grey-300);
+          border: 1px solid var(--ndw-color-grey-400);
           padding: var(--ndw-spacing-xs);
         }
-        .ndw-grid {
+        .ndw-grid,
+        .ndw-c-grid {
           background-color: var(--ndw-color-grey-100);
           margin-bottom: var(--ndw-spacing-xl);
         }
       `,
     ],
     template: `
-      <div class="ndw-grid ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
+      <div class="${props.useContainerQueries ? 'ndw-c-grid' : 'ndw-grid'} ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
         ${props.columnClasses
           .map(
             (classes, index) =>
-              `<div class="${classes.join(' ')}">
+              `<div class="${classes.map((c) => `${props.useContainerQueries ? 'ndw-c-col-' : 'column-'}${c}`).join(' ')}">
                 ${index + 1}
               </div>`,
           )
@@ -66,11 +86,23 @@ const meta: Meta<StoryArgs> = {
     `,
   }),
   argTypes: {
+    disablePadding: {
+      description: 'Disable the inline padding on the grid.',
+      control: { type: 'boolean' },
+      table: { category: 'Grid configuration' },
+    },
     columnClasses: {
       description: 'Array of classes to apply to each column.',
+      table: {
+        category: 'Story inputs',
+      },
     },
-    disablePadding: {
-      description: 'Disable the inline padding on the grid.',
+    useContainerQueries: {
+      description: 'Use container queries instead of media queries for the grid.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Story inputs',
+      },
     },
   },
 };
@@ -80,19 +112,21 @@ type Story = StoryObj<StoryArgs>;
 export const Default: Story = {
   args: {
     columnClasses: [
-      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
+      ['1', '2xs-4', 'xs-2', 'sm-1'],
+      ['1', '2xs-4', 'xs-2', 'sm-1'],
+      ['1', 'xs-2', 'sm-1'],
+      ['1', 'xs-2', 'sm-1'],
+      ['1', 'sm-1'],
+      ['1', 'sm-1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
     ],
+    disablePadding: false,
+    useContainerQueries: false,
   },
 };
 
@@ -102,38 +136,33 @@ export const Default: Story = {
 export const ResponsiveColumns: Story = {
   args: {
     columnClasses: [
-      ['column-12', 'column-md-4', 'column-sm-3'],
-      ['column-12', 'column-md-4', 'column-sm-3'],
-      ['column-12', 'column-md-4', 'column-sm-6'],
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
     ],
   },
 };
 
 export const MixedColumnWidth: Story = {
   args: {
-    columnClasses: [
-      ['column-6'],
-      ['column-2'],
-      ['column-4'],
-      ['column-2'],
-      ['column-2'],
-      ['column-2'],
-      ['column-6'],
-      ['column-12'],
-    ],
+    columnClasses: [['6'], ['2'], ['4'], ['2'], ['2'], ['2'], ['6'], ['12']],
   },
 };
 
 export const NoPadding: Story = {
   args: {
+    columnClasses: [['6'], ['6'], ['2'], ['2'], ['2'], ['6']],
+    disablePadding: true,
+  },
+};
+
+export const ContainerQueryGrid: Story = {
+  args: {
+    useContainerQueries: true,
     columnClasses: [
-      ['column-6'],
-      ['column-6'],
-      ['column-2'],
-      ['column-2'],
-      ['column-2'],
-      ['column-6'],
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-12', 'md-4'],
     ],
-    disablePadding: true,
   },
 };

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

@@ -1,12 +0,0 @@
-import { OnInit } from '@angular/core';
-import { CollapsibleComponent } from '../collapsible';
-import { ListComponent } from '../list';
-import * as i0 from "@angular/core";
-export declare class AccordionComponent extends ListComponent implements OnInit {
-    #private;
-    collapseOthers: import("@angular/core").InputSignal<boolean>;
-    collapsibles: import("@angular/core").Signal<readonly CollapsibleComponent[]>;
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ndw-accordion", never, { "collapseOthers": { "alias": "collapseOthers"; "required": false; "isSignal": true; }; }, {}, ["collapsibles"], ["*"], true, never>;
-}

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

@@ -1,8 +0,0 @@
-import { Subject } from 'rxjs';
-import * as i0 from "@angular/core";
-export declare class AccordionService {
-    expanded$: Subject<number>;
-    setExpandedCollapsible(index: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AccordionService>;
-}

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

@@ -1,2 +0,0 @@
-export * from './accordion.component';
-export * from './accordion.service';

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

@@ -1,26 +0,0 @@
-import { AriaLive } from '../../models';
-import { AlertType } from './alert.model';
-import * as i0 from "@angular/core";
-export declare class AlertComponent {
-    /**
-     * Whether the alert is actionable, shows a close icon and a title.
-     */
-    actionable: import("@angular/core").InputSignal<boolean>;
-    /**
-     * The title of the alert. Only used when actionable is true.
-     */
-    title: import("@angular/core").InputSignal<string | undefined>;
-    /**
-     * Use info, info-grey, warning or critical to indicate the type of alert.
-     */
-    type: import("@angular/core").InputSignal<AlertType>;
-    /**
-     * Use polite, assertive or off to indicate whether the alert is
-     * announced automatically by the screen reader.
-     */
-    ariaLive: import("@angular/core").InputSignal<AriaLive>;
-    close: import("@angular/core").OutputEmitterRef<void>;
-    onClose(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ndw-alert", never, { "actionable": { "alias": "actionable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
-}

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

@@ -1 +0,0 @@
-export type AlertType = 'critical' | 'info' | 'info-grey' | 'warning';

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

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

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

@@ -1,9 +0,0 @@
-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

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

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

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

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

@@ -1,18 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class BadgeComponent {
-    /**
-     * The value of the badge
-     */
-    value: import("@angular/core").InputSignal<number | undefined>;
-    /**
-     * The aria label, used by screen readers to give context.
-     */
-    ariaLabel: import("@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: import("@angular/core").InputSignal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: i0.ɵɵ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>;
-}

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

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

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

@@ -1,38 +0,0 @@
-import { AfterViewInit, ElementRef } from '@angular/core';
-import { AriaLive } from '../../models';
-import { BannerType } from './banner.model';
-import * as i0 from "@angular/core";
-export declare class BannerComponent implements AfterViewInit {
-    /**
-     * The title of the banner.
-     */
-    title: import("@angular/core").InputSignal<string>;
-    /**
-     * The message of the banner.
-     */
-    message: import("@angular/core").InputSignal<string>;
-    /**
-     * The read more label if the message is truncated.
-     */
-    readMoreLabel: import("@angular/core").InputSignal<string>;
-    /**
-     * Use info, info-grey, warning, positive or critical to indicate the type of banner.
-     */
-    type: import("@angular/core").InputSignal<BannerType>;
-    /**
-     * Use polite, assertive or off to indicate whether the alert is
-     * announced automatically by the screen reader.
-     */
-    ariaLive: import("@angular/core").InputSignal<AriaLive>;
-    /**
-     * Emits when the banner close button is clicked.
-     */
-    close: import("@angular/core").OutputEmitterRef<void>;
-    textContent: import("@angular/core").Signal<ElementRef<any> | undefined>;
-    showReadMore: boolean;
-    ngAfterViewInit(): void;
-    onClose(event: MouseEvent): void;
-    private setReadMore;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "ndw-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": true; "isSignal": true; }; "readMoreLabel": { "alias": "readMoreLabel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
-}

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

@@ -1 +0,0 @@
-export type BannerType = 'critical' | 'info' | 'info-grey' | 'warning' | 'positive';

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

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

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

@@ -1,6 +0,0 @@
-import { CoreBreadcrumbComponent } from '@ndwnu/core';
-import * as i0 from "@angular/core";
-export declare class BreadcrumbComponent extends CoreBreadcrumbComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "ndw-breadcrumb", never, {}, {}, never, ["*"], true, never>;
-}

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

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

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

@@ -1,8 +0,0 @@
-import { CoreBreadcrumbGroupComponent } from '@ndwnu/core';
-import { BreadcrumbComponent } from '../breadcrumb';
-import * as i0 from "@angular/core";
-export declare class BreadcrumbGroupComponent extends CoreBreadcrumbGroupComponent<BreadcrumbComponent> {
-    protected breadcrumbs: import("@angular/core").Signal<readonly BreadcrumbComponent[]>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbGroupComponent, "ndw-breadcrumb-group", never, {}, {}, ["breadcrumbs"], never, true, never>;
-}

package/lib/components/breadcrumb-group/index.d.ts

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

package/lib/components/button/button.directive.d.ts

@@ -1,9 +0,0 @@
-import { OnInit } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class ButtonDirective implements OnInit {
-    private readonly elementRef;
-    get element(): HTMLButtonElement;
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDirective, "[ndwButton]", never, {}, {}, never, never, true, never>;
-}

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

@@ -1 +0,0 @@
-export * from './button.directive';

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

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