npm - novo-elements - Versions diffs - 6.2.1 → 6.2.2 - Mend

novo-elements 6.2.1 → 6.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/bundles/novo-elements.umd.js CHANGED Viewed

@@ -25431,13 +25431,13 @@
     var NOVO_OPTION_PARENT_COMPONENT = new i0.InjectionToken('NOVO_OPTION_PARENT_COMPONENT');
     // Notes on the accessibility pattern used for `novo-optgroup`.
-    // The option group has two different "modes": regular and inert. The regular mode uses the
+    // The option group has two different "modes": regular and novoInert. The regular mode uses the
     // recommended a11y pattern which has `role="group"` on the group element with `aria-labelledby`
     // pointing to the label. This works for `novo-select`, but it seems to hit a bug for autocomplete
     // under VoiceOver where the group doesn't get read out at all. The bug appears to be that if
     // there's __any__ a11y-related attribute on the group (e.g. `role` or `aria-labelledby`),
     // VoiceOver on Safari won't read it out.
-    // We've introduced the `inert` mode as a workaround. Under this mode, all a11y attributes are
+    // We've introduced the `novoInert` mode as a workaround. Under this mode, all a11y attributes are
     // removed from the group, and we get the screen reader to read out the group label by mirroring it
     // inside an invisible element in the option. This is sub-optimal, because the screen reader will
     // repeat the group label on each navigation, whereas the default pattern only reads the group when
@@ -25478,7 +25478,7 @@
             var _this = this;
             var _a;
             _this = _super.call(this) || this;
-            _this._inert = (_a = parent === null || parent === void 0 ? void 0 : parent.inertGroups) !== null && _a !== void 0 ? _a : false;
+            _this._novoInert = (_a = parent === null || parent === void 0 ? void 0 : parent.inertGroups) !== null && _a !== void 0 ? _a : false;
             return _this;
         }
         return NovoOptgroup;
@@ -25493,9 +25493,9 @@
                     inputs: ['disabled', 'label'],
                     host: {
                         class: 'novo-optgroup',
-                        '[attr.role]': '_inert ? null : "group"',
-                        '[attr.aria-disabled]': '_inert ? null : disabled.toString()',
-                        '[attr.aria-labelledby]': '_inert ? null : _labelId',
+                        '[attr.role]': '_novoInert ? null : "group"',
+                        '[attr.aria-disabled]': '_novoInert ? null : disabled.toString()',
+                        '[attr.aria-labelledby]': '_novoInert ? null : _labelId',
                         '[class.novo-optgroup-disabled]': 'disabled',
                     },
                     providers: [{ provide: NOVO_OPTGROUP, useExisting: NovoOptgroup }],
@@ -25537,7 +25537,7 @@
             this._mostRecentViewValue = '';
             /** TODO: deprecate maybe, check support for table headers */
             this.keepOpen = false;
-            this.inert = false;
+            this.novoInert = false;
             /** The unique ID of the option. */
             this.id = "novo-option-" + _uniqueIdCounter++;
             /** Event emitted when the option is selected or deselected. */
@@ -25673,7 +25673,7 @@
             }
         };
         NovoOptionBase.prototype._handlePassiveClick = function (event) {
-            if (!this.inert) {
+            if (!this.novoInert) {
                 this._selectViaInteraction();
             }
         };
@@ -25763,7 +25763,7 @@
     ]; };
     NovoOptionBase.propDecorators = {
         keepOpen: [{ type: i0.Input }],
-        inert: [{ type: i0.Input }],
+        novoInert: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
@@ -25777,7 +25777,7 @@
     __decorate([
         BooleanInput(),
         __metadata("design:type", Boolean)
-    ], NovoOptionBase.prototype, "inert", void 0);
+    ], NovoOptionBase.prototype, "novoInert", void 0);
     /**
      * Single option inside of a `<novo-select>` element.
      */
@@ -25802,12 +25802,12 @@
                         '[class.novo-selected]': 'selectable && selected',
                         '[class.novo-option-multiple]': 'multiple',
                         '[class.novo-option-disabled]': 'disabled',
-                        '[class.novo-option-inert]': 'inert',
+                        '[class.novo-option-inert]': 'novoInert',
                         '(keydown)': '_handleKeydown($event)',
                         class: 'novo-option novo-focus-indicator',
                     },
-                    inputs: ['selected', 'keepOpen', 'inert', 'value', 'inert', 'disabled'],
-                    template: "<novo-pseudo-checkbox *ngIf=\"selectable && multiple\" class=\"novo-option-pseudo-checkbox\"\n  [state]=\"selected ? 'checked' : 'unchecked'\" [disabled]=\"disabled\"></novo-pseudo-checkbox>\n\n<span class=\"novo-option-text\">\n  <ng-content></ng-content>\n</span>\n\n<novo-pseudo-checkbox *ngIf=\"selectable && !multiple && selected\" class=\"novo-option-pseudo-checkbox\" state=\"checked\"\n  shape=\"line\"\n  [disabled]=\"disabled\"></novo-pseudo-checkbox>\n\n<ng-content select=\"[novoSuffix]\"></ng-content>\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n<span class=\"cdk-visually-hidden\" *ngIf=\"group && group._inert\">({{ group.label }})</span>",
+                    inputs: ['selected', 'keepOpen', 'novoInert', 'value', 'disabled'],
+                    template: "<novo-pseudo-checkbox *ngIf=\"selectable && multiple\" class=\"novo-option-pseudo-checkbox\"\n  [state]=\"selected ? 'checked' : 'unchecked'\" [disabled]=\"disabled\"></novo-pseudo-checkbox>\n\n<span class=\"novo-option-text\">\n  <ng-content></ng-content>\n</span>\n\n<novo-pseudo-checkbox *ngIf=\"selectable && !multiple && selected\" class=\"novo-option-pseudo-checkbox\" state=\"checked\"\n  shape=\"line\"\n  [disabled]=\"disabled\"></novo-pseudo-checkbox>\n\n<ng-content select=\"[novoSuffix]\"></ng-content>\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n<span class=\"cdk-visually-hidden\" *ngIf=\"group && group._novoInert\">({{ group.label }})</span>",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".novo-option{-webkit-tap-highlight-color:transparent;align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline;display:flex;flex:1;flex-direction:row;font-size:var(--font-size-text);font-weight:400;gap:1rem;margin:0;max-width:100%;outline:none;padding:1rem 1rem 1rem 1.6rem;position:relative;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}.novo-option.text-nowrap{white-space:nowrap}.novo-option.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-option.text-size-default{font-size:inherit}.novo-option.text-size-body{font-size:1.3rem}.novo-option.text-size-xs{font-size:1rem}.novo-option.text-size-sm{font-size:1.2rem}.novo-option.text-size-md{font-size:1.3rem}.novo-option.text-size-lg{font-size:1.6rem}.novo-option.text-size-xl{font-size:2rem}.novo-option.text-size-2xl{font-size:2.6rem}.novo-option.text-size-3xl{font-size:3.2rem}.novo-option.text-size-smaller{font-size:.8em}.novo-option.text-size-larger{font-size:1.2em}.novo-option.text-color-black{color:#000}.novo-option.text-color-white{color:#fff}.novo-option.text-color-gray,.novo-option.text-color-grey{color:#9e9e9e}.novo-option.text-color-bright,.novo-option.text-color-offWhite{color:#f7f7f7}.novo-option.text-color-light{color:#dbdbdb}.novo-option.text-color-neutral{color:#4f5361}.novo-option.text-color-dark{color:#3d464d}.novo-option.text-color-orange{color:#ff6900}.novo-option.text-color-navigation{color:#202945}.novo-option.text-color-skyBlue{color:#009bdf}.novo-option.text-color-steel{color:#5b6770}.novo-option.text-color-metal{color:#637893}.novo-option.text-color-sand{color:#f4f4f4}.novo-option.text-color-silver{color:#e2e2e2}.novo-option.text-color-stone{color:#bebebe}.novo-option.text-color-ash{color:#a0a0a0}.novo-option.text-color-slate{color:#707070}.novo-option.text-color-onyx{color:#526980}.novo-option.text-color-charcoal{color:#282828}.novo-option.text-color-moonlight{color:#1a242f}.novo-option.text-color-midnight{color:#202945}.novo-option.text-color-darkness{color:#161f27}.novo-option.text-color-navy{color:#0d2d42}.novo-option.text-color-aqua{color:#3bafda}.novo-option.text-color-ocean{color:#4a89dc}.novo-option.text-color-mint{color:#37bc9b}.novo-option.text-color-grass{color:#8cc152}.novo-option.text-color-sunflower{color:#f6b042}.novo-option.text-color-bittersweet{color:#eb6845}.novo-option.text-color-grapefruit{color:#da4453}.novo-option.text-color-carnation{color:#d770ad}.novo-option.text-color-lavender{color:#967adc}.novo-option.text-color-mountain{color:#9678b6}.novo-option.text-color-info,.novo-option.text-color-positive{color:#4a89dc}.novo-option.text-color-success{color:#8cc152}.novo-option.text-color-danger,.novo-option.text-color-error,.novo-option.text-color-negative{color:#da4453}.novo-option.text-color-warning{color:#f6b042}.novo-option.text-color-empty{color:#cccdcc}.novo-option.text-color-disabled{color:#bebebe}.novo-option.text-color-background{color:#f7f7f7}.novo-option.text-color-backgroundDark{color:#e2e2e2}.novo-option.text-color-presentation{color:#5b6770}.novo-option.text-color-bullhorn{color:#ff6900}.novo-option.text-color-pulse{color:#3bafda}.novo-option.text-color-company{color:#39d}.novo-option.text-color-candidate{color:#4b7}.novo-option.text-color-lead{color:#a69}.novo-option.text-color-clientcontact,.novo-option.text-color-contact{color:#fa4}.novo-option.text-color-opportunity{color:#625}.novo-option.text-color-job,.novo-option.text-color-joborder{color:#b56}.novo-option.text-color-submission{color:#a9adbb}.novo-option.text-color-sendout{color:#747884}.novo-option.text-color-placement{color:#0b344f}.novo-option.text-color-note{color:#747884}.novo-option.text-color-contract{color:#454ea0}.novo-option.text-color-billableCharge,.novo-option.text-color-corporateUser,.novo-option.text-color-credential,.novo-option.text-color-distributionList,.novo-option.text-color-earnCode,.novo-option.text-color-invoiceStatement,.novo-option.text-color-jobCode,.novo-option.text-color-payableCharge,.novo-option.text-color-person,.novo-option.text-color-user{color:#696d79}.novo-option.margin-before{margin-top:.4rem}.novo-option.margin-after{margin-bottom:.8rem}.novo-option.text-length-small{max-width:40ch}.novo-option.text-length-medium{max-width:55ch}.novo-option.text-length-large{max-width:70ch}.novo-option.text-weight-hairline{font-weight:100}.novo-option.text-weight-thin{font-weight:200}.novo-option.text-weight-light{font-weight:300}.novo-option.text-weight-normal{font-weight:400}.novo-option.text-weight-medium{font-weight:500}.novo-option.text-weight-semibold{font-weight:600}.novo-option.text-weight-bold{font-weight:700}.novo-option.text-weight-extrabold{font-weight:800}.novo-option.text-weight-heavy{font-weight:900}.novo-option.text-weight-lighter{font-weight:lighter}.novo-option.text-weight-bolder{font-weight:bolder}.novo-option:hover:not(.novo-option-inert){background:var(--background-main,rgba(74,137,220,.1))}.novo-option.novo-active:not(.novo-option-inert),.novo-option:active:not(.novo-option-inert){background:rgba(74,137,220,.3)}.novo-option.novo-selected{color:#4a89dc}.novo-option.disabled,.novo-option[aria-disabled=true]{color:#bebebe;cursor:not-allowed}.novo-option.disabled:hover,.novo-option[aria-disabled=true]:hover{background:rgba(218,68,83,.1)}.novo-optgroup .novo-option:not(.novo-option-multiple){padding-left:1rem}[dir=rtl] .novo-optgroup .novo-option:not(.novo-option-multiple){padding-left:.5rem;padding-right:1rem}.novo-option.novo-accent-black{border-left:4px solid #000}.novo-option.novo-fill-black:not(.novo-option-inert){background:#000;color:#fff}.novo-option.novo-fill-black:not(.novo-option-inert):focus,.novo-option.novo-fill-black:not(.novo-option-inert):hover{background:#333}.novo-option.novo-fill-black:not(.novo-option-inert):active{background:#000}.novo-option.novo-accent-white{border-left:4px solid #fff}.novo-option.novo-fill-white:not(.novo-option-inert){background:#fff;color:#3d464d}.novo-option.novo-fill-white:not(.novo-option-inert):focus,.novo-option.novo-fill-white:not(.novo-option-inert):hover{background:#fff}.novo-option.novo-fill-white:not(.novo-option-inert):active{background:#ccc}.novo-option.novo-accent-gray{border-left:4px solid #9e9e9e}.novo-option.novo-fill-gray:not(.novo-option-inert){background:#9e9e9e;color:#3d464d}.novo-option.novo-fill-gray:not(.novo-option-inert):focus,.novo-option.novo-fill-gray:not(.novo-option-inert):hover{background:#b1b1b1}.novo-option.novo-fill-gray:not(.novo-option-inert):active{background:#7e7e7e}.novo-option.novo-accent-grey{border-left:4px solid #9e9e9e}.novo-option.novo-fill-grey:not(.novo-option-inert){background:#9e9e9e;color:#3d464d}.novo-option.novo-fill-grey:not(.novo-option-inert):focus,.novo-option.novo-fill-grey:not(.novo-option-inert):hover{background:#b1b1b1}.novo-option.novo-fill-grey:not(.novo-option-inert):active{background:#7e7e7e}.novo-option.novo-accent-offWhite{border-left:4px solid #f7f7f7}.novo-option.novo-fill-offWhite:not(.novo-option-inert){background:#f7f7f7;color:#3d464d}.novo-option.novo-fill-offWhite:not(.novo-option-inert):focus,.novo-option.novo-fill-offWhite:not(.novo-option-inert):hover{background:#f8f8f8}.novo-option.novo-fill-offWhite:not(.novo-option-inert):active{background:#c5c5c5}.novo-option.novo-accent-bright{border-left:4px solid #f7f7f7}.novo-option.novo-fill-bright:not(.novo-option-inert){background:#f7f7f7;color:#3d464d}.novo-option.novo-fill-bright:not(.novo-option-inert):focus,.novo-option.novo-fill-bright:not(.novo-option-inert):hover{background:#f8f8f8}.novo-option.novo-fill-bright:not(.novo-option-inert):active{background:#c5c5c5}.novo-option.novo-accent-light{border-left:4px solid #dbdbdb}.novo-option.novo-fill-light:not(.novo-option-inert){background:#dbdbdb;color:#3d464d}.novo-option.novo-fill-light:not(.novo-option-inert):focus,.novo-option.novo-fill-light:not(.novo-option-inert):hover{background:#e2e2e2}.novo-option.novo-fill-light:not(.novo-option-inert):active{background:#afafaf}.novo-option.novo-accent-neutral{border-left:4px solid #4f5361}.novo-option.novo-fill-neutral:not(.novo-option-inert){background:#4f5361;color:#fff}.novo-option.novo-fill-neutral:not(.novo-option-inert):focus,.novo-option.novo-fill-neutral:not(.novo-option-inert):hover{background:#727580}.novo-option.novo-fill-neutral:not(.novo-option-inert):active{background:#3f424d}.novo-option.novo-accent-dark{border-left:4px solid #3d464d}.novo-option.novo-fill-dark:not(.novo-option-inert){background:#3d464d;color:#fff}.novo-option.novo-fill-dark:not(.novo-option-inert):focus,.novo-option.novo-fill-dark:not(.novo-option-inert):hover{background:#636b70}.novo-option.novo-fill-dark:not(.novo-option-inert):active{background:#30383d}.novo-option.novo-accent-orange{border-left:4px solid #ff6900}.novo-option.novo-fill-orange:not(.novo-option-inert){background:#ff6900;color:#3d464d}.novo-option.novo-fill-orange:not(.novo-option-inert):focus,.novo-option.novo-fill-orange:not(.novo-option-inert):hover{background:#ff8733}.novo-option.novo-fill-orange:not(.novo-option-inert):active{background:#cc5400}.novo-option.novo-accent-navigation{border-left:4px solid #202945}.novo-option.novo-fill-navigation:not(.novo-option-inert){background:#202945;color:#fff}.novo-option.novo-fill-navigation:not(.novo-option-inert):focus,.novo-option.novo-fill-navigation:not(.novo-option-inert):hover{background:#4c536a}.novo-option.novo-fill-navigation:not(.novo-option-inert):active{background:#192037}.novo-option.novo-accent-skyBlue{border-left:4px solid #009bdf}.novo-option.novo-fill-skyBlue:not(.novo-option-inert){background:#009bdf;color:#fff}.novo-option.novo-fill-skyBlue:not(.novo-option-inert):focus,.novo-option.novo-fill-skyBlue:not(.novo-option-inert):hover{background:#33afe5}.novo-option.novo-fill-skyBlue:not(.novo-option-inert):active{background:#007cb2}.novo-option.novo-accent-steel{border-left:4px solid #5b6770}.novo-option.novo-fill-steel:not(.novo-option-inert){background:#5b6770;color:#fff}.novo-option.novo-fill-steel:not(.novo-option-inert):focus,.novo-option.novo-fill-steel:not(.novo-option-inert):hover{background:#7b858c}.novo-option.novo-fill-steel:not(.novo-option-inert):active{background:#485259}.novo-option.novo-accent-metal{border-left:4px solid #637893}.novo-option.novo-fill-metal:not(.novo-option-inert){background:#637893;color:#fff}.novo-option.novo-fill-metal:not(.novo-option-inert):focus,.novo-option.novo-fill-metal:not(.novo-option-inert):hover{background:#8293a8}.novo-option.novo-fill-metal:not(.novo-option-inert):active{background:#4f6075}.novo-option.novo-accent-sand{border-left:4px solid #f4f4f4}.novo-option.novo-fill-sand:not(.novo-option-inert){background:#f4f4f4;color:#3d464d}.novo-option.novo-fill-sand:not(.novo-option-inert):focus,.novo-option.novo-fill-sand:not(.novo-option-inert):hover{background:#f6f6f6}.novo-option.novo-fill-sand:not(.novo-option-inert):active{background:#c3c3c3}.novo-option.novo-accent-silver{border-left:4px solid #e2e2e2}.novo-option.novo-fill-silver:not(.novo-option-inert){background:#e2e2e2;color:#3d464d}.novo-option.novo-fill-silver:not(.novo-option-inert):focus,.novo-option.novo-fill-silver:not(.novo-option-inert):hover{background:#e7e7e7}.novo-option.novo-fill-silver:not(.novo-option-inert):active{background:#b4b4b4}.novo-option.novo-accent-stone{border-left:4px solid #bebebe}.novo-option.novo-fill-stone:not(.novo-option-inert){background:#bebebe;color:#3d464d}.novo-option.novo-fill-stone:not(.novo-option-inert):focus,.novo-option.novo-fill-stone:not(.novo-option-inert):hover{background:#cbcbcb}.novo-option.novo-fill-stone:not(.novo-option-inert):active{background:#989898}.novo-option.novo-accent-ash{border-left:4px solid #a0a0a0}.novo-option.novo-fill-ash:not(.novo-option-inert){background:#a0a0a0;color:#3d464d}.novo-option.novo-fill-ash:not(.novo-option-inert):focus,.novo-option.novo-fill-ash:not(.novo-option-inert):hover{background:#b3b3b3}.novo-option.novo-fill-ash:not(.novo-option-inert):active{background:grey}.novo-option.novo-accent-slate{border-left:4px solid #707070}.novo-option.novo-fill-slate:not(.novo-option-inert){background:#707070;color:#fff}.novo-option.novo-fill-slate:not(.novo-option-inert):focus,.novo-option.novo-fill-slate:not(.novo-option-inert):hover{background:#8c8c8c}.novo-option.novo-fill-slate:not(.novo-option-inert):active{background:#595959}.novo-option.novo-accent-onyx{border-left:4px solid #526980}.novo-option.novo-fill-onyx:not(.novo-option-inert){background:#526980;color:#fff}.novo-option.novo-fill-onyx:not(.novo-option-inert):focus,.novo-option.novo-fill-onyx:not(.novo-option-inert):hover{background:#748799}.novo-option.novo-fill-onyx:not(.novo-option-inert):active{background:#415466}.novo-option.novo-accent-charcoal{border-left:4px solid #282828}.novo-option.novo-fill-charcoal:not(.novo-option-inert){background:#282828;color:#fff}.novo-option.novo-fill-charcoal:not(.novo-option-inert):focus,.novo-option.novo-fill-charcoal:not(.novo-option-inert):hover{background:#535353}.novo-option.novo-fill-charcoal:not(.novo-option-inert):active{background:#202020}.novo-option.novo-accent-moonlight{border-left:4px solid #1a242f}.novo-option.novo-fill-moonlight:not(.novo-option-inert){background:#1a242f;color:#fff}.novo-option.novo-fill-moonlight:not(.novo-option-inert):focus,.novo-option.novo-fill-moonlight:not(.novo-option-inert):hover{background:#474f58}.novo-option.novo-fill-moonlight:not(.novo-option-inert):active{background:#141c25}.novo-option.novo-accent-midnight{border-left:4px solid #202945}.novo-option.novo-fill-midnight:not(.novo-option-inert){background:#202945;color:#fff}.novo-option.novo-fill-midnight:not(.novo-option-inert):focus,.novo-option.novo-fill-midnight:not(.novo-option-inert):hover{background:#4c536a}.novo-option.novo-fill-midnight:not(.novo-option-inert):active{background:#192037}.novo-option.novo-accent-darkness{border-left:4px solid #161f27}.novo-option.novo-fill-darkness:not(.novo-option-inert){background:#161f27;color:#fff}.novo-option.novo-fill-darkness:not(.novo-option-inert):focus,.novo-option.novo-fill-darkness:not(.novo-option-inert):hover{background:#444b52}.novo-option.novo-fill-darkness:not(.novo-option-inert):active{background:#11181f}.novo-option.novo-accent-navy{border-left:4px solid #0d2d42}.novo-option.novo-fill-navy:not(.novo-option-inert){background:#0d2d42;color:#fff}.novo-option.novo-fill-navy:not(.novo-option-inert):focus,.novo-option.novo-fill-navy:not(.novo-option-inert):hover{background:#3d5767}.novo-option.novo-fill-navy:not(.novo-option-inert):active{background:#0a2434}.novo-option.novo-accent-aqua{border-left:4px solid #3bafda}.novo-option.novo-fill-aqua:not(.novo-option-inert){background:#3bafda;color:#3d464d}.novo-option.novo-fill-aqua:not(.novo-option-inert):focus,.novo-option.novo-fill-aqua:not(.novo-option-inert):hover{background:#62bfe1}.novo-option.novo-fill-aqua:not(.novo-option-inert):active{background:#2f8cae}.novo-option.novo-accent-ocean{border-left:4px solid #4a89dc}.novo-option.novo-fill-ocean:not(.novo-option-inert){background:#4a89dc;color:#fff}.novo-option.novo-fill-ocean:not(.novo-option-inert):focus,.novo-option.novo-fill-ocean:not(.novo-option-inert):hover{background:#6ea0e3}.novo-option.novo-fill-ocean:not(.novo-option-inert):active{background:#3b6db0}.novo-option.novo-accent-mint{border-left:4px solid #37bc9b}.novo-option.novo-fill-mint:not(.novo-option-inert){background:#37bc9b;color:#3d464d}.novo-option.novo-fill-mint:not(.novo-option-inert):focus,.novo-option.novo-fill-mint:not(.novo-option-inert):hover{background:#5fc9af}.novo-option.novo-fill-mint:not(.novo-option-inert):active{background:#2c967c}.novo-option.novo-accent-grass{border-left:4px solid #8cc152}.novo-option.novo-fill-grass:not(.novo-option-inert){background:#8cc152;color:#fff}.novo-option.novo-fill-grass:not(.novo-option-inert):focus,.novo-option.novo-fill-grass:not(.novo-option-inert):hover{background:#a3cd74}.novo-option.novo-fill-grass:not(.novo-option-inert):active{background:#709a41}.novo-option.novo-accent-sunflower{border-left:4px solid #f6b042}.novo-option.novo-fill-sunflower:not(.novo-option-inert){background:#f6b042;color:#fff}.novo-option.novo-fill-sunflower:not(.novo-option-inert):focus,.novo-option.novo-fill-sunflower:not(.novo-option-inert):hover{background:#f7bf67}.novo-option.novo-fill-sunflower:not(.novo-option-inert):active{background:#c48c34}.novo-option.novo-accent-bittersweet{border-left:4px solid #eb6845}.novo-option.novo-fill-bittersweet:not(.novo-option-inert){background:#eb6845;color:#fff}.novo-option.novo-fill-bittersweet:not(.novo-option-inert):focus,.novo-option.novo-fill-bittersweet:not(.novo-option-inert):hover{background:#ef866a}.novo-option.novo-fill-bittersweet:not(.novo-option-inert):active{background:#bc5337}.novo-option.novo-accent-grapefruit{border-left:4px solid #da4453}.novo-option.novo-fill-grapefruit:not(.novo-option-inert){background:#da4453;color:#fff}.novo-option.novo-fill-grapefruit:not(.novo-option-inert):focus,.novo-option.novo-fill-grapefruit:not(.novo-option-inert):hover{background:#e16975}.novo-option.novo-fill-grapefruit:not(.novo-option-inert):active{background:#ae3642}.novo-option.novo-accent-carnation{border-left:4px solid #d770ad}.novo-option.novo-fill-carnation:not(.novo-option-inert){background:#d770ad;color:#fff}.novo-option.novo-fill-carnation:not(.novo-option-inert):focus,.novo-option.novo-fill-carnation:not(.novo-option-inert):hover{background:#df8cbd}.novo-option.novo-fill-carnation:not(.novo-option-inert):active{background:#ac598a}.novo-option.novo-accent-lavender{border-left:4px solid #967adc}.novo-option.novo-fill-lavender:not(.novo-option-inert){background:#967adc;color:#fff}.novo-option.novo-fill-lavender:not(.novo-option-inert):focus,.novo-option.novo-fill-lavender:not(.novo-option-inert):hover{background:#ab94e3}.novo-option.novo-fill-lavender:not(.novo-option-inert):active{background:#7861b0}.novo-option.novo-accent-mountain{border-left:4px solid #9678b6}.novo-option.novo-fill-mountain:not(.novo-option-inert){background:#9678b6;color:#fff}.novo-option.novo-fill-mountain:not(.novo-option-inert):focus,.novo-option.novo-fill-mountain:not(.novo-option-inert):hover{background:#ab93c4}.novo-option.novo-fill-mountain:not(.novo-option-inert):active{background:#786091}.novo-option.novo-accent-info{border-left:4px solid #4a89dc}.novo-option.novo-fill-info:not(.novo-option-inert){background:#4a89dc;color:#fff}.novo-option.novo-fill-info:not(.novo-option-inert):focus,.novo-option.novo-fill-info:not(.novo-option-inert):hover{background:#6ea0e3}.novo-option.novo-fill-info:not(.novo-option-inert):active{background:#3b6db0}.novo-option.novo-accent-positive{border-left:4px solid #4a89dc}.novo-option.novo-fill-positive:not(.novo-option-inert){background:#4a89dc;color:#fff}.novo-option.novo-fill-positive:not(.novo-option-inert):focus,.novo-option.novo-fill-positive:not(.novo-option-inert):hover{background:#6ea0e3}.novo-option.novo-fill-positive:not(.novo-option-inert):active{background:#3b6db0}.novo-option.novo-accent-success{border-left:4px solid #8cc152}.novo-option.novo-fill-success:not(.novo-option-inert){background:#8cc152;color:#fff}.novo-option.novo-fill-success:not(.novo-option-inert):focus,.novo-option.novo-fill-success:not(.novo-option-inert):hover{background:#a3cd74}.novo-option.novo-fill-success:not(.novo-option-inert):active{background:#709a41}.novo-option.novo-accent-negative{border-left:4px solid #da4453}.novo-option.novo-fill-negative:not(.novo-option-inert){background:#da4453;color:#fff}.novo-option.novo-fill-negative:not(.novo-option-inert):focus,.novo-option.novo-fill-negative:not(.novo-option-inert):hover{background:#e16975}.novo-option.novo-fill-negative:not(.novo-option-inert):active{background:#ae3642}.novo-option.novo-accent-danger{border-left:4px solid #da4453}.novo-option.novo-fill-danger:not(.novo-option-inert){background:#da4453;color:#fff}.novo-option.novo-fill-danger:not(.novo-option-inert):focus,.novo-option.novo-fill-danger:not(.novo-option-inert):hover{background:#e16975}.novo-option.novo-fill-danger:not(.novo-option-inert):active{background:#ae3642}.novo-option.novo-accent-error{border-left:4px solid #da4453}.novo-option.novo-fill-error:not(.novo-option-inert){background:#da4453;color:#fff}.novo-option.novo-fill-error:not(.novo-option-inert):focus,.novo-option.novo-fill-error:not(.novo-option-inert):hover{background:#e16975}.novo-option.novo-fill-error:not(.novo-option-inert):active{background:#ae3642}.novo-option.novo-accent-warning{border-left:4px solid #f6b042}.novo-option.novo-fill-warning:not(.novo-option-inert){background:#f6b042;color:#fff}.novo-option.novo-fill-warning:not(.novo-option-inert):focus,.novo-option.novo-fill-warning:not(.novo-option-inert):hover{background:#f7bf67}.novo-option.novo-fill-warning:not(.novo-option-inert):active{background:#c48c34}.novo-option.novo-accent-empty{border-left:4px solid #cccdcc}.novo-option.novo-fill-empty:not(.novo-option-inert){background:#cccdcc;color:#3d464d}.novo-option.novo-fill-empty:not(.novo-option-inert):focus,.novo-option.novo-fill-empty:not(.novo-option-inert):hover{background:#d6d7d6}.novo-option.novo-fill-empty:not(.novo-option-inert):active{background:#a3a4a3}.novo-option.novo-accent-disabled{border-left:4px solid #bebebe}.novo-option.novo-fill-disabled:not(.novo-option-inert){background:#bebebe;color:#3d464d}.novo-option.novo-fill-disabled:not(.novo-option-inert):focus,.novo-option.novo-fill-disabled:not(.novo-option-inert):hover{background:#cbcbcb}.novo-option.novo-fill-disabled:not(.novo-option-inert):active{background:#989898}.novo-option.novo-accent-background{border-left:4px solid #f7f7f7}.novo-option.novo-fill-background:not(.novo-option-inert){background:#f7f7f7;color:#3d464d}.novo-option.novo-fill-background:not(.novo-option-inert):focus,.novo-option.novo-fill-background:not(.novo-option-inert):hover{background:#f8f8f8}.novo-option.novo-fill-background:not(.novo-option-inert):active{background:#c5c5c5}.novo-option.novo-accent-backgroundDark{border-left:4px solid #e2e2e2}.novo-option.novo-fill-backgroundDark:not(.novo-option-inert){background:#e2e2e2;color:#3d464d}.novo-option.novo-fill-backgroundDark:not(.novo-option-inert):focus,.novo-option.novo-fill-backgroundDark:not(.novo-option-inert):hover{background:#e7e7e7}.novo-option.novo-fill-backgroundDark:not(.novo-option-inert):active{background:#b4b4b4}.novo-option.novo-accent-presentation{border-left:4px solid #5b6770}.novo-option.novo-fill-presentation:not(.novo-option-inert){background:#5b6770;color:#fff}.novo-option.novo-fill-presentation:not(.novo-option-inert):focus,.novo-option.novo-fill-presentation:not(.novo-option-inert):hover{background:#7b858c}.novo-option.novo-fill-presentation:not(.novo-option-inert):active{background:#485259}.novo-option.novo-accent-bullhorn{border-left:4px solid #ff6900}.novo-option.novo-fill-bullhorn:not(.novo-option-inert){background:#ff6900;color:#3d464d}.novo-option.novo-fill-bullhorn:not(.novo-option-inert):focus,.novo-option.novo-fill-bullhorn:not(.novo-option-inert):hover{background:#ff8733}.novo-option.novo-fill-bullhorn:not(.novo-option-inert):active{background:#cc5400}.novo-option.novo-accent-pulse{border-left:4px solid #3bafda}.novo-option.novo-fill-pulse:not(.novo-option-inert){background:#3bafda;color:#3d464d}.novo-option.novo-fill-pulse:not(.novo-option-inert):focus,.novo-option.novo-fill-pulse:not(.novo-option-inert):hover{background:#62bfe1}.novo-option.novo-fill-pulse:not(.novo-option-inert):active{background:#2f8cae}.novo-option.novo-accent-company{border-left:4px solid #39d}.novo-option.novo-fill-company:not(.novo-option-inert){background:#39d;color:#fff}.novo-option.novo-fill-company:not(.novo-option-inert):focus,.novo-option.novo-fill-company:not(.novo-option-inert):hover{background:#5bade3}.novo-option.novo-fill-company:not(.novo-option-inert):active{background:#287ab0}.novo-option.novo-accent-candidate{border-left:4px solid #4b7}.novo-option.novo-fill-candidate:not(.novo-option-inert){background:#4b7;color:#fff}.novo-option.novo-fill-candidate:not(.novo-option-inert):focus,.novo-option.novo-fill-candidate:not(.novo-option-inert):hover{background:#69c892}.novo-option.novo-fill-candidate:not(.novo-option-inert):active{background:#36955f}.novo-option.novo-accent-lead{border-left:4px solid #a69}.novo-option.novo-fill-lead:not(.novo-option-inert){background:#a69;color:#fff}.novo-option.novo-fill-lead:not(.novo-option-inert):focus,.novo-option.novo-fill-lead:not(.novo-option-inert):hover{background:#bb84ad}.novo-option.novo-fill-lead:not(.novo-option-inert):active{background:#88517a}.novo-option.novo-accent-contact{border-left:4px solid #fa4}.novo-option.novo-fill-contact:not(.novo-option-inert){background:#fa4;color:#fff}.novo-option.novo-fill-contact:not(.novo-option-inert):focus,.novo-option.novo-fill-contact:not(.novo-option-inert):hover{background:#ffbb69}.novo-option.novo-fill-contact:not(.novo-option-inert):active{background:#cc8836}.novo-option.novo-accent-clientcontact{border-left:4px solid #fa4}.novo-option.novo-fill-clientcontact:not(.novo-option-inert){background:#fa4;color:#fff}.novo-option.novo-fill-clientcontact:not(.novo-option-inert):focus,.novo-option.novo-fill-clientcontact:not(.novo-option-inert):hover{background:#ffbb69}.novo-option.novo-fill-clientcontact:not(.novo-option-inert):active{background:#cc8836}.novo-option.novo-accent-opportunity{border-left:4px solid #625}.novo-option.novo-fill-opportunity:not(.novo-option-inert){background:#625;color:#fff}.novo-option.novo-fill-opportunity:not(.novo-option-inert):focus,.novo-option.novo-fill-opportunity:not(.novo-option-inert):hover{background:#844e77}.novo-option.novo-fill-opportunity:not(.novo-option-inert):active{background:#511b44}.novo-option.novo-accent-job{border-left:4px solid #b56}.novo-option.novo-fill-job:not(.novo-option-inert){background:#b56;color:#fff}.novo-option.novo-fill-job:not(.novo-option-inert):focus,.novo-option.novo-fill-job:not(.novo-option-inert):hover{background:#c87784}.novo-option.novo-fill-job:not(.novo-option-inert):active{background:#954451}.novo-option.novo-accent-joborder{border-left:4px solid #b56}.novo-option.novo-fill-joborder:not(.novo-option-inert){background:#b56;color:#fff}.novo-option.novo-fill-joborder:not(.novo-option-inert):focus,.novo-option.novo-fill-joborder:not(.novo-option-inert):hover{background:#c87784}.novo-option.novo-fill-joborder:not(.novo-option-inert):active{background:#954451}.novo-option.novo-accent-submission{border-left:4px solid #a9adbb}.novo-option.novo-fill-submission:not(.novo-option-inert){background:#a9adbb;color:#3d464d}.novo-option.novo-fill-submission:not(.novo-option-inert):focus,.novo-option.novo-fill-submission:not(.novo-option-inert):hover{background:#babdc8}.novo-option.novo-fill-submission:not(.novo-option-inert):active{background:#878a95}.novo-option.novo-accent-sendout{border-left:4px solid #747884}.novo-option.novo-fill-sendout:not(.novo-option-inert){background:#747884;color:#fff}.novo-option.novo-fill-sendout:not(.novo-option-inert):focus,.novo-option.novo-fill-sendout:not(.novo-option-inert):hover{background:#8f939c}.novo-option.novo-fill-sendout:not(.novo-option-inert):active{background:#5c6069}.novo-option.novo-accent-placement{border-left:4px solid #0b344f}.novo-option.novo-fill-placement:not(.novo-option-inert){background:#0b344f;color:#fff}.novo-option.novo-fill-placement:not(.novo-option-inert):focus,.novo-option.novo-fill-placement:not(.novo-option-inert):hover{background:#3b5c72}.novo-option.novo-fill-placement:not(.novo-option-inert):active{background:#08293f}.novo-option.novo-accent-note{border-left:4px solid #747884}.novo-option.novo-fill-note:not(.novo-option-inert){background:#747884;color:#fff}.novo-option.novo-fill-note:not(.novo-option-inert):focus,.novo-option.novo-fill-note:not(.novo-option-inert):hover{background:#8f939c}.novo-option.novo-fill-note:not(.novo-option-inert):active{background:#5c6069}.novo-option.novo-accent-contract{border-left:4px solid #454ea0}.novo-option.novo-fill-contract:not(.novo-option-inert){background:#454ea0;color:#fff}.novo-option.novo-fill-contract:not(.novo-option-inert):focus,.novo-option.novo-fill-contract:not(.novo-option-inert):hover{background:#6a71b3}.novo-option.novo-fill-contract:not(.novo-option-inert):active{background:#373e80}.novo-option.novo-accent-jobCode{border-left:4px solid #696d79}.novo-option.novo-fill-jobCode:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-jobCode:not(.novo-option-inert):focus,.novo-option.novo-fill-jobCode:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-jobCode:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-earnCode{border-left:4px solid #696d79}.novo-option.novo-fill-earnCode:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-earnCode:not(.novo-option-inert):focus,.novo-option.novo-fill-earnCode:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-earnCode:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-invoiceStatement{border-left:4px solid #696d79}.novo-option.novo-fill-invoiceStatement:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-invoiceStatement:not(.novo-option-inert):focus,.novo-option.novo-fill-invoiceStatement:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-invoiceStatement:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-billableCharge{border-left:4px solid #696d79}.novo-option.novo-fill-billableCharge:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-billableCharge:not(.novo-option-inert):focus,.novo-option.novo-fill-billableCharge:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-billableCharge:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-payableCharge{border-left:4px solid #696d79}.novo-option.novo-fill-payableCharge:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-payableCharge:not(.novo-option-inert):focus,.novo-option.novo-fill-payableCharge:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-payableCharge:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-user{border-left:4px solid #696d79}.novo-option.novo-fill-user:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-user:not(.novo-option-inert):focus,.novo-option.novo-fill-user:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-user:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-corporateUser{border-left:4px solid #696d79}.novo-option.novo-fill-corporateUser:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-corporateUser:not(.novo-option-inert):focus,.novo-option.novo-fill-corporateUser:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-corporateUser:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-distributionList{border-left:4px solid #696d79}.novo-option.novo-fill-distributionList:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-distributionList:not(.novo-option-inert):focus,.novo-option.novo-fill-distributionList:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-distributionList:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-credential{border-left:4px solid #696d79}.novo-option.novo-fill-credential:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-credential:not(.novo-option-inert):focus,.novo-option.novo-fill-credential:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-credential:not(.novo-option-inert):active{background:#545760}.novo-option.novo-accent-person{border-left:4px solid #696d79}.novo-option.novo-fill-person:not(.novo-option-inert){background:#696d79;color:#fff}.novo-option.novo-fill-person:not(.novo-option-inert):focus,.novo-option.novo-fill-person:not(.novo-option-inert):hover{background:#878a93}.novo-option.novo-fill-person:not(.novo-option-inert):active{background:#545760}.novo-option-text{align-items:center;display:inline-block;display:inline-flex;flex-direction:row;flex-grow:1;gap:1rem;overflow:hidden;text-overflow:ellipsis}.novo-option-pseudo-checkbox{margin-right:.25rem}[dir=rtl] .novo-option-pseudo-checkbox{margin-left:.25rem;margin-right:0}"]
@@ -35471,7 +35471,7 @@
     NovoDataTableCellHeader.decorators = [
         { type: i0.Component, args: [{
                     selector: '[novo-data-table-cell-config]',
-                    template: "\n    <i class=\"bhi-{{ labelIcon }} label-icon\" *ngIf=\"labelIcon\" data-automation-id=\"novo-data-table-header-icon\"></i>\n    <label data-automation-id=\"novo-data-table-label\">{{ label }}</label>\n    <div>\n      <novo-sort-button\n        *ngIf=\"config.sortable\"\n        data-automation-id=\"novo-data-table-sort\"\n        tooltipPosition=\"left\"\n        [tooltip]=\"labels.sort\"\n        [attr.data-feature-id]=\"'novo-data-table-sort-' + this.id\"\n        (sortChange)=\"sort()\"\n        [value]=\"sortValue\"\n      ></novo-sort-button>\n      <novo-dropdown\n        *ngIf=\"config.filterable\"\n        side=\"right\"\n        parentScrollSelector=\".novo-data-table-container\"\n        containerClass=\"data-table-dropdown\"\n        data-automation-id=\"novo-data-table-filter\"\n        [multiple]=\"multiSelect\"\n      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'left'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\n        <div class=\"header\">\n          <novo-label>{{ labels.filters }}</novo-label>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"negative\"\n            size=\"small\"\n            icon=\"times\"\n            (click)=\"clearFilter()\"\n            *ngIf=\"filter !== null && filter !== undefined && filter !== ''\"\n            data-automation-id=\"novo-data-table-filter-clear\"\n          >\n            {{ labels.clear }}\n          </novo-button>\n        </div>\n        <div class=\"optgroup-container\">\n          <ng-container [ngSwitch]=\"config.filterConfig.type\">\n            <novo-optgroup *ngSwitchCase=\"'date'\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n              <ng-container *ngIf=\"!showCustomRange\">\n                <novo-option\n                  [class.active]=\"activeDateFilter === option.label\"\n                  *ngFor=\"let option of config.filterConfig.options\"\n                  (click)=\"filterData(option)\"\n                  [attr.data-automation-id]=\"'novo-data-table-filter-' + option.label\"\n                >\n                  <span>{{ option.label }}</span>\n                  <novo-icon novoSuffix color=\"positive\" *ngIf=\"activeDateFilter === option.label\">check</novo-icon>\n                </novo-option>\n              </ng-container>\n              <novo-option\n                [class.active]=\"labels.customDateRange === activeDateFilter\"\n                (click)=\"toggleCustomRange($event, true)\"\n                *ngIf=\"config.filterConfig.allowCustomRange && !showCustomRange\"\n              >\n                <span>{{ labels.customDateRange }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"labels.customDateRange === activeDateFilter\">check</novo-icon>\n              </novo-option>\n              <novo-option class=\"calendar-container\" *ngIf=\"showCustomRange\" keepOpen>\n                <novo-stack>\n                  <div class=\"back-link\" (click)=\"toggleCustomRange($event, false)\">\n                    <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                  </div>\n                  <novo-date-picker\n                    (onSelect)=\"filterData($event)\"\n                    [(ngModel)]=\"filter\"\n                    range=\"true\"\n                    (keydown.escape)=\"handleEscapeKeydown($event)\"\n                  ></novo-date-picker>\n                </novo-stack>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup *ngSwitchCase=\"'select'\">\n              <novo-option\n                [class.active]=\"filter === option\"\n                *ngFor=\"let option of config.filterConfig.options\"\n                (click)=\"filterData(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n              >\n                <span>{{ option?.label || option }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"\n                  >check</novo-icon\n                >\n              </novo-option>\n            </novo-optgroup>\n            <ng-container *ngSwitchCase=\"'multi-select'\">\n              <novo-optgroup class=\"dropdown-list-filter\" (keydown)=\"multiSelectOptionFilterHandleKeydown($event)\">\n                <novo-option class=\"filter-search\" inert>\n                  <novo-field flex>\n                    <input\n                      novoInput\n                      [(ngModel)]=\"optionFilter\"\n                      (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                      #optionFilterInput\n                      data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                    />\n                    <novo-icon novoSuffix>search</novo-icon>\n                    <novo-error class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{\n                      labels.selectFilterOptions\n                    }}</novo-error>\n                  </novo-field>\n                </novo-option>\n              </novo-optgroup>\n              <novo-optgroup class=\"dropdown-list-options\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n                <novo-option\n                  *ngFor=\"let option of config.filterConfig.options\"\n                  [hidden]=\"multiSelectOptionIsHidden(option)\"\n                  (click)=\"toggleSelection(option)\"\n                  [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n                >\n                  <span>{{ option?.label || option }}</span>\n                  <novo-icon novoSuffix color=\"positive\">{{\n                    isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'\n                  }}</novo-icon>\n                </novo-option>\n              </novo-optgroup>\n              <novo-option class=\"filter-null-results\" [hidden]=\"multiSelectHasVisibleOptions()\">{{ labels.pickerEmpty }}</novo-option>\n            </ng-container>\n            <novo-optgroup *ngSwitchCase=\"'custom'\">\n              <novo-option class=\"filter-search\" inert>\n                <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup *ngSwitchDefault (keydown.escape)=\"handleEscapeKeydown($event)\">\n              <novo-option class=\"filter-search\" inert>\n                <novo-field flex fullWidth>\n                  <input\n                    novoInput\n                    [type]=\"config.filterConfig.type\"\n                    [(ngModel)]=\"filter\"\n                    (ngModelChange)=\"filterData($event)\"\n                    #filterInput\n                    data-automation-id=\"novo-data-table-filter-input\"\n                    (keydown.escape)=\"handleEscapeKeydown($event)\"\n                  />\n                  <novo-icon novoSuffix>search</novo-icon>\n                </novo-field>\n              </novo-option>\n            </novo-optgroup>\n          </ng-container>\n        </div>\n        <div class=\"footer\" *ngIf=\"multiSelect\">\n          <novo-button theme=\"dialogue\" color=\"dark\" (click)=\"cancel()\" data-automation-id=\"novo-data-table-multi-select-cancel\">\n            {{ labels.cancel }}\n          </novo-button>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"positive\"\n            (click)=\"filterMultiSelect()\"\n            data-automation-id=\"novo-data-table-multi-select-filter\"\n          >\n            {{ labels.filters }}\n          </novo-button>\n        </div>\n      </novo-dropdown>\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"data-table-header-resizable\" *ngIf=\"config.resizable\"><span (mousedown)=\"startResize($event)\">&nbsp;</span></div>\n  ",
+                    template: "\n    <i class=\"bhi-{{ labelIcon }} label-icon\" *ngIf=\"labelIcon\" data-automation-id=\"novo-data-table-header-icon\"></i>\n    <label data-automation-id=\"novo-data-table-label\">{{ label }}</label>\n    <div>\n      <novo-sort-button\n        *ngIf=\"config.sortable\"\n        data-automation-id=\"novo-data-table-sort\"\n        tooltipPosition=\"left\"\n        [tooltip]=\"labels.sort\"\n        [attr.data-feature-id]=\"'novo-data-table-sort-' + this.id\"\n        (sortChange)=\"sort()\"\n        [value]=\"sortValue\"\n      ></novo-sort-button>\n      <novo-dropdown\n        *ngIf=\"config.filterable\"\n        side=\"right\"\n        parentScrollSelector=\".novo-data-table-container\"\n        containerClass=\"data-table-dropdown\"\n        data-automation-id=\"novo-data-table-filter\"\n        [multiple]=\"multiSelect\"\n      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'left'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\n        <div class=\"header\">\n          <novo-label>{{ labels.filters }}</novo-label>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"negative\"\n            size=\"small\"\n            icon=\"times\"\n            (click)=\"clearFilter()\"\n            *ngIf=\"filter !== null && filter !== undefined && filter !== ''\"\n            data-automation-id=\"novo-data-table-filter-clear\"\n          >\n            {{ labels.clear }}\n          </novo-button>\n        </div>\n        <div class=\"optgroup-container\">\n          <ng-container [ngSwitch]=\"config.filterConfig.type\">\n            <novo-optgroup *ngSwitchCase=\"'date'\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n              <ng-container *ngIf=\"!showCustomRange\">\n                <novo-option\n                  [class.active]=\"activeDateFilter === option.label\"\n                  *ngFor=\"let option of config.filterConfig.options\"\n                  (click)=\"filterData(option)\"\n                  [attr.data-automation-id]=\"'novo-data-table-filter-' + option.label\"\n                >\n                  <span>{{ option.label }}</span>\n                  <novo-icon novoSuffix color=\"positive\" *ngIf=\"activeDateFilter === option.label\">check</novo-icon>\n                </novo-option>\n              </ng-container>\n              <novo-option\n                [class.active]=\"labels.customDateRange === activeDateFilter\"\n                (click)=\"toggleCustomRange($event, true)\"\n                *ngIf=\"config.filterConfig.allowCustomRange && !showCustomRange\"\n              >\n                <span>{{ labels.customDateRange }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"labels.customDateRange === activeDateFilter\">check</novo-icon>\n              </novo-option>\n              <novo-option class=\"calendar-container\" *ngIf=\"showCustomRange\" keepOpen>\n                <novo-stack>\n                  <div class=\"back-link\" (click)=\"toggleCustomRange($event, false)\">\n                    <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                  </div>\n                  <novo-date-picker\n                    (onSelect)=\"filterData($event)\"\n                    [(ngModel)]=\"filter\"\n                    range=\"true\"\n                    (keydown.escape)=\"handleEscapeKeydown($event)\"\n                  ></novo-date-picker>\n                </novo-stack>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup *ngSwitchCase=\"'select'\">\n              <novo-option\n                [class.active]=\"filter === option\"\n                *ngFor=\"let option of config.filterConfig.options\"\n                (click)=\"filterData(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n              >\n                <span>{{ option?.label || option }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"\n                  >check</novo-icon\n                >\n              </novo-option>\n            </novo-optgroup>\n            <ng-container *ngSwitchCase=\"'multi-select'\">\n              <novo-optgroup class=\"dropdown-list-filter\" (keydown)=\"multiSelectOptionFilterHandleKeydown($event)\">\n                <novo-option class=\"filter-search\" novoInert>\n                  <novo-field flex>\n                    <input\n                      novoInput\n                      [(ngModel)]=\"optionFilter\"\n                      (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                      #optionFilterInput\n                      data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                      (keydown.enter)=\"multiSelectOptionFilterHandleKeydown($event)\"\n                    />\n                    <novo-icon novoSuffix>search</novo-icon>\n                    <novo-error class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{\n                      labels.selectFilterOptions\n                    }}</novo-error>\n                  </novo-field>\n                </novo-option>\n              </novo-optgroup>\n              <novo-optgroup class=\"dropdown-list-options\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n                <novo-option\n                  *ngFor=\"let option of config.filterConfig.options\"\n                  [hidden]=\"multiSelectOptionIsHidden(option)\"\n                  (click)=\"toggleSelection(option)\"\n                  [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n                >\n                  <span>{{ option?.label || option }}</span>\n                  <novo-icon novoSuffix color=\"positive\">{{\n                    isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'\n                  }}</novo-icon>\n                </novo-option>\n              </novo-optgroup>\n              <novo-option class=\"filter-null-results\" [hidden]=\"multiSelectHasVisibleOptions()\">{{ labels.pickerEmpty }}</novo-option>\n            </ng-container>\n            <novo-optgroup *ngSwitchCase=\"'custom'\">\n              <novo-option class=\"filter-search\" novoInert>\n                <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup *ngSwitchDefault (keydown.escape)=\"handleEscapeKeydown($event)\">\n              <novo-option class=\"filter-search\" novoInert>\n                <novo-field flex fullWidth>\n                  <input\n                    novoInput\n                    [type]=\"config.filterConfig.type\"\n                    [(ngModel)]=\"filter\"\n                    (ngModelChange)=\"filterData($event)\"\n                    #filterInput\n                    data-automation-id=\"novo-data-table-filter-input\"\n                    (keydown.escape)=\"handleEscapeKeydown($event)\"\n                  />\n                  <novo-icon novoSuffix>search</novo-icon>\n                </novo-field>\n              </novo-option>\n            </novo-optgroup>\n          </ng-container>\n        </div>\n        <div class=\"footer\" *ngIf=\"multiSelect\">\n          <novo-button theme=\"dialogue\" color=\"dark\" (click)=\"cancel()\" data-automation-id=\"novo-data-table-multi-select-cancel\">\n            {{ labels.cancel }}\n          </novo-button>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"positive\"\n            (click)=\"filterMultiSelect()\"\n            data-automation-id=\"novo-data-table-multi-select-filter\"\n          >\n            {{ labels.filters }}\n          </novo-button>\n        </div>\n      </novo-dropdown>\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"data-table-header-resizable\" *ngIf=\"config.resizable\"><span (mousedown)=\"startResize($event)\">&nbsp;</span></div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -52083,7 +52083,7 @@
     NovoTabbedGroupPickerElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-tabbed-group-picker',
-                    template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple>\n  <novo-button\n    class=\"tabbed-group-picker-button\"\n    [theme]=\"buttonConfig.theme\"\n    [side]=\"buttonConfig.side\"\n    [icon]=\"buttonConfig.icon\"\n    [loading]=\"loading\">\n    <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n  </novo-button>\n  <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\">\n    <input type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n    <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n    <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\"></i>\n  </div>\n  <div class=\"tabbed-group-picker-column-container\">\n    <div class=\"tabbed-group-picker-column left\">\n      <novo-nav theme=\"white\" direction=\"vertical\">\n        <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n          (activeChange)=\"changeTab(tab)\">\n          <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n        </novo-tab>\n      </novo-nav>\n      <novo-button *ngIf=\"showClearAll\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n        color=\"grapefruit\" (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n    </div>\n    <div class=\"tabbed-group-picker-column right\">\n      <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n        <!-- <div class=\"quick-select-label\">{{ quickSelectConfig.label }}</div> -->\n        <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n          <novo-option\n            class=\"quick-select-item\"\n            *ngFor=\"let quickSelect of quickSelectConfig.items\"\n            [attr.data-automation-id]=\"quickSelect.label\"\n            [selected]=\"quickSelect.selected\"\n            (click)=\"quickSelect.selected = !quickSelect.selected; onItemToggled(quickSelect)\"\n            inert>\n            {{quickSelect.label}}\n            <!-- <novo-checkbox\n              [label]=\"quickSelect.label\"\n              [name]=\"'selected'\"\n              [(ngModel)]=\"quickSelect.selected\"\n              (ngModelChange)=\"onItemToggled(quickSelect)\"></novo-checkbox> -->\n          </novo-option>\n        </novo-optgroup>\n      </div>\n      <novo-optgroup *ngIf=\"displayTab.data.length\">\n        <cdk-virtual-scroll-viewport\n          [itemSize]=\"virtualScrollItemSize\"\n          [maxBufferPx]=\"maxBufferPx\"\n          [minBufferPx]=\"minBufferPx\"\n          #tabbedGroupPickerVirtualScrollViewport>\n          <novo-option\n            *cdkVirtualFor=\"let item of displayTab.data\"\n            [attr.data-automation-id]=\"item[displayTab.labelField]\"\n            [selected]=\"item.selected\"\n            (click)=\"item.selected = !item.selected; onItemToggled(item)\"\n            inert>\n            {{item[displayTab.labelField]}}\n\n            <!-- <novo-checkbox\n              [label]=\"item[displayTab.labelField]\"\n              [name]=\"'selected'\"\n              [indeterminate]=\"item.indeterminate\"\n              [(ngModel)]=\"item.selected\"\n              (ngModelChange)=\"onItemToggled(item)\">\n            </novo-checkbox> -->\n          </novo-option>\n        </cdk-virtual-scroll-viewport>\n      </novo-optgroup>\n      <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n        <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n        <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n        <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</novo-dropdown>",
+                    template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple>\n  <novo-button\n    class=\"tabbed-group-picker-button\"\n    [theme]=\"buttonConfig.theme\"\n    [side]=\"buttonConfig.side\"\n    [icon]=\"buttonConfig.icon\"\n    [loading]=\"loading\">\n    <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n  </novo-button>\n  <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\">\n    <input type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n    <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n    <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\"></i>\n  </div>\n  <div class=\"tabbed-group-picker-column-container\">\n    <div class=\"tabbed-group-picker-column left\">\n      <novo-nav theme=\"white\" direction=\"vertical\">\n        <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n          (activeChange)=\"changeTab(tab)\">\n          <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n        </novo-tab>\n      </novo-nav>\n      <novo-button *ngIf=\"showClearAll\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n        color=\"grapefruit\" (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n    </div>\n    <div class=\"tabbed-group-picker-column right\">\n      <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n        <!-- <div class=\"quick-select-label\">{{ quickSelectConfig.label }}</div> -->\n        <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n          <novo-option\n            class=\"quick-select-item\"\n            *ngFor=\"let quickSelect of quickSelectConfig.items\"\n            [attr.data-automation-id]=\"quickSelect.label\"\n            [selected]=\"quickSelect.selected\"\n            (click)=\"quickSelect.selected = !quickSelect.selected; onItemToggled(quickSelect)\"\n            novoInert>\n            {{quickSelect.label}}\n            <!-- <novo-checkbox\n              [label]=\"quickSelect.label\"\n              [name]=\"'selected'\"\n              [(ngModel)]=\"quickSelect.selected\"\n              (ngModelChange)=\"onItemToggled(quickSelect)\"></novo-checkbox> -->\n          </novo-option>\n        </novo-optgroup>\n      </div>\n      <novo-optgroup *ngIf=\"displayTab.data.length\">\n        <cdk-virtual-scroll-viewport\n          [itemSize]=\"virtualScrollItemSize\"\n          [maxBufferPx]=\"maxBufferPx\"\n          [minBufferPx]=\"minBufferPx\"\n          #tabbedGroupPickerVirtualScrollViewport>\n          <novo-option\n            *cdkVirtualFor=\"let item of displayTab.data\"\n            [attr.data-automation-id]=\"item[displayTab.labelField]\"\n            [selected]=\"item.selected\"\n            (click)=\"item.selected = !item.selected; onItemToggled(item)\"\n            novoInert>\n            {{item[displayTab.labelField]}}\n\n            <!-- <novo-checkbox\n              [label]=\"item[displayTab.labelField]\"\n              [name]=\"'selected'\"\n              [indeterminate]=\"item.indeterminate\"\n              [(ngModel)]=\"item.selected\"\n              (ngModelChange)=\"onItemToggled(item)\">\n            </novo-checkbox> -->\n          </novo-option>\n        </cdk-virtual-scroll-viewport>\n      </novo-optgroup>\n      <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n        <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n        <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n        <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</novo-dropdown>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }]
                 },] }
@@ -53574,7 +53574,7 @@
                         '[class.novo-table-loading]': 'loading',
                     },
                     // directives: [],
-                    template: "\n    <header *ngIf=\"columns.length\">\n      <ng-content select=\"novo-table-header\"></ng-content>\n      <div class=\"header-actions\">\n        <novo-pagination\n          *ngIf=\"config.paging && !(dataProvider.isEmpty() && !dataProvider.isFiltered())\"\n          [rowOptions]=\"config.paging.rowOptions\"\n          [disablePageSelection]=\"config.paging.disablePageSelection\"\n          [(page)]=\"dataProvider.page\"\n          [(itemsPerPage)]=\"dataProvider.pageSize\"\n          [totalItems]=\"dataProvider.total\"\n          (onPageChange)=\"onPageChange($event)\"\n        >\n        </novo-pagination>\n        <ng-content select=\"novo-table-actions\"></ng-content>\n      </div>\n    </header>\n    <div class=\"novo-table-loading-overlay\" *ngIf=\"loading || dataProvider.isLoading()\">\n      <novo-loading></novo-loading>\n    </div>\n    <novo-toast *ngIf=\"toast\" [theme]=\"toast?.theme\" [icon]=\"toast?.icon\" [message]=\"toast?.message\"></novo-toast>\n    <div class=\"table-container\" *ngIf=\"!grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast\">\n      <novo-form hideHeader=\"true\" [form]=\"tableForm\">\n        <table class=\"table table-striped dataTable\" [class.table-details]=\"config.hasDetails\" role=\"grid\">\n          <!-- skipSortAndFilterClear is a hack right now, will be removed once Canvas is refactored -->\n          <thead *ngIf=\"columns.length && (!dataProvider.isEmpty() || dataProvider.isFiltered() || skipSortAndFilterClear || editing)\">\n            <tr role=\"row\">\n              <!-- DETAILS -->\n              <th class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"next\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"!config.expandAll\"\n                  data-automation-id=\"expand-all\"\n                ></novo-button>\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"sort-desc\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"config.expandAll\"\n                  data-automation-id=\"collapse-all\"\n                ></novo-button>\n              </th>\n              <!-- CHECKBOX -->\n              <th class=\"row-actions checkbox mass-action\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                <novo-checkbox\n                  [(ngModel)]=\"master\"\n                  [indeterminate]=\"pageSelected.length > 0 && pageSelected.length < pagedData.length\"\n                  (ngModelChange)=\"selectPage($event)\"\n                  data-automation-id=\"select-all-checkbox\"\n                  [tooltip]=\"master ? labels.deselectAll : labels.selectAllOnPage\"\n                  tooltipPosition=\"right\"\n                ></novo-checkbox>\n              </th>\n              <!-- TABLE HEADERS -->\n              <th\n                *ngFor=\"let column of columns\"\n                [ngClass]=\"{\n                  'mass-action': config?.rowSelectionStyle === 'checkbox',\n                  actions: column?.actions?.items?.length > 0,\n                  preview: column?.name === 'preview'\n                }\"\n                [novoThOrderable]=\"column\"\n                (onOrderChange)=\"onOrderChange($event)\"\n                [hidden]=\"isColumnHidden(column)\"\n              >\n                <div class=\"th-group\" [attr.data-automation-id]=\"column.id || column.name\" *ngIf=\"!column.hideHeader\">\n                  <!-- LABEL & SORT ARROWS -->\n                  <div\n                    class=\"th-title\"\n                    [ngClass]=\"config.sorting !== false && column.sorting !== false ? 'sortable' : ''\"\n                    [novoThSortable]=\"config\"\n                    [column]=\"column\"\n                    (onSortChange)=\"onSortChange($event)\"\n                  >\n                    <label>{{ column.title || column.label }}</label>\n                    <div\n                      class=\"table-sort-icons\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.sort\"\n                      [ngClass]=\"column.sort || ''\"\n                      *ngIf=\"config.sorting !== false && column.sorting !== false\"\n                    >\n                      <i class=\"bhi-arrow-up\"></i>\n                      <i class=\"bhi-arrow-down\"></i>\n                    </div>\n                  </div>\n                  <!-- FILTER DROP-DOWN -->\n                  <novo-dropdown\n                    side=\"default\"\n                    *ngIf=\"config.filtering !== false && column.filtering !== false\"\n                    class=\"column-filters\"\n                    (toggled)=\"onDropdownToggled($event, column.name)\"\n                    parentScrollSelector=\".table-container\"\n                    containerClass=\"table-dropdown\"\n                  >\n                    <novo-button\n                      type=\"button\"\n                      theme=\"icon\"\n                      icon=\"filter\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.filters\"\n                      [class.filtered]=\"column.filter || column.filter === false\"\n                      (click)=\"focusInput()\"\n                    ></novo-button>\n                    <!-- FILTER OPTIONS LIST -->\n                    <novo-optgroup\n                      *ngIf=\"\n                        (column?.options?.length || column?.originalOptions?.length) &&\n                        column?.type !== 'date' &&\n                        toggledDropdownMap[column.name]\n                      \"\n                    >\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button\n                            theme=\"dialogue\"\n                            color=\"negative\"\n                            icon=\"times\"\n                            (click)=\"onFilterClear(column)\"\n                            *ngIf=\"column.filter || column.filter === false\"\n                          >\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          *ngIf=\"!!column.allowCustomTextOption\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterKeywords($event)\"\n                          [(ngModel)]=\"column.freetextFilter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                      <novo-option\n                        [ngClass]=\"{ active: isFilterActive(column, option) }\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [attr.data-automation-id]=\"getOptionDataAutomationId(option)\"\n                      >\n                        <span>{{ option?.label || option }}</span> <i class=\"bhi-check\" *ngIf=\"isFilterActive(column, option)\"></i>\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER SEARCH INPUT -->\n                    <novo-optgroup *ngIf=\"!(column?.options?.length || column?.originalOptions?.length) && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterChange($event)\"\n                          [(ngModel)]=\"column.filter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER DATE OPTIONS -->\n                    <novo-optgroup *ngIf=\"column?.options?.length && column?.type === 'date' && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" *ngIf=\"!column.calenderShow\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                      </novo-option>\n                      <novo-option\n                        [class.active]=\"isFilterActive(column, option)\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [keepOpen]=\"option.range\"\n                        [hidden]=\"column.calenderShow\"\n                        [attr.data-automation-id]=\"option?.label || option\"\n                      >\n                        {{ option?.label || option }}\n                        <novo-icon novoSuffix color=\"positive\" *ngIf=\"isFilterActive(column, option)\">check</novo-icon>\n                      </novo-option>\n                      <novo-option class=\"calendar-container\" *ngIf=\"column.calenderShow\" keepOpen inert>\n                        <novo-stack>\n                          <div class=\"back-link\" (click)=\"column.calenderShow = false\">\n                            <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                          </div>\n                          <novo-date-picker\n                            (onSelect)=\"onCalenderSelect(column, $event)\"\n                            [(ngModel)]=\"column.filter\"\n                            mode=\"range\"\n                          ></novo-date-picker>\n                        </novo-stack>\n                      </novo-option>\n                    </novo-optgroup>\n                  </novo-dropdown>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <!-- TABLE DATA -->\n          <tbody *ngIf=\"!dataProvider.isEmpty() || editing\">\n            <tr\n              class=\"table-selection-row\"\n              *ngIf=\"config.rowSelectionStyle === 'checkbox' && showSelectAllMessage && config.selectAllEnabled\"\n              data-automation-id=\"table-selection-row\"\n            >\n              <td colspan=\"100%\">\n                {{ labels.selectedRecords(selected.length) }}\n                <a (click)=\"selectAll(true)\" data-automation-id=\"all-matching-records\">{{ labels.totalRecords(dataProvider.total) }}</a>\n              </td>\n            </tr>\n            <ng-template ngFor let-row=\"$implicit\" let-i=\"index\" [ngForOf]=\"rows\">\n              <tr\n                class=\"table-row\"\n                [ngClass]=\"row.customClass || ''\"\n                [id]=\"name + '-' + row[rowIdentifier]\"\n                [attr.data-automation-id]=\"row.id\"\n                (click)=\"rowClickHandler(row)\"\n                [class.active]=\"row.id === activeId\"\n              >\n                <td class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                  <novo-button theme=\"icon\" icon=\"next\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"!row._expanded\"></novo-button>\n                  <novo-button theme=\"icon\" icon=\"sort-desc\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"row._expanded\"></novo-button>\n                </td>\n                <td class=\"row-actions checkbox\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                  <novo-checkbox\n                    [(ngModel)]=\"row._selected\"\n                    (ngModelChange)=\"rowSelectHandler(row)\"\n                    data-automation-id=\"select-row-checkbox\"\n                  ></novo-checkbox>\n                </td>\n                <td\n                  *ngFor=\"let column of columns\"\n                  [attr.data-automation-id]=\"column.id || column.name\"\n                  [class.novo-form-row]=\"editable\"\n                  [hidden]=\"isColumnHidden(column)\"\n                >\n                  <novo-table-cell\n                    *ngIf=\"row._editing && !row._editing[column.name]\"\n                    [hasEditor]=\"editable\"\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [form]=\"getRowControlForm(i)\"\n                  ></novo-table-cell>\n                  <novo-control\n                    *ngIf=\"row._editing && row._editing[column.name]\"\n                    condensed=\"true\"\n                    [form]=\"getRowControlForm(i)\"\n                    [control]=\"row.controls[column.name]\"\n                  ></novo-control>\n                </td>\n              </tr>\n              <tr\n                class=\"details-row\"\n                *ngIf=\"config.hasDetails\"\n                [hidden]=\"!row._expanded\"\n                [attr.data-automation-id]=\"'details-row-' + row.id\"\n              >\n                <td class=\"row-actions\"></td>\n                <td [attr.colspan]=\"config.rowSelectionStyle === 'checkbox' ? columns.length + 1 : columns.length\">\n                  <novo-row-details [data]=\"row\" [renderer]=\"config.detailsRenderer\"></novo-row-details>\n                </td>\n              </tr>\n            </ng-template>\n          </tbody>\n          <!-- NO TABLE DATA PLACEHOLDER -->\n          <tbody\n            class=\"table-message\"\n            *ngIf=\"dataProvider.isEmpty() && !dataProvider.isFiltered() && !editing\"\n            data-automation-id=\"empty-table\"\n          >\n            <tr>\n              <td colspan=\"100%\">\n                <div #emptymessage><ng-content select=\"[table-empty-message]\"></ng-content></div>\n                <div class=\"table-empty-message\" *ngIf=\"emptymessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- NO MATCHING RECORDS -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.isEmpty() && dataProvider.isFiltered()\" data-automation-id=\"empty-table\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #nomatchmessage><ng-content select=\"[table-no-matching-records-message]\"></ng-content></div>\n                <div class=\"no-matching-records\" *ngIf=\"nomatchmessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- TABLE DATA ERROR PLACEHOLDER -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.hasErrors()\" data-automation-id=\"table-errors\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #errormessage><ng-content select=\"[table-error-message]\"></ng-content></div>\n                <div class=\"table-error-message\" *ngIf=\"errormessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-caution\"></i> {{ labels.erroredTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot *ngIf=\"!config.footers\" [ngClass]=\"dataProvider.length % 2 == 0 ? 'odd' : 'even'\">\n            <tr>\n              <td colspan=\"100%\">\n                <ng-content select=\"novo-table-footer\"></ng-content>\n              </td>\n            </tr>\n          </tfoot>\n          <tfoot *ngFor=\"let footer of footers; let i = index\" class=\"novo-table-total-footer\">\n            <tr>\n              <td *ngFor=\"let column of columns\" [attr.data-automation-id]=\"(column.id || column.name) + '-total-' + i\">\n                {{ footer[column.name] }}\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </novo-form>\n    </div>\n  "
+                    template: "\n    <header *ngIf=\"columns.length\">\n      <ng-content select=\"novo-table-header\"></ng-content>\n      <div class=\"header-actions\">\n        <novo-pagination\n          *ngIf=\"config.paging && !(dataProvider.isEmpty() && !dataProvider.isFiltered())\"\n          [rowOptions]=\"config.paging.rowOptions\"\n          [disablePageSelection]=\"config.paging.disablePageSelection\"\n          [(page)]=\"dataProvider.page\"\n          [(itemsPerPage)]=\"dataProvider.pageSize\"\n          [totalItems]=\"dataProvider.total\"\n          (onPageChange)=\"onPageChange($event)\"\n        >\n        </novo-pagination>\n        <ng-content select=\"novo-table-actions\"></ng-content>\n      </div>\n    </header>\n    <div class=\"novo-table-loading-overlay\" *ngIf=\"loading || dataProvider.isLoading()\">\n      <novo-loading></novo-loading>\n    </div>\n    <novo-toast *ngIf=\"toast\" [theme]=\"toast?.theme\" [icon]=\"toast?.icon\" [message]=\"toast?.message\"></novo-toast>\n    <div class=\"table-container\" *ngIf=\"!grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast\">\n      <novo-form hideHeader=\"true\" [form]=\"tableForm\">\n        <table class=\"table table-striped dataTable\" [class.table-details]=\"config.hasDetails\" role=\"grid\">\n          <!-- skipSortAndFilterClear is a hack right now, will be removed once Canvas is refactored -->\n          <thead *ngIf=\"columns.length && (!dataProvider.isEmpty() || dataProvider.isFiltered() || skipSortAndFilterClear || editing)\">\n            <tr role=\"row\">\n              <!-- DETAILS -->\n              <th class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"next\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"!config.expandAll\"\n                  data-automation-id=\"expand-all\"\n                ></novo-button>\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"sort-desc\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"config.expandAll\"\n                  data-automation-id=\"collapse-all\"\n                ></novo-button>\n              </th>\n              <!-- CHECKBOX -->\n              <th class=\"row-actions checkbox mass-action\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                <novo-checkbox\n                  [(ngModel)]=\"master\"\n                  [indeterminate]=\"pageSelected.length > 0 && pageSelected.length < pagedData.length\"\n                  (ngModelChange)=\"selectPage($event)\"\n                  data-automation-id=\"select-all-checkbox\"\n                  [tooltip]=\"master ? labels.deselectAll : labels.selectAllOnPage\"\n                  tooltipPosition=\"right\"\n                ></novo-checkbox>\n              </th>\n              <!-- TABLE HEADERS -->\n              <th\n                *ngFor=\"let column of columns\"\n                [ngClass]=\"{\n                  'mass-action': config?.rowSelectionStyle === 'checkbox',\n                  actions: column?.actions?.items?.length > 0,\n                  preview: column?.name === 'preview'\n                }\"\n                [novoThOrderable]=\"column\"\n                (onOrderChange)=\"onOrderChange($event)\"\n                [hidden]=\"isColumnHidden(column)\"\n              >\n                <div class=\"th-group\" [attr.data-automation-id]=\"column.id || column.name\" *ngIf=\"!column.hideHeader\">\n                  <!-- LABEL & SORT ARROWS -->\n                  <div\n                    class=\"th-title\"\n                    [ngClass]=\"config.sorting !== false && column.sorting !== false ? 'sortable' : ''\"\n                    [novoThSortable]=\"config\"\n                    [column]=\"column\"\n                    (onSortChange)=\"onSortChange($event)\"\n                  >\n                    <label>{{ column.title || column.label }}</label>\n                    <div\n                      class=\"table-sort-icons\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.sort\"\n                      [ngClass]=\"column.sort || ''\"\n                      *ngIf=\"config.sorting !== false && column.sorting !== false\"\n                    >\n                      <i class=\"bhi-arrow-up\"></i>\n                      <i class=\"bhi-arrow-down\"></i>\n                    </div>\n                  </div>\n                  <!-- FILTER DROP-DOWN -->\n                  <novo-dropdown\n                    side=\"default\"\n                    *ngIf=\"config.filtering !== false && column.filtering !== false\"\n                    class=\"column-filters\"\n                    (toggled)=\"onDropdownToggled($event, column.name)\"\n                    parentScrollSelector=\".table-container\"\n                    containerClass=\"table-dropdown\"\n                  >\n                    <novo-button\n                      type=\"button\"\n                      theme=\"icon\"\n                      icon=\"filter\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.filters\"\n                      [class.filtered]=\"column.filter || column.filter === false\"\n                      (click)=\"focusInput()\"\n                    ></novo-button>\n                    <!-- FILTER OPTIONS LIST -->\n                    <novo-optgroup\n                      *ngIf=\"\n                        (column?.options?.length || column?.originalOptions?.length) &&\n                        column?.type !== 'date' &&\n                        toggledDropdownMap[column.name]\n                      \"\n                    >\n                      <novo-option class=\"filter-search\" novoInert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button\n                            theme=\"dialogue\"\n                            color=\"negative\"\n                            icon=\"times\"\n                            (click)=\"onFilterClear(column)\"\n                            *ngIf=\"column.filter || column.filter === false\"\n                          >\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          *ngIf=\"!!column.allowCustomTextOption\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterKeywords($event)\"\n                          [(ngModel)]=\"column.freetextFilter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                      <novo-option\n                        [ngClass]=\"{ active: isFilterActive(column, option) }\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [attr.data-automation-id]=\"getOptionDataAutomationId(option)\"\n                      >\n                        <span>{{ option?.label || option }}</span> <i class=\"bhi-check\" *ngIf=\"isFilterActive(column, option)\"></i>\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER SEARCH INPUT -->\n                    <novo-optgroup *ngIf=\"!(column?.options?.length || column?.originalOptions?.length) && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" novoInert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterChange($event)\"\n                          [(ngModel)]=\"column.filter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER DATE OPTIONS -->\n                    <novo-optgroup *ngIf=\"column?.options?.length && column?.type === 'date' && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" *ngIf=\"!column.calenderShow\" novoInert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                      </novo-option>\n                      <novo-option\n                        [class.active]=\"isFilterActive(column, option)\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [keepOpen]=\"option.range\"\n                        [hidden]=\"column.calenderShow\"\n                        [attr.data-automation-id]=\"option?.label || option\"\n                      >\n                        {{ option?.label || option }}\n                        <novo-icon novoSuffix color=\"positive\" *ngIf=\"isFilterActive(column, option)\">check</novo-icon>\n                      </novo-option>\n                      <novo-option class=\"calendar-container\" *ngIf=\"column.calenderShow\" keepOpen novoInert>\n                        <novo-stack>\n                          <div class=\"back-link\" (click)=\"column.calenderShow = false\">\n                            <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                          </div>\n                          <novo-date-picker\n                            (onSelect)=\"onCalenderSelect(column, $event)\"\n                            [(ngModel)]=\"column.filter\"\n                            mode=\"range\"\n                          ></novo-date-picker>\n                        </novo-stack>\n                      </novo-option>\n                    </novo-optgroup>\n                  </novo-dropdown>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <!-- TABLE DATA -->\n          <tbody *ngIf=\"!dataProvider.isEmpty() || editing\">\n            <tr\n              class=\"table-selection-row\"\n              *ngIf=\"config.rowSelectionStyle === 'checkbox' && showSelectAllMessage && config.selectAllEnabled\"\n              data-automation-id=\"table-selection-row\"\n            >\n              <td colspan=\"100%\">\n                {{ labels.selectedRecords(selected.length) }}\n                <a (click)=\"selectAll(true)\" data-automation-id=\"all-matching-records\">{{ labels.totalRecords(dataProvider.total) }}</a>\n              </td>\n            </tr>\n            <ng-template ngFor let-row=\"$implicit\" let-i=\"index\" [ngForOf]=\"rows\">\n              <tr\n                class=\"table-row\"\n                [ngClass]=\"row.customClass || ''\"\n                [id]=\"name + '-' + row[rowIdentifier]\"\n                [attr.data-automation-id]=\"row.id\"\n                (click)=\"rowClickHandler(row)\"\n                [class.active]=\"row.id === activeId\"\n              >\n                <td class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                  <novo-button theme=\"icon\" icon=\"next\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"!row._expanded\"></novo-button>\n                  <novo-button theme=\"icon\" icon=\"sort-desc\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"row._expanded\"></novo-button>\n                </td>\n                <td class=\"row-actions checkbox\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                  <novo-checkbox\n                    [(ngModel)]=\"row._selected\"\n                    (ngModelChange)=\"rowSelectHandler(row)\"\n                    data-automation-id=\"select-row-checkbox\"\n                  ></novo-checkbox>\n                </td>\n                <td\n                  *ngFor=\"let column of columns\"\n                  [attr.data-automation-id]=\"column.id || column.name\"\n                  [class.novo-form-row]=\"editable\"\n                  [hidden]=\"isColumnHidden(column)\"\n                >\n                  <novo-table-cell\n                    *ngIf=\"row._editing && !row._editing[column.name]\"\n                    [hasEditor]=\"editable\"\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [form]=\"getRowControlForm(i)\"\n                  ></novo-table-cell>\n                  <novo-control\n                    *ngIf=\"row._editing && row._editing[column.name]\"\n                    condensed=\"true\"\n                    [form]=\"getRowControlForm(i)\"\n                    [control]=\"row.controls[column.name]\"\n                  ></novo-control>\n                </td>\n              </tr>\n              <tr\n                class=\"details-row\"\n                *ngIf=\"config.hasDetails\"\n                [hidden]=\"!row._expanded\"\n                [attr.data-automation-id]=\"'details-row-' + row.id\"\n              >\n                <td class=\"row-actions\"></td>\n                <td [attr.colspan]=\"config.rowSelectionStyle === 'checkbox' ? columns.length + 1 : columns.length\">\n                  <novo-row-details [data]=\"row\" [renderer]=\"config.detailsRenderer\"></novo-row-details>\n                </td>\n              </tr>\n            </ng-template>\n          </tbody>\n          <!-- NO TABLE DATA PLACEHOLDER -->\n          <tbody\n            class=\"table-message\"\n            *ngIf=\"dataProvider.isEmpty() && !dataProvider.isFiltered() && !editing\"\n            data-automation-id=\"empty-table\"\n          >\n            <tr>\n              <td colspan=\"100%\">\n                <div #emptymessage><ng-content select=\"[table-empty-message]\"></ng-content></div>\n                <div class=\"table-empty-message\" *ngIf=\"emptymessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- NO MATCHING RECORDS -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.isEmpty() && dataProvider.isFiltered()\" data-automation-id=\"empty-table\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #nomatchmessage><ng-content select=\"[table-no-matching-records-message]\"></ng-content></div>\n                <div class=\"no-matching-records\" *ngIf=\"nomatchmessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- TABLE DATA ERROR PLACEHOLDER -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.hasErrors()\" data-automation-id=\"table-errors\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #errormessage><ng-content select=\"[table-error-message]\"></ng-content></div>\n                <div class=\"table-error-message\" *ngIf=\"errormessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-caution\"></i> {{ labels.erroredTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot *ngIf=\"!config.footers\" [ngClass]=\"dataProvider.length % 2 == 0 ? 'odd' : 'even'\">\n            <tr>\n              <td colspan=\"100%\">\n                <ng-content select=\"novo-table-footer\"></ng-content>\n              </td>\n            </tr>\n          </tfoot>\n          <tfoot *ngFor=\"let footer of footers; let i = index\" class=\"novo-table-total-footer\">\n            <tr>\n              <td *ngFor=\"let column of columns\" [attr.data-automation-id]=\"(column.id || column.name) + '-total-' + i\">\n                {{ footer[column.name] }}\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </novo-form>\n    </div>\n  "
                 },] }
     ];
     NovoTableElement.ctorParameters = function () { return [