@energycap/components 0.46.14 → 0.46.16

package/fesm2022/energycap-components.mjs

@@ -16,8 +16,8 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ClipboardService } from 'ngx-clipboard';
 import { Subject, of, lastValueFrom, forkJoin, merge, fromEvent, EMPTY, timer, interval, race, ReplaySubject } from 'rxjs';
 import { takeUntil, switchMap, delay, distinctUntilChanged, filter, take, debounceTime, skipUntil, tap, pluck, map, catchError, skipWhile } from 'rxjs/operators';
-import moment from 'moment';
-import { range, cloneDeep, isEqual, uniqueId, sortBy, orderBy, get, upperFirst } from 'lodash';
+import { DateTime, Info } from 'luxon';
+import { range, cloneDeep, isEqual, uniqueId, sortBy, orderBy, get, upperFirst } from 'lodash-es';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import Popper from 'popper.js';
 
@@ -368,11 +368,11 @@ class BannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n     class=\"banner {{type}} {{bannerStyle}}\"\n     [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n               type=\"icon\"\n               icon=\"icon-cancel\"\n               ariaLabel=\"Banner_CloseButtonLabel\"\n               (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n     class=\"banner {{type}} {{bannerStyle}}\"\n     [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n               type=\"icon\"\n               icon=\"icon-cancel\"\n               ariaLabel=\"Banner_CloseButtonLabel\"\n               (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-banner', standalone: false, template: "<div id=\"banner_{{id}}\" \n     class=\"banner {{type}} {{bannerStyle}}\"\n     [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n               type=\"icon\"\n               icon=\"icon-cancel\"\n               ariaLabel=\"Banner_CloseButtonLabel\"\n               (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-banner', standalone: false, template: "<div id=\"banner_{{id}}\" \n     class=\"banner {{type}} {{bannerStyle}}\"\n     [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n               type=\"icon\"\n               icon=\"icon-cancel\"\n               ariaLabel=\"Banner_CloseButtonLabel\"\n               (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: CacheService }], propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -539,7 +539,7 @@ class DateTimeHelper {
     /** 3000-01-01 */
     static { this.endOfTime = new Date(3000, 0, 1); }
     /** 3000-01-01 UTC */
-    static { this.endOfTimeUTC = moment.utc('3000-01-01').toDate(); }
+    static { this.endOfTimeUTC = DateTime.fromISO('3000-01-01', { zone: 'utc' }).toJSDate(); }
     /** Default effective date for new AccountMeter relationships: 2010-01-01 */
     static { this.defaultAccountMeterEffectiveDate = new Date(2010, 0, 1); }
     /** The default date that a newly created account becomes effective: 2010-01-01 */
@@ -581,20 +581,22 @@ class DateTimeHelper {
         "yyyyMMdd"
     ]; }
     /**
-     * User input formats that we will parse into a date
-     * when the users date format preference has month before day.
-     * To be used with moment.js. Moment ignores non-alphanumeric characters
-     * so dates like 2020/09/10 will be parsed the same as 2020-09-10
-     */
-    static { this.momentMonthFirstParseFormats = [
-        'M-D',
-        'MM-DD',
-        'M-D-YY',
-        'MM-DD-YY',
-        'MMDDYYYY',
-        'YYYYMMDD',
-        'YYYY-MM-DD',
-        'MM-DD-YYYY'
+     * Luxon parse formats for the month-first preference. Separator characters
+     * in the input are normalized to a hyphen before matching (see {@link parseWithFormats}),
+     * so the formats below intentionally use a single separator.
+     */
+    static { this.luxonMonthFirstParseFormats = [
+        'M-d',
+        'MM-dd',
+        'M-d-yy',
+        'MM-dd-yy',
+        'MMddyyyy',
+        'yyyyMMdd',
+        'yyyy-MM-dd',
+        'MM-dd-yyyy',
+        // A lone number is treated as a month; the day defaults to the 1st and the year to the current year
+        // (e.g. "11" -> Nov 1 of this year). Listed last so it never shadows the more specific formats above.
+        'M'
     ]; }
     /**
      * User input formats that we will parse into a date
@@ -618,44 +620,58 @@ class DateTimeHelper {
         "yyyyDDmm"
     ]; }
     /**
-     * User input formats that we will parse into a date
-     * when the users date format preference has day before month.
-     * To be used with moment.js. Moment ignores non-alphanumeric characters
-     * so dates like 2020/09/10 will be parsed the same as 2020-09-10
-     */
-    static { this.momentDateFirstParseFormats = [
-        'D-M',
-        'DD-MM',
-        'D-M-YY',
-        'DD-MM-YY',
-        'DDMMYYYY',
-        'YYYYMMDD',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY'
+     * Luxon parse formats for the day-first preference. Separator characters
+     * in the input are normalized to a hyphen before matching (see {@link parseWithFormats}).
+     */
+    static { this.luxonDateFirstParseFormats = [
+        'd-M',
+        'dd-MM',
+        'd-M-yy',
+        'dd-MM-yy',
+        'ddMMyyyy',
+        'yyyyMMdd',
+        'yyyy-MM-dd',
+        'dd-MM-yyyy',
+        // A lone number is treated as a month; the day defaults to the 1st and the year to the current year
+        // (e.g. "11" -> Nov 1 of this year). Listed last so it never shadows the more specific formats above.
+        'M'
     ]; }
     /**
-     * Formats used to parse dates that are in the medium or long format by moment js.
-     * These are shared by date-first and month-first date formats. The date can't be
-     * parsed differently based on the date preference since the month is not numeric.
-     * This is not an exhaustive list of formats, but it should cover most common formats.
-     */
-    static { this.momentMedAndLongDateFormats = [
-        'DD MMM',
-        'MMM DD',
-        'DD MMM YY',
-        'DD MMM YYYY',
-        'DD MMMM YYYY',
-        'MMM D, YY',
-        'MMM D, YYYY',
-        'MMM DD, YYYY',
-        'MMMM D, YYYY',
-        'MMMM DD, YYYY',
-        'MMM YY',
-        'MMM YYYY',
-        'MMMM YYYY',
-        'MMM, YY',
-        'MMM, YYYY',
-        'MMMM, YYYY',
+     * Luxon parse formats for medium/long date strings (e.g. "Jan 5, 2024").
+     * Shared by date-first and month-first preferences because the month is
+     * not numeric, so the order is unambiguous.
+     */
+    static { this.luxonMedAndLongDateFormats = [
+        // Moment was forgiving with leading zeros (`DD` matched both `9` and `09`);
+        // Luxon's `dd` is strict, so single-digit `d` variants are listed explicitly.
+        'd MMM',
+        'dd MMM',
+        'MMM d',
+        'MMM dd',
+        'd MMM yy',
+        'dd MMM yy',
+        'd MMM yyyy',
+        'dd MMM yyyy',
+        'd MMMM yyyy',
+        'dd MMMM yyyy',
+        'MMM d, yy',
+        'MMM d, yyyy',
+        'MMM dd, yyyy',
+        'MMMM d, yyyy',
+        'MMMM dd, yyyy',
+        // Space-separated month-day-year without a comma (e.g. "Apr 21 1998", "April 21 1998").
+        'MMM d yy',
+        'MMM dd yy',
+        'MMM d yyyy',
+        'MMM dd yyyy',
+        'MMMM d yyyy',
+        'MMMM dd yyyy',
+        'MMM yy',
+        'MMM yyyy',
+        'MMMM yyyy',
+        'MMM, yy',
+        'MMM, yyyy',
+        'MMMM, yyyy',
     ]; }
     /**
      * Format to display the time portion of a datetime
@@ -664,6 +680,103 @@ class DateTimeHelper {
     ///////////////////////////////////////////////////////
     // METHODS
     ///////////////////////////////////////////////////////
+    /**
+     * Convert any date-like value into a Luxon {@link DateTime}. Strings are parsed
+     * as ISO 8601; numbers are treated as epoch milliseconds. Returns an invalid
+     * DateTime when the input is null/undefined.
+     */
+    static toDateTime(value) {
+        if (value === null || value === undefined) {
+            return DateTime.invalid('null or undefined');
+        }
+        if (DateTime.isDateTime(value)) {
+            return value;
+        }
+        if (value instanceof Date) {
+            return DateTime.fromJSDate(value);
+        }
+        if (typeof value === 'number') {
+            return DateTime.fromMillis(value);
+        }
+        return DateTime.fromISO(value);
+    }
+    /**
+     * Translate a moment-style format string (e.g. `MM/DD/YYYY HH:mm:ss A`) into
+     * the Luxon equivalent (`MM/dd/yyyy HH:mm:ss a`). Use this when format strings
+     * originate from external sources (such as user preferences) that still use
+     * moment tokens.
+     *
+     * Only the tokens currently in use across this library are translated:
+     * `Y`→`y`, `D`→`d`, `A`→`a`. `M`, `H`, `h`, `m`, `s` are identical between
+     * the two libraries.
+     */
+    static momentToLuxonFormat(format) {
+        return format
+            .replace(/Y/g, 'y')
+            .replace(/D/g, 'd')
+            .replace(/A/g, 'a');
+    }
+    /**
+     * Format a date-like value using a moment-style format string. The format
+     * string is automatically translated to Luxon tokens, so callers can keep
+     * passing the same preference strings (e.g. `MM/DD/YYYY HH:mm:ss`).
+     *
+     * When `displayInUTC` is true, string inputs without zone info are parsed
+     * as UTC (matching `moment.utc(str)`), and all other inputs are shifted to
+     * the UTC zone for display. Returns an empty string for invalid input.
+     *
+     * Moment's lowercase `a` token produces lowercase `am`/`pm`, but Luxon's
+     * `a` is locale-aware and emits uppercase `AM`/`PM` in en-US. When the
+     * incoming format uses lowercase `a` (and not uppercase `A`), the meridiem
+     * in the output is lowercased to preserve the moment contract for user
+     * preferences like `h:mm:ss a` that are stored externally.
+     */
+    static formatDate(date, momentFormat, displayInUTC = false) {
+        let dt;
+        if (displayInUTC && typeof date === 'string') {
+            dt = DateTime.fromISO(date, { zone: 'utc' });
+        }
+        else {
+            dt = this.toDateTime(date);
+            if (displayInUTC) {
+                dt = dt.setZone('utc');
+            }
+        }
+        if (!dt.isValid)
+            return '';
+        let result = dt.toFormat(this.momentToLuxonFormat(momentFormat));
+        if (momentFormat.includes('a') && !momentFormat.includes('A')) {
+            result = result.replace(/AM|PM/g, m => m.toLowerCase());
+        }
+        return result;
+    }
+    /**
+     * Parse a string against a list of format patterns. Returns the first
+     * successful parse as a {@link DateTime} (which may be invalid if none match).
+     *
+     * Format strings may use either Luxon or moment tokens — each pattern is
+     * run through {@link momentToLuxonFormat} before matching, so callers can
+     * keep passing arrays like `['M/D/YYYY']` from previously moment-based code.
+     *
+     * Mirrors moment's behavior of ignoring separator characters by normalizing
+     * `/`, `.` and `-` in both input and patterns before matching.
+     */
+    static parseWithFormats(value, formats) {
+        const normalize = (s) => s.replace(/[\/.\-]/g, '-');
+        // Strip surrounding whitespace and separators from the input so a partial entry with a
+        // trailing (or leading) separator still matches — e.g. "11/" normalizes to "11", which
+        // parses via the month-only format to Nov 1 of the current year. Internal separators are
+        // preserved, so full dates like "Apr 21 1998" are unaffected.
+        const normalizedValue = normalize(value).replace(/^[\s-]+|[\s-]+$/g, '');
+        for (const format of formats) {
+            const luxonFormat = this.momentToLuxonFormat(format);
+            const dt = DateTime.fromFormat(normalizedValue, normalize(luxonFormat));
+            if (dt.isValid) {
+                return dt;
+            }
+        }
+        return DateTime.invalid('no matching format');
+    }
     /**
      * Return true if @see date is equal to the @see endOfTime
      */
@@ -675,7 +788,7 @@ class DateTimeHelper {
      * Compare two dates and return true if they represent the same year, month, and day (time is ignored).
      */
     static isSameDay(date1, date2) {
-        return moment(date1).isSame(moment(date2), 'day');
+        return this.toDateTime(date1).hasSame(this.toDateTime(date2), 'day');
     }
     /**
      * Get the parse formats based on the given date format. If no date format is
@@ -694,19 +807,19 @@ class DateTimeHelper {
         return dateFormat ? map[dateFormat] : this.monthFirstParseFormats;
     }
     /**
-     * Get the moment parse formats based on the given date format. If no date format is
+     * Get the Luxon parse formats based on the given date format. If no date format is
      * given, or we don't recognize the format, return the month first parse formats.
      */
-    static getMomentParseFormats(dateFormat) {
+    static getLuxonParseFormats(dateFormat) {
         let map = {
-            'MM/DD/YYYY': [...this.momentMonthFirstParseFormats, ...this.momentMedAndLongDateFormats],
-            'MM-DD-YYYY': [...this.momentMonthFirstParseFormats, ...this.momentMedAndLongDateFormats],
-            'DD/MM/YYYY': [...this.momentDateFirstParseFormats, ...this.momentMedAndLongDateFormats],
-            'DD-MM-YYYY': [...this.momentDateFirstParseFormats, ...this.momentMedAndLongDateFormats],
-            'YYYY/MM/DD': [...this.momentMonthFirstParseFormats, ...this.momentMedAndLongDateFormats],
-            'YYYY-MM-DD': [...this.momentMonthFirstParseFormats, ...this.momentMedAndLongDateFormats]
+            'MM/DD/YYYY': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
+            'MM-DD-YYYY': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
+            'DD/MM/YYYY': [...this.luxonDateFirstParseFormats, ...this.luxonMedAndLongDateFormats],
+            'DD-MM-YYYY': [...this.luxonDateFirstParseFormats, ...this.luxonMedAndLongDateFormats],
+            'YYYY/MM/DD': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
+            'YYYY-MM-DD': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats]
         };
-        return dateFormat ? map[dateFormat] : this.momentMonthFirstParseFormats;
+        return dateFormat ? map[dateFormat] : this.luxonMonthFirstParseFormats;
     }
     /**
      * Get relationship start date (favoring date in partialFormState if exists)
@@ -729,28 +842,23 @@ class DateTimeHelper {
         return null;
     }
     static isDateBetween(date, startDate, endDate, includeStart, includeEnd) {
-        let inclusivity = '()';
-        if (includeStart && includeEnd) {
-            inclusivity = '[]';
-        }
-        else if (includeStart) {
-            inclusivity = '[)';
-        }
-        else if (includeEnd) {
-            inclusivity = '(]';
-        }
         // If a start date is not provide, we'll use our beginning of time instead
         startDate = startDate || this.beginningOfTime;
         // If an end date is not provided, we'll use our end of time instead
         endDate = endDate || this.endOfTime;
-        return moment(date).isBetween(startDate, endDate, 'day', inclusivity);
+        const d = this.toDateTime(date).startOf('day');
+        const s = this.toDateTime(startDate).startOf('day');
+        const e = this.toDateTime(endDate).startOf('day');
+        const afterStart = includeStart ? d >= s : d > s;
+        const beforeEnd = includeEnd ? d <= e : d < e;
+        return afterStart && beforeEnd;
     }
     static stringToDate(dateString) {
         if (dateString === null || dateString === undefined) {
             return dateString;
         }
         else {
-            return moment(dateString).toDate();
+            return DateTime.fromISO(dateString).toJSDate();
         }
     }
 }
@@ -764,15 +872,15 @@ class DateInputSelectionStrategyBase {
         if (!value) {
             return null;
         }
-        const date = moment(value, parseFormats);
-        if (date.isValid()) {
+        let date = DateTimeHelper.parseWithFormats(value, parseFormats);
+        if (date.isValid) {
             // If we're in a temporary state (when the user is typing in a textbox), we need to set the year to the current year if it's before the min year
             // This prevents the calendars from showing unhelpful dates that are in the distant past before the user finishes typing in the date.
             // We don't do this modification when the real selection happens on textbox blur.
-            if (opts?.shiftToCurrentYearIfBelow && date.isBefore(opts.shiftToCurrentYearIfBelow)) {
-                date.set('year', moment().year());
+            if (opts?.shiftToCurrentYearIfBelow && date < DateTime.fromJSDate(opts.shiftToCurrentYearIfBelow)) {
+                date = date.set({ year: DateTime.now().year });
             }
-            return date.toDate();
+            return date.toJSDate();
         }
         return null;
     }
@@ -854,7 +962,7 @@ class DaySelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Add a single day to the selection
         if (DateInput.isSelectionSingleDate(selection)) {
-            return moment(selection).add(1, 'day').toDate();
+            return DateTime.fromJSDate(selection).plus({ days: 1 }).toJSDate();
         }
         // This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
         return selection;
@@ -862,7 +970,7 @@ class DaySelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Subtract a single day from the selection
         if (DateInput.isSelectionSingleDate(selection)) {
-            return moment(selection).subtract(1, 'day').toDate();
+            return DateTime.fromJSDate(selection).minus({ days: 1 }).toJSDate();
         }
         // This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
         return selection;
@@ -893,19 +1001,19 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
             // Update the start and end dates to match a 28-day range, keying off the end date if parseFromEnd is true
             // parseFromEnd is true when a date is being entered from the end date textbox
             if (opts?.parseFromEnd) {
-                start = moment(end).subtract(27, 'days').toDate();
+                start = DateTime.fromJSDate(end).minus({ days: 27 }).toJSDate();
             }
             else {
-                end = moment(start).add(27, 'days').toDate();
+                end = DateTime.fromJSDate(start).plus({ days: 27 }).toJSDate();
             }
         }
         // If the start date is not provided, we'll use the end date to calculate the start date
         if (!start && end && !opts?.preventAutoComplete) {
-            start = moment(end).subtract(27, 'days').toDate();
+            start = DateTime.fromJSDate(end).minus({ days: 27 }).toJSDate();
         }
         // If the end date is not provided, we'll use the start date to calculate the end date
         if (!end && start && !opts?.preventAutoComplete) {
-            end = moment(start).add(27, 'days').toDate();
+            end = DateTime.fromJSDate(start).plus({ days: 27 }).toJSDate();
         }
         if (!start && !end) {
             return null;
@@ -916,7 +1024,7 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     }
     getSelectionFromDate(date) {
         return {
-            start: moment(date).subtract(27, 'days').toDate(),
+            start: DateTime.fromJSDate(date).minus({ days: 27 }).toJSDate(),
             end: date
         };
     }
@@ -926,7 +1034,7 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
             if (!previousSelection.end && previousSelection.start) {
                 return {
                     start: previousSelection.start,
-                    end: moment(previousSelection.start).add(27, 'days').toDate()
+                    end: DateTime.fromJSDate(previousSelection.start).plus({ days: 27 }).toJSDate()
                 };
                 // If the range only has an end date, make the 28-day range end on that date
             }
@@ -943,9 +1051,10 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Move the selection to the next 28 days
         if (DateInput.isSelectionRange(selection) && selection.end) {
+            const end = DateTime.fromJSDate(selection.end);
             return {
-                start: moment(selection.end).add(1, 'day').toDate(),
-                end: moment(selection.end).add(28, 'days').toDate()
+                start: end.plus({ days: 1 }).toJSDate(),
+                end: end.plus({ days: 28 }).toJSDate()
             };
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
@@ -955,9 +1064,10 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Move the selection to the previous 28 days
         if (DateInput.isSelectionRange(selection) && selection.start) {
+            const start = DateTime.fromJSDate(selection.start);
             return {
-                start: moment(selection.start).subtract(28, 'days').toDate(),
-                end: moment(selection.start).subtract(1, 'day').toDate()
+                start: start.minus({ days: 28 }).toJSDate(),
+                end: start.minus({ days: 1 }).toJSDate()
             };
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
@@ -990,19 +1100,19 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
             // Update the start and end dates to match a 7-day range, keying off the end date if parseFromEnd is true
             // parseFromEnd is true when a date is being entered from the end date textbox
             if (opts?.parseFromEnd) {
-                start = moment(end).subtract(6, 'days').toDate();
+                start = DateTime.fromJSDate(end).minus({ days: 6 }).toJSDate();
             }
             else {
-                end = moment(start).add(6, 'days').toDate();
+                end = DateTime.fromJSDate(start).plus({ days: 6 }).toJSDate();
             }
         }
         // If the start date is not provided, we'll use the end date to calculate the start date
         if (!start && end && !opts?.preventAutoComplete) {
-            start = moment(end).subtract(6, 'days').toDate();
+            start = DateTime.fromJSDate(end).minus({ days: 6 }).toJSDate();
         }
         // If the end date is not provided, we'll use the start date to calculate the end date
         if (!end && start && !opts?.preventAutoComplete) {
-            end = moment(start).add(6, 'days').toDate();
+            end = DateTime.fromJSDate(start).plus({ days: 6 }).toJSDate();
         }
         if (!start && !end) {
             return null;
@@ -1014,7 +1124,7 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     getSelectionFromDate(date) {
         // Base the selection on the given date, moving back 6 days
         return {
-            start: moment(date).subtract(6, 'days').toDate(),
+            start: DateTime.fromJSDate(date).minus({ days: 6 }).toJSDate(),
             end: date
         };
     }
@@ -1024,7 +1134,7 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
             if (!previousSelection.end && previousSelection.start) {
                 return {
                     start: previousSelection.start,
-                    end: moment(previousSelection.start).add(6, 'days').toDate()
+                    end: DateTime.fromJSDate(previousSelection.start).plus({ days: 6 }).toJSDate()
                 };
                 // Otherwise, create the new selection based on the end date backwards
             }
@@ -1041,9 +1151,10 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Shift the range forward by 7 days
         if (DateInput.isSelectionRange(selection) && selection.end) {
+            const end = DateTime.fromJSDate(selection.end);
             return {
-                start: moment(selection.end).add(1, 'day').toDate(),
-                end: moment(selection.end).add(7, 'days').toDate()
+                start: end.plus({ days: 1 }).toJSDate(),
+                end: end.plus({ days: 7 }).toJSDate()
             };
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
@@ -1053,9 +1164,10 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Shift the range back 7 days
         if (DateInput.isSelectionRange(selection) && selection.start) {
+            const start = DateTime.fromJSDate(selection.start);
             return {
-                start: moment(selection.start).subtract(7, 'days').toDate(),
-                end: moment(selection.start).subtract(1, 'day').toDate()
+                start: start.minus({ days: 7 }).toJSDate(),
+                end: start.minus({ days: 1 }).toJSDate()
             };
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
@@ -1083,7 +1195,7 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
         // A single date selection shouldn't happen in this mode but it's simple enough to handle
         const date = DateInput.isSelectionRange(selection) ? selection.start : selection;
         return {
-            textbox: moment(date).format('MMM, YYYY'),
+            textbox: date ? DateTime.fromJSDate(date).toFormat('MMM, yyyy') : null,
             textbox2: null
         };
     }
@@ -1096,9 +1208,10 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
         return this.getSelectionFromDate(date);
     }
     getSelectionFromDate(date) {
+        const dt = DateTime.fromJSDate(date);
         return {
-            start: moment(date).startOf('month').toDate(),
-            end: moment(date).endOf('month').toDate()
+            start: dt.startOf('month').toJSDate(),
+            end: dt.endOf('month').toJSDate()
         };
     }
     getNewSelectionFromExisting(previousSelection) {
@@ -1118,8 +1231,8 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Move the selection to the next month
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).add(1, 'month');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).plus({ months: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1128,8 +1241,8 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Move the selection to the previous month
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).subtract(1, 'month');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).minus({ months: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1147,14 +1260,21 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
         this.validViewModes = ['quarter', 'year'];
         this.showSecondaryTextbox = false;
         this.showSecondaryCalendar = false;
+        /**
+         * Format of the quarter range shown in the textbox (see {@link formatSelection}), e.g. "Jan–Mar, 2023".
+         * Included in parsing so the displayed value round-trips (Luxon parsing is strict and would otherwise
+         * reject it, clearing the selection when the textbox is blurred). Both month tokens land in the same
+         * quarter, so parsing keys off whichever the parser resolves.
+         */
+        this.rangeParseFormats = ['MMM–MMM, yyyy', 'MMM–MMM, yy'];
     }
     formatSelection(selection) {
         // Format the the quarter range as "MMM–MMM, YYYY"
         // We only have one textbox in this mode
         if (DateInput.isSelectionRange(selection)) {
-            const start = moment(selection.start).format('MMM');
-            const end = moment(selection.end).format('MMM');
-            const year = moment(selection.end).format('YYYY');
+            const start = selection.start ? DateTime.fromJSDate(selection.start).toFormat('MMM') : '';
+            const end = selection.end ? DateTime.fromJSDate(selection.end).toFormat('MMM') : '';
+            const year = selection.end ? DateTime.fromJSDate(selection.end).toFormat('yyyy') : '';
             return {
                 textbox: `${start}–${end}, ${year}`,
                 textbox2: null
@@ -1164,17 +1284,19 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
         return { textbox: null, textbox2: null };
     }
     parseTextboxValues(value, parseFormats, opts) {
-        // Only one textbox is used in this mode
-        const date = this.parseString(value.textbox, parseFormats, opts);
+        // Only one textbox is used in this mode. Try the quarter-range display format first, then fall back
+        // to the standard single-date formats a user might type (e.g. "Feb 2023").
+        const date = this.parseString(value.textbox, [...this.rangeParseFormats, ...parseFormats], opts);
         if (!date) {
             return null;
         }
         return this.getSelectionFromDate(date);
     }
     getSelectionFromDate(date) {
+        const dt = DateTime.fromJSDate(date);
         return {
-            start: moment(date).startOf('quarter').toDate(),
-            end: moment(date).endOf('quarter').toDate()
+            start: dt.startOf('quarter').toJSDate(),
+            end: dt.endOf('quarter').toJSDate()
         };
     }
     getNewSelectionFromExisting(previousSelection) {
@@ -1194,8 +1316,8 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Move the selection to the next quarter
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).add(1, 'quarter');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).plus({ quarters: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1204,8 +1326,8 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Move the selection to the previous quarter
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).subtract(1, 'quarter');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).minus({ quarters: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1228,13 +1350,13 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
         if (!selection) {
             return { textbox: null, textbox2: null };
         }
-        // We use the 'll' moment medium format here to make sure the formatted date is formatted according to the user's locale
+        // We use Luxon's DATE_MED preset here (equivalent to moment's 'll') so the formatted date follows the user's locale
         if (DateInput.isSelectionSingleDate(selection)) {
-            return { textbox: moment(selection).format('ll'), textbox2: null };
+            return { textbox: DateTime.fromJSDate(selection).toLocaleString(DateTime.DATE_MED), textbox2: null };
         }
         else {
-            const start = selection.start ? moment(selection.start).format('ll') : null;
-            const end = selection.end ? moment(selection.end).format('ll') : null;
+            const start = selection.start ? DateTime.fromJSDate(selection.start).toLocaleString(DateTime.DATE_MED) : null;
+            const end = selection.end ? DateTime.fromJSDate(selection.end).toLocaleString(DateTime.DATE_MED) : null;
             return { textbox: start, textbox2: end };
         }
     }
@@ -1245,7 +1367,7 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
         // because we don't have a fixed range to automatically adjust the dates to. If the user is changing the begin date or end date and ends
         // up crossing the other date, we should clear out the date that's not being changed so that the user can enter a valid range using the
         // begin/end date they just entered.
-        if (start && end && moment(start).isAfter(end)) {
+        if (start && end && DateTime.fromJSDate(start) > DateTime.fromJSDate(end)) {
             if (opts?.parseFromEnd) {
                 start = null;
             }
@@ -1263,18 +1385,19 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
     getSelectionFromDate(date, existingSelection) {
         if (DateInput.isSelectionRange(existingSelection)) {
             const { start, end } = existingSelection;
+            const dDt = DateTime.fromJSDate(date);
             if (start && !end) {
                 // If the selected date is before the existing start date, set it as the new start date and use the existing start date as the end date
-                return moment(date).isBefore(start) ? { start: date, end: start } : { start, end: date };
+                return dDt < DateTime.fromJSDate(start) ? { start: date, end: start } : { start, end: date };
             }
             if (end && !start) {
                 // If the selected date is after the existing end date, set it as the new end date and use the existing end date as the start date
-                return moment(date).isBefore(end) ? { start: date, end } : { start: end, end: date };
+                return dDt < DateTime.fromJSDate(end) ? { start: date, end } : { start: end, end: date };
             }
         }
         else if (DateInput.isSelectionSingleDate(existingSelection)) {
             // If the selected date is before the existing date, set it as the new start date and use the existing date as the end date
-            return moment(date).isBefore(existingSelection) ? { start: date, end: existingSelection } : { start: existingSelection, end: date };
+            return DateTime.fromJSDate(date) < DateTime.fromJSDate(existingSelection) ? { start: date, end: existingSelection } : { start: existingSelection, end: date };
         }
         // If no selection exists or we already have a complete selection, start a new one with the selected date as the start date.
         return { start: date, end: null };
@@ -1295,9 +1418,9 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
         // If we have a valid range, we'll shift the range to the date provided, using it as the end date
         // The new selection will have the same length as the previous.
         if (DateInput.isSelectionRange(existingSelection) && existingSelection.start && existingSelection.end) {
-            const length = moment(existingSelection.end).diff(existingSelection.start, 'days');
+            const length = Math.floor(DateTime.fromJSDate(existingSelection.end).diff(DateTime.fromJSDate(existingSelection.start), 'days').days);
             return {
-                start: moment(date).subtract(length, 'days').toDate(),
+                start: DateTime.fromJSDate(date).minus({ days: length }).toJSDate(),
                 end: date
             };
         }
@@ -1309,10 +1432,11 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
         // We can only determine the next selection if we have a valid range
         if (DateInput.isSelectionRange(selection) && selection.start && selection.end) {
             // Shift the range forward by the number of days between the start and end dates
-            const length = moment(selection.end).diff(selection.start, 'days');
+            const end = DateTime.fromJSDate(selection.end);
+            const length = Math.floor(end.diff(DateTime.fromJSDate(selection.start), 'days').days);
             return {
-                start: moment(selection.end).add(1, 'days').toDate(),
-                end: moment(selection.end).add(1 + length, 'days').toDate()
+                start: end.plus({ days: 1 }).toJSDate(),
+                end: end.plus({ days: 1 + length }).toJSDate()
             };
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
@@ -1323,10 +1447,11 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
         // We can only determine the previous selection if we have a valid range
         if (DateInput.isSelectionRange(selection) && selection.start && selection.end) {
             // Shift the range back by the number of days between the start and end dates
-            const length = moment(selection.end).diff(selection.start, 'days');
+            const start = DateTime.fromJSDate(selection.start);
+            const length = Math.floor(DateTime.fromJSDate(selection.end).diff(start, 'days').days);
             return {
-                start: moment(selection.start).subtract(1 + length, 'days').toDate(),
-                end: moment(selection.start).subtract(1, 'days').toDate()
+                start: start.minus({ days: 1 + length }).toJSDate(),
+                end: start.minus({ days: 1 }).toJSDate()
             };
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
@@ -1336,31 +1461,33 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
     getPrimaryCalendarView(selection, minDate, maxDate, currentView) {
         let viewDate;
         if (DateInput.isSelectionRange(selection)) {
-            let start = selection.start ? moment(selection.start) : null;
-            let end = selection.end ? moment(selection.end) : null;
+            const start = selection.start ? DateTime.fromJSDate(selection.start) : null;
+            const end = selection.end ? DateTime.fromJSDate(selection.end) : null;
+            const minDt = DateTime.fromJSDate(minDate);
+            const maxDt = DateTime.fromJSDate(maxDate);
             // Since we're in range mode, the primary calendar is mostly concerned with the start date
             if (start) {
                 // If we have a start date in the selection and it's before the min date, shift the view to the min date.
-                if (start.isBefore(minDate, 'month')) {
+                if (start.startOf('month') < minDt.startOf('month')) {
                     viewDate = minDate;
                     // If the start is after the max date, shift the view to the max date.
                 }
-                else if (start.isSameOrAfter(maxDate, 'month')) {
+                else if (start.startOf('month') >= maxDt.startOf('month')) {
                     // the secondary calendar will show the max date month.
                     // The primary calendar will show the month before the max date.
-                    viewDate = moment(maxDate).subtract(1, 'month').toDate();
+                    viewDate = maxDt.minus({ months: 1 }).toJSDate();
                 }
                 else {
-                    viewDate = start.toDate();
+                    viewDate = start.toJSDate();
                 }
             }
-            else if (end && end.isSameOrBefore(minDate, 'month')) {
+            else if (end && end.startOf('month') <= minDt.startOf('month')) {
                 // If we don't have a start date, and the end date is the same month or before the min date, shift the view to the min date.
                 viewDate = minDate;
             }
-            else if (end && end.isSameOrBefore(new Date(), 'month')) {
+            else if (end && end.startOf('month') <= DateTime.now().startOf('month')) {
                 // If we don't have a start date, and the end date is the same month or before the current month, shift the view to the month before the end
-                viewDate = moment(end).subtract(1, 'month').toDate();
+                viewDate = end.minus({ months: 1 }).toJSDate();
             }
             else {
                 // Otherwise, show the current month.
@@ -1378,32 +1505,34 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
     getSecondaryCalendarView(selection, minDate, maxDate, currentView) {
         let viewDate;
         if (DateInput.isSelectionRange(selection)) {
-            let start = selection.start ? moment(selection.start) : null;
-            let end = selection.end ? moment(selection.end) : null;
+            const start = selection.start ? DateTime.fromJSDate(selection.start) : null;
+            const end = selection.end ? DateTime.fromJSDate(selection.end) : null;
+            const minDt = DateTime.fromJSDate(minDate);
+            const maxDt = DateTime.fromJSDate(maxDate);
             // The secondary calendar is primarily concerned with the end date in the selection.
             if (end) {
-                if (end.isAfter(maxDate, 'month')) {
+                if (end.startOf('month') > maxDt.startOf('month')) {
                     // If the end date is after the max date, shift the view to the max date.
                     viewDate = maxDate;
                 }
-                else if (end.isSameOrBefore(minDate, 'month')) {
+                else if (end.startOf('month') <= minDt.startOf('month')) {
                     // If the end date is the same month or before the min date, shift the view to show
                     // the month after the min date. The primary calendar will show the min date month.
-                    viewDate = moment(minDate).add(1, 'month').toDate();
+                    viewDate = minDt.plus({ months: 1 }).toJSDate();
                 }
                 else {
                     // Otherwise, show the end date month.
-                    viewDate = end.toDate();
+                    viewDate = end.toJSDate();
                 }
             }
-            else if (start && start.isSameOrAfter(maxDate, 'month')) {
+            else if (start && start.startOf('month') >= maxDt.startOf('month')) {
                 // If we don't have an end date, and the start date is after the max date, show the max date month
                 viewDate = maxDate;
             }
-            else if (start && start.isSameOrAfter(new Date(), 'month')) {
+            else if (start && start.startOf('month') >= DateTime.now().startOf('month')) {
                 // If we don't have an end date, and the start date is on or after the current month,
                 // show the month after the start date.
-                viewDate = moment(start).add(1, 'month').toDate();
+                viewDate = start.plus({ months: 1 }).toJSDate();
             }
             else {
                 // Otherwise, show the current month.
@@ -1438,12 +1567,12 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
         // Only one date is needed for formatting since the ranges span a single year.
         // There shouldn't be any case where there's only a single date but it's covered anyway.
         const date = DateInput.isSelectionRange(selection) ? selection.start : selection;
-        return { textbox: moment(date).format('YYYY'), textbox2: null };
+        return { textbox: date ? DateTime.fromJSDate(date).toFormat('yyyy') : null, textbox2: null };
     }
     parseString(value, parseFormats, opts) {
-        // Including 'YY' and 'YYYY' as valid formats for year input. These aren't included in the default parse
+        // Including 'yy' and 'yyyy' as valid formats for year input. These aren't included in the default parse
         // formats because they cause issues with the default date parsing.
-        return super.parseString(value, ['YY', 'YYYY', ...parseFormats], opts);
+        return super.parseString(value, ['yy', 'yyyy', ...parseFormats], opts);
     }
     parseTextboxValues(value, parseFormats, opts) {
         // Only a single textbox is used in year mode
@@ -1454,9 +1583,10 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
         return this.getSelectionFromDate(date);
     }
     getSelectionFromDate(date) {
+        const dt = DateTime.fromJSDate(date);
         return {
-            start: moment(date).startOf('year').toDate(),
-            end: moment(date).endOf('year').toDate()
+            start: dt.startOf('year').toJSDate(),
+            end: dt.endOf('year').toJSDate()
         };
     }
     getNewSelectionFromExisting(previousSelection) {
@@ -1479,8 +1609,8 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
     getNextSelection(selection) {
         // Move the selection to the next year
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).add(1, 'year');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).plus({ years: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the next stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1489,8 +1619,8 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
     getPreviousSelection(selection) {
         // Move the selection to the previous year
         if (DateInput.isSelectionRange(selection) && selection.start) {
-            const date = moment(selection.start).subtract(1, 'year');
-            return this.getSelectionFromDate(date.toDate());
+            const date = DateTime.fromJSDate(selection.start).minus({ years: 1 });
+            return this.getSelectionFromDate(date.toJSDate());
         }
         // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
         // If it does, just return the selection as-is.
@@ -1529,10 +1659,10 @@ class DateDisplayPipe {
     transform(date, showEndOfTime, showTime, showSeconds) {
         let display = '';
         let formatString = '';
-        if (date && moment(date).isValid() && (showEndOfTime || !DateTimeHelper.isEndOfTime(date))) {
+        if (date != null && DateTimeHelper.toDateTime(date).isValid && (showEndOfTime || !DateTimeHelper.isEndOfTime(date))) {
             // use user-preferred formats
             this.userPreferenceService.getPreferences().subscribe(result => {
-                //if preferences exist then format date to users preference 
+                //if preferences exist then format date to users preference
                 //otherwise use the last user preference
                 if (result.preference) {
                     formatString = result.preference.dateFormat;
@@ -1546,7 +1676,7 @@ class DateDisplayPipe {
                     this.lastFormatString = formatString;
                 }
             });
-            display = moment(date).format(this.lastFormatString);
+            display = DateTimeHelper.formatDate(date, this.lastFormatString);
         }
         return display;
     }
@@ -1571,6 +1701,32 @@ var DateInput;
         return !!selection && !isSelectionSingleDate(selection);
     }
     DateInput.isSelectionRange = isSelectionRange;
+    /**
+     * Coerces a selection into one backed by real {@link Date} objects.
+     *
+     * The form model is typed as `Date | Range`, but hosts commonly bind ISO date strings
+     * (e.g. values straight off an API response). The display path tolerates strings via
+     * Luxon parsing, but the calendar view builders pass the value to `DateTime.fromJSDate`,
+     * which only accepts a `Date` — a string yields an Invalid Date and crashes the calendar
+     * (`RangeError: Invalid time value`). Normalizing at the boundary lets all downstream
+     * calendar/stepper logic rely on actual Dates. Invalid/unparseable values become null.
+     */
+    function normalizeSelection(selection) {
+        if (selection === null || selection === undefined) {
+            return null;
+        }
+        if (isSelectionSingleDate(selection)) {
+            const dt = DateTimeHelper.toDateTime(selection);
+            return dt.isValid ? dt.toJSDate() : null;
+        }
+        const start = selection.start ? DateTimeHelper.toDateTime(selection.start) : null;
+        const end = selection.end ? DateTimeHelper.toDateTime(selection.end) : null;
+        return {
+            start: start?.isValid ? start.toJSDate() : null,
+            end: end?.isValid ? end.toJSDate() : null
+        };
+    }
+    DateInput.normalizeSelection = normalizeSelection;
     class SelectionStrategies {
         constructor(dateDisplayPipe) {
             this.dateDisplayPipe = dateDisplayPipe;
@@ -1613,9 +1769,14 @@ class CalendarItemComponent {
             this.today = false;
             this.outsideActiveMonth = false;
         }
+        else if (this.item?.date) {
+            const itemDt = DateTime.fromJSDate(this.item.date);
+            this.today = itemDt.hasSame(DateTime.now(), 'day');
+            this.outsideActiveMonth = !itemDt.hasSame(DateTime.fromJSDate(this.view.date), 'month');
+        }
         else {
-            this.today = moment(this.item?.date).isSame(moment(), 'day');
-            this.outsideActiveMonth = !moment(this.item?.date).isSame(this.view.date, 'month');
+            this.today = false;
+            this.outsideActiveMonth = false;
         }
         if (this.item?.date) {
             this.hidden = this.isHidden(this.item.date, this.minDate, this.maxDate, this.view.mode);
@@ -1629,24 +1790,30 @@ class CalendarItemComponent {
         if (!date || !selection) {
             return false;
         }
+        const unit = view ?? 'day';
+        const dt = DateTime.fromJSDate(date);
         if (DateInput.isSelectionSingleDate(selection)) {
-            return moment(date).isSame(selection, view);
+            return dt.hasSame(DateTime.fromJSDate(selection), unit);
         }
         else {
             if (selection.start && !selection.end) {
-                return moment(date).isSame(selection.start, view);
+                return dt.hasSame(DateTime.fromJSDate(selection.start), unit);
             }
             else if (!selection.start && selection.end) {
-                return moment(date).isSame(selection.end, view);
+                return dt.hasSame(DateTime.fromJSDate(selection.end), unit);
             }
             else if (selection.start && selection.end) {
-                return moment(date).isBetween(selection.start, selection.end, view, '[]');
+                const d = dt.startOf(unit);
+                const s = DateTime.fromJSDate(selection.start).startOf(unit);
+                const e = DateTime.fromJSDate(selection.end).startOf(unit);
+                return d >= s && d <= e;
             }
         }
         return false;
     }
     isHidden(date, minDate, maxDate, view) {
-        return moment(date).isBefore(minDate, view) || moment(date).isAfter(maxDate, view);
+        const d = DateTime.fromJSDate(date).startOf(view);
+        return d < DateTime.fromJSDate(minDate).startOf(view) || d > DateTime.fromJSDate(maxDate).startOf(view);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CalendarItemComponent, isStandalone: false, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1695,8 +1862,12 @@ class CalendarComponent {
         this.viewChange = new EventEmitter();
         /** Array of calendar item rows to display in the calendar. */
         this.calendarItems = [];
-        /** Weekday labels to show at the top of the calendar in day view. */
-        this.weekDays = moment.weekdaysShort().map(d => d.slice(0, 1));
+        /** Weekday labels to show at the top of the calendar in day view. Starts on Sunday to match the calendar grid layout. */
+        this.weekDays = (() => {
+            // Info.weekdays returns Monday-first; reorder so Sunday is first to match the calendar grid.
+            const mondayFirst = Info.weekdays('short');
+            return [mondayFirst[6], ...mondayFirst.slice(0, 6)].map(d => d.slice(0, 1));
+        })();
         this.disablePreviousButton = false;
         this.disableNextButton = false;
         // Trackby functions for ngFor loops. These reduce the number of DOM elements that need to be updated when the calendar is re-drawn.
@@ -1720,19 +1891,19 @@ class CalendarComponent {
     onNextClick() {
         // If we're in day view, we're incrementing by month
         // In month, quarter, and year views we're incrementing by year\
-        const unit = this.view.mode === 'day' ? 'month' : 'year';
+        const unit = this.view.mode === 'day' ? 'months' : 'years';
         // In year view, we're moving by 16 years at a time. Otherwise we're just moving by 1 month/year.
         const count = this.view.mode === 'year' ? 16 : 1;
-        const goToDate = moment(this.view.date).add(count, unit).toDate();
+        const goToDate = DateTime.fromJSDate(this.view.date).plus({ [unit]: count }).toJSDate();
         this.drawCalendar({ mode: this.view.mode, date: goToDate });
     }
     onPreviousClick() {
         // If we're in day view, we're incrementing by month
         // In month, quarter, and year views we're incrementing by year
-        const unit = this.view.mode === 'day' ? 'month' : 'year';
+        const unit = this.view.mode === 'day' ? 'months' : 'years';
         // In year view, we're moving by 16 years at a time. Otherwise we're just moving by 1 month/year.
         const count = this.view.mode === 'year' ? 16 : 1;
-        const goToDate = moment(this.view.date).subtract(count, unit).toDate();
+        const goToDate = DateTime.fromJSDate(this.view.date).minus({ [unit]: count }).toJSDate();
         this.drawCalendar({ mode: this.view.mode, date: goToDate });
     }
     /** Switches the calendar to month view. */
@@ -1799,13 +1970,14 @@ class CalendarComponent {
             this.view = view;
             this.viewChange.emit(view);
         }
-        this.month = moment(this.view.date).format('MMM');
-        this.year = moment(this.view.date).format('YYYY');
+        const viewDt = DateTime.fromJSDate(this.view.date);
+        this.month = viewDt.toFormat('MMM');
+        this.year = viewDt.toFormat('yyyy');
         this.calendarItems = this.getCalendarItems(this.view);
         const startYear = this.calendarItems[0][0].date < this.minDate ? this.minDate : this.calendarItems[0][0].date;
         const lastItem = this.getLastItem();
         const endYear = lastItem.date > this.maxDate ? this.maxDate : lastItem.date;
-        this.yearRange = `${moment(startYear).format('YYYY')}&ndash;${moment(endYear).format('YYYY')}`;
+        this.yearRange = `${DateTime.fromJSDate(startYear).toFormat('yyyy')}&ndash;${DateTime.fromJSDate(endYear).toFormat('yyyy')}`;
         this.updateNextPreviousStates();
     }
     getCalendarItems(view) {
@@ -1817,53 +1989,58 @@ class CalendarComponent {
         }
     }
     getDayViewItems(activeDate) {
-        // 6 rows of 7 days = 42 days
-        return range(0, 6).map(r => {
-            return range(0, 7).map(d => {
-                // Use the start of the week of the first day of the month.
-                // This pads out the first week with any days from the previous month.
-                const date = moment(activeDate).startOf('month').startOf('week').add(r * 7 + d, 'day');
+        // 6 rows of 7 days = 42 days.
+        // Use the start of the week of the first day of the month, anchored to Sunday to match the calendar grid.
+        // Luxon's startOf('week') is Monday-based per ISO, so shift back to Sunday explicitly.
+        const monthStart = DateTime.fromJSDate(activeDate).startOf('month');
+        const sundayStart = monthStart.weekday === 7 ? monthStart : monthStart.startOf('week').minus({ days: 1 });
+        return range(0, 6).map((r) => {
+            return range(0, 7).map((d) => {
+                const date = sundayStart.plus({ days: r * 7 + d });
                 return {
-                    date: date.toDate(),
-                    label: date.format('D')
+                    date: date.toJSDate(),
+                    label: date.toFormat('d')
                 };
             });
         });
     }
     getMonthViewItems(activeDate) {
         // 4 rows of 3 months = 12 months
-        return range(0, 4).map(r => {
-            return range(0, 3).map(m => {
-                const date = moment(activeDate).startOf('year').add(r * 3 + m, 'month');
+        const yearStart = DateTime.fromJSDate(activeDate).startOf('year');
+        return range(0, 4).map((r) => {
+            return range(0, 3).map((m) => {
+                const date = yearStart.plus({ months: r * 3 + m });
                 return {
-                    date: date.toDate(),
-                    label: date.format('MMM')
+                    date: date.toJSDate(),
+                    label: date.toFormat('MMM')
                 };
             });
         });
     }
     getQuarterViewItems(activeDate) {
         // 2 rows of 2 quarters = 4 quarters
-        return range(0, 2).map(r => {
-            return range(0, 2).map(q => {
-                const date = moment(activeDate).startOf('year').add(r * 2 + q, 'quarter');
-                const endDate = moment(date).endOf('quarter');
+        const yearStart = DateTime.fromJSDate(activeDate).startOf('year');
+        return range(0, 2).map((r) => {
+            return range(0, 2).map((q) => {
+                const date = yearStart.plus({ quarters: r * 2 + q });
+                const endDate = date.endOf('quarter');
                 return {
-                    date: date.toDate(),
-                    label: `${date.format('MMM')}&ndash;${endDate.format('MMM')}`
+                    date: date.toJSDate(),
+                    label: `${date.toFormat('MMM')}&ndash;${endDate.toFormat('MMM')}`
                 };
             });
         });
     }
     getYearViewItems(activeDate) {
         // 4 rows of 4 years = 16 years
-        return range(0, 4).map(r => {
-            return range(0, 4).map(y => {
-                // Subtracting 8 years to put the current active year at the beginning of the 3rd row.
-                const date = moment(activeDate).startOf('year').subtract(8, 'years').add(r * 4 + y, 'year');
+        // Subtracting 8 years to put the current active year at the beginning of the 3rd row.
+        const yearStart = DateTime.fromJSDate(activeDate).startOf('year').minus({ years: 8 });
+        return range(0, 4).map((r) => {
+            return range(0, 4).map((y) => {
+                const date = yearStart.plus({ years: r * 4 + y });
                 return {
-                    date: date.toDate(),
-                    label: date.format('YYYY')
+                    date: date.toJSDate(),
+                    label: date.toFormat('yyyy')
                 };
             });
         });
@@ -1873,24 +2050,20 @@ class CalendarComponent {
         // We don't want to disable the next/previous buttons if the min or max date is within the
         // next or previous view
         const unit = this.view.mode === 'day' ? 'month' : 'year';
+        const pluralUnit = this.view.mode === 'day' ? 'months' : 'years';
+        const viewDt = DateTime.fromJSDate(this.view.date);
         // When in year view, we need to subtract 9 years to determine if we're past the min date.
         // The year view is 16 years long, and the current date is the 9th year in the view.
         const subCount = this.view.mode === 'year' ? 9 : 1;
-        if (moment(this.view.date).subtract(subCount, unit).isBefore(this.minDate, unit)) {
-            this.disablePreviousButton = true;
-        }
-        else {
-            this.disablePreviousButton = false;
-        }
+        const prev = viewDt.minus({ [pluralUnit]: subCount }).startOf(unit);
+        const minDt = DateTime.fromJSDate(this.minDate).startOf(unit);
+        this.disablePreviousButton = prev < minDt;
         // When in year view, we need to add 8 years to determine if we're past the max date.
         // The year view is 16 years long, and the current date is the 9th year in the view.
         const addCount = this.view.mode === 'year' ? 8 : 1;
-        if (moment(this.view.date).add(addCount, unit).isAfter(this.maxDate, unit)) {
-            this.disableNextButton = true;
-        }
-        else {
-            this.disableNextButton = false;
-        }
+        const next = viewDt.plus({ [pluralUnit]: addCount }).startOf(unit);
+        const maxDt = DateTime.fromJSDate(this.maxDate).startOf(unit);
+        this.disableNextButton = next > maxDt;
     }
     getLastItem() {
         const lastRow = this.calendarItems[this.calendarItems.length - 1];
@@ -2325,11 +2498,11 @@ class TooltipComponent {
         this.overlayRef?.dispose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
         }], propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.--ec-tooltip-background-color']
@@ -4274,11 +4447,11 @@ class ViewOverlayComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n    [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n    [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n    [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ecOverlay]', standalone: false, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
+            args: [{ selector: '[ecOverlay]', standalone: false, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n    [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n    [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n    [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }], message: [{
@@ -5334,7 +5507,7 @@ class DateInputComponent extends FormControlBase {
          * Date parsing formats for user-entered dates. Defaults to month-first formats, but is updated in onInit
          * to use the user's preferred date format.
          */
-        this.parseFormats = DateTimeHelper.getMomentParseFormats();
+        this.parseFormats = DateTimeHelper.getLuxonParseFormats();
     }
     ngOnChanges(changes) {
         if (changes.selectionMode && !changes.selectionMode.isFirstChange()) {
@@ -5350,12 +5523,15 @@ class DateInputComponent extends FormControlBase {
         this.onFormModelStatusChanges();
         this.onFormModelValueChanges();
         this.onTextboxValueChanges();
-        // Sync the initial disabled status and value of the textbox
+        // Sync the initial disabled status and value of the textbox.
+        // Normalize the form model value so any ISO date strings the host bound to the model
+        // become real Dates before they reach the calendar/stepper logic (see normalizeSelection).
         this.syncTextboxControlDisabledStatus(this.formModel.status);
-        const initialDisplayValue = this.selectionStrategy.formatSelection(this.formModel.value);
+        const initialSelection = DateInput.normalizeSelection(this.formModel.value);
+        const initialDisplayValue = this.selectionStrategy.formatSelection(initialSelection);
         this.textboxGroup.patchValue(initialDisplayValue, { emitEvent: false });
         // Update the calendar selection and view based on the initial form model value
-        this.calendarSelection = this.formModel.value;
+        this.calendarSelection = initialSelection;
         this.updateCalendars(this.calendarSelection);
         this.updateSteppers(this.calendarSelection);
     }
@@ -5451,7 +5627,7 @@ class DateInputComponent extends FormControlBase {
     goToToday() {
         // If both calendars are visible, show today in the secondary calendar and the month before in the primary calendar.
         if (this.selectionStrategy.showSecondaryCalendar) {
-            this.primaryCalendarView = { mode: 'day', date: moment().subtract(1, 'month').toDate() };
+            this.primaryCalendarView = { mode: 'day', date: DateTime.now().minus({ months: 1 }).toJSDate() };
             this.secondaryCalendarView = { mode: 'day', date: new Date() };
             // If we're in a single date mode, show today in the primary calendar.
         }
@@ -5500,11 +5676,14 @@ class DateInputComponent extends FormControlBase {
         // Update the calendar selection textbox value with a formatted date when the form model changes.
         // This is triggered by the user selecting a date from the calendar or when the textbox is blurred.
         this.formModel.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
-            const displayValue = this.selectionStrategy.formatSelection(value);
+            // Normalize first: the host may set an ISO date string on the model (e.g. an API value),
+            // and the calendar logic requires real Dates to avoid an Invalid Date crash.
+            const selection = DateInput.normalizeSelection(value);
+            const displayValue = this.selectionStrategy.formatSelection(selection);
             // Don't emit an event when setting the textbox value to avoid circular updates between the textbox and form model.
             this.textboxGroup.patchValue(displayValue, { emitEvent: false });
-            this.updateCalendars(value);
-            this.updateSteppers(value);
+            this.updateCalendars(selection);
+            this.updateSteppers(selection);
         });
     }
     onTextboxValueChanges() {
@@ -5584,7 +5763,7 @@ class DateInputComponent extends FormControlBase {
         const { preference } = await lastValueFrom(this.userPreferenceService.getPreferences());
         const dateFormat = preference?.dateFormat;
         this.placeholder = dateFormat ?? this.placeholder;
-        this.parseFormats = DateTimeHelper.getMomentParseFormats(dateFormat);
+        this.parseFormats = DateTimeHelper.getLuxonParseFormats(dateFormat);
     }
     /** Focuses the date input. */
     focusInput() {
@@ -5604,10 +5783,10 @@ class DateInputComponent extends FormControlBase {
         // This would cause the dates in the other calendar to be unselectable if we were to
         // update the min/max dates in these cases.
         if (this.primaryCalendarView?.mode === 'day') {
-            this.secondaryCalendarMinDate = moment(this.primaryCalendarView?.date).add(1, 'month').startOf('month').toDate();
+            this.secondaryCalendarMinDate = DateTime.fromJSDate(this.primaryCalendarView.date).plus({ months: 1 }).startOf('month').toJSDate();
         }
         if (this.secondaryCalendarView?.mode === 'day') {
-            this.primaryCalendarMaxDate = moment(this.secondaryCalendarView?.date).subtract(1, 'month').endOf('month').toDate();
+            this.primaryCalendarMaxDate = DateTime.fromJSDate(this.secondaryCalendarView.date).minus({ months: 1 }).endOf('month').toJSDate();
         }
     }
     updateCalendars(selection) {
@@ -5623,8 +5802,10 @@ class DateInputComponent extends FormControlBase {
         // However, it's possible that the new date is after the secondary calendar's date. In this case,
         // We want to shift the secondary calendar so the calendars stay in order.
         if (shiftSecondary && this.secondaryCalendarView) {
-            if (moment(this.primaryCalendarView.date).isSameOrAfter(this.secondaryCalendarView.date, 'month')) {
-                let newSecondaryDate = moment(this.primaryCalendarView.date).add(1, 'month').toDate();
+            const primaryDt = DateTime.fromJSDate(this.primaryCalendarView.date);
+            const secondaryDt = DateTime.fromJSDate(this.secondaryCalendarView.date);
+            if (primaryDt.startOf('month') >= secondaryDt.startOf('month')) {
+                const newSecondaryDate = primaryDt.plus({ months: 1 }).toJSDate();
                 this.secondaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newSecondaryDate };
             }
         }
@@ -5635,8 +5816,10 @@ class DateInputComponent extends FormControlBase {
         // However, it's possible that the new date is before the primary calendar's date. In this case,
         // We want to shift the primary calendar so the calendars stay in order.
         if (shiftPrimary && this.primaryCalendarView) {
-            if (moment(this.primaryCalendarView.date).isSameOrAfter(this.secondaryCalendarView.date, 'month')) {
-                let newPrimaryDate = moment(this.secondaryCalendarView.date).subtract(1, 'month').toDate();
+            const primaryDt = DateTime.fromJSDate(this.primaryCalendarView.date);
+            const secondaryDt = DateTime.fromJSDate(this.secondaryCalendarView.date);
+            if (primaryDt.startOf('month') >= secondaryDt.startOf('month')) {
+                const newPrimaryDate = secondaryDt.minus({ months: 1 }).toJSDate();
                 this.primaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newPrimaryDate };
             }
         }
@@ -5686,10 +5869,12 @@ class DateInputComponent extends FormControlBase {
             // We're using the view mode as the granularity. We don't want to invalidate
             // the date in the case where you have a month/quarter/year selected and the min
             // or max date is somewhere within that month/quarter/year.
-            if (moment(value).isBefore(this.minDate, this.selectionStrategy.selectionViewMode)) {
+            const unit = this.selectionStrategy.selectionViewMode;
+            const valueDt = DateTime.fromJSDate(value).startOf(unit);
+            if (valueDt < DateTime.fromJSDate(this.minDate).startOf(unit)) {
                 return { minDate: { minValue: this.minDate } };
             }
-            else if (moment(value).isAfter(this.maxDate, this.selectionStrategy.selectionViewMode)) {
+            else if (valueDt > DateTime.fromJSDate(this.maxDate).startOf(unit)) {
                 return { maxDate: { maxValue: this.maxDate } };
             }
         }
@@ -10028,11 +10213,11 @@ class SelectComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-select', standalone: false, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
+            args: [{ selector: 'ec-select', standalone: false, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], options: [{
@@ -10267,6 +10452,8 @@ class ConfirmComponent {
         this.formGroup = new UntypedFormGroup({});
         this.status = new Overlay('hasData');
         this.showTextBox = false;
+        /** Result of the inline confirm action, used for the screen-reader status text in the result template */
+        this.inlineResultSuccess = false;
         this.destroyed = new Subject();
         this.onDialogSave = new EventEmitter();
         this.onDialogCancel = new EventEmitter();
@@ -10345,6 +10532,7 @@ class ConfirmComponent {
     async doInlineConfirmAction() {
         this.status.setStatus('pending', this.context.inlineConfirmPendingMessage);
         let result = await this.context.inlineConfirmAction();
+        this.inlineResultSuccess = result.isSuccess;
         this.status.setStatus('noData', result.message, {
             id: 'inlineConfirmClose',
             label: 'Close',
@@ -10354,11 +10542,11 @@ class ConfirmComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n      <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-confirm', standalone: false, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
+            args: [{ selector: 'ec-confirm', standalone: false, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n      <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }], onDialogSave: [{
@@ -11553,6 +11741,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 args: ['timedToast', { static: false, read: ElementRef }]
             }] } });
 
+/** Module-level counter so each tooltip instance gets a unique DOM id, keeping
+ * aria-describedby unambiguous when more than one tooltip is in the DOM (e.g. during
+ * the hide delay or across multiple anchors). */
+let uniqueTooltipId = 0;
 class TooltipDirective {
     constructor(tooltipService, element, renderer2) {
         this.tooltipService = tooltipService;
@@ -11581,6 +11773,10 @@ class TooltipDirective {
          * if we never showed the tooltip this will remain null and we won't have an event to unsubscribe to
          */
         this.mouseMoveUnsubscribe = null;
+        /**Set when we show a tooltip so Escape can dismiss it without moving the pointer (WCAG 1.4.13).
+         * Unsubscribed when hide fires, like mouseMoveUnsubscribe.
+         */
+        this.keydownUnsubscribe = null;
     }
     ngOnInit() {
         //checkInputsValue(): if there is an error it will prevent to execute
@@ -11607,6 +11803,10 @@ class TooltipDirective {
     onMouseMove(event) {
         let callCallback = false;
         if (this.contentRect) {
+            //Keep the tooltip visible while the pointer is over the tooltip content itself (WCAG 1.4.13)
+            if (this.isPointerOverTooltip(event)) {
+                return;
+            }
             callCallback = this.tooltipService.onMove(event, this.contentRect);
             if (callCallback) {
                 //trigger on hide process
@@ -11622,9 +11822,39 @@ class TooltipDirective {
     }
     //Trigger the process to hide and later the process
     //to mark as complete the cycle of show and hide the tooltip
-    onLeave() {
+    onLeave(event) {
+        //Moving from the anchor onto the tooltip content should not hide it (WCAG 1.4.13).
+        //The document mousemove backstop hides it once the pointer leaves both.
+        const overlayElement = this.tooltip?.overlayRef?.overlayElement;
+        if (overlayElement && event?.relatedTarget && overlayElement.contains(event.relatedTarget)) {
+            return;
+        }
         this.interrupt.next();
     }
+    //Show the tooltip for keyboard users when the anchor receives focus (WCAG 2.1.1)
+    onFocusIn() {
+        this.mouseOver.next();
+    }
+    //Hide the tooltip when keyboard focus leaves the anchor
+    onFocusOut() {
+        this.interrupt.next();
+    }
+    //Dismiss the tooltip on Escape without moving pointer or focus (WCAG 1.4.13)
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.interrupt.next();
+        }
+    }
+    //True when the pointer coordinates are within the tooltip overlay element
+    isPointerOverTooltip(event) {
+        const overlayElement = this.tooltip?.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return false;
+        }
+        const rect = overlayElement.getBoundingClientRect();
+        return event.clientX >= rect.left && event.clientX <= rect.right
+            && event.clientY >= rect.top && event.clientY <= rect.bottom;
+    }
     checkInputsValue() {
         let parametersWithValue = 0;
         if (this.tooltipText) {
@@ -11651,7 +11881,7 @@ class TooltipDirective {
      */
     createTooltipOptions() {
         this.tooltipOptions = {
-            id: `tooltip_${this.tooltipConfig?.id ? this.tooltipConfig?.id : ''}`,
+            id: `tooltip_${this.tooltipConfig?.id ? this.tooltipConfig.id : ++uniqueTooltipId}`,
             text: this.tooltipConfig?.text || this.tooltipText,
             title: this.tooltipConfig?.title,
             subtitle: this.tooltipConfig?.subtitle,
@@ -11672,6 +11902,11 @@ class TooltipDirective {
         if (!this.tooltip) {
             this.tooltip = this.tooltipService.show(element, this.tooltipPosition, this.tooltipOptions);
             this.mouseMoveUnsubscribe = this.renderer2.listen(document, 'mousemove', this.onMouseMove.bind(this));
+            this.keydownUnsubscribe = this.renderer2.listen(document, 'keydown', this.onKeydown.bind(this));
+            //Associate the tooltip content with its anchor so screen readers announce it (WCAG 4.1.2)
+            if (this.tooltipOptions?.id) {
+                this.renderer2.setAttribute(element, 'aria-describedby', this.tooltipOptions.id);
+            }
         }
     }
     hide() {
@@ -11685,6 +11920,11 @@ class TooltipDirective {
             if (this.mouseMoveUnsubscribe) {
                 this.mouseMoveUnsubscribe();
             }
+            if (this.keydownUnsubscribe) {
+                this.keydownUnsubscribe();
+                this.keydownUnsubscribe = null;
+            }
+            this.renderer2.removeAttribute(this.element.nativeElement, 'aria-describedby');
         }
         //Interrupt the flow of mouseover with a delay and triggers the 
         //flow to hide the tooltip with a delay 
@@ -11698,7 +11938,7 @@ class TooltipDirective {
         this.interrupt.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipDirective, deps: [{ token: TooltipService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TooltipDirective, isStandalone: false, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TooltipDirective, isStandalone: false, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave($event)", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -11719,7 +11959,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 args: ['mouseover']
             }], onLeave: [{
                 type: HostListener,
-                args: ['mouseleave']
+                args: ['mouseleave', ['$event']]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
 class TreeComponent {
@@ -11998,7 +12244,9 @@ class DateDisplayPipe2 {
     }
     async transform(date, options) {
         const { showEndOfTime, showTime, showSeconds, displayInUTC } = options || {};
-        if (!date || !moment(date).isValid() || (!showEndOfTime && DateTimeHelper.isEndOfTime(date))) {
+        if (date == null)
+            return '';
+        if (!DateTimeHelper.toDateTime(date).isValid || (!showEndOfTime && DateTimeHelper.isEndOfTime(date))) {
             return '';
         }
         const { preference } = await lastValueFrom(this.userPrefs.getPreferences());
@@ -12010,8 +12258,7 @@ class DateDisplayPipe2 {
             }
             formatString += ` ${timeFormat}`;
         }
-        // Parse and format the date using moment. If displayInUTC is true, use moment.utc() to shift the date to UTC.
-        return (displayInUTC ? moment.utc(date) : moment(date)).format(formatString);
+        return DateTimeHelper.formatDate(date, formatString, displayInUTC);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, isStandalone: false, name: "dateDisplay2" }); }
@@ -12024,6 +12271,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: UserPreferenceService }] });
 
+/**
+ * Same behavior as {@link DateDisplayPipe2}, but always appends the short named
+ * timezone abbreviation (e.g. `EST`, `PDT`, `UTC`) to the output. Use this when
+ * downstream consumers need to disambiguate the timezone of a rendered date.
+ *
+ * @example <span>{{ someDate | dateDisplay3 | async }}</span>
+ */
+class DateDisplayPipe3 {
+    constructor(userPrefs) {
+        this.userPrefs = userPrefs;
+    }
+    async transform(date, options) {
+        const { showEndOfTime, showTime, showSeconds, displayInUTC } = options || {};
+        if (date == null)
+            return '';
+        if (!DateTimeHelper.toDateTime(date).isValid || (!showEndOfTime && DateTimeHelper.isEndOfTime(date))) {
+            return '';
+        }
+        const { preference } = await lastValueFrom(this.userPrefs.getPreferences());
+        let formatString = preference?.dateFormat || 'MM/DD/YYYY';
+        if (showTime) {
+            let timeFormat = preference.timeFormat;
+            if (!showSeconds) {
+                timeFormat = timeFormat.replace(':ss', '');
+            }
+            formatString += ` ${timeFormat}`;
+        }
+        // Luxon's `ZZZZ` renders the short named offset (e.g. `EST`, `EDT`, `UTC`).
+        // The token passes through `momentToLuxonFormat` unchanged.
+        formatString += ' ZZZZ';
+        return DateTimeHelper.formatDate(date, formatString, !!displayInUTC);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, isStandalone: false, name: "dateDisplay3" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateDisplay3',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: UserPreferenceService }] });
+
 /**
  * Format a time to the user's preference for display
  */
@@ -12036,11 +12326,10 @@ class TimeDisplayPipe {
      * Format a time for display, accounting for user's display preferences.
      */
     transform(time, showSeconds) {
-        let display = '';
         let formatString = '';
         // use user-preferred formats
         this.userPreferenceService.getPreferences().subscribe(result => {
-            //if preferences exist then format time to users preference 
+            //if preferences exist then format time to users preference
             //otherwise use the last user preference
             if (result.preference) {
                 formatString = result.preference.timeFormat;
@@ -12050,8 +12339,7 @@ class TimeDisplayPipe {
                 this.lastFormatString = formatString;
             }
         });
-        display = moment(time).format(this.lastFormatString);
-        return display;
+        return DateTimeHelper.formatDate(time ?? null, this.lastFormatString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, isStandalone: false, name: "timeDisplay" }); }
@@ -12079,21 +12367,21 @@ class RelativeDatePipe {
      * If any of todayLabel, yesterdayLabel is supplied, use the supplied label.
      */
     transform(timeSelected, options) {
-        const selected = moment(timeSelected);
-        const today = moment();
-        const yesterday = moment().subtract(1, 'day');
+        const selected = DateTime.fromISO(timeSelected);
+        const today = DateTime.now();
+        const yesterday = today.minus({ days: 1 });
         const timeDisplay = options?.dateOnly ? `` : ` ${this.timeDisplayPipe.transform(timeSelected)}`;
         let displayValue = null;
         let prefixValue = '';
-        if (selected.isSame(today, 'day') && !options?.showTimeForToday) {
+        if (selected.hasSame(today, 'day') && !options?.showTimeForToday) {
             displayValue = this.translateService.instant(options?.todayLabel ? options?.todayLabel : 'today');
             prefixValue = options?.todayPrefix ?? '';
         }
-        else if (selected.isSame(today, 'day') && options?.showTimeForToday && !timeDisplay) {
+        else if (selected.hasSame(today, 'day') && options?.showTimeForToday && !timeDisplay) {
             displayValue = this.timeDisplayPipe.transform(timeSelected);
             prefixValue = options?.todayTimePrefix ?? '';
         }
-        else if (selected.isSame(yesterday, 'day')) {
+        else if (selected.hasSame(yesterday, 'day')) {
             displayValue = this.translateService.instant(options?.yesterdayLabel ? options?.yesterdayLabel : 'yesterday');
             prefixValue = options?.yesterdayPrefix ?? '';
         }
@@ -12123,13 +12411,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 class PageTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\n  <i\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\n  <i\n    class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n    aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-page-title', host: {
                         class: 'd-flex'
-                    }, standalone: false, template: "@if (titleIcon) {\n  <i\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>" }]
+                    }, standalone: false, template: "@if (titleIcon) {\n  <i\n    class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n    aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], titleIcon: [{
@@ -12731,6 +13019,7 @@ class ComponentsModule {
             DateInputComponent,
             KeyboardNavContainerDirective,
             DateDisplayPipe2,
+            DateDisplayPipe3,
             MultiselectComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -12803,7 +13092,8 @@ class ComponentsModule {
             CalendarComponent,
             DateInputComponent,
             KeyboardNavContainerDirective,
-            DateDisplayPipe2] }); }
+            DateDisplayPipe2,
+            DateDisplayPipe3] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, providers: [
             FormGroupHelper,
             DialogService,
@@ -12813,7 +13103,8 @@ class ComponentsModule {
             RowCountPipe,
             RelativeDatePipe,
             HighlightTextPipe,
-            DateDisplayPipe2
+            DateDisplayPipe2,
+            DateDisplayPipe3
         ], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -12899,6 +13190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         DateInputComponent,
                         KeyboardNavContainerDirective,
                         DateDisplayPipe2,
+                        DateDisplayPipe3,
                         MultiselectComponent
                     ],
                     imports: [
@@ -12920,7 +13212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         RowCountPipe,
                         RelativeDatePipe,
                         HighlightTextPipe,
-                        DateDisplayPipe2
+                        DateDisplayPipe2,
+                        DateDisplayPipe3
                     ],
                     exports: [
                         ButtonComponent,
@@ -12988,7 +13281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         CalendarComponent,
                         DateInputComponent,
                         KeyboardNavContainerDirective,
-                        DateDisplayPipe2
+                        DateDisplayPipe2,
+                        DateDisplayPipe3
                     ]
                 }]
         }] });
@@ -13984,5 +14278,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, 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 { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, 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 };
 //# sourceMappingURL=energycap-components.mjs.map