@energycap/components 0.39.16 → 0.39.17-ECAP-23124-menu-item-divider-improvements.20240523-1609

package/fesm2020/energycap-components.mjs

@@ -1479,205 +1479,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 /**
- * Primitive directive that popups a container using PopperJS
- *
- * @export
+ * Service to help with interfacing with the window object
+ * and navigating around the application (going outside of the Angular 2+ router)
  */
-class PopupContainerDirective {
+class WindowService {
     /**
-     * Creates an instance of PopupContainerDirective.
-     * @param templateRef Reference to the popup template
-     * @param viewContainer Reference to the view container
-     * @param document Reference to Document
-     * @memberof PopupContainerDirective
+     * Tracks if there are any unsaved changes that the user could lose.
+     *
+     * It is set up as `get` only because it is set with `addNavigateAwayPrompt`.
+     *
+     * This also includes adding a prompt to the window itself (in addition to
+     * working with the `CanDeactivateUnsavedChanges` guard) to cover page reloads
+     * which do not trigger router events.
      */
-    constructor(templateRef, viewContainer, document, renderer) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.document = document;
-        this.renderer = renderer;
+    get hasUnsavedChanges() {
+        return this._hasUnsavedChanges;
+    }
+    /**
+     * Expose the innerWidth on the window global. Protects against errors when code
+     * is running on a non-browser platform.
+     */
+    get innerWidth() {
+        return window ? window.innerWidth : undefined;
+    }
+    constructor(router, activatedRoute) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this._hasUnsavedChanges = false;
         /**
-         * Emit the {@link PopupStatus} when it changes
+         * Function called when the window `beforeunload` event is fired.
+         *
+         * A reference to the function that was passed to `window.addEventListener`
+         * must be retained for `window.removeEventListener` to function properly.
+         *
+         * Some browsers require the event's `returnValue` to be set to show the confirmation
+         * dialog.
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
          */
-        this.popperStatusChange = new EventEmitter();
+        this.beforeUnloadFunction = (event) => {
+            // Cancel the event as stated by the standard.
+            event.preventDefault();
+            // Chrome requires returnValue to be set.
+            event.returnValue = '';
+        };
+        if (window) {
+            this.resized = fromEvent(window, 'resize');
+        }
     }
     /**
-     * Angular onInit lifecycle hook
-     * @see https://angular.io/guide/lifecycle-hooks
+     * Navigates to the previous page the user had visited
      */
-    ngOnInit() {
-        this.templateViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+    goBack() {
+        window.history.back();
     }
-    /**
-     * Angular onDestroy lifecycle hook. Close and delete references. Unsubscribe observables
-     * @see https://angular.io/guide/lifecycle-hooks
+    /**An abstraction around the browsers window history length.
+     * Returns zero if unable to access or running outside a browser context
      */
-    ngOnDestroy() {
-        this.hide();
+    getHistoryLength() {
+        return window?.history?.length || 0;
     }
     /**
-     * Displays the templateRef as a popup
+     * Navigate to any url you know the path to
+     * @param url The URL to navigate to
      *
-     * @memberof PopupContainerDirective
+     * @deprecated For legacy support only; use `router.navigateByUrl` instead
      */
-    show() {
-        if (PopupContainerDirective.GlobalPopupRef) {
-            if (PopupContainerDirective.GlobalPopupRef != this) {
-                PopupContainerDirective.GlobalPopupRef.hide();
-                PopupContainerDirective.GlobalPopupRef = undefined;
+    async navigateToUrl(url) {
+        try {
+            if (url.indexOf('/app/') === 0) {
+                await this.router.navigateByUrl(url.substring(5));
+            }
+            else {
+                await this.router.navigateByUrl(url);
             }
         }
-        if (!this.globalCloseSubscription) {
-            this.globalCloseSubscription = fromEvent(this.document.body, "click").subscribe((event) => {
-                this.hide();
-            });
-        }
-        if (!this.popperRef) {
-            // Add the popper template as an embedded view since PopperJS
-            // manipulates DOM elements.
-            this.popupViewRef = this.viewContainer.createEmbeddedView(this.popup);
-            // Since popper needs real DOM elements, grab the first non-comment
-            // DOM element to use as our anchor.
-            let anchorElement = this.popupViewRef.rootNodes.find(elem => { return elem.nodeName !== "#text"; });
-            // Use the parents elements as our DOM elements to Popper
-            this.popperRef = new Popper(this.templateViewRef.rootNodes[0], anchorElement, this.popperOptions);
-            PopupContainerDirective.GlobalPopupRef = this;
-            this.popperStatusChange.emit('visible');
+        catch (e) {
+            // If the router throws we will try to navigate to the fully qualified url as a last ditch effort.
+            // This can happen if we missed a link that needs to be converted to ng5 or our ng1Href directive
+            // didn't handle a link correctly
+            window.location.href = url;
         }
     }
     /**
-     * Hides the templateRef
-     *
-     * @memberof PopupContainerDirective
+     * Adds a `beforeunload` function to the window to alert the user that there are about to leave
+     * the current page and ask if they'd like to leave or stay
      */
-    hide() {
-        if (this.globalCloseSubscription) {
-            this.globalCloseSubscription.unsubscribe();
-            this.globalCloseSubscription = undefined;
-        }
-        if (this.popperRef && this.popupViewRef) {
-            this.popupViewRef.destroy();
-            this.popperRef.destroy();
-            this.popperRef = undefined;
-            this.popperStatusChange.emit('hidden');
-        }
+    addNavigateAwayPrompt() {
+        this._hasUnsavedChanges = true;
+        window.addEventListener("beforeunload", this.beforeUnloadFunction);
     }
     /**
-     * Updates the popup container position
+     * Removes the `beforeunload` function added to the window
      */
-    update() {
-        if (this.popperRef) {
-            this.popperRef.update();
-        }
-    }
-    fixPosition(minWidthNone, appendToBody = false) {
-        if (this.popperRef && this.popperRef['reference'] && this.popperRef['popper']) {
-            let popupEl = this.popperRef['popper'];
-            // Reset width style previously assigned because the content may have
-            // changed and the auto width would be different
-            this.renderer.removeStyle(popupEl, 'width');
-            this.renderer.setStyle(popupEl, 'position', 'fixed');
-            if (appendToBody) {
-                const bodyEl = this.document.querySelector('body');
-                const popupParent = this.renderer.parentNode(popupEl);
-                if (popupParent !== bodyEl) {
-                    this.renderer.appendChild(bodyEl, popupEl);
-                }
-            }
-            let toggleEl = this.popperRef['reference'];
-            let width = popupEl.offsetWidth;
-            let boundaries = popupEl.getBoundingClientRect();
-            let left = boundaries.left;
-            let coords = toggleEl.getBoundingClientRect();
-            // Set the top of our menu to the bottom of the toggle element
-            let top = coords.bottom;
-            if (this.popperOptions && this.popperOptions.placement) {
-                if (this.popperOptions.placement === 'bottom-start' || this.popperOptions.placement === 'top-start') {
-                    left = coords.left;
-                }
-                else {
-                    left = coords.right - ((minWidthNone || width > coords.width) ? width : coords.width);
-                }
-            }
-            // if it won't fit (with 10px space before hitting the window edge), flip it
-            if (boundaries.height + top + 10 > window.innerHeight) {
-                top = coords.top - boundaries.height;
-            }
-            this.renderer.setStyle(popupEl, 'transform', 'none');
-            this.renderer.setStyle(popupEl, 'left', left + 'px');
-            this.renderer.setStyle(popupEl, 'top', top + 'px');
-            this.renderer.setStyle(popupEl, 'width', width + 'px');
-            if (!minWidthNone) {
-                this.renderer.setStyle(popupEl, 'min-width', coords.width + 'px');
-            }
-        }
+    removeNavigateAwayPrompt() {
+        this._hasUnsavedChanges = false;
+        window.removeEventListener("beforeunload", this.beforeUnloadFunction);
     }
-}
-/**
- *  Global reference to the currently displayed popup; only
- *  one popup directive can be in `show` state at a given time.
- *
- * @memberof PopupContainerDirective
- */
-PopupContainerDirective.GlobalPopupRef = undefined;
-PopupContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopupContainerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PopupContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopupContainerDirective, selector: "[ecPopup]", inputs: { popup: ["ecPopup", "popup"], popperOptions: ["options", "popperOptions"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopupContainerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ecPopup]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }]; }, propDecorators: { popup: [{
-                type: Input,
-                args: ['ecPopup']
-            }], popperOptions: [{
-                type: Input,
-                args: ['options']
-            }] } });
-
-class ScrollService {
-    constructor() { }
     /**
-     * Given a container and the target element to scroll to, we will set the scroll top on
-     *  the container to bring the target into view.
+     * Send data to another window.
      *
-     * @param scrollContainerSelector A valid CSS selector string for the scroll container.
-     * @param targetElementSelector A valid CSS selector string for the target element.
-     * @param topPadding The amount of space to leave above the target
-     * to keep it from being pinned to the top of the scrollContainer. Defaults
-     * to 32px, the default height of a menu item.
+     * __SECURITY RISK__ - Always use a specific target origin. Failing to provide a specific target origin can allow
+     * malicious sites to receive the message.
+     *
+     * @param targetWindow - Window to send the message to
+     * @param message - Data to send
+     * @param targetOrigin - What the URI of the target window must be for the message to be sent.
+     * If sending data to another EnergyCAP window, this should always be `window.location.origin` to ensure
+     * that only instances of EnergyCAP app receive the message.
      */
-    scrollToItem(scrollContainerSelector, targetElementSelector, topPadding = 32) {
-        let scrollContainer = document.querySelector(scrollContainerSelector);
-        if (!scrollContainer) {
-            return;
-        }
-        let targetElement = scrollContainer.querySelector(targetElementSelector);
-        if (!targetElement) {
-            return;
-        }
-        let targetRect = targetElement.getBoundingClientRect();
-        let containerRect = scrollContainer.getBoundingClientRect();
-        // Only scroll if the target is outside of the view bounds of the container
-        if (targetRect.bottom > containerRect.bottom || targetRect.top < containerRect.top) {
-            scrollContainer.scrollTop =
-                (targetRect.top - containerRect.top) + scrollContainer.scrollTop - topPadding;
-        }
+    postMessage(targetWindow, message, targetOrigin) {
+        targetWindow.postMessage(message, targetOrigin);
     }
     /**
-     * Return the value of the scrollTop property for an HTMLElement that matches the selector
-     * @param scrollContainerSelector A valid CSS selector
+     * Open a new window
+     * @param url - The URL of the resource to be loaded
      */
-    getCurrentScrollPosition(scrollContainerSelector) {
-        let scrollContainer = document.querySelector(scrollContainerSelector);
-        if (scrollContainer) {
-            return scrollContainer.scrollTop;
-        }
-        else {
-            console.error(`Scroll container '${scrollContainerSelector}' does not exist.`);
-            return 0;
-        }
+    openNew(url) {
+        window.open(url, '_blank');
+    }
+    /**
+     * A wrapper around the router for changing the query params for the current url
+     * without creating a new history entry or removing any existing query parameters.
+     * The provided params are updated if they already exist or added to the url if they don't
+     *
+     * @returns a promise that resolves to true if the navigation succeeds, false if something (like a guard) blocks it.
+     * In normal use, the navigation should succeed unless we use query params to block access to a route the user is already on
+     */
+    async modifyHistoryQueryParamsSubset(queryParams) {
+        return this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            replaceUrl: true,
+            queryParams: queryParams,
+            queryParamsHandling: 'merge',
+        });
+    }
+    /**A wrapper around the default javascript confirm dialog to allow us to unit test dependent code.
+     * Of course eventually we'd like to have pretty confirmations for everything, but in some cases it wasn't worth the extra time
+     * so we're using this instead.
+     */
+    confirm(prompt) {
+        return Promise.resolve(confirm(prompt));
+    }
+    /**
+     * Close the current window or a window instance if one is provided
+     * @param windowInstance - Window to close (optional)
+     */
+    closeWindow(windowInstance) {
+        if (windowInstance) {
+            windowInstance.close();
+        }
+        else {
+            window.close();
+        }
+    }
+    getLocation() {
+        return window.location.pathname + window.location.hash;
+    }
+    /** Get the current value of the full url, including protocol, host and path */
+    getFullUrl() {
+        return window.location.href;
+    }
+    /** Get the current value of the base url, including protocol, domain and port (if explicitly specified) */
+    getBaseUrl() {
+        return window.location.origin;
+    }
+    /**
+     * Reloads the browser window.
+     * NOT RECOMMENDED. Seek other options for reloading content within Angular before resorting to this.
+     */
+    reloadWindow() {
+        window.location.reload();
+    }
+}
+WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
+
+class ScrollService {
+    constructor() { }
+    /**
+     * Given a container and the target element to scroll to, we will set the scroll top on
+     *  the container to bring the target into view.
+     *
+     * @param scrollContainerSelector A valid CSS selector string for the scroll container.
+     * @param targetElementSelector A valid CSS selector string for the target element.
+     * @param topPadding The amount of space to leave above the target
+     * to keep it from being pinned to the top of the scrollContainer. Defaults
+     * to 32px, the default height of a menu item.
+     */
+    scrollToItem(scrollContainerSelector, targetElementSelector, topPadding = 32) {
+        let scrollContainer = document.querySelector(scrollContainerSelector);
+        if (!scrollContainer) {
+            return;
+        }
+        let targetElement = scrollContainer.querySelector(targetElementSelector);
+        if (!targetElement) {
+            return;
+        }
+        let targetRect = targetElement.getBoundingClientRect();
+        let containerRect = scrollContainer.getBoundingClientRect();
+        // Only scroll if the target is outside of the view bounds of the container
+        if (targetRect.bottom > containerRect.bottom || targetRect.top < containerRect.top) {
+            scrollContainer.scrollTop =
+                (targetRect.top - containerRect.top) + scrollContainer.scrollTop - topPadding;
+        }
+    }
+    /**
+     * Return the value of the scrollTop property for an HTMLElement that matches the selector
+     * @param scrollContainerSelector A valid CSS selector
+     */
+    getCurrentScrollPosition(scrollContainerSelector) {
+        let scrollContainer = document.querySelector(scrollContainerSelector);
+        if (scrollContainer) {
+            return scrollContainer.scrollTop;
+        }
+        else {
+            console.error(`Scroll container '${scrollContainerSelector}' does not exist.`);
+            return 0;
+        }
     }
     /**
      * Set the scrollTop of an HTMLElement that matches the selector to a specific position
@@ -1723,922 +1747,926 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-/** Advanced validation for textbox form controls */
-const textboxValidation = (validatorParams) => {
-    return (control) => {
-        let validators = [];
-        // Innocent until proven guilty
-        validatorParams.valid = true;
-        if (validatorParams.required) {
-            validators.push(Validators.required);
-        }
-        if (validatorParams.minLength !== undefined) {
-            validators.push(Validators.minLength(validatorParams.minLength));
-        }
-        if (validatorParams.maxLength !== undefined) {
-            validators.push(Validators.maxLength(validatorParams.maxLength));
-        }
-        if (validatorParams.pattern !== undefined) {
-            validators.push(Validators.pattern(validatorParams.pattern));
-        }
-        validators.forEach(validator => {
-            let validationResult = validator(control);
-            if (validationResult) {
-                validatorParams.valid = false;
-            }
-        });
-        if (validatorParams.valid) {
-            return null;
-        }
-        else {
-            return {
-                textbox: validatorParams
-            };
-        }
-    };
-};
-const phoneNumberValidationPattern = '^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$';
-const urlValidationPattern = '([A-Za-z])+(:\/\/)+[^\\s]*';
-class TextboxComponent extends FormControlBase {
-    constructor(validationMessageService, formGroupHelper, translate) {
-        super(validationMessageService, formGroupHelper);
-        this.validationMessageService = validationMessageService;
-        this.formGroupHelper = formGroupHelper;
-        this.translate = translate;
-        /**
-         * Set the value of the input's autocomplete attribute
-         */
-        this.autocomplete = 'off';
-        /**
-         * The textbox type
-         */
-        this.type = "text";
-        /**
-         * The value of the rows attribute for a textarea. Only applies to multi-line type
-         */
-        this.rows = 3;
-        /**
-         * If set to true, we will select all text within the input if
-         * autofocus is also set to true
-         */
-        this.selectOnAutofocus = false;
-        /**
-         * If set to true, we will upper case on focus out
-         */
-        this.upperCase = false;
-        /**
-         * Validation pattern for the input. This is determined on the input type specified
-         */
-        this.validationPattern = '';
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-    }
+class NavItemActiveDirective {
     /**
-     * The angular onInit lifecycle hook
+     * Determines whether the directive will try to make an exact match on the url or not
+     * If false, the directive will add the active class if the first part of the url matches
+     * the active route.
+     * see: https://angular.io/api/router/Router#isactive
      */
-    ngOnInit() {
-        super.ngOnInit();
-        this.validationPattern = '';
-        if (this.type === 'tel') {
-            this.validationPattern = phoneNumberValidationPattern;
-        }
-        else if (this.type === 'url') {
-            this.validationPattern = urlValidationPattern;
+    set exact(value) {
+        if (value === undefined) {
+            this._exact = true;
         }
-        if (this.placeholder) {
-            this.translate.get(this.placeholder)
-                .subscribe((translated) => {
-                this.placeholder = translated;
-            });
+        else {
+            this._exact = value;
         }
+        this.update();
     }
     /**
-     * The angular afterViewInit lifecycle hook
+     * The url of the NavItem to check for activeness. Convert the item url into a
+     * UrlTree relative to the ActivatedRoute so router#isActive works even with relative urls.
+     * See Angular's [routerLink](https://github.com/angular/angular/blob/8282e15c2becbe42a49befa07d6407247e8243d8/packages/router/src/directives/router_link.ts#L249)
+     * and [routerLinkActive](https://github.com/angular/angular/blob/8282e15c2becbe42a49befa07d6407247e8243d8/packages/router/src/directives/router_link_active.ts#L139)
+     * for a similiar implementation.
      */
-    ngAfterViewInit() {
-        if (this.autofocus) {
-            this.setFocus(this.selectOnAutofocus);
+    set url(value) {
+        if (value !== null && value !== undefined) {
+            this._url = this.router.createUrlTree([value], { relativeTo: this.route, queryParams: this.queryParams });
+            this.update();
         }
     }
-    /**
-     * Function to set focus on an input programmatically after the page
-     * had been rendered.  The highlight text flag will select the text
-     * within the input if passed in and true
-     */
-    setFocus(highlightText) {
-        this.inputElement.nativeElement.focus();
-        if (highlightText) {
-            this.inputElement.nativeElement.select();
-        }
+    constructor(router, el, renderer, route) {
+        this.router = router;
+        this.el = el;
+        this.renderer = renderer;
+        this.route = route;
+        this._exact = true;
+        /** Emits when the url becomes active */
+        this.routerLinkActivated = new EventEmitter();
+        /** Subject that emits when component is destroyed to unsubscribe from any subscriptions */
+        this.destroyed = new Subject();
     }
-    /**
-  * Focus out event handler
-  * will upper case and trim value if upperCase is true (this is what we do on the apis)
-  */
-    focusOutEvent() {
-        if (this.upperCase && this.formModel.value) {
-            this.formModel.setValue(this.formModel.value.toUpperCase().trim());
-        }
+    /** Check if url is active on NavigationEnd events */
+    ngOnInit() {
+        this.router.events.pipe(takeUntil(this.destroyed), filter(e => e instanceof NavigationEnd)).subscribe(() => {
+            this.update();
+        });
     }
-}
-TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n     <label *ngIf=\"label\">\r\n        <span>{{label | translate}}</span>\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors |\r\n            translate}}</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=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{validationPattern}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n\r\n        <i class=\"ec-icon icon-required\"></i>\r\n        <i class=\"ec-icon icon-invalid\"></i>\r\n        <i class=\"ec-icon icon-loading\"></i>\r\n    </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n     <label *ngIf=\"label\">\r\n        <span>{{label | translate}}</span>\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors |\r\n            translate}}</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=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{validationPattern}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n\r\n        <i class=\"ec-icon icon-required\"></i>\r\n        <i class=\"ec-icon icon-invalid\"></i>\r\n        <i class=\"ec-icon icon-loading\"></i>\r\n    </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }]; }, propDecorators: { autocomplete: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }], minlength: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], selectOnAutofocus: [{
-                type: Input
-            }], upperCase: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['textboxInput']
-            }] } });
-
-/** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
-class SpinnerComponent {
-}
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SpinnerComponent, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ec-spinner', template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
-        }] });
-
-class Overlay {
-    constructor(status, message) {
-        this.status = 'hasData';
-        this.message = '';
-        this.setStatus(status, message);
-    }
-    setStatus(status, message, action, noDataTemplate, overlayClassList) {
-        this.status = status;
-        this.message = message || '';
-        this.action = action || undefined;
-        this.noDataTemplate = noDataTemplate || undefined;
-        this.overlayClassList = overlayClassList || '';
-    }
-}
-/**
- * Wraps content in order to show pending, error, and no data states with an optional message/noDataTemplate
- */
-class ViewOverlayComponent {
-    constructor() {
-        this.status = 'hasData';
-    }
-    setStatus(status, message, action, noDataTemplate) {
-        this.status = status;
-        this.message = message || '';
-        this.action = action || undefined;
-        this.noDataTemplate = noDataTemplate || undefined;
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.unsubscribe();
     }
-    actionClicked(event) {
-        if (this.action && this.action.onClick) {
-            this.action.onClick(event);
+    /** If url is active apply the defined class to the element, otherwise remove it */
+    update() {
+        if (this._url && this.classValue) {
+            if (this.router.isActive(this._url, { matrixParams: 'ignored', queryParams: this._exact ? 'exact' : 'subset', paths: this._exact ? 'exact' : 'subset', fragment: 'ignored' })) {
+                this.renderer.addClass(this.el.nativeElement, this.classValue);
+                this.routerLinkActivated.emit(new Event('routerLinkActivated'));
+            }
+            else {
+                this.renderer.removeClass(this.el.nativeElement, this.classValue);
+            }
         }
     }
 }
-ViewOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ViewOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t  class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t   class=\"mt-3\"\r\n\t\t\t\t   *ngIf=\"action?.onClick\"\r\n\t\t\t\t   [icon]=\"action?.icon\"\r\n\t\t\t\t   (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t   [label]=\"action?.label\"\r\n\t\t\t\t   [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[ecOverlay]', template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t  class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t   class=\"mt-3\"\r\n\t\t\t\t   *ngIf=\"action?.onClick\"\r\n\t\t\t\t   [icon]=\"action?.icon\"\r\n\t\t\t\t   (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t   [label]=\"action?.label\"\r\n\t\t\t\t   [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
-        }], propDecorators: { status: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], noDataTemplate: [{
-                type: Input
-            }], displayAsMask: [{
-                type: Input
-            }], overlayClassList: [{
-                type: Input
+NavItemActiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
+NavItemActiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavItemActiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecNavItemActive]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.ActivatedRoute }]; }, propDecorators: { classValue: [{
+                type: Input,
+                args: ['ecNavItemActive']
+            }], exact: [{
+                type: Input,
+                args: ['ecNavItemActiveExactMatch']
+            }], queryParams: [{
+                type: Input,
+                args: ['ecNavItemActiveQueryParams']
+            }], url: [{
+                type: Input,
+                args: ['ecNavItemActiveUrl']
+            }], routerLinkActivated: [{
+                type: Output
             }] } });
 
+;
+const menuAnimationSpeed = 350;
 /**
- * Service to help with interfacing with the window object
- * and navigating around the application (going outside of the Angular 2+ router)
+ * Primitive Menu component that encapsulates known templates
+ *
+ * @export
  */
-class WindowService {
+class MenuComponent {
     /**
-     * Tracks if there are any unsaved changes that the user could lose.
-     *
-     * It is set up as `get` only because it is set with `addNavigateAwayPrompt`.
-     *
-     * This also includes adding a prompt to the window itself (in addition to
-     * working with the `CanDeactivateUnsavedChanges` guard) to cover page reloads
-     * which do not trigger router events.
+     * Helper function to return a flat list of all selectable items in the provided menu items. Filters out headings and divided-sections.
+     * This makes it much easier to keep track of currently highlighted items for keyboard navigation.
      */
-    get hasUnsavedChanges() {
-        return this._hasUnsavedChanges;
+    static getSelectableItems(items) {
+        return items.reduce((selectableItems, item) => {
+            if (item.display !== 'heading' && item.display !== 'divided-section') {
+                selectableItems.push(item);
+            }
+            else if (item.items) {
+                selectableItems.push(...item.items.filter(childItem => childItem.display !== 'heading' && childItem.display !== 'divided-section'));
+            }
+            return selectableItems;
+        }, []);
     }
     /**
-     * Expose the innerWidth on the window global. Protects against errors when code
-     * is running on a non-browser platform.
+     * Returns an ID for the provided item based on its index in the provided items array. This mimics the behavior of the MenuComponent's
+     * generated IDs for items that don't have provided IDs. This is used in MenuComponent and ComboboxComponent to scroll to specific items.
+     * NOTE: If the items array does not match what is displayed in the menu, this function will not return the correct ID.
+     *
+     * Returns null if the not found
+     * @param items The MenuItems array to search through.
+     * @param item The item to generate the ID for.
+     * @param menuComponentId Used to prefix the generated ID. This should be the ID of the menu component the item is present in.
+     * @memberof MenuComponent
      */
-    get innerWidth() {
-        return window ? window.innerWidth : undefined;
+    static getIndexedItemId(items, item, menuComponentId) {
+        if (item) {
+            for (let i = 0; i < items.length; i++) {
+                const itemInList = items[i];
+                if (itemInList.label === item.label) {
+                    return `${menuComponentId}_item${i}`;
+                }
+                // If the item is a heading or divided section, check its children
+                if (itemInList.items && (itemInList.display === 'heading' || itemInList.display === 'divided-section')) {
+                    for (let j = 0; j < itemInList.items.length; j++) {
+                        const childItem = itemInList.items[j];
+                        // Fall back to checking only the label if the item doesn't have an id
+                        if (childItem.label === item.label) {
+                            return `${menuComponentId}_item${i}-${j}`;
+                        }
+                    }
+                }
+            }
+        }
+        return null;
     }
-    constructor(router, activatedRoute) {
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this._hasUnsavedChanges = false;
+    constructor(el, renderer, windowService, scrollService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.windowService = windowService;
+        this.scrollService = scrollService;
         /**
-         * Function called when the window `beforeunload` event is fired.
+         * Array of items to display
          *
-         * A reference to the function that was passed to `window.addEventListener`
-         * must be retained for `window.removeEventListener` to function properly.
+         * @memberof MenuComponent
+         */
+        this.items = [];
+        /**
+         *  Selected item; annotates the item
+         *  when displayed with 'selected' class
          *
-         * Some browsers require the event's `returnValue` to be set to show the confirmation
-         * dialog.
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+         * @memberof MenuComponent
          */
-        this.beforeUnloadFunction = (event) => {
-            // Cancel the event as stated by the standard.
-            event.preventDefault();
-            // Chrome requires returnValue to be set.
-            event.returnValue = '';
-        };
-        if (window) {
-            this.resized = fromEvent(window, 'resize');
-        }
-    }
-    /**
-     * Navigates to the previous page the user had visited
-     */
-    goBack() {
-        window.history.back();
+        this.selected = null;
+        /**
+         * Display template
+         *
+         * @memberof MenuComponent
+         */
+        this.templateType = 'label';
+        /**
+         * Show message when there are no items
+         */
+        this.showNoItems = false;
+        /**
+         * Text to show when menu is empty and showNoItems is true
+         */
+        this.noDataText = 'NoItems_TC';
+        /**
+         * Controls whether keyboard navigation is enabled
+         */
+        this.enableKeyNav = false;
+        /**
+         * Item currently highlighted by keyboard navigation
+         */
+        this.highlightedItem = null;
+        /**
+         * Tells the menu to maintain the selected/lastSelected item. Turning this off is useful for
+         * action type menus that are displayed on the screen at all times and you do not
+         * want the item to be selected when clicked.
+         */
+        this.maintainSelectedItem = true;
+        /**
+         * Will prevent text-wrapping of menu items and truncate instead. Also turns on a tooltip for the menu item. Default: false;
+         */
+        this.truncateItems = false;
+        /**
+         * When true, the space for the icon is preserved for menu items that do not have icons.
+         * Only applicable for iconAndLabel menus.
+         */
+        this.preserveIconSpace = false;
+        /**
+         * Emitted when `selected` is changed. Emits the referenced object.
+         *
+         * @memberof MenuComponent
+         */
+        this.selectedChanged = new EventEmitter();
+        /**
+         * Emitted when the menu has a parent and back is clicked
+         * @memberof MenuComponent
+         */
+        this.menuClosed = new EventEmitter();
+        /**
+         * Index of the item currently highlighted using keyboard nav
+         */
+        this.highlightedItemIndex = -1;
+        /**
+         * Last item this.selected was set to via selectItem().
+         * This isn't necessarily the same as this.selected, because this.selected is an input property
+         * and could have been changed by a consumer through some means other than selectItem().
+         * This allows us to prevent double-calls to selectItem() with the same input.
+         */
+        this.lastSelected = null;
+        /**
+         * Flattened array of all selectable items in the menu. Makes it easier to keep track of the currently highlighted item for keyboard navigation.
+         */
+        this.selectableItems = [];
     }
-    /**An abstraction around the browsers window history length.
-     * Returns zero if unable to access or running outside a browser context
-     */
-    getHistoryLength() {
-        return window?.history?.length || 0;
+    ngOnChanges(changes) {
+        if (changes.items && this.items) {
+            this.selectableItems = MenuComponent.getSelectableItems(this.items);
+        }
     }
     /**
-     * Navigate to any url you know the path to
-     * @param url The URL to navigate to
+     * Sets & displays the interalized template based on
+     * the set template.
+     * @see { @link https://angular.io/guide/lifecycle-hooks|Angular Lifecycle Hooks}
      *
-     * @deprecated For legacy support only; use `router.navigateByUrl` instead
+     * @memberof MenuComponent
      */
-    async navigateToUrl(url) {
-        try {
-            if (url.indexOf('/app/') === 0) {
-                await this.router.navigateByUrl(url.substring(5));
-            }
-            else {
-                await this.router.navigateByUrl(url);
-            }
+    ngAfterContentInit() {
+        switch (this.templateType) {
+            case ("label"):
+                this.internalizedTemplate = this.iconAndLabelTemplate;
+                break;
+            case ("iconAndLabel"):
+                this.internalizedTemplate = this.iconAndLabelTemplate;
+                break;
+            case ("checkAndLabel"):
+                this.internalizedTemplate = this.checkAndLabelTemplate;
+                break;
+            case ("iconLabelCaption"):
+                this.internalizedTemplate = this.iconLabelCaptionTemplate;
+                break;
+            default:
+                throw new Error(`Invalid templateType for MenuComponent. Please use either: 'label', 'iconAndLabel' or 'checkAndLabel'`);
         }
-        catch (e) {
-            // If the router throws we will try to navigate to the fully qualified url as a last ditch effort.
-            // This can happen if we missed a link that needs to be converted to ng5 or our ng1Href directive
-            // didn't handle a link correctly
-            window.location.href = url;
+        //if the consumer provided a menuItemTemplate, override the internalizedTemplate with that.
+        if (this.customMenuTemplate) {
+            this.internalizedTemplate = this.customMenuTemplate;
         }
+        if (this.id) {
+            this.attrId = this.id;
+        }
+        this.setItemIds();
+        if (this.highlightedItem && this.selectableItems.length) {
+            this.highlightedItemIndex = this.selectableItems.findIndex(item => { return this.highlightedItem === item; });
+        }
+        this.addKeydownListener();
     }
-    /**
-     * Adds a `beforeunload` function to the window to alert the user that there are about to leave
-     * the current page and ask if they'd like to leave or stay
-     */
-    addNavigateAwayPrompt() {
-        this._hasUnsavedChanges = true;
-        window.addEventListener("beforeunload", this.beforeUnloadFunction);
-    }
-    /**
-     * Removes the `beforeunload` function added to the window
-     */
-    removeNavigateAwayPrompt() {
-        this._hasUnsavedChanges = false;
-        window.removeEventListener("beforeunload", this.beforeUnloadFunction);
-    }
-    /**
-     * Send data to another window.
-     *
-     * __SECURITY RISK__ - Always use a specific target origin. Failing to provide a specific target origin can allow
-     * malicious sites to receive the message.
-     *
-     * @param targetWindow - Window to send the message to
-     * @param message - Data to send
-     * @param targetOrigin - What the URI of the target window must be for the message to be sent.
-     * If sending data to another EnergyCAP window, this should always be `window.location.origin` to ensure
-     * that only instances of EnergyCAP app receive the message.
-     */
-    postMessage(targetWindow, message, targetOrigin) {
-        targetWindow.postMessage(message, targetOrigin);
-    }
-    /**
-     * Open a new window
-     * @param url - The URL of the resource to be loaded
-     */
-    openNew(url) {
-        window.open(url, '_blank');
+    ngOnDestroy() {
+        // Remove the listener when the component is destroyed
+        if (this.removeKeydownListener) {
+            this.removeKeydownListener();
+        }
     }
     /**
-     * A wrapper around the router for changing the query params for the current url
-     * without creating a new history entry or removing any existing query parameters.
-     * The provided params are updated if they already exist or added to the url if they don't
+     * When a menu item is selected, open a child menu if the item has items, call
+     * the item's click method if defined, or emit the selected item.
      *
-     * @returns a promise that resolves to true if the navigation succeeds, false if something (like a guard) blocks it.
-     * In normal use, the navigation should succeed unless we use query params to block access to a route the user is already on
-     */
-    async modifyHistoryQueryParamsSubset(queryParams) {
-        return this.router.navigate([], {
-            relativeTo: this.activatedRoute,
-            replaceUrl: true,
-            queryParams: queryParams,
-            queryParamsHandling: 'merge',
-        });
-    }
-    /**A wrapper around the default javascript confirm dialog to allow us to unit test dependent code.
-     * Of course eventually we'd like to have pretty confirmations for everything, but in some cases it wasn't worth the extra time
-     * so we're using this instead.
+     * @param item The selected item
+     * @memberof MenuComponent
      */
-    confirm(prompt) {
-        return Promise.resolve(confirm(prompt));
+    selectItem(event, item, isKeyEvent) {
+        event.stopPropagation();
+        //In the case that the user clicks an item, selectItem() will be called from the click handler
+        //and through onRouterLinkActivated. Only one of these will make it through this if statement
+        //because the first one will set this.lastSelected = item.
+        if (!item.disabled && !item.readonly && this.lastSelected !== item) {
+            if (!item.url) {
+                if (item.onClick) {
+                    item.onClick(item, false);
+                }
+                if (item.items && item.display !== 'heading' && item.display !== 'divided-section') {
+                    this.toggleChildMenu(true);
+                }
+                else {
+                    this.onSelection(item);
+                }
+                // We need to manually handle the url navigation if the keyboard was used
+            }
+            else if (isKeyEvent || event.target?.tagName === 'LI') {
+                if (item.target) {
+                    window.open(item.url, item.target);
+                }
+                else {
+                    this.windowService.navigateToUrl(item.url);
+                }
+                // Emit so upstream components know an item was selected
+                this.onSelection(item);
+            }
+            else {
+                this.onSelection(item);
+            }
+            if (this.maintainSelectedItem) {
+                this.selected = item;
+                this.lastSelected = item;
+            }
+            else {
+                this.selected = null;
+                this.lastSelected = null;
+            }
+        }
     }
     /**
-     * Close the current window or a window instance if one is provided
-     * @param windowInstance - Window to close (optional)
+     * Close the current menu and open the parent menu
+     * @memberof MenuComponent
      */
-    closeWindow(windowInstance) {
-        if (windowInstance) {
-            windowInstance.close();
-        }
-        else {
-            window.close();
+    back(event) {
+        event.stopPropagation();
+        if (this.parent && this.parent.onClick) {
+            this.parent.onClick(null, true);
         }
-    }
-    getLocation() {
-        return window.location.pathname + window.location.hash;
-    }
-    /** Get the current value of the full url, including protocol, host and path */
-    getFullUrl() {
-        return window.location.href;
-    }
-    /** Get the current value of the base url, including protocol, domain and port (if explicitly specified) */
-    getBaseUrl() {
-        return window.location.origin;
+        this.menuClosed.emit();
     }
     /**
-     * Reloads the browser window.
-     * NOT RECOMMENDED. Seek other options for reloading content within Angular before resorting to this.
+     * Emit the selected item
+     * @param item The selected item
      */
-    reloadWindow() {
-        window.location.reload();
+    onSelection(item) {
+        if (item.display !== 'heading' && item.display !== 'divided-section') {
+            this.selectedChanged.emit(item);
+        }
     }
-}
-WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
-
-class NavItemActiveDirective {
     /**
-     * Determines whether the directive will try to make an exact match on the url or not
-     * If false, the directive will add the active class if the first part of the url matches
-     * the active route.
-     * see: https://angular.io/api/router/Router#isactive
+     * Open or close the child menu. When the child menu closes, the selected
+     * item is reset.
+     * @memberof MenuComponent
      */
-    set exact(value) {
-        if (value === undefined) {
-            this._exact = true;
+    toggleChildMenu(open) {
+        let navEl = this.el.nativeElement.querySelector('nav');
+        if (open) {
+            // Remove the listener on the parent menu when a child menu is opened
+            // This is to avoid interference between the parent and child menus
+            if (this.removeKeydownListener) {
+                this.removeKeydownListener();
+            }
+            let height = navEl.offsetHeight;
+            let width = navEl.offsetWidth;
+            // In order to animate the child menu, we need to set height on the nav element
+            // so we can absolutely position the two menus and maintain the current menu's height
+            this.renderer.setStyle(navEl, 'height', `${height}px`);
+            this.renderer.setStyle(navEl, 'width', `${width}px`);
+            this.renderer.addClass(this.el.nativeElement, 'open');
+            setTimeout(() => {
+                this.renderer.addClass(this.el.nativeElement, 'open-active');
+            });
         }
         else {
-            this._exact = value;
+            // Re-add the listener once the child menu closes
+            this.addKeydownListener();
+            this.renderer.removeClass(this.el.nativeElement, 'open-active');
+            setTimeout(() => {
+                this.renderer.removeClass(this.el.nativeElement, 'open');
+                // Reset the nav element's height to auto
+                this.renderer.setStyle(navEl, 'height', '100%');
+                this.selected = null;
+            }, menuAnimationSpeed);
         }
-        this.update();
     }
     /**
-     * The url of the NavItem to check for activeness. Convert the item url into a
-     * UrlTree relative to the ActivatedRoute so router#isActive works even with relative urls.
-     * See Angular's [routerLink](https://github.com/angular/angular/blob/8282e15c2becbe42a49befa07d6407247e8243d8/packages/router/src/directives/router_link.ts#L249)
-     * and [routerLinkActive](https://github.com/angular/angular/blob/8282e15c2becbe42a49befa07d6407247e8243d8/packages/router/src/directives/router_link_active.ts#L139)
-     * for a similiar implementation.
+     * Handle key presses to navigate the menu
      */
-    set url(value) {
-        if (value !== null && value !== undefined) {
-            this._url = this.router.createUrlTree([value], { relativeTo: this.route, queryParams: this.queryParams });
-            this.update();
-        }
-    }
-    constructor(router, el, renderer, route) {
-        this.router = router;
-        this.el = el;
-        this.renderer = renderer;
-        this.route = route;
-        this._exact = true;
-        /** Emits when the url becomes active */
-        this.routerLinkActivated = new EventEmitter();
-        /** Subject that emits when component is destroyed to unsubscribe from any subscriptions */
-        this.destroyed = new Subject();
-    }
-    /** Check if url is active on NavigationEnd events */
-    ngOnInit() {
-        this.router.events.pipe(takeUntil(this.destroyed), filter(e => e instanceof NavigationEnd)).subscribe(() => {
-            this.update();
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.unsubscribe();
-    }
-    /** If url is active apply the defined class to the element, otherwise remove it */
-    update() {
-        if (this._url && this.classValue) {
-            if (this.router.isActive(this._url, { matrixParams: 'ignored', queryParams: this._exact ? 'exact' : 'subset', paths: this._exact ? 'exact' : 'subset', fragment: 'ignored' })) {
-                this.renderer.addClass(this.el.nativeElement, this.classValue);
-                this.routerLinkActivated.emit(new Event('routerLinkActivated'));
-            }
-            else {
-                this.renderer.removeClass(this.el.nativeElement, this.classValue);
+    keyNavigate(event) {
+        if (this.enableKeyNav && event.target === this.dropdownToggleButton?.nativeElement) {
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'Up':
+                case 'ArrowDown':
+                case 'Down':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.moveHighlightedUpOrDown(event);
+                    break;
+                case 'ArrowRight':
+                case 'Right':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    // Select the item if it has child items
+                    if (this.highlightedItem && this.highlightedItem.items) {
+                        this.selectItem(event, this.highlightedItem, true);
+                    }
+                    break;
+                case 'ArrowLeft':
+                case 'Left':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    // Close the menu if it is a child menu
+                    if (this.parent) {
+                        this.back(event);
+                    }
+                    break;
+                case ' ':
+                case 'Spacebar':
+                case 'Enter':
+                    // Prevent 'enter' from doing whatever it does on the currently focused element
+                    event.preventDefault();
+                    if (this.highlightedItemIndex > -1 && this.highlightedItem) {
+                        this.selectItem(event, this.highlightedItem, true);
+                        // If the header is highlighted
+                    }
+                    else if (this.highlightedItemIndex === -1) {
+                        // Close the menu if it's a child
+                        if (this.parent) {
+                            this.back(event);
+                        }
+                    }
+                    break;
+                default:
+                    return;
             }
         }
     }
+    /**
+     * Scroll to the item currently marked as 'is-selected'. Wait a tick for the
+     * NgClassDirecitve or NavItemActiveDirective to respond to the model changes
+     * and update the view.
+     */
+    scrollToSelectedItem() {
+        window.setTimeout(() => {
+            const linkSelector = `li.is-selected`;
+            this.scrollService.scrollToItem(`#${this.id}_list`, linkSelector);
+        });
+    }
+    moveHighlightedUpOrDown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'Up':
+                if (this.highlightedItemIndex > -1) {
+                    this.highlightedItemIndex--;
+                }
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                if (this.highlightedItemIndex < this.selectableItems.length - 1) {
+                    this.highlightedItemIndex++;
+                }
+                break;
+            default:
+                return;
+        }
+        if (this.highlightedItemIndex > -1) {
+            // Store the item at the current highlight index
+            this.highlightedItem = this.selectableItems[this.highlightedItemIndex];
+        }
+        else {
+            this.highlightedItem = null;
+        }
+        this.scrollToHighlightedItem();
+    }
+    /**
+     * Scroll to the specified menu item.
+   * If no item is provided, it will scroll to the first item.
+     *
+   * @param item The menu item to scroll to.
+     * @memberof MenuComponent
+     */
+    scrollMenu(item) {
+        if (this.items.length > 0 && this.id) {
+            item = item ? item : this.items[0];
+            let itemId = item.id ? item.id : MenuComponent.getIndexedItemId(this.items, item, this.id);
+            this.scrollService.scrollItemCentered(`#${this.id}_list`, `#${itemId}`);
+        }
+    }
+    scrollToHighlightedItem() {
+        this.scrollMenu(this.highlightedItem);
+    }
+    addKeydownListener() {
+        // Only attempt to add the listener if keyboard nav is enabled
+        if (this.enableKeyNav) {
+            // renderer.listen adds the listener and returns a function to remove it from the renderer.
+            // The listener remains active until this function is called.
+            this.removeKeydownListener = this.renderer.listen('document', 'keydown', (event) => this.keyNavigate(event));
+        }
+    }
+    /**
+     * Sets the menu item ids using its index if item doesn't already have one
+     */
+    setItemIds() {
+        if (this.items) {
+            this.items.forEach((item, index) => {
+                item.id = item.id ? item.id : this.id + '_item' + index;
+            });
+        }
+    }
 }
-NavItemActiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
-NavItemActiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavItemActiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ecNavItemActive]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.ActivatedRoute }]; }, propDecorators: { classValue: [{
-                type: Input,
-                args: ['ecNavItemActive']
-            }], exact: [{
-                type: Input,
-                args: ['ecNavItemActiveExactMatch']
-            }], queryParams: [{
-                type: Input,
-                args: ['ecNavItemActiveQueryParams']
-            }], url: [{
-                type: Input,
-                args: ['ecNavItemActiveUrl']
-            }], routerLinkActivated: [{
+MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\r\n        [attr.disabled]=\"item.disabled\"\r\n        [hidden]=\"item.hidden\"\r\n        ecNavItemActive=\"is-selected\"\r\n        [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n        [ecNavItemActiveUrl]=\"item.url\"\r\n        [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n        (routerLinkActivated)=\"selectItem($event, item)\"\r\n        [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n        (click)=\"selectItem($event, item)\">\r\n\r\n        <a *ngIf=\"item.url && !item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams || null\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <a *ngIf=\"item.url && item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           href=\"{{item.url}}\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <div *ngIf=\"!item.url\"\r\n             title=\"{{truncateItems ? item.label : ''}}\"\r\n             class=\"item-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </div>\r\n    </li>\r\n</ng-template>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider + .divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\r\n        [attr.disabled]=\"item.disabled\"\r\n        [hidden]=\"item.hidden\"\r\n        ecNavItemActive=\"is-selected\"\r\n        [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n        [ecNavItemActiveUrl]=\"item.url\"\r\n        [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n        (routerLinkActivated)=\"selectItem($event, item)\"\r\n        [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n        (click)=\"selectItem($event, item)\">\r\n\r\n        <a *ngIf=\"item.url && !item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams || null\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <a *ngIf=\"item.url && item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           href=\"{{item.url}}\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <div *ngIf=\"!item.url\"\r\n             title=\"{{truncateItems ? item.label : ''}}\"\r\n             class=\"item-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </div>\r\n    </li>\r\n</ng-template>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider + .divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
+                type: Input
+            }], attrId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], items: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], templateType: [{
+                type: Input
+            }], customMenuTemplate: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showNoItems: [{
+                type: Input
+            }], noDataText: [{
+                type: Input
+            }], enableKeyNav: [{
+                type: Input
+            }], highlightedItem: [{
+                type: Input
+            }], maintainSelectedItem: [{
+                type: Input
+            }], truncateItems: [{
+                type: Input
+            }], preserveIconSpace: [{
+                type: Input
+            }], dropdownToggleButton: [{
+                type: Input
+            }], selectedChanged: [{
                 type: Output
+            }], menuClosed: [{
+                type: Output
+            }], labelTemplate: [{
+                type: ViewChild,
+                args: ['label', { static: true }]
+            }], iconAndLabelTemplate: [{
+                type: ViewChild,
+                args: ['iconAndLabel', { static: true }]
+            }], checkAndLabelTemplate: [{
+                type: ViewChild,
+                args: ['checkAndLabel', { static: true }]
+            }], iconLabelCaptionTemplate: [{
+                type: ViewChild,
+                args: ['iconLabelCaption', { static: true }]
             }] } });
 
-;
-const menuAnimationSpeed = 350;
 /**
- * Primitive Menu component that encapsulates known templates
+ * Primitive directive that popups a container using PopperJS
  *
  * @export
  */
-class MenuComponent {
-    constructor(el, renderer, windowService, scrollService) {
-        this.el = el;
+class PopupContainerDirective {
+    /**
+     * Creates an instance of PopupContainerDirective.
+     * @param templateRef Reference to the popup template
+     * @param viewContainer Reference to the view container
+     * @param document Reference to Document
+     * @memberof PopupContainerDirective
+     */
+    constructor(templateRef, viewContainer, document, renderer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.document = document;
         this.renderer = renderer;
-        this.windowService = windowService;
-        this.scrollService = scrollService;
-        /**
-         * Array of items to display
-         *
-         * @memberof MenuComponent
-         */
-        this.items = [];
-        /**
-         *  Selected item; annotates the item
-         *  when displayed with 'selected' class
-         *
-         * @memberof MenuComponent
-         */
-        this.selected = null;
-        /**
-         * Display template
-         *
-         * @memberof MenuComponent
-         */
-        this.templateType = 'label';
         /**
-         * Show message when there are no items
-         */
-        this.showNoItems = false;
-        /**
-         * Text to show when menu is empty and showNoItems is true
-         */
-        this.noDataText = 'NoItems_TC';
-        /**
-         * Controls whether keyboard navigation is enabled
-         */
-        this.enableKeyNav = false;
-        /**
-         * Item currently highlighted by keyboard navigation
-         */
-        this.highlightedItem = null;
-        /**
-         * Tells the menu to maintain the selected/lastSelected item. Turning this off is useful for
-         * action type menus that are displayed on the screen at all times and you do not
-         * want the item to be selected when clicked.
-         */
-        this.maintainSelectedItem = true;
-        /**
-         * Will prevent text-wrapping of menu items and truncate instead. Also turns on a tooltip for the menu item. Default: false;
-         */
-        this.truncateItems = false;
-        /**
-         * When true, the space for the icon is preserved for menu items that do not have icons.
-         * Only applicable for iconAndLabel menus.
-         */
-        this.preserveIconSpace = false;
-        /**
-         * Emitted when `selected` is changed. Emits the referenced object.
-         *
-         * @memberof MenuComponent
-         */
-        this.selectedChanged = new EventEmitter();
-        /**
-         * Emitted when the menu has a parent and back is clicked
-         * @memberof MenuComponent
-         */
-        this.menuClosed = new EventEmitter();
-        /**
-         * Index of the item currently highlighted using keyboard nav
-         */
-        this.highlightedItemIndex = -1;
-        /**
-         * Last item this.selected was set to via selectItem().
-         * This isn't necessarily the same as this.selected, because this.selected is an input property
-         * and could have been changed by a consumer through some means other than selectItem().
-         * This allows us to prevent double-calls to selectItem() with the same input.
+         * Emit the {@link PopupStatus} when it changes
          */
-        this.lastSelected = null;
+        this.popperStatusChange = new EventEmitter();
     }
     /**
-     * Sets & displays the interalized template based on
-     * the set template.
-     * @see { @link https://angular.io/guide/lifecycle-hooks|Angular Lifecycle Hooks}
+     * Angular onInit lifecycle hook
+     * @see https://angular.io/guide/lifecycle-hooks
+     */
+    ngOnInit() {
+        this.templateViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+    }
+    /**
+     * Angular onDestroy lifecycle hook. Close and delete references. Unsubscribe observables
+     * @see https://angular.io/guide/lifecycle-hooks
+     */
+    ngOnDestroy() {
+        this.hide();
+    }
+    /**
+     * Displays the templateRef as a popup
      *
-     * @memberof MenuComponent
+     * @memberof PopupContainerDirective
      */
-    ngAfterContentInit() {
-        switch (this.templateType) {
-            case ("label"):
-                this.internalizedTemplate = this.iconAndLabelTemplate;
-                break;
-            case ("iconAndLabel"):
-                this.internalizedTemplate = this.iconAndLabelTemplate;
-                break;
-            case ("checkAndLabel"):
-                this.internalizedTemplate = this.checkAndLabelTemplate;
-                break;
-            case ("iconLabelCaption"):
-                this.internalizedTemplate = this.iconLabelCaptionTemplate;
-                break;
-            default:
-                throw new Error(`Invalid templateType for MenuComponent. Please use either: 'label', 'iconAndLabel' or 'checkAndLabel'`);
-        }
-        //if the consumer provided a menuItemTemplate, override the internalizedTemplate with that.
-        if (this.customMenuTemplate) {
-            this.internalizedTemplate = this.customMenuTemplate;
+    show() {
+        if (PopupContainerDirective.GlobalPopupRef) {
+            if (PopupContainerDirective.GlobalPopupRef != this) {
+                PopupContainerDirective.GlobalPopupRef.hide();
+                PopupContainerDirective.GlobalPopupRef = undefined;
+            }
         }
-        if (this.id) {
-            this.attrId = this.id;
+        if (!this.globalCloseSubscription) {
+            this.globalCloseSubscription = fromEvent(this.document.body, "click").subscribe((event) => {
+                this.hide();
+            });
         }
-        this.setItemIds();
-        if (this.highlightedItem && this.items.length) {
-            this.highlightedItemIndex = this.items.findIndex(item => { return this.highlightedItem === item; });
+        if (!this.popperRef) {
+            // Add the popper template as an embedded view since PopperJS
+            // manipulates DOM elements.
+            this.popupViewRef = this.viewContainer.createEmbeddedView(this.popup);
+            // Since popper needs real DOM elements, grab the first non-comment
+            // DOM element to use as our anchor.
+            let anchorElement = this.popupViewRef.rootNodes.find(elem => { return elem.nodeName !== "#text"; });
+            // Use the parents elements as our DOM elements to Popper
+            this.popperRef = new Popper(this.templateViewRef.rootNodes[0], anchorElement, this.popperOptions);
+            PopupContainerDirective.GlobalPopupRef = this;
+            this.popperStatusChange.emit('visible');
         }
-        this.addKeydownListener();
     }
-    ngOnDestroy() {
-        // Remove the listener when the component is destroyed
-        if (this.removeKeydownListener) {
-            this.removeKeydownListener();
+    /**
+     * Hides the templateRef
+     *
+     * @memberof PopupContainerDirective
+     */
+    hide() {
+        if (this.globalCloseSubscription) {
+            this.globalCloseSubscription.unsubscribe();
+            this.globalCloseSubscription = undefined;
+        }
+        if (this.popperRef && this.popupViewRef) {
+            this.popupViewRef.destroy();
+            this.popperRef.destroy();
+            this.popperRef = undefined;
+            this.popperStatusChange.emit('hidden');
         }
     }
     /**
-     * When a menu item is selected, open a child menu if the item has items, call
-     * the item's click method if defined, or emit the selected item.
-     *
-     * @param item The selected item
-     * @memberof MenuComponent
+     * Updates the popup container position
      */
-    selectItem(event, item, isKeyEvent) {
-        event.stopPropagation();
-        //In the case that the user clicks an item, selectItem() will be called from the click handler
-        //and through onRouterLinkActivated. Only one of these will make it through this if statement
-        //because the first one will set this.lastSelected = item.
-        if (!item.disabled && !item.readonly && this.lastSelected !== item) {
-            if (!item.url) {
-                if (item.onClick) {
-                    item.onClick(item, false);
-                }
-                if (item.items) {
-                    this.toggleChildMenu(true);
-                }
-                else {
-                    this.onSelection(item);
+    update() {
+        if (this.popperRef) {
+            this.popperRef.update();
+        }
+    }
+    fixPosition(minWidthNone, appendToBody = false) {
+        if (this.popperRef && this.popperRef['reference'] && this.popperRef['popper']) {
+            let popupEl = this.popperRef['popper'];
+            // Reset width style previously assigned because the content may have
+            // changed and the auto width would be different
+            this.renderer.removeStyle(popupEl, 'width');
+            this.renderer.setStyle(popupEl, 'position', 'fixed');
+            if (appendToBody) {
+                const bodyEl = this.document.querySelector('body');
+                const popupParent = this.renderer.parentNode(popupEl);
+                if (popupParent !== bodyEl) {
+                    this.renderer.appendChild(bodyEl, popupEl);
                 }
-                // We need to manually handle the url navigation if the keyboard was used
             }
-            else if (isKeyEvent || event.target?.tagName === 'LI') {
-                if (item.target) {
-                    window.open(item.url, item.target);
+            let toggleEl = this.popperRef['reference'];
+            let width = popupEl.offsetWidth;
+            let boundaries = popupEl.getBoundingClientRect();
+            let left = boundaries.left;
+            let coords = toggleEl.getBoundingClientRect();
+            // Set the top of our menu to the bottom of the toggle element
+            let top = coords.bottom;
+            if (this.popperOptions && this.popperOptions.placement) {
+                if (this.popperOptions.placement === 'bottom-start' || this.popperOptions.placement === 'top-start') {
+                    left = coords.left;
                 }
                 else {
-                    this.windowService.navigateToUrl(item.url);
+                    left = coords.right - ((minWidthNone || width > coords.width) ? width : coords.width);
                 }
-                // Emit so upstream components know an item was selected
-                this.onSelection(item);
-            }
-            else {
-                this.onSelection(item);
             }
-            if (this.maintainSelectedItem) {
-                this.selected = item;
-                this.lastSelected = item;
+            // if it won't fit (with 10px space before hitting the window edge), flip it
+            if (boundaries.height + top + 10 > window.innerHeight) {
+                top = coords.top - boundaries.height;
             }
-            else {
-                this.selected = null;
-                this.lastSelected = null;
+            this.renderer.setStyle(popupEl, 'transform', 'none');
+            this.renderer.setStyle(popupEl, 'left', left + 'px');
+            this.renderer.setStyle(popupEl, 'top', top + 'px');
+            this.renderer.setStyle(popupEl, 'width', width + 'px');
+            if (!minWidthNone) {
+                this.renderer.setStyle(popupEl, 'min-width', coords.width + 'px');
             }
         }
     }
-    /**
-     * Close the current menu and open the parent menu
-     * @memberof MenuComponent
-     */
-    back(event) {
-        event.stopPropagation();
-        if (this.parent && this.parent.onClick) {
-            this.parent.onClick(null, true);
+}
+/**
+ *  Global reference to the currently displayed popup; only
+ *  one popup directive can be in `show` state at a given time.
+ *
+ * @memberof PopupContainerDirective
+ */
+PopupContainerDirective.GlobalPopupRef = undefined;
+PopupContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopupContainerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PopupContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: PopupContainerDirective, selector: "[ecPopup]", inputs: { popup: ["ecPopup", "popup"], popperOptions: ["options", "popperOptions"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PopupContainerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ecPopup]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }]; }, propDecorators: { popup: [{
+                type: Input,
+                args: ['ecPopup']
+            }], popperOptions: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+/** Advanced validation for textbox form controls */
+const textboxValidation = (validatorParams) => {
+    return (control) => {
+        let validators = [];
+        // Innocent until proven guilty
+        validatorParams.valid = true;
+        if (validatorParams.required) {
+            validators.push(Validators.required);
         }
-        this.menuClosed.emit();
-    }
-    /**
-     * Emit the selected item
-     * @param item The selected item
-     */
-    onSelection(item) {
-        if (item.display !== 'heading') {
-            this.selectedChanged.emit(item);
+        if (validatorParams.minLength !== undefined) {
+            validators.push(Validators.minLength(validatorParams.minLength));
         }
-    }
-    /**
-     * Open or close the child menu. When the child menu closes, the selected
-     * item is reset.
-     * @memberof MenuComponent
-     */
-    toggleChildMenu(open) {
-        let navEl = this.el.nativeElement.querySelector('nav');
-        if (open) {
-            // Remove the listener on the parent menu when a child menu is opened
-            // This is to avoid interference between the parent and child menus
-            if (this.removeKeydownListener) {
-                this.removeKeydownListener();
-            }
-            let height = navEl.offsetHeight;
-            let width = navEl.offsetWidth;
-            // In order to animate the child menu, we need to set height on the nav element
-            // so we can absolutely position the two menus and maintain the current menu's height
-            this.renderer.setStyle(navEl, 'height', `${height}px`);
-            this.renderer.setStyle(navEl, 'width', `${width}px`);
-            this.renderer.addClass(this.el.nativeElement, 'open');
-            setTimeout(() => {
-                this.renderer.addClass(this.el.nativeElement, 'open-active');
-            });
+        if (validatorParams.maxLength !== undefined) {
+            validators.push(Validators.maxLength(validatorParams.maxLength));
         }
-        else {
-            // Re-add the listener once the child menu closes
-            this.addKeydownListener();
-            this.renderer.removeClass(this.el.nativeElement, 'open-active');
-            setTimeout(() => {
-                this.renderer.removeClass(this.el.nativeElement, 'open');
-                // Reset the nav element's height to auto
-                this.renderer.setStyle(navEl, 'height', '100%');
-                this.selected = null;
-            }, menuAnimationSpeed);
+        if (validatorParams.pattern !== undefined) {
+            validators.push(Validators.pattern(validatorParams.pattern));
         }
-    }
-    /**
-     * Handle key presses to navigate the menu
-     */
-    keyNavigate(event) {
-        if (this.enableKeyNav && event.target === this.dropdownToggleButton?.nativeElement) {
-            switch (event.key) {
-                case 'ArrowUp':
-                case 'Up':
-                case 'ArrowDown':
-                case 'Down':
-                    event.stopPropagation();
-                    event.preventDefault();
-                    this.moveHighlightedUpOrDown(event);
-                    break;
-                case 'ArrowRight':
-                case 'Right':
-                    event.stopPropagation();
-                    event.preventDefault();
-                    // Select the item if it has child items
-                    if (this.highlightedItem && this.highlightedItem.items) {
-                        this.selectItem(event, this.highlightedItem, true);
-                    }
-                    break;
-                case 'ArrowLeft':
-                case 'Left':
-                    event.stopPropagation();
-                    event.preventDefault();
-                    // Close the menu if it is a child menu
-                    if (this.parent) {
-                        this.back(event);
-                    }
-                    break;
-                case ' ':
-                case 'Spacebar':
-                case 'Enter':
-                    // Prevent 'enter' from doing whatever it does on the currently focused element
-                    event.preventDefault();
-                    if (this.highlightedItemIndex > -1 && this.highlightedItem) {
-                        this.selectItem(event, this.highlightedItem, true);
-                        // If the header is highlighted
-                    }
-                    else if (this.highlightedItemIndex === -1) {
-                        // Close the menu if it's a child
-                        if (this.parent) {
-                            this.back(event);
-                        }
-                    }
-                    break;
-                default:
-                    return;
+        validators.forEach(validator => {
+            let validationResult = validator(control);
+            if (validationResult) {
+                validatorParams.valid = false;
             }
+        });
+        if (validatorParams.valid) {
+            return null;
+        }
+        else {
+            return {
+                textbox: validatorParams
+            };
         }
+    };
+};
+const phoneNumberValidationPattern = '^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$';
+const urlValidationPattern = '([A-Za-z])+(:\/\/)+[^\\s]*';
+class TextboxComponent extends FormControlBase {
+    constructor(validationMessageService, formGroupHelper, translate) {
+        super(validationMessageService, formGroupHelper);
+        this.validationMessageService = validationMessageService;
+        this.formGroupHelper = formGroupHelper;
+        this.translate = translate;
+        /**
+         * Set the value of the input's autocomplete attribute
+         */
+        this.autocomplete = 'off';
+        /**
+         * The textbox type
+         */
+        this.type = "text";
+        /**
+         * The value of the rows attribute for a textarea. Only applies to multi-line type
+         */
+        this.rows = 3;
+        /**
+         * If set to true, we will select all text within the input if
+         * autofocus is also set to true
+         */
+        this.selectOnAutofocus = false;
+        /**
+         * If set to true, we will upper case on focus out
+         */
+        this.upperCase = false;
+        /**
+         * Validation pattern for the input. This is determined on the input type specified
+         */
+        this.validationPattern = '';
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
     }
     /**
-     * Scroll to the item currently marked as 'is-selected'. Wait a tick for the
-     * NgClassDirecitve or NavItemActiveDirective to respond to the model changes
-     * and update the view.
+     * The angular onInit lifecycle hook
      */
-    scrollToSelectedItem() {
-        window.setTimeout(() => {
-            const linkSelector = `li.is-selected`;
-            this.scrollService.scrollToItem(`#${this.id}_list`, linkSelector);
-        });
-    }
-    moveHighlightedUpOrDown(event) {
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'Up':
-                if (this.highlightedItemIndex > -1) {
-                    this.highlightedItemIndex--;
-                    // Skip any in-menu heading items
-                    if (this.highlightedItemIndex > -1 && this.items[this.highlightedItemIndex].display === 'heading') {
-                        this.highlightedItemIndex--;
-                    }
-                }
-                break;
-            case 'ArrowDown':
-            case 'Down':
-                if (this.highlightedItemIndex < this.items.length - 1) {
-                    this.highlightedItemIndex++;
-                    // Skip any in-menu heading items
-                    if (this.highlightedItemIndex < this.items.length - 1 && this.items[this.highlightedItemIndex].display === 'heading') {
-                        this.highlightedItemIndex++;
-                    }
-                }
-                break;
-            default:
-                return;
+    ngOnInit() {
+        super.ngOnInit();
+        this.validationPattern = '';
+        if (this.type === 'tel') {
+            this.validationPattern = phoneNumberValidationPattern;
         }
-        if (this.highlightedItemIndex > -1) {
-            // Store the item at the current highlight index
-            this.highlightedItem = this.items[this.highlightedItemIndex];
+        else if (this.type === 'url') {
+            this.validationPattern = urlValidationPattern;
         }
-        else {
-            this.highlightedItem = null;
+        if (this.placeholder) {
+            this.translate.get(this.placeholder)
+                .subscribe((translated) => {
+                this.placeholder = translated;
+            });
         }
-        this.scrollToHighlightedItem();
     }
     /**
-     * Scroll to the specified menu item.
-   * If no item is provided, it will scroll to the first item.
-     *
-   * @param item The menu item to scroll to.
-     * @memberof MenuComponent
+     * The angular afterViewInit lifecycle hook
      */
-    scrollMenu(item) {
-        if (this.items.length > 0) {
-            item = item ? item : this.items[0];
-            let itemIndex = this.findItemIndex(item);
-            if (this.id) {
-                let itemSelector = item.id ? `#${item.id}` : `#${this.id}_item${itemIndex}`;
-                this.scrollService.scrollItemCentered(`#${this.id}_list`, itemSelector);
-            }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            this.setFocus(this.selectOnAutofocus);
         }
     }
-    scrollToHighlightedItem() {
-        this.scrollMenu(this.highlightedItem);
-    }
     /**
-     * Find a given item's index in the filtered items array.
-     *
-     * Returns -1 if not found
-     * @param itemToFind The matching item to find in the items array.
-     * @memberof MenuComponent
+     * Function to set focus on an input programmatically after the page
+     * had been rendered.  The highlight text flag will select the text
+     * within the input if passed in and true
      */
-    findItemIndex(itemToFind) {
-        if (itemToFind) {
-            return this.items.findIndex(item => {
-                return item.label === itemToFind.label;
-            });
-        }
-        else {
-            return -1;
-        }
-    }
-    addKeydownListener() {
-        // Only attempt to add the listener if keyboard nav is enabled
-        if (this.enableKeyNav) {
-            // renderer.listen adds the listener and returns a function to remove it from the renderer.
-            // The listener remains active until this function is called.
-            this.removeKeydownListener = this.renderer.listen('document', 'keydown', (event) => this.keyNavigate(event));
+    setFocus(highlightText) {
+        this.inputElement.nativeElement.focus();
+        if (highlightText) {
+            this.inputElement.nativeElement.select();
         }
     }
     /**
-     * Sets the menu item ids using its index if item doesn't already have one
-     */
-    setItemIds() {
-        if (this.items) {
-            this.items.forEach((item, index) => {
-                item.id = item.id ? item.id : this.id + '_item' + index;
-            });
+  * Focus out event handler
+  * will upper case and trim value if upperCase is true (this is what we do on the apis)
+  */
+    focusOutEvent() {
+        if (this.upperCase && this.formModel.value) {
+            this.formModel.setValue(this.formModel.value.toUpperCase().trim());
         }
     }
 }
-MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
+TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n     <label *ngIf=\"label\">\r\n        <span>{{label | translate}}</span>\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors |\r\n            translate}}</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=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{validationPattern}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n\r\n        <i class=\"ec-icon icon-required\"></i>\r\n        <i class=\"ec-icon icon-invalid\"></i>\r\n        <i class=\"ec-icon icon-loading\"></i>\r\n    </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
-                type: Input
-            }], attrId: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], items: [{
+            args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n     <label *ngIf=\"label\">\r\n        <span>{{label | translate}}</span>\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors |\r\n            translate}}</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=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{validationPattern}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n\r\n        <i class=\"ec-icon icon-required\"></i>\r\n        <i class=\"ec-icon icon-invalid\"></i>\r\n        <i class=\"ec-icon icon-loading\"></i>\r\n    </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }]; }, propDecorators: { autocomplete: [{
                 type: Input
-            }], selected: [{
+            }], type: [{
                 type: Input
-            }], parent: [{
+            }], placeholder: [{
                 type: Input
-            }], templateType: [{
+            }], maxlength: [{
                 type: Input
-            }], customMenuTemplate: [{
+            }], minlength: [{
                 type: Input
-            }], title: [{
+            }], rows: [{
                 type: Input
-            }], showNoItems: [{
+            }], selectOnAutofocus: [{
                 type: Input
-            }], noDataText: [{
+            }], upperCase: [{
                 type: Input
-            }], enableKeyNav: [{
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['textboxInput']
+            }] } });
+
+/** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
+class SpinnerComponent {
+}
+SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SpinnerComponent, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ec-spinner', template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
+        }] });
+
+class Overlay {
+    constructor(status, message) {
+        this.status = 'hasData';
+        this.message = '';
+        this.setStatus(status, message);
+    }
+    setStatus(status, message, action, noDataTemplate, overlayClassList) {
+        this.status = status;
+        this.message = message || '';
+        this.action = action || undefined;
+        this.noDataTemplate = noDataTemplate || undefined;
+        this.overlayClassList = overlayClassList || '';
+    }
+}
+/**
+ * Wraps content in order to show pending, error, and no data states with an optional message/noDataTemplate
+ */
+class ViewOverlayComponent {
+    constructor() {
+        this.status = 'hasData';
+    }
+    setStatus(status, message, action, noDataTemplate) {
+        this.status = status;
+        this.message = message || '';
+        this.action = action || undefined;
+        this.noDataTemplate = noDataTemplate || undefined;
+    }
+    actionClicked(event) {
+        if (this.action && this.action.onClick) {
+            this.action.onClick(event);
+        }
+    }
+}
+ViewOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ViewOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t  class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t   class=\"mt-3\"\r\n\t\t\t\t   *ngIf=\"action?.onClick\"\r\n\t\t\t\t   [icon]=\"action?.icon\"\r\n\t\t\t\t   (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t   [label]=\"action?.label\"\r\n\t\t\t\t   [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ecOverlay]', template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t  class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t   class=\"mt-3\"\r\n\t\t\t\t   *ngIf=\"action?.onClick\"\r\n\t\t\t\t   [icon]=\"action?.icon\"\r\n\t\t\t\t   (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t   [label]=\"action?.label\"\r\n\t\t\t\t   [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
+        }], propDecorators: { status: [{
                 type: Input
-            }], highlightedItem: [{
+            }], message: [{
                 type: Input
-            }], maintainSelectedItem: [{
+            }], action: [{
                 type: Input
-            }], truncateItems: [{
+            }], noDataTemplate: [{
                 type: Input
-            }], preserveIconSpace: [{
+            }], displayAsMask: [{
                 type: Input
-            }], dropdownToggleButton: [{
+            }], overlayClassList: [{
                 type: Input
-            }], selectedChanged: [{
-                type: Output
-            }], menuClosed: [{
-                type: Output
-            }], labelTemplate: [{
-                type: ViewChild,
-                args: ['label', { static: true }]
-            }], iconAndLabelTemplate: [{
-                type: ViewChild,
-                args: ['iconAndLabel', { static: true }]
-            }], checkAndLabelTemplate: [{
-                type: ViewChild,
-                args: ['checkAndLabel', { static: true }]
-            }], iconLabelCaptionTemplate: [{
-                type: ViewChild,
-                args: ['iconLabelCaption', { static: true }]
             }] } });
 
 /**
@@ -2794,6 +2822,11 @@ class ComboboxComponent extends FormControlBase {
          * Number of filtered options to display in the footer.  Excludes headings.
          */
         this.filteredOptionCount = 0;
+        /**
+         * Flat list of selectable items in the combobox.
+         * Does not include headings or divider-section items.
+         */
+        this.selectableItems = [];
         /**
          * Index of the currently-selected options
          */
@@ -2930,13 +2963,14 @@ class ComboboxComponent extends FormControlBase {
      */
     resetOptions(options) {
         this.filteredOptions = options || this.options;
+        this.selectableItems = MenuComponent.getSelectableItems(this.filteredOptions);
         // do not count headings
-        this.filteredOptionCount = this.filteredOptions?.filter(o => o.display !== 'heading').length || 0;
+        this.filteredOptionCount = this.filteredOptions?.filter(o => o.display !== 'heading' && o.display !== 'divided-section').length || 0;
         //if they have no search term, don't try to select anything so they can clear the box out by hitting enter
         //if they have a search term and the options changed, select an option from the menu so they will get it automatically if they hit enter
         if (this.textboxFormModel.value !== '') {
-            this.selectedItemIndex = this.findDefaultSelectionIndex(this.filteredOptions, this.textboxFormModel.value);
-            this.selectedItem = this.filteredOptions[this.selectedItemIndex] || null;
+            this.selectedItemIndex = this.findDefaultSelectionIndex(this.selectableItems, this.textboxFormModel.value);
+            this.selectedItem = this.selectableItems[this.selectedItemIndex] || null;
             this.scrollMenu(this.selectedItemIndex);
         }
         else {
@@ -3130,18 +3164,11 @@ class ComboboxComponent extends FormControlBase {
                 if (this.selectedItemIndex === -1 && this.addNewButton && !this.addNewButton.nativeElement.hidden && !this.addNewSelected) {
                     this.addNewSelected = true;
                 }
-                else if (this.selectedItemIndex < this.filteredOptions.length - 1) {
+                else if (this.selectedItemIndex < this.selectableItems.length - 1) {
+                    this.selectedItemIndex++;
                     if (this.addNewSelected) {
                         this.addNewSelected = false;
                     }
-                    //if the last item is a heading and we are on the second last item, we shouldn't increment the selectedItemIndex because that would select the heading
-                    if (!(this.selectedItemIndex == this.filteredOptions.length - 2 && this.filteredOptions[this.selectedItemIndex + 1].display === 'heading')) {
-                        this.selectedItemIndex++;
-                        // Skip any in-menu heading items
-                        if (this.selectedItemIndex < this.filteredOptions.length - 1 && this.filteredOptions[this.selectedItemIndex].display === 'heading') {
-                            this.selectedItemIndex++;
-                        }
-                    }
                 }
                 break;
             case "ArrowUp":
@@ -3150,30 +3177,16 @@ class ComboboxComponent extends FormControlBase {
                     this.addNewSelected = false;
                 }
                 else if (this.selectedItemIndex > -1) {
-                    if (this.selectedItemIndex === 0 && this.addNewButton && !this.addNewButton.nativeElement.hidden) {
-                        this.addNewSelected = true;
-                    }
                     this.selectedItemIndex--;
-                    // Skip any in-menu heading items
-                    if (this.selectedItemIndex > -1 && this.filteredOptions[this.selectedItemIndex].display === 'heading') {
-                        this.selectedItemIndex--;
-                        //if the selectedItemIndex is -1, that means the very first item was a heading and we just skipped over it.
-                        if (this.selectedItemIndex == -1) {
-                            //if there is an add new button we should select it. otherwise we should lock them at index 1 (right before the heading)
-                            if (this.addNewButton && !this.addNewButton.nativeElement.hidden) {
-                                this.addNewSelected = true;
-                            }
-                            else {
-                                this.selectedItemIndex = 1;
-                            }
-                        }
+                    if (this.selectedItemIndex === -1 && this.addNewButton && !this.addNewButton.nativeElement.hidden) {
+                        this.addNewSelected = true;
                     }
                 }
                 break;
             default:
                 return;
         }
-        this.selectedItem = this.filteredOptions[this.selectedItemIndex];
+        this.selectedItem = this.selectableItems[this.selectedItemIndex];
         if (this.menuStatus === 'hidden') {
             this.setFormModelValue(this.selectedItem);
         }
@@ -3192,10 +3205,16 @@ class ComboboxComponent extends FormControlBase {
     filterOptionsArray(filterText) {
         let searchText = filterText.toLowerCase();
         if (filterText && filterText !== '') {
-            return this.options.filter(item => {
-                return item.label.toLowerCase().indexOf(searchText) >= 0 ||
-                    (item.caption && item.caption.toLowerCase().indexOf(searchText) >= 0);
-            });
+            const matchesSearch = (item) => item.label.toLowerCase().indexOf(searchText) >= 0 || (item.caption && item.caption.toLowerCase().indexOf(searchText) >= 0);
+            return this.options.reduce((filteredItems, item) => {
+                if (!item.items?.length && matchesSearch(item)) {
+                    filteredItems.push(item);
+                }
+                else if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section')) {
+                    filteredItems.push({ ...item, items: item.items.filter(matchesSearch) });
+                }
+                return filteredItems;
+            }, []);
         }
         else {
             return this.options;
@@ -3212,7 +3231,7 @@ class ComboboxComponent extends FormControlBase {
     findSelectedItemIndex(item) {
         let itemToFind = item ? item : this.selectedItem;
         if (itemToFind) {
-            return this.filteredOptions.findIndex(item => {
+            return this.selectableItems.findIndex(item => {
                 if (item.id && itemToFind.id) {
                     return item.label === itemToFind.label && item.id === itemToFind.id;
                 }
@@ -3238,7 +3257,7 @@ class ComboboxComponent extends FormControlBase {
             this.textboxFormModel.setValue(data.selectedLabel || data.label);
             this.selectedItemIndex = this.findSelectedItemIndex(data);
             if (this.selectedItemIndex >= 0) {
-                this.selectedItem = this.filteredOptions[this.selectedItemIndex];
+                this.selectedItem = this.selectableItems[this.selectedItemIndex];
             }
         }
         else {
@@ -3259,10 +3278,10 @@ class ComboboxComponent extends FormControlBase {
             if (this.selectedItemIndex > -1 && this.selectedItem) {
                 // The menu component will automatically generate ids for the menu items if they dont have them,
                 // so they need to be accounted for here since the combobox doesn't know about those ids
-                let itemSelector = this.selectedItem.id ? `#${this.selectedItem.id}` : `#${this.id}_menu_item${this.selectedItemIndex}`;
+                let itemId = this.selectedItem.id ? this.selectedItem.id : MenuComponent.getIndexedItemId(this.filteredOptions, this.selectedItem, `${this.id}_menu`);
                 //trigger the scrolling after a tick to allow the menu to be up to date (and pending mask cleared) before measuring
                 setTimeout(() => {
-                    this.scrollService.scrollItemCentered(`#${this.id}_menu_list`, itemSelector);
+                    this.scrollService.scrollItemCentered(`#${this.id}_menu_list`, `#${itemId}`);
                 }, 0);
             }
             else {
@@ -3428,10 +3447,10 @@ class ComboboxComponent extends FormControlBase {
     findDefaultSelectionIndex(options, searchText) {
         let index = -1;
         if (options && options.length) {
-            index = options.findIndex(option => option != null && option.display !== 'heading');
+            index = options.findIndex(option => option != null);
             if (searchText) {
                 searchText = searchText.toLowerCase().trim();
-                let exactMatchIndex = options.findIndex(option => option.label.toLowerCase() == searchText && option.display !== 'heading');
+                let exactMatchIndex = options.findIndex(option => option.label.toLowerCase() == searchText);
                 if (exactMatchIndex >= 0) {
                     index = exactMatchIndex;
                 }