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/fesm2015/novo-elements.js CHANGED Viewed

@@ -25083,13 +25083,13 @@ function mixinDisabled(base) {
 const NOVO_OPTION_PARENT_COMPONENT = new 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
@@ -25127,7 +25127,7 @@ class NovoOptgroup extends NovoOptgroupMixinBase {
     constructor(parent) {
         var _a;
         super();
-        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;
     }
 }
 NovoOptgroup.decorators = [
@@ -25140,9 +25140,9 @@ NovoOptgroup.decorators = [
                 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 }],
@@ -25181,7 +25181,7 @@ class NovoOptionBase {
         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. */
@@ -25293,7 +25293,7 @@ class NovoOptionBase {
         }
     }
     _handlePassiveClick(event) {
-        if (!this.inert) {
+        if (!this.novoInert) {
             this._selectViaInteraction();
         }
     }
@@ -25381,7 +25381,7 @@ NovoOptionBase.ctorParameters = () => [
 ];
 NovoOptionBase.propDecorators = {
     keepOpen: [{ type: Input }],
-    inert: [{ type: Input }],
+    novoInert: [{ type: Input }],
     value: [{ type: Input }],
     id: [{ type: Input }],
     disabled: [{ type: Input }],
@@ -25395,7 +25395,7 @@ __decorate([
 __decorate([
     BooleanInput(),
     __metadata("design:type", Boolean)
-], NovoOptionBase.prototype, "inert", void 0);
+], NovoOptionBase.prototype, "novoInert", void 0);
 /**
  * Single option inside of a `<novo-select>` element.
  */
@@ -25418,12 +25418,12 @@ NovoOption.decorators = [
                     '[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: ViewEncapsulation.None,
                 changeDetection: 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}"]
@@ -35043,7 +35043,7 @@ NovoDataTableCellHeader.decorators = [
             </novo-optgroup>
             <ng-container *ngSwitchCase="'multi-select'">
               <novo-optgroup class="dropdown-list-filter" (keydown)="multiSelectOptionFilterHandleKeydown($event)">
-                <novo-option class="filter-search" inert>
+                <novo-option class="filter-search" novoInert>
                   <novo-field flex>
                     <input
                       novoInput
@@ -35051,6 +35051,7 @@ NovoDataTableCellHeader.decorators = [
                       (ngModelChange)="multiSelectOptionFilter($event)"
                       #optionFilterInput
                       data-automation-id="novo-data-table-multi-select-option-filter-input"
+                      (keydown.enter)="multiSelectOptionFilterHandleKeydown($event)"
                     />
                     <novo-icon novoSuffix>search</novo-icon>
                     <novo-error class="error-text" [hidden]="!error || !multiSelectHasVisibleOptions()">{{
@@ -35075,12 +35076,12 @@ NovoDataTableCellHeader.decorators = [
               <novo-option class="filter-null-results" [hidden]="multiSelectHasVisibleOptions()">{{ labels.pickerEmpty }}</novo-option>
             </ng-container>
             <novo-optgroup *ngSwitchCase="'custom'">
-              <novo-option class="filter-search" inert>
+              <novo-option class="filter-search" novoInert>
                 <ng-container *ngTemplateOutlet="filterTemplate; context: { $implicit: config }"></ng-container>
               </novo-option>
             </novo-optgroup>
             <novo-optgroup *ngSwitchDefault (keydown.escape)="handleEscapeKeydown($event)">
-              <novo-option class="filter-search" inert>
+              <novo-option class="filter-search" novoInert>
                 <novo-field flex fullWidth>
                   <input
                     novoInput
@@ -52481,7 +52482,7 @@ class NovoTabbedGroupPickerElement {
 NovoTabbedGroupPickerElement.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }]
             },] }
@@ -54018,7 +54019,7 @@ NovoTableElement.decorators = [
                         toggledDropdownMap[column.name]
                       "
                     >
-                      <novo-option class="filter-search" inert>
+                      <novo-option class="filter-search" novoInert>
                         <div class="header">
                           <span>{{ labels.filters }}</span>
                           <novo-button
@@ -54053,7 +54054,7 @@ NovoTableElement.decorators = [
                     </novo-optgroup>
                     <!-- FILTER SEARCH INPUT -->
                     <novo-optgroup *ngIf="!(column?.options?.length || column?.originalOptions?.length) && toggledDropdownMap[column.name]">
-                      <novo-option class="filter-search" inert>
+                      <novo-option class="filter-search" novoInert>
                         <div class="header">
                           <span>{{ labels.filters }}</span>
                           <novo-button theme="dialogue" color="negative" icon="times" (click)="onFilterClear(column)" *ngIf="column.filter">
@@ -54073,7 +54074,7 @@ NovoTableElement.decorators = [
                     </novo-optgroup>
                     <!-- FILTER DATE OPTIONS -->
                     <novo-optgroup *ngIf="column?.options?.length && column?.type === 'date' && toggledDropdownMap[column.name]">
-                      <novo-option class="filter-search" *ngIf="!column.calenderShow" inert>
+                      <novo-option class="filter-search" *ngIf="!column.calenderShow" novoInert>
                         <div class="header">
                           <span>{{ labels.filters }}</span>
                           <novo-button theme="dialogue" color="negative" icon="times" (click)="onFilterClear(column)" *ngIf="column.filter">
@@ -54092,7 +54093,7 @@ NovoTableElement.decorators = [
                         {{ option?.label || option }}
                         <novo-icon novoSuffix color="positive" *ngIf="isFilterActive(column, option)">check</novo-icon>
                       </novo-option>
-                      <novo-option class="calendar-container" *ngIf="column.calenderShow" keepOpen inert>
+                      <novo-option class="calendar-container" *ngIf="column.calenderShow" keepOpen novoInert>
                         <novo-stack>
                           <div class="back-link" (click)="column.calenderShow = false">
                             <i class="bhi-previous"></i>{{ labels.backToPresetFilters }}