@ndwnu/design-system 1.0.1 → 1.0.3

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

@@ -6,7 +6,7 @@ export declare class CollapsibleComponent {
     expanded: import("@angular/core").ModelSignal<boolean>;
     private readonly accordionService;
     get expandedClass(): boolean;
-    animationState: import("@angular/core").Signal<"in" | "out">;
+    animationState: import("@angular/core").Signal<"open" | "closed">;
     onClick(): void;
     onKeydown(event: KeyboardEvent): void;
     private toggle;

package/components/dropdown/dropdown-trigger.directive.d.ts

@@ -5,7 +5,6 @@ export declare class DropdownTriggerDirective implements OnDestroy {
     toggleOnClick: import("@angular/core").InputSignal<boolean>;
     isOpen: import("@angular/core").ModelSignal<boolean>;
     toggle(): void;
-    trapFocus(): void;
     private destroyRef;
     private elementRef;
     private overlay;
@@ -15,6 +14,7 @@ export declare class DropdownTriggerDirective implements OnDestroy {
     constructor();
     ngOnDestroy(): void;
     private open;
+    private trapFocus;
     private closeOverlayOnEscapeKey;
     private closeOverlayOnBackdropClick;
     private close;

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

@@ -1,9 +1,8 @@
-import { OnChanges } from '@angular/core';
 import { CheckboxComponent } from './checkbox';
 import { InputDirective } from './input';
 import { RadioGroupComponent } from './radio-group';
 import * as i0 from "@angular/core";
-export declare class FormFieldComponent implements OnChanges {
+export declare class FormFieldComponent {
     input: import("@angular/core").Signal<InputDirective | undefined>;
     radioGroup: import("@angular/core").Signal<RadioGroupComponent | undefined>;
     checkboxes: import("@angular/core").Signal<readonly CheckboxComponent[]>;
@@ -17,7 +16,7 @@ export declare class FormFieldComponent implements OnChanges {
     inputSuffix: import("@angular/core").Signal<string | undefined>;
     uuid: `${string}-${string}-${string}-${string}-${string}`;
     constructor();
-    ngOnChanges(): void;
+    clearInput(): void;
     private addInputTypeBasedClass;
     private setInputDisabledState;
     private setInputErrorState;

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

@@ -5,6 +5,7 @@ export declare class InputDirective implements OnInit {
     set error(error: boolean);
     set id(id: string);
     private readonly elementRef;
+    private readonly destroyRef;
     get element(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputDirective, never>;

package/components/form-field/input/input.model.d.ts

@@ -1,11 +1,13 @@
 export declare enum InputType {
     Date = "date",
     Email = "email",
+    Month = "month",
     Number = "number",
     Password = "password",
     Search = "search",
     Tel = "tel",
     Text = "text",
     Time = "time",
-    Url = "url"
+    Url = "url",
+    Week = "week"
 }

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

@@ -11,10 +11,10 @@ export declare class MainNavigationComponent implements AfterViewInit {
     footerTexts: import("@angular/core").InputSignal<string[] | undefined>;
     isCollapsible: import("@angular/core").InputSignal<boolean>;
     selected: import("@angular/core").OutputEmitterRef<number>;
+    isExpanded: import("@angular/core").ModelSignal<boolean>;
     buttons: import("@angular/core").Signal<readonly ElementRef<HTMLButtonElement>[]>;
     childMenuTemplate: import("@angular/core").Signal<TemplateRef<MainNavigationMenuComponent>>;
     brandImagePath: import("@angular/core").Signal<string>;
-    isExpanded: import("@angular/core").WritableSignal<boolean>;
     protected get brandAttribute(): string;
     protected get expandedClass(): boolean;
     onMouseMove(event: MouseEvent): void;
@@ -27,9 +27,9 @@ export declare class MainNavigationComponent implements AfterViewInit {
     ngAfterViewInit(): void;
     close(): void;
     open(item: MenuItem): void;
-    handleSelectedChild(id: number): void;
+    handleSelected(id: number): void;
     toggleView(): void;
     private setPositionStrategy;
     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; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, 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; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "isExpanded": "isExpandedChange"; }, never, never, true, never>;
 }

package/core/styles/ndw-styles.scss

@@ -20,6 +20,94 @@
   --ndw-text-primary: var(--ndw-color-primary);
 }
 
+.cdk-overlay-container, .cdk-global-overlay-wrapper {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+}
+
+.cdk-overlay-container:empty {
+  display: none;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1000;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0.6;
+}
+
+.cdk-overlay-dark-backdrop {
+  background: rgba(0, 0, 0, 0.32);
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.cdk-overlay-backdrop-noop-animation {
+  transition: none;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.cdk-global-scrollblock {
+  position: fixed;
+  width: 100%;
+  overflow-y: scroll;
+}
+
 :root {
   /* Colors */
   --_grey: 0, 0%;
@@ -234,6 +322,204 @@
   line-height: 150%;
 }
 
+.grid {
+  display: grid;
+  justify-items: stretch;
+  grid-template-columns: repeat(var(--grid-columns), minmax(1rem, 1fr));
+  gap: var(--grid-spacing);
+  padding: 0 var(--grid-spacing);
+  margin: 0 auto;
+  width: 100%;
+  min-width: min-content;
+  max-width: 1440px;
+}
+.grid .column-1 {
+  grid-column: span min(1, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-2 {
+  grid-column: span min(2, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-3 {
+  grid-column: span min(3, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-4 {
+  grid-column: span min(4, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-5 {
+  grid-column: span min(5, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-6 {
+  grid-column: span min(6, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-7 {
+  grid-column: span min(7, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-8 {
+  grid-column: span min(8, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-9 {
+  grid-column: span min(9, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-10 {
+  grid-column: span min(10, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-11 {
+  grid-column: span min(11, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-12 {
+  grid-column: span min(12, var(--grid-columns));
+  overflow: auto;
+}
+@media screen and (max-width: 1024px) {
+  .grid {
+    --grid-columns: 6;
+    --grid-spacing: var(--ndw-spacing-md);
+  }
+  .grid .column-md-1 {
+    display: none;
+  }
+  .grid .column-md-2 {
+    display: none;
+  }
+  .grid .column-md-3 {
+    display: none;
+  }
+  .grid .column-md-4 {
+    display: none;
+  }
+  .grid .column-md-5 {
+    display: none;
+  }
+  .grid .column-md-6 {
+    display: none;
+  }
+  .grid .column-md-7 {
+    display: none;
+  }
+  .grid .column-md-8 {
+    display: none;
+  }
+  .grid .column-md-9 {
+    display: none;
+  }
+  .grid .column-md-10 {
+    display: none;
+  }
+  .grid .column-md-11 {
+    display: none;
+  }
+  .grid .column-md-12 {
+    display: none;
+  }
+  .grid .column-sm-1 {
+    grid-column: span 1;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-2 {
+    grid-column: span 2;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-3 {
+    grid-column: span 3;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-4 {
+    grid-column: span 4;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-5 {
+    grid-column: span 5;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-6 {
+    grid-column: span 6;
+    overflow: auto;
+    display: block;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .grid {
+    --grid-columns: 12;
+    --grid-spacing: var(--ndw-spacing-lg);
+  }
+  .grid .column-md-1 {
+    grid-column: span 1;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-2 {
+    grid-column: span 2;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-3 {
+    grid-column: span 3;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-4 {
+    grid-column: span 4;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-5 {
+    grid-column: span 5;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-6 {
+    grid-column: span 6;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-7 {
+    grid-column: span 7;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-8 {
+    grid-column: span 8;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-9 {
+    grid-column: span 9;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-10 {
+    grid-column: span 10;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-11 {
+    grid-column: span 11;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-12 {
+    grid-column: span 12;
+    overflow: auto;
+    display: block;
+  }
+}
+
 [ndwButton] {
   box-sizing: border-box;
   display: flex;
@@ -376,7 +662,7 @@
 [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
   display: none;
 }
-[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator {
+[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   opacity: 0;
 }

package/core/styles/nwb-styles.scss

@@ -20,6 +20,94 @@
   --ndw-text-primary: var(--ndw-color-grey-600);
 }
 
+.cdk-overlay-container, .cdk-global-overlay-wrapper {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+}
+
+.cdk-overlay-container:empty {
+  display: none;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1000;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0.6;
+}
+
+.cdk-overlay-dark-backdrop {
+  background: rgba(0, 0, 0, 0.32);
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.cdk-overlay-backdrop-noop-animation {
+  transition: none;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.cdk-global-scrollblock {
+  position: fixed;
+  width: 100%;
+  overflow-y: scroll;
+}
+
 :root {
   /* Colors */
   --_grey: 0, 0%;
@@ -234,6 +322,204 @@
   line-height: 150%;
 }
 
+.grid {
+  display: grid;
+  justify-items: stretch;
+  grid-template-columns: repeat(var(--grid-columns), minmax(1rem, 1fr));
+  gap: var(--grid-spacing);
+  padding: 0 var(--grid-spacing);
+  margin: 0 auto;
+  width: 100%;
+  min-width: min-content;
+  max-width: 1440px;
+}
+.grid .column-1 {
+  grid-column: span min(1, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-2 {
+  grid-column: span min(2, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-3 {
+  grid-column: span min(3, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-4 {
+  grid-column: span min(4, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-5 {
+  grid-column: span min(5, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-6 {
+  grid-column: span min(6, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-7 {
+  grid-column: span min(7, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-8 {
+  grid-column: span min(8, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-9 {
+  grid-column: span min(9, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-10 {
+  grid-column: span min(10, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-11 {
+  grid-column: span min(11, var(--grid-columns));
+  overflow: auto;
+}
+.grid .column-12 {
+  grid-column: span min(12, var(--grid-columns));
+  overflow: auto;
+}
+@media screen and (max-width: 1024px) {
+  .grid {
+    --grid-columns: 6;
+    --grid-spacing: var(--ndw-spacing-md);
+  }
+  .grid .column-md-1 {
+    display: none;
+  }
+  .grid .column-md-2 {
+    display: none;
+  }
+  .grid .column-md-3 {
+    display: none;
+  }
+  .grid .column-md-4 {
+    display: none;
+  }
+  .grid .column-md-5 {
+    display: none;
+  }
+  .grid .column-md-6 {
+    display: none;
+  }
+  .grid .column-md-7 {
+    display: none;
+  }
+  .grid .column-md-8 {
+    display: none;
+  }
+  .grid .column-md-9 {
+    display: none;
+  }
+  .grid .column-md-10 {
+    display: none;
+  }
+  .grid .column-md-11 {
+    display: none;
+  }
+  .grid .column-md-12 {
+    display: none;
+  }
+  .grid .column-sm-1 {
+    grid-column: span 1;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-2 {
+    grid-column: span 2;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-3 {
+    grid-column: span 3;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-4 {
+    grid-column: span 4;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-5 {
+    grid-column: span 5;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-sm-6 {
+    grid-column: span 6;
+    overflow: auto;
+    display: block;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .grid {
+    --grid-columns: 12;
+    --grid-spacing: var(--ndw-spacing-lg);
+  }
+  .grid .column-md-1 {
+    grid-column: span 1;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-2 {
+    grid-column: span 2;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-3 {
+    grid-column: span 3;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-4 {
+    grid-column: span 4;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-5 {
+    grid-column: span 5;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-6 {
+    grid-column: span 6;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-7 {
+    grid-column: span 7;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-8 {
+    grid-column: span 8;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-9 {
+    grid-column: span 9;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-10 {
+    grid-column: span 10;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-11 {
+    grid-column: span 11;
+    overflow: auto;
+    display: block;
+  }
+  .grid .column-md-12 {
+    grid-column: span 12;
+    overflow: auto;
+    display: block;
+  }
+}
+
 [ndwButton] {
   box-sizing: border-box;
   display: flex;
@@ -376,7 +662,7 @@
 [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
   display: none;
 }
-[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator {
+[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   opacity: 0;
 }