@energycap/components 0.46.20 → 0.46.21-AppDarkMode.20260925-1539

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.46.20",
+  "version": "0.46.21-AppDarkMode.20260925-1539",
   "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,103 @@
+// 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 (light backgrounds -> dark surfaces)
+  --ec-background-color: #{$gray-8};
+  --ec-background-color-overlay: rgba(22, 47, 59, .7);
+  --ec-background-color-body: rgb(36, 36, 46);
+  --ec-background-color-body-overlay: rgba(36, 36, 46, .7);
+  --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: rgba(255, 255, 255, .05);
+
+  // 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: #3a3a44;
+  --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, .4);
+  --ec-color-shadow-overlay: rgba(0, 0, 0, .5);
+
+  // Dialog overlay — invert to a light wash so the dialog stands out against
+  // the already-dark background.
+  --ec-background-color-dialog: rgba(255, 255, 255, .15);
+  --ec-background-color-dialog-stacked: rgba(255, 255, 255, .08);
+
+  // 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);
+
+  // 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 { OnInit, OnChanges, AfterViewInit, OnDestroy, TemplateRef, EventEmitter, ElementRef, SimpleChanges, PipeTransform, ViewContainerRef, Renderer2, QueryList, ApplicationRef, AfterContentInit, Type, ComponentRef, ComponentFactoryResolver, AfterViewChecked, Injector, Provider, ModuleWithProviders } from '@angular/core';
-import * as i74 from '@angular/router';
+import * as i75 from '@angular/router';
 import { Params, Router, ActivatedRoute, ActivatedRouteSnapshot, ParamMap, UrlSegment, QueryParamsHandling } from '@angular/router';
 import { Subject, Observable } from 'rxjs';
-import * as i73 from '@angular/forms';
+import * as i74 from '@angular/forms';
 import { UntypedFormGroup, AbstractControl, ValidatorFn, ValidationErrors, UntypedFormArray, UntypedFormControl, FormControlDirective, AsyncValidatorFn, FormGroup, FormControl } 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 _angular_cdk_overlay from '@angular/cdk/overlay';
 import { OverlayRef, Overlay as Overlay$1, CdkConnectedOverlay } 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';
 
 /**
@@ -56,6 +56,11 @@ declare class ButtonComponent implements OnInit, OnChanges, AfterViewInit, OnDes
      * 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.
@@ -140,7 +145,7 @@ declare class ButtonComponent implements OnInit, OnChanges, AfterViewInit, OnDes
     private scheduleMissingAccessibleNameCheck;
     private logMissingAccessibleNameErrorIfNeeded;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ec-button", never, { "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "lockButton": { "alias": "lockButton"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; }; "ariaActivedescendant": { "alias": "ariaActivedescendant"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingIcon": { "alias": "pendingIcon"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "isSubmit": { "alias": "isSubmit"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ec-button", never, { "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "lockButton": { "alias": "lockButton"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; }; "ariaActivedescendant": { "alias": "ariaActivedescendant"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingIcon": { "alias": "pendingIcon"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "isSubmit": { "alias": "isSubmit"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], false, never>;
 }
 
 interface LinkItem {
@@ -2238,6 +2243,13 @@ declare class PopupContainerDirective implements OnInit, OnDestroy, OnInit {
      * @memberof PopupContainerDirective
      */
     private globalCloseSubscription?;
+    /**
+     * Element that had focus immediately before `show()` opened the popup, so it
+     * can be restored on `hide()` if a consumer moved focus into the popup (WCAG 2.4.3).
+     *
+     * @memberof PopupContainerDirective
+     */
+    private previouslyFocusedElement?;
     /**
      * Creates an instance of PopupContainerDirective.
      * @param templateRef Reference to the popup template
@@ -2272,6 +2284,12 @@ declare class PopupContainerDirective implements OnInit, OnDestroy, OnInit {
      * @memberof PopupContainerDirective
      */
     hide(): void;
+    /**
+     * Whether the current `document.activeElement` is contained within the popup's DOM.
+     *
+     * @memberof PopupContainerDirective
+     */
+    private isFocusInsidePopup;
     /**
      * Updates the popup container position
      */
@@ -3773,6 +3791,7 @@ declare class AppBarComponent implements OnChanges {
     userMenuMinWidth: number;
     userMenuTabindex: number;
     iconPath: string;
+    darkIconPath?: string;
     iconLink: string | null;
     hideAppIcon: boolean;
     menuItems: MenuItem[];
@@ -3780,7 +3799,7 @@ declare class AppBarComponent implements OnChanges {
     constructor(avatarService: AvatarService);
     ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppBarComponent, "ec-app-bar", never, { "user": { "alias": "user"; "required": false; }; "userMenuItems": { "alias": "userMenuItems"; "required": false; }; "userMenuWidth": { "alias": "userMenuWidth"; "required": false; }; "userMenuMinWidth": { "alias": "userMenuMinWidth"; "required": false; }; "userMenuTabindex": { "alias": "userMenuTabindex"; "required": false; }; "iconPath": { "alias": "iconPath"; "required": false; }; "iconLink": { "alias": "iconLink"; "required": false; }; "hideAppIcon": { "alias": "hideAppIcon"; "required": false; }; }, {}, never, [".app-bar-logo", ".app-bar-title", ".app-bar-actions"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppBarComponent, "ec-app-bar", never, { "user": { "alias": "user"; "required": false; }; "userMenuItems": { "alias": "userMenuItems"; "required": false; }; "userMenuWidth": { "alias": "userMenuWidth"; "required": false; }; "userMenuMinWidth": { "alias": "userMenuMinWidth"; "required": false; }; "userMenuTabindex": { "alias": "userMenuTabindex"; "required": false; }; "iconPath": { "alias": "iconPath"; "required": false; }; "darkIconPath": { "alias": "darkIconPath"; "required": false; }; "iconLink": { "alias": "iconLink"; "required": false; }; "hideAppIcon": { "alias": "hideAppIcon"; "required": false; }; }, {}, never, [".app-bar-logo", ".app-bar-title", ".app-bar-actions"], false, never>;
 }
 
 type AppSplashOptions = {
@@ -6039,6 +6058,8 @@ declare class DateInputComponent extends FormControlBase implements OnInit, OnCh
      * to use the user's preferred date format.
      */
     private parseFormats;
+    private primaryTextboxBlurred;
+    private secondaryTextboxBlurred;
     calendar?: KeyboardNavContainerDirective;
     controls?: KeyboardNavContainerDirective;
     /** Reference to the overlay directive (see template). Used to update the overlay position on validation changes. */
@@ -6513,6 +6534,64 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
     static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "ec-multiselect", never, { "options": { "alias": "options"; "required": false; }; "menuPosition": { "alias": "menuPosition"; "required": false; }; "popupFixed": { "alias": "popupFixed"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tagType": { "alias": "tagType"; "required": false; }; "hideNoMatches": { "alias": "hideNoMatches"; "required": false; }; "noMatchesText": { "alias": "noMatchesText"; "required": false; }; "truncateItems": { "alias": "truncateItems"; "required": false; }; "allowCustom": { "alias": "allowCustom"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "customMenuTemplate": { "alias": "customMenuTemplate"; "required": false; }; }, { "search": "search"; "selectionChanged": "selectionChanged"; }, never, never, false, never>;
 }
 
+type Theme = 'light' | 'dark';
+/** localStorage key the selected theme is persisted under. */
+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.
+ */
+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<ThemeService>;
+}
+
+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}.
+ */
+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>;
+}
+
 type ComponentsModuleConfig = {
     tracker: Provider;
 };
@@ -6524,7 +6603,7 @@ 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 _angular_cdk_overlay.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 _angular_cdk_overlay.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>;
 }
 
@@ -6955,5 +7034,5 @@ declare class MockTranslationHelperService {
     setLanguage(): void;
 }
 
-export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, Calendar, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateDisplayPipe3, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, MultiselectComponent, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, handleKeyNavigate, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
-export type { ApiError, AppSplashEvent, AppSplashOptions, AvatarUser, BannerCacheEntry, BannerStyle, BannerType, ButtonType, CheckboxState, ClickableElement, ComboboxMenuPosition, ComponentsModuleConfig, ControlLabelPosition, CustomActionResult, DateDisplay, DateDisplayPipeOptions, DateLike, DatePreferenceContainer, DialogAnimationEvent, DialogContent, DialogOptions, DialogSize, DisplayStatus, DisplayValue, FileOutput, FileType, FileUploadFormGroup, FileValidatorCallback, Help, HelpControl, HelpPopoverConfig, InvalidFileError, KeyNavigateHandlers, LinkItem, LinkTarget, MenuHostElementClasses, MenuItem, MenuRolePattern, MenuTemplateType, MultiselectMenuPosition, NavItem, PagingInfo, PickerItem, PopoverContentPosition, PopupPlacement, PopupStatus, RadioButtonDirection, RadioButtonType, RelativeDateOptions, ResizeCacheEntry, RowCountInfo, SearchableTableRefreshOptions, Tab, TableSearchResults, TableSort, TableSortDirection, TagType, TextboxType, TextboxValidatorParameters, ToastAction, ToastItem, ToastSource, ToggledHierarchyItem, TooltipOptions, TooltipPosition, TreeType, ViewStatus, WizardTab };
+export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, Calendar, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateDisplayPipe3, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, MultiselectComponent, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, THEME_STORAGE_KEY, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, ThemeService, ThemeToggleComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, handleKeyNavigate, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
+export type { ApiError, AppSplashEvent, AppSplashOptions, AvatarUser, BannerCacheEntry, BannerStyle, BannerType, ButtonType, CheckboxState, ClickableElement, ComboboxMenuPosition, ComponentsModuleConfig, ControlLabelPosition, CustomActionResult, DateDisplay, DateDisplayPipeOptions, DateLike, DatePreferenceContainer, DialogAnimationEvent, DialogContent, DialogOptions, DialogSize, DisplayStatus, DisplayValue, FileOutput, FileType, FileUploadFormGroup, FileValidatorCallback, Help, HelpControl, HelpPopoverConfig, InvalidFileError, KeyNavigateHandlers, LinkItem, LinkTarget, MenuHostElementClasses, MenuItem, MenuRolePattern, MenuTemplateType, MultiselectMenuPosition, NavItem, PagingInfo, PickerItem, PopoverContentPosition, PopupPlacement, PopupStatus, RadioButtonDirection, RadioButtonType, RelativeDateOptions, ResizeCacheEntry, RowCountInfo, SearchableTableRefreshOptions, Tab, TableSearchResults, TableSort, TableSortDirection, TagType, TextboxType, TextboxValidatorParameters, Theme, ToastAction, ToastItem, ToastSource, ToggledHierarchyItem, TooltipOptions, TooltipPosition, TreeType, ViewStatus, WizardTab };