@energycap/components 0.42.0 → 0.42.1

package/fesm2022/energycap-components.mjs

@@ -1,15 +1,15 @@
-import * as i3$1 from '@angular/cdk/a11y';
+import * as i1$3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i1$3 from '@angular/cdk/scrolling';
+import * as i1$4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, HostBinding, Input, Output, ViewChild, Directive, Host, ChangeDetectionStrategy, Pipe, HostListener, Inject, ViewEncapsulation, ContentChild, ElementRef, TemplateRef, ContentChildren, ViewContainerRef, NgModule, Injector } from '@angular/core';
+import { Injectable, EventEmitter, Component, HostBinding, Input, Output, ViewChild, Directive, Host, Pipe, ChangeDetectionStrategy, HostListener, Inject, ViewEncapsulation, ContentChild, ElementRef, TemplateRef, ContentChildren, ViewContainerRef, NgModule, Injector } from '@angular/core';
 import * as i4 from '@angular/forms';
-import { Validators, UntypedFormControl, FormControlDirective, FormControl, UntypedFormGroup, UntypedFormArray, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Validators, UntypedFormControl, FormControlDirective, FormControl, FormGroup, UntypedFormGroup, UntypedFormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, convertToParamMap, NavigationStart, Router, RouterModule, ActivatedRoute } from '@angular/router';
 import * as i3 from '@ngx-translate/core';
@@ -455,65 +455,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['ecCopyTableButton']
             }] } });
 
-function isCalendarSelectionSingleDate(selection) {
-    return selection instanceof Date;
-}
-
-class CalendarItemComponent {
-    constructor() {
-        this.view = 'day';
-        this.today = false;
-        this.selected = false;
-        this.outsideActiveMonth = false;
-    }
-    ngOnChanges() {
-        if (this.view !== 'day') {
-            this.today = false;
-            this.outsideActiveMonth = false;
-        }
-        else {
-            this.today = moment(this.item?.date).isSame(moment(), 'day');
-            this.outsideActiveMonth = !moment(this.item?.date).isSame(this.activeDate, 'month');
-        }
-        this.selected = this.isSelected(this.item?.date, this.selection, this.view);
-    }
-    isSelected(date, selection, view) {
-        if (!date || !selection) {
-            return false;
-        }
-        if (isCalendarSelectionSingleDate(this.selection)) {
-            return moment(this.item?.date).isSame(this.selection, view);
-        }
-        else {
-            // TODO ECAP-26841: determine if the item is within the range selection
-            return false;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: { item: "item", activeDate: "activeDate", selection: "selection", view: "view" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth" } }, usesOnChanges: true, ngImport: i0, template: '{{item?.label}}', 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;background-color:transparent;line-height:1.125rem}: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{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--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,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[ec-calendar-item]', template: '{{item?.label}}', changeDetection: ChangeDetectionStrategy.OnPush, 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;background-color:transparent;line-height:1.125rem}: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{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--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,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }], activeDate: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], today: [{
-                type: HostBinding,
-                args: ['class.is-today']
-            }], selected: [{
-                type: HostBinding,
-                args: ['class.is-selected']
-            }], outsideActiveMonth: [{
-                type: HostBinding,
-                args: ['class.is-outside-active-month']
-            }] } });
-
 /**
  * Helper class that provides common date constants and helpful date functions
  */
@@ -626,6 +567,8 @@ class DateTimeHelper {
      * 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',
@@ -633,7 +576,13 @@ class DateTimeHelper {
         'MMM D, YYYY',
         'MMM DD, YYYY',
         'MMMM D, YYYY',
-        'MMMM DD, 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
@@ -733,257 +682,1169 @@ class DateTimeHelper {
     }
 }
 
+/**
+ * Contains the logic for selecting, formatting, and parsing date dates for a specific selection mode.
+ */
+class DateInputSelectionStrategyBase {
+    /** Parses the string into a date using the provided parse formats. */
+    parseString(value, parseFormats, opts) {
+        if (!value) {
+            return null;
+        }
+        const date = moment(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());
+            }
+            return date.toDate();
+        }
+        return null;
+    }
+    /** Returns a new selection for the provided date. */
+    getSelectionForQuickSelectDate(date, existingSelection) {
+        return this.getSelectionFromDate(date, existingSelection);
+    }
+    /** Returns the view for the primary calendar for the selection and selection mode */
+    getPrimaryCalendarView(selection, minDate, maxDate, currentView) {
+        let date;
+        // If we have a range, use the end date, defaulting to the start date or today
+        if (DateInput.isSelectionRange(selection)) {
+            date = selection.end || selection.start || new Date();
+            // If we have a single date, use it, defaulting to today
+        }
+        else {
+            date = selection || new Date();
+        }
+        // Ensure the date is within the min and max dates
+        date = date < minDate ? minDate : date;
+        date = date > maxDate ? maxDate : date;
+        // If the current calendar view mode is valid for the selection mode, use it, otherwise use the selection view mode
+        // This prevents the calendar from changing view modes as the user types/blurs the textboxes as long as the view mode is valid
+        const viewMode = this.validViewModes.includes(currentView.mode) ? currentView.mode : this.selectionViewMode;
+        return { mode: viewMode, date };
+    }
+    ;
+    /**
+     * Returns the view for the secondary calendar for the selection and selection mode.
+     * This is is only used by the range selection strategy. All others just return the current date.
+     */
+    getSecondaryCalendarView(selection, minDate, maxDate, currentView) {
+        return { mode: this.selectionViewMode, date: new Date() };
+    }
+    ;
+}
+
+/**
+ * Selection strategy for the 'day' selection mode.
+ */
+class DaySelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor(dateDisplayPipe) {
+        super();
+        this.dateDisplayPipe = dateDisplayPipe;
+        this.selectionViewMode = 'day';
+        this.validViewModes = ['day', 'month', 'year'];
+        this.showSecondaryTextbox = false;
+        this.showSecondaryCalendar = false;
+    }
+    formatSelection(selection) {
+        // If the selection is a single date, format it into the first textbox.
+        if (DateInput.isSelectionSingleDate(selection)) {
+            return { textbox: this.dateDisplayPipe.transform(selection, true), textbox2: null };
+            // Otherwise, clear both textboxes. This shouldn't happen based on current date input flows,
+            // and even if it did there's not really a good way to handle it.
+        }
+        else {
+            return { textbox: null, textbox2: null };
+        }
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        return this.parseString(value.textbox, parseFormats, opts);
+    }
+    getSelectionFromDate(date) {
+        // Nice and simple
+        return date;
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        // If the previous selection was a range, return the end date and default to the start date if there isn't one.
+        if (DateInput.isSelectionRange(previousSelection)) {
+            return previousSelection.end || previousSelection.start;
+            // If the previous selection was a single date, return it.
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            return previousSelection;
+        }
+        return null;
+    }
+    getNextSelection(selection) {
+        // Add a single day to the selection
+        if (DateInput.isSelectionSingleDate(selection)) {
+            return moment(selection).add(1, 'day').toDate();
+        }
+        // This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
+        return selection;
+    }
+    getPreviousSelection(selection) {
+        // Subtract a single day from the selection
+        if (DateInput.isSelectionSingleDate(selection)) {
+            return moment(selection).subtract(1, 'day').toDate();
+        }
+        // This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
+        return selection;
+    }
+}
+
+/**
+ * Selection strategy for the 'last 28 days' selection mode.
+ */
+class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor(rangeStrategy) {
+        super();
+        this.rangeStrategy = rangeStrategy;
+        this.selectionViewMode = 'day';
+        this.validViewModes = ['day', 'month', 'year'];
+        this.showSecondaryTextbox = true;
+        this.showSecondaryCalendar = false;
+    }
+    formatSelection(value) {
+        // Delegate to the range strategy for formatting since the logic is the same
+        return this.rangeStrategy.formatSelection(value);
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        let start = this.parseString(value.textbox, parseFormats, opts);
+        let end = this.parseString(value.textbox2, parseFormats, opts);
+        if (start && end) {
+            // Even if both dates are provided, it's possible that they don't match a 28-day range
+            // 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();
+            }
+            else {
+                end = moment(start).add(27, 'days').toDate();
+            }
+        }
+        // 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();
+        }
+        // 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();
+        }
+        if (!start && !end) {
+            return null;
+        }
+        else {
+            return { start, end };
+        }
+    }
+    getSelectionFromDate(date) {
+        return {
+            start: moment(date).subtract(27, 'days').toDate(),
+            end: date
+        };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // If the range only has a start date, make the 28-day range start on that date
+            if (!previousSelection.end && previousSelection.start) {
+                return {
+                    start: previousSelection.start,
+                    end: moment(previousSelection.start).add(27, 'days').toDate()
+                };
+                // If the range only has an end date, make the 28-day range end on that date
+            }
+            else if (previousSelection.end) {
+                return this.getSelectionFromDate(previousSelection.end);
+            }
+            // If the previous selection was a single date, make the range the 28 days ending on that date
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            return this.getSelectionFromDate(previousSelection);
+        }
+        return null;
+    }
+    getNextSelection(selection) {
+        // Move the selection to the next 28 days
+        if (DateInput.isSelectionRange(selection) && selection.end) {
+            return {
+                start: moment(selection.end).add(1, 'day').toDate(),
+                end: moment(selection.end).add(28, 'days').toDate()
+            };
+        }
+        // This shouldn't happen since the next stepper is disabled if the selection only has one date.
+        // Just return the selection as-is in this case.
+        return selection;
+    }
+    getPreviousSelection(selection) {
+        // Move the selection to the previous 28 days
+        if (DateInput.isSelectionRange(selection) && selection.start) {
+            return {
+                start: moment(selection.start).subtract(28, 'days').toDate(),
+                end: moment(selection.start).subtract(1, 'day').toDate()
+            };
+        }
+        // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
+        // Just return the selection as-is in this case.
+        return selection;
+    }
+}
+
+/**
+ * Selection strategy for the 'last 7 days' selection mode.
+ */
+class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor(rangeStrategy) {
+        super();
+        this.rangeStrategy = rangeStrategy;
+        this.selectionViewMode = 'day';
+        this.validViewModes = ['day', 'month', 'year'];
+        this.showSecondaryTextbox = true;
+        this.showSecondaryCalendar = false;
+    }
+    formatSelection(value) {
+        // Delegate to the range strategy for formatting since the logic is the same
+        return this.rangeStrategy.formatSelection(value);
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        let start = this.parseString(value.textbox, parseFormats, opts);
+        let end = this.parseString(value.textbox2, parseFormats, opts);
+        if (start && end) {
+            // Even if both dates are provided, it's possible that they don't match a 7-day range
+            // 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();
+            }
+            else {
+                end = moment(start).add(6, 'days').toDate();
+            }
+        }
+        // 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();
+        }
+        // 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();
+        }
+        if (!start && !end) {
+            return null;
+        }
+        else {
+            return { start, end };
+        }
+    }
+    getSelectionFromDate(date) {
+        // Base the selection on the given date, moving back 6 days
+        return {
+            start: moment(date).subtract(6, 'days').toDate(),
+            end: date
+        };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // If we don't have an end date, create the new selection based on the start date forwards
+            if (!previousSelection.end && previousSelection.start) {
+                return {
+                    start: previousSelection.start,
+                    end: moment(previousSelection.start).add(6, 'days').toDate()
+                };
+                // Otherwise, create the new selection based on the end date backwards
+            }
+            else if (previousSelection.end) {
+                return this.getSelectionFromDate(previousSelection.end);
+            }
+            // If we only have a single date, create the new selection based on that date backwards
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            return this.getSelectionFromDate(previousSelection);
+        }
+        return null;
+    }
+    getNextSelection(selection) {
+        // Shift the range forward by 7 days
+        if (DateInput.isSelectionRange(selection) && selection.end) {
+            return {
+                start: moment(selection.end).add(1, 'day').toDate(),
+                end: moment(selection.end).add(7, 'days').toDate()
+            };
+        }
+        // This shouldn't happen since the next stepper is disabled if the selection only has one date.
+        // Just return the selection as-is in this case.
+        return selection;
+    }
+    getPreviousSelection(selection) {
+        // Shift the range back 7 days
+        if (DateInput.isSelectionRange(selection) && selection.start) {
+            return {
+                start: moment(selection.start).subtract(7, 'days').toDate(),
+                end: moment(selection.start).subtract(1, 'day').toDate()
+            };
+        }
+        // This shouldn't happen since the previous stepper is disabled if the selection only has one date.
+        // Just return the selection as-is in this case.
+        return selection;
+    }
+}
+
+/**
+ * Selection strategy for the 'month' selection mode.
+ */
+class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor() {
+        super(...arguments);
+        this.selectionViewMode = 'month';
+        this.validViewModes = ['month', 'year'];
+        this.showSecondaryTextbox = false;
+        this.showSecondaryCalendar = false;
+    }
+    formatSelection(selection) {
+        if (!selection) {
+            return { textbox: null, textbox2: null };
+        }
+        // We only need one date in the range to format since it only spans one month
+        // 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'),
+            textbox2: null
+        };
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        // Only one textbox is used in this mode
+        const date = this.parseString(value.textbox, parseFormats, opts);
+        if (!date) {
+            return null;
+        }
+        return this.getSelectionFromDate(date);
+    }
+    getSelectionFromDate(date) {
+        return {
+            start: moment(date).startOf('month').toDate(),
+            end: moment(date).endOf('month').toDate()
+        };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // We'll use the existing selection's end date and fall back to the start date if it's not available
+            const date = previousSelection.end || previousSelection.start;
+            if (date) {
+                return this.getSelectionFromDate(date);
+            }
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            // If the previous selection was a single date, make the range that month
+            return this.getSelectionFromDate(previousSelection);
+        }
+        return null;
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+}
+
+/**
+ * Selection strategy for the 'month' selection mode.
+ */
+class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor() {
+        super(...arguments);
+        this.selectionViewMode = 'quarter';
+        this.validViewModes = ['quarter', 'year'];
+        this.showSecondaryTextbox = false;
+        this.showSecondaryCalendar = false;
+    }
+    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');
+            return {
+                textbox: `${start}–${end}, ${year}`,
+                textbox2: null
+            };
+        }
+        // This shouldn't happen since the selection should always be a range in quarter mode
+        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);
+        if (!date) {
+            return null;
+        }
+        return this.getSelectionFromDate(date);
+    }
+    getSelectionFromDate(date) {
+        return {
+            start: moment(date).startOf('quarter').toDate(),
+            end: moment(date).endOf('quarter').toDate()
+        };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // Base the quarter range off of the existing selection's end date, falling back to the start date
+            const date = previousSelection.end || previousSelection.start;
+            if (date) {
+                return this.getSelectionFromDate(date);
+            }
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            // If the previous selection was a single date, make the range that quarter
+            return this.getSelectionFromDate(previousSelection);
+        }
+        return null;
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+}
+
+/**
+ * Selection strategy for the 'range' selection mode.
+ */
+class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor() {
+        super(...arguments);
+        this.selectionViewMode = 'day';
+        this.validViewModes = ['day', 'month', 'year'];
+        this.showSecondaryTextbox = true;
+        this.showSecondaryCalendar = true;
+    }
+    formatSelection(selection) {
+        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
+        if (DateInput.isSelectionSingleDate(selection)) {
+            return { textbox: moment(selection).format('ll'), textbox2: null };
+        }
+        else {
+            const start = selection.start ? moment(selection.start).format('ll') : null;
+            const end = selection.end ? moment(selection.end).format('ll') : null;
+            return { textbox: start, textbox2: end };
+        }
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        let start = this.parseString(value.textbox, parseFormats, opts);
+        let end = this.parseString(value.textbox2, parseFormats, opts);
+        // If the start date is after the end date, we need to clear out the invalid date. This is different from the last 7/28 days strategies
+        // 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 (opts?.parseFromEnd) {
+                start = null;
+            }
+            else {
+                end = null;
+            }
+        }
+        if (!start && !end) {
+            return null;
+        }
+        else {
+            return { start, end };
+        }
+    }
+    getSelectionFromDate(date, existingSelection) {
+        if (DateInput.isSelectionRange(existingSelection)) {
+            const { start, end } = existingSelection;
+            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 };
+            }
+            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 };
+            }
+        }
+        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 };
+        }
+        // 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 };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // If we have a range, just return it as is. We don't have a fixed range to adjust the dates to.
+            // Even if it's incomplete, the user will still be able to select the remaining date.
+            return previousSelection;
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            // If we have a single date selection, use it as the start date for the new one.
+            return { start: previousSelection, end: null };
+        }
+        return null;
+    }
+    getSelectionForQuickSelectDate(date, existingSelection) {
+        // 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');
+            return {
+                start: moment(date).subtract(length, 'days').toDate(),
+                end: date
+            };
+        }
+        // If we only have a single date, we'll use the date provided as the end date.
+        // The user will be able to select the start date.
+        return { start: null, end: date };
+    }
+    getNextSelection(selection) {
+        // 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');
+            return {
+                start: moment(selection.end).add(1, 'days').toDate(),
+                end: moment(selection.end).add(1 + length, 'days').toDate()
+            };
+        }
+        // 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.
+        return selection;
+    }
+    getPreviousSelection(selection) {
+        // 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');
+            return {
+                start: moment(selection.start).subtract(1 + length, 'days').toDate(),
+                end: moment(selection.start).subtract(1, 'days').toDate()
+            };
+        }
+        // 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.
+        return selection;
+    }
+    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;
+            // 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')) {
+                    viewDate = minDate;
+                    // If the start is after the max date, shift the view to the max date.
+                }
+                else if (start.isSameOrAfter(maxDate, '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();
+                }
+                else {
+                    viewDate = start.toDate();
+                }
+            }
+            else if (end && end.isSameOrBefore(minDate, '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')) {
+                // 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();
+            }
+            else {
+                // Otherwise, show the current month.
+                viewDate = new Date();
+            }
+        }
+        else {
+            viewDate = selection || new Date();
+        }
+        // If the current calendar view mode is valid for the selection mode, use it, otherwise use the selection view mode
+        // This prevents the calendar from changing view modes as the user types/blurs the textboxes as long as the view mode is valid
+        const viewMode = this.validViewModes.includes(currentView.mode) ? currentView.mode : this.selectionViewMode;
+        return { mode: viewMode, date: viewDate };
+    }
+    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;
+            // The secondary calendar is primarily concerned with the end date in the selection.
+            if (end) {
+                if (end.isAfter(maxDate, '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')) {
+                    // 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();
+                }
+                else {
+                    // Otherwise, show the end date month.
+                    viewDate = end.toDate();
+                }
+            }
+            else if (start && start.isSameOrAfter(maxDate, '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')) {
+                // 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();
+            }
+            else {
+                // Otherwise, show the current month.
+                viewDate = new Date();
+            }
+        }
+        else {
+            viewDate = selection || new Date();
+        }
+        // If the current calendar view mode is valid for the selection mode, use it, otherwise use the selection view mode
+        // This prevents the calendar from changing view modes as the user types/blurs the textboxes as long as the view mode is valid
+        const viewMode = this.validViewModes.includes(currentView.mode) ? currentView.mode : this.selectionViewMode;
+        return { mode: viewMode, date: viewDate };
+    }
+}
+
+/**
+ * Selection strategy for the 'year' selection mode.
+ */
+class YearSelectionStrategy extends DateInputSelectionStrategyBase {
+    constructor() {
+        super(...arguments);
+        this.selectionViewMode = 'year';
+        this.validViewModes = ['year'];
+        this.showSecondaryTextbox = false;
+        this.showSecondaryCalendar = false;
+    }
+    formatSelection(selection) {
+        if (!selection) {
+            return { textbox: null, textbox2: null };
+        }
+        // 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 };
+    }
+    parseString(value, parseFormats, opts) {
+        // 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);
+    }
+    parseTextboxValues(value, parseFormats, opts) {
+        // Only a single textbox is used in year mode
+        const date = this.parseString(value.textbox, parseFormats, opts);
+        if (!date) {
+            return null;
+        }
+        return this.getSelectionFromDate(date);
+    }
+    getSelectionFromDate(date) {
+        return {
+            start: moment(date).startOf('year').toDate(),
+            end: moment(date).endOf('year').toDate()
+        };
+    }
+    getNewSelectionFromExisting(previousSelection) {
+        if (DateInput.isSelectionRange(previousSelection)) {
+            // Base the year range off of the existing selection's end date, falling back to the start date
+            const date = previousSelection.end || previousSelection.start;
+            if (date) {
+                return this.getSelectionFromDate(date);
+            }
+        }
+        else if (DateInput.isSelectionSingleDate(previousSelection)) {
+            // If the previous selection was a single date, make the range that year
+            return this.getSelectionFromDate(previousSelection);
+        }
+        return null;
+    }
+    getSelectionForQuickSelectDate(date) {
+        return this.getSelectionFromDate(date);
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+    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());
+        }
+        // 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.
+        return selection;
+    }
+}
+
+class UserPreferenceService {
+    getPreferences() {
+        return of({ preference: { dateFormat: 'MM/DD/YYYY', timeFormat: 'h:mm:ss a' } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Format a date to the user's preference for display
+ */
+class DateDisplayPipe {
+    constructor(userPreferenceService) {
+        this.userPreferenceService = userPreferenceService;
+        this.lastFormatString = 'MM/DD/YYYY';
+    }
+    /**
+     * Format a date for display, accounting for user's display preferences.
+     *
+     * If {@see date} is null or undefined, or the end of time, returns empty string
+     */
+    transform(date, showEndOfTime, showTime, showSeconds) {
+        let display = '';
+        let formatString = '';
+        if (date && moment(date).isValid() && (showEndOfTime || !DateTimeHelper.isEndOfTime(date))) {
+            // use user-preferred formats
+            this.userPreferenceService.getPreferences().subscribe(result => {
+                //if preferences exist then format date to users preference 
+                //otherwise use the last user preference
+                if (result.preference) {
+                    formatString = result.preference.dateFormat;
+                    if (showTime) {
+                        let timeFormat = result.preference.timeFormat;
+                        if (!showSeconds) {
+                            timeFormat = timeFormat.replace(':ss', '');
+                        }
+                        formatString += ` ${timeFormat}`;
+                    }
+                    this.lastFormatString = formatString;
+                }
+            });
+            display = moment(date).format(this.lastFormatString);
+        }
+        return display;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, name: "dateDisplay" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'dateDisplay' }]
+        }], ctorParameters: () => [{ type: UserPreferenceService }] });
+
+var DateInput;
+(function (DateInput) {
+    function isSelectionSingleDate(selection) {
+        return selection instanceof Date;
+    }
+    DateInput.isSelectionSingleDate = isSelectionSingleDate;
+    function isSelectionRange(selection) {
+        return !!selection && !isSelectionSingleDate(selection);
+    }
+    DateInput.isSelectionRange = isSelectionRange;
+    class SelectionStrategies {
+        constructor(dateDisplayPipe) {
+            this.dateDisplayPipe = dateDisplayPipe;
+            this._range = new RangeSelectionStrategy();
+            this._day = new DaySelectionStrategy(this.dateDisplayPipe);
+            this._last7Days = new Last7DaysSelectionStrategy(this._range);
+            this._last28Days = new Last28DaysSelectionStrategy(this._range);
+            this._month = new MonthSelectionStrategy();
+            this._quarter = new QuarterSelectionStrategy();
+            this._year = new YearSelectionStrategy();
+        }
+        get range() { return this._range; }
+        get day() { return this._day; }
+        get last7Days() { return this._last7Days; }
+        get last28Days() { return this._last28Days; }
+        get month() { return this._month; }
+        get quarter() { return this._quarter; }
+        get year() { return this._year; }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionStrategies, deps: [{ token: DateDisplayPipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+        static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionStrategies }); }
+    }
+    DateInput.SelectionStrategies = SelectionStrategies;
+})(DateInput || (DateInput = {}));
+
+class CalendarItemComponent {
+    get disabled() {
+        return this.hidden || undefined;
+    }
+    constructor() {
+        this.view = { mode: 'day', date: new Date() };
+        this.minDate = DateTimeHelper.minDatePickerDate;
+        this.maxDate = DateTimeHelper.maxDatePickerDate;
+        this.today = false;
+        this.selected = false;
+        this.outsideActiveMonth = false;
+        this.hidden = false;
+    }
+    ngOnChanges() {
+        if (this.view.mode !== 'day') {
+            this.today = false;
+            this.outsideActiveMonth = false;
+        }
+        else {
+            this.today = moment(this.item?.date).isSame(moment(), 'day');
+            this.outsideActiveMonth = !moment(this.item?.date).isSame(this.view.date, 'month');
+        }
+        if (this.item?.date) {
+            this.hidden = this.isHidden(this.item.date, this.minDate, this.maxDate, this.view.mode);
+        }
+        else {
+            this.hidden = true;
+        }
+        this.selected = this.isSelected(this.item?.date, this.selection, this.view.mode);
+    }
+    isSelected(date, selection, view) {
+        if (!date || !selection) {
+            return false;
+        }
+        if (DateInput.isSelectionSingleDate(selection)) {
+            return moment(date).isSame(selection, view);
+        }
+        else {
+            if (selection.start && !selection.end) {
+                return moment(date).isSame(selection.start, view);
+            }
+            else if (!selection.start && selection.end) {
+                return moment(date).isSame(selection.end, view);
+            }
+            else if (selection.start && selection.end) {
+                return moment(date).isBetween(selection.start, selection.end, view, '[]');
+            }
+        }
+        return false;
+    }
+    isHidden(date, minDate, maxDate, view) {
+        return moment(date).isBefore(minDate, view) || moment(date).isAfter(maxDate, view);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarItemComponent, 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;background-color:transparent;line-height:1.125rem}: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{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.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[ec-calendar-item]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, 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;background-color:transparent;line-height:1.125rem}: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{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.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], today: [{
+                type: HostBinding,
+                args: ['class.is-today']
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.is-selected']
+            }], outsideActiveMonth: [{
+                type: HostBinding,
+                args: ['class.is-outside-active-month']
+            }], hidden: [{
+                type: HostBinding,
+                args: ['class.is-hidden']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
 class CalendarComponent {
     constructor() {
         this.id = 'calendar';
         this.selection = null;
-        this.selectionChange = new EventEmitter();
+        this.selectionMode = 'day';
         this.minDate = DateTimeHelper.minDatePickerDate;
         this.maxDate = DateTimeHelper.maxDatePickerDate;
-        this.focusOutStart = new EventEmitter();
-        this.focusOutEnd = new EventEmitter();
-        /** Array of calendar items to display in the calendar grid. */
+        this.dateSelected = new EventEmitter();
+        /** Determines the current view of the calendar. */
+        this.view = { mode: 'day', date: new Date() };
+        this.viewChange = new EventEmitter();
+        /** Array of calendar item rows to display in the calendar. */
         this.calendarItems = [];
-        /** Determines the current view mode of the calendar. */
-        this.view = 'day';
-        /** TrackBy function for the calendar items. This avoids re-drawing calendar items if a date is shared between view updates */
-        this.calendarItemTrackByDate = (index, item) => item.date.toISOString();
+        /** Weekday labels to show at the top of the calendar in day view. */
+        this.weekDays = moment.weekdaysShort().map(d => d.slice(0, 1));
         this.disablePreviousButton = false;
         this.disableNextButton = false;
-        // By default, the active date is today.
-        // This is replaced with the date of the selection if one is provided on init.
-        this.activeDate = new Date();
-        // Using moment here to get the weekday labels so they are localized.
-        this.weekDays = moment.weekdaysShort().map(d => d.slice(0, 1));
+        // Trackby functions for ngFor loops. These reduce the number of DOM elements that need to be updated when the calendar is re-drawn.
+        // Without these there are some change-detection issues on the first-time rendering of the calendar.
+        this.trackByDateRow = (index, row) => `${row[0].date.toISOString()}-${row[row.length - 1].date.toISOString()}`;
+        this.trackByDate = (index, item) => item.date.toISOString();
     }
     ngOnChanges(changes) {
-        if (changes.selection && this.selection) {
-            // Only need to update the view if the selection is out of view.
-            if (isCalendarSelectionSingleDate(this.selection) &&
-                !this.isDateInView(this.selection) &&
-                moment(this.selection).isBetween(this.minDate, this.maxDate, 'day', '[]')) {
-                this.drawCalendar('day', this.selection);
-            }
-            else {
-                // TODO ECAP-26841: determine the active date for a range selection and draw the calendar
-            }
+        if (changes.view) {
+            this.drawCalendar(this.view);
+        }
+        if (changes.minDate || changes.maxDate) {
+            this.updateNextPreviousStates();
         }
     }
     ngOnInit() {
         if (!this.calendarItems.length) {
-            this.drawCalendar('day');
-        }
-    }
-    onItemSelected(item) {
-        if (this.view === 'day') {
-            this.selection = item.date;
-            this.selectionChange.emit(this.selection);
-        }
-        if (this.view === 'month') {
-            this.drawCalendar('day', item.date);
-        }
-        if (this.view === 'year') {
-            this.drawCalendar('month', item.date);
+            this.drawCalendar(this.view);
         }
     }
     onNextClick() {
         // If we're in day view, we're incrementing by month
-        // In both month and year views we're incrementing by year
-        // In year view, we're moving by 16 years at a time
-        const unit = this.view === 'day' ? 'month' : 'year';
+        // In month, quarter, and year views we're incrementing by year\
+        const unit = this.view.mode === 'day' ? 'month' : 'year';
         // 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 === 'year' ? 16 : 1;
-        const goToDate = moment(this.activeDate).add(count, unit).toDate();
-        this.drawCalendar(this.view, goToDate);
+        const count = this.view.mode === 'year' ? 16 : 1;
+        const goToDate = moment(this.view.date).add(count, unit).toDate();
+        this.drawCalendar({ mode: this.view.mode, date: goToDate });
     }
     onPreviousClick() {
         // If we're in day view, we're incrementing by month
-        // In both month and year views we're incrementing years
-        const unit = this.view === 'day' ? 'month' : 'year';
+        // In month, quarter, and year views we're incrementing by year
+        const unit = this.view.mode === 'day' ? 'month' : 'year';
         // 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 === 'year' ? 16 : 1;
-        const goToDate = moment(this.activeDate).subtract(count, unit).toDate();
-        this.drawCalendar(this.view, goToDate);
+        const count = this.view.mode === 'year' ? 16 : 1;
+        const goToDate = moment(this.view.date).subtract(count, unit).toDate();
+        this.drawCalendar({ mode: this.view.mode, date: goToDate });
     }
     /** Switches the calendar to month view. */
     onMonthClick() {
-        this.drawCalendar('month');
+        this.drawCalendar({ mode: 'month', date: this.view.date });
     }
     /** Switches the calendar to year view. */
     onYearClick() {
-        this.drawCalendar('year');
-    }
-    onFirstItemKeydown(event) {
-        // If the user is tabbing backwards from the first item, emit the focusOutStart event.
-        if (event.key === 'Tab' && event.shiftKey) {
-            this.focusOutStart.emit(event);
-        }
+        this.drawCalendar({ mode: 'year', date: this.view.date });
     }
-    onLastItemKeydown(event) {
-        // If the user is tabbing forwards from the last item, emit the focusOutEnd event.
-        if (event.key === 'Tab' && !event.shiftKey) {
-            this.focusOutEnd.emit(event);
+    onItemSelected(item) {
+        switch (this.view.mode) {
+            case 'day':
+                this.onDaySelected(item);
+                break;
+            case 'month':
+                this.onMonthSelected(item);
+                break;
+            case 'quarter':
+                this.onQuarterSelected(item);
+                break;
+            case 'year':
+                this.onYearSelected(item);
+                break;
         }
     }
-    drawCalendar(view, goTo) {
-        // If a goTo date is provided, update the active date so we know what to increment on next/previous clicks.
-        if (goTo) {
-            this.activeDate = goTo;
+    onYearSelected(item) {
+        // If in year selection mode, emit the calendar item so the date picker can update the selection.
+        if (this.selectionMode === 'year') {
+            this.dateSelected.emit(item.date);
+            // If we're in quarter selection mode, draw the quarter view.
         }
-        this.month = moment(this.activeDate).format('MMM');
-        this.year = moment(this.activeDate).format('YYYY');
-        this.view = view;
-        this.calendarItems = this.getCalendarItems(view, this.activeDate);
-        const startYear = this.calendarItems[0].date < this.minDate ? this.minDate : this.calendarItems[0].date;
-        const endYear = this.calendarItems[this.calendarItems.length - 1].date > this.maxDate ? this.maxDate : this.calendarItems[this.calendarItems.length - 1].date;
-        this.yearRange = `${moment(startYear).format('YYYY')}&ndash;${moment(endYear).format('YYYY')}`;
-        // If the active date is less than the min date or the min date is in view, disable the previous button.
-        if (this.activeDate < this.minDate || this.isDateInView(this.minDate)) {
-            this.disablePreviousButton = true;
+        else if (this.selectionMode === 'quarter') {
+            this.drawCalendar({ mode: 'quarter', date: item.date });
+            // All other selection modes should zoom in to the month view when a year is selected.
         }
         else {
-            this.disablePreviousButton = false;
+            this.drawCalendar({ mode: 'month', date: item.date });
         }
-        // If the active date is greater than the max date or the max date is in view, disable the next button.
-        if (this.activeDate > this.maxDate || this.isDateInView(this.maxDate)) {
-            this.disableNextButton = true;
+    }
+    onQuarterSelected(item) {
+        // Quarter view is only accessible when in quarter selection mode,
+        // so there's no other views to draw from here. Just emit the selected item.
+        this.dateSelected.emit(item.date);
+    }
+    onMonthSelected(item) {
+        // When in month selection mode, emit the selected month item and don't change the view.
+        if (this.selectionMode === 'month') {
+            this.dateSelected.emit(item.date);
+            // Month view is only accessible from day, last7days, last28days, month, and range selection modes.
+            // If we're not in month selection mode, we need to zoom in to the day view.
         }
         else {
-            this.disableNextButton = false;
+            this.drawCalendar({ mode: 'day', date: item.date });
+        }
+    }
+    onDaySelected(item) {
+        // No further views other than day mode. Just emit the selected item.
+        this.dateSelected.emit(item.date);
+    }
+    drawCalendar(view) {
+        // If the view has changed, emit the new view.
+        if (view.date !== this.view.date || view.mode !== this.view.mode) {
+            this.view = view;
+            this.viewChange.emit(view);
         }
+        this.month = moment(this.view.date).format('MMM');
+        this.year = moment(this.view.date).format('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.updateNextPreviousStates();
     }
-    getCalendarItems(view, activeDate) {
-        switch (view) {
-            case 'day': return this.getDayViewItems(activeDate);
-            case 'month': return this.getMonthViewItems(activeDate);
-            case 'year': return this.getYearViewItems(activeDate);
+    getCalendarItems(view) {
+        switch (view.mode) {
+            case 'day': return this.getDayViewItems(view.date);
+            case 'month': return this.getMonthViewItems(view.date);
+            case 'quarter': return this.getQuarterViewItems(view.date);
+            case 'year': return this.getYearViewItems(view.date);
         }
     }
     getDayViewItems(activeDate) {
         // 6 rows of 7 days = 42 days
-        return range(0, 42).map(i => {
-            // 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(i, 'day');
-            return {
-                date: date.toDate(),
-                label: date.format('D')
-            };
+        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');
+                return {
+                    date: date.toDate(),
+                    label: date.format('D')
+                };
+            });
         });
     }
     getMonthViewItems(activeDate) {
-        return range(0, 12).map(i => {
-            const date = moment(activeDate).startOf('year').add(i, 'month');
-            return {
-                date: date.toDate(),
-                label: date.format('MMM')
-            };
+        // 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');
+                return {
+                    date: date.toDate(),
+                    label: date.format('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');
+                return {
+                    date: date.toDate(),
+                    label: `${date.format('MMM')}&ndash;${endDate.format('MMM')}`
+                };
+            });
         });
     }
     getYearViewItems(activeDate) {
-        // 4x4 grid of years = 16 years
-        return range(0, 16).map(i => {
-            // Put the current active year at the beginning of the 3rd row.
-            const date = moment(activeDate).startOf('year').subtract(8, 'year').add(i, 'year');
-            return {
-                date: date.toDate(),
-                label: date.format('YYYY')
-            };
+        // 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');
+                return {
+                    date: date.toDate(),
+                    label: date.format('YYYY')
+                };
+            });
         });
     }
-    /** Returns true if the date is within the current calendar view */
-    isDateInView(date) {
-        if (!this.calendarItems.length) {
-            return false;
+    updateNextPreviousStates() {
+        // We change the granularity of the min and max date checks based on the current view mode.
+        // 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';
+        // 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;
+        }
+        // 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;
         }
-        const viewStart = this.calendarItems[0].date;
-        const viewEnd = this.calendarItems[this.calendarItems.length - 1].date;
-        return date >= viewStart && date <= viewEnd;
+        else {
+            this.disableNextButton = false;
+        }
+    }
+    getLastItem() {
+        const lastRow = this.calendarItems[this.calendarItems.length - 1];
+        return lastRow[lastRow.length - 1];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionChange: "selectionChange", focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mb-2\">\r\n  <button id=\"{{id}}_prev_button\"\r\n          class=\"mr-auto\"\r\n          (click)=\"onPreviousClick()\"\r\n          (keydown)=\"!disablePreviousButton ? onFirstItemKeydown($event) : undefined\"\r\n          [disabled]=\"disablePreviousButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  <button *ngIf=\"view === 'day'\"\r\n          id=\"{{id}}_month_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onMonthClick()\"\r\n          (keydown)=\"disablePreviousButton ? onFirstItemKeydown($event) : undefined\">\r\n    {{month}}\r\n  </button>\r\n\r\n  <button *ngIf=\"view !== 'year'\"\r\n          id=\"{{id}}_year_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onYearClick()\"\r\n          (keydown)=\"disablePreviousButton && view !== 'day' ? onFirstItemKeydown($event) : undefined\">\r\n    {{year}}\r\n  </button>\r\n\r\n  <div id=\"{{id}}_year_range\"\r\n       *ngIf=\"view === 'year'\"\r\n       class=\"text-body-1 font-weight-bold\"\r\n       [innerHTML]=\"yearRange\">\r\n  </div>\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n          class=\"ml-auto\"\r\n          (click)=\"onNextClick()\"\r\n          [disabled]=\"disableNextButton\"\r\n          (keydown)=\"disablePreviousButton && view === 'year' ? onFirstItemKeydown($event) : undefined\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n  <ng-container *ngIf=\"view === 'day'\">\r\n    <li *ngFor=\"let day of weekDays\"\r\n        class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n      {{day}}\r\n    </li>\r\n  </ng-container>\r\n\r\n  <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n    <button id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n            ec-calendar-item\r\n            [item]=\"item\"\r\n            [activeDate]=\"activeDate\"\r\n            [selection]=\"selection\"\r\n            [view]=\"view\"\r\n            (click)=\"onItemSelected(item)\"\r\n            (keydown)=\"isLast ? onLastItemKeydown($event) : undefined\"\r\n            [hidden]=\"item.date < minDate || item.date > maxDate\">\r\n    </button>\r\n  </li>\r\n</ul>", styles: [":host{display:inline-block}button{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;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button: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}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul{list-style:none;padding:0;margin:0;display:grid;align-items:stretch;justify-items:stretch}button[ec-calendar-item]{height:100%;width:100%}ul.day-view{grid-template-columns:repeat(7,2rem);grid-auto-rows:1.75rem;row-gap:.25rem}ul.month-view{grid-template-columns:repeat(3,4.67rem);grid-auto-rows:3.25rem;row-gap:.25rem}ul.year-view{grid-template-columns:repeat(4,3.5rem);grid-auto-rows:3.25rem;row-gap:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "activeDate", "selection", "view"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n  <button id=\"{{id}}_prev_button\"\r\n          class=\"mr-auto\"\r\n          (click)=\"onPreviousClick()\"\r\n          [disabled]=\"disablePreviousButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  <button *ngIf=\"view.mode === 'day'\"\r\n          id=\"{{id}}_month_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onMonthClick()\">\r\n    {{month}}\r\n  </button>\r\n\r\n  <button *ngIf=\"view.mode !== 'year'\"\r\n          id=\"{{id}}_year_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onYearClick()\">\r\n    {{year}}\r\n  </button>\r\n\r\n  <div id=\"{{id}}_year_range\"\r\n       *ngIf=\"view.mode === 'year'\"\r\n       class=\"text-body-1 font-weight-bold\"\r\n       [innerHTML]=\"yearRange\">\r\n  </div>\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n          class=\"ml-auto\"\r\n          (click)=\"onNextClick()\"\r\n          [disabled]=\"disableNextButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n     class=\"mb-1 px-2 d-flex\">\r\n  <h3 *ngFor=\"let day of weekDays\"\r\n      class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n     class=\"px-2 d-flex {{view.mode}}-view\"\r\n     [class.mb-1]=\"!isLast\"\r\n     [class.mb-2]=\"isLast\">\r\n  <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n          id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n          ec-calendar-item\r\n          [item]=\"item\"\r\n          [selection]=\"selection\"\r\n          [view]=\"view\"\r\n          (click)=\"onItemSelected(item)\"\r\n          [innerHTML]=\"item.label\"\r\n          [minDate]=\"minDate\"\r\n          [maxDate]=\"maxDate\">\r\n  </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{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;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button: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}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mb-2\">\r\n  <button id=\"{{id}}_prev_button\"\r\n          class=\"mr-auto\"\r\n          (click)=\"onPreviousClick()\"\r\n          (keydown)=\"!disablePreviousButton ? onFirstItemKeydown($event) : undefined\"\r\n          [disabled]=\"disablePreviousButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  <button *ngIf=\"view === 'day'\"\r\n          id=\"{{id}}_month_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onMonthClick()\"\r\n          (keydown)=\"disablePreviousButton ? onFirstItemKeydown($event) : undefined\">\r\n    {{month}}\r\n  </button>\r\n\r\n  <button *ngIf=\"view !== 'year'\"\r\n          id=\"{{id}}_year_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onYearClick()\"\r\n          (keydown)=\"disablePreviousButton && view !== 'day' ? onFirstItemKeydown($event) : undefined\">\r\n    {{year}}\r\n  </button>\r\n\r\n  <div id=\"{{id}}_year_range\"\r\n       *ngIf=\"view === 'year'\"\r\n       class=\"text-body-1 font-weight-bold\"\r\n       [innerHTML]=\"yearRange\">\r\n  </div>\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n          class=\"ml-auto\"\r\n          (click)=\"onNextClick()\"\r\n          [disabled]=\"disableNextButton\"\r\n          (keydown)=\"disablePreviousButton && view === 'year' ? onFirstItemKeydown($event) : undefined\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n  <ng-container *ngIf=\"view === 'day'\">\r\n    <li *ngFor=\"let day of weekDays\"\r\n        class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n      {{day}}\r\n    </li>\r\n  </ng-container>\r\n\r\n  <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n    <button id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n            ec-calendar-item\r\n            [item]=\"item\"\r\n            [activeDate]=\"activeDate\"\r\n            [selection]=\"selection\"\r\n            [view]=\"view\"\r\n            (click)=\"onItemSelected(item)\"\r\n            (keydown)=\"isLast ? onLastItemKeydown($event) : undefined\"\r\n            [hidden]=\"item.date < minDate || item.date > maxDate\">\r\n    </button>\r\n  </li>\r\n</ul>", styles: [":host{display:inline-block}button{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;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button: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}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul{list-style:none;padding:0;margin:0;display:grid;align-items:stretch;justify-items:stretch}button[ec-calendar-item]{height:100%;width:100%}ul.day-view{grid-template-columns:repeat(7,2rem);grid-auto-rows:1.75rem;row-gap:.25rem}ul.month-view{grid-template-columns:repeat(3,4.67rem);grid-auto-rows:3.25rem;row-gap:.25rem}ul.year-view{grid-template-columns:repeat(4,3.5rem);grid-auto-rows:3.25rem;row-gap:.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
+            args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n  <button id=\"{{id}}_prev_button\"\r\n          class=\"mr-auto\"\r\n          (click)=\"onPreviousClick()\"\r\n          [disabled]=\"disablePreviousButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  <button *ngIf=\"view.mode === 'day'\"\r\n          id=\"{{id}}_month_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onMonthClick()\">\r\n    {{month}}\r\n  </button>\r\n\r\n  <button *ngIf=\"view.mode !== 'year'\"\r\n          id=\"{{id}}_year_button\"\r\n          class=\"text-body-1 font-weight-bold\"\r\n          (click)=\"onYearClick()\">\r\n    {{year}}\r\n  </button>\r\n\r\n  <div id=\"{{id}}_year_range\"\r\n       *ngIf=\"view.mode === 'year'\"\r\n       class=\"text-body-1 font-weight-bold\"\r\n       [innerHTML]=\"yearRange\">\r\n  </div>\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n          class=\"ml-auto\"\r\n          (click)=\"onNextClick()\"\r\n          [disabled]=\"disableNextButton\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n     class=\"mb-1 px-2 d-flex\">\r\n  <h3 *ngFor=\"let day of weekDays\"\r\n      class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n     class=\"px-2 d-flex {{view.mode}}-view\"\r\n     [class.mb-1]=\"!isLast\"\r\n     [class.mb-2]=\"isLast\">\r\n  <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n          id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n          ec-calendar-item\r\n          [item]=\"item\"\r\n          [selection]=\"selection\"\r\n          [view]=\"view\"\r\n          (click)=\"onItemSelected(item)\"\r\n          [innerHTML]=\"item.label\"\r\n          [minDate]=\"minDate\"\r\n          [maxDate]=\"maxDate\">\r\n  </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{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;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button: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}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
+        }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
                 type: Input
             }], selection: [{
                 type: Input
-            }], selectionChange: [{
-                type: Output
+            }], selectionMode: [{
+                type: Input
             }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], focusOutStart: [{
+            }], dateSelected: [{
                 type: Output
-            }], focusOutEnd: [{
+            }], view: [{
+                type: Input
+            }], viewChange: [{
                 type: Output
             }] } });
 
-class UserPreferenceService {
-    getPreferences() {
-        return of({ preference: { dateFormat: 'MM/DD/YYYY', timeFormat: 'h:mm:ss a' } });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserPreferenceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * Format a date to the user's preference for display
- */
-class DateDisplayPipe {
-    constructor(userPreferenceService) {
-        this.userPreferenceService = userPreferenceService;
-        this.lastFormatString = 'MM/DD/YYYY';
-    }
-    /**
-     * Format a date for display, accounting for user's display preferences.
-     *
-     * If {@see date} is null or undefined, or the end of time, returns empty string
-     */
-    transform(date, showEndOfTime, showTime, showSeconds) {
-        let display = '';
-        let formatString = '';
-        if (date && moment(date).isValid() && (showEndOfTime || !DateTimeHelper.isEndOfTime(date))) {
-            // use user-preferred formats
-            this.userPreferenceService.getPreferences().subscribe(result => {
-                //if preferences exist then format date to users preference 
-                //otherwise use the last user preference
-                if (result.preference) {
-                    formatString = result.preference.dateFormat;
-                    if (showTime) {
-                        let timeFormat = result.preference.timeFormat;
-                        if (!showSeconds) {
-                            timeFormat = timeFormat.replace(':ss', '');
-                        }
-                        formatString += ` ${timeFormat}`;
-                    }
-                    this.lastFormatString = formatString;
-                }
-            });
-            display = moment(date).format(this.lastFormatString);
-        }
-        return display;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, name: "dateDisplay" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateDisplayPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'dateDisplay' }]
-        }], ctorParameters: () => [{ type: UserPreferenceService }] });
-
 /**
  * "Weak Type" describing interpolation parameters for NumericBox
  */
@@ -3906,6 +4767,9 @@ class FormControlComponent {
     ;
     get disabled() { return this._formModel?.disabled == true; }
     ;
+    get _formModel() {
+        return this.formModelInput || this.formControlDirective;
+    }
     constructor(el) {
         this.el = el;
         this.id = '';
@@ -3915,15 +4779,8 @@ class FormControlComponent {
         this.required = false;
         this.readonly = false;
         this.actionClicked = new EventEmitter();
-        this.actionKeydown = new EventEmitter();
-    }
-    ngOnChanges(changes) {
-        if (changes.formModelInput) {
-            this._formModel = this.formModelInput || this.formControlDirective;
-        }
     }
     ngAfterViewInit() {
-        this._formModel = this.formModelInput || this.formControlDirective;
         if (!this._formModel) {
             console.error('Missing [formModel] input or [formControl] directive on ec-form-control content.');
         }
@@ -3945,11 +4802,11 @@ class FormControlComponent {
         this._formModel?.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormControlComponent, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked", actionKeydown: "actionKeydown" }, host: { listeners: { "click": "onClick()" }, properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n<button *ngIf=\"showClear\"\r\n        id=\"{{id + '_clear'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-clear\"\r\n        (click)=\"clear()\">\r\n  <i class=\"ec-icon icon-cancel\"></i>\r\n</button>\r\n<button *ngIf=\"actionIcon\"\r\n        id=\"{{id + '_action'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-action\"\r\n        (click)=\"actionClicked.emit($event)\"\r\n        (keydown)=\"actionKeydown.emit($event)\">\r\n  <i class=\"ec-icon {{actionIcon}}\"></i>\r\n</button>\r\n<div class=\"ec-focus-ring\"></div>", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border-radius:var(--ec-border-radius);display:flex;cursor:pointer;flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormControlComponent, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked" }, host: { listeners: { "click": "onClick()" }, properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n<button *ngIf=\"showClear\"\r\n        id=\"{{id + '_clear'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-clear\"\r\n        (click)=\"clear()\">\r\n  <i class=\"ec-icon icon-cancel\"></i>\r\n</button>\r\n<button *ngIf=\"actionIcon\"\r\n        id=\"{{id + '_action'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-action\"\r\n        (click)=\"actionClicked.emit($event)\">\r\n  <i class=\"ec-icon {{actionIcon}}\"></i>\r\n</button>\r\n<div class=\"ec-focus-ring\"></div>\r\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border-radius:var(--ec-border-radius);display:flex;cursor:pointer;flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n<button *ngIf=\"showClear\"\r\n        id=\"{{id + '_clear'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-clear\"\r\n        (click)=\"clear()\">\r\n  <i class=\"ec-icon icon-cancel\"></i>\r\n</button>\r\n<button *ngIf=\"actionIcon\"\r\n        id=\"{{id + '_action'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-action\"\r\n        (click)=\"actionClicked.emit($event)\"\r\n        (keydown)=\"actionKeydown.emit($event)\">\r\n  <i class=\"ec-icon {{actionIcon}}\"></i>\r\n</button>\r\n<div class=\"ec-focus-ring\"></div>", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border-radius:var(--ec-border-radius);display:flex;cursor:pointer;flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}\n"] }]
+            args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n<button *ngIf=\"showClear\"\r\n        id=\"{{id + '_clear'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-clear\"\r\n        (click)=\"clear()\">\r\n  <i class=\"ec-icon icon-cancel\"></i>\r\n</button>\r\n<button *ngIf=\"actionIcon\"\r\n        id=\"{{id + '_action'}}\"\r\n        [attr.disabled]=\"disabled || undefined\"\r\n        class=\"ec-form-control-action\"\r\n        (click)=\"actionClicked.emit($event)\">\r\n  <i class=\"ec-icon {{actionIcon}}\"></i>\r\n</button>\r\n<div class=\"ec-focus-ring\"></div>\r\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border-radius:var(--ec-border-radius);display:flex;cursor:pointer;flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { formControlDirective: [{
                 type: ContentChild,
                 args: [FormControlDirective]
@@ -3992,29 +4849,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['class.is-disabled']
             }], actionClicked: [{
                 type: Output
-            }], actionKeydown: [{
-                type: Output
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
 
+class LinkButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkButtonComponent, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[ecLinkButton]', template: `<ng-content></ng-content>`, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }]
+        }] });
+
+/**
+ * A basic helper directive to determine when focus leaves the host element.
+ *
+ * NOTE: This directive utilizes hidden anchor elements. These will disrupt tab order for elements
+ * within a form. It is recommended to only use this directive when you need to redirect focus when
+ * focus leaves a container. Also make sure this directive is disabled when the focus out events
+ * are not needed to avoid keyboard nav problems.
+ */
+class KeyboardNavContainerDirective {
+    constructor(hostEl, _document, interactivityChecker) {
+        this.hostEl = hostEl;
+        this._document = _document;
+        this.interactivityChecker = interactivityChecker;
+        this.enabled = true;
+        this.focusOutStart = new EventEmitter();
+        this.focusOutEnd = new EventEmitter();
+        this.destroyed = new Subject();
+        // Create the start and end anchors.
+        this.startAnchor = this._document.createElement('div');
+        this.endAnchor = this._document.createElement('div');
+        // Hide the anchors from screen readers.
+        this.startAnchor.setAttribute('aria-hidden', 'true');
+        this.endAnchor.setAttribute('aria-hidden', 'true');
+    }
+    ngOnChanges() {
+        this.toggleAnchors(this.enabled);
+    }
+    ngAfterViewInit() {
+        // Insert the anchors into the DOM before and after the host element.
+        this.hostEl.nativeElement.parentNode?.insertBefore(this.startAnchor, this.hostEl.nativeElement);
+        this.hostEl.nativeElement.parentNode?.insertBefore(this.endAnchor, this.hostEl.nativeElement.nextSibling);
+        // Listen for focus events on the anchors.
+        fromEvent(this.startAnchor, 'focus').pipe(takeUntil(this.destroyed)).subscribe(() => this.focusOutStart.emit());
+        fromEvent(this.endAnchor, 'focus').pipe(takeUntil(this.destroyed)).subscribe(() => this.focusOutEnd.emit());
+        this.toggleAnchors(this.enabled);
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+        // Cleanup the anchors
+        this.startAnchor.remove();
+        this.endAnchor.remove();
+    }
+    focus() {
+        const firstFocusableElement = this.getFirstFocusableElement(this.hostEl.nativeElement);
+        firstFocusableElement?.focus();
+    }
+    getFirstFocusableElement(element) {
+        // These are only possibly focusable. Some may be disabled or not visible.
+        const elements = element.querySelectorAll('input, textarea, select, button, a, [tabindex], [contenteditable]');
+        // Use the Angular CDK interactivity checker to determine if an element is actually focusable and tabbable.
+        // This checks for disabledness among other things.
+        const first = Array.from(elements).find(el => {
+            return this.interactivityChecker.isFocusable(el) && this.interactivityChecker.isTabbable(el);
+        });
+        return first || null;
+    }
+    toggleAnchors(enabled) {
+        // Make the anchors focusable if the container is enabled and we have subscribers for the events.
+        // Otherwise, remove the tabindexes so they cannot receive focus and disrupt the tab order.
+        if (enabled && this.focusOutStart.observers.length > 0) {
+            this.startAnchor.setAttribute('tabindex', '0');
+        }
+        else {
+            this.startAnchor.removeAttribute('tabindex');
+        }
+        if (enabled && this.focusOutEnd.observers.length > 0) {
+            this.endAnchor.setAttribute('tabindex', '0');
+        }
+        else {
+            this.endAnchor.removeAttribute('tabindex');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardNavContainerDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1$3.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: { enabled: ["ecKeyboardNavContainer", "enabled"] }, outputs: { focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, exportAs: ["ecKeyboardNavContainer"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardNavContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecKeyboardNavContainer]',
+                    exportAs: 'ecKeyboardNavContainer'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1$3.InteractivityChecker }], propDecorators: { enabled: [{
+                type: Input,
+                args: ['ecKeyboardNavContainer']
+            }], focusOutStart: [{
+                type: Output
+            }], focusOutEnd: [{
+                type: Output
+            }] } });
+
 class DateInputComponent extends FormControlBase {
-    constructor(validationMessageService, formGroupHelper, userPreferenceService, dateDisplayPipe, el, overlayService) {
+    constructor(validationMessageService, formGroupHelper, userPreferenceService, el, overlayService, selectionStrategies) {
         super(validationMessageService, formGroupHelper);
         this.validationMessageService = validationMessageService;
         this.formGroupHelper = formGroupHelper;
         this.userPreferenceService = userPreferenceService;
-        this.dateDisplayPipe = dateDisplayPipe;
         this.el = el;
         this.overlayService = overlayService;
+        this.selectionStrategies = selectionStrategies;
         this.id = '';
         /** The form control provided by the hosting form. */
         this.formModel = new FormControl(null);
         this.minDate = DateTimeHelper.minDatePickerDate;
         this.maxDate = DateTimeHelper.maxDatePickerDate;
-        /** The internal textbox's form control. */
-        this.textboxControl = new FormControl(null);
+        /** The initial selection mode for the calendar. Defaults to day if not provided */
+        this.selectionMode = 'day';
+        /** The available selection modes for the calendar. Defaults to only the initial selection mode if not provided.  */
+        this.selectionModeOptions = ['day'];
+        /** Enables the next/previous selection buttons. */
+        this.enableSteppers = false;
+        /** The form group for the internal textboxes. Textbox2 is only used for ranges. */
+        this.textboxGroup = new FormGroup({
+            textbox: new FormControl(null),
+            textbox2: new FormControl(null)
+        });
         /**
          * The current calendar selection.
          * Updated when the user clicks on a calendar item or when the date entered into the textbox is parsed.
@@ -4026,40 +4993,51 @@ class DateInputComponent extends FormControlBase {
         this.placeholder = 'MM/DD/YYYY';
         /** Overlay scroll strategy for the calendar overlay. Closes the calendar on scroll. */
         this.overlayScrollStrategy = this.overlayService.scrollStrategies.close();
+        this.primaryCalendarView = { mode: 'day', date: new Date() };
+        this.secondaryCalendarView = { mode: 'day', date: new Date() };
+        this.primaryCalendarMaxDate = DateTimeHelper.maxDatePickerDate;
+        this.secondaryCalendarMinDate = DateTimeHelper.minDatePickerDate;
+        this.disableSteppers = false;
         /**
          * 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.getParseFormats();
-        /**
-         * Validator that checks if the date is within the min and max date range.
-         * If the date is outside of the range, the validator returns an error that
-         * triggers the validation message service to show the error in the label.
-         */
-        this.dateValidator = (control) => {
-            if (control.value) {
-                if (control.value < this.minDate) {
-                    return { minDate: { minValue: this.minDate } };
-                }
-                else if (control.value > this.maxDate) {
-                    return { maxDate: { maxValue: this.maxDate } };
-                }
-            }
-            return null;
-        };
+        this.parseFormats = DateTimeHelper.getMomentParseFormats();
+    }
+    ngOnChanges(changes) {
+        if (changes.selectionMode && !changes.selectionMode.isFirstChange()) {
+            this.onSelectionModeChange(this.selectionMode);
+        }
+    }
+    ngOnInit() {
+        // Setup
+        super.ngOnInit();
+        this.setDateFormats();
+        this.setSelectionMode(this.selectionMode);
+        // Subscriptions
+        this.onFormModelStatusChanges();
+        this.onFormModelValueChanges();
+        this.onTextboxValueChanges();
+        // Sync the initial disabled status and value of the textbox
+        this.syncTextboxControlDisabledStatus(this.formModel.status);
+        const initialDisplayValue = this.selectionStrategy.formatSelection(this.formModel.value);
+        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.updateCalendars(this.calendarSelection);
+        this.updateSteppers(this.calendarSelection);
+        console.log(this.calendarSelection);
     }
     /** Focuses the input whenever the calendar is shift-tabbed out of. */
-    onCalendarFocusOutStart(event) {
-        event.preventDefault();
+    onCalendarFocusOutStart() {
         this.focusInput();
     }
     /** Closes the calendar and focuses the input whenever the calendar is tabbed out of. */
-    onCalendarFocusOutEnd(event) {
-        event.preventDefault();
+    onCalendarFocusOutEnd() {
         this.isCalendarOpen = false;
         this.focusInput();
     }
-    /** Close the calendar if the user clicks outside of the calendar and date input. */
+    /** Closes the calendar if the user clicks outside of the calendar and date input. */
     onOverlayOutsideClick(event) {
         // Do not close the calendar if the click was within the date input or action button
         const rect = this.el.nativeElement.getBoundingClientRect();
@@ -4070,74 +5048,107 @@ class DateInputComponent extends FormControlBase {
         // It's possible that the user hit enter on the action button instead of clicking with the mouse.
         // In this case the "click" event will be outside of the component because the clientx and y are 0,
         // but we don't want to close in this case because button clicks trigger calendar open/close separately.
-        const isActionClick = event.target.id === `${this.id}_action`;
+        const targetId = event.target.id;
+        const isActionClick = targetId === `${this.id}_action` || targetId === `${this.id}_control2_action`;
         if (!isActionClick && clickedOutsideControl) {
             this.isCalendarOpen = false;
         }
     }
     /** If the user tabs out of the form control's action button and the calendar is open, focus the first item in the calendar overlay */
-    onActionKeydown(event) {
-        if (event.key === 'Tab' && !event.shiftKey && this.isCalendarOpen) {
-            // Prevent the default tab action so the focus doesn't move to the next element in the tab order after we manually focus the calendar button.
-            event.preventDefault();
-            // Focus the first button in the calendar overlay
-            const firstButton = this.overlay?.overlayRef.hostElement.querySelector('button:not(:disabled)');
-            firstButton?.focus();
+    onControlsFocusOutEnd() {
+        if (this.isCalendarOpen) {
+            this.calendar?.focus();
         }
     }
-    onTextboxKeydown(event) {
-        if (event.key === 'Tab' && event.shiftKey) {
-            // If the user is tabbing backwards from the textbox, close the calendar.
-            this.isCalendarOpen = false;
-        }
-    }
-    /** Whenever the user selects a date from the calendar, update the formModel with the selection */
-    onSelectionChange(selection) {
-        this.calendarSelection = selection;
-        if (isCalendarSelectionSingleDate(selection)) {
-            this.formModel.setValue(selection);
+    onTextboxBlur() {
+        // We want to prevent the fixed date range modes from re-autocompleting the first textbox when it is explicitly cleared.
+        const previousValue = DateInput.isSelectionRange(this.formModel.value) ? this.formModel.value.start : this.formModel.value;
+        const currentValue = this.textboxGroup.value.textbox;
+        const cleared = !!previousValue && !currentValue;
+        const options = { preventAutoComplete: cleared };
+        // Parse the textbox values into a selection and update the form model
+        const parsedSelection = this.selectionStrategy.parseTextboxValues(this.textboxGroup.value, this.parseFormats, options);
+        this.updateFormModel(parsedSelection);
+    }
+    onTextbox2Blur() {
+        // We want to prevent the fixed date range modes from re-autocompleting the second textbox when it is explicitly cleared.
+        const previousValue = DateInput.isSelectionRange(this.formModel.value) ? this.formModel.value.end : null;
+        const currentValue = this.textboxGroup.value.textbox2;
+        const cleared = !!previousValue && !currentValue;
+        const options = { parseFromEnd: true, preventAutoComplete: cleared };
+        // Parse the textbox values into a selection and update the form model,
+        // For the second box we're keying the parse from the end date in the selection.
+        const parsedSelection = this.selectionStrategy.parseTextboxValues(this.textboxGroup.value, this.parseFormats, options);
+        this.updateFormModel(parsedSelection);
+    }
+    onSelectionModeChange(mode) {
+        this.setSelectionMode(mode);
+        const newSelection = this.selectionStrategy.getNewSelectionFromExisting(this.calendarSelection);
+        this.updateFormModel(newSelection);
+        // On selection mode change, we want to force the calendars to show the right view mode for the new selection.
+        // This prevents the user from seeing a view mode that doesn't make sense for the new selection,
+        // Like when swiching from year mode to last 7 days mode.
+        this.primaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: this.primaryCalendarView.date };
+        this.secondaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: this.secondaryCalendarView.date };
+        this.updateCalendarMinMaxDates();
+    }
+    onCalendarDateSelected(date) {
+        const newSelection = this.selectionStrategy.getSelectionFromDate(date, this.calendarSelection);
+        const displayValue = this.selectionStrategy.formatSelection(newSelection);
+        // Don't emit events when patching values here. We don't want to trigger the calendar updates since the calendar is already
+        // showing the selected date. We also don't want to trigger the textbox parsing logic since the date was selected from the calendar.
+        this.textboxGroup.patchValue(displayValue, { emitEvent: false });
+        this.formModel.patchValue(newSelection, { emitEvent: false });
+        this.calendarSelection = newSelection;
+        this.updateSteppers(newSelection);
+        // Close the calendar if the selection mode is not a range mode where either the start or the end date can be changed.
+        if (!this.selectionStrategy.showSecondaryTextbox) {
             this.isCalendarOpen = false;
             this.focusInput();
         }
     }
-    onTextboxBlur() {
-        // Parse the textbox value into a date and update the form model
-        const value = this.textboxControl.value;
-        if (value) {
-            const parsedDate = moment(value, this.parseFormats);
-            if (parsedDate.isValid()) {
-                this.formModel.setValue(parsedDate.toDate());
-            }
-            else {
-                this.formModel.setValue(null);
-            }
+    onPrimaryCalendarViewChange(view) {
+        this.primaryCalendarView = view;
+        this.updateCalendarMinMaxDates();
+    }
+    onSecondaryCalendarViewChange(view) {
+        this.secondaryCalendarView = view;
+        this.updateCalendarMinMaxDates();
+    }
+    /** Shifts the calendar views to display today. Does not update the calendar selection. */
+    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.secondaryCalendarView = { mode: 'day', date: new Date() };
+            // If we're in a single date mode, show today in the primary calendar.
         }
         else {
-            this.formModel.setValue(null);
-        }
-        // Update the form model's touched and dirty status based on the textbox's status.
-        // Since the user interacts with a control that is internal to this component, the
-        // form model's status won't be updated automatically.
-        if (this.textboxControl.touched && !this.formModel.touched) {
-            this.formModel.markAsTouched();
+            this.primaryCalendarView = { mode: 'day', date: new Date() };
         }
-        if (this.textboxControl.dirty && !this.formModel.dirty) {
-            this.formModel.markAsDirty();
+        this.updateCalendarMinMaxDates();
+    }
+    goToQuickSelectDate() {
+        if (this.quickSelectDate) {
+            const newSelection = this.selectionStrategy.getSelectionForQuickSelectDate(this.quickSelectDate, this.calendarSelection);
+            this.updateFormModel(newSelection);
         }
     }
-    ngOnInit() {
-        // Setup
-        super.ngOnInit();
-        this.setDateFormats();
-        this.formModel.addValidators(this.dateValidator);
-        // Subscriptions
-        this.onFormModelStatusChanges();
-        this.onFormModelValueChanges();
-        this.onTextboxValueChanges();
-        // Sync the initial disabled status and value of the textbox
-        this.syncTextboxControlDisabledStatus(this.formModel.status);
-        this.textboxControl.setValue(this.dateDisplayPipe.transform(this.formModel.value, true), { emitEvent: false });
-        this.calendarSelection = this.formModel.value;
+    nextSelection() {
+        const newSelection = this.selectionStrategy.getNextSelection(this.calendarSelection);
+        this.updateFormModel(newSelection);
+    }
+    previousSelection() {
+        const newSelection = this.selectionStrategy.getPreviousSelection(this.calendarSelection);
+        this.updateFormModel(newSelection);
+    }
+    updateFormModel(value) {
+        this.formModel.patchValue(value);
+        // Validate the textboxes and sync the form errors
+        // We do this after patching the form model because the form model patch will trigger
+        // the date formatting logic and overwrite any errors on the controls from before.
+        this.validateTextboxes();
+        this.syncFormErrors();
     }
     onFormModelStatusChanges() {
         // Keep the textboxControl disabled status in sync with the formModel
@@ -4155,12 +5166,13 @@ class DateInputComponent extends FormControlBase {
     }
     onFormModelValueChanges() {
         // Update the calendar selection textbox value with a formatted date when the form model changes.
-        // This is usually triggered by programmatic changes to the form model by a parent component.
-        this.formModel.valueChanges.pipe(distinctUntilChanged((a, b) => moment(a).isSame(b, 'day')), takeUntil(this.componentDestroyed)).subscribe(value => {
-            const displayValue = this.dateDisplayPipe.transform(value, true);
+        // 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);
             // Don't emit an event when setting the textbox value to avoid circular updates between the textbox and form model.
-            this.textboxControl.setValue(displayValue, { emitEvent: false });
-            this.calendarSelection = value;
+            this.textboxGroup.patchValue(displayValue, { emitEvent: false });
+            this.updateCalendars(value);
+            this.updateSteppers(value);
         });
     }
     onTextboxValueChanges() {
@@ -4168,34 +5180,67 @@ class DateInputComponent extends FormControlBase {
         // We don't patch the formModel here because we don't want to trigger the
         // date formatting logic and overwrite the user's input.
         // We'll do that when the user blurs out of the textbox. See onTextboxBlur()
-        this.textboxControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.componentDestroyed)).subscribe(value => {
-            if (value) {
-                const parsedDate = moment(value, this.parseFormats);
-                if (parsedDate.isValid()) {
-                    // If the parsed date is before the minDate, set the year to the current year.
-                    // This prevents the calendar from showing unhelpful dates in the distant past as the user types
-                    if (parsedDate.year() < this.minDate.getFullYear()) {
-                        parsedDate.set('year', moment().year());
-                    }
-                    this.calendarSelection = parsedDate.toDate();
-                }
+        this.textboxGroup.controls.textbox.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.componentDestroyed)).subscribe(() => {
+            const options = { shiftToCurrentYearIfBelow: this.minDate };
+            const newSelection = this.selectionStrategy.parseTextboxValues(this.textboxGroup.value, this.parseFormats, options);
+            // Calendar selection will be null if the dates are invalid. Don't update the calendars in this case.
+            if (newSelection) {
+                this.calendarSelection = newSelection;
+                this.updatePrimaryCalendar(this.calendarSelection, this.selectionStrategy.showSecondaryCalendar);
+                this.updateCalendarMinMaxDates();
             }
-            else {
-                this.calendarSelection = null;
+        });
+        // The second textbox is only used in last7Days, last28Days, and range modes.
+        this.textboxGroup.controls.textbox2.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.componentDestroyed)).subscribe(() => {
+            const options = { shiftToCurrentYearIfBelow: this.minDate, parseFromEnd: true };
+            const newSelection = this.selectionStrategy.parseTextboxValues(this.textboxGroup.value, this.parseFormats, options);
+            // Calendar selection will be null if the dates are invalid. Don't update the calendars in this case.
+            if (newSelection) {
+                this.calendarSelection = newSelection;
+                // The secondary calendar is only shown in range mode. Update the primary calendar if we're not in range mode.
+                if (this.selectionStrategy.showSecondaryCalendar) {
+                    this.updateSecondaryCalendar(this.calendarSelection, true);
+                }
+                else {
+                    this.updatePrimaryCalendar(this.calendarSelection);
+                }
+                this.updateCalendarMinMaxDates();
             }
         });
     }
     syncTextboxControlDisabledStatus(status) {
         // The textbox should only be disabled if the form model is disabled.
         // All other statuses are considered enabled.
-        if (status === 'DISABLED' && this.textboxControl.enabled) {
-            this.textboxControl.disable();
+        if (status === 'DISABLED' && this.textboxGroup.enabled) {
+            this.textboxGroup.disable();
         }
-        else if (status !== 'DISABLED' && this.textboxControl.disabled) {
-            this.textboxControl.enable();
+        else if (status !== 'DISABLED' && this.textboxGroup.disabled) {
+            this.textboxGroup.enable();
         }
     }
     ;
+    syncFormErrors() {
+        // Start with the existing form model errors
+        let errors = this.formModel.errors;
+        // Add the errors from the textboxes if they exist
+        if (this.textboxGroup.controls.textbox.errors) {
+            errors = { ...errors, ...this.textboxGroup.controls.textbox.errors };
+        }
+        if (this.textboxGroup.controls.textbox2.errors) {
+            errors = { ...errors, ...this.textboxGroup.controls.textbox2.errors };
+        }
+        // Update the form model's errors with the combined errors
+        this.formModel.setErrors(errors);
+        // Update the form model's touched and dirty status based on the textbox's status.
+        // Since the user interacts with a control that is internal to this component, the
+        // form model's status won't be updated automatically.
+        if (this.textboxGroup.touched && !this.formModel.touched) {
+            this.formModel.markAsTouched();
+        }
+        if (this.textboxGroup.dirty && !this.formModel.dirty) {
+            this.formModel.markAsDirty();
+        }
+    }
     /**
      * Updates the date parsing formats and placeholder based on the user's display preference.
      * NOTE: This is async because we're retrieving the user's preferences. We're not awaiting the result
@@ -4211,15 +5256,120 @@ class DateInputComponent extends FormControlBase {
     }
     /** Focuses the date input. */
     focusInput() {
-        this.el.nativeElement.querySelector('input')?.focus();
+        this.controls?.focus();
+    }
+    setSelectionMode(mode) {
+        this.selectionMode = mode;
+        this.selectionStrategy = this.selectionStrategies[mode];
+    }
+    /**
+     * Sets the max date for the primary calendar and the min date for the secondary calendar based
+     * on the current views in each. This prevents the user from moving the calendars out of order.
+     */
+    updateCalendarMinMaxDates() {
+        // Only update the min/max dates when the view mode is 'day'.
+        // When a calendar is in a month or year view mode, the view dates at the beginning of the year.
+        // 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();
+        }
+        if (this.secondaryCalendarView?.mode === 'day') {
+            this.primaryCalendarMaxDate = moment(this.secondaryCalendarView?.date).subtract(1, 'month').endOf('month').toDate();
+        }
+    }
+    updateCalendars(selection) {
+        this.calendarSelection = selection;
+        this.updatePrimaryCalendar(selection);
+        // Only shift the primary calendar if we're showing the secondary calendar
+        this.updateSecondaryCalendar(selection, this.selectionStrategy.showSecondaryCalendar);
+        this.updateCalendarMinMaxDates();
+    }
+    updatePrimaryCalendar(selection, shiftSecondary = false) {
+        this.primaryCalendarView = this.selectionStrategy.getPrimaryCalendarView(selection, this.minDate, this.maxDate, this.primaryCalendarView);
+        // When entering a date into the first textbox, we really only want to update the primary calendar.
+        // 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();
+                this.secondaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newSecondaryDate };
+            }
+        }
+    }
+    updateSecondaryCalendar(selection, shiftPrimary = false) {
+        this.secondaryCalendarView = this.selectionStrategy.getSecondaryCalendarView(selection, this.minDate, this.maxDate, this.secondaryCalendarView);
+        // When entering a date into the second textbox, we really only want to update the secondary calendar.
+        // 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();
+                this.primaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newPrimaryDate };
+            }
+        }
+    }
+    updateSteppers(value) {
+        // Disable the steppers if we either don't have a selection or only have one date in the selection.
+        if (!value ||
+            (DateInput.isSelectionSingleDate(value) && this.selectionMode !== 'day') ||
+            (DateInput.isSelectionRange(value) && (!value.start || !value.end))) {
+            this.disableSteppers = true;
+        }
+        else {
+            this.disableSteppers = false;
+        }
+    }
+    validateTextboxes() {
+        const control = this.textboxGroup.controls.textbox;
+        const control2 = this.textboxGroup.controls.textbox2;
+        // The first textbox should only have the required error if it's empty and the date input is required,
+        // or if the date input is not required and the second control is visible and has a value (meaning a partial range)
+        if (!control.value &&
+            (this.required || (control2.value && this.selectionStrategy.showSecondaryTextbox))) {
+            control.setErrors({ required: true });
+        }
+        // The same idea applies to the second textbox, but only if it's visible
+        if (this.selectionStrategy.showSecondaryTextbox &&
+            !control2.value &&
+            (this.required || control.value)) {
+            control2.setErrors({ required: true });
+        }
+        if (control.value) {
+            const errors = this.validateDateString(control.value);
+            if (errors) {
+                control.setErrors(errors);
+            }
+        }
+        if (control2.value && this.selectionStrategy.showSecondaryTextbox) {
+            const errors = this.validateDateString(control2.value);
+            if (errors) {
+                control2.setErrors(errors);
+            }
+        }
+    }
+    validateDateString(date) {
+        const value = this.selectionStrategy.parseString(date, this.parseFormats);
+        if (value) {
+            // 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)) {
+                return { minDate: { minValue: this.minDate } };
+            }
+            else if (moment(value).isAfter(this.maxDate, this.selectionStrategy.selectionViewMode)) {
+                return { maxDate: { maxValue: this.maxDate } };
+            }
+        }
+        return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: DateDisplayPipe }, { token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"label\">\r\n  <span>{{label | translate}}</span>\r\n  <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors}}</span>\r\n  <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                   *ngIf=\"helpPopover\"\r\n                   class=\"d-inline-block my-n3 mx-n1\"\r\n                   text=\"{{helpPopover | translate}}\"\r\n                   contentPosition=\"{{helpPopoverPosition}}\">\r\n  </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n                 [required]=\"required\"\r\n                 [autofocus]=\"autofocus\"\r\n                 [pending]=\"pending\"\r\n                 [readonly]=\"readonly\"\r\n                 [formModel]=\"formModel\"\r\n                 (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                 (actionKeydown)=\"onActionKeydown($event)\"\r\n                 [showClear]=\"false\"\r\n                 actionIcon=\"icon-date\"\r\n                 cdkOverlayOrigin\r\n                 #overlayOrigin=\"cdkOverlayOrigin\">\r\n  <input id=\"{{id}}_input\"\r\n         type=\"text\"\r\n         placeholder=\"{{placeholder}}\"\r\n         [formControl]=\"textboxControl\"\r\n         (blur)=\"onTextboxBlur()\"\r\n         (keydown)=\"onTextboxKeydown($event)\">\r\n</ec-form-control>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             #overlay=\"cdkConnectedOverlay\"\r\n             [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n             [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n             cdkConnectedOverlayPanelClass=\"my-1\"\r\n             (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n             (detach)=\"isCalendarOpen = false\">\r\n  <ec-calendar [id]=\"id + '_calendar'\"\r\n               [minDate]=\"minDate\"\r\n               [maxDate]=\"maxDate\"\r\n               [selection]=\"calendarSelection\"\r\n               (selectionChange)=\"onSelectionChange($event)\"\r\n               class=\"card px-1 pt-1 pb-2\"\r\n               (focusOutStart)=\"onCalendarFocusOutStart($event)\"\r\n               (focusOutEnd)=\"onCalendarFocusOutEnd($event)\">\r\n  </ec-calendar>\r\n</ng-template>\r\n", styles: [":host{display:block}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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "pending", "required", "readonly"], outputs: ["actionClicked", "actionKeydown"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "minDate", "maxDate"], outputs: ["selectionChange", "focusOutStart", "focusOutEnd"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: i0.ElementRef }, { token: i1$1.Overlay }, { token: DateInput.SelectionStrategies }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\">\r\n  <span>{{label | translate}}</span>\r\n  <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors}}</span>\r\n  <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                   *ngIf=\"helpPopover\"\r\n                   class=\"d-inline-block my-n3 mx-n1\"\r\n                   text=\"{{helpPopover | translate}}\"\r\n                   contentPosition=\"{{helpPopoverPosition}}\">\r\n  </ec-help-popover>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\"\r\n     [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n     #controls=\"ecKeyboardNavContainer\"\r\n     (focusOutEnd)=\"onControlsFocusOutEnd()\">\r\n  <ec-form-control id=\"{{id}}\"\r\n                   [required]=\"required\"\r\n                   [autofocus]=\"autofocus\"\r\n                   [pending]=\"pending\"\r\n                   [readonly]=\"readonly\"\r\n                   (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                   [showClear]=\"false\"\r\n                   actionIcon=\"icon-date\"\r\n                   cdkOverlayOrigin\r\n                   #overlayOrigin=\"cdkOverlayOrigin\"\r\n                   class=\"flex-grow\"\r\n                   style=\"height: 2rem;\">\r\n    <input id=\"{{id}}_input\"\r\n           type=\"text\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [formControl]=\"textboxGroup.get('textbox')\"\r\n           (blur)=\"onTextboxBlur()\">\r\n  </ec-form-control>\r\n\r\n  <ng-container *ngIf=\"selectionStrategy.showSecondaryTextbox\">\r\n    <span class=\"flex-shrink mx-1\">&ndash;</span>\r\n    <ec-form-control id=\"{{id}}_control2\"\r\n                     [required]=\"required\"\r\n                     [autofocus]=\"autofocus\"\r\n                     [pending]=\"pending\"\r\n                     [readonly]=\"readonly\"\r\n                     (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                     [showClear]=\"false\"\r\n                     actionIcon=\"icon-date\"\r\n                     class=\"flex-grow\"\r\n                     style=\"height: 2rem;\">\r\n      <input id=\"{{id}}_input2\"\r\n             type=\"text\"\r\n             placeholder=\"{{placeholder}}\"\r\n             [formControl]=\"textboxGroup.get('textbox2')\"\r\n             (blur)=\"onTextbox2Blur()\">\r\n    </ec-form-control>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"enableSteppers\"\r\n       class=\"control-group ml-2\">\r\n    <ec-button id=\"{{id}}_previousSelection\"\r\n               type=\"secondary\"\r\n               icon=\"icon-angle-down rotate-90\"\r\n               (clicked)=\"previousSelection()\"\r\n               [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\">\r\n    </ec-button>\r\n    <ec-button id=\"{{id}}_nextSelection\"\r\n               type=\"secondary\"\r\n               icon=\"icon-angle-down rotate-270\"\r\n               (clicked)=\"nextSelection()\"\r\n               [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\">\r\n    </ec-button>\r\n  </div>\r\n\r\n  <ec-button *ngIf=\"quickSelectDate\"\r\n             id=\"{{id}}_quickSelect\"\r\n             icon=\"icon-day\"\r\n             type=\"secondary\"\r\n             title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\r\n             (clicked)=\"goToQuickSelectDate()\"\r\n             class=\"ml-2\">\r\n  </ec-button>\r\n</div>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             #overlay=\"cdkConnectedOverlay\"\r\n             [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n             [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n             cdkConnectedOverlayPanelClass=\"my-1\"\r\n             (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n             (detach)=\"isCalendarOpen = false\">\r\n  <article id=\"{{id}}_datePicker\"\r\n           class=\"card d-flex\"\r\n           [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n           #calendar=\"ecKeyboardNavContainer\"\r\n           (focusOutStart)=\"onCalendarFocusOutStart()\"\r\n           (focusOutEnd)=\"onCalendarFocusOutEnd()\">\r\n    <ul *ngIf=\"selectionModeOptions.length > 1\"\r\n        class=\"selection-mode-menu border-right p-1\">\r\n      <li *ngFor=\"let option of selectionModeOptions\">\r\n        <button id=\"{{id}}_selectionMode_{{option}}\"\r\n                class=\"text-body-1\"\r\n                [class.is-selected]=\"option === selectionMode\"\r\n                (click)=\"onSelectionModeChange(option)\">\r\n          {{'DateInputSelectionMode_' + option | translate}}\r\n        </button>\r\n      </li>\r\n    </ul>\r\n\r\n    <div>\r\n      <div class=\"d-flex\">\r\n        <ec-calendar id=\"{{id}}_calendar\"\r\n                     [view]=\"primaryCalendarView\"\r\n                     (viewChange)=\"onPrimaryCalendarViewChange($event)\"\r\n                     [selectionMode]=\"selectionMode\"\r\n                     [selection]=\"calendarSelection\"\r\n                     (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                     [minDate]=\"minDate\"\r\n                     [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\">\r\n        </ec-calendar>\r\n\r\n        <ec-calendar *ngIf=\"selectionStrategy.showSecondaryCalendar\"\r\n                     id=\"{{id}}_secondaryCalendar\"\r\n                     [view]=\"secondaryCalendarView\"\r\n                     (viewChange)=\"onSecondaryCalendarViewChange($event)\"\r\n                     [selectionMode]=\"selectionMode\"\r\n                     [selection]=\"calendarSelection\"\r\n                     (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                     [minDate]=\"secondaryCalendarMinDate\"\r\n                     [maxDate]=\"maxDate\">\r\n        </ec-calendar>\r\n      </div>\r\n\r\n      <footer *ngIf=\"selectionStrategy.selectionViewMode === 'day'\"\r\n              class=\"px-2 my-2 d-flex\">\r\n        <button id=\"{{id}}_today_button\"\r\n                ecLinkButton\r\n                class=\"ml-auto d-inline-block\"\r\n                (click)=\"goToToday()\"\r\n                style=\"height: 1.75rem;\">\r\n          {{'Today' | translate}}\r\n        </button>\r\n      </footer>\r\n    </div>\r\n  </article>\r\n</ng-template>\r\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{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;background-color:transparent;width:100%;height:1.75rem}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button: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}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-date-input', template: "<label *ngIf=\"label\">\r\n  <span>{{label | translate}}</span>\r\n  <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors}}</span>\r\n  <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                   *ngIf=\"helpPopover\"\r\n                   class=\"d-inline-block my-n3 mx-n1\"\r\n                   text=\"{{helpPopover | translate}}\"\r\n                   contentPosition=\"{{helpPopoverPosition}}\">\r\n  </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n                 [required]=\"required\"\r\n                 [autofocus]=\"autofocus\"\r\n                 [pending]=\"pending\"\r\n                 [readonly]=\"readonly\"\r\n                 [formModel]=\"formModel\"\r\n                 (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                 (actionKeydown)=\"onActionKeydown($event)\"\r\n                 [showClear]=\"false\"\r\n                 actionIcon=\"icon-date\"\r\n                 cdkOverlayOrigin\r\n                 #overlayOrigin=\"cdkOverlayOrigin\">\r\n  <input id=\"{{id}}_input\"\r\n         type=\"text\"\r\n         placeholder=\"{{placeholder}}\"\r\n         [formControl]=\"textboxControl\"\r\n         (blur)=\"onTextboxBlur()\"\r\n         (keydown)=\"onTextboxKeydown($event)\">\r\n</ec-form-control>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             #overlay=\"cdkConnectedOverlay\"\r\n             [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n             [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n             cdkConnectedOverlayPanelClass=\"my-1\"\r\n             (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n             (detach)=\"isCalendarOpen = false\">\r\n  <ec-calendar [id]=\"id + '_calendar'\"\r\n               [minDate]=\"minDate\"\r\n               [maxDate]=\"maxDate\"\r\n               [selection]=\"calendarSelection\"\r\n               (selectionChange)=\"onSelectionChange($event)\"\r\n               class=\"card px-1 pt-1 pb-2\"\r\n               (focusOutStart)=\"onCalendarFocusOutStart($event)\"\r\n               (focusOutEnd)=\"onCalendarFocusOutEnd($event)\">\r\n  </ec-calendar>\r\n</ng-template>\r\n", styles: [":host{display:block}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}\n"] }]
-        }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: DateDisplayPipe }, { type: i0.ElementRef }, { type: i1$1.Overlay }], propDecorators: { id: [{
+            args: [{ selector: 'ec-date-input', providers: [DateInput.SelectionStrategies], template: "<label *ngIf=\"label\">\r\n  <span>{{label | translate}}</span>\r\n  <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors}}</span>\r\n  <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                   *ngIf=\"helpPopover\"\r\n                   class=\"d-inline-block my-n3 mx-n1\"\r\n                   text=\"{{helpPopover | translate}}\"\r\n                   contentPosition=\"{{helpPopoverPosition}}\">\r\n  </ec-help-popover>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\"\r\n     [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n     #controls=\"ecKeyboardNavContainer\"\r\n     (focusOutEnd)=\"onControlsFocusOutEnd()\">\r\n  <ec-form-control id=\"{{id}}\"\r\n                   [required]=\"required\"\r\n                   [autofocus]=\"autofocus\"\r\n                   [pending]=\"pending\"\r\n                   [readonly]=\"readonly\"\r\n                   (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                   [showClear]=\"false\"\r\n                   actionIcon=\"icon-date\"\r\n                   cdkOverlayOrigin\r\n                   #overlayOrigin=\"cdkOverlayOrigin\"\r\n                   class=\"flex-grow\"\r\n                   style=\"height: 2rem;\">\r\n    <input id=\"{{id}}_input\"\r\n           type=\"text\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [formControl]=\"textboxGroup.get('textbox')\"\r\n           (blur)=\"onTextboxBlur()\">\r\n  </ec-form-control>\r\n\r\n  <ng-container *ngIf=\"selectionStrategy.showSecondaryTextbox\">\r\n    <span class=\"flex-shrink mx-1\">&ndash;</span>\r\n    <ec-form-control id=\"{{id}}_control2\"\r\n                     [required]=\"required\"\r\n                     [autofocus]=\"autofocus\"\r\n                     [pending]=\"pending\"\r\n                     [readonly]=\"readonly\"\r\n                     (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n                     [showClear]=\"false\"\r\n                     actionIcon=\"icon-date\"\r\n                     class=\"flex-grow\"\r\n                     style=\"height: 2rem;\">\r\n      <input id=\"{{id}}_input2\"\r\n             type=\"text\"\r\n             placeholder=\"{{placeholder}}\"\r\n             [formControl]=\"textboxGroup.get('textbox2')\"\r\n             (blur)=\"onTextbox2Blur()\">\r\n    </ec-form-control>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"enableSteppers\"\r\n       class=\"control-group ml-2\">\r\n    <ec-button id=\"{{id}}_previousSelection\"\r\n               type=\"secondary\"\r\n               icon=\"icon-angle-down rotate-90\"\r\n               (clicked)=\"previousSelection()\"\r\n               [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\">\r\n    </ec-button>\r\n    <ec-button id=\"{{id}}_nextSelection\"\r\n               type=\"secondary\"\r\n               icon=\"icon-angle-down rotate-270\"\r\n               (clicked)=\"nextSelection()\"\r\n               [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\">\r\n    </ec-button>\r\n  </div>\r\n\r\n  <ec-button *ngIf=\"quickSelectDate\"\r\n             id=\"{{id}}_quickSelect\"\r\n             icon=\"icon-day\"\r\n             type=\"secondary\"\r\n             title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\r\n             (clicked)=\"goToQuickSelectDate()\"\r\n             class=\"ml-2\">\r\n  </ec-button>\r\n</div>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             #overlay=\"cdkConnectedOverlay\"\r\n             [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n             [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n             cdkConnectedOverlayPanelClass=\"my-1\"\r\n             (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n             (detach)=\"isCalendarOpen = false\">\r\n  <article id=\"{{id}}_datePicker\"\r\n           class=\"card d-flex\"\r\n           [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n           #calendar=\"ecKeyboardNavContainer\"\r\n           (focusOutStart)=\"onCalendarFocusOutStart()\"\r\n           (focusOutEnd)=\"onCalendarFocusOutEnd()\">\r\n    <ul *ngIf=\"selectionModeOptions.length > 1\"\r\n        class=\"selection-mode-menu border-right p-1\">\r\n      <li *ngFor=\"let option of selectionModeOptions\">\r\n        <button id=\"{{id}}_selectionMode_{{option}}\"\r\n                class=\"text-body-1\"\r\n                [class.is-selected]=\"option === selectionMode\"\r\n                (click)=\"onSelectionModeChange(option)\">\r\n          {{'DateInputSelectionMode_' + option | translate}}\r\n        </button>\r\n      </li>\r\n    </ul>\r\n\r\n    <div>\r\n      <div class=\"d-flex\">\r\n        <ec-calendar id=\"{{id}}_calendar\"\r\n                     [view]=\"primaryCalendarView\"\r\n                     (viewChange)=\"onPrimaryCalendarViewChange($event)\"\r\n                     [selectionMode]=\"selectionMode\"\r\n                     [selection]=\"calendarSelection\"\r\n                     (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                     [minDate]=\"minDate\"\r\n                     [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\">\r\n        </ec-calendar>\r\n\r\n        <ec-calendar *ngIf=\"selectionStrategy.showSecondaryCalendar\"\r\n                     id=\"{{id}}_secondaryCalendar\"\r\n                     [view]=\"secondaryCalendarView\"\r\n                     (viewChange)=\"onSecondaryCalendarViewChange($event)\"\r\n                     [selectionMode]=\"selectionMode\"\r\n                     [selection]=\"calendarSelection\"\r\n                     (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                     [minDate]=\"secondaryCalendarMinDate\"\r\n                     [maxDate]=\"maxDate\">\r\n        </ec-calendar>\r\n      </div>\r\n\r\n      <footer *ngIf=\"selectionStrategy.selectionViewMode === 'day'\"\r\n              class=\"px-2 my-2 d-flex\">\r\n        <button id=\"{{id}}_today_button\"\r\n                ecLinkButton\r\n                class=\"ml-auto d-inline-block\"\r\n                (click)=\"goToToday()\"\r\n                style=\"height: 1.75rem;\">\r\n          {{'Today' | translate}}\r\n        </button>\r\n      </footer>\r\n    </div>\r\n  </article>\r\n</ng-template>\r\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{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;background-color:transparent;width:100%;height:1.75rem}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button: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}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"] }]
+        }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: i0.ElementRef }, { type: i1$1.Overlay }, { type: DateInput.SelectionStrategies }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
@@ -4230,6 +5380,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
+            }], selectionMode: [{
+                type: Input
+            }], selectionModeOptions: [{
+                type: Input
+            }], quickSelectDate: [{
+                type: Input
+            }], enableSteppers: [{
+                type: Input
+            }], calendar: [{
+                type: ViewChild,
+                args: ['calendar']
+            }], controls: [{
+                type: ViewChild,
+                args: ['controls']
             }], overlay: [{
                 type: ViewChild,
                 args: ['overlay']
@@ -4931,7 +6095,7 @@ class FileUploadComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n               [formGroup]=\"formModel\"\r\n               [helpPopover]=\"helpPopover\"\r\n               [helpPopoverPosition]=\"helpPopoverPosition\"\r\n               class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n             id=\"{{inputId}}_input\"\r\n             type=\"file\"\r\n             tabindex=\"-1\"\r\n             [attr.accept]=\"fileTypeAccept\"\r\n             (change)=\"fileChange($event.target.files)\"\r\n             [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n             [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n      <ec-form-control *ngIf=\"displayType === 'file'\"\r\n                       id=\"{{inputId}}_formControl\"\r\n                       class=\"text-truncate\"\r\n                       [required]=\"required\"\r\n                       [pending]=\"pending || formModel?.pending\">\r\n        <input id=\"{{inputId}}_name\"\r\n               [formControl]=\"formModel?.get('name')\"\r\n               type=\"text\"\r\n               [placeholder]=\"placeholder\"\r\n               [tabindex]=\"-1\">\r\n      </ec-form-control>\r\n    </div>\r\n    <ec-button *ngIf=\"displayType === 'file'\"\r\n               #browseBtn\r\n               id=\"{{inputId}}_browseBtn\"\r\n               (clicked)=\"fileInput.click()\"\r\n               type=\"secondary\"\r\n               [tabindex]=\"tabindex\"\r\n               [disabled]=\"formModel?.get('name').disabled\"\r\n               label=\"Browse\"\r\n               [autofocus]=\"autofocus\">\r\n    </ec-button>\r\n  </div>\r\n  <ec-button *ngIf=\"displayType === 'button'\"\r\n             id=\"{{inputId}}_btn\"\r\n             [pending]=\"pending\"\r\n             [type]=\"buttonType\"\r\n             [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n             (clicked)=\"fileInput.click()\"\r\n             style=\"width: 100%;\">\r\n  </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "pending", "required", "readonly"], outputs: ["actionClicked", "actionKeydown"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n               [formGroup]=\"formModel\"\r\n               [helpPopover]=\"helpPopover\"\r\n               [helpPopoverPosition]=\"helpPopoverPosition\"\r\n               class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n             id=\"{{inputId}}_input\"\r\n             type=\"file\"\r\n             tabindex=\"-1\"\r\n             [attr.accept]=\"fileTypeAccept\"\r\n             (change)=\"fileChange($event.target.files)\"\r\n             [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n             [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n      <ec-form-control *ngIf=\"displayType === 'file'\"\r\n                       id=\"{{inputId}}_formControl\"\r\n                       class=\"text-truncate\"\r\n                       [required]=\"required\"\r\n                       [pending]=\"pending || formModel?.pending\">\r\n        <input id=\"{{inputId}}_name\"\r\n               [formControl]=\"formModel?.get('name')\"\r\n               type=\"text\"\r\n               [placeholder]=\"placeholder\"\r\n               [tabindex]=\"-1\">\r\n      </ec-form-control>\r\n    </div>\r\n    <ec-button *ngIf=\"displayType === 'file'\"\r\n               #browseBtn\r\n               id=\"{{inputId}}_browseBtn\"\r\n               (clicked)=\"fileInput.click()\"\r\n               type=\"secondary\"\r\n               [tabindex]=\"tabindex\"\r\n               [disabled]=\"formModel?.get('name').disabled\"\r\n               label=\"Browse\"\r\n               [autofocus]=\"autofocus\">\r\n    </ec-button>\r\n  </div>\r\n  <ec-button *ngIf=\"displayType === 'button'\"\r\n             id=\"{{inputId}}_btn\"\r\n             [pending]=\"pending\"\r\n             [type]=\"buttonType\"\r\n             [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n             (clicked)=\"fileInput.click()\"\r\n             style=\"width: 100%;\">\r\n  </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -5401,7 +6565,7 @@ class TableDetailRowComponent {
     <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
       <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
     </td>
-  `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
+  `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i1$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableDetailRowComponent, decorators: [{
             type: Component,
@@ -6090,7 +7254,7 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"selectable-table-toolbar\"\r\n     *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n  <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n     class=\"table-scroll-container\"\r\n     cdkScrollable>\r\n  <table class=\"main-table\"\r\n         id=\"{{id}}\"\r\n         [ecResizableTable]=\"resizable\"\r\n         [containerEl]=\"el\"\r\n         [sortableTable]=\"sortable\"\r\n         [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"selectable-table-toolbar\"\r\n     *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n  <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n     class=\"table-scroll-container\"\r\n     cdkScrollable>\r\n  <table class=\"main-table\"\r\n         id=\"{{id}}\"\r\n         [ecResizableTable]=\"resizable\"\r\n         [containerEl]=\"el\"\r\n         [sortableTable]=\"sortable\"\r\n         [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -6806,19 +7970,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], overlayClasses: [{
                 type: Input
             }], fillParentHeight: [{
-                type: Input
-            }], disablePaginationControls: [{
-                type: Input
-            }] } });
-
-class LinkButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkButtonComponent, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[ecLinkButton]', template: `<ng-content></ng-content>`, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }]
-        }] });
+                type: Input
+            }], disablePaginationControls: [{
+                type: Input
+            }] } });
 
 ;
 class ItemPickerSelectableContext extends TableSelectableRowContext {
@@ -8352,7 +9507,7 @@ class DialogComponent {
         return this.componentRef?.instance.dialogId || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: WindowService }, { token: DialogService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "dialogSizeClass", "style.--ec-dialog-width.px": "width", "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "style.--ec-dialog-margin-align-to-top": "this.alignToTopMargin", "class.is-transparent": "this.transparentMask", "class.no-mask": "this.noMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.min-width]="minWidth" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"], dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "dialogSizeClass", "style.--ec-dialog-width.px": "width", "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "style.--ec-dialog-margin-align-to-top": "this.alignToTopMargin", "class.is-transparent": "this.transparentMask", "class.no-mask": "this.noMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.min-width]="minWidth" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -10274,7 +11429,7 @@ class PageViewComponent {
         this.dialogService.closeLatestDialog(new DialogResult(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\"\r\n         cdkScrollable>\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <ol id=\"breadcrumbs\"\r\n                *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n                <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n                    <a *ngIf=\"crumb.url; else label\"\r\n                       [routerLink]=\"crumb.url\">\r\n                        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                    </a>\r\n                    <ng-template #label>{{crumb.label}}</ng-template>\r\n                </li>\r\n            </ol>\r\n\r\n            <div class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\r\n                                 [label]=\"moreActionsLabel\"\r\n                                 [items]=\"moreActions\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { 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: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\"\r\n     class=\"flex-grow d-flex\"\r\n     [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n    <div id=\"PageViewScrollContainer\"\r\n         class=\"d-flex flex-column flex-grow scroll-y\"\r\n         [class.is-dialog]=\"isDialog\"\r\n         [class.fit-content]=\"fitContent\"\r\n         [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n         [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n         [class.footer-visible]=\"!!footerTemplate\"\r\n         cdkScrollable>\r\n        <section>\r\n            <ng-content></ng-content>\r\n        </section>\r\n\r\n        <footer *ngIf=\"footerTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </footer>\r\n\r\n        <header *ngIf=\"showHeader\">\r\n            <ol id=\"breadcrumbs\"\r\n                *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n                <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n                    <a *ngIf=\"crumb.url; else label\"\r\n                       [routerLink]=\"crumb.url\">\r\n                        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                    </a>\r\n                    <ng-template #label>{{crumb.label}}</ng-template>\r\n                </li>\r\n            </ol>\r\n\r\n            <div class=\"titlebar\">\r\n                <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n                                [title]=\"title\"\r\n                                [subTitle]=\"subTitle\"\r\n                                [subTitleUrl]=\"subTitleUrl\"\r\n                                [titleIcon]=\"titleIcon\"\r\n                                class=\"title text-truncate\">\r\n                </app-page-title>\r\n\r\n                <ng-template #customTitle>\r\n                    <div class=\"title\">\r\n                        <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n                    </div>\r\n                </ng-template>\r\n\r\n                <div class=\"actions\">\r\n                    <ec-button id=\"primaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n                               [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\r\n                               type=\"primary\"\r\n                               [label]=\"primaryActionLabel\"\r\n                               (clicked)=\"primaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-button id=\"secondaryAction\"\r\n                               class=\"ml-2\"\r\n                               *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n                               type=\"secondary\"\r\n                               [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                               (clicked)=\"secondaryAction($event)\">\r\n                    </ec-button>\r\n                    <ec-dropdown id=\"moreActions\"\r\n                                 *ngIf=\"moreActions?.length && !readonly\"\r\n                                 [disabled]=\"status?.status === 'pending'\"\r\n                                 class=\"ml-2\"\r\n                                 buttonType=\"text\"\r\n                                 [label]=\"moreActionsLabel\"\r\n                                 [items]=\"moreActions\">\r\n                    </ec-dropdown>\r\n                    <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"customHeaderTemplate\"\r\n                 class=\"page-header\">\r\n                <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n                       id=\"pageViewErrors\"\r\n                       [class.border-bottom-0]=\"!isDialog\">\r\n                <div [innerHtml]=\"errors\"></div>\r\n            </ec-banner>\r\n\r\n            <ng-template #customErrorBannerOutlet>\r\n                <ec-banner *ngIf=\"errors\"\r\n                           id=\"pageViewErrors\"\r\n                           [class.border-bottom-0]=\"!isDialog\">\r\n                    <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n                </ec-banner>\r\n            </ng-template>\r\n        </header>\r\n    </div>\r\n\r\n    <ec-button *ngIf=\"isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')\"\r\n               id=\"pageViewDialogClose\"\r\n               type=\"icon\"\r\n               icon=\"icon-cancel\"\r\n               (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { 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: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageViewComponent, decorators: [{
             type: Component,
@@ -10794,7 +11949,8 @@ class ComponentsModule {
             TooltipDirective,
             CalendarComponent,
             CalendarItemComponent,
-            DateInputComponent], imports: [CommonModule,
+            DateInputComponent,
+            KeyboardNavContainerDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
@@ -10864,7 +12020,8 @@ class ComponentsModule {
             CopyTableButtonDirective,
             TooltipDirective,
             CalendarComponent,
-            DateInputComponent] }); }
+            DateInputComponent,
+            KeyboardNavContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, providers: [
             FormGroupHelper,
             DialogService,
@@ -10957,7 +12114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TooltipDirective,
                         CalendarComponent,
                         CalendarItemComponent,
-                        DateInputComponent
+                        DateInputComponent,
+                        KeyboardNavContainerDirective
                     ],
                     imports: [
                         CommonModule,
@@ -11043,7 +12201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CopyTableButtonDirective,
                         TooltipDirective,
                         CalendarComponent,
-                        DateInputComponent
+                        DateInputComponent,
+                        KeyboardNavContainerDirective
                     ]
                 }]
         }] });
@@ -11051,6 +12210,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class RadioButtonOption {
 }
 
+class CustomValidators {
+    /**
+     * Tests the control using Angular's required validator, except returns
+     * an error map that triggers the plural 'are required' validation message
+     * instead of 'is required'
+     *
+     * @returns An error map with the `requiredPlural` property
+     * if the validation check fails, otherwise `null`.
+     */
+    static { this.requiredPlural = (control) => {
+        return Validators.required(control) !== null ? { requiredPlural: true } : null;
+    }; }
+    /**
+     * Returns a validation error if the control's value is not valid JSON.
+     */
+    static { this.json = (control) => {
+        return (control.value && JsonHelper.tryParseJSON(control.value) === undefined) ? { json: true } : null;
+    }; }
+    /**
+     * Returns a validation error if the control's value is not a valid domain.
+     */
+    static { this.domain = (control) => {
+        return (control.value && domainPattern.test(control.value) === false) ? { domain: true } : null;
+    }; }
+}
+
+var HierarchyMocks;
+(function (HierarchyMocks) {
+    HierarchyMocks.mockRoot = () => ({
+        id: "1",
+        level: 0,
+        hasChildren: true,
+        children: [],
+        label: ''
+    });
+    HierarchyMocks.bldgWithChildren = () => {
+        return {
+            placeId: 3, parentId: 0, placeTypeId: 2, placeCode: 'HASCHILDREN_BLDG', placeInfo: 'A Cool Bldg Has Children',
+            hasChildren: true, placeChildren: [], meterChildren: [], hasActiveChildren: true
+        };
+    };
+    HierarchyMocks.bldgWithChildrenHierarchyItem = () => ({
+        id: HierarchyMocks.bldgWithChildren().placeId.toString(), icon: 'icon-building', label: `${HierarchyMocks.bldgWithChildren().placeInfo} [${HierarchyMocks.bldgWithChildren().placeCode}]`,
+        children: [], hasChildren: true, level: 1, selectable: true, topLevel: false
+    });
+    HierarchyMocks.orgWithChildren = () => {
+        return {
+            placeId: 1, parentId: 0, placeTypeId: 1, placeCode: 'HASCHILDREN_ORG', placeInfo: 'A Org Has Children',
+            hasChildren: true, placeChildren: [], meterChildren: [], hasActiveChildren: true
+        };
+    };
+    HierarchyMocks.orgWithChildrenHierarchyItem = () => ({
+        id: HierarchyMocks.orgWithChildren().placeId.toString(), icon: 'icon-organization', label: `${HierarchyMocks.orgWithChildren().placeInfo} [${HierarchyMocks.orgWithChildren().placeCode}]`,
+        children: [], hasChildren: true, level: 1, selectable: true, topLevel: true
+    });
+    HierarchyMocks.orgWithoutChildren = () => {
+        return {
+            placeId: 2, parentId: 0, placeTypeId: 1, placeCode: 'NOCHILDREN_ORG', placeInfo: 'No Children Org',
+            hasChildren: false, placeChildren: [], meterChildren: [], hasActiveChildren: false
+        };
+    };
+    HierarchyMocks.orgWithoutChildrenHierarchyItem = () => ({
+        id: HierarchyMocks.orgWithoutChildren().placeId.toString(), icon: 'icon-organization', label: `${HierarchyMocks.orgWithoutChildren().placeInfo} [${HierarchyMocks.orgWithoutChildren().placeCode}]`,
+        children: [], hasChildren: false, level: 1, selectable: true, topLevel: true
+    });
+    HierarchyMocks.bldgWithoutChildren = () => {
+        return {
+            placeId: 4, parentId: 0, placeTypeId: 2, placeCode: 'NOCHILDREN_BLDG', placeInfo: 'Zzz No Children Bldg',
+            hasChildren: false, placeChildren: [], meterChildren: [], hasActiveChildren: false
+        };
+    };
+    HierarchyMocks.bldgWithoutChildrenHierarchyItem = () => ({
+        id: HierarchyMocks.bldgWithoutChildren().placeId.toString(), icon: 'icon-building', label: `${HierarchyMocks.bldgWithoutChildren().placeInfo} [${HierarchyMocks.bldgWithoutChildren().placeCode}]`,
+        children: [], hasChildren: false, level: 1, selectable: true, topLevel: false
+    });
+    HierarchyMocks.sortedHierarchyPlaces = () => [
+        HierarchyMocks.bldgWithChildrenHierarchyItem(), HierarchyMocks.orgWithChildrenHierarchyItem(), HierarchyMocks.orgWithoutChildrenHierarchyItem(), HierarchyMocks.bldgWithoutChildrenHierarchyItem()
+    ];
+})(HierarchyMocks || (HierarchyMocks = {}));
+
+/** Tag contains a label and type. Type is default by default */
+class Tag {
+    constructor(label, type, classList, icon, isDismissable, tooltip, url, target) {
+        this.target = '_self';
+        this.label = label;
+        this.type = type || 'info';
+        this.icon = icon;
+        this.isDismissable = isDismissable ?? false;
+        this.tooltip = tooltip;
+        this.url = url;
+        this.target = target || '_self';
+        if (classList) {
+            this.classList = classList;
+        }
+    }
+}
+;
+
 /** Common unicode strings */
 class UnicodeStrings {
     /** Equivalent of &ndash; */
@@ -11108,50 +12365,6 @@ function safeToLower(item, prop) {
 }
 ;
 
-/** Tag contains a label and type. Type is default by default */
-class Tag {
-    constructor(label, type, classList, icon, isDismissable, tooltip, url, target) {
-        this.target = '_self';
-        this.label = label;
-        this.type = type || 'info';
-        this.icon = icon;
-        this.isDismissable = isDismissable ?? false;
-        this.tooltip = tooltip;
-        this.url = url;
-        this.target = target || '_self';
-        if (classList) {
-            this.classList = classList;
-        }
-    }
-}
-;
-
-class CustomValidators {
-    /**
-     * Tests the control using Angular's required validator, except returns
-     * an error map that triggers the plural 'are required' validation message
-     * instead of 'is required'
-     *
-     * @returns An error map with the `requiredPlural` property
-     * if the validation check fails, otherwise `null`.
-     */
-    static { this.requiredPlural = (control) => {
-        return Validators.required(control) !== null ? { requiredPlural: true } : null;
-    }; }
-    /**
-     * Returns a validation error if the control's value is not valid JSON.
-     */
-    static { this.json = (control) => {
-        return (control.value && JsonHelper.tryParseJSON(control.value) === undefined) ? { json: true } : null;
-    }; }
-    /**
-     * Returns a validation error if the control's value is not a valid domain.
-     */
-    static { this.domain = (control) => {
-        return (control.value && domainPattern.test(control.value) === false) ? { domain: true } : null;
-    }; }
-}
-
 var PageStatus;
 (function (PageStatus) {
     PageStatus["Loading"] = "loading";
@@ -11548,6 +12761,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['class']
             }] } });
 
+class CopyButtonBaseTestInjectorFactory {
+    static getComponentInjector() {
+        return Injector.create({
+            providers: [
+                {
+                    provide: ClipboardService,
+                    useFactory: () => SpyFactory.createSpy(ClipboardService),
+                    deps: []
+                }
+            ]
+        });
+    }
+}
+
+class HierarchyBaseTestInjectorFactory {
+    static getComponentInjector() {
+        return Injector.create({
+            providers: [
+                {
+                    provide: TelemetryService,
+                    useFactory: () => SpyFactory.createSpy(TelemetryService),
+                    deps: []
+                }
+            ]
+        });
+    }
+}
+
 const clickEvent = new MouseEvent('click');
 ;
 /**
@@ -11967,88 +13208,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
-var HierarchyMocks;
-(function (HierarchyMocks) {
-    HierarchyMocks.mockRoot = () => ({
-        id: "1",
-        level: 0,
-        hasChildren: true,
-        children: [],
-        label: ''
-    });
-    HierarchyMocks.bldgWithChildren = () => {
-        return {
-            placeId: 3, parentId: 0, placeTypeId: 2, placeCode: 'HASCHILDREN_BLDG', placeInfo: 'A Cool Bldg Has Children',
-            hasChildren: true, placeChildren: [], meterChildren: [], hasActiveChildren: true
-        };
-    };
-    HierarchyMocks.bldgWithChildrenHierarchyItem = () => ({
-        id: HierarchyMocks.bldgWithChildren().placeId.toString(), icon: 'icon-building', label: `${HierarchyMocks.bldgWithChildren().placeInfo} [${HierarchyMocks.bldgWithChildren().placeCode}]`,
-        children: [], hasChildren: true, level: 1, selectable: true, topLevel: false
-    });
-    HierarchyMocks.orgWithChildren = () => {
-        return {
-            placeId: 1, parentId: 0, placeTypeId: 1, placeCode: 'HASCHILDREN_ORG', placeInfo: 'A Org Has Children',
-            hasChildren: true, placeChildren: [], meterChildren: [], hasActiveChildren: true
-        };
-    };
-    HierarchyMocks.orgWithChildrenHierarchyItem = () => ({
-        id: HierarchyMocks.orgWithChildren().placeId.toString(), icon: 'icon-organization', label: `${HierarchyMocks.orgWithChildren().placeInfo} [${HierarchyMocks.orgWithChildren().placeCode}]`,
-        children: [], hasChildren: true, level: 1, selectable: true, topLevel: true
-    });
-    HierarchyMocks.orgWithoutChildren = () => {
-        return {
-            placeId: 2, parentId: 0, placeTypeId: 1, placeCode: 'NOCHILDREN_ORG', placeInfo: 'No Children Org',
-            hasChildren: false, placeChildren: [], meterChildren: [], hasActiveChildren: false
-        };
-    };
-    HierarchyMocks.orgWithoutChildrenHierarchyItem = () => ({
-        id: HierarchyMocks.orgWithoutChildren().placeId.toString(), icon: 'icon-organization', label: `${HierarchyMocks.orgWithoutChildren().placeInfo} [${HierarchyMocks.orgWithoutChildren().placeCode}]`,
-        children: [], hasChildren: false, level: 1, selectable: true, topLevel: true
-    });
-    HierarchyMocks.bldgWithoutChildren = () => {
-        return {
-            placeId: 4, parentId: 0, placeTypeId: 2, placeCode: 'NOCHILDREN_BLDG', placeInfo: 'Zzz No Children Bldg',
-            hasChildren: false, placeChildren: [], meterChildren: [], hasActiveChildren: false
-        };
-    };
-    HierarchyMocks.bldgWithoutChildrenHierarchyItem = () => ({
-        id: HierarchyMocks.bldgWithoutChildren().placeId.toString(), icon: 'icon-building', label: `${HierarchyMocks.bldgWithoutChildren().placeInfo} [${HierarchyMocks.bldgWithoutChildren().placeCode}]`,
-        children: [], hasChildren: false, level: 1, selectable: true, topLevel: false
-    });
-    HierarchyMocks.sortedHierarchyPlaces = () => [
-        HierarchyMocks.bldgWithChildrenHierarchyItem(), HierarchyMocks.orgWithChildrenHierarchyItem(), HierarchyMocks.orgWithoutChildrenHierarchyItem(), HierarchyMocks.bldgWithoutChildrenHierarchyItem()
-    ];
-})(HierarchyMocks || (HierarchyMocks = {}));
-
-class HierarchyBaseTestInjectorFactory {
-    static getComponentInjector() {
-        return Injector.create({
-            providers: [
-                {
-                    provide: TelemetryService,
-                    useFactory: () => SpyFactory.createSpy(TelemetryService),
-                    deps: []
-                }
-            ]
-        });
-    }
-}
-
-class CopyButtonBaseTestInjectorFactory {
-    static getComponentInjector() {
-        return Injector.create({
-            providers: [
-                {
-                    provide: ClipboardService,
-                    useFactory: () => SpyFactory.createSpy(ClipboardService),
-                    deps: []
-                }
-            ]
-        });
-    }
-}
-
 /*
  * Public API Surface of @energycap/components
  */
@@ -12057,5 +13216,5 @@ class CopyButtonBaseTestInjectorFactory {
  * 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, 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, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, 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, Tour, TourAnchor, TourComponent, TourEvent, TourService, TourStep, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, integerPattern, isApiError, isCalendarSelectionSingleDate, 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, 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, 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, Tour, TourAnchor, TourComponent, TourEvent, TourService, TourStep, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
 //# sourceMappingURL=energycap-components.mjs.map