@huntsman-cancer-institute/input 15.0.2 → 16.0.0

package/fesm2015/huntsman-cancer-institute-input.mjs

@@ -1,3697 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, forwardRef, ViewChild, Directive, Host, isDevMode, Injectable, Inject, NgModule, SimpleChange, TemplateRef, ContentChild, HostListener, HostBinding, ViewEncapsulation } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, UntypedFormControl, FormsModule, ReactiveFormsModule, NgModel, NgControl } from '@angular/forms';
-import { of, timer, Subscription, combineLatest } from 'rxjs';
-import { debounceTime, distinctUntilChanged, tap, filter, switchMap, map, mergeMap } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
-import * as i3 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i2$1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
-import * as i1$1 from '@huntsman-cancer-institute/dictionary-service';
-import { DICTIONARY_ENDPOINT, DictionaryServiceModule } from '@huntsman-cancer-institute/dictionary-service';
-import * as moment from 'moment';
-import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$1 from '@angular/material/legacy-form-field';
-import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i7 from '@angular/material/legacy-input';
-import { MatLegacyInputModule } from '@angular/material/legacy-input';
-import * as i6 from '@angular/material/legacy-select';
-import { MatLegacySelectModule } from '@angular/material/legacy-select';
-import * as i6$2 from '@angular/material/legacy-autocomplete';
-import { MatLegacyAutocompleteTrigger, MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import * as i8 from '@angular/material/legacy-tooltip';
-import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i6$1 from '@angular/material/legacy-core';
-import * as i9 from '@angular/material/legacy-progress-spinner';
-import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-
-/**
- * @description: A model of common data for dropdown components.
- * @since 5.0.0
- */
-const KEY_CODE = Object.freeze({
-    DOWN_ARROW: 40,
-    UP_ARROW: 38,
-    ENTER: 13,
-    TAB: 9,
-    DELETE: 8
-});
-
-/**
- * A model of common messages for dropdown components.
- *
- * @since 5.0.0
- */
-class Messages {
-}
-Messages.PARTIAL_COUNT_VAR = "%PARTIAL_COUNT%";
-Messages.TOTAL_COUNT_VAR = "%TOTAL_COUNT%";
-
-class DropdownSelectResultComponent {
-    constructor() {
-        this.itemSelectedEvent = new EventEmitter();
-        this.activeIndex = 0;
-        this.usingKeys = false;
-    }
-    ngOnInit() { }
-    onSelected(item) {
-        this.itemSelectedEvent.emit(item);
-    }
-    onMouseOver(index) {
-        if (!this.usingKeys) {
-            this.activeIndex = index;
-        }
-    }
-    onHovering(event) {
-        this.usingKeys = false;
-    }
-    isSelected(currentItem) {
-        let result = false;
-        this.selectedItems.forEach(item => {
-            if (item.id === currentItem.id) {
-                result = true;
-            }
-        });
-        return result;
-    }
-    activeNext() {
-        if (this.activeIndex >= this.items.length - 1) {
-            this.activeIndex = this.items.length - 1;
-        }
-        else {
-            this.activeIndex++;
-        }
-        this.scrollToElement();
-        this.usingKeys = true;
-    }
-    activePrevious() {
-        if (this.activeIndex - 1 < 0) {
-            this.activeIndex = 0;
-        }
-        else {
-            this.activeIndex--;
-        }
-        this.scrollToElement();
-        this.usingKeys = true;
-    }
-    scrollToElement() {
-        const element = document.getElementById("item-" + this.activeIndex);
-        const container = document.getElementById("resultsContainer");
-        if (element) {
-            container.scrollTop = element.offsetTop;
-        }
-    }
-    selectCurrentItem() {
-        if (this.items[this.activeIndex]) {
-            this.onSelected(this.items[this.activeIndex]);
-            this.activeIndex = 0;
-        }
-    }
-}
-DropdownSelectResultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownSelectResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownSelectResultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropdownSelectResultComponent, selector: "hci-dropdown-select-result", inputs: { items: "items", searchFocused: "searchFocused", selectedItems: "selectedItems", templateRef: "templateRef" }, outputs: { itemSelectedEvent: "itemSelectedEvent" }, ngImport: i0, template: `
-    <div class="select-results-container" *ngIf="items !== undefined && items.length > 0" id="resultsContainer">
-      <div *ngFor="let item of items; let i = index;"
-           class="select-result" id="item-{{i}}"
-           (mousedown)="onSelected(item)" [class.selected]="isSelected(item)"
-           [class.active]="i === activeIndex"
-           (mouseover)="onMouseOver(i)"
-           (mouseenter)="onHovering($event)">
-        <ng-container [ngTemplateOutlet]="templateRef"
-                      [ngTemplateOutletContext]="{$item: item, $entity: item.entity, $id: item.id, $index: i}"></ng-container>
-        <ng-container *ngIf="!templateRef">{{item.text}}</ng-container>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownSelectResultComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-dropdown-select-result",
-                    template: `
-    <div class="select-results-container" *ngIf="items !== undefined && items.length > 0" id="resultsContainer">
-      <div *ngFor="let item of items; let i = index;"
-           class="select-result" id="item-{{i}}"
-           (mousedown)="onSelected(item)" [class.selected]="isSelected(item)"
-           [class.active]="i === activeIndex"
-           (mouseover)="onMouseOver(i)"
-           (mouseenter)="onHovering($event)">
-        <ng-container [ngTemplateOutlet]="templateRef"
-                      [ngTemplateOutletContext]="{$item: item, $entity: item.entity, $id: item.id, $index: i}"></ng-container>
-        <ng-container *ngIf="!templateRef">{{item.text}}</ng-container>
-      </div>
-    </div>
-  `
-                }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], searchFocused: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], templateRef: [{
-                type: Input
-            }], itemSelectedEvent: [{
-                type: Output
-            }] } });
-
-const VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DropdownSelectComponent),
-    multi: true
-};
-const noop = () => { };
-class DropdownSelectComponent {
-    constructor() {
-        this.MORE_RESULTS_MSG = "Showing " + Messages.PARTIAL_COUNT_VAR + " of " + Messages.TOTAL_COUNT_VAR + " results.";
-        this.NO_RESULTS_MSG = "No results found";
-        this.messages = {
-            moreResultsMsg: this.MORE_RESULTS_MSG,
-            noResultsMsg: this.NO_RESULTS_MSG
-        };
-        this.referenceMode = "id";
-        this.placeholder = "";
-        this.disabled = false;
-        this.multiple = false;
-        this.clientMode = false;
-        this.deleteIcon = "fas fa-times-circle";
-        this.inputState = 2; // selectIcon controller: 0->with selectIcon 2->without selectIcon
-        this.searchDelay = 100;
-        this.select = new EventEmitter();
-        this.remove = new EventEmitter();
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        this.term = new UntypedFormControl();
-        this.searchFocused = false;
-        this.resultsVisible = false;
-        this.selectedItems = [];
-        this.placeholderSelected = "";
-    }
-    ngAfterViewInit() {
-        this.subscribeToChangesAndLoadDataFromObservable();
-    }
-    onItemSelected(item) {
-        if (this.multiple) {
-            this.selectedItems.push(item);
-            const index = this.listedData.indexOf(item, 0);
-            if (index > -1) {
-                this.listedData.splice(index, 1);
-            }
-        }
-        else {
-            this.selectedItems.length = 0;
-            this.selectedItems.push(item);
-        }
-        this.onChangeCallback(this.buildValue());
-        this.term.patchValue("", { emitEvent: false });
-        setTimeout(() => this.focusInput(), 1);
-        this.resultsVisible = false;
-        this.select.emit(item);
-        if (!this.multiple) {
-            this.placeholderSelected = item.text;
-        }
-    }
-    focusInput() {
-        if (!this.disabled) {
-            this.termInput.nativeElement.focus();
-            this.resultsVisible = false;
-        }
-        this.searchFocused = !this.disabled;
-    }
-    writeValue(selectedValues) {
-        if (selectedValues) {
-            if (this.referenceMode === "id") {
-                this.populateItemsFromIds(selectedValues);
-            }
-            else {
-                this.populateItemsFromEntities(selectedValues);
-            }
-        }
-        else {
-            this.placeholderSelected = "";
-            this.selectedItems = [];
-        }
-    }
-    getCountMessage() {
-        let msg = this.messages && this.messages.moreResultsMsg ? this.messages.moreResultsMsg : this.MORE_RESULTS_MSG;
-        msg = msg.replace(Messages.PARTIAL_COUNT_VAR, String(this.listedData.length));
-        msg = msg.replace(Messages.TOTAL_COUNT_VAR, String(this.resultsCount - this.selectedItems.length));
-        return msg;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    removeItem(item) {
-        const index = this.selectedItems.indexOf(item, 0);
-        if (index > -1) {
-            this.selectedItems.splice(index, 1);
-        }
-        this.onChangeCallback(this.buildValue());
-        this.remove.emit(item);
-        if (!this.multiple) {
-            this.placeholderSelected = "";
-        }
-    }
-    getPlaceholder() {
-        return this.selectedItems.length > 0 ? this.placeholderSelected : this.placeholder;
-    }
-    getInputWidth() {
-        const searchEmpty = this.selectedItems.length === 0 && (this.term.value === null || this.term.value.length === 0);
-        const length = this.term.value === null ? 0 : this.term.value.length;
-        if (!this.multiple) {
-            return "100%";
-        }
-        else {
-            return searchEmpty ? "100%" : (1 + length * .6) + "em";
-        }
-    }
-    isHideable() {
-        return !this.multiple && this.placeholderSelected !== "";
-    }
-    onFocus() {
-        this.searchFocused = true;
-    }
-    onBlur() {
-        this.term.patchValue("", { emitEvent: false });
-        this.searchFocused = false;
-        this.resultsVisible = false;
-        this.onTouchedCallback();
-    }
-    onKeyUp(ev) {
-        if (this.results) {
-            if (ev.keyCode === KEY_CODE.DOWN_ARROW) {
-                this.results.activeNext();
-            }
-            else if (ev.keyCode === KEY_CODE.UP_ARROW) {
-                this.results.activePrevious();
-            }
-            else if (ev.keyCode === KEY_CODE.ENTER) {
-                this.results.selectCurrentItem();
-            }
-        }
-        else {
-            if (this.inputState === 0) {
-                if (ev.keyCode === KEY_CODE.ENTER || ev.keyCode === KEY_CODE.DOWN_ARROW) {
-                    this.showResults();
-                }
-            }
-        }
-    }
-    onKeyDown(ev) {
-        if (this.results) {
-            if (ev.keyCode === KEY_CODE.TAB) {
-                this.results.selectCurrentItem();
-            }
-        }
-        if (ev.keyCode === KEY_CODE.DELETE) {
-            if ((!this.term.value || this.term.value.length === 0) && this.selectedItems.length > 0) {
-                this.removeItem(this.selectedItems[this.selectedItems.length - 1]);
-            }
-        }
-    }
-    onKeyPress(ev) {
-        if (ev.keyCode === KEY_CODE.ENTER) {
-            ev.preventDefault();
-        }
-    }
-    showResults() {
-        if (!this.disabled) {
-            this.termInput.nativeElement.focus();
-            this.subscribeToResults(of(""));
-        }
-        this.searchFocused = !this.disabled;
-    }
-    focus() {
-        this.termInput.nativeElement.focus();
-    }
-    subscribeToChangesAndLoadDataFromObservable() {
-        const observable = this.term.valueChanges.pipe(debounceTime(this.searchDelay), distinctUntilChanged());
-        this.subscribeToResults(observable);
-    }
-    subscribeToResults(observable) {
-        observable.pipe(tap(() => this.resultsVisible = false), filter((term) => term.length >= this.inputState), switchMap(term => this.loadDataFromObservable(term)), map(items => items.filter(item => !(this.multiple && this.alreadySelected(item)))), tap(() => this.resultsVisible = this.searchFocused)).subscribe((items) => this.listedData = items);
-    }
-    loadDataFromObservable(term) {
-        return this.clientMode ? this.fetchAndfilterLocalData(term) : this.fetchData(term);
-    }
-    alreadySelected(item) {
-        let result = false;
-        this.selectedItems.forEach(selectedItem => {
-            if (selectedItem.id === item.id) {
-                result = true;
-            }
-        });
-        return result;
-    }
-    fetchAndfilterLocalData(term) {
-        if (!this.modifiedData) {
-            return this.fetchData("").pipe(mergeMap((items) => {
-                this.modifiedData = items;
-                return this.filterLocalData(term);
-            }));
-        }
-        else {
-            return this.filterLocalData(term);
-        }
-    }
-    fetchData(term) {
-        return this
-            .dataProvider(term, this.buildValue())
-            .pipe(map((items) => this.adaptItems(items)));
-    }
-    filterLocalData(term) {
-        return of(this.modifiedData.filter((item) => this.containsText(item, term)));
-    }
-    containsText(item, term) {
-        return item.text.toUpperCase().indexOf(term.toUpperCase()) !== -1;
-    }
-    adaptItems(items) {
-        const convertedItems = [];
-        items.map((item) => this.selectItemAdapter(item))
-            .forEach((selectItem) => convertedItems.push(selectItem));
-        return convertedItems;
-    }
-    buildValue() {
-        return "id" === this.referenceMode ? this.getSelectedIds() : this.getEntities();
-    }
-    getSelectedIds() {
-        if (this.multiple) {
-            const ids = [];
-            this.selectedItems.forEach(item => ids.push(item.id));
-            return ids;
-        }
-        else {
-            return this.selectedItems.length === 0 ? null : this.selectedItems[0].id;
-        }
-    }
-    getEntities() {
-        if (this.multiple) {
-            const entities = [];
-            this.selectedItems.forEach(item => {
-                entities.push(item.entity);
-            });
-            return entities;
-        }
-        else {
-            return this.selectedItems.length === 0 ? null : this.selectedItems[0].entity;
-        }
-    }
-    populateItemsFromEntities(selectedValues) {
-        if (this.multiple) {
-            this.handleMultipleWithEntities(selectedValues);
-        }
-        else {
-            const selectItem = this.selectItemAdapter(selectedValues);
-            this.selectedItems = [selectItem];
-            this.placeholderSelected = selectItem.text;
-        }
-    }
-    handleMultipleWithEntities(selectedValues) {
-        this.selectedItems = [];
-        selectedValues.forEach((entity) => {
-            const item = this.selectItemAdapter(entity);
-            const ids = this.getSelectedIds();
-            if (ids.indexOf(item.id) === -1) {
-                this.selectedItems.push(item);
-            }
-        });
-    }
-    populateItemsFromIds(selectedValues) {
-        if (this.multiple) {
-            this.handleMultipleWithIds(selectedValues);
-        }
-        else {
-            this.handleSingleWithId(selectedValues);
-        }
-    }
-    handleMultipleWithIds(selectedValues) {
-        if (selectedValues !== undefined && this.selectedProvider !== undefined) {
-            const uniqueIds = [];
-            selectedValues.forEach((id) => {
-                if (uniqueIds.indexOf(id) === -1) {
-                    uniqueIds.push(id);
-                }
-            });
-            this.selectedProvider(uniqueIds).subscribe((items) => {
-                this.selectedItems = items.map(this.selectItemAdapter);
-            });
-        }
-    }
-    handleSingleWithId(id) {
-        if (id !== undefined && this.selectedProvider !== undefined) {
-            this.selectedProvider([id]).subscribe((items) => {
-                items.forEach((item) => {
-                    const selectItem = this.selectItemAdapter(item);
-                    this.selectedItems = [selectItem];
-                    this.placeholderSelected = selectItem.text;
-                });
-            });
-        }
-    }
-}
-DropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropdownSelectComponent, selector: "hci-dropdown-select", inputs: { messages: "messages", dataProvider: "dataProvider", selectedProvider: "selectedProvider", selectItemAdapter: "selectItemAdapter", referenceMode: "referenceMode", placeholder: "placeholder", disabled: "disabled", multiple: "multiple", clientMode: "clientMode", deleteIcon: "deleteIcon", inputState: "inputState", resultsCount: "resultsCount", searchDelay: "searchDelay" }, outputs: { select: "select", remove: "remove" }, host: { classAttribute: "flex-grow-1" }, providers: [VALUE_ACCESSOR], viewQueries: [{ propertyName: "results", first: true, predicate: ["results"], descendants: true }, { propertyName: "termInput", first: true, predicate: ["termInput"], descendants: true }], ngImport: i0, template: `
-    <div class="select-container">
-      <ul class="form-control"
-          [class.simple-selection]="!multiple"
-          [class.multiple-selection]="multiple"
-          [class.search-focused]="searchFocused"
-          [class.readonly]="disabled">
-
-        <ng-container *ngIf="!searchFocused || multiple">
-          <li *ngFor="let item of selectedItems" class="select-selected label label-info" [class.label]="multiple"
-              [class.label-info]="multiple">
-            <span class="selected-item-text">{{item.text}}</span>
-            <a class="select-selection-remove" (click)="removeItem(item)" *ngIf="!disabled">
-              <i [class]="deleteIcon" [class.text-info]="!multiple"></i>
-            </a>
-          </li>
-        </ng-container>
-
-        <li class="select-input">
-          <input #termInput type="text"
-                 [placeholder]="getPlaceholder()"
-                 [formControl]="term"
-                 [class.hideable]="isHideable()"
-                 [style.width]="getInputWidth()"
-                 (focus)="onFocus()"
-                 (blur)="onBlur()"
-                 (keyup)="onKeyUp($event)"
-                 (keydown)="onKeyDown($event)"
-                 (keypress)="onKeyPress($event)"
-                 (click)="showResults()" *ngIf="!disabled" />
-        </li>
-      </ul>
-      <span class="icon-drop-menu" *ngIf="inputState===0" (click)="showResults()">
-        <span class="after"></span>
-      </span>
-      <div class="results-container" *ngIf="resultsVisible">
-        <span class="results-msg" *ngIf="listedData && (listedData.length + selectedItems.length) < resultsCount">
-          {{getCountMessage()}}
-        </span>
-        <span class="results-msg no-results-msg" *ngIf="searchFocused && listedData && listedData.length === 0">
-          {{messages && messages.noResultsMsg ? messages.noResultsMsg : NO_RESULTS_MSG}}
-        </span>
-        <hci-dropdown-select-result #results
-                                    [selectedItems]="selectedItems"
-                                    [items]="listedData"
-                                    (itemSelectedEvent)="onItemSelected($event)"
-                                    [templateRef]="templateRef"
-                                    [searchFocused]="searchFocused"></hci-dropdown-select-result>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DropdownSelectResultComponent, selector: "hci-dropdown-select-result", inputs: ["items", "searchFocused", "selectedItems", "templateRef"], outputs: ["itemSelectedEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownSelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-dropdown-select",
-                    template: `
-    <div class="select-container">
-      <ul class="form-control"
-          [class.simple-selection]="!multiple"
-          [class.multiple-selection]="multiple"
-          [class.search-focused]="searchFocused"
-          [class.readonly]="disabled">
-
-        <ng-container *ngIf="!searchFocused || multiple">
-          <li *ngFor="let item of selectedItems" class="select-selected label label-info" [class.label]="multiple"
-              [class.label-info]="multiple">
-            <span class="selected-item-text">{{item.text}}</span>
-            <a class="select-selection-remove" (click)="removeItem(item)" *ngIf="!disabled">
-              <i [class]="deleteIcon" [class.text-info]="!multiple"></i>
-            </a>
-          </li>
-        </ng-container>
-
-        <li class="select-input">
-          <input #termInput type="text"
-                 [placeholder]="getPlaceholder()"
-                 [formControl]="term"
-                 [class.hideable]="isHideable()"
-                 [style.width]="getInputWidth()"
-                 (focus)="onFocus()"
-                 (blur)="onBlur()"
-                 (keyup)="onKeyUp($event)"
-                 (keydown)="onKeyDown($event)"
-                 (keypress)="onKeyPress($event)"
-                 (click)="showResults()" *ngIf="!disabled" />
-        </li>
-      </ul>
-      <span class="icon-drop-menu" *ngIf="inputState===0" (click)="showResults()">
-        <span class="after"></span>
-      </span>
-      <div class="results-container" *ngIf="resultsVisible">
-        <span class="results-msg" *ngIf="listedData && (listedData.length + selectedItems.length) < resultsCount">
-          {{getCountMessage()}}
-        </span>
-        <span class="results-msg no-results-msg" *ngIf="searchFocused && listedData && listedData.length === 0">
-          {{messages && messages.noResultsMsg ? messages.noResultsMsg : NO_RESULTS_MSG}}
-        </span>
-        <hci-dropdown-select-result #results
-                                    [selectedItems]="selectedItems"
-                                    [items]="listedData"
-                                    (itemSelectedEvent)="onItemSelected($event)"
-                                    [templateRef]="templateRef"
-                                    [searchFocused]="searchFocused"></hci-dropdown-select-result>
-      </div>
-    </div>
-  `,
-                    providers: [VALUE_ACCESSOR],
-                    host: { class: "flex-grow-1" }
-                }]
-        }], propDecorators: { messages: [{
-                type: Input
-            }], dataProvider: [{
-                type: Input
-            }], selectedProvider: [{
-                type: Input
-            }], selectItemAdapter: [{
-                type: Input
-            }], referenceMode: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], clientMode: [{
-                type: Input
-            }], deleteIcon: [{
-                type: Input
-            }], inputState: [{
-                type: Input
-            }], resultsCount: [{
-                type: Input
-            }], searchDelay: [{
-                type: Input
-            }], select: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], results: [{
-                type: ViewChild,
-                args: ["results", { static: false }]
-            }], termInput: [{
-                type: ViewChild,
-                args: ["termInput", { static: false }]
-            }] } });
-
-/**
- * A customized template for Dropdown list items.
- */
-class TemplateDropdownDirective {
-    constructor(templateRef, host) {
-        this.templateRef = templateRef;
-        if (host instanceof DropdownSelectComponent) {
-            host.templateRef = templateRef;
-        }
-    }
-}
-TemplateDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TemplateDropdownDirective, deps: [{ token: i0.TemplateRef }, { token: DropdownSelectComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TemplateDropdownDirective, selector: "[appTemplateDropdown]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TemplateDropdownDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[appTemplateDropdown]"
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef }, { type: DropdownSelectComponent, decorators: [{
-                        type: Host
-                    }] }];
-    } });
-
-const DROPDOWN_TYPE = Object.freeze({
-    INPUT_SINGLE: 0,
-    INPUT_MULTI: 1,
-    SELECT_SINGLE: 2,
-    SELECT_MULTI: 3,
-    SELECT_SINGLE_CUSTOM: 4,
-    SELECT_MULTI_CUSTOM: 5
-});
-class DropdownService {
-    constructor(http, dictionaryEndpoint) {
-        this.http = http;
-        this.dictionaryEndpoint = dictionaryEndpoint;
-        this.listField = [];
-        this.DICTIONARY_ENDPOINT = "";
-        this.headers = new HttpHeaders().set("Content-Type", "application/json");
-        this.options = { headers: this.headers };
-        this.sortFunction = (dropdownObj1, dropdownObj2) => {
-            if (dropdownObj1[this.listField[0]] < dropdownObj2[this.listField[0]]) {
-                return -1;
-            }
-            else if (dropdownObj1[this.listField[0]] > dropdownObj2[this.listField[0]]) {
-                return 1;
-            }
-            else {
-                return 0;
-            }
-        };
-    }
-    /**
-     * Get a list of data from the given object or url to set to the dropdown list.
-     * @param {string} urlStr
-     * @param {Object[]} dataObject
-     * @param {string} displayField
-     * @returns {any[]}
-     */
-    setData(urlStr, dataObject, displayField) {
-        let listFieldSet = [];
-        let dataListSet = [];
-        if (dataObject) {
-            // Set data from the passed object.
-            if (isDevMode) {
-                console.debug("DropdownService.setData. dataObject=:", dataObject);
-            }
-            if (dataObject) {
-                if (listFieldSet.length === 0 || listFieldSet[0] === "") {
-                    dataObject.forEach(item => dataListSet.push(item));
-                    listFieldSet.push(displayField);
-                    this.listField.push(displayField);
-                }
-            }
-        }
-        else if (urlStr && urlStr.length > 0) {
-            //  Set data from a passed url.
-            if (isDevMode) {
-                console.debug("DropdownService.setData. urlStr=:", urlStr);
-            }
-            this.getDataList(urlStr).subscribe((data) => {
-                if (data) {
-                    if (listFieldSet.length === 0 || listFieldSet[0] === "") {
-                        data.forEach(item => dataListSet.push(item));
-                        listFieldSet.push(displayField);
-                        this.listField.push(displayField);
-                        console.debug(data);
-                        console.debug(this.listField);
-                    }
-                }
-            });
-        }
-        else {
-            throw new Error("Neither optionData or dataUrl were defined.");
-        }
-        return dataListSet;
-    }
-    listData(pattern, dataSet, maxResults) {
-        return of(dataSet
-            .filter((dropdownObj) => dropdownObj[this.listField[0]].toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
-            .sort(this.sortFunction));
-    }
-    /**
-     * Get the max list data
-     * @param {string} pattern
-     * @param {number} maxResults
-     * @param {any[]} dataSet
-     * @returns {Observable<{count: number; results: Object[]}>}
-     */
-    listDataMax(pattern, maxResults, dataSet) {
-        const filteredList = dataSet
-            .filter((dropdownObj) => dropdownObj[this.listField[0]].toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
-            .sort(this.sortFunction);
-        return timer(3000)
-            .pipe(map((t) => {
-            return {
-                count: filteredList.length,
-                results: maxResults && maxResults < filteredList.length ? filteredList.splice(0, maxResults) : filteredList
-            };
-        }));
-    }
-    /**
-     * Push the selected items to a list to show in the input text area.
-     * @param {any[]} ids
-     * @param {any[]} dataSet
-     * @returns {Observable<Object[]>}
-     */
-    getItems(ids, dataSet) {
-        const selectedItems = [];
-        ids.forEach((id) => {
-            dataSet
-                .filter((item) => item.id === id)
-                .map((item) => selectedItems.push(item));
-        });
-        return of(selectedItems);
-    }
-    // Get data from the given url to set in the dropdown list.
-    getDataList(urlStr) {
-        return this.http.get(this.dictionaryEndpoint + urlStr);
-    }
-}
-DropdownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownService, deps: [{ token: i2$1.HttpClient }, { token: DICTIONARY_ENDPOINT }], target: i0.ɵɵFactoryTarget.Injectable });
-DropdownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: i2$1.HttpClient }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DICTIONARY_ENDPOINT]
-                    }] }];
-    } });
-
-class DropdownComponent {
-    constructor(dropdownService, formBuilder) {
-        this.dropdownService = dropdownService;
-        this.formBuilder = formBuilder;
-        this.modifiedData = [];
-        this.isDisabled = false;
-        this.inputSingleDataChange = new EventEmitter();
-        this.inputMultiDataChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.dropdownForm = this.formBuilder.group({
-            option: new UntypedFormControl(""),
-            dropdownSingleTypeAhead: new UntypedFormControl(""),
-            dropdownMultipleTypeAhead: new UntypedFormControl(""),
-            dropdownSingle: new UntypedFormControl(""),
-            dropdownMultiple: new UntypedFormControl(""),
-            habilitado: true
-        });
-        this.initDropdownForm();
-        this.initDropdownItem();
-        this.dropdownForm.valueChanges.subscribe(() => { });
-    }
-    onSelect(item) {
-        if (this.dropdownType === 0 || this.dropdownType === 2 || this.dropdownType === 4) {
-            this.modifiedData.length = 0;
-            this.modifiedData.push(item.entity);
-            this.inputSingleData = this.modifiedData[0];
-            this.inputSingleDataChange.emit(this.inputSingleData);
-        }
-        else if (this.dropdownType === 1 || this.dropdownType === 3) {
-            this.modifiedData.push(item.entity);
-            this.inputMultiData = this.modifiedData;
-            this.inputMultiDataChange.emit(this.inputMultiData);
-        }
-    }
-    onRemove(item) {
-        if (this.modifiedData.length > 0) {
-            const index = this.modifiedData.indexOf(item.entity, 0);
-            if (index > -1) {
-                this.modifiedData.splice(index, 1);
-            }
-        }
-        if (this.inputSingleData) {
-            this.inputSingleData = "";
-            this.inputSingleDataChange.emit(this.inputSingleData);
-        }
-        if (this.inputMultiData) {
-            this.inputMultiData = this.modifiedData;
-            this.inputMultiDataChange.emit(this.inputMultiData);
-        }
-    }
-    reset() {
-        this.dropdownForm.reset();
-    }
-    send(formJson) { }
-    initDropdownItem() {
-        let dataSet = [];
-        // Set dropdown data list from a given array or a json file
-        if (this.optionData && this.optionData.length > 0) {
-            // Get dropdown list data from an object
-            if (isDevMode()) {
-                console.debug("optionData=", this.optionData);
-            }
-            dataSet = this.dropdownService.setData(undefined, this.optionData, this.displayField);
-        }
-        else if (this.dataUrl && this.dataUrl !== "") {
-            // Get dropdown list data from an url with json file
-            if (isDevMode()) {
-                console.debug("dataUrl=", this.dataUrl);
-            }
-            dataSet = this.dropdownService.setData(this.dataUrl, undefined, this.displayField);
-        }
-        else {
-            console.error("Neither optionData or dataUrl were defined.");
-            if (isDevMode()) {
-                console.debug("dataUrl=", this.dataUrl);
-                console.debug("optionData=", this.optionData);
-            }
-        }
-        // Filter and sort data
-        this.listItems = (term) => this.dropdownService.listData(term, dataSet);
-        this.listItemsMax = (term, ids) => {
-            const selectedCount = ids ? ids.length : 0;
-            return this.dropdownService.listDataMax(term, 3 + selectedCount, dataSet)
-                .pipe(tap(response => this.count = response.count), map((response) => response.results));
-        };
-        // Get items and set them to the dropdown entiry
-        this.getItems = (ids) => this.dropdownService.getItems(ids, dataSet);
-        this.entityToSelectItem = (entity) => {
-            return {
-                id: entity[this.displayId],
-                text: entity[this.displayField],
-                entity: entity
-            };
-        };
-    }
-    initDropdownForm() {
-        this.modifiedData.length = 0;
-        if (this.dropdownType === 0 && this.inputSingleData) {
-            this.dropdownForm.controls["dropdownSingleTypeAhead"].setValue(this.inputSingleData);
-            this.modifiedData.push(this.inputSingleData);
-        }
-        if (this.dropdownType === 1 && this.inputMultiData) {
-            this.dropdownForm.controls["dropdownMultipleTypeAhead"].setValue(this.inputMultiData);
-            this.modifiedData = this.inputMultiData;
-        }
-        if (this.dropdownType === 2 && this.inputSingleData) {
-            this.dropdownForm.controls["dropdownSingle"].setValue(this.inputSingleData);
-            this.modifiedData.push(this.inputSingleData);
-        }
-        if (this.dropdownType === 3 && this.inputMultiData) {
-            this.dropdownForm.controls["dropdownMultiple"].setValue(this.inputMultiData);
-            this.modifiedData = this.inputMultiData;
-        }
-        if (this.dropdownType === 4 && this.inputSingleData) {
-            this.dropdownForm.controls["dropdownSingle"].setValue(this.inputSingleData);
-            this.modifiedData.push(this.inputSingleData);
-        }
-    }
-}
-DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownComponent, deps: [{ token: DropdownService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropdownComponent, selector: "hci-dropdown", inputs: { inputSingleData: "inputSingleData", inputMultiData: "inputMultiData", modifiedData: "modifiedData", optionData: "optionData", displayField: "displayField", displayId: "displayId", dataUrl: "dataUrl", dropdownType: "dropdownType", placeholder: "placeholder", isDisabled: "isDisabled" }, outputs: { inputSingleDataChange: "inputSingleDataChange", inputMultiDataChange: "inputMultiDataChange" }, providers: [DropdownService], viewQueries: [{ propertyName: "dropdownSingle", first: true, predicate: ["dropdownSingle"], descendants: true }], ngImport: i0, template: `
-    <form novalidate [formGroup]="dropdownForm">
-      <div class="form-group">
-        <hci-dropdown-select #dropdownSingle *ngIf="dropdownType === 0"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingleTypeAhead"
-                             [multiple]="false"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             referenceMode="entity"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 1"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownMultipleTypeAhead"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [clientMode]="true"
-                             referenceMode="entity"
-                             [multiple]="true"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 2"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingle"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             [multiple]="false"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 3"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownMultiple"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             [multiple]="true"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [selectedProvider]="getItems"
-                             [disabled]="isDisabled"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 4"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingle"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [selectedProvider]="getItems"
-                             [disabled]="isDisabled"
-                             [clientMode]="true">
-          <div *appTemplateDropdown="let item = $entity; let i = $index">
-            <span>[{{item.id}}]</span> {{item[displayField]}}
-          </div>
-        </hci-dropdown-select>
-      </div>
-    </form>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TemplateDropdownDirective, selector: "[appTemplateDropdown]" }, { kind: "component", type: DropdownSelectComponent, selector: "hci-dropdown-select", inputs: ["messages", "dataProvider", "selectedProvider", "selectItemAdapter", "referenceMode", "placeholder", "disabled", "multiple", "clientMode", "deleteIcon", "inputState", "resultsCount", "searchDelay"], outputs: ["select", "remove"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-dropdown",
-                    template: `
-    <form novalidate [formGroup]="dropdownForm">
-      <div class="form-group">
-        <hci-dropdown-select #dropdownSingle *ngIf="dropdownType === 0"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingleTypeAhead"
-                             [multiple]="false"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             referenceMode="entity"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 1"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownMultipleTypeAhead"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [clientMode]="true"
-                             referenceMode="entity"
-                             [multiple]="true"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 2"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingle"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             [multiple]="false"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [disabled]="isDisabled"
-                             [selectedProvider]="getItems"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 3"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownMultiple"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             [multiple]="true"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [selectedProvider]="getItems"
-                             [disabled]="isDisabled"
-                             [clientMode]="true"></hci-dropdown-select>
-        <hci-dropdown-select *ngIf="dropdownType === 4"
-                             [placeholder]="placeholder"
-                             formControlName="dropdownSingle"
-                             [dataProvider]="listItems"
-                             [selectItemAdapter]="entityToSelectItem"
-                             [inputState]="0"
-                             referenceMode="entity"
-                             (select)="onSelect($event)"
-                             (remove)="onRemove($event)"
-                             [selectedProvider]="getItems"
-                             [disabled]="isDisabled"
-                             [clientMode]="true">
-          <div *appTemplateDropdown="let item = $entity; let i = $index">
-            <span>[{{item.id}}]</span> {{item[displayField]}}
-          </div>
-        </hci-dropdown-select>
-      </div>
-    </form>
-  `,
-                    providers: [DropdownService]
-                }]
-        }], ctorParameters: function () { return [{ type: DropdownService }, { type: i2.UntypedFormBuilder }]; }, propDecorators: { inputSingleData: [{
-                type: Input
-            }], inputMultiData: [{
-                type: Input
-            }], modifiedData: [{
-                type: Input
-            }], optionData: [{
-                type: Input
-            }], displayField: [{
-                type: Input
-            }], displayId: [{
-                type: Input
-            }], dataUrl: [{
-                type: Input
-            }], dropdownType: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], inputSingleDataChange: [{
-                type: Output
-            }], inputMultiDataChange: [{
-                type: Output
-            }], dropdownSingle: [{
-                type: ViewChild,
-                args: ["dropdownSingle", { static: false }]
-            }] } });
-
-class DropdownModule {
-}
-DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DropdownModule, declarations: [TemplateDropdownDirective,
-        DropdownSelectComponent,
-        DropdownComponent,
-        DropdownSelectResultComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule], exports: [TemplateDropdownDirective,
-        DropdownSelectComponent,
-        DropdownComponent,
-        DropdownSelectResultComponent] });
-DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgbModule
-                    ],
-                    declarations: [
-                        TemplateDropdownDirective,
-                        DropdownSelectComponent,
-                        DropdownComponent,
-                        DropdownSelectResultComponent
-                    ],
-                    exports: [
-                        TemplateDropdownDirective,
-                        DropdownSelectComponent,
-                        DropdownComponent,
-                        DropdownSelectResultComponent
-                    ]
-                }]
-        }] });
-
-class DateValidator {
-    static dateFormatValidator(ac) {
-        if (ac && ac.value && !moment(ac.value, "M/D/YYYY", true).isValid()) {
-            return { "dateFormatValidator": true };
-        }
-        return null;
-    }
-    static dateRangeValidator(ac) {
-        if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
-            let dateValue = moment(ac.value);
-            let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
-            let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
-            if (dateValue.isBefore(minDate, "day") || dateValue.isAfter(maxDate, "day")) {
-                return { "dateRangeValidator": true };
-            }
-        }
-        return null;
-    }
-    static convertNgbStructToDate(struct) {
-        return { year: struct.year, month: struct.month - 1, day: struct.day };
-    }
-    static inRange(ac) {
-        if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
-            let dateValue = moment(ac.value);
-            let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
-            let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
-            if (dateValue.isBefore(minDate, "day") || dateValue.isAfter(maxDate, "day")) {
-                return false;
-            }
-            else {
-                return true;
-            }
-        }
-        return false;
-    }
-}
-DateValidator.minValue = undefined;
-DateValidator.maxValue = undefined;
-
-/**
- * Copyright (c) 2016 Huntsman Cancer Institute at the University of Utah, Confidential and Proprietary
- *
- * Extending class works like in Java except that decorators are only scanned in the child class.  In this case,
- * we want variables like inputData to be available to all inline components that extend this class; however, we want
- * this variable to be an @Input.
- * What we can do here is define "inputData: Object" here and in the extending class, define "@Input inputData: Object".
- *
- * The two way binding to the component is inputData.  To allow non-saving modification to this data, we copy
- * it to modifiedData.  The wrapped component such as input/select/... then use modifiedData as their ngModel.
- * When we cancel out of editing, modifiedData is ignored and replaced with inputData.  When editing is saved, inputData
- * is replaced with modifiedData.
- *
- * @since 1.0.0
- */
-class DateBase {
-    constructor(elementRef) {
-        this.state = 0;
-        this._el = elementRef.nativeElement;
-    }
-    /**
-     * Listen to clicks on the document.  If the state is in edit mode and there is a click outside the element,
-     * then save it.
-     *
-     * @param event
-     */
-    handleOutsideEvent(event) {
-        if (this.state !== 1) {
-            return;
-        }
-        let targetCmpt = null;
-        try {
-            // Catch exception if target is not an element
-            targetCmpt = event.target;
-        }
-        catch (e) {
-            this.save();
-            return;
-        }
-        let inside = false;
-        do {
-            if (targetCmpt === this._el) {
-                inside = true;
-                break;
-            }
-            targetCmpt = targetCmpt.parentElement;
-        } while (targetCmpt);
-        if (!inside) {
-            this.save();
-        }
-    }
-    /**
-     * Updates the modifiedData (working data) to the bound data.
-     */
-    updateInternalDataFromModel() {
-        this.modifiedData = this.inputData;
-    }
-    /**
-     * Updates the bound data with the working data.
-     */
-    updateModelFromInternalData() {
-        this.inputData = this.modifiedData;
-    }
-    /**
-     * When user chooses to edit, change state to show edit dialog.
-     */
-    startEdit() {
-        this.modifiedData = this.inputData;
-        this.state = 1;
-    }
-    /**
-     * Generic actions to change state based on key input.  Escape will cancel out of the edit
-     * without saving, enter will save and exit.
-     *
-     * @param event
-     */
-    onKeyDown(event) {
-        if (event.key === "escape") {
-            this.cancel();
-        }
-        else if (event.key === "enter") {
-            this.save();
-        }
-    }
-    /**
-     *
-     * @param newValue
-     */
-    onChange(newValue) {
-        this.modifiedData = newValue;
-    }
-    /**
-     * Replace the bound data with the working data and exit editing mode.
-     */
-    save() {
-        this.updateModelFromInternalData();
-        this.state = 0;
-    }
-    /**
-     * Don't update the bound data and exit the editing mode.
-     */
-    cancel() {
-        this.updateInternalDataFromModel();
-        this.state = 0;
-    }
-}
-DateBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable });
-DateBase.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateBase });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateBase, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-/**
- * TODO: Confirm timezone behavior.
- *
- * @since 4.0.0
- */
-class DateComponent extends DateBase {
-    constructor(elementRef, formBuilder, datePipe, changeDetectorRef) {
-        super(elementRef);
-        this.formBuilder = formBuilder;
-        this.datePipe = datePipe;
-        this.changeDetectorRef = changeDetectorRef;
-        // Binded data from the parent component.
-        this.dateFormat = "shortDate";
-        this.inputDataChange = new EventEmitter();
-        // only validate if user is typing
-        this.validate = false;
-        this.focused = false;
-    }
-    /**
-     *
-     */
-    ngOnInit() {
-        this.dateForm = this.formBuilder.group({
-            dateInput: new UntypedFormControl("", [DateValidator.dateFormatValidator, DateValidator.dateRangeValidator])
-        });
-        this.onChanges();
-        this.updateInternalDataFromModel();
-        // set the minDate to 20 years in the past by default
-        let today = new Date();
-        if (!this.minDate) {
-            this.minDate = { year: today.getFullYear() - 20, month: today.getMonth() + 1, day: today.getDate() };
-        }
-        // set max date to today by default
-        if (!this.maxDate) {
-            this.maxDate = { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() };
-        }
-    }
-    ngAfterViewInit() {
-        // Fill the input with the bound data set in the parent component.
-        if (this.inputData) {
-            let formattedDate = this.datePipe.transform(this.inputData, this.dateFormat);
-            this.dateForm.controls["dateInput"].setValue(formattedDate);
-        }
-        this.changeDetectorRef.detectChanges();
-    }
-    onChanges() { }
-    ngDoCheck() {
-        // this is the only way I found to have the focus on the startDate day when the user opens
-        // the popup. We only want to focus once otherwise user can not click anywhere else in the popup
-        if (this.dp && !this.focused) {
-            this.dp.focus();
-            this.focused = true;
-        }
-        // mark picker for focusing next time it is open
-        if (this.state === 0) {
-            this.focused = false;
-        }
-    }
-    updateInternalDataFromModel() {
-        if (this.inputData) {
-            this.modifiedData = new Date(this.inputData);
-            let md = new Date(this.inputData);
-            this.startDate = { year: md.getFullYear(), month: md.getMonth() + 1, day: md.getDate() };
-        }
-        else {
-            let today = new Date();
-            this.startDate = { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() };
-        }
-    }
-    /**
-     * Updates the bound data with the working data.
-     */
-    updateModelFromInternalData() {
-        if (this.modifiedData) {
-            let dsDate = this.ngbDateToString(this.modifiedData);
-            if (dsDate) {
-                this.inputData = dsDate;
-            }
-            else {
-                this.inputData = this.modifiedData;
-            }
-            const formattedModifiedDate = this.datePipe.transform(this.inputData, this.dateFormat);
-            this.dateForm.controls["dateInput"].setValue(formattedModifiedDate, { emitEvent: false });
-        }
-        this.inputDataChange.emit(this.inputData);
-        this.updateInternalDataFromModel();
-    }
-    clear() {
-        this.modifiedData = null;
-        this.inputData = null;
-        this.dateForm.controls["dateInput"].setValue("");
-        this.validate = false;
-        let today = new Date();
-        this.startDate = { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() };
-        this.state = 0;
-        this.dateForm.controls["dateInput"].setValue("");
-        this.inputDataChange.emit(this.inputData);
-    }
-    onKeyUpInput(event) {
-        // Check for when the input is deleted before being saved
-        if (event.key === "Delete" || event.key === "Backspace") {
-            if (this.dateForm.controls["dataInput"].value.length === 0) {
-                this.clear();
-            }
-        }
-        // update range so that the date range validator can run accurately
-        DateValidator.minValue = this.minDate;
-        DateValidator.maxValue = this.maxDate;
-        // Get the updated dateForm value
-        let eventTarget = event.target;
-        let inputValue = eventTarget.value;
-        this.dateForm.controls["dateInput"].patchValue(inputValue);
-        // if we have a good date and is within the range update the picker
-        if (DateValidator.inRange(this.dateForm.controls["dateInput"])) {
-            this.validate = false;
-            this.inputData = this.datePipe.transform(this.dateForm.controls["dateInput"].value, this.dateFormat);
-            this.updateInternalDataFromModel();
-            this.dateForm.controls["dateInput"].setValue(this.inputData);
-            this.inputDataChange.emit(this.inputData);
-        }
-        else {
-            this.validate = true;
-        }
-        // // only validate if user is typing
-        // if (!this.validate) {
-        //   this.validate = true;
-        //   this.dateForm.controls["dateInput"].setValue("");
-        //
-        //   // clear the date picker
-        //   this.modifiedData = null;
-        //   this.inputData = null;
-        //   let today: Date = new Date();
-        //   this.startDate = {year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate()};
-        //   this.state = 0;
-        //   this.inputDataChange.emit(this.inputData);
-        // }
-    }
-    /**
-     * NgbDateStruct stores day, month and year.  Convert this to ISO8601.
-     *
-     * @param date
-     * @returns {any}
-     */
-    ngbDateToString(date) {
-        if (date === undefined || date === null) {
-            return null;
-        }
-        else if (date.year === undefined || date.month === undefined || date.day === undefined) {
-            return null;
-        }
-        return date.year + "-" + ((date.month < 10) ? "0" : "") + date.month + "-" + ((date.day < 10) ? "0" : "") + date.day + "T12:00-06:00";
-    }
-}
-DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateComponent, deps: [{ token: i0.ElementRef }, { token: i2.UntypedFormBuilder }, { token: i1.DatePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateComponent, selector: "hci-date", inputs: { dateFormat: "dateFormat", minDate: "minDate", maxDate: "maxDate", label: "label", inputData: "inputData", modifiedData: "modifiedData" }, outputs: { inputDataChange: "inputDataChange" }, host: { listeners: { "document:click": "handleOutsideEvent($event)" } }, providers: [DatePipe, DateValidator], viewQueries: [{ propertyName: "dp", first: true, predicate: ["dp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-      <div class="form-group">
-         <div class="input-group d-flex">
-           <form [formGroup]="dateForm" class="flex-grow-1">
-             <div class="date-wrapper">
-               <div class="input-group-append">
-                 <input type="text" (keyup)="onKeyUpInput($event)"
-                        (ngModelChange)="onChange($event)" class="form-control"
-                        formControlName="dateInput" placeholder="{{label}}"
-                        aria-label="date" aria-describedby="basic-addon2" />
-                 <span class="input-group-text" id="basic-addon2" (click)="clear()">
-                   <i class="fas fa-times"></i>
-                 </span>
-                 <button class="btn btn-outline-secondary" type="button" (click)="startEdit();">
-                   <i class="fas fa-calendar-alt"></i>
-                 </button>
-               </div>
-               <div *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"
-                    class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
-               <div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
-                    class="invalid-date">Invalid Date Range</div>
-             </div>
-           </form>
-           <!--
-             We will replace the nbg date picker with material date picker
-           -->
-<!--           <form [formGroup]="dateForm" class="flex-grow-1">-->
-<!--             <div class="date-wrapper">-->
-<!--               <div class="input-group-append">-->
-<!--                  <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
-<!--                                  [style.padding-bottom.em]="0.5">-->
-<!--                    <input matInput (keypress)="onKeyPressInput($event)"-->
-<!--                           [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
-<!--                           formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
-<!--                           aria-describedby="basic-addon2">-->
-<!--                    <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
-<!--                    <mat-datepicker #datePicker></mat-datepicker>-->
-<!--                    <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
-<!--                               class="invalid-date">-->
-<!--                      Enter date as M/D/YYYY or MM/DD/YYYY-->
-<!--                    </mat-error>-->
-<!--                    <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
-<!--                               class="invalid-date">-->
-<!--                      Invalid Date Range-->
-<!--                    </mat-error>-->
-<!--                  </mat-form-field>-->
-<!--               </div>-->
-<!--             </div>-->
-<!--          </form>-->
-         </div>
-      </div>
-      <div *ngIf="state === 1" class="inline-editing">
-        <ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
-                        [maxDate]="maxDate" (keydown)="onKeyDown($event)"
-                        (ngModelChange)="onChange($event)" (select)="save()"></ngb-datepicker>
-        <div class="inline-hover-save-options">
-<!--          <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
-<!--          <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
-        </div>
-      </div>
-
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "hci-date", providers: [DatePipe, DateValidator], template: `
-      <div class="form-group">
-         <div class="input-group d-flex">
-           <form [formGroup]="dateForm" class="flex-grow-1">
-             <div class="date-wrapper">
-               <div class="input-group-append">
-                 <input type="text" (keyup)="onKeyUpInput($event)"
-                        (ngModelChange)="onChange($event)" class="form-control"
-                        formControlName="dateInput" placeholder="{{label}}"
-                        aria-label="date" aria-describedby="basic-addon2" />
-                 <span class="input-group-text" id="basic-addon2" (click)="clear()">
-                   <i class="fas fa-times"></i>
-                 </span>
-                 <button class="btn btn-outline-secondary" type="button" (click)="startEdit();">
-                   <i class="fas fa-calendar-alt"></i>
-                 </button>
-               </div>
-               <div *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"
-                    class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
-               <div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
-                    class="invalid-date">Invalid Date Range</div>
-             </div>
-           </form>
-           <!--
-             We will replace the nbg date picker with material date picker
-           -->
-<!--           <form [formGroup]="dateForm" class="flex-grow-1">-->
-<!--             <div class="date-wrapper">-->
-<!--               <div class="input-group-append">-->
-<!--                  <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
-<!--                                  [style.padding-bottom.em]="0.5">-->
-<!--                    <input matInput (keypress)="onKeyPressInput($event)"-->
-<!--                           [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
-<!--                           formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
-<!--                           aria-describedby="basic-addon2">-->
-<!--                    <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
-<!--                    <mat-datepicker #datePicker></mat-datepicker>-->
-<!--                    <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
-<!--                               class="invalid-date">-->
-<!--                      Enter date as M/D/YYYY or MM/DD/YYYY-->
-<!--                    </mat-error>-->
-<!--                    <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
-<!--                               class="invalid-date">-->
-<!--                      Invalid Date Range-->
-<!--                    </mat-error>-->
-<!--                  </mat-form-field>-->
-<!--               </div>-->
-<!--             </div>-->
-<!--          </form>-->
-         </div>
-      </div>
-      <div *ngIf="state === 1" class="inline-editing">
-        <ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
-                        [maxDate]="maxDate" (keydown)="onKeyDown($event)"
-                        (ngModelChange)="onChange($event)" (select)="save()"></ngb-datepicker>
-        <div class="inline-hover-save-options">
-<!--          <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
-<!--          <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
-        </div>
-      </div>
-
-  `, host: {
-                        "(document:click)": "handleOutsideEvent($event)"
-                    } }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.UntypedFormBuilder }, { type: i1.DatePipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dp: [{
-                type: ViewChild,
-                args: ["dp", { static: false }]
-            }], dateFormat: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], inputData: [{
-                type: Input
-            }], modifiedData: [{
-                type: Input
-            }], inputDataChange: [{
-                type: Output
-            }] } });
-
-/**
- * TODO: Confirm timezone behavior.
- *
- * @since 4.0.0
- */
-class DateRangeComponent {
-    constructor() {
-        // Binded data from the parent component.
-        this.dateFormat = "shortDate";
-        this.inputDataChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.setRange();
-    }
-    /**
-    *
-    */
-    ngAfterViewInit() {
-        // if there is no start date but there is an end date, make the start date go to the end date
-        if (!this.inputStartData && this.inputEndData) {
-            let dt = new Date(this.inputEndData);
-            this.sp.startDate = { year: dt.getFullYear(), month: dt.getMonth() + 1, day: dt.getDate() };
-        }
-    }
-    onClickSubmitStartDate(startData) {
-        this.setRange();
-        // if there is no start date but there is an end date, make the start date go to the end date
-        if (!startData && this.inputEndData) {
-            let dt = new Date(this.inputEndData);
-            this.sp.startDate = { year: dt.getFullYear(), month: dt.getMonth() + 1, day: dt.getDate() };
-        }
-        this.inputDataChange.emit([this.inputStartData, this.inputEndData]);
-    }
-    onClickSubmitEndDate(endData) {
-        this.setRange();
-        this.inputDataChange.emit([this.inputStartData, this.inputEndData]);
-    }
-    setRange() {
-        // set the minDate to 20 years in the past by default
-        let today = new Date();
-        if (!this.minStartDate) {
-            this.minStartDate = { year: today.getFullYear() - 20, month: today.getMonth() + 1, day: today.getDate() };
-        }
-        this.minEndDate = this.minStartDate;
-        // set the maxDate to today by default
-        this.maxStartDate = { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() };
-        this.maxEndDate = this.maxStartDate;
-        if (this.inputEndData) {
-            let endDate = new Date(this.inputEndData);
-            this.maxStartDate = { year: endDate.getFullYear(), month: endDate.getMonth() + 1, day: endDate.getDate() };
-        }
-        if (this.inputStartData) {
-            let startDate = new Date(this.inputStartData);
-            this.minEndDate = { year: startDate.getFullYear(), month: startDate.getMonth() + 1, day: startDate.getDate() };
-        }
-    }
-}
-DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "hci-date-range", inputs: { dateFormat: "dateFormat", inputStartData: "inputStartData", inputEndData: "inputEndData", startLabel: "startLabel", endLabel: "endLabel", minStartDate: "minStartDate" }, outputs: { inputDataChange: "inputDataChange" }, viewQueries: [{ propertyName: "sp", first: true, predicate: ["startdate"], descendants: true, static: true }, { propertyName: "ep", first: true, predicate: ["enddate"], descendants: true, static: true }], ngImport: i0, template: `  
-    <div class="d-flex flex-wrap date-range">
-      <hci-date #startdate
-                class="date"
-                [label]="startLabel"
-                [(inputData)]="inputStartData"
-                (inputDataChange)="onClickSubmitStartDate($event)"
-                [dateFormat]="dateFormat"
-                [minDate]="minStartDate"
-                [maxDate]="maxStartDate">
-      </hci-date>
-      <hci-date #enddate
-                class="date"
-                [label]="endLabel"
-                [(inputData)]="inputEndData"
-                (inputDataChange)="onClickSubmitEndDate($event)"
-                [dateFormat]="dateFormat"
-                [minDate]="minEndDate"
-                [maxDate]="maxEndDate">
-      </hci-date>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-date-range",
-                    template: `  
-    <div class="d-flex flex-wrap date-range">
-      <hci-date #startdate
-                class="date"
-                [label]="startLabel"
-                [(inputData)]="inputStartData"
-                (inputDataChange)="onClickSubmitStartDate($event)"
-                [dateFormat]="dateFormat"
-                [minDate]="minStartDate"
-                [maxDate]="maxStartDate">
-      </hci-date>
-      <hci-date #enddate
-                class="date"
-                [label]="endLabel"
-                [(inputData)]="inputEndData"
-                (inputDataChange)="onClickSubmitEndDate($event)"
-                [dateFormat]="dateFormat"
-                [minDate]="minEndDate"
-                [maxDate]="maxEndDate">
-      </hci-date>
-    </div>
-  `
-                }]
-        }], propDecorators: { sp: [{
-                type: ViewChild,
-                args: ["startdate", { static: true }]
-            }], ep: [{
-                type: ViewChild,
-                args: ["enddate", { static: true }]
-            }], dateFormat: [{
-                type: Input
-            }], inputStartData: [{
-                type: Input
-            }], inputEndData: [{
-                type: Input
-            }], startLabel: [{
-                type: Input
-            }], endLabel: [{
-                type: Input
-            }], inputDataChange: [{
-                type: Output
-            }], minStartDate: [{
-                type: Input
-            }] } });
-
-class DateModule {
-}
-DateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateModule, declarations: [DateComponent,
-        DateRangeComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule,
-        MatLegacyTabsModule,
-        MatLegacyFormFieldModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        MatLegacyInputModule], exports: [DateComponent,
-        DateRangeComponent] });
-DateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule,
-        MatLegacyTabsModule,
-        MatLegacyFormFieldModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        MatLegacyInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgbModule,
-                        MatLegacyTabsModule,
-                        MatLegacyFormFieldModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        MatLegacyInputModule
-                    ],
-                    declarations: [
-                        DateComponent,
-                        DateRangeComponent
-                    ],
-                    exports: [
-                        DateComponent,
-                        DateRangeComponent
-                    ]
-                }]
-        }] });
-
-/**
- * This component is designed to take any input as ng-content and wrap it such that it renders as a string.  When hovering
- * over, a border and edit icon is shown.  Upon clicking, it enters edit mode and the passed in input is rendered.  The
- * bound ngModel is wrapped in an intermediary.  This component binds a separate internal value to the wrapped component.
- * This allows the user to cancel out and not update the ngModel bound to this component.
- */
-class InlineComponent {
-    constructor() {
-        this.noValueMessage = "Click to Add";
-        // View state
-        this.editMode = false;
-    }
-    /**
-     * Called when the model updates and we need to up the view.
-     *
-     * @param value
-     */
-    writeValue(value) {
-        if (isDevMode()) {
-            console.debug("InlineComponent: writeValue");
-            console.debug("InlineComponent: " + value);
-        }
-        // Update the internal values.
-        this.value = value;
-        this.modifiedValue = this.value;
-        if (this.ngModelRef !== undefined) {
-            if (isDevMode()) {
-                console.debug("InlineComponent: update ngModelRef: " + this.modifiedValue);
-            }
-            // Update the model, then tell the directive that it has been updated.
-            this.ngModelRef.model = this.modifiedValue;
-            this.ngModelRef.ngOnChanges({
-                model: new SimpleChange(undefined, this.modifiedValue, false)
-            });
-        }
-    }
-    /**
-     * Register the function that is called when the value changes in the value.
-     *
-     * @param {(value: any) => void} fn
-     */
-    registerOnChange(fn) {
-        if (isDevMode()) {
-            console.debug("InlineComponent: registerOnChange");
-            console.debug(fn);
-        }
-        this.onChange = () => {
-            if (isDevMode()) {
-                console.debug("InlineComponent: onChange Function" + this.value);
-            }
-            fn(this.value);
-        };
-    }
-    /**
-     * Register the function called to update the model on blur.
-     *
-     * @param {() => void} fn
-     */
-    registerOnTouched(fn) {
-        if (isDevMode()) {
-            console.debug("InlineComponent: registerOnTouched");
-            console.debug(fn);
-        }
-        this.onTouched = fn;
-    }
-    /**
-     * Set the editMode.  If true then tell the passed in input to bind the current modified value.
-     *
-     * @param {boolean} editMode
-     */
-    setEditMode(event, editMode) {
-        event.stopPropagation();
-        this.editMode = editMode;
-        if (this.editMode) {
-            this.onTouched();
-            this.ngModelRef.model = this.modifiedValue;
-            this.ngModelRef.ngOnChanges({
-                model: new SimpleChange(undefined, this.modifiedValue, false)
-            });
-        }
-    }
-    /**
-     * Cancel edit mode which resets the modified value.
-     */
-    cancel() {
-        this.editMode = false;
-        this.modifiedValue = this.value;
-    }
-    /**
-     * Update the value with the modified value and call the onChange function so two way binding is updated with this component.
-     */
-    save() {
-        if (isDevMode()) {
-            console.debug("InlineComponent: save modifiedValue: " + this.modifiedValue + ", value: " + this.value);
-        }
-        this.value = this.modifiedValue;
-        this.onChange(this.value);
-        this.editMode = false;
-    }
-    /**
-     * The component to wrap must be named with #input and have a ngModel directive.  When the content is set here, we
-     * read the ngModel and set the model as well as listen to changes.
-     *
-     * @param {NgModel} ngModel
-     */
-    set contentChild(ngModel) {
-        if (isDevMode()) {
-            console.debug("InlineComponent: set contentChild: " + this.modifiedValue);
-            console.debug(ngModel);
-        }
-        this.ngModelRef = ngModel;
-        if (this.ngModelRef) {
-            this.ngModelRef.model = this.modifiedValue;
-            this.ngModelRef.ngOnChanges({
-                model: new SimpleChange(undefined, this.modifiedValue, false)
-            });
-            this.ngModelRef.update.subscribe((value) => {
-                if (isDevMode()) {
-                    console.debug("InlineComponent: cmpt model change: " + value);
-                }
-                this.modifiedValue = value;
-            });
-        }
-    }
-    /**
-     * If the click target is outside the inline input then cancel it.
-     *
-     * @param {MouseEvent} event
-     */
-    documentClick(event) {
-        if (this.editMode) {
-            if (isDevMode()) {
-                console.debug("InlineComponent: documentClick");
-            }
-            let e = event.target.closest("hci-inline-input");
-            if (!e) {
-                this.save();
-            }
-        }
-    }
-}
-InlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InlineComponent, selector: "hci-inline-input", inputs: { noValueMessage: "noValueMessage" }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => InlineComponent),
-            multi: true
-        }
-    ], queries: [{ propertyName: "renderTemplate", first: true, predicate: ["renderTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentChild", first: true, predicate: ["input"], descendants: true, read: NgModel }], ngImport: i0, template: `
-    <div *ngIf="!editMode; else editTemplate"
-         (click)="setEditMode($event, true)"
-         class="edit-false pl-1">
-      <ng-container *ngIf="renderTemplate; else defaultRenderTemplate">
-        <ng-container *ngTemplateOutlet="renderTemplate; context: {value: value}"></ng-container>
-      </ng-container>
-      <ng-template #defaultRenderTemplate>
-        <ng-container *ngIf="value">
-          {{value}}
-        </ng-container>
-        <ng-container *ngIf="!value">
-          {{noValueMessage}}
-        </ng-container>
-      </ng-template>
-      <button class="btn btn-primary ml-auto">
-        <i class="fas fa-pencil"></i>
-      </button>
-    </div>
-
-    <ng-template #editTemplate>
-      <div class="edit-true">
-        <div class="input-container">
-          <ng-content></ng-content>
-        </div>
-        <div class="d-flex">
-          <button class="btn btn-green" (click)="save()">
-            <i class="fas fa-check"></i>
-          </button>
-          <button class="btn btn-red d-flex" (click)="cancel()">
-            <i class="fas fa-times ml-auto mr-auto"></i>
-          </button>
-        </div>
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InlineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-inline-input",
-                    template: `
-    <div *ngIf="!editMode; else editTemplate"
-         (click)="setEditMode($event, true)"
-         class="edit-false pl-1">
-      <ng-container *ngIf="renderTemplate; else defaultRenderTemplate">
-        <ng-container *ngTemplateOutlet="renderTemplate; context: {value: value}"></ng-container>
-      </ng-container>
-      <ng-template #defaultRenderTemplate>
-        <ng-container *ngIf="value">
-          {{value}}
-        </ng-container>
-        <ng-container *ngIf="!value">
-          {{noValueMessage}}
-        </ng-container>
-      </ng-template>
-      <button class="btn btn-primary ml-auto">
-        <i class="fas fa-pencil"></i>
-      </button>
-    </div>
-
-    <ng-template #editTemplate>
-      <div class="edit-true">
-        <div class="input-container">
-          <ng-content></ng-content>
-        </div>
-        <div class="d-flex">
-          <button class="btn btn-green" (click)="save()">
-            <i class="fas fa-check"></i>
-          </button>
-          <button class="btn btn-red d-flex" (click)="cancel()">
-            <i class="fas fa-times ml-auto mr-auto"></i>
-          </button>
-        </div>
-      </div>
-    </ng-template>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InlineComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], propDecorators: { renderTemplate: [{
-                type: ContentChild,
-                args: ["renderTemplate", { read: TemplateRef, static: true }]
-            }], noValueMessage: [{
-                type: Input
-            }], contentChild: [{
-                type: ContentChild,
-                args: ["input", { read: NgModel, static: false }]
-            }], documentClick: [{
-                type: HostListener,
-                args: ["document:click", ["$event"]]
-            }] } });
-
-class InlineModule {
-}
-InlineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InlineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InlineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: InlineModule, declarations: [InlineComponent], imports: [CommonModule,
-        FormsModule], exports: [InlineComponent] });
-InlineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InlineModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InlineModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule
-                    ],
-                    declarations: [
-                        InlineComponent
-                    ],
-                    exports: [
-                        InlineComponent
-                    ]
-                }]
-        }] });
-
-class MdSelectComponent {
-    constructor(dictionaryService, http) {
-        this.dictionaryService = dictionaryService;
-        this.http = http;
-        this.classList = "";
-        this.required = false;
-        this.idKey = "id";
-        this.displayKey = "display";
-        this.onChangeCallback = () => { };
-        this.onTouchedCallback = () => { };
-    }
-    ngOnInit() {
-        if (this.url && this.url.indexOf("/") === -1) {
-            this.dictionaryService.getDictionaryDropdownEntries(this.url).subscribe((entries) => {
-                this.entries = entries;
-            });
-        }
-        else if (this.url) {
-            this.http.get(this.url).subscribe((entries) => {
-                this.entries = entries;
-            });
-        }
-        if (this.classList.length > 0) {
-            this.classList += " material-input";
-        }
-        else {
-            this.classList = "material-input";
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        this._value = newValue;
-        this.onChangeCallback(newValue);
-    }
-    onBlur() {
-        this.onTouchedCallback();
-    }
-    writeValue(value) {
-        if (value !== this.value) {
-            this.value = value;
-        }
-    }
-    registerOnChange(callback) {
-        this.onChangeCallback = callback;
-    }
-    registerOnTouched(callback) {
-        this.onTouchedCallback = callback;
-    }
-}
-MdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MdSelectComponent, deps: [{ token: i1$1.DictionaryService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-MdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MdSelectComponent, selector: "hci-md-select", inputs: { classList: ["class", "classList"], name: "name", label: "label", url: "url", className: "className", entries: "entries", required: "required", idKey: "idKey", displayKey: "displayKey" }, host: { properties: { "class": "this.classList" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MdSelectComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: `
-    <mat-form-field>
-      <mat-label>{{label}}</mat-label>
-      <mat-select [(value)]="value" [required]="required">
-        <mat-option *ngIf="!required" [value]="undefined"></mat-option>
-        <mat-option *ngFor="let row of entries" [value]="row[idKey]">{{ row[displayKey] }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLegacyLabel, selector: "mat-label" }, { kind: "component", type: i6.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MdSelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-md-select",
-                    template: `
-    <mat-form-field>
-      <mat-label>{{label}}</mat-label>
-      <mat-select [(value)]="value" [required]="required">
-        <mat-option *ngIf="!required" [value]="undefined"></mat-option>
-        <mat-option *ngFor="let row of entries" [value]="row[idKey]">{{ row[displayKey] }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MdSelectComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DictionaryService }, { type: i2$1.HttpClient }]; }, propDecorators: { classList: [{
-                type: HostBinding,
-                args: ["class"]
-            }, {
-                type: Input,
-                args: ["class"]
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], entries: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], idKey: [{
-                type: Input
-            }], displayKey: [{
-                type: Input
-            }] } });
-
-class NativeSelectComponent {
-    get filter() {
-        return this._filter;
-    }
-    set filter(f) {
-        this._filter = f;
-        if (this.filterKey != null && this.filter != null && this.unfilteredEntries != null) {
-            this.entries = this.unfilteredEntries;
-            var newlist = this.entries.filter(entry => entry[this.filterKey] == this.filter);
-            this.entries = newlist;
-            if (this.sortKey != null) {
-                if (this.sortNumeric) {
-                    this.entries.sort((a, b) => {
-                        return a[this.sortKey] - b[this.sortKey];
-                    });
-                }
-                else {
-                    this.entries.sort((a, b) => {
-                        return a[this.sortKey].localeCompare(b[this.sortKey]);
-                    });
-                }
-            }
-        }
-    }
-    constructor(dictionaryService, http, cdr) {
-        this.dictionaryService = dictionaryService;
-        this.http = http;
-        this.cdr = cdr;
-        this.classList = "";
-        this.required = false;
-        this.idKey = "id";
-        this.displayKey = "display";
-        this.disabled = false;
-        this.sortKey = null;
-        this.sortNumeric = false;
-        this.filterKey = null;
-        this._filter = null;
-    }
-    ngOnInit() {
-        if (this.url && this.url.indexOf("/") === -1) {
-            this.dictionaryService.getDictionaryDropdownEntries(this.url).subscribe((entries) => {
-                this.entries = entries;
-                if (this.filterKey != null && this.filter != null) {
-                    this.unfilteredEntries = this.entries;
-                    var newlist = this.entries.filter(entry => entry[this.filterKey] == this.filter);
-                    this.entries = newlist;
-                }
-                if (this.sortKey != null) {
-                    if (this.sortNumeric) {
-                        this.entries.sort((a, b) => {
-                            return a[this.sortKey] - b[this.sortKey];
-                        });
-                    }
-                    else {
-                        this.entries.sort((a, b) => {
-                            return a[this.sortKey].localeCompare(b[this.sortKey]);
-                        });
-                    }
-                }
-            });
-        }
-        else if (this.url) {
-            this.http.get(this.url).subscribe((entries) => {
-                this.entries = entries;
-                if (this.filterKey != null && this.filter != null) {
-                    this.unfilteredEntries = this.entries;
-                    var newlist = this.entries.filter(entry => entry[this.filterKey] == this.filter);
-                    this.entries = newlist;
-                }
-                if (this.sortKey != null) {
-                    if (this.sortNumeric) {
-                        this.entries.sort((a, b) => {
-                            return a[this.sortKey] - b[this.sortKey];
-                        });
-                    }
-                    else {
-                        this.entries.sort((a, b) => {
-                            return a[this.sortKey].localeCompare(b[this.sortKey]);
-                        });
-                    }
-                }
-            });
-        }
-        else {
-            if (this.filterKey != null && this.filter != null) {
-                this.unfilteredEntries = this.entries;
-                var newlist = this.entries.filter(entry => entry[this.filterKey] == this.filter);
-                this.entries = newlist;
-            }
-            if (this.sortKey != null) {
-                if (this.sortNumeric) {
-                    this.entries.sort((a, b) => {
-                        return a[this.sortKey] - b[this.sortKey];
-                    });
-                }
-                else {
-                    this.entries.sort((a, b) => {
-                        return a[this.sortKey].localeCompare(b[this.sortKey]);
-                    });
-                }
-            }
-        }
-        if (this.classList.length > 0) {
-            this.classList += " native-input"; //?
-        }
-        else {
-            this.classList = "native-input";
-        }
-    }
-    setHeight(h) {
-        this.height = h;
-        // avoid ExpressionChangedAfterItHasBeenCheckedError
-        this.cdr.detectChanges();
-    }
-    writeValue(value) {
-        if (value !== undefined) {
-            this.value = value;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = () => {
-            fn(this.value);
-        };
-    }
-    registerOnTouched(fn) { }
-}
-NativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NativeSelectComponent, deps: [{ token: i1$1.DictionaryService }, { token: i2$1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NativeSelectComponent, selector: "hci-native-select", inputs: { classList: ["class", "classList"], name: "name", label: "label", url: "url", entries: "entries", required: "required", idKey: "idKey", displayKey: "displayKey", disabled: "disabled", sortKey: "sortKey", sortNumeric: "sortNumeric", filterKey: "filterKey", filter: "filter" }, host: { properties: { "class": "this.classList" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => NativeSelectComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: `
-    <div *ngIf="label" class="label">
-      {{label}}{{(required) ? " *" : ""}}
-    </div>
-    <select [(ngModel)]="value"
-            [style.height.px]="height"
-            (change)="onChange()"
-            [disabled]="disabled"
-            class="form-control flex-grow-1"
-            style="min-width: 4rem;">
-      <ng-container *ngIf="!required">
-        <option [ngValue]="undefined">
-        </option>
-      </ng-container>
-      <option *ngFor="let row of entries"
-              [ngValue]="row[idKey]">
-        {{ row[displayKey] }}
-      </option>
-    </select>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NativeSelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-native-select",
-                    template: `
-    <div *ngIf="label" class="label">
-      {{label}}{{(required) ? " *" : ""}}
-    </div>
-    <select [(ngModel)]="value"
-            [style.height.px]="height"
-            (change)="onChange()"
-            [disabled]="disabled"
-            class="form-control flex-grow-1"
-            style="min-width: 4rem;">
-      <ng-container *ngIf="!required">
-        <option [ngValue]="undefined">
-        </option>
-      </ng-container>
-      <option *ngFor="let row of entries"
-              [ngValue]="row[idKey]">
-        {{ row[displayKey] }}
-      </option>
-    </select>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NativeSelectComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DictionaryService }, { type: i2$1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
-                type: HostBinding,
-                args: ["class"]
-            }, {
-                type: Input,
-                args: ["class"]
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], entries: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], idKey: [{
-                type: Input
-            }], displayKey: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], sortKey: [{
-                type: Input
-            }], sortNumeric: [{
-                type: Input
-            }], filterKey: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }] } });
-
-class MdMultiSelectComponent {
-    constructor(dictionaryService, http) {
-        this.dictionaryService = dictionaryService;
-        this.http = http;
-        this.classList = "";
-        this.required = false;
-        this.idKey = "id";
-        this.displayKey = "display";
-        this.options = new UntypedFormControl();
-        this.onChangeCallback = () => { };
-        this.onTouchedCallback = () => { };
-    }
-    ngOnInit() {
-        if (this.url && this.url.indexOf("/") === -1) {
-            this.dictionaryService.getDictionaryDropdownEntries(this.url).subscribe((entries) => {
-                this.entries = entries;
-            });
-        }
-        else if (this.url) {
-            this.http.get(this.url).subscribe((entries) => {
-                this.entries = entries;
-            });
-        }
-        if (this.classList.length > 0) {
-            this.classList += " material-input";
-        }
-        else {
-            this.classList = "material-input";
-        }
-    }
-    getOptionDisplay(value) {
-        for (let entry of this.entries) {
-            if (entry[this.idKey] === value) {
-                return entry[this.displayKey];
-            }
-        }
-        return undefined;
-    }
-    remove(value) {
-        console.debug(this.options);
-        let newValue = [];
-        for (let option of this.options.value) {
-            if (option !== value) {
-                newValue.push(option);
-            }
-        }
-        this.writeValue(newValue);
-    }
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        this._value = newValue;
-        this.options.setValue(newValue);
-        this.onChangeCallback(newValue);
-    }
-    onBlur() {
-        this.onTouchedCallback();
-    }
-    writeValue(value) {
-        if (value !== this.value) {
-            this.value = value;
-            this.options.setValue(value);
-        }
-    }
-    registerOnChange(callback) {
-        this.onChangeCallback = callback;
-    }
-    registerOnTouched(callback) {
-        this.onTouchedCallback = callback;
-    }
-}
-MdMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MdMultiSelectComponent, deps: [{ token: i1$1.DictionaryService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-MdMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MdMultiSelectComponent, selector: "hci-md-multi-select", inputs: { classList: ["class", "classList"], name: "name", label: "label", url: "url", entries: "entries", required: "required", idKey: "idKey", displayKey: "displayKey" }, host: { properties: { "class": "this.classList" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MdMultiSelectComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: `
-    <mat-form-field class="flex-grow-1">
-      <mat-label>{{label}}</mat-label>
-      <mat-select [(value)]="value" [formControl]="options" [required]="required" multiple>
-        <mat-select-trigger class="d-flex flex-wrap">
-          <div *ngFor="let option of options.value" class="chip">
-            {{getOptionDisplay(option)}}
-            <div (click)="$event.stopPropagation(); remove(option)" class="chip-remove">
-              <i class="fa fa-times-circle fa-xs"></i>
-            </div>
-          </div>
-        </mat-select-trigger>
-        <mat-option *ngFor="let row of entries" [value]="row[idKey]">{{ row[displayKey] }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLegacyLabel, selector: "mat-label" }, { kind: "component", type: i6.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatLegacySelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MdMultiSelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-md-multi-select",
-                    template: `
-    <mat-form-field class="flex-grow-1">
-      <mat-label>{{label}}</mat-label>
-      <mat-select [(value)]="value" [formControl]="options" [required]="required" multiple>
-        <mat-select-trigger class="d-flex flex-wrap">
-          <div *ngFor="let option of options.value" class="chip">
-            {{getOptionDisplay(option)}}
-            <div (click)="$event.stopPropagation(); remove(option)" class="chip-remove">
-              <i class="fa fa-times-circle fa-xs"></i>
-            </div>
-          </div>
-        </mat-select-trigger>
-        <mat-option *ngFor="let row of entries" [value]="row[idKey]">{{ row[displayKey] }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MdMultiSelectComponent),
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DictionaryService }, { type: i2$1.HttpClient }]; }, propDecorators: { classList: [{
-                type: HostBinding,
-                args: ["class"]
-            }, {
-                type: Input,
-                args: ["class"]
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], entries: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], idKey: [{
-                type: Input
-            }], displayKey: [{
-                type: Input
-            }] } });
-
-class CustomComboBoxComponent {
-    set customFieldClasses(value) {
-        this._customFieldClasses = value ? value : "";
-    }
-    get customFieldClasses() {
-        return !!this._customFieldClasses ? this._customFieldClasses : "mat-form-field-should-float";
-    }
-    set customOptionClasses(value) {
-        this._customOptionClasses = value ? value : "";
-    }
-    get customOptionClasses() {
-        return !!this._customOptionClasses ? this._customOptionClasses : "";
-    }
-    constructor(cdr, injector) {
-        this.cdr = cdr;
-        this.injector = injector;
-        this.optionSizePx = 25;
-        this.numOptionsToShow = 10;
-        this.maxOptionsToShow = 10;
-        this.customViewportClass = "";
-        this.placeholder = "";
-        // Removes the placeholder after a selection is made
-        this.temporaryPlaceholder = false;
-        this.tooltip = "";
-        this.allowNone = true;
-        this.selectTextOnOpen = true;
-        // tell mat-dialog to pass initial focus to the inner input
-        this._cdkFocusInitial = null;
-        this.cdkFocusInitial = undefined;
-        // on tab, skip the host element and focus the input
-        this._tabindex = null;
-        this.tabindex = 0;
-        this.forceShowNone = false;
-        this.options = [];
-        this.allowLoader = false;
-        this.isOpen = false;
-        this.loadedOptions = [];
-        this.forceEmitObject = false;
-        this.appearance = "";
-        // Set to empty to not show errors
-        this.defineErrors = { required: "This is a required field" };
-        this._showLoader = false;
-        this._customFieldClasses = "";
-        this._customOptionClasses = "";
-        this.outerControl = new UntypedFormControl();
-        this.innerControl = new UntypedFormControl(null);
-        this.ignoreInnerControlChanges = false;
-        this.subs = new Subscription();
-        this.noNgControl = false;
-        this.viewportVisibleRange = {
-            start: 0,
-            end: this.numOptionsToShow - 1
-        };
-        this.clickInProgress = false;
-        this.optionSelected = new EventEmitter();
-        this.optionChanged = new EventEmitter();
-        this.optionsLoaded = new EventEmitter();
-        this.onChangeFn = () => { };
-        this.onTouchedFn = () => { };
-        this.displayFn = (opt) => {
-            return opt ? (this.displayField ? opt[this.displayField] : opt) : undefined;
-        };
-    }
-    ngOnInit() {
-        this._showLoader = this.allowLoader && (!this.options || this.options.length === 0);
-    }
-    ngAfterViewInit() {
-        let ngControl = this.injector.get(NgControl, null);
-        if (ngControl && ngControl.control) {
-            this.outerControl = ngControl.control;
-            this.innerControl.setValidators(this.outerControl.validator);
-            this.innerControl.setAsyncValidators(this.outerControl.asyncValidator);
-            this.innerControl.updateValueAndValidity();
-            this.cdr.detectChanges();
-        }
-        else {
-            this.noNgControl = true;
-        }
-        this.subs.add(this.innerControl.valueChanges.pipe(debounceTime(300)).subscribe((_value) => {
-            if (this.isOpen && !this.ignoreInnerControlChanges) {
-                this.filterOptions();
-            }
-            else {
-                this.ignoreInnerControlChanges = false;
-            }
-        }));
-        // work around for validators not always propagating
-        this.subs.add(this.outerControl.statusChanges.subscribe((_event) => {
-            this.innerControl.setValidators(this.outerControl.validator);
-            this.innerControl.setAsyncValidators(this.outerControl.asyncValidator);
-            this.innerControl.updateValueAndValidity();
-            this.innerControl.setErrors(this.outerControl.errors);
-            if (this.outerControl.touched) {
-                this.innerControl.markAsTouched();
-            }
-        }));
-        // this object is used to control the active state when keying up and down
-        this.keyManager = this.autoCompleteTrigger.autocomplete._keyManager;
-        this.keyManager.withWrap(false);
-        this.subs.add(combineLatest([
-            this.viewport.renderedRangeStream,
-            this.viewport.scrolledIndexChange
-        ]).subscribe(([renderedRange, scrolledIndex]) => {
-            // Instead of loading the whole item list at once, the virtual scroll viewport buffers
-            // a range of entries, only a portion of which are within the visible fold
-            this.viewportRenderRange = renderedRange;
-            // we have to figure out the visible range ourselves
-            let len = Math.min(this.loadedOptions.length + (this.allowNone ? 1 : 0), this.numOptionsToShow - 1);
-            this.viewportVisibleRange = {
-                start: scrolledIndex,
-                end: scrolledIndex + len
-            };
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes.options) {
-            let optionsChange = changes.options;
-            if (!optionsChange.currentValue || optionsChange.currentValue.length < 1) {
-                this.options = [];
-                if (this.innerControl.value != null) {
-                    //Reset the innerControl value of the dropdown list to an empty array in case of no results are present to be displayed.
-                    //This flushes out the stale value from the list if there are no results to be displayed.
-                    this.innerControl.setValue([]);
-                }
-            }
-            let currentOpts = optionsChange.currentValue;
-            if (currentOpts && "length" in currentOpts && currentOpts !== optionsChange.previousValue) {
-                this._showLoader = false;
-                this.optionsLoaded.emit();
-                // If number of options is less than our max, reduce size of overlay
-                this.numOptionsToShow = Math.min(currentOpts.length + (this.allowNone ? 1 : 0), this.maxOptionsToShow);
-            }
-            else {
-                this._showLoader = true;
-            }
-        }
-        setTimeout(() => {
-            // The autocomplete will automatically pop open once it has options filtered into it,
-            // but we don't want it to on initial page load or when tabbing though
-            if (this.isOpen) {
-                this.filterOptions();
-            }
-            else {
-                this.loadOnlyCurrentValue(this.outerControl.value);
-            }
-        });
-    }
-    writeValue(obj) {
-        this.loadOnlyCurrentValue(obj);
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.innerControl.disable();
-        }
-        else {
-            this.innerControl.enable();
-        }
-    }
-    getError() {
-        for (const error in this.outerControl.errors) {
-            if (this.defineErrors && error in this.defineErrors) {
-                return this.defineErrors[error];
-            }
-        }
-    }
-    loadOnlyCurrentValue(cntrlVal) {
-        if (!this.options || this.options.length < 1) {
-            return;
-        }
-        let newValue = null;
-        if (cntrlVal !== null && cntrlVal !== undefined) {
-            let currentlySelected = this.options.find((opt) => {
-                let optValue = this.valueField ? opt[this.valueField] : opt;
-                if (this.forceEmitObject) {
-                    let outerValue = cntrlVal ? (this.valueField ? cntrlVal[this.valueField] : cntrlVal) : null;
-                    if (optValue === outerValue) {
-                        return true;
-                    }
-                }
-                else {
-                    return optValue === cntrlVal;
-                }
-            });
-            if (currentlySelected) {
-                newValue = currentlySelected;
-            }
-        }
-        // prefer to check id if it has one  vs straight against it's object identity
-        if (this.innerControl.value && newValue != null && this.valueField) {
-            if (this.innerControl.value[this.valueField] !== newValue[this.valueField]) {
-                this.ignoreInnerControlChanges = true;
-                this.innerControl.setValue(newValue);
-                this.optionSelected.emit(newValue[this.valueField]);
-            }
-        }
-        else if (this.innerControl.value !== newValue) {
-            this.ignoreInnerControlChanges = true;
-            this.innerControl.setValue(newValue);
-            let nv = newValue ? ((this.valueField && !this.forceEmitObject) ? newValue[this.valueField] : newValue) : null;
-            this.optionSelected.emit(nv);
-        }
-    }
-    filterOptions(showAll = false) {
-        this.forceShowNone = showAll;
-        this.isOpen = true;
-        if (!this.options || this.options.length < 1) {
-            return;
-        }
-        if (showAll || !this.innerControl.value) {
-            this.loadedOptions = [...this.options];
-        }
-        else {
-            let searchValue = "";
-            if (typeof this.innerControl.value === "string") {
-                searchValue = this.innerControl.value.toLowerCase();
-            }
-            else if (this.displayField) {
-                searchValue = this.innerControl.value[this.displayField].toLowerCase();
-            }
-            this.loadedOptions = this.options.filter((opt) => {
-                let optDisplay = (this.displayField ? opt[this.displayField] : opt).toLowerCase();
-                return optDisplay.includes(searchValue);
-            });
-            this.forceShowNone = this.loadedOptions.length === 0;
-        }
-        this.selectedIndex = this.getOptIndex(this.outerControl.value);
-    }
-    showLoader() {
-        return this.allowLoader && this._showLoader;
-    }
-    open() {
-        if (this.innerControl.disabled) {
-            return;
-        }
-        // The autocomplete will only open when options are loaded
-        this.filterOptions(true);
-        this.autoCompleteTrigger.openPanel();
-    }
-    close() {
-        this.autoCompleteTrigger.closePanel();
-    }
-    onOpened() {
-        this.forceShowNone = true;
-        if (this.isOpen) {
-            return;
-        }
-        this.isOpen = true;
-        if (this.selectTextOnOpen) {
-            this.inputElement.nativeElement.select(); // Highlights text
-        }
-        if (this.selectedIndex > 0) {
-            // make the selected option also the active option
-            this.activeValue = this.getOptVal(this.loadedOptions[this.selectedIndex]);
-            setTimeout(() => {
-                this.scrollToSelectedOption();
-            });
-        }
-    }
-    onClosed() {
-        if (!this.isOpen) {
-            return;
-        }
-        this.isOpen = false;
-        if (!this.innerControl.value && this.outerControl.value) {
-            this.selectOption(null);
-        }
-        this.loadOnlyCurrentValue(this.outerControl.value);
-        // reset the options so the autocomplete won't automatically open on the next tab through
-        this.loadedOptions = [];
-    }
-    startClick() {
-        // clicking on certain parts of the mat-field will "flicker" the focus, triggering
-        // error validation early. This tracks those internal clicks so they can be ignored
-        this.clickInProgress = true;
-    }
-    endClick() {
-        this.clickInProgress = false;
-    }
-    onClick(event) {
-        event.stopPropagation();
-        if (!this.isOpen) {
-            this.open();
-        }
-    }
-    toggleOpen(event) {
-        event.stopPropagation();
-        if (this.isOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    onKey(event) {
-        if (event.key === "Tab" || event.key === "Enter") {
-            return;
-        }
-        else {
-            if (!this.isOpen) {
-                this.open();
-            }
-            // There is a bug where the cdk a11y KeyManager implementation is not compatible with
-            // the MatAutocompleteTrigger, which causes the Drop-down not scroll with keyboard
-            // on long option lists.
-            //
-            // https://github.com/angular/components/issues/16598
-            //
-            // This work around takes control of the keyboard and manually scrolls and activates
-            // the options
-            //
-            // References:
-            //   https://github.com/angular/components/blob/master/src/material/autocomplete/autocomplete-trigger.ts
-            //   https://github.com/angular/components/blob/master/src/cdk/a11y/key-manager/list-key-manager.ts
-            //   https://github.com/angular/components/blob/master/src/cdk/a11y/key-manager/activedescendant-key-manager.ts
-            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                event.stopPropagation();
-                this.initActiveItem();
-                this.shiftActiveItem(event.key);
-                this.checkActiveBoundaries();
-            }
-        }
-    }
-    // before our keypress binding even triggers, angular has already moved the active selection
-    // unsyncing it with our display. this code re-initializes the active option
-    initActiveItem() {
-        if (this.activeValue === undefined || this.activeValue === null) {
-            this.keyManager.setFirstItemActive();
-        }
-        else {
-            let activeIndex = this.getActiveIndex();
-            // this does the conversion from an index within all options down to a position within the
-            // displayed range, which is all the keymanager is aware of
-            let position = activeIndex - this.viewportRenderRange.start;
-            this.keyManager.setActiveItem(position);
-        }
-    }
-    shiftActiveItem(key) {
-        if (key === "ArrowUp") {
-            this.keyManager.setPreviousItemActive();
-        }
-        else if (key === "ArrowDown") {
-            this.keyManager.setNextItemActive();
-        }
-        if (this.keyManager.activeItem) {
-            this.activeValue = this.getOptVal(this.keyManager.activeItem.value);
-        }
-    }
-    // check if the active option index is within the displayed viewport window
-    // if not, scroll it into view
-    checkActiveBoundaries() {
-        let activeIndex = this.getActiveIndex();
-        if (activeIndex < this.viewportVisibleRange.start) {
-            setTimeout(() => {
-                this.viewport.scrollToOffset(activeIndex * this.optionSizePx);
-            });
-        }
-        else if (activeIndex > this.viewportVisibleRange.end) {
-            setTimeout(() => {
-                this.viewport.scrollToOffset((activeIndex - (this.numOptionsToShow - 1)) * this.optionSizePx);
-            });
-        }
-    }
-    getActiveIndex() {
-        let activeIndex = 0;
-        if (this.activeValue !== undefined && this.activeValue !== null) {
-            // if we added a none option the returned index would be off by one
-            let valIndex = this.getOptIndex(this.activeValue) + (this.allowNone && (this.forceShowNone || !this.innerControl.value) ? 1 : 0);
-            // the index should be within the range of our entire buffer, or just allow it to reset
-            if (valIndex >= this.viewportRenderRange.start
-                && (!this.viewportRenderRange.end || valIndex <= this.viewportRenderRange.end)) {
-                activeIndex = valIndex;
-            }
-        }
-        return activeIndex;
-    }
-    onFocus() {
-        if (!this.isOpen) {
-            // Highlights text
-            if (this.selectTextOnOpen) {
-                this.inputElement.nativeElement.select();
-            }
-        }
-    }
-    onFocusOut() {
-        // mark control touched and trigger error validation
-        if (!this.clickInProgress) {
-            this.close();
-            this.onTouchedFn();
-        }
-    }
-    selectOption(opt) {
-        let newVal = this.getOptVal(opt, this.forceEmitObject);
-        if (this.noNgControl) {
-            this.outerControl.setValue(newVal);
-        }
-        this.onChangeFn(newVal);
-        this.optionSelected.emit(newVal);
-        this.optionChanged.emit(newVal);
-    }
-    scrollToSelectedOption() {
-        // scroll to the currently selected option when we open the dropdown
-        if (this.selectedIndex > 0) {
-            let offsetIndex = this.selectedIndex + (this.allowNone ? 1 : 0); // adjust for None entry
-            offsetIndex -= (this.numOptionsToShow / 2) - 1; // calculate middle of viewport
-            this.viewport.scrollToOffset(offsetIndex * this.optionSizePx);
-        }
-    }
-    getOptVal(opt, forceObject = false) {
-        if (this.valueField && !forceObject) {
-            if (opt !== null && opt !== undefined && typeof opt === "object" && this.valueField in opt) {
-                return opt[this.valueField];
-            }
-            else {
-                return undefined;
-            }
-        }
-        return opt;
-    }
-    getOptIndex(optValue) {
-        // find the index for the currently selected option
-        if (optValue !== null && optValue !== undefined) {
-            return this.loadedOptions.findIndex((option) => {
-                return this.getOptVal(option) === optValue;
-            });
-        }
-        return undefined;
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-}
-CustomComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomComboBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-CustomComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomComboBoxComponent, selector: "hci-combobox", inputs: { maxOptionsToShow: "maxOptionsToShow", customViewportClass: "customViewportClass", customFieldClasses: "customFieldClasses", customOptionClasses: "customOptionClasses", label: "label", placeholder: "placeholder", temporaryPlaceholder: "temporaryPlaceholder", tooltip: "tooltip", allowNone: "allowNone", selectTextOnOpen: "selectTextOnOpen", cdkFocusInitial: "cdkFocusInitial", tabindex: "tabindex", options: "options", allowLoader: "allowLoader", valueField: "valueField", forceEmitObject: "forceEmitObject", displayField: "displayField", appearance: "appearance", floatLabel: "floatLabel", defineErrors: "defineErrors" }, outputs: { optionSelected: "optionSelected", optionChanged: "optionChanged", optionsLoaded: "optionsLoaded" }, host: { properties: { "attr.cdkFocusInitial": "this._cdkFocusInitial", "attr.tabindex": "this._tabindex" }, classAttribute: "hci-combobox-container" }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => CustomComboBoxComponent),
-            multi: true,
-        }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "autoCompleteTrigger", first: true, predicate: ["input"], descendants: true, read: MatLegacyAutocompleteTrigger }], usesOnChanges: true, ngImport: i0, template: `
-    <mat-form-field (click)="onClick($event)"
-                    (mousedown)="startClick()"
-                    (mouseup)="endClick()"
-                    [appearance]="appearance"
-                    [floatLabel]="floatLabel"
-                    [matTooltip]="this.tooltip"
-                    [ngClass]="customFieldClasses"
-                    >
-      <mat-label *ngIf="label !== undefined">{{ label }}</mat-label>
-      <mat-label *ngIf="label === undefined">
-        {{ temporaryPlaceholder ? (innerControl.value ? '' : placeholder) : placeholder }}
-      </mat-label>
-      <input #input
-             matInput
-             name="customComboBoxFilter"
-             [placeholder]="temporaryPlaceholder ? (innerControl.value ? '' : placeholder) : placeholder"
-             [matAutocomplete]="auto"
-             autocomplete="off"
-             [formControl]="innerControl"
-             [attr.cdkFocusInitial]="cdkFocusInitial === undefined ? null : cdkFocusInitial"
-             [tabindex]="tabindex"
-             (keydown)="onKey($event)"
-             (focus)="onFocus()"
-             (focusout)="onFocusOut()"
-             >
-      <div matSuffix
-           class="hci-combobox-arrow-wrapper"
-           (click) = "toggleOpen($event)"
-           (mousedown)="startClick()"
-           (mouseup)="endClick()"
-           >
-        <div class="hci-combobox-arrow"></div>
-      </div>
-      <mat-spinner matSuffix *ngIf="showLoader()" [diameter]="30" style="float: right; margin-left: 8px"></mat-spinner>
-      <mat-autocomplete #auto="matAutocomplete"
-                        autoActiveFirstOption
-                        (optionSelected)="this.selectOption($event.option.value)"
-                        (opened)="this.onOpened()"
-                        (closed)="this.onClosed()"
-                        [displayWith]="this.displayFn">
-        <cdk-virtual-scroll-viewport #viewport
-                                     [style.display]="isOpen ? null : 'none'"
-                                     class="hci-combobox-viewport"
-                                     [ngClass]= "customViewportClass"
-                                     [itemSize]="optionSizePx"
-                                     [style.height.px]="numOptionsToShow * optionSizePx"
-                                     [minBufferPx]="numOptionsToShow * optionSizePx * 2"
-                                     [maxBufferPx]="numOptionsToShow * optionSizePx * 3"
-                                     (mousedown)="startClick()"
-                                     (mouseup)="endClick()"
-                                     >
-          <mat-option *ngIf="allowNone && isOpen && (this.forceShowNone || !this.innerControl.value)"
-                      [ngClass]="customOptionClasses"
-                      [style.height.px]="optionSizePx"
-                      >
-            None
-          </mat-option>
-          <mat-option *cdkVirtualFor="let opt of this.loadedOptions"
-                      [value]="opt"
-                      [ngClass]="customOptionClasses"
-                      [class.hci-combobox-selected]="(valueField ? opt[valueField] : opt) === outerControl.value"
-                      [class.mat-selected]="(valueField ? opt[valueField] : opt) === outerControl.value"
-                      [style.height.px]="optionSizePx"
-                      >
-            {{ displayField ? opt[displayField] : opt }}
-          </mat-option>
-        </cdk-virtual-scroll-viewport>
-      </mat-autocomplete>
-      <mat-error>
-        {{ getError() }}
-      </mat-error>
-      <ng-content></ng-content>
-    </mat-form-field>
-  `, isInline: true, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.hci-combobox-arrow-wrapper{display:table-cell;vertical-align:middle}.hci-combobox-viewport mat-option{display:flex;align-items:center;padding:0 .2rem}.hci-combobox-viewport mat-option .mat-option-text{white-space:nowrap}.hci-combobox-viewport .hci-combobox-selected{background-color:#ddd}.hci-combobox-viewport .mat-active{background-color:#f3f3f3}.hci-combobox-viewport{overflow-anchor:none}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i6$2.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomComboBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "hci-combobox", template: `
-    <mat-form-field (click)="onClick($event)"
-                    (mousedown)="startClick()"
-                    (mouseup)="endClick()"
-                    [appearance]="appearance"
-                    [floatLabel]="floatLabel"
-                    [matTooltip]="this.tooltip"
-                    [ngClass]="customFieldClasses"
-                    >
-      <mat-label *ngIf="label !== undefined">{{ label }}</mat-label>
-      <mat-label *ngIf="label === undefined">
-        {{ temporaryPlaceholder ? (innerControl.value ? '' : placeholder) : placeholder }}
-      </mat-label>
-      <input #input
-             matInput
-             name="customComboBoxFilter"
-             [placeholder]="temporaryPlaceholder ? (innerControl.value ? '' : placeholder) : placeholder"
-             [matAutocomplete]="auto"
-             autocomplete="off"
-             [formControl]="innerControl"
-             [attr.cdkFocusInitial]="cdkFocusInitial === undefined ? null : cdkFocusInitial"
-             [tabindex]="tabindex"
-             (keydown)="onKey($event)"
-             (focus)="onFocus()"
-             (focusout)="onFocusOut()"
-             >
-      <div matSuffix
-           class="hci-combobox-arrow-wrapper"
-           (click) = "toggleOpen($event)"
-           (mousedown)="startClick()"
-           (mouseup)="endClick()"
-           >
-        <div class="hci-combobox-arrow"></div>
-      </div>
-      <mat-spinner matSuffix *ngIf="showLoader()" [diameter]="30" style="float: right; margin-left: 8px"></mat-spinner>
-      <mat-autocomplete #auto="matAutocomplete"
-                        autoActiveFirstOption
-                        (optionSelected)="this.selectOption($event.option.value)"
-                        (opened)="this.onOpened()"
-                        (closed)="this.onClosed()"
-                        [displayWith]="this.displayFn">
-        <cdk-virtual-scroll-viewport #viewport
-                                     [style.display]="isOpen ? null : 'none'"
-                                     class="hci-combobox-viewport"
-                                     [ngClass]= "customViewportClass"
-                                     [itemSize]="optionSizePx"
-                                     [style.height.px]="numOptionsToShow * optionSizePx"
-                                     [minBufferPx]="numOptionsToShow * optionSizePx * 2"
-                                     [maxBufferPx]="numOptionsToShow * optionSizePx * 3"
-                                     (mousedown)="startClick()"
-                                     (mouseup)="endClick()"
-                                     >
-          <mat-option *ngIf="allowNone && isOpen && (this.forceShowNone || !this.innerControl.value)"
-                      [ngClass]="customOptionClasses"
-                      [style.height.px]="optionSizePx"
-                      >
-            None
-          </mat-option>
-          <mat-option *cdkVirtualFor="let opt of this.loadedOptions"
-                      [value]="opt"
-                      [ngClass]="customOptionClasses"
-                      [class.hci-combobox-selected]="(valueField ? opt[valueField] : opt) === outerControl.value"
-                      [class.mat-selected]="(valueField ? opt[valueField] : opt) === outerControl.value"
-                      [style.height.px]="optionSizePx"
-                      >
-            {{ displayField ? opt[displayField] : opt }}
-          </mat-option>
-        </cdk-virtual-scroll-viewport>
-      </mat-autocomplete>
-      <mat-error>
-        {{ getError() }}
-      </mat-error>
-      <ng-content></ng-content>
-    </mat-form-field>
-  `, providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CustomComboBoxComponent),
-                            multi: true,
-                        }], host: {
-                        class: "hci-combobox-container"
-                    }, encapsulation: ViewEncapsulation.None, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.hci-combobox-arrow-wrapper{display:table-cell;vertical-align:middle}.hci-combobox-viewport mat-option{display:flex;align-items:center;padding:0 .2rem}.hci-combobox-viewport mat-option .mat-option-text{white-space:nowrap}.hci-combobox-viewport .hci-combobox-selected{background-color:#ddd}.hci-combobox-viewport .mat-active{background-color:#f3f3f3}.hci-combobox-viewport{overflow-anchor:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { maxOptionsToShow: [{
-                type: Input
-            }], customViewportClass: [{
-                type: Input
-            }], customFieldClasses: [{
-                type: Input
-            }], customOptionClasses: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], temporaryPlaceholder: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], allowNone: [{
-                type: Input
-            }], selectTextOnOpen: [{
-                type: Input
-            }], _cdkFocusInitial: [{
-                type: HostBinding,
-                args: ["attr.cdkFocusInitial"]
-            }], cdkFocusInitial: [{
-                type: Input
-            }], _tabindex: [{
-                type: HostBinding,
-                args: ["attr.tabindex"]
-            }], tabindex: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], allowLoader: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], forceEmitObject: [{
-                type: Input
-            }], displayField: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], floatLabel: [{
-                type: Input
-            }], defineErrors: [{
-                type: Input
-            }], optionSelected: [{
-                type: Output
-            }], optionChanged: [{
-                type: Output
-            }], optionsLoaded: [{
-                type: Output
-            }], viewport: [{
-                type: ViewChild,
-                args: ["viewport", { static: true }]
-            }], inputElement: [{
-                type: ViewChild,
-                args: ["input", { static: true }]
-            }], autoCompleteTrigger: [{
-                type: ViewChild,
-                args: ["input", { read: MatLegacyAutocompleteTrigger, static: false }]
-            }] } });
-
-class CustomMultiComboBoxComponent {
-    constructor(injector) {
-        this.injector = injector;
-        this.placeholder = "";
-        this.temporaryPlaceholder = false;
-        this.tooltip = "";
-        this.options = [];
-        this.includeLoadingOption = true;
-        this.loadedOptions = [];
-        this.isSelectOpen = false;
-        this.forceEmitObject = false;
-        this.appearance = "";
-        this.outerControl = new UntypedFormControl([]);
-        this.innerControl = new UntypedFormControl("");
-        this.ignoreInnerControlChanges = false;
-        this.noNgControl = false;
-        this.selectedListItems = [];
-        this.selectionChanged = new EventEmitter();
-        this.onChangeFn = () => { };
-        this.onTouchedFn = () => { };
-    }
-    ngAfterViewInit() {
-        let ngControl = this.injector.get(NgControl, null);
-        if (ngControl && ngControl.control) {
-            this.outerControl = ngControl.control;
-            setTimeout(() => {
-                this.loadOnlyCurrentValue();
-            });
-        }
-        else {
-            this.noNgControl = true;
-        }
-        this.innerControlSubscription = this.innerControl.valueChanges.pipe(debounceTime(300)).subscribe(() => {
-            if (!this.ignoreInnerControlChanges) {
-                this.filterOptions();
-            }
-            else {
-                this.ignoreInnerControlChanges = false;
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.options) {
-            let optionsChange = changes.options;
-            if (!optionsChange.currentValue) {
-                this.options = [];
-            }
-        }
-        this.loadOnlyCurrentValue();
-    }
-    writeValue(obj) {
-        this.loadOnlyCurrentValue();
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.innerControl.disable();
-            this.selectElement.disabled = true;
-        }
-        else {
-            this.innerControl.enable();
-            this.selectElement.disabled = false;
-        }
-    }
-    onInputFocus() {
-        this.selectElement.open();
-    }
-    loadOnlyCurrentValue() {
-        this.loadedOptions = [];
-        if (this.outerControl.value && this.outerControl.value.length) {
-            for (let opt of this.options) {
-                if (this.isOptInOuterValue(opt)) {
-                    this.loadedOptions.push(opt);
-                }
-            }
-        }
-        this.selectedListItems = this.loadedOptions;
-        let currentValueLabel = "";
-        for (let opt of this.loadedOptions) {
-            if (currentValueLabel) {
-                currentValueLabel += ", ";
-            }
-            currentValueLabel += this.displayField ? opt[this.displayField] : opt;
-        }
-        this.ignoreInnerControlChanges = true;
-        this.innerControl.setValue(currentValueLabel);
-    }
-    filterOptions(showAll = false) {
-        if (showAll || !this.innerControl.value) {
-            this.loadedOptions = this.options;
-        }
-        else {
-            let searchValue = this.innerControl.value.toLowerCase();
-            this.loadedOptions = this.options.filter((opt) => {
-                let optDisplay = (this.displayField ? opt[this.displayField] : opt).toLowerCase();
-                return optDisplay.includes(searchValue) || this.isOptInOuterValue(opt);
-            });
-        }
-    }
-    isOptInOuterValue(opt) {
-        let optValue = this.valueField ? opt[this.valueField] : opt;
-        if (this.forceEmitObject) {
-            for (let outerValOpt of this.outerControl.value) {
-                let outerOptValue = this.valueField ? outerValOpt[this.valueField] : outerValOpt;
-                if (optValue === outerOptValue) {
-                    return true;
-                }
-            }
-        }
-        else {
-            return this.outerControl.value.includes(optValue);
-        }
-    }
-    onOpenedChange(opened) {
-        this.isSelectOpen = opened;
-        if (opened) {
-            this.onTouchedFn();
-            this.inputElement.nativeElement.focus();
-            this.ignoreInnerControlChanges = true;
-            this.innerControl.setValue("");
-            setTimeout(() => {
-                this.filterOptions(true);
-                this.includeLoadingOption = false;
-            });
-        }
-        else {
-            setTimeout(() => {
-                this.loadOnlyCurrentValue();
-                this.includeLoadingOption = true;
-            });
-        }
-    }
-    selectOptions(options) {
-        let newVal = [];
-        for (let opt of options) {
-            if (opt) {
-                newVal.push((this.valueField && !this.forceEmitObject) ? opt[this.valueField] : opt);
-            }
-        }
-        if (this.noNgControl) {
-            this.outerControl.setValue(newVal);
-        }
-        this.onChangeFn(newVal);
-        this.selectionChanged.emit(newVal);
-        if (this.isSelectOpen) {
-            this.inputElement.nativeElement.focus();
-        }
-    }
-    compareByID(itemOne, itemTwo) {
-        if (!itemOne) {
-            return false;
-        }
-        else if (!itemTwo) {
-            return false;
-        }
-        else {
-            if (this.valueField) {
-                return itemOne[this.valueField] && itemTwo[this.valueField] && itemOne[this.valueField] === itemTwo[this.valueField];
-            }
-            else {
-                return itemOne === itemTwo;
-            }
-        }
-    }
-    ngOnDestroy() {
-        if (this.innerControlSubscription) {
-            this.innerControlSubscription.unsubscribe();
-        }
-    }
-}
-CustomMultiComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMultiComboBoxComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-CustomMultiComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMultiComboBoxComponent, selector: "hci-multi-combobox", inputs: { label: "label", placeholder: "placeholder", temporaryPlaceholder: "temporaryPlaceholder", tooltip: "tooltip", options: "options", valueField: "valueField", forceEmitObject: "forceEmitObject", displayField: "displayField", appearance: "appearance", initialFocus: "initialFocus", floatLabel: "floatLabel" }, outputs: { selectionChanged: "selectionChanged" }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: CustomMultiComboBoxComponent,
-            multi: true,
-        }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "selectElement", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="combobox-multi-container d-flex font-sm">
-      <mat-form-field [appearance]="appearance" [matTooltip]="this.tooltip" [floatLabel]="floatLabel">
-        <mat-label *ngIf="label !== undefined">{{ label }}</mat-label>
-        <mat-label *ngIf="label === undefined">
-          {{ temporaryPlaceholder ? (outerControl.value && outerControl.value.length ? '' : placeholder) : placeholder }}
-        </mat-label>
-        <input #input matInput name="customMultiComboBoxFilter" class="ellipsis"
-               (focus)="this.onInputFocus()"
-               autocomplete="off"
-               [placeholder]="temporaryPlaceholder ? (outerControl.value && outerControl.value.length ? '' : placeholder) : placeholder"
-               [formControl]="this.innerControl"
-               [attr.cdkFocusInitial]="initialFocus === undefined ? null : initialFocus">
-        <div matSuffix class="hci-combobox-arrow-wrapper">
-          <mat-select
-            #select [multiple]="true"
-            (selectionChange)="this.selectOptions($event.value)"
-            (openedChange)="this.onOpenedChange($event)"
-            [(ngModel)]="selectedListItems"
-            [compareWith]="compareByID">
-            <mat-option *ngFor="let opt of this.loadedOptions" [value]="opt">
-              {{this.displayField ? opt[this.displayField] : opt}}
-            </mat-option>
-            <mat-option *ngIf="this.includeLoadingOption">Loading...</mat-option>
-            <mat-option *ngIf="!this.includeLoadingOption && !this.options.length">None</mat-option>
-          </mat-select>
-        </div>
-      </mat-form-field>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMultiComboBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "hci-multi-combobox", template: `
-    <div class="combobox-multi-container d-flex font-sm">
-      <mat-form-field [appearance]="appearance" [matTooltip]="this.tooltip" [floatLabel]="floatLabel">
-        <mat-label *ngIf="label !== undefined">{{ label }}</mat-label>
-        <mat-label *ngIf="label === undefined">
-          {{ temporaryPlaceholder ? (outerControl.value && outerControl.value.length ? '' : placeholder) : placeholder }}
-        </mat-label>
-        <input #input matInput name="customMultiComboBoxFilter" class="ellipsis"
-               (focus)="this.onInputFocus()"
-               autocomplete="off"
-               [placeholder]="temporaryPlaceholder ? (outerControl.value && outerControl.value.length ? '' : placeholder) : placeholder"
-               [formControl]="this.innerControl"
-               [attr.cdkFocusInitial]="initialFocus === undefined ? null : initialFocus">
-        <div matSuffix class="hci-combobox-arrow-wrapper">
-          <mat-select
-            #select [multiple]="true"
-            (selectionChange)="this.selectOptions($event.value)"
-            (openedChange)="this.onOpenedChange($event)"
-            [(ngModel)]="selectedListItems"
-            [compareWith]="compareByID">
-            <mat-option *ngFor="let opt of this.loadedOptions" [value]="opt">
-              {{this.displayField ? opt[this.displayField] : opt}}
-            </mat-option>
-            <mat-option *ngIf="this.includeLoadingOption">Loading...</mat-option>
-            <mat-option *ngIf="!this.includeLoadingOption && !this.options.length">None</mat-option>
-          </mat-select>
-        </div>
-      </mat-form-field>
-    </div>
-  `, providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: CustomMultiComboBoxComponent,
-                            multi: true,
-                        }] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { inputElement: [{
-                type: ViewChild,
-                args: ["input", { static: false }]
-            }], selectElement: [{
-                type: ViewChild,
-                args: ["select", { static: false }]
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], temporaryPlaceholder: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], forceEmitObject: [{
-                type: Input
-            }], displayField: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], initialFocus: [{
-                type: Input
-            }], floatLabel: [{
-                type: Input
-            }], selectionChanged: [{
-                type: Output
-            }] } });
-
-class SelectModule {
-}
-SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SelectModule, declarations: [MdSelectComponent,
-        MdMultiSelectComponent,
-        NativeSelectComponent,
-        CustomComboBoxComponent,
-        CustomMultiComboBoxComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatLegacySelectModule,
-        ScrollingModule,
-        MatLegacyAutocompleteModule,
-        MatLegacyInputModule,
-        MatLegacyTooltipModule,
-        MatIconModule,
-        MatLegacyProgressSpinnerModule,
-        DictionaryServiceModule], exports: [MdSelectComponent,
-        MdMultiSelectComponent,
-        NativeSelectComponent,
-        CustomComboBoxComponent,
-        CustomMultiComboBoxComponent] });
-SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatLegacySelectModule,
-        ScrollingModule,
-        MatLegacyAutocompleteModule,
-        MatLegacyInputModule,
-        MatLegacyTooltipModule,
-        MatIconModule,
-        MatLegacyProgressSpinnerModule,
-        DictionaryServiceModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatLegacySelectModule,
-                        ScrollingModule,
-                        MatLegacyAutocompleteModule,
-                        MatLegacyInputModule,
-                        MatLegacyTooltipModule,
-                        MatIconModule,
-                        MatLegacyProgressSpinnerModule,
-                        DictionaryServiceModule
-                    ],
-                    declarations: [
-                        MdSelectComponent,
-                        MdMultiSelectComponent,
-                        NativeSelectComponent,
-                        CustomComboBoxComponent,
-                        CustomMultiComboBoxComponent
-                    ],
-                    exports: [
-                        MdSelectComponent,
-                        MdMultiSelectComponent,
-                        NativeSelectComponent,
-                        CustomComboBoxComponent,
-                        CustomMultiComboBoxComponent
-                    ]
-                }]
-        }] });
-
-/**
- * I'm just screwing around with some ideas here, beware of actually using any of this code.
- */
-class SearchComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.CHILD_NODE = "children";
-        this.dataFiltered = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        if (isDevMode()) {
-            console.debug("SearchComponent.ngAfterViewInit");
-        }
-        setTimeout(() => {
-            if (this.anyComponent && this.data && this.input) {
-                let changes = {};
-                changes[this.input] = new SimpleChange([], this.data, false);
-                this.anyComponent.ngOnChanges(changes);
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (isDevMode()) {
-            console.debug("SearchComponent.ngOnChanges");
-        }
-        if (changes.data && this.isArray === undefined) {
-            for (let item of this.data) {
-                if (item[this.CHILD_NODE]) {
-                    this.isArray = false;
-                    return;
-                }
-            }
-        }
-    }
-    /**
-     * A tree or a grid?  Who knows.
-     *
-     * @param {KeyboardEvent} event
-     */
-    doSearch(searchBox) {
-        if (isDevMode()) {
-            console.debug("doSearch");
-        }
-        this.search = searchBox;
-        let filteredData = null;
-        if (this.isArray) {
-            console.debug("array option");
-            filteredData = this.filterArray(this.data);
-        }
-        else if (this.isIncludeChildren) {
-            console.debug("child option");
-            filteredData = this.filterTreeIncludeChildren(JSON.parse(JSON.stringify(this.data)));
-        }
-        else {
-            console.debug("not child option");
-            filteredData = this.filterTree(JSON.parse(JSON.stringify(this.data)));
-        }
-        // This is what triggers the @Output
-        this.dataFiltered.emit(filteredData);
-        if (this.anyComponent) {
-            let changes = {};
-            changes[this.input] = new SimpleChange(this.anyComponent[this.input], filteredData, false);
-            this.anyComponent.ngOnChanges(changes);
-        }
-        this.changeDetectorRef.detectChanges();
-    }
-    filterArray(data) {
-        if (isDevMode()) {
-            console.debug("filterArray");
-        }
-        return data.filter((o) => {
-            return (o["name"].indexOf(this.search) >= 0);
-        });
-    }
-    /**
-     * Recursive tree search.  It will include parent nodes if a leaf node matches the search string.
-     *
-     * @param {any[]} data
-     * @returns {any[]}
-     */
-    filterTree(data) {
-        if (isDevMode()) {
-            console.debug("filterTreeOrigional");
-        }
-        let filteredData = [];
-        for (let child of data) {
-            let pushed = false;
-            if (child["children"]) {
-                child["children"] = this.filterTree(child["children"]);
-                if (child["children"].length > 0) {
-                    pushed = true;
-                    filteredData.push(child);
-                }
-            }
-            if (!pushed && child["name"].indexOf(this.search) >= 0) {
-                filteredData.push(child);
-            }
-        }
-        return filteredData;
-    }
-    /**
-     * Recursive tree search.  It will include children nodes if a parent node matches the search string.
-     *
-     * @param {any[]} data
-     * @returns {any[]}
-     */
-    filterTreeIncludeChildren(data) {
-        if (isDevMode()) {
-            console.debug("filterTreeIncludeChildren");
-        }
-        let filteredData = [];
-        for (let child of data) {
-            if (child["name"].indexOf(this.search) >= 0) {
-                filteredData.push(child);
-            }
-            else {
-                let pushed = false;
-                if (child["children"]) {
-                    child["children"] = this.filterTreeIncludeChildren(child["children"]);
-                    if (child["children"].length > 0) {
-                        pushed = true;
-                        filteredData.push(child);
-                    }
-                }
-                if (!pushed && child["name"].indexOf(this.search) >= 0) {
-                    filteredData.push(child);
-                }
-            }
-        }
-        return filteredData;
-    }
-}
-SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchComponent, selector: "hci-search", inputs: { isArray: "isArray", isIncludeChildren: "isIncludeChildren", anyComponent: "anyComponent", input: "input", data: "data" }, outputs: { dataFiltered: "dataFiltered" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="input-group ">
-      <input #searchBox type="text"
-             (keyup.enter)="doSearch(searchBox.value)"
-             class="form-control"
-             placeholder="Search for..."
-             aria-label="Search for text">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" (click)="doSearch(searchBox.value)">
-          <i class="fas fa-search"></i>
-        </button>
-      </div>
-    </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "hci-search",
-                    template: `
-    <div class="input-group ">
-      <input #searchBox type="text"
-             (keyup.enter)="doSearch(searchBox.value)"
-             class="form-control"
-             placeholder="Search for..."
-             aria-label="Search for text">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" (click)="doSearch(searchBox.value)">
-          <i class="fas fa-search"></i>
-        </button>
-      </div>
-    </div>
-  `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isArray: [{
-                type: Input
-            }], isIncludeChildren: [{
-                type: Input
-            }], anyComponent: [{
-                type: Input
-            }], input: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], dataFiltered: [{
-                type: Output
-            }] } });
-
-class SearchModule {
-}
-SearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SearchModule, declarations: [SearchComponent], imports: [CommonModule,
-        FormsModule,
-        NgbModule], exports: [SearchComponent] });
-SearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchModule, imports: [CommonModule,
-        FormsModule,
-        NgbModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        NgbModule
-                    ],
-                    declarations: [
-                        SearchComponent
-                    ],
-                    exports: [
-                        SearchComponent
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CustomComboBoxComponent, CustomMultiComboBoxComponent, DROPDOWN_TYPE, DateComponent, DateModule, DateRangeComponent, DropdownComponent, DropdownModule, DropdownSelectComponent, DropdownSelectResultComponent, InlineComponent, InlineModule, MdMultiSelectComponent, MdSelectComponent, NativeSelectComponent, SearchComponent, SearchModule, SelectModule, TemplateDropdownDirective };
-//# sourceMappingURL=huntsman-cancer-institute-input.mjs.map