@energycap/components 0.47.5 → 0.47.6-AppDarkMode.20261106-1815

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.47.5",
+  "version": "0.47.6-AppDarkMode.20261106-1815",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"

package/src/assets/images/icon-carbonhub-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64">
+  <path fill="#fff" d="M47.05 45.248v2.87H34.8v-2.24l6.282-5.932c.665-.635 1.502-1.408 1.758-1.851.275-.478.35-.911.35-1.359 0-.655-.222-1.152-.66-1.502-.444-.35-1.088-.502-1.945-.526-1.103-.025-1.767.344-2.343.62-.577.27-1.054.68-1.443 1.22l-2.747-1.767c.635-.945 1.511-1.683 2.629-2.22 1.117-.532 2.392-.802 3.84-.802 1.206 0 2.27.197 3.175.59.906.394 1.615.956 2.117 1.674.507.72.758 1.57.758 2.546 0 .886-.187 1.713-.556 2.49-.37.779-1.093 1.66-2.161 2.654l-3.747 3.535h6.942Z"/>
+  <path fill="#4684E8" d="M32 6.4c-7.823 0-14.813 3.52-19.51 9.049l-5.248-3.722C13.11 4.569 22.02 0 32 0c9.98 0 18.89 4.569 24.758 11.727l-5.248 3.722C46.814 9.92 39.823 6.4 32 6.4Z"/>
+  <path fill="#fff" d="M32 64c9.98 0 18.89-4.569 24.758-11.727l-5.248-3.722C46.813 54.08 39.823 57.6 32 57.6 17.86 57.6 6.4 46.14 6.4 32c0-4.017.95-7.798 2.6-11.18l-5.298-3.757A31.804 31.804 0 0 0 0 32c0 17.674 14.326 32 32 32Z"/>
+  <path fill="#4684E8" d="M24.27 40.714h-.004a11.452 11.452 0 0 1-3.289-4.648 11.397 11.397 0 0 1 0-8.206 11.515 11.515 0 0 1 3.289-4.653h.005c4.106-3.613 10.722-3.613 14.823 0h.005a11.45 11.45 0 0 1 3.289 4.648c.074.187.118.384.177.57 1.073.129 2.077.38 2.973.779a8.118 8.118 0 0 1 2.748 1.9 15.976 15.976 0 0 0-1.64-6.267l-.015.01a16.201 16.201 0 0 0-3.406-4.574c-6.213-6.04-16.906-6.04-23.12 0a16.277 16.277 0 0 0-3.401 4.579l-.015-.01c-2.225 4.43-2.225 9.816 0 14.247l.015-.01a16.348 16.348 0 0 0 3.402 4.574c2.998 2.914 7.035 4.411 11.111 4.514v-4.77c-2.53-.094-5.026-.975-6.966-2.683"/>
+</svg>

package/src/assets/images/icon-dark.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="M22.373 8.351H10v3.138h12.373V8.35Zm0 12.261H10v3.137h12.373v-3.137Zm-4.066-6.13H10v3.137h8.307v-3.137ZM16.136 3.514c3.834 0 7.26 1.725 9.563 4.436l2.572-1.826A15.657 15.657 0 0 0 16.136.376c-4.888 0-9.261 2.24-12.135 5.748L6.574 7.95c2.303-2.71 5.729-4.436 9.562-4.436Z"/>
+    <path fill="#C8D4D9" d="M25.705 24.176c-2.303 2.71-5.729 4.436-9.563 4.436-3.833 0-7.26-1.726-9.562-4.436l.013-.007c-1.858-2.19-3-5.007-3-8.106 0-1.97.465-3.821 1.274-5.484L2.27 8.74a15.62 15.62 0 0 0-1.813 7.323 15.63 15.63 0 0 0 3.551 9.932 15.657 15.657 0 0 0 12.135 5.748c4.888 0 9.262-2.24 12.135-5.748l-2.572-1.82Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.13 0h28.235v32H.13z"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/styles/_global-variables.scss

@@ -156,6 +156,10 @@
   --ec-background-color-disabled: rgba(26,26,35, .1);
   --ec-background-color-hover: rgb(195, 212, 247);
   --ec-background-color-selected: rgb(225, 233, 249);
+  // Subtle translucent overlay for hover states on plain surfaces (theme-aware).
+  --ec-overlay-color-hover: rgba(26, 26, 35, .1);
+  // Table/grid heading surface.
+  --ec-background-color-heading: #EBEDEE;
 
   --ec-background-color-info: rgb(218, 229, 251);
   --ec-background-color-success: rgb(227, 251, 214);
@@ -165,7 +169,21 @@
   --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
   --ec-background-color-instructional: linear-gradient(78deg, var(--ec-color-gray-8) 0%, var(--ec-color-gray-5) 100%);
   --ec-background-color-control: var(--ec-background-color);
-  
+
+  // Tag backgrounds (per type). Light theme uses the lightest palette tint; the
+  // dark theme swaps these for dark tinted variants (see _theme-dark.scss) so the
+  // text remains legible.
+  --ec-tag-background-color: var(--ec-color-gray-1);
+  --ec-tag-background-color-info: var(--ec-color-cobalt-1);
+  --ec-tag-background-color-success: var(--ec-color-green-1);
+  --ec-tag-background-color-warning: var(--ec-color-yellow-1);
+  --ec-tag-background-color-danger: var(--ec-color-red-1);
+  --ec-tag-background-color-accent: var(--ec-color-purple-1);
+  --ec-tag-background-color-chargeback: var(--ec-color-orange-1);
+  --ec-tag-background-color-accrual: var(--ec-color-aqua-1);
+  --ec-tag-background-color-system: var(--ec-color-gray-1);
+  --ec-tag-background-color-interval: var(--ec-color-gray-1);
+
   // Shadows
   --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
   --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);

package/src/styles/_theme-dark.scss

@@ -0,0 +1,109 @@
+// Dark theme overrides.
+// These re-declare the SEMANTIC CSS custom properties (surfaces, text, borders,
+// status, interactive) with dark-appropriate values. They are scoped to the
+// `data-theme="dark"` attribute on the root element so light mode (the :root
+// baseline in _global-variables.scss) remains the default and is untouched.
+//
+// The brand palette tokens (--ec-color-gray-1..8, --ec-color-red-1..8, etc.) are
+// intentionally NOT overridden — only the semantic tokens that map to surfaces,
+// text, borders, and status. Most downstream tokens (form controls, shadows,
+// links, buttons) recompute automatically because they reference these via var().
+//
+// Values here are sensible defaults derived from the existing brand palette and
+// are meant to be tuned against real screens.
+
+@import 'colors';
+
+:root[data-theme='dark'] {
+  // Surfaces use blue-tinted near-blacks, with subtle light layers for depth.
+  --ec-background-color: rgb(19, 29, 44);
+  --ec-background-color-overlay: rgba(19, 29, 44, .82);
+  --ec-background-color-body: rgb(34, 41, 51);
+  --ec-background-color-body-overlay: rgba(34, 41, 51, .82);
+  --ec-background-color-control: var(--ec-background-color);
+  --ec-background-color-detail: rgba(255, 255, 255, .04);
+  --ec-background-color-disabled: rgba(255, 255, 255, .1);
+  --ec-background-color-hover: rgba(255, 255, 255, .08);
+  --ec-background-color-selected: rgba(255, 255, 255, .12);
+  --ec-overlay-color-hover: rgba(255, 255, 255, .1);
+  --ec-background-color-heading: rgb(27, 33, 40);
+
+  // Text — the "dark" semantic name now carries a LIGHT value (text on dark bg)
+  --ec-color-primary-dark: var(--ec-color-white);
+  --ec-color-secondary-dark: rgba(255, 255, 255, .66);
+  --ec-color-hint-dark: rgba(255, 255, 255, .38);
+  --ec-color-disabled-dark: var(--ec-color-hint-dark);
+
+  // Default icon color (defined by the icons project as a dark navy for light mode).
+  // Flip it to a light value so icons remain legible on dark surfaces.
+  --ec-color-icon: rgba(255, 255, 255, .66);
+
+  // Borders
+  --ec-border-color: rgb(48, 56, 65);
+  --ec-border-color-dark: rgba(255, 255, 255, .6);
+  --ec-border-color-hint: var(--ec-color-gray-7);
+  --ec-border-color-control: var(--ec-color-gray-5);
+  --ec-border-color-control-hover: var(--ec-color-gray-3);
+
+  // Shadows (deeper on dark surfaces)
+  --ec-color-shadow: rgba(0, 0, 0, .55);
+  --ec-color-shadow-overlay: rgba(0, 0, 0, .7);
+  // Shadows barely register against near-black surfaces, so floating popups
+  // (dropdown/combobox/multiselect menus, tooltips) also get a 1px light edge to
+  // separate them from same-colored content beneath, like tables.
+  --ec-box-shadow-overlay: 0 0 0 1px var(--ec-color-gray-6), 0 .25rem 1rem var(--ec-color-shadow-overlay);
+
+  // Dialog backdrops recede into a blue-black wash behind the dialog surface.
+  --ec-background-color-dialog: rgba(3, 7, 11, .72);
+  --ec-background-color-dialog-stacked: rgba(3, 7, 11, .48);
+
+  // Status background tints (re-tinted for dark surfaces)
+  --ec-background-color-info: rgba(109, 164, 254, .15);
+  --ec-background-color-success: rgba(99, 184, 54, .15);
+  --ec-background-color-caution: rgba(255, 222, 50, .15);
+  --ec-background-color-danger: rgba(254, 88, 117, .15);
+  --ec-background-color-accent: rgba(165, 114, 220, .15);
+
+  // Tag backgrounds — dark tinted variants of each type's hue so the (now light)
+  // tag text stays legible. The bright type-colored borders/icons are kept.
+  --ec-tag-background-color: rgba(255, 255, 255, .12);
+  --ec-tag-background-color-info: rgba(66, 117, 216, .28);
+  --ec-tag-background-color-success: rgba(99, 184, 54, .28);
+  --ec-tag-background-color-warning: rgba(245, 207, 8, .22);
+  --ec-tag-background-color-danger: rgba(254, 88, 117, .26);
+  --ec-tag-background-color-accent: rgba(165, 114, 220, .28);
+  --ec-tag-background-color-chargeback: rgba(249, 106, 21, .26);
+  --ec-tag-background-color-accrual: rgba(55, 213, 175, .22);
+  --ec-tag-background-color-system: rgba(255, 255, 255, .12);
+  --ec-tag-background-color-interval: rgba(255, 255, 255, .12);
+
+  // Interactive / link — shift up the palette for contrast on dark surfaces
+  --ec-color-interactive: var(--ec-color-cobalt-2);
+  --ec-color-link: var(--ec-color-interactive);
+  --ec-color-info: var(--ec-color-cobalt-2);
+
+  // Form controls — most inherit the above; override the few that don't
+  --ec-form-control-border-color: var(--ec-color-gray-5);
+  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
+  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
+
+  // Buttons — primary needs a distinct background since the default (gray-8)
+  // matches the dark surface color.
+  --ec-button-background-color-primary: var(--ec-color-cobalt-5);
+  // Secondary's default border (gray-8) disappears into the dark surface; lift it
+  // a step above form control borders so the button outline reads clearly.
+  --ec-button-border-color-secondary: var(--ec-color-gray-4);
+
+  // Spinner dots
+  --ec-spinner-color: var(--ec-color-cobalt-3);
+}
+
+// Popover content uses status backgrounds as solid fills (not translucent tints),
+// so restore opaque values for floating surfaces that need readable contrast.
+:root[data-theme='dark'] .popover-content {
+  --ec-background-color-caution: rgb(255, 249, 195);
+  --ec-background-color-danger: rgb(255, 225, 231);
+  --ec-background-color-info: rgb(218, 229, 251);
+  --ec-background-color-success: rgb(227, 251, 214);
+  --ec-background-color-accent: rgb(237, 220, 255);
+}

package/src/styles/index.scss

@@ -5,6 +5,7 @@
 * EnergyCAP Components - Base Styles
 */
 @import 'global-variables';
+@import 'theme-dark';
 @import 'core';
 @import 'base';
 @import 'bootstrap/grid';

package/src/styles/mixins/_button-base.scss

@@ -10,6 +10,7 @@ $button-padding-x: 0.5rem;
   padding: $button-padding-y $button-padding-x;
   border: 0;
   border-radius: var(--ec-border-radius);
+  color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/styles/mixins/_form-control-base.scss

@@ -176,6 +176,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   border-radius: var(--ec-border-radius);
   background-image: none;
   background-clip: padding-box;
+  color: inherit;
   width: 100%;
   line-height: $form-control-line-height;
   padding: $form-control-padding-y $form-control-padding-x;

package/src/styles/mixins/_table-base.scss

@@ -2,7 +2,7 @@
 
 $table-row-bg-selected: var(--ec-background-color-selected);
 $table-row-bg-hover: var(--ec-background-color-hover);
-$table-row-bg-heading: #EBEDEE;
+$table-row-bg-heading: var(--ec-background-color-heading);
 $table-cell-padding-x: .5rem;
 $table-cell-padding-y: .5rem;
 

package/src/styles/mixins/_tags-base.scss

@@ -2,15 +2,15 @@
 @import '../mixins/text';
 
 $tag-colors: (
-  info: (bg: var(--ec-color-cobalt-1), border: var(--ec-color-info)),
-  success: (bg: var(--ec-color-green-1), border: var(--ec-color-success)),
-  warning: (bg: var(--ec-color-yellow-1), border: var(--ec-color-caution)),
-  danger: (bg: var(--ec-color-red-1), border: var(--ec-color-danger)),
-  accent: (bg: var(--ec-color-purple-1), border: var(--ec-color-accent)),
-  chargeback: (bg: var(--ec-color-orange-1), border: var(--ec-color-orange-7)),
-  accrual: (bg: var(--ec-color-aqua-1), border: var(--ec-color-aqua-5)),
-  system: (bg: var(--ec-color-gray-1), border: var(--ec-color-gray-4)),
-  interval:(bg: var(--ec-color-gray-1), border: var(--ec-color-brand-black)),
+  info: (bg: var(--ec-tag-background-color-info), border: var(--ec-color-info)),
+  success: (bg: var(--ec-tag-background-color-success), border: var(--ec-color-success)),
+  warning: (bg: var(--ec-tag-background-color-warning), border: var(--ec-color-caution)),
+  danger: (bg: var(--ec-tag-background-color-danger), border: var(--ec-color-danger)),
+  accent: (bg: var(--ec-tag-background-color-accent), border: var(--ec-color-accent)),
+  chargeback: (bg: var(--ec-tag-background-color-chargeback), border: var(--ec-color-orange-7)),
+  accrual: (bg: var(--ec-tag-background-color-accrual), border: var(--ec-color-aqua-5)),
+  system: (bg: var(--ec-tag-background-color-system), border: var(--ec-color-gray-4)),
+  interval:(bg: var(--ec-tag-background-color-interval), border: var(--ec-color-brand-black)),
 );
 
 @mixin tag-type($type) {
@@ -41,7 +41,7 @@ $tag-colors: (
   @include text-caption-1;
   @include truncate;
 
-  background-color: var(--ec-color-gray-1);
+  background-color: var(--ec-tag-background-color);
   border: 2px solid var(--ec-color-gray-4);
   display: inline-flex;
   align-items: center;
@@ -98,7 +98,7 @@ $tag-colors: (
       right: .125rem;
       top: .0625rem;
       bottom: .0625rem;
-      background-color: rgba(26, 26, 35, .1);
+      background-color: var(--ec-overlay-color-hover);
       border-radius: .125rem;
     }
     outline: none;

package/types/energycap-components.d.ts

@@ -1,21 +1,21 @@
 import * as i0 from "@angular/core";
 import { AfterContentInit, AfterViewChecked, AfterViewInit, ApplicationRef, ComponentRef, ElementRef, EventEmitter, Injector, ModuleWithProviders, OnChanges, OnDestroy, OnInit, PipeTransform, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef, Type, ViewContainerRef } from "@angular/core";
-import * as i74 from "@angular/router";
+import * as i75 from "@angular/router";
 import { ActivatedRoute, ActivatedRouteSnapshot, ParamMap, Params, QueryParamsHandling, Router, UrlSegment } from "@angular/router";
 import { Observable, Subject } from "rxjs";
-import * as i73 from "@angular/forms";
+import * as i74 from "@angular/forms";
 import { AbstractControl, AsyncValidatorFn, FormControl, FormControlDirective, FormGroup, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn } from "@angular/forms";
-import * as i75 from "@ngx-translate/core";
+import * as i76 from "@ngx-translate/core";
 import { TranslateService } from "@ngx-translate/core";
 import { DateTime } from "luxon";
-import * as i77 from "@angular/cdk/overlay";
+import * as i78 from "@angular/cdk/overlay";
 import { CdkConnectedOverlay, Overlay as Overlay$1, OverlayRef } from "@angular/cdk/overlay";
 import Popper from "popper.js";
 import { ClipboardService } from "ngx-clipboard";
-import * as i76 from "@angular/cdk/a11y";
+import * as i77 from "@angular/cdk/a11y";
 import { InteractivityChecker } from "@angular/cdk/a11y";
-import * as i72 from "@angular/common";
-import * as i78 from "@angular/cdk/scrolling";
+import * as i73 from "@angular/common";
+import * as i79 from "@angular/cdk/scrolling";
 import { HttpErrorResponse } from "@angular/common/http";
 declare namespace button_component_d_exports {
   export { ButtonComponent, ButtonType };
@@ -58,6 +58,11 @@ export declare class ButtonComponent implements OnInit, OnChanges, AfterViewInit
    * Note: If both label and ariaLabel are provided, ariaLabel will be ignored as the visible label text provides the accessible name.
    */
   ariaLabel?: string;
+  /**
+   * Indicates the current pressed state of a toggle button.
+   * When provided, sets the aria-pressed attribute on the native button element.
+   */
+  ariaPressed?: boolean;
   /**
    * Indicates whether the element controlled by this button is expanded or collapsed.
    * When provided, sets the aria-expanded attribute on the native button element.
@@ -171,6 +176,10 @@ export declare class ButtonComponent implements OnInit, OnChanges, AfterViewInit
       "alias": "ariaLabel";
       "required": false;
     };
+    "ariaPressed": {
+      "alias": "ariaPressed";
+      "required": false;
+    };
     "ariaExpanded": {
       "alias": "ariaExpanded";
       "required": false;
@@ -4862,6 +4871,7 @@ export declare class AppBarComponent implements OnChanges {
   userMenuMinWidth: number;
   userMenuTabindex: number;
   iconPath: string;
+  darkIconPath?: string;
   iconLink: string | null;
   hideAppIcon: boolean;
   menuItems: MenuItem[];
@@ -4894,6 +4904,10 @@ export declare class AppBarComponent implements OnChanges {
       "alias": "iconPath";
       "required": false;
     };
+    "darkIconPath": {
+      "alias": "darkIconPath";
+      "required": false;
+    };
     "iconLink": {
       "alias": "iconLink";
       "required": false;
@@ -8567,6 +8581,65 @@ export declare class MultiselectComponent extends FormControlBase implements OnI
     "selectionChanged": "selectionChanged";
   }, never, never, false, never>;
 }
+export type Theme = 'light' | 'dark';
+/** localStorage key the selected theme is persisted under. */
+export declare const THEME_STORAGE_KEY = "ec-theme";
+/**
+ * Manages the application's color theme (light/dark).
+ *
+ * Light mode is the default and corresponds to the baseline `:root` CSS custom
+ * properties. Dark mode is activated by setting `data-theme="dark"` on the
+ * document root element, which engages the overrides in `_theme-dark.scss`.
+ *
+ * The selected theme is persisted to localStorage (via {@link CacheService}) so it
+ * survives between sessions.
+ */
+export declare class ThemeService {
+  private cacheService;
+  private readonly themeSubject;
+  /** Emits the active theme, starting with the current value. */
+  readonly theme$: Observable<Theme>;
+  constructor(cacheService: CacheService);
+  /** The currently active theme. */
+  get currentTheme(): Theme;
+  /**
+   * Reads the persisted theme (defaulting to light) and applies it. Call this
+   * once at application startup, as early as possible, to avoid a flash of the
+   * default theme before the saved one is applied.
+   */
+  init(): void;
+  /** Toggles between light and dark, persisting the new value. */
+  toggle(): void;
+  /**
+   * Applies a theme to the document and notifies subscribers.
+   * @param theme The theme to activate.
+   * @param persist When true (default) the choice is saved to localStorage.
+   */
+  setTheme(theme: Theme, persist?: boolean): void;
+  private applyTheme;
+  private getStoredTheme;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+declare namespace theme_toggle_component_d_exports {
+  export { ThemeToggleComponent };
+}
+interface ThemeToggleViewModel {
+  icon: string;
+  ariaLabel: string;
+  ariaPressed: boolean;
+}
+/**
+ * Icon button that toggles the application between light and dark mode.
+ * Drop it anywhere (typically the app bar actions) and it drives {@link ThemeService}.
+ */
+export declare class ThemeToggleComponent {
+  themeService: ThemeService;
+  readonly viewModel$: Observable<ThemeToggleViewModel>;
+  constructor(themeService: ThemeService);
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ThemeToggleComponent, "ec-theme-toggle", never, {}, {}, never, never, false, never>;
+}
 export type ComponentsModuleConfig = {
   tracker: Provider;
 };
@@ -8578,7 +8651,7 @@ export declare class ComponentsModule {
    */
   static forRoot(config: ComponentsModuleConfig): ModuleWithProviders<ComponentsModule>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ComponentsModule, never>;
-  static ɵmod: i0.ɵɵNgModuleDeclaration<ComponentsModule, [typeof ButtonComponent, typeof TabsComponent, typeof TextboxComponent, typeof NavItemActiveDirective, typeof SpinnerComponent, typeof ViewOverlayComponent, typeof BannerComponent, typeof ResizableTableDirective, typeof TabsComponent, typeof TableComponent, typeof SearchableTableComponent, typeof ComboboxComponent, typeof MenuComponent, typeof PopupContainerDirective, typeof DropdownComponent, typeof ConfirmComponent, typeof DialogComponent, typeof DateDisplayPipe, typeof TimeDisplayPipe, typeof MockDateDisplayPipe, typeof RadioButtonComponent, typeof CheckboxComponent, typeof NumericboxComponent, typeof AvatarComponent, typeof AppBarComponent, typeof SplashComponent, typeof IfViewportWidthDirective, typeof ClickAreaForDirective, typeof CollapsibleToggleComponent, typeof TableMasterRowComponent, typeof TableMasterHeaderRowComponent, typeof TableDetailRowComponent, typeof TableLockedColumnComponent, typeof TableSelectableRowComponent, typeof PopoverComponent, typeof TablePaginationComponent, typeof RowCountPipe, typeof CopyButtonDirective, typeof TablePaginationComponent, typeof TagsComponent, typeof FormControlComponent, typeof SelectComponent, typeof ItemDisplayComponent, typeof TableSelectableRowComponent, typeof ResizableColumnComponent, typeof DialogGroupComponent, typeof FileUploadComponent, typeof FormGroupComponent, typeof JsonDisplayComponent, typeof ToastComponent, typeof ToasterComponent, typeof PageViewComponent, typeof PageTitleComponent, typeof WizardProgressComponent, typeof WizardButtonsComponent, typeof HierarchyTreeComponent, typeof TreeComponent, typeof RelativeDatePipe, typeof ResizableComponent, typeof HighlightTextPipe, typeof FormControlLabelComponent, typeof ItemPickerComponent, typeof HelpPopoverComponent, typeof LinkButtonComponent, typeof TooltipComponent, typeof CopyTableButtonDirective, typeof TooltipDirective, typeof CalendarComponent, typeof CalendarItemComponent, typeof DateInputComponent, typeof KeyboardNavContainerDirective, typeof DateDisplayPipe2, typeof DateDisplayPipe3, typeof MultiselectComponent], [typeof i72.CommonModule, typeof i73.FormsModule, typeof i73.ReactiveFormsModule, typeof i74.RouterModule, typeof i75.TranslateModule, typeof i76.A11yModule, typeof i77.OverlayModule, typeof i78.ScrollingModule], [typeof ButtonComponent, typeof TabsComponent, typeof TextboxComponent, typeof NavItemActiveDirective, typeof SpinnerComponent, typeof ViewOverlayComponent, typeof BannerComponent, typeof TabsComponent, typeof TableComponent, typeof SearchableTableComponent, typeof ComboboxComponent, typeof MenuComponent, typeof MultiselectComponent, typeof PopupContainerDirective, typeof DropdownComponent, typeof ConfirmComponent, typeof DialogComponent, typeof DateDisplayPipe, typeof TimeDisplayPipe, typeof RadioButtonComponent, typeof CheckboxComponent, typeof NumericboxComponent, typeof AvatarComponent, typeof AppBarComponent, typeof SplashComponent, typeof IfViewportWidthDirective, typeof ClickAreaForDirective, typeof CollapsibleToggleComponent, typeof TableMasterRowComponent, typeof TableMasterHeaderRowComponent, typeof TableLockedColumnComponent, typeof TableSelectableRowComponent, typeof PopoverComponent, typeof CopyButtonDirective, typeof TablePaginationComponent, typeof TagsComponent, typeof FormControlComponent, typeof SelectComponent, typeof ItemDisplayComponent, typeof ResizableColumnComponent, typeof DialogGroupComponent, typeof FileUploadComponent, typeof FormGroupComponent, typeof JsonDisplayComponent, typeof ToastComponent, typeof ToasterComponent, typeof PageViewComponent, typeof PageTitleComponent, typeof WizardProgressComponent, typeof WizardButtonsComponent, typeof HierarchyTreeComponent, typeof TreeComponent, typeof RelativeDatePipe, typeof ResizableComponent, typeof HighlightTextPipe, typeof FormControlLabelComponent, typeof ItemPickerComponent, typeof HelpPopoverComponent, typeof LinkButtonComponent, typeof TooltipComponent, typeof CopyTableButtonDirective, typeof TooltipDirective, typeof CalendarComponent, typeof DateInputComponent, typeof KeyboardNavContainerDirective, typeof DateDisplayPipe2, typeof DateDisplayPipe3]>;
+  static ɵmod: i0.ɵɵNgModuleDeclaration<ComponentsModule, [typeof ButtonComponent, typeof TabsComponent, typeof TextboxComponent, typeof NavItemActiveDirective, typeof SpinnerComponent, typeof ViewOverlayComponent, typeof BannerComponent, typeof ResizableTableDirective, typeof TabsComponent, typeof TableComponent, typeof SearchableTableComponent, typeof ComboboxComponent, typeof MenuComponent, typeof PopupContainerDirective, typeof DropdownComponent, typeof ConfirmComponent, typeof DialogComponent, typeof DateDisplayPipe, typeof TimeDisplayPipe, typeof MockDateDisplayPipe, typeof RadioButtonComponent, typeof CheckboxComponent, typeof NumericboxComponent, typeof AvatarComponent, typeof AppBarComponent, typeof SplashComponent, typeof IfViewportWidthDirective, typeof ClickAreaForDirective, typeof CollapsibleToggleComponent, typeof TableMasterRowComponent, typeof TableMasterHeaderRowComponent, typeof TableDetailRowComponent, typeof TableLockedColumnComponent, typeof TableSelectableRowComponent, typeof PopoverComponent, typeof TablePaginationComponent, typeof RowCountPipe, typeof CopyButtonDirective, typeof TablePaginationComponent, typeof TagsComponent, typeof FormControlComponent, typeof SelectComponent, typeof ItemDisplayComponent, typeof TableSelectableRowComponent, typeof ResizableColumnComponent, typeof DialogGroupComponent, typeof FileUploadComponent, typeof FormGroupComponent, typeof JsonDisplayComponent, typeof ToastComponent, typeof ToasterComponent, typeof PageViewComponent, typeof PageTitleComponent, typeof WizardProgressComponent, typeof WizardButtonsComponent, typeof HierarchyTreeComponent, typeof TreeComponent, typeof RelativeDatePipe, typeof ResizableComponent, typeof HighlightTextPipe, typeof FormControlLabelComponent, typeof ItemPickerComponent, typeof HelpPopoverComponent, typeof LinkButtonComponent, typeof TooltipComponent, typeof CopyTableButtonDirective, typeof TooltipDirective, typeof CalendarComponent, typeof CalendarItemComponent, typeof DateInputComponent, typeof KeyboardNavContainerDirective, typeof DateDisplayPipe2, typeof DateDisplayPipe3, typeof MultiselectComponent, typeof ThemeToggleComponent], [typeof i73.CommonModule, typeof i74.FormsModule, typeof i74.ReactiveFormsModule, typeof i75.RouterModule, typeof i76.TranslateModule, typeof i77.A11yModule, typeof i78.OverlayModule, typeof i79.ScrollingModule], [typeof ButtonComponent, typeof TabsComponent, typeof TextboxComponent, typeof NavItemActiveDirective, typeof SpinnerComponent, typeof ViewOverlayComponent, typeof BannerComponent, typeof TabsComponent, typeof TableComponent, typeof SearchableTableComponent, typeof ComboboxComponent, typeof MenuComponent, typeof MultiselectComponent, typeof PopupContainerDirective, typeof DropdownComponent, typeof ConfirmComponent, typeof DialogComponent, typeof DateDisplayPipe, typeof TimeDisplayPipe, typeof RadioButtonComponent, typeof CheckboxComponent, typeof NumericboxComponent, typeof AvatarComponent, typeof AppBarComponent, typeof SplashComponent, typeof IfViewportWidthDirective, typeof ClickAreaForDirective, typeof CollapsibleToggleComponent, typeof TableMasterRowComponent, typeof TableMasterHeaderRowComponent, typeof TableLockedColumnComponent, typeof TableSelectableRowComponent, typeof PopoverComponent, typeof CopyButtonDirective, typeof TablePaginationComponent, typeof TagsComponent, typeof FormControlComponent, typeof SelectComponent, typeof ItemDisplayComponent, typeof ResizableColumnComponent, typeof DialogGroupComponent, typeof FileUploadComponent, typeof FormGroupComponent, typeof JsonDisplayComponent, typeof ToastComponent, typeof ToasterComponent, typeof PageViewComponent, typeof PageTitleComponent, typeof WizardProgressComponent, typeof WizardButtonsComponent, typeof HierarchyTreeComponent, typeof TreeComponent, typeof RelativeDatePipe, typeof ResizableComponent, typeof HighlightTextPipe, typeof FormControlLabelComponent, typeof ItemPickerComponent, typeof HelpPopoverComponent, typeof LinkButtonComponent, typeof TooltipComponent, typeof CopyTableButtonDirective, typeof TooltipDirective, typeof CalendarComponent, typeof DateInputComponent, typeof KeyboardNavContainerDirective, typeof DateDisplayPipe2, typeof ThemeToggleComponent, typeof DateDisplayPipe3]>;
   static ɵinj: i0.ɵɵInjectorDeclaration<ComponentsModule>;
 }
 /**