@ndwnu/design-system 11.0.2 → 11.1.0

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

@@ -16,7 +16,7 @@ export declare class BannerComponent implements AfterViewInit {
      */
     readMoreLabel: import("@angular/core").InputSignal<string>;
     /**
-     * Use info, info-grey, warning or critical to indicate the type of banner.
+     * Use info, info-grey, warning, positive or critical to indicate the type of banner.
      */
     type: import("@angular/core").InputSignal<BannerType>;
     /**

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

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

package/lib/components/form-field/autosuggest/index.d.ts

@@ -1,4 +1,4 @@
-export { AutosuggestOption, AutosuggestOptions } from '@ndwnu/core';
+export { AutosuggestOption, AutosuggestOptions, AutosuggestSearchFn } from '@ndwnu/core';
 export * from './autosuggest.directive';
 export * from './autosuggest-option';
 export * from './autosuggest-panel';

package/lib/components/form-field/datepicker/datepicker.component.d.ts

@@ -0,0 +1,7 @@
+import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
+import * as i0 from "@angular/core";
+export declare class DatepickerComponent {
+    dateClass: MatCalendarCellClassFunction<Date>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "ndw-datepicker", never, {}, {}, never, never, true, never>;
+}

package/lib/components/form-field/datepicker/index.d.ts

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

package/lib/components/form-field/index.d.ts

@@ -1,6 +1,7 @@
 export * from './autosuggest';
 export * from './checkbox';
 export * from './checkbox-group';
+export * from './datepicker';
 export * from './error';
 export * from './file-upload';
 export * from './form-field.component';

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "11.0.2",
+  "version": "11.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.3",
+    "@ndwnu/core": "1.1.4",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/angular": "8.6.12",
     "ag-grid-angular": "^34.0.2",

package/styles/base/_colors.scss

@@ -88,10 +88,14 @@
   // Feedback
   --_positive: 133, 92%;
   --_positive-100: 117, 56%, 92%;
+  --_positive-200: var(--_positive), 88%;
+  --_positive-300: var(--_positive), 82%;
   --_positive-500: var(--_positive), 33%;
   --_positive-600: var(--_positive), 24%;
   --_warning: 43, 93%;
   --_warning-100: 44, 100%, 94%;
+  --_warning-200: var(--_warning), 92%;
+  --_warning-300: var(--_warning), 88%;
   --_warning-500: var(--_warning), 43%;
   --_warning-600: 42, 83%, 32%;
   --_alternative: 292, 100%;
@@ -104,12 +108,17 @@
   --_critical-500: var(--_critical), 46%;
   --_info-100: 210, 100%, 96%;
   --_info-200: 210, 86%, 91%;
+  --_info-300: 209, 93%, 86%;
   --_info-500: 208, 100%, 41%;
 
   --ndw-color-positive-100: hsl(var(--_positive-100));
+  --ndw-color-positive-200: hsl(var(--_positive-200));
+  --ndw-color-positive-300: hsl(var(--_positive-300));
   --ndw-color-positive-500: hsl(var(--_positive-500));
   --ndw-color-positive-600: hsl(var(--_positive-600));
   --ndw-color-warning-100: hsl(var(--_warning-100));
+  --ndw-color-warning-200: hsl(var(--_warning-200));
+  --ndw-color-warning-300: hsl(var(--_warning-300));
   --ndw-color-warning-500: hsl(var(--_warning-500));
   --ndw-color-warning-600: hsl(var(--_warning-600));
   --ndw-color-alternative-100: hsl(var(--_alternative-100));
@@ -120,6 +129,7 @@
   --ndw-color-critical-500: hsl(var(--_critical-500));
   --ndw-color-info-100: hsl(var(--_info-100));
   --ndw-color-info-200: hsl(var(--_info-200));
+  --ndw-color-info-300: hsl(var(--_info-300));
   --ndw-color-info-500: hsl(var(--_info-500));
 
   --ndw-color-notification: hsl(19, 100%, 35%);

package/styles/base/colors.stories.model.ts

@@ -57,9 +57,13 @@ export const NOTIFICATIONS: ColorGroup = {
   name: 'Notifications',
   colors: [
     { value: 100, altName: 'Positive' },
+    { value: 200, altName: 'Positive' },
+    { value: 300, altName: 'Positive' },
     { value: 500, altName: 'Positive' },
     { value: 600, altName: 'Positive' },
     { value: 100, altName: 'Warning' },
+    { value: 200, altName: 'Warning' },
+    { value: 300, altName: 'Warning' },
     { value: 500, altName: 'Warning' },
     { value: 600, altName: 'Warning' },
     { value: 100, altName: 'Critical' },
@@ -67,6 +71,8 @@ export const NOTIFICATIONS: ColorGroup = {
     { value: 300, altName: 'Critical' },
     { value: 500, altName: 'Critical' },
     { value: 100, altName: 'Info' },
+    { value: 200, altName: 'Info' },
+    { value: 300, altName: 'Info' },
     { value: 500, altName: 'Info' },
     { value: 100, altName: 'Alternative' },
     { value: 500, altName: 'Alternative' },

package/styles/components/_datepicker.scss

@@ -0,0 +1,44 @@
+@use '@angular/material' as mat;
+
+:root {
+  @include mat.datepicker-overrides(
+    (
+      calendar-body-label-text-color: var(--ndw-color-primary),
+      calendar-date-text-color: var(--ndw-color-black),
+      calendar-text-font: var(--ndw-font-family-body),
+      calendar-text-size: var(--ndw-font-size-sm),
+      toggle-icon-color: var(--ndw-color-primary),
+    )
+  );
+
+  mat-calendar.ndw-calendar {
+    background-color: var(--ndw-color-white);
+    border-radius: var(--ndw-border-radius-sm);
+  }
+
+  button.ndw-date {
+    border-radius: 50%;
+
+    &:hover {
+      background: var(--ndw-color-primary-100);
+    }
+
+    &:active {
+      background: var(--ndw-color-primary-200);
+    }
+
+    &.highlighted {
+      background: var(--ndw-color-secondary-400);
+      border-radius: 50%;
+      color: var(--ndw-color-white);
+
+      &:hover {
+        background: var(--ndw-color-secondary-500);
+      }
+
+      &:active {
+        background: var(--ndw-color-secondary-600);
+      }
+    }
+  }
+}

package/styles/components/index.scss

@@ -1,5 +1,6 @@
 @forward 'button';
 @forward 'card';
+@forward 'datepicker';
 @forward 'divider';
 @forward 'dropdown';
 @forward 'edit-bar';

package/styles/utils/_screenreader.scss

@@ -0,0 +1,13 @@
+.sr-only {
+  position: absolute;
+
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+
+  clip: rect(0, 0, 0, 0);
+}

package/styles/utils/index.scss

@@ -1 +1 @@
-@forward 'utils/screenreader';
+@forward 'screenreader';