novo-elements 7.8.0 → 7.9.0-next.1

package/fesm2020/novo-elements.mjs

@@ -37749,6 +37749,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: DataTableState }]; } });
 
+class NovoDataTableCellFilterHeader {
+    constructor(changeDetectorRef, labels) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.labels = labels;
+        this.hasFilter = false;
+        this.clearFilter = new EventEmitter();
+    }
+    set filter(filter) {
+        this._filter = filter;
+        this.hasFilter = !Helpers.isEmpty(filter);
+    }
+    get filter() {
+        return this._filter;
+    }
+}
+NovoDataTableCellFilterHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDataTableCellFilterHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: NovoLabelService }], target: i0.ɵɵFactoryTarget.Component });
+NovoDataTableCellFilterHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NovoDataTableCellFilterHeader, selector: "novo-data-table-cell-filter-header", inputs: { label: "label", filter: "filter" }, outputs: { clearFilter: "clearFilter" }, ngImport: i0, template: `
+    <div class="header">
+      <novo-label>{{ label || labels.filters }}</novo-label>
+      <novo-button
+        theme="dialogue"
+        color="negative"
+        size="small"
+        icon="times"
+        (click)="clearFilter.emit()"
+        *ngIf="hasFilter"
+        data-automation-id="novo-data-table-filter-clear">
+        {{ labels.clear }}
+      </novo-button>
+    </div>
+  `, isInline: true, components: [{ type: NovoLabel, selector: "novo-label,[novo-label]" }, { type: NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDataTableCellFilterHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'novo-data-table-cell-filter-header',
+                    template: `
+    <div class="header">
+      <novo-label>{{ label || labels.filters }}</novo-label>
+      <novo-button
+        theme="dialogue"
+        color="negative"
+        size="small"
+        icon="times"
+        (click)="clearFilter.emit()"
+        *ngIf="hasFilter"
+        data-automation-id="novo-data-table-filter-clear">
+        {{ labels.clear }}
+      </novo-button>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NovoLabelService }]; }, propDecorators: { label: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], clearFilter: [{
+                type: Output
+            }] } });
+
 // NG2
 class NovoFlexElement {
     constructor() {
@@ -38312,6 +38372,9 @@ class NovoDataTableCellHeader {
         }
         this.config.transforms = transforms;
     }
+    get column() {
+        return this._column;
+    }
     ngOnInit() {
         if (this._cdkColumnDef) {
             this.id = this._cdkColumnDef.name;
@@ -38596,16 +38659,14 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         [tooltip]="labels.sort"
         [attr.data-feature-id]="'novo-data-table-sort-' + this.id"
         (sortChange)="sort()"
-        [value]="sortValue"
-      ></novo-sort-button>
+        [value]="sortValue"></novo-sort-button>
       <novo-dropdown
         *ngIf="config.filterable"
         side="right"
         parentScrollSelector=".novo-data-table-container"
         containerClass="data-table-dropdown"
         data-automation-id="novo-data-table-filter"
-        [multiple]="multiSelect"
-      >
+        [multiple]="multiSelect">
         <novo-icon
           dropdownTrigger
           class="filter-button"
@@ -38613,73 +38674,64 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
           [tooltip]="labels.filters"
           tooltipPosition="right"
           [attr.data-feature-id]="'novo-data-table-filter-' + this.id"
-          (click)="focusInput()"
-          >filter</novo-icon
-        >
-        <div class="header">
-          <novo-label>{{ labels.filters }}</novo-label>
-          <novo-button
-            theme="dialogue"
-            color="negative"
-            size="small"
-            icon="times"
-            (click)="clearFilter()"
-            *ngIf="filter !== null && filter !== undefined && filter !== ''"
-            data-automation-id="novo-data-table-filter-clear"
-          >
-            {{ labels.clear }}
-          </novo-button>
-        </div>
-        <div class="optgroup-container">
-          <ng-container [ngSwitch]="config.filterConfig.type">
-            <novo-optgroup *ngSwitchCase="'date'" (keydown.escape)="handleEscapeKeydown($event)">
-              <ng-container *ngIf="!showCustomRange">
+          (click)="focusInput()">filter</novo-icon>
+        <ng-container [ngSwitch]="config.filterConfig.type">
+          <ng-container *ngSwitchCase="'date'" (keydown.escape)="handleEscapeKeydown($event)">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
+                <ng-container *ngIf="!showCustomRange">
+                  <novo-option
+                    [class.active]="activeDateFilter === option.label"
+                    *ngFor="let option of config.filterConfig.options"
+                    (click)="filterData(option)"
+                    [attr.data-automation-id]="'novo-data-table-filter-' + option.label">
+                    <span>{{ option.label }}</span>
+                    <novo-icon novoSuffix color="positive" *ngIf="activeDateFilter === option.label">check</novo-icon>
+                  </novo-option>
+                </ng-container>
                 <novo-option
-                  [class.active]="activeDateFilter === option.label"
+                  [class.active]="labels.customDateRange === activeDateFilter"
+                  (click)="toggleCustomRange($event, true)"
+                  *ngIf="config.filterConfig.allowCustomRange && !showCustomRange">
+                  <span>{{ labels.customDateRange }}</span>
+                  <novo-icon novoSuffix color="positive" *ngIf="labels.customDateRange === activeDateFilter">check</novo-icon>
+                </novo-option>
+                <novo-option class="calendar-container" *ngIf="showCustomRange" keepOpen>
+                  <novo-stack>
+                    <div class="back-link" (click)="toggleCustomRange($event, false)">
+                      <i class="bhi-previous"></i>
+                      {{ labels.backToPresetFilters }}
+                    </div>
+                    <novo-date-picker
+                      (onSelect)="filterData($event)"
+                      [(ngModel)]="filter"
+                      range="true"
+                      (keydown.escape)="handleEscapeKeydown($event)"></novo-date-picker>
+                  </novo-stack>
+                </novo-option>
+              </novo-optgroup>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'select'">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
+                <novo-option
+                  [class.active]="filter === option"
                   *ngFor="let option of config.filterConfig.options"
                   (click)="filterData(option)"
-                  [attr.data-automation-id]="'novo-data-table-filter-' + option.label"
-                >
-                  <span>{{ option.label }}</span>
-                  <novo-icon novoSuffix color="positive" *ngIf="activeDateFilter === option.label">check</novo-icon>
+                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)">
+                  <span>{{ option?.label || option }}</span>
+                  <novo-icon novoSuffix color="positive" *ngIf="option.hasOwnProperty('value') ? filter === option.value : filter === option">
+                    check</novo-icon>
                 </novo-option>
-              </ng-container>
-              <novo-option
-                [class.active]="labels.customDateRange === activeDateFilter"
-                (click)="toggleCustomRange($event, true)"
-                *ngIf="config.filterConfig.allowCustomRange && !showCustomRange"
-              >
-                <span>{{ labels.customDateRange }}</span>
-                <novo-icon novoSuffix color="positive" *ngIf="labels.customDateRange === activeDateFilter">check</novo-icon>
-              </novo-option>
-              <novo-option class="calendar-container" *ngIf="showCustomRange" keepOpen>
-                <novo-stack>
-                  <div class="back-link" (click)="toggleCustomRange($event, false)">
-                    <i class="bhi-previous"></i>{{ labels.backToPresetFilters }}
-                  </div>
-                  <novo-date-picker
-                    (onSelect)="filterData($event)"
-                    [(ngModel)]="filter"
-                    range="true"
-                    (keydown.escape)="handleEscapeKeydown($event)"
-                  ></novo-date-picker>
-                </novo-stack>
-              </novo-option>
-            </novo-optgroup>
-            <novo-optgroup *ngSwitchCase="'select'">
-              <novo-option
-                [class.active]="filter === option"
-                *ngFor="let option of config.filterConfig.options"
-                (click)="filterData(option)"
-                [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)"
-              >
-                <span>{{ option?.label || option }}</span>
-                <novo-icon novoSuffix color="positive" *ngIf="option.hasOwnProperty('value') ? filter === option.value : filter === option"
-                  >check</novo-icon
-                >
-              </novo-option>
-            </novo-optgroup>
-            <ng-container *ngSwitchCase="'multi-select'">
+              </novo-optgroup>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'multi-select'">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
               <novo-optgroup class="dropdown-list-filter" (keydown)="multiSelectOptionFilterHandleKeydown($event)">
                 <novo-option class="filter-search" novoInert>
                   <novo-field flex>
@@ -38689,12 +38741,11 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                       (ngModelChange)="multiSelectOptionFilter($event)"
                       #optionFilterInput
                       data-automation-id="novo-data-table-multi-select-option-filter-input"
-                      (keydown.enter)="multiSelectOptionFilterHandleKeydown($event)"
-                    />
+                      (keydown.enter)="multiSelectOptionFilterHandleKeydown($event)" />
                     <novo-icon novoSuffix>search</novo-icon>
-                    <novo-error class="error-text" [hidden]="!error || !multiSelectHasVisibleOptions()">{{
-                      labels.selectFilterOptions
-                    }}</novo-error>
+                    <novo-error class="error-text" [hidden]="!error || !multiSelectHasVisibleOptions()">
+                      {{ labels.selectFilterOptions }}
+                    </novo-error>
                   </novo-field>
                 </novo-option>
               </novo-optgroup>
@@ -38703,39 +38754,45 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                   *ngFor="let option of config.filterConfig.options"
                   [hidden]="multiSelectOptionIsHidden(option)"
                   (click)="toggleSelection(option)"
-                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)"
-                >
+                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)">
                   <span>{{ option?.label || option }}</span>
-                  <novo-icon novoSuffix color="positive">{{
-                    isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'
-                  }}</novo-icon>
+                  <novo-icon novoSuffix color="positive">
+                    {{ isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty' }}
+                  </novo-icon>
                 </novo-option>
               </novo-optgroup>
               <novo-option class="filter-null-results" [hidden]="multiSelectHasVisibleOptions()">{{ labels.pickerEmpty }}</novo-option>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'custom'">
+            <ng-container *ngIf="dropdown">
+              <novo-data-table-cell-filter-header *ngIf="!config.filterConfig?.useCustomHeader" [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+              <div class="optgroup-container">
+                <ng-container *ngTemplateOutlet="filterTemplate; context: { $implicit: config, column, dropdown, filter }"></ng-container>
+              </div>
             </ng-container>
-            <novo-optgroup *ngSwitchCase="'custom'">
-              <novo-option class="filter-search" novoInert>
-                <ng-container *ngTemplateOutlet="filterTemplate; context: { $implicit: config }"></ng-container>
-              </novo-option>
-            </novo-optgroup>
-            <novo-optgroup *ngSwitchDefault (keydown.escape)="handleEscapeKeydown($event)">
-              <novo-option class="filter-search" novoInert>
-                <novo-field flex fullWidth>
-                  <input
-                    novoInput
-                    [type]="config.filterConfig.type"
-                    [(ngModel)]="filter"
-                    (ngModelChange)="filterData($event)"
-                    #filterInput
-                    data-automation-id="novo-data-table-filter-input"
-                    (keydown.escape)="handleEscapeKeydown($event)"
-                  />
-                  <novo-icon novoSuffix>search</novo-icon>
-                </novo-field>
-              </novo-option>
-            </novo-optgroup>
           </ng-container>
-        </div>
+          <ng-container *ngSwitchDefault (keydown.escape)="handleEscapeKeydown($event)">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
+                <novo-option class="filter-search" novoInert>
+                  <novo-field flex fullWidth>
+                    <input
+                      novoInput
+                      [type]="config.filterConfig.type"
+                      [(ngModel)]="filter"
+                      (ngModelChange)="filterData($event)"
+                      #filterInput
+                      data-automation-id="novo-data-table-filter-input"
+                      (keydown.escape)="handleEscapeKeydown($event)" />
+                    <novo-icon novoSuffix>search</novo-icon>
+                  </novo-field>
+                </novo-option>
+              </novo-optgroup>
+            </div>
+          </ng-container>
+        </ng-container>
         <div class="footer" *ngIf="multiSelect">
           <novo-button theme="dialogue" color="dark" (click)="cancel()" data-automation-id="novo-data-table-multi-select-cancel">
             {{ labels.cancel }}
@@ -38744,8 +38801,7 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             theme="dialogue"
             color="positive"
             (click)="filterMultiSelect()"
-            data-automation-id="novo-data-table-multi-select-filter"
-          >
+            data-automation-id="novo-data-table-multi-select-filter">
             {{ labels.filters }}
           </novo-button>
         </div>
@@ -38753,7 +38809,7 @@ NovoDataTableCellHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
     </div>
     <div class="spacer"></div>
     <div class="data-table-header-resizable" *ngIf="config.resizable"><span (mousedown)="startResize($event)">&nbsp;</span></div>
-  `, isInline: true, components: [{ type: NovoDataTableSortButton, selector: "novo-sort-button", inputs: ["value"], outputs: ["sortChange"] }, { type: NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple"], outputs: ["toggled"] }, { type: NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { type: NovoLabel, selector: "novo-label,[novo-label]" }, { type: NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { type: NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoStackElement, selector: "novo-stack,novo-column", inputs: ["direction", "align"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }, { type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoErrorElement, selector: "novo-error" }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipActive", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML"] }, { type: NovoDropDownTrigger, selector: "[dropdownTrigger]" }, { type: ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: NovoFieldSuffixDirective, selector: "[novoSuffix]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FlexDirective, selector: "[flex]", inputs: ["flex"] }, { type: NovoInput, selector: "input[novoInput], textarea[novoInput], select[novoInput]", inputs: ["disabled", "id", "placeholder", "required", "type", "value", "readonly"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NovoDataTableSortButton, selector: "novo-sort-button", inputs: ["value"], outputs: ["sortChange"] }, { type: NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple"], outputs: ["toggled"] }, { type: NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { type: NovoDataTableCellFilterHeader, selector: "novo-data-table-cell-filter-header", inputs: ["label", "filter"], outputs: ["clearFilter"] }, { type: NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoStackElement, selector: "novo-stack,novo-column", inputs: ["direction", "align"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }, { type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoErrorElement, selector: "novo-error" }, { type: NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipActive", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML"] }, { type: NovoDropDownTrigger, selector: "[dropdownTrigger]" }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: NovoFieldSuffixDirective, selector: "[novoSuffix]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FlexDirective, selector: "[flex]", inputs: ["flex"] }, { type: NovoInput, selector: "input[novoInput], textarea[novoInput], select[novoInput]", inputs: ["disabled", "id", "placeholder", "required", "type", "value", "readonly"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDataTableCellHeader, decorators: [{
             type: Component,
             args: [{
@@ -38769,16 +38825,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltip]="labels.sort"
         [attr.data-feature-id]="'novo-data-table-sort-' + this.id"
         (sortChange)="sort()"
-        [value]="sortValue"
-      ></novo-sort-button>
+        [value]="sortValue"></novo-sort-button>
       <novo-dropdown
         *ngIf="config.filterable"
         side="right"
         parentScrollSelector=".novo-data-table-container"
         containerClass="data-table-dropdown"
         data-automation-id="novo-data-table-filter"
-        [multiple]="multiSelect"
-      >
+        [multiple]="multiSelect">
         <novo-icon
           dropdownTrigger
           class="filter-button"
@@ -38786,73 +38840,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltip]="labels.filters"
           tooltipPosition="right"
           [attr.data-feature-id]="'novo-data-table-filter-' + this.id"
-          (click)="focusInput()"
-          >filter</novo-icon
-        >
-        <div class="header">
-          <novo-label>{{ labels.filters }}</novo-label>
-          <novo-button
-            theme="dialogue"
-            color="negative"
-            size="small"
-            icon="times"
-            (click)="clearFilter()"
-            *ngIf="filter !== null && filter !== undefined && filter !== ''"
-            data-automation-id="novo-data-table-filter-clear"
-          >
-            {{ labels.clear }}
-          </novo-button>
-        </div>
-        <div class="optgroup-container">
-          <ng-container [ngSwitch]="config.filterConfig.type">
-            <novo-optgroup *ngSwitchCase="'date'" (keydown.escape)="handleEscapeKeydown($event)">
-              <ng-container *ngIf="!showCustomRange">
+          (click)="focusInput()">filter</novo-icon>
+        <ng-container [ngSwitch]="config.filterConfig.type">
+          <ng-container *ngSwitchCase="'date'" (keydown.escape)="handleEscapeKeydown($event)">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
+                <ng-container *ngIf="!showCustomRange">
+                  <novo-option
+                    [class.active]="activeDateFilter === option.label"
+                    *ngFor="let option of config.filterConfig.options"
+                    (click)="filterData(option)"
+                    [attr.data-automation-id]="'novo-data-table-filter-' + option.label">
+                    <span>{{ option.label }}</span>
+                    <novo-icon novoSuffix color="positive" *ngIf="activeDateFilter === option.label">check</novo-icon>
+                  </novo-option>
+                </ng-container>
+                <novo-option
+                  [class.active]="labels.customDateRange === activeDateFilter"
+                  (click)="toggleCustomRange($event, true)"
+                  *ngIf="config.filterConfig.allowCustomRange && !showCustomRange">
+                  <span>{{ labels.customDateRange }}</span>
+                  <novo-icon novoSuffix color="positive" *ngIf="labels.customDateRange === activeDateFilter">check</novo-icon>
+                </novo-option>
+                <novo-option class="calendar-container" *ngIf="showCustomRange" keepOpen>
+                  <novo-stack>
+                    <div class="back-link" (click)="toggleCustomRange($event, false)">
+                      <i class="bhi-previous"></i>
+                      {{ labels.backToPresetFilters }}
+                    </div>
+                    <novo-date-picker
+                      (onSelect)="filterData($event)"
+                      [(ngModel)]="filter"
+                      range="true"
+                      (keydown.escape)="handleEscapeKeydown($event)"></novo-date-picker>
+                  </novo-stack>
+                </novo-option>
+              </novo-optgroup>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'select'">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
                 <novo-option
-                  [class.active]="activeDateFilter === option.label"
+                  [class.active]="filter === option"
                   *ngFor="let option of config.filterConfig.options"
                   (click)="filterData(option)"
-                  [attr.data-automation-id]="'novo-data-table-filter-' + option.label"
-                >
-                  <span>{{ option.label }}</span>
-                  <novo-icon novoSuffix color="positive" *ngIf="activeDateFilter === option.label">check</novo-icon>
+                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)">
+                  <span>{{ option?.label || option }}</span>
+                  <novo-icon novoSuffix color="positive" *ngIf="option.hasOwnProperty('value') ? filter === option.value : filter === option">
+                    check</novo-icon>
                 </novo-option>
-              </ng-container>
-              <novo-option
-                [class.active]="labels.customDateRange === activeDateFilter"
-                (click)="toggleCustomRange($event, true)"
-                *ngIf="config.filterConfig.allowCustomRange && !showCustomRange"
-              >
-                <span>{{ labels.customDateRange }}</span>
-                <novo-icon novoSuffix color="positive" *ngIf="labels.customDateRange === activeDateFilter">check</novo-icon>
-              </novo-option>
-              <novo-option class="calendar-container" *ngIf="showCustomRange" keepOpen>
-                <novo-stack>
-                  <div class="back-link" (click)="toggleCustomRange($event, false)">
-                    <i class="bhi-previous"></i>{{ labels.backToPresetFilters }}
-                  </div>
-                  <novo-date-picker
-                    (onSelect)="filterData($event)"
-                    [(ngModel)]="filter"
-                    range="true"
-                    (keydown.escape)="handleEscapeKeydown($event)"
-                  ></novo-date-picker>
-                </novo-stack>
-              </novo-option>
-            </novo-optgroup>
-            <novo-optgroup *ngSwitchCase="'select'">
-              <novo-option
-                [class.active]="filter === option"
-                *ngFor="let option of config.filterConfig.options"
-                (click)="filterData(option)"
-                [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)"
-              >
-                <span>{{ option?.label || option }}</span>
-                <novo-icon novoSuffix color="positive" *ngIf="option.hasOwnProperty('value') ? filter === option.value : filter === option"
-                  >check</novo-icon
-                >
-              </novo-option>
-            </novo-optgroup>
-            <ng-container *ngSwitchCase="'multi-select'">
+              </novo-optgroup>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'multi-select'">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
               <novo-optgroup class="dropdown-list-filter" (keydown)="multiSelectOptionFilterHandleKeydown($event)">
                 <novo-option class="filter-search" novoInert>
                   <novo-field flex>
@@ -38862,12 +38907,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                       (ngModelChange)="multiSelectOptionFilter($event)"
                       #optionFilterInput
                       data-automation-id="novo-data-table-multi-select-option-filter-input"
-                      (keydown.enter)="multiSelectOptionFilterHandleKeydown($event)"
-                    />
+                      (keydown.enter)="multiSelectOptionFilterHandleKeydown($event)" />
                     <novo-icon novoSuffix>search</novo-icon>
-                    <novo-error class="error-text" [hidden]="!error || !multiSelectHasVisibleOptions()">{{
-                      labels.selectFilterOptions
-                    }}</novo-error>
+                    <novo-error class="error-text" [hidden]="!error || !multiSelectHasVisibleOptions()">
+                      {{ labels.selectFilterOptions }}
+                    </novo-error>
                   </novo-field>
                 </novo-option>
               </novo-optgroup>
@@ -38876,39 +38920,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                   *ngFor="let option of config.filterConfig.options"
                   [hidden]="multiSelectOptionIsHidden(option)"
                   (click)="toggleSelection(option)"
-                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)"
-                >
+                  [attr.data-automation-id]="'novo-data-table-filter-' + (option?.label || option)">
                   <span>{{ option?.label || option }}</span>
-                  <novo-icon novoSuffix color="positive">{{
-                    isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'
-                  }}</novo-icon>
+                  <novo-icon novoSuffix color="positive">
+                    {{ isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty' }}
+                  </novo-icon>
                 </novo-option>
               </novo-optgroup>
               <novo-option class="filter-null-results" [hidden]="multiSelectHasVisibleOptions()">{{ labels.pickerEmpty }}</novo-option>
+            </div>
+          </ng-container>
+          <ng-container *ngSwitchCase="'custom'">
+            <ng-container *ngIf="dropdown">
+              <novo-data-table-cell-filter-header *ngIf="!config.filterConfig?.useCustomHeader" [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+              <div class="optgroup-container">
+                <ng-container *ngTemplateOutlet="filterTemplate; context: { $implicit: config, column, dropdown, filter }"></ng-container>
+              </div>
             </ng-container>
-            <novo-optgroup *ngSwitchCase="'custom'">
-              <novo-option class="filter-search" novoInert>
-                <ng-container *ngTemplateOutlet="filterTemplate; context: { $implicit: config }"></ng-container>
-              </novo-option>
-            </novo-optgroup>
-            <novo-optgroup *ngSwitchDefault (keydown.escape)="handleEscapeKeydown($event)">
-              <novo-option class="filter-search" novoInert>
-                <novo-field flex fullWidth>
-                  <input
-                    novoInput
-                    [type]="config.filterConfig.type"
-                    [(ngModel)]="filter"
-                    (ngModelChange)="filterData($event)"
-                    #filterInput
-                    data-automation-id="novo-data-table-filter-input"
-                    (keydown.escape)="handleEscapeKeydown($event)"
-                  />
-                  <novo-icon novoSuffix>search</novo-icon>
-                </novo-field>
-              </novo-option>
-            </novo-optgroup>
           </ng-container>
-        </div>
+          <ng-container *ngSwitchDefault (keydown.escape)="handleEscapeKeydown($event)">
+            <novo-data-table-cell-filter-header [filter]="filter" (clearFilter)="clearFilter()"></novo-data-table-cell-filter-header>
+            <div class="optgroup-container">
+              <novo-optgroup>
+                <novo-option class="filter-search" novoInert>
+                  <novo-field flex fullWidth>
+                    <input
+                      novoInput
+                      [type]="config.filterConfig.type"
+                      [(ngModel)]="filter"
+                      (ngModelChange)="filterData($event)"
+                      #filterInput
+                      data-automation-id="novo-data-table-filter-input"
+                      (keydown.escape)="handleEscapeKeydown($event)" />
+                    <novo-icon novoSuffix>search</novo-icon>
+                  </novo-field>
+                </novo-option>
+              </novo-optgroup>
+            </div>
+          </ng-container>
+        </ng-container>
         <div class="footer" *ngIf="multiSelect">
           <novo-button theme="dialogue" color="dark" (click)="cancel()" data-automation-id="novo-data-table-multi-select-cancel">
             {{ labels.cancel }}
@@ -38917,8 +38967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             theme="dialogue"
             color="positive"
             (click)="filterMultiSelect()"
-            data-automation-id="novo-data-table-multi-select-filter"
-          >
+            data-automation-id="novo-data-table-multi-select-filter">
             {{ labels.filters }}
           </novo-button>
         </div>
@@ -41564,7 +41613,7 @@ NovoDataTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <novo-data-table-header-cell
               *cdkHeaderCellDef
               [column]="column"
-              [filterTemplate]="templates['column-filter-' + column.id]"
+              [filterTemplate]="templates['column-filter-' + (column.filterable?.customTemplate || column.id)]"
               [novo-data-table-cell-config]="column"
               [resized]="resized"
               [defaultSort]="defaultSort"
@@ -41812,7 +41861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <novo-data-table-header-cell
               *cdkHeaderCellDef
               [column]="column"
-              [filterTemplate]="templates['column-filter-' + column.id]"
+              [filterTemplate]="templates['column-filter-' + (column.filterable?.customTemplate || column.id)]"
               [novo-data-table-cell-config]="column"
               [resized]="resized"
               [defaultSort]="defaultSort"
@@ -44920,6 +44969,7 @@ NovoDataTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         NovoDataTableCellHeader,
         NovoDataTableSortFilter,
         NovoDataTableHeaderCell,
+        NovoDataTableCellFilterHeader,
         NovoDataTableCell,
         NovoDataTableHeaderRow,
         NovoDataTableRow,
@@ -44956,6 +45006,7 @@ NovoDataTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         DateTableNumberRendererPipe,
         DateTableTimeRendererPipe,
         DataTableBigDecimalRendererPipe,
+        NovoDataTableCellFilterHeader,
         NovoDataTableClearButton,
         NovoDataTableSortButton] });
 NovoDataTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDataTableModule, providers: [DataTableState], imports: [[
@@ -45012,6 +45063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NovoDataTableCellHeader,
                         NovoDataTableSortFilter,
                         NovoDataTableHeaderCell,
+                        NovoDataTableCellFilterHeader,
                         NovoDataTableCell,
                         NovoDataTableHeaderRow,
                         NovoDataTableRow,
@@ -45035,6 +45087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DateTableNumberRendererPipe,
                         DateTableTimeRendererPipe,
                         DataTableBigDecimalRendererPipe,
+                        NovoDataTableCellFilterHeader,
                         NovoDataTableClearButton,
                         NovoDataTableSortButton,
                     ],
@@ -64048,5 +64101,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractConditionFieldDef, AccentColorDirective, AceEditorControl, ActivityTableDataSource, ActivityTableRenderers, AddressControl, AppBridge, AppBridgeHandler, AppBridgeService, ArrayCollection, AsideComponent, BackgroundColorDirective, BaseConditionFieldDef, BaseControl, BasePickerResults, BaseRenderer, BooleanInput, BorderDirective, BreadcrumbElement, BreadcrumbItemElement, BreadcrumbService, BrowserGlobalRef, COUNTRIES, CalendarEventResponse, Can, CardActionsElement, CardContentElement, CardElement, CardFooterElement, CardHeaderElement, CheckListControl, CheckboxControl, ChecklistPickerResults, CollectionEvent, ComponentUtils, ConditionBuilderComponent, ConditionInputOutlet, ConditionOperatorOutlet, Conjunction, ControlConfirmModal, ControlFactory, ControlPromptModal, CriteriaBuilderComponent, CustomControl, DATEFORMAT_VALUE_ACCESSOR, DATERANGEFORMAT_VALUE_ACCESSOR, DATETIMEFORMAT_VALUE_ACCESSOR, DATE_FORMATS, DataTableBigDecimalRendererPipe, DataTableInterpolatePipe, DataTableSource, DataTableState, DateCell, DateControl, DateFormatService, DateTableCurrencyRendererPipe, DateTableDateRendererPipe, DateTableDateTimeRendererPipe, DateTableNumberRendererPipe, DateTableTimeRendererPipe, DateTimeControl, DayOfMonthPipe, DecodeURIPipe, DefaultDateSelectionStrategy, DefaultPipe, Deferred, DevAppBridge, DevAppBridgeService, DistributionListPickerResults, EXPANSION_PANEL_ANIMATION_TIMING, EditState, EditorControl, EndOfWeekDisplayPipe, EntityList, EntityPickerResult, EntityPickerResults, ErrorStateMatcher, FieldInteractionApi, FileControl, FillColorDirective, FlexDirective, FormUtils, FormValidators, GapDirective, GlobalRef, GooglePlacesModule, GooglePlacesService, GroupByPipe, GroupedControl, GroupedMultiPickerResults, Helpers, HighlightPipe, HoursPipe, IsoDatePipe, IsoDateRangePipe, IsoTimePipe, IsoTimeRangePipe, KeyCodes, LocalStorageService, MarginDirective, MenuComponent, MenuContentComponent, MenuDirective, MenuItemDirective, MixedMultiPickerResults, MonthDayPipe, MonthPipe, MultiDateSelectionStrategy, NOVO_BREADCRUMB_REF, NOVO_CHIPS_DEFAULT_OPTIONS, NOVO_CONDITION_BUILDER, NOVO_CRITERIA_BUILDER, NOVO_DATA_TABLE_REF, NOVO_DATE_SELECTION_STRATEGY, NOVO_DATE_SELECTION_STRATEGY_PROVIDER, NOVO_DATE_SELECTION_STRATEGY_PROVIDER_FACTORY, NOVO_ELEMENTS_LABELS_PROVIDERS, NOVO_FORM_FIELD, NOVO_INPUT_FORMAT, NOVO_INPUT_VALUE_ACCESSOR, NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_PROGRESS_CONTAINER, NOVO_QUERY_BUILDER, NOVO_RADIO_GROUP, NOVO_VALUE_THEME, NOVO_VALUE_TYPE, NativeSelectControl, NodeGlobalRef, NonIdealStateElement, NovoAccordion, NovoAceEditor, NovoAceEditorModule, NovoActivityTable, NovoActivityTableActions, NovoActivityTableCustomFilter, NovoActivityTableCustomHeader, NovoActivityTableEmptyMessage, NovoActivityTableNoResultsMessage, NovoActivityTableState, NovoAddressElement, NovoAgendaAllDayEventElement, NovoAgendaDateChangeElement, NovoAgendaDayEventElement, NovoAgendaDayViewElement, NovoAgendaHourSegmentElement, NovoAgendaModule, NovoAgendaMonthDayElement, NovoAgendaMonthHeaderElement, NovoAgendaMonthViewElement, NovoAgendaWeekEventElement, NovoAgendaWeekHeaderElement, NovoAgendaWeekViewElement, NovoAsideModule, NovoAsideRef, NovoAsideService, NovoAutoSize, NovoAutocompleteElement, NovoAvatarElement, NovoAvatarModule, NovoAvatarStackElement, NovoBaseTextElement, NovoBoxElement, NovoBreadcrumbModule, NovoButtonElement, NovoButtonModule, NovoCKEditorElement, NovoCalendarElement, NovoCalendarModule, NovoCaption, NovoCardModule, NovoCategoryDropdownElement, NovoCategoryDropdownModule, NovoCheckListElement, NovoCheckboxChange, NovoCheckboxElement, NovoCheckboxModule, NovoChipAvatar, NovoChipElement, NovoChipInput, NovoChipList, NovoChipListChange, NovoChipRemove, NovoChipSelectionChange, NovoChipsElement, NovoChipsModule, NovoColorInputElement, NovoColorPickerComponent, NovoColorPickerModule, NovoColorSwatchComponent, NovoCommonModule, NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef, NovoControlElement, NovoControlGroup, NovoControlTemplates, NovoDataTable, NovoDataTableCell, NovoDataTableCellHeader, NovoDataTableCheckboxCell, NovoDataTableCheckboxHeaderCell, NovoDataTableClearButton, NovoDataTableExpandCell, NovoDataTableExpandDirective, NovoDataTableExpandHeaderCell, NovoDataTableFilterUtils, NovoDataTableHeaderCell, NovoDataTableHeaderRow, NovoDataTableModule, NovoDataTablePagination, NovoDataTableRow, NovoDataTableSortButton, NovoDataTableSortFilter, NovoDateFormatDirective, NovoDatePickerElement, NovoDatePickerInputElement, NovoDatePickerModule, NovoDateRangeFormatDirective, NovoDateRangeInputElement, NovoDateTimeFormatDirective, NovoDateTimePickerElement, NovoDateTimePickerInputElement, NovoDateTimePickerModule, NovoDefaultAddressConditionDef, NovoDefaultBooleanConditionDef, NovoDefaultDateConditionDef, NovoDefaultDateTimeConditionDef, NovoDefaultIdConditionDef, NovoDefaultNumberConditionDef, NovoDefaultPickerConditionDef, NovoDefaultStringConditionDef, NovoDividerComponent, NovoDividerModule, NovoDragulaElement, NovoDragulaModule, NovoDragulaService, NovoDropDownItemHeaderElement, NovoDropDownTrigger, NovoDropdownCell, NovoDropdownElement, NovoDropdownListElement, NovoDropdownModule, NovoDynamicFormElement, NovoElementProviders, NovoElementsModule, NovoErrorElement, NovoEventTypeLegendElement, NovoExpansionModule, NovoExpansionPanel, NovoExpansionPanelActionRow, NovoExpansionPanelContent, NovoExpansionPanelDescription, NovoExpansionPanelHeader, NovoExpansionPanelTitle, NovoFieldControl, NovoFieldElement, NovoFieldModule, NovoFieldPrefixDirective, NovoFieldSuffixDirective, NovoFieldsElement, NovoFieldsetElement, NovoFieldsetHeaderElement, NovoFile, NovoFileInputElement, NovoFlexElement, NovoFlexModule, NovoFormControl, NovoFormElement, NovoFormExtrasModule, NovoFormGroup, NovoFormModule, NovoGridElement, NovoHeaderComponent, NovoHeaderModule, NovoHeaderSpacer, NovoHintElement, NovoHorizontalStepper, NovoIconComponent, NovoIconModule, NovoInput, NovoIsLoadingDirective, NovoItemAvatarElement, NovoItemContentElement, NovoItemDateElement, NovoItemElement, NovoItemEndElement, NovoItemHeaderElement, NovoItemTitleElement, NovoLabel, NovoLabelService, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoLink, NovoListElement, NovoListItemElement, NovoListModule, NovoLoadedDirective, NovoLoadingElement, NovoLoadingModule, NovoMenuModule, NovoMenuService, NovoModalContainerComponent, NovoModalElement, NovoModalModule, NovoModalNotificationElement, NovoModalParams, NovoModalRef, NovoModalService, NovoMonthSelectElement, NovoMonthViewElement, NovoMultiDateInputElement, NovoMultiPickerElement, NovoMultiPickerModule, NovoNavContentElement, NovoNavElement, NovoNavHeaderElement, NovoNavOutletElement, NovoNonIdealStateModule, NovoNovoCKEditorModule, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectedEvent, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPickerDirective, NovoPickerElement, NovoPickerModule, NovoPickerToggleElement, NovoPipesModule, NovoPopOverModule, NovoProgressBarElement, NovoProgressElement, NovoProgressModule, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoQueryBuilderModule, NovoQuickNoteModule, NovoRadioElement, NovoRadioGroup, NovoRadioModule, NovoRailComponent, NovoRowChipElement, NovoRowChipsElement, NovoSearchBoxElement, NovoSearchBoxModule, NovoSelectChange, NovoSelectElement, NovoSelectModule, NovoSelectSearchClearDirective, NovoSelectSearchComponent, NovoSelectSearchModule, NovoSelection, NovoSidenavComponent, NovoSimpleActionCell, NovoSimpleCell, NovoSimpleCellDef, NovoSimpleCellHeader, NovoSimpleCheckboxCell, NovoSimpleCheckboxHeaderCell, NovoSimpleColumnDef, NovoSimpleEmptyHeaderCell, NovoSimpleFilterFocus, NovoSimpleHeaderCell, NovoSimpleHeaderCellDef, NovoSimpleHeaderRow, NovoSimpleHeaderRowDef, NovoSimpleRow, NovoSimpleRowDef, NovoSimpleTableModule, NovoSimpleTablePagination, NovoSkeletonDirective, NovoSliderElement, NovoSliderModule, NovoSortFilter, NovoSpinnerElement, NovoStackElement, NovoStep, NovoStepHeader, NovoStepLabel, NovoStepStatus, NovoStepper, NovoStepperModule, NovoStepperNext, NovoStepperPrevious, NovoSwitchElement, NovoSwitchModule, NovoTabButtonElement, NovoTabElement, NovoTabLinkElement, NovoTabModule, NovoTabbedGroupPickerElement, NovoTabbedGroupPickerModule, NovoTable, NovoTableActionsElement, NovoTableElement, NovoTableExtrasModule, NovoTableFooterElement, NovoTableHeaderElement, NovoTableKeepFilterFocus, NovoTableMode, NovoTableModule, NovoTemplate, NovoTemplateService, NovoText, NovoTheme, NovoThemeOptions, NovoTilesElement, NovoTilesModule, NovoTimeFormatDirective, NovoTimePickerElement, NovoTimePickerInputElement, NovoTimePickerModule, NovoTipWellElement, NovoTipWellModule, NovoTitle, NovoToastElement, NovoToastModule, NovoToastService, NovoToolbar, NovoToolbarModule, NovoToolbarRow, NovoTooltip, NovoTooltipModule, NovoUtilActionComponent, NovoUtilsComponent, NovoValueElement, NovoValueModule, NovoVerticalStepper, NovoYearSelectElement, OptionsService, OutsideClick, PaddingDirective, PagedArrayCollection, Pagination, PercentageCell, PickerControl, PickerResults, PlacesListComponent, PluralPipe, PopOverContent, PopOverDirective, ProgressAppearance, QuickNoteControl, QuickNoteElement, QuickNoteResults, REMOVABLE_REF, RadioControl, RangeSelectionStrategy, ReadOnlyControl, RemoteActivityTableService, RemoteDataTableService, RenderPipe, RowDetails, Security, SelectControl, ShowOnDirtyErrorStateMatcher, SkillsSpecialtyPickerResults, SortDirection, StaticActivityTableService, StaticDataTableService, SwitchCasesDirective, SwitchControl, TIMEFORMAT_VALUE_ACCESSOR, TIME_FORMATS, TIME_VALUE_FORMATS, TableCell, TableFilter, TablePickerControl, TextAreaControl, TextBoxControl, TextColorDirective, ThOrderable, ThSortable, ThemeColorDirective, TilesControl, TimeControl, TimezoneControl, TooltipDirective, Unless, UnlessModule, VisibleDirective, WeekSelectionStrategy, WeekdayPipe, WorkersCompCodesPickerResults, YearPipe, _NovoCdkRowDef, _NovoCell, _NovoCellDef, _NovoColumnDef, _NovoHeaderCell, _NovoHeaderCellDef, _NovoHeaderRow, _NovoHeaderRowDef, _NovoRow, _countGroupLabelsBeforeOption, _getOptionScrollPosition, binarySearch, can, findByCountryCode, findByCountryId, findByCountryName, getCountries, getDayView, getDayViewHourGrid, getMonthView, getSpacingToken, getStateObjects, getStates, getWeekView, getWeekViewEventOffset, getWeekViewHeader, interpolateCell, isAlphaNumeric, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, notify, novoExpansionAnimations, novoStepperAnimations, slideInOut, throwNovoDuplicatedSidenavError, zoomInOut };
+export { AbstractConditionFieldDef, AccentColorDirective, AceEditorControl, ActivityTableDataSource, ActivityTableRenderers, AddressControl, AppBridge, AppBridgeHandler, AppBridgeService, ArrayCollection, AsideComponent, BackgroundColorDirective, BaseConditionFieldDef, BaseControl, BasePickerResults, BaseRenderer, BooleanInput, BorderDirective, BreadcrumbElement, BreadcrumbItemElement, BreadcrumbService, BrowserGlobalRef, COUNTRIES, CalendarEventResponse, Can, CardActionsElement, CardContentElement, CardElement, CardFooterElement, CardHeaderElement, CheckListControl, CheckboxControl, ChecklistPickerResults, CollectionEvent, ComponentUtils, ConditionBuilderComponent, ConditionInputOutlet, ConditionOperatorOutlet, Conjunction, ControlConfirmModal, ControlFactory, ControlPromptModal, CriteriaBuilderComponent, CustomControl, DATEFORMAT_VALUE_ACCESSOR, DATERANGEFORMAT_VALUE_ACCESSOR, DATETIMEFORMAT_VALUE_ACCESSOR, DATE_FORMATS, DataTableBigDecimalRendererPipe, DataTableInterpolatePipe, DataTableSource, DataTableState, DateCell, DateControl, DateFormatService, DateTableCurrencyRendererPipe, DateTableDateRendererPipe, DateTableDateTimeRendererPipe, DateTableNumberRendererPipe, DateTableTimeRendererPipe, DateTimeControl, DayOfMonthPipe, DecodeURIPipe, DefaultDateSelectionStrategy, DefaultPipe, Deferred, DevAppBridge, DevAppBridgeService, DistributionListPickerResults, EXPANSION_PANEL_ANIMATION_TIMING, EditState, EditorControl, EndOfWeekDisplayPipe, EntityList, EntityPickerResult, EntityPickerResults, ErrorStateMatcher, FieldInteractionApi, FileControl, FillColorDirective, FlexDirective, FormUtils, FormValidators, GapDirective, GlobalRef, GooglePlacesModule, GooglePlacesService, GroupByPipe, GroupedControl, GroupedMultiPickerResults, Helpers, HighlightPipe, HoursPipe, IsoDatePipe, IsoDateRangePipe, IsoTimePipe, IsoTimeRangePipe, KeyCodes, LocalStorageService, MarginDirective, MenuComponent, MenuContentComponent, MenuDirective, MenuItemDirective, MixedMultiPickerResults, MonthDayPipe, MonthPipe, MultiDateSelectionStrategy, NOVO_BREADCRUMB_REF, NOVO_CHIPS_DEFAULT_OPTIONS, NOVO_CONDITION_BUILDER, NOVO_CRITERIA_BUILDER, NOVO_DATA_TABLE_REF, NOVO_DATE_SELECTION_STRATEGY, NOVO_DATE_SELECTION_STRATEGY_PROVIDER, NOVO_DATE_SELECTION_STRATEGY_PROVIDER_FACTORY, NOVO_ELEMENTS_LABELS_PROVIDERS, NOVO_FORM_FIELD, NOVO_INPUT_FORMAT, NOVO_INPUT_VALUE_ACCESSOR, NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_PROGRESS_CONTAINER, NOVO_QUERY_BUILDER, NOVO_RADIO_GROUP, NOVO_VALUE_THEME, NOVO_VALUE_TYPE, NativeSelectControl, NodeGlobalRef, NonIdealStateElement, NovoAccordion, NovoAceEditor, NovoAceEditorModule, NovoActivityTable, NovoActivityTableActions, NovoActivityTableCustomFilter, NovoActivityTableCustomHeader, NovoActivityTableEmptyMessage, NovoActivityTableNoResultsMessage, NovoActivityTableState, NovoAddressElement, NovoAgendaAllDayEventElement, NovoAgendaDateChangeElement, NovoAgendaDayEventElement, NovoAgendaDayViewElement, NovoAgendaHourSegmentElement, NovoAgendaModule, NovoAgendaMonthDayElement, NovoAgendaMonthHeaderElement, NovoAgendaMonthViewElement, NovoAgendaWeekEventElement, NovoAgendaWeekHeaderElement, NovoAgendaWeekViewElement, NovoAsideModule, NovoAsideRef, NovoAsideService, NovoAutoSize, NovoAutocompleteElement, NovoAvatarElement, NovoAvatarModule, NovoAvatarStackElement, NovoBaseTextElement, NovoBoxElement, NovoBreadcrumbModule, NovoButtonElement, NovoButtonModule, NovoCKEditorElement, NovoCalendarElement, NovoCalendarModule, NovoCaption, NovoCardModule, NovoCategoryDropdownElement, NovoCategoryDropdownModule, NovoCheckListElement, NovoCheckboxChange, NovoCheckboxElement, NovoCheckboxModule, NovoChipAvatar, NovoChipElement, NovoChipInput, NovoChipList, NovoChipListChange, NovoChipRemove, NovoChipSelectionChange, NovoChipsElement, NovoChipsModule, NovoColorInputElement, NovoColorPickerComponent, NovoColorPickerModule, NovoColorSwatchComponent, NovoCommonModule, NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef, NovoControlElement, NovoControlGroup, NovoControlTemplates, NovoDataTable, NovoDataTableCell, NovoDataTableCellFilterHeader, NovoDataTableCellHeader, NovoDataTableCheckboxCell, NovoDataTableCheckboxHeaderCell, NovoDataTableClearButton, NovoDataTableExpandCell, NovoDataTableExpandDirective, NovoDataTableExpandHeaderCell, NovoDataTableFilterUtils, NovoDataTableHeaderCell, NovoDataTableHeaderRow, NovoDataTableModule, NovoDataTablePagination, NovoDataTableRow, NovoDataTableSortButton, NovoDataTableSortFilter, NovoDateFormatDirective, NovoDatePickerElement, NovoDatePickerInputElement, NovoDatePickerModule, NovoDateRangeFormatDirective, NovoDateRangeInputElement, NovoDateTimeFormatDirective, NovoDateTimePickerElement, NovoDateTimePickerInputElement, NovoDateTimePickerModule, NovoDefaultAddressConditionDef, NovoDefaultBooleanConditionDef, NovoDefaultDateConditionDef, NovoDefaultDateTimeConditionDef, NovoDefaultIdConditionDef, NovoDefaultNumberConditionDef, NovoDefaultPickerConditionDef, NovoDefaultStringConditionDef, NovoDividerComponent, NovoDividerModule, NovoDragulaElement, NovoDragulaModule, NovoDragulaService, NovoDropDownItemHeaderElement, NovoDropDownTrigger, NovoDropdownCell, NovoDropdownElement, NovoDropdownListElement, NovoDropdownModule, NovoDynamicFormElement, NovoElementProviders, NovoElementsModule, NovoErrorElement, NovoEventTypeLegendElement, NovoExpansionModule, NovoExpansionPanel, NovoExpansionPanelActionRow, NovoExpansionPanelContent, NovoExpansionPanelDescription, NovoExpansionPanelHeader, NovoExpansionPanelTitle, NovoFieldControl, NovoFieldElement, NovoFieldModule, NovoFieldPrefixDirective, NovoFieldSuffixDirective, NovoFieldsElement, NovoFieldsetElement, NovoFieldsetHeaderElement, NovoFile, NovoFileInputElement, NovoFlexElement, NovoFlexModule, NovoFormControl, NovoFormElement, NovoFormExtrasModule, NovoFormGroup, NovoFormModule, NovoGridElement, NovoHeaderComponent, NovoHeaderModule, NovoHeaderSpacer, NovoHintElement, NovoHorizontalStepper, NovoIconComponent, NovoIconModule, NovoInput, NovoIsLoadingDirective, NovoItemAvatarElement, NovoItemContentElement, NovoItemDateElement, NovoItemElement, NovoItemEndElement, NovoItemHeaderElement, NovoItemTitleElement, NovoLabel, NovoLabelService, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoLink, NovoListElement, NovoListItemElement, NovoListModule, NovoLoadedDirective, NovoLoadingElement, NovoLoadingModule, NovoMenuModule, NovoMenuService, NovoModalContainerComponent, NovoModalElement, NovoModalModule, NovoModalNotificationElement, NovoModalParams, NovoModalRef, NovoModalService, NovoMonthSelectElement, NovoMonthViewElement, NovoMultiDateInputElement, NovoMultiPickerElement, NovoMultiPickerModule, NovoNavContentElement, NovoNavElement, NovoNavHeaderElement, NovoNavOutletElement, NovoNonIdealStateModule, NovoNovoCKEditorModule, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectedEvent, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPickerDirective, NovoPickerElement, NovoPickerModule, NovoPickerToggleElement, NovoPipesModule, NovoPopOverModule, NovoProgressBarElement, NovoProgressElement, NovoProgressModule, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoQueryBuilderModule, NovoQuickNoteModule, NovoRadioElement, NovoRadioGroup, NovoRadioModule, NovoRailComponent, NovoRowChipElement, NovoRowChipsElement, NovoSearchBoxElement, NovoSearchBoxModule, NovoSelectChange, NovoSelectElement, NovoSelectModule, NovoSelectSearchClearDirective, NovoSelectSearchComponent, NovoSelectSearchModule, NovoSelection, NovoSidenavComponent, NovoSimpleActionCell, NovoSimpleCell, NovoSimpleCellDef, NovoSimpleCellHeader, NovoSimpleCheckboxCell, NovoSimpleCheckboxHeaderCell, NovoSimpleColumnDef, NovoSimpleEmptyHeaderCell, NovoSimpleFilterFocus, NovoSimpleHeaderCell, NovoSimpleHeaderCellDef, NovoSimpleHeaderRow, NovoSimpleHeaderRowDef, NovoSimpleRow, NovoSimpleRowDef, NovoSimpleTableModule, NovoSimpleTablePagination, NovoSkeletonDirective, NovoSliderElement, NovoSliderModule, NovoSortFilter, NovoSpinnerElement, NovoStackElement, NovoStep, NovoStepHeader, NovoStepLabel, NovoStepStatus, NovoStepper, NovoStepperModule, NovoStepperNext, NovoStepperPrevious, NovoSwitchElement, NovoSwitchModule, NovoTabButtonElement, NovoTabElement, NovoTabLinkElement, NovoTabModule, NovoTabbedGroupPickerElement, NovoTabbedGroupPickerModule, NovoTable, NovoTableActionsElement, NovoTableElement, NovoTableExtrasModule, NovoTableFooterElement, NovoTableHeaderElement, NovoTableKeepFilterFocus, NovoTableMode, NovoTableModule, NovoTemplate, NovoTemplateService, NovoText, NovoTheme, NovoThemeOptions, NovoTilesElement, NovoTilesModule, NovoTimeFormatDirective, NovoTimePickerElement, NovoTimePickerInputElement, NovoTimePickerModule, NovoTipWellElement, NovoTipWellModule, NovoTitle, NovoToastElement, NovoToastModule, NovoToastService, NovoToolbar, NovoToolbarModule, NovoToolbarRow, NovoTooltip, NovoTooltipModule, NovoUtilActionComponent, NovoUtilsComponent, NovoValueElement, NovoValueModule, NovoVerticalStepper, NovoYearSelectElement, OptionsService, OutsideClick, PaddingDirective, PagedArrayCollection, Pagination, PercentageCell, PickerControl, PickerResults, PlacesListComponent, PluralPipe, PopOverContent, PopOverDirective, ProgressAppearance, QuickNoteControl, QuickNoteElement, QuickNoteResults, REMOVABLE_REF, RadioControl, RangeSelectionStrategy, ReadOnlyControl, RemoteActivityTableService, RemoteDataTableService, RenderPipe, RowDetails, Security, SelectControl, ShowOnDirtyErrorStateMatcher, SkillsSpecialtyPickerResults, SortDirection, StaticActivityTableService, StaticDataTableService, SwitchCasesDirective, SwitchControl, TIMEFORMAT_VALUE_ACCESSOR, TIME_FORMATS, TIME_VALUE_FORMATS, TableCell, TableFilter, TablePickerControl, TextAreaControl, TextBoxControl, TextColorDirective, ThOrderable, ThSortable, ThemeColorDirective, TilesControl, TimeControl, TimezoneControl, TooltipDirective, Unless, UnlessModule, VisibleDirective, WeekSelectionStrategy, WeekdayPipe, WorkersCompCodesPickerResults, YearPipe, _NovoCdkRowDef, _NovoCell, _NovoCellDef, _NovoColumnDef, _NovoHeaderCell, _NovoHeaderCellDef, _NovoHeaderRow, _NovoHeaderRowDef, _NovoRow, _countGroupLabelsBeforeOption, _getOptionScrollPosition, binarySearch, can, findByCountryCode, findByCountryId, findByCountryName, getCountries, getDayView, getDayViewHourGrid, getMonthView, getSpacingToken, getStateObjects, getStates, getWeekView, getWeekViewEventOffset, getWeekViewHeader, interpolateCell, isAlphaNumeric, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, notify, novoExpansionAnimations, novoStepperAnimations, slideInOut, throwNovoDuplicatedSidenavError, zoomInOut };
 //# sourceMappingURL=novo-elements.mjs.map