novo-elements 6.0.0-next.6 → 6.0.0-next.9

package/bundles/novo-elements.umd.js

@@ -20562,6 +20562,16 @@
         return SelectControl;
     }(BaseControl));
 
+    var SwitchControl = /** @class */ (function (_super) {
+        __extends(SwitchControl, _super);
+        function SwitchControl(config) {
+            var _this = _super.call(this, 'SwitchControl', config) || this;
+            _this.controlType = 'switch';
+            return _this;
+        }
+        return SwitchControl;
+    }(BaseControl));
+
     var TextAreaControl = /** @class */ (function (_super) {
         __extends(TextAreaControl, _super);
         function TextAreaControl(config) {
@@ -20733,6 +20743,8 @@
                     return new TextBoxControl(config);
                 case 'SelectControl':
                     return new SelectControl(config);
+                case 'SwitchControl':
+                    return new SwitchControl(config);
                 case 'TilesControl':
                     return new TilesControl(config);
                 case 'TimeControl':
@@ -20913,7 +20925,7 @@
         }
         Object.defineProperty(NovoFormGroup.prototype, "value", {
             get: function () {
-                return this.getRawValue();
+                return this.getRawValue(); // The value property on Angular form groups do not include disabled form control values.  Find way to address this.
             },
             set: function (v) {
                 this._value = v;
@@ -21019,6 +21031,7 @@
             this.noItems = 'There are no items';
             this.dateFormat = 'MM/dd/yyyy';
             this.dateFormatPlaceholder = 'MM/DD/YYYY';
+            this.localDatePlaceholder = 'mm/dd/yyyy';
             this.timeFormatPlaceholderAM = 'hh:mm AM';
             this.timeFormatPlaceholder24Hour = 'HH:mm';
             this.timeFormatAM = 'AM';
@@ -21067,6 +21080,9 @@
         NovoLabelService.prototype.dateFormatString = function () {
             return this.dateFormat;
         };
+        NovoLabelService.prototype.localizedDatePlaceholder = function () {
+            return this.localDatePlaceholder;
+        };
         NovoLabelService.prototype.tabbedGroupClearSuggestion = function (tabLabelPlural) {
             return "Clear your search to see all " + tabLabelPlural + ".";
         };
@@ -22173,6 +22189,9 @@
                     controlConfig.checkboxLabel = field.checkboxLabel;
                     control = new CheckboxControl(controlConfig);
                     break;
+                case 'switch':
+                    control = new SwitchControl(controlConfig);
+                    break;
                 case 'checklist':
                     control = new CheckListControl(controlConfig);
                     break;
@@ -22835,7 +22854,7 @@
                     },
                     template: "\n    <!--Left Icon-->\n    <i *ngIf=\"icon && side === 'left' && !loading\" [ngClass]=\"icon\" class=\"novo-button-icon novo-button-icon-left\"></i>\n    <!--Transcluded Content-->\n    <span #textContent class=\"button-contents\"><ng-content></ng-content></span>\n    <!--Right Icon-->\n    <i *ngIf=\"icon && side === 'right' && !loading\" [ngClass]=\"icon\" class=\"novo-button-icon novo-button-icon-right\"></i>\n    <!--Loading-->\n    <i *ngIf=\"loading\" class=\"loading novo-button-loading\">\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        xmlns:a=\"http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/\"\n        x=\"0px\"\n        y=\"0px\"\n        width=\"18.2px\"\n        height=\"18.5px\"\n        viewBox=\"0 0 18.2 18.5\"\n        style=\"enable-background:new 0 0 18.2 18.5;\"\n        xml:space=\"preserve\"\n      >\n        <style type=\"text/css\">\n          .spinner {\n            fill: #ffffff;\n          }\n        </style>\n        <path\n          class=\"spinner\"\n          d=\"M9.2,18.5C4.1,18.5,0,14.4,0,9.2S4.1,0,9.2,0c0.9,0,1.9,0.1,2.7,0.4c0.8,0.2,1.2,1.1,1,1.9\n                        c-0.2,0.8-1.1,1.2-1.9,1C10.5,3.1,9.9,3,9.2,3C5.8,3,3,5.8,3,9.2s2.8,6.2,6.2,6.2c2.8,0,5.3-1.9,6-4.7c0.2-0.8,1-1.3,1.8-1.1\n                        c0.8,0.2,1.3,1,1.1,1.8C17.1,15.7,13.4,18.5,9.2,18.5z\"\n        />\n      </svg>\n    </i>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{-moz-user-select:none;-webkit-user-select:none;background:transparent;border:none;border-radius:3px;color:var(--text-main,#3d464d);cursor:pointer;flex:0 0 auto;flex-direction:row;font-size:var(--font-size-button);gap:1rem;height:3rem;justify-content:center;overflow:hidden;padding:0 1rem;text-overflow:clip;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}:host,:host .button-contents{align-items:center;display:inline-flex;text-transform:uppercase}:host .button-contents{color:inherit}:host .button-contents,:host i{font-size:inherit;height:var(--font-size-button);line-height:1}:host[size=small]{font-size:1rem;gap:.5rem;height:2.4rem;padding:0 1rem}:host[size=small] .button-contents,:host[size=small] i{height:1rem}:host[size=large]{font-size:1.6rem;gap:1.25rem;height:3.6rem;padding:0 1.25rem}:host[size=large] .button-contents,:host[size=large] i{height:1.6rem}:host:focus{outline:none}:host.novo-button-disabled,:host[disabled]{cursor:not-allowed;opacity:.5;pointer-events:none}:host[disabled=false]{cursor:pointer;opacity:1;pointer-events:auto}:host[loading=true]{cursor:not-allowed;opacity:.5;pointer-events:none}:host[loading=true] i.loading{-webkit-animation:rotate 1.2s linear infinite;align-items:center;animation:rotate 1.2s linear infinite;display:flex;justify-content:center}:host[loading=true] i.loading svg{height:100%;max-height:15px;max-width:15px;width:100%}:host[loading=true] i.loading svg .spinner{fill:currentColor}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}", ":host[theme=standard]{background:#dbdbdb;color:#3d464d}:host[theme=standard][color=black]{background:#000;color:#fff}:host[theme=standard][color=white]{background:#fff;color:#3d464d}:host[theme=standard][color=gray],:host[theme=standard][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=standard][color=bright],:host[theme=standard][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=standard][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=standard][color=neutral]{background:#4f5361;color:#fff}:host[theme=standard][color=dark]{background:#3d464d;color:#fff}:host[theme=standard][color=orange]{background:#ff6900;color:#3d464d}:host[theme=standard][color=navigation]{background:#202945;color:#fff}:host[theme=standard][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=standard][color=steel]{background:#5b6770;color:#fff}:host[theme=standard][color=metal]{background:#637893;color:#fff}:host[theme=standard][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=standard][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=standard][color=stone]{background:#bebebe;color:#3d464d}:host[theme=standard][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=standard][color=slate]{background:#707070;color:#fff}:host[theme=standard][color=onyx]{background:#526980;color:#fff}:host[theme=standard][color=charcoal]{background:#282828;color:#fff}:host[theme=standard][color=moonlight]{background:#1a242f;color:#fff}:host[theme=standard][color=midnight]{background:#202945;color:#fff}:host[theme=standard][color=darkness]{background:#161f27;color:#fff}:host[theme=standard][color=navy]{background:#0d2d42;color:#fff}:host[theme=standard][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=standard][color=ocean]{background:#4a89dc;color:#fff}:host[theme=standard][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=standard][color=grass]{background:#8cc152;color:#fff}:host[theme=standard][color=sunflower]{background:#f6b042;color:#fff}:host[theme=standard][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=standard][color=grapefruit]{background:#da4453;color:#fff}:host[theme=standard][color=carnation]{background:#d770ad;color:#fff}:host[theme=standard][color=lavender]{background:#967adc;color:#fff}:host[theme=standard][color=mountain]{background:#9678b6;color:#fff}:host[theme=standard][color=info],:host[theme=standard][color=positive]{background:#4a89dc;color:#fff}:host[theme=standard][color=success]{background:#8cc152;color:#fff}:host[theme=standard][color=danger],:host[theme=standard][color=error],:host[theme=standard][color=negative]{background:#da4453;color:#fff}:host[theme=standard][color=warning]{background:#f6b042;color:#fff}:host[theme=standard][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=standard][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=standard][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=standard][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=standard][color=presentation]{background:#5b6770;color:#fff}:host[theme=standard][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=standard][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=standard][color=company]{background:#39d;color:#fff}:host[theme=standard][color=candidate]{background:#4b7;color:#fff}:host[theme=standard][color=lead]{background:#a69;color:#fff}:host[theme=standard][color=contact]{background:#fa4;color:#fff}:host[theme=standard][color=opportunity]{background:#625;color:#fff}:host[theme=standard][color=job]{background:#b56;color:#fff}:host[theme=standard][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=standard][color=sendout]{background:#747884;color:#fff}:host[theme=standard][color=placement]{background:#0b344f;color:#fff}:host[theme=standard][color=note]{background:#747884;color:#fff}:host[theme=standard][color=contract]{background:#454ea0;color:#fff}:host[theme=standard][color=billableCharge],:host[theme=standard][color=corporateUser],:host[theme=standard][color=credential],:host[theme=standard][color=distributionList],:host[theme=standard][color=earnCode],:host[theme=standard][color=invoiceStatement],:host[theme=standard][color=jobCode],:host[theme=standard][color=payableCharge],:host[theme=standard][color=person],:host[theme=standard][color=user]{background:#696d79;color:#fff}:host[theme=standard]:focus,:host[theme=standard]:hover{box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15)}:host[theme=standard]:active{box-shadow:0 1px 2px rgba(0,0,0,.15)}", ":host[theme=primary]{background:#4a89dc;color:#fff;text-align:left}:host[theme=primary][color=black]{background:#000;color:#fff}:host[theme=primary][color=white]{color:#3d464d}:host[theme=primary][color=gray],:host[theme=primary][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=primary][color=bright],:host[theme=primary][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=primary][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=primary][color=neutral]{background:#4f5361;color:#fff}:host[theme=primary][color=dark]{background:#3d464d;color:#fff}:host[theme=primary][color=orange]{background:#ff6900;color:#3d464d}:host[theme=primary][color=navigation]{background:#202945;color:#fff}:host[theme=primary][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=primary][color=steel]{background:#5b6770;color:#fff}:host[theme=primary][color=metal]{background:#637893;color:#fff}:host[theme=primary][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=primary][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=primary][color=stone]{background:#bebebe;color:#3d464d}:host[theme=primary][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=primary][color=slate]{background:#707070;color:#fff}:host[theme=primary][color=onyx]{background:#526980;color:#fff}:host[theme=primary][color=charcoal]{background:#282828;color:#fff}:host[theme=primary][color=moonlight]{background:#1a242f;color:#fff}:host[theme=primary][color=midnight]{background:#202945;color:#fff}:host[theme=primary][color=darkness]{background:#161f27;color:#fff}:host[theme=primary][color=navy]{background:#0d2d42;color:#fff}:host[theme=primary][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=primary][color=ocean]{background:#4a89dc;color:#fff}:host[theme=primary][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=primary][color=grass]{background:#8cc152;color:#fff}:host[theme=primary][color=sunflower]{background:#f6b042;color:#fff}:host[theme=primary][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=primary][color=grapefruit]{background:#da4453;color:#fff}:host[theme=primary][color=carnation]{background:#d770ad;color:#fff}:host[theme=primary][color=lavender]{background:#967adc;color:#fff}:host[theme=primary][color=mountain]{background:#9678b6;color:#fff}:host[theme=primary][color=info],:host[theme=primary][color=positive]{background:#4a89dc;color:#fff}:host[theme=primary][color=success]{background:#8cc152;color:#fff}:host[theme=primary][color=danger],:host[theme=primary][color=error],:host[theme=primary][color=negative]{background:#da4453;color:#fff}:host[theme=primary][color=warning]{background:#f6b042;color:#fff}:host[theme=primary][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=primary][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=primary][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=primary][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=primary][color=presentation]{background:#5b6770;color:#fff}:host[theme=primary][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=primary][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=primary][color=company]{background:#39d;color:#fff}:host[theme=primary][color=candidate]{background:#4b7;color:#fff}:host[theme=primary][color=lead]{background:#a69;color:#fff}:host[theme=primary][color=contact]{background:#fa4;color:#fff}:host[theme=primary][color=opportunity]{background:#625;color:#fff}:host[theme=primary][color=job]{background:#b56;color:#fff}:host[theme=primary][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=primary][color=sendout]{background:#747884;color:#fff}:host[theme=primary][color=placement]{background:#0b344f;color:#fff}:host[theme=primary][color=note]{background:#747884;color:#fff}:host[theme=primary][color=contract]{background:#454ea0;color:#fff}:host[theme=primary][color=billableCharge],:host[theme=primary][color=corporateUser],:host[theme=primary][color=credential],:host[theme=primary][color=distributionList],:host[theme=primary][color=earnCode],:host[theme=primary][color=invoiceStatement],:host[theme=primary][color=jobCode],:host[theme=primary][color=payableCharge],:host[theme=primary][color=person],:host[theme=primary][color=user]{background:#696d79;color:#fff}:host[theme=primary]:focus,:host[theme=primary]:hover{box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15);filter:brightness(1.15)}:host[theme=primary]:active{box-shadow:0 1px 2px rgba(0,0,0,.15);filter:brightness(.85)}:host[theme=primary][color=white]{background:#fff;color:#4a89dc}:host[theme=primary][color=white]:focus,:host[theme=primary][color=white]:hover{background:#f7f7f7}:host[theme=primary][color=white]:active{background:#eaeaea}:host[theme=primary][color=white] i{background:rgba(0,0,0,.05)}:host[theme=primary][size=large] i{margin-left:3px}", ":host[theme=secondary]{align-items:center;background:#fff;border:1px solid #4a89dc;color:#4a89dc;padding:0 calc(1rem - 1px);text-align:left}:host[theme=secondary][color=black],:host[theme=secondary][color=black] i{color:#000}:host[theme=secondary][color=white],:host[theme=secondary][color=white] i{color:#fff}:host[theme=secondary][color=gray],:host[theme=secondary][color=gray] i,:host[theme=secondary][color=grey],:host[theme=secondary][color=grey] i{color:#9e9e9e}:host[theme=secondary][color=bright],:host[theme=secondary][color=bright] i,:host[theme=secondary][color=offWhite],:host[theme=secondary][color=offWhite] i{color:#f7f7f7}:host[theme=secondary][color=light],:host[theme=secondary][color=light] i{color:#dbdbdb}:host[theme=secondary][color=neutral],:host[theme=secondary][color=neutral] i{color:#4f5361}:host[theme=secondary][color=dark],:host[theme=secondary][color=dark] i{color:#3d464d}:host[theme=secondary][color=orange],:host[theme=secondary][color=orange] i{color:#ff6900}:host[theme=secondary][color=navigation],:host[theme=secondary][color=navigation] i{color:#202945}:host[theme=secondary][color=skyBlue],:host[theme=secondary][color=skyBlue] i{color:#009bdf}:host[theme=secondary][color=steel],:host[theme=secondary][color=steel] i{color:#5b6770}:host[theme=secondary][color=metal],:host[theme=secondary][color=metal] i{color:#637893}:host[theme=secondary][color=sand],:host[theme=secondary][color=sand] i{color:#f4f4f4}:host[theme=secondary][color=silver],:host[theme=secondary][color=silver] i{color:#e2e2e2}:host[theme=secondary][color=stone],:host[theme=secondary][color=stone] i{color:#bebebe}:host[theme=secondary][color=ash],:host[theme=secondary][color=ash] i{color:#a0a0a0}:host[theme=secondary][color=slate],:host[theme=secondary][color=slate] i{color:#707070}:host[theme=secondary][color=onyx],:host[theme=secondary][color=onyx] i{color:#526980}:host[theme=secondary][color=charcoal],:host[theme=secondary][color=charcoal] i{color:#282828}:host[theme=secondary][color=moonlight],:host[theme=secondary][color=moonlight] i{color:#1a242f}:host[theme=secondary][color=midnight],:host[theme=secondary][color=midnight] i{color:#202945}:host[theme=secondary][color=darkness],:host[theme=secondary][color=darkness] i{color:#161f27}:host[theme=secondary][color=navy],:host[theme=secondary][color=navy] i{color:#0d2d42}:host[theme=secondary][color=aqua],:host[theme=secondary][color=aqua] i{color:#3bafda}:host[theme=secondary][color=ocean],:host[theme=secondary][color=ocean] i{color:#4a89dc}:host[theme=secondary][color=mint],:host[theme=secondary][color=mint] i{color:#37bc9b}:host[theme=secondary][color=grass],:host[theme=secondary][color=grass] i{color:#8cc152}:host[theme=secondary][color=sunflower],:host[theme=secondary][color=sunflower] i{color:#f6b042}:host[theme=secondary][color=bittersweet],:host[theme=secondary][color=bittersweet] i{color:#eb6845}:host[theme=secondary][color=grapefruit],:host[theme=secondary][color=grapefruit] i{color:#da4453}:host[theme=secondary][color=carnation],:host[theme=secondary][color=carnation] i{color:#d770ad}:host[theme=secondary][color=lavender],:host[theme=secondary][color=lavender] i{color:#967adc}:host[theme=secondary][color=mountain],:host[theme=secondary][color=mountain] i{color:#9678b6}:host[theme=secondary][color=info],:host[theme=secondary][color=info] i,:host[theme=secondary][color=positive],:host[theme=secondary][color=positive] i{color:#4a89dc}:host[theme=secondary][color=success],:host[theme=secondary][color=success] i{color:#8cc152}:host[theme=secondary][color=danger],:host[theme=secondary][color=danger] i,:host[theme=secondary][color=error],:host[theme=secondary][color=error] i,:host[theme=secondary][color=negative],:host[theme=secondary][color=negative] i{color:#da4453}:host[theme=secondary][color=warning],:host[theme=secondary][color=warning] i{color:#f6b042}:host[theme=secondary][color=empty],:host[theme=secondary][color=empty] i{color:#cccdcc}:host[theme=secondary][color=disabled],:host[theme=secondary][color=disabled] i{color:#bebebe}:host[theme=secondary][color=background],:host[theme=secondary][color=background] i{color:#f7f7f7}:host[theme=secondary][color=backgroundDark],:host[theme=secondary][color=backgroundDark] i{color:#e2e2e2}:host[theme=secondary][color=presentation],:host[theme=secondary][color=presentation] i{color:#5b6770}:host[theme=secondary][color=bullhorn],:host[theme=secondary][color=bullhorn] i{color:#ff6900}:host[theme=secondary][color=pulse],:host[theme=secondary][color=pulse] i{color:#3bafda}:host[theme=secondary][color=company],:host[theme=secondary][color=company] i{color:#39d}:host[theme=secondary][color=candidate],:host[theme=secondary][color=candidate] i{color:#4b7}:host[theme=secondary][color=lead],:host[theme=secondary][color=lead] i{color:#a69}:host[theme=secondary][color=contact],:host[theme=secondary][color=contact] i{color:#fa4}:host[theme=secondary][color=opportunity],:host[theme=secondary][color=opportunity] i{color:#625}:host[theme=secondary][color=job],:host[theme=secondary][color=job] i{color:#b56}:host[theme=secondary][color=submission],:host[theme=secondary][color=submission] i{color:#a9adbb}:host[theme=secondary][color=sendout],:host[theme=secondary][color=sendout] i{color:#747884}:host[theme=secondary][color=placement],:host[theme=secondary][color=placement] i{color:#0b344f}:host[theme=secondary][color=note],:host[theme=secondary][color=note] i{color:#747884}:host[theme=secondary][color=contract],:host[theme=secondary][color=contract] i{color:#454ea0}:host[theme=secondary][color=billableCharge],:host[theme=secondary][color=billableCharge] i,:host[theme=secondary][color=corporateUser],:host[theme=secondary][color=corporateUser] i,:host[theme=secondary][color=credential],:host[theme=secondary][color=credential] i,:host[theme=secondary][color=distributionList],:host[theme=secondary][color=distributionList] i,:host[theme=secondary][color=earnCode],:host[theme=secondary][color=earnCode] i,:host[theme=secondary][color=invoiceStatement],:host[theme=secondary][color=invoiceStatement] i,:host[theme=secondary][color=jobCode],:host[theme=secondary][color=jobCode] i,:host[theme=secondary][color=payableCharge],:host[theme=secondary][color=payableCharge] i,:host[theme=secondary][color=person],:host[theme=secondary][color=person] i,:host[theme=secondary][color=user],:host[theme=secondary][color=user] i{color:#696d79}:host[theme=secondary][color=black]{border:1px solid #000}:host[theme=secondary][color=white]{border:1px solid #fff}:host[theme=secondary][color=gray],:host[theme=secondary][color=grey]{border:1px solid #9e9e9e}:host[theme=secondary][color=bright],:host[theme=secondary][color=offWhite]{border:1px solid #f7f7f7}:host[theme=secondary][color=light]{border:1px solid #dbdbdb}:host[theme=secondary][color=neutral]{border:1px solid #4f5361}:host[theme=secondary][color=dark]{border:1px solid #3d464d}:host[theme=secondary][color=orange]{border:1px solid #ff6900}:host[theme=secondary][color=navigation]{border:1px solid #202945}:host[theme=secondary][color=skyBlue]{border:1px solid #009bdf}:host[theme=secondary][color=steel]{border:1px solid #5b6770}:host[theme=secondary][color=metal]{border:1px solid #637893}:host[theme=secondary][color=sand]{border:1px solid #f4f4f4}:host[theme=secondary][color=silver]{border:1px solid #e2e2e2}:host[theme=secondary][color=stone]{border:1px solid #bebebe}:host[theme=secondary][color=ash]{border:1px solid #a0a0a0}:host[theme=secondary][color=slate]{border:1px solid #707070}:host[theme=secondary][color=onyx]{border:1px solid #526980}:host[theme=secondary][color=charcoal]{border:1px solid #282828}:host[theme=secondary][color=moonlight]{border:1px solid #1a242f}:host[theme=secondary][color=midnight]{border:1px solid #202945}:host[theme=secondary][color=darkness]{border:1px solid #161f27}:host[theme=secondary][color=navy]{border:1px solid #0d2d42}:host[theme=secondary][color=aqua]{border:1px solid #3bafda}:host[theme=secondary][color=ocean]{border:1px solid #4a89dc}:host[theme=secondary][color=mint]{border:1px solid #37bc9b}:host[theme=secondary][color=grass]{border:1px solid #8cc152}:host[theme=secondary][color=sunflower]{border:1px solid #f6b042}:host[theme=secondary][color=bittersweet]{border:1px solid #eb6845}:host[theme=secondary][color=grapefruit]{border:1px solid #da4453}:host[theme=secondary][color=carnation]{border:1px solid #d770ad}:host[theme=secondary][color=lavender]{border:1px solid #967adc}:host[theme=secondary][color=mountain]{border:1px solid #9678b6}:host[theme=secondary][color=info],:host[theme=secondary][color=positive]{border:1px solid #4a89dc}:host[theme=secondary][color=success]{border:1px solid #8cc152}:host[theme=secondary][color=danger],:host[theme=secondary][color=error],:host[theme=secondary][color=negative]{border:1px solid #da4453}:host[theme=secondary][color=warning]{border:1px solid #f6b042}:host[theme=secondary][color=empty]{border:1px solid #cccdcc}:host[theme=secondary][color=disabled]{border:1px solid #bebebe}:host[theme=secondary][color=background]{border:1px solid #f7f7f7}:host[theme=secondary][color=backgroundDark]{border:1px solid #e2e2e2}:host[theme=secondary][color=presentation]{border:1px solid #5b6770}:host[theme=secondary][color=bullhorn]{border:1px solid #ff6900}:host[theme=secondary][color=pulse]{border:1px solid #3bafda}:host[theme=secondary][color=company]{border:1px solid #39d}:host[theme=secondary][color=candidate]{border:1px solid #4b7}:host[theme=secondary][color=lead]{border:1px solid #a69}:host[theme=secondary][color=contact]{border:1px solid #fa4}:host[theme=secondary][color=opportunity]{border:1px solid #625}:host[theme=secondary][color=job]{border:1px solid #b56}:host[theme=secondary][color=submission]{border:1px solid #a9adbb}:host[theme=secondary][color=sendout]{border:1px solid #747884}:host[theme=secondary][color=placement]{border:1px solid #0b344f}:host[theme=secondary][color=note]{border:1px solid #747884}:host[theme=secondary][color=contract]{border:1px solid #454ea0}:host[theme=secondary][color=billableCharge],:host[theme=secondary][color=corporateUser],:host[theme=secondary][color=credential],:host[theme=secondary][color=distributionList],:host[theme=secondary][color=earnCode],:host[theme=secondary][color=invoiceStatement],:host[theme=secondary][color=jobCode],:host[theme=secondary][color=payableCharge],:host[theme=secondary][color=person],:host[theme=secondary][color=user]{border:1px solid #696d79}:host[theme=secondary] i.loading{margin-left:.8rem}:host[theme=secondary] i.loading svg .spinner{fill:#4a89dc}:host[theme=secondary]:focus,:host[theme=secondary]:hover{box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15)}:host[theme=secondary]:active{box-shadow:0 1px 2px rgba(0,0,0,.15)}:host[theme=secondary][inverse]{background:rgba(0,0,0,.25);border:1px solid #fff;color:#fff}:host[theme=secondary][inverse]:focus,:host[theme=secondary][inverse]:hover{background:rgba(0,0,0,.35)}:host[theme=secondary][inverse]:active{background:rgba(0,0,0,.45)}:host[theme=secondary][inverse] i.loading svg .spinner{fill:#fff}", ":host[theme=fab]{align-items:center;border-radius:50%!important;display:inline-flex;font-size:1.2rem;height:3.2rem;justify-content:center;padding:0;width:3.2rem}:host[theme=fab][color=black]{background:#000;color:#fff}:host[theme=fab][color=white]{background:#fff;color:#3d464d}:host[theme=fab][color=gray],:host[theme=fab][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=fab][color=bright],:host[theme=fab][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=fab][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=fab][color=neutral]{background:#4f5361;color:#fff}:host[theme=fab][color=dark]{background:#3d464d;color:#fff}:host[theme=fab][color=orange]{background:#ff6900;color:#3d464d}:host[theme=fab][color=navigation]{background:#202945;color:#fff}:host[theme=fab][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=fab][color=steel]{background:#5b6770;color:#fff}:host[theme=fab][color=metal]{background:#637893;color:#fff}:host[theme=fab][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=fab][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=fab][color=stone]{background:#bebebe;color:#3d464d}:host[theme=fab][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=fab][color=slate]{background:#707070;color:#fff}:host[theme=fab][color=onyx]{background:#526980;color:#fff}:host[theme=fab][color=charcoal]{background:#282828;color:#fff}:host[theme=fab][color=moonlight]{background:#1a242f;color:#fff}:host[theme=fab][color=midnight]{background:#202945;color:#fff}:host[theme=fab][color=darkness]{background:#161f27;color:#fff}:host[theme=fab][color=navy]{background:#0d2d42;color:#fff}:host[theme=fab][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=fab][color=ocean]{background:#4a89dc;color:#fff}:host[theme=fab][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=fab][color=grass]{background:#8cc152;color:#fff}:host[theme=fab][color=sunflower]{background:#f6b042;color:#fff}:host[theme=fab][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=fab][color=grapefruit]{background:#da4453;color:#fff}:host[theme=fab][color=carnation]{background:#d770ad;color:#fff}:host[theme=fab][color=lavender]{background:#967adc;color:#fff}:host[theme=fab][color=mountain]{background:#9678b6;color:#fff}:host[theme=fab][color=info],:host[theme=fab][color=positive]{background:#4a89dc;color:#fff}:host[theme=fab][color=success]{background:#8cc152;color:#fff}:host[theme=fab][color=danger],:host[theme=fab][color=error],:host[theme=fab][color=negative]{background:#da4453;color:#fff}:host[theme=fab][color=warning]{background:#f6b042;color:#fff}:host[theme=fab][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=fab][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=fab][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=fab][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=fab][color=presentation]{background:#5b6770;color:#fff}:host[theme=fab][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=fab][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=fab][color=company]{background:#39d;color:#fff}:host[theme=fab][color=candidate]{background:#4b7;color:#fff}:host[theme=fab][color=lead]{background:#a69;color:#fff}:host[theme=fab][color=contact]{background:#fa4;color:#fff}:host[theme=fab][color=opportunity]{background:#625;color:#fff}:host[theme=fab][color=job]{background:#b56;color:#fff}:host[theme=fab][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=fab][color=sendout]{background:#747884;color:#fff}:host[theme=fab][color=placement]{background:#0b344f;color:#fff}:host[theme=fab][color=note]{background:#747884;color:#fff}:host[theme=fab][color=contract]{background:#454ea0;color:#fff}:host[theme=fab][color=billableCharge],:host[theme=fab][color=corporateUser],:host[theme=fab][color=credential],:host[theme=fab][color=distributionList],:host[theme=fab][color=earnCode],:host[theme=fab][color=invoiceStatement],:host[theme=fab][color=jobCode],:host[theme=fab][color=payableCharge],:host[theme=fab][color=person],:host[theme=fab][color=user]{background:#696d79;color:#fff}:host[theme=fab][inverse]{color:#fff}:host[theme=fab]:active,:host[theme=fab]:focus,:host[theme=fab]:hover{box-shadow:0 1px 2px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}:host[theme=fab] .button-contents{display:contents}:host[theme=fab] i{margin:0;padding:0}:host[theme=fab] i:before{display:block}", ":host[theme=icon]{font-size:1.6rem;height:2.4rem;padding:.5rem}:host[theme=icon][color=black],:host[theme=icon][color=black] i{color:#000}:host[theme=icon][color=white],:host[theme=icon][color=white] i{color:#fff}:host[theme=icon][color=gray],:host[theme=icon][color=gray] i,:host[theme=icon][color=grey],:host[theme=icon][color=grey] i{color:#9e9e9e}:host[theme=icon][color=bright],:host[theme=icon][color=bright] i,:host[theme=icon][color=offWhite],:host[theme=icon][color=offWhite] i{color:#f7f7f7}:host[theme=icon][color=light],:host[theme=icon][color=light] i{color:#dbdbdb}:host[theme=icon][color=neutral],:host[theme=icon][color=neutral] i{color:#4f5361}:host[theme=icon][color=dark],:host[theme=icon][color=dark] i{color:#3d464d}:host[theme=icon][color=orange],:host[theme=icon][color=orange] i{color:#ff6900}:host[theme=icon][color=navigation],:host[theme=icon][color=navigation] i{color:#202945}:host[theme=icon][color=skyBlue],:host[theme=icon][color=skyBlue] i{color:#009bdf}:host[theme=icon][color=steel],:host[theme=icon][color=steel] i{color:#5b6770}:host[theme=icon][color=metal],:host[theme=icon][color=metal] i{color:#637893}:host[theme=icon][color=sand],:host[theme=icon][color=sand] i{color:#f4f4f4}:host[theme=icon][color=silver],:host[theme=icon][color=silver] i{color:#e2e2e2}:host[theme=icon][color=stone],:host[theme=icon][color=stone] i{color:#bebebe}:host[theme=icon][color=ash],:host[theme=icon][color=ash] i{color:#a0a0a0}:host[theme=icon][color=slate],:host[theme=icon][color=slate] i{color:#707070}:host[theme=icon][color=onyx],:host[theme=icon][color=onyx] i{color:#526980}:host[theme=icon][color=charcoal],:host[theme=icon][color=charcoal] i{color:#282828}:host[theme=icon][color=moonlight],:host[theme=icon][color=moonlight] i{color:#1a242f}:host[theme=icon][color=midnight],:host[theme=icon][color=midnight] i{color:#202945}:host[theme=icon][color=darkness],:host[theme=icon][color=darkness] i{color:#161f27}:host[theme=icon][color=navy],:host[theme=icon][color=navy] i{color:#0d2d42}:host[theme=icon][color=aqua],:host[theme=icon][color=aqua] i{color:#3bafda}:host[theme=icon][color=ocean],:host[theme=icon][color=ocean] i{color:#4a89dc}:host[theme=icon][color=mint],:host[theme=icon][color=mint] i{color:#37bc9b}:host[theme=icon][color=grass],:host[theme=icon][color=grass] i{color:#8cc152}:host[theme=icon][color=sunflower],:host[theme=icon][color=sunflower] i{color:#f6b042}:host[theme=icon][color=bittersweet],:host[theme=icon][color=bittersweet] i{color:#eb6845}:host[theme=icon][color=grapefruit],:host[theme=icon][color=grapefruit] i{color:#da4453}:host[theme=icon][color=carnation],:host[theme=icon][color=carnation] i{color:#d770ad}:host[theme=icon][color=lavender],:host[theme=icon][color=lavender] i{color:#967adc}:host[theme=icon][color=mountain],:host[theme=icon][color=mountain] i{color:#9678b6}:host[theme=icon][color=info],:host[theme=icon][color=info] i,:host[theme=icon][color=positive],:host[theme=icon][color=positive] i{color:#4a89dc}:host[theme=icon][color=success],:host[theme=icon][color=success] i{color:#8cc152}:host[theme=icon][color=danger],:host[theme=icon][color=danger] i,:host[theme=icon][color=error],:host[theme=icon][color=error] i,:host[theme=icon][color=negative],:host[theme=icon][color=negative] i{color:#da4453}:host[theme=icon][color=warning],:host[theme=icon][color=warning] i{color:#f6b042}:host[theme=icon][color=empty],:host[theme=icon][color=empty] i{color:#cccdcc}:host[theme=icon][color=disabled],:host[theme=icon][color=disabled] i{color:#bebebe}:host[theme=icon][color=background],:host[theme=icon][color=background] i{color:#f7f7f7}:host[theme=icon][color=backgroundDark],:host[theme=icon][color=backgroundDark] i{color:#e2e2e2}:host[theme=icon][color=presentation],:host[theme=icon][color=presentation] i{color:#5b6770}:host[theme=icon][color=bullhorn],:host[theme=icon][color=bullhorn] i{color:#ff6900}:host[theme=icon][color=pulse],:host[theme=icon][color=pulse] i{color:#3bafda}:host[theme=icon][color=company],:host[theme=icon][color=company] i{color:#39d}:host[theme=icon][color=candidate],:host[theme=icon][color=candidate] i{color:#4b7}:host[theme=icon][color=lead],:host[theme=icon][color=lead] i{color:#a69}:host[theme=icon][color=contact],:host[theme=icon][color=contact] i{color:#fa4}:host[theme=icon][color=opportunity],:host[theme=icon][color=opportunity] i{color:#625}:host[theme=icon][color=job],:host[theme=icon][color=job] i{color:#b56}:host[theme=icon][color=submission],:host[theme=icon][color=submission] i{color:#a9adbb}:host[theme=icon][color=sendout],:host[theme=icon][color=sendout] i{color:#747884}:host[theme=icon][color=placement],:host[theme=icon][color=placement] i{color:#0b344f}:host[theme=icon][color=note],:host[theme=icon][color=note] i{color:#747884}:host[theme=icon][color=contract],:host[theme=icon][color=contract] i{color:#454ea0}:host[theme=icon][color=billableCharge],:host[theme=icon][color=billableCharge] i,:host[theme=icon][color=corporateUser],:host[theme=icon][color=corporateUser] i,:host[theme=icon][color=credential],:host[theme=icon][color=credential] i,:host[theme=icon][color=distributionList],:host[theme=icon][color=distributionList] i,:host[theme=icon][color=earnCode],:host[theme=icon][color=earnCode] i,:host[theme=icon][color=invoiceStatement],:host[theme=icon][color=invoiceStatement] i,:host[theme=icon][color=jobCode],:host[theme=icon][color=jobCode] i,:host[theme=icon][color=payableCharge],:host[theme=icon][color=payableCharge] i,:host[theme=icon][color=person],:host[theme=icon][color=person] i,:host[theme=icon][color=user],:host[theme=icon][color=user] i{color:#696d79}:host[theme=icon][inverse]{color:#fff}:host[theme=icon] i{display:contents;margin:0!important}:host[theme=icon]:focus,:host[theme=icon]:hover{background:rgba(0,0,0,.1)}:host[theme=icon]:active{background:rgba(0,0,0,.25)}:host[theme=icon] .button-contents{display:contents}:host[theme=icon][size=small]{font-size:1.2rem;height:2rem;padding:.5rem}:host[theme=icon][size=large]{font-size:2rem;height:2.8rem;padding:1rem}", ":host[theme=dialogue]{background:transparent;color:#4a89dc}:host[theme=dialogue][color=black],:host[theme=dialogue][color=black] i{color:#000}:host[theme=dialogue][color=white],:host[theme=dialogue][color=white] i{color:#fff}:host[theme=dialogue][color=gray],:host[theme=dialogue][color=gray] i,:host[theme=dialogue][color=grey],:host[theme=dialogue][color=grey] i{color:#9e9e9e}:host[theme=dialogue][color=bright],:host[theme=dialogue][color=bright] i,:host[theme=dialogue][color=offWhite],:host[theme=dialogue][color=offWhite] i{color:#f7f7f7}:host[theme=dialogue][color=light],:host[theme=dialogue][color=light] i{color:#dbdbdb}:host[theme=dialogue][color=neutral],:host[theme=dialogue][color=neutral] i{color:#4f5361}:host[theme=dialogue][color=dark],:host[theme=dialogue][color=dark] i{color:#3d464d}:host[theme=dialogue][color=orange],:host[theme=dialogue][color=orange] i{color:#ff6900}:host[theme=dialogue][color=navigation],:host[theme=dialogue][color=navigation] i{color:#202945}:host[theme=dialogue][color=skyBlue],:host[theme=dialogue][color=skyBlue] i{color:#009bdf}:host[theme=dialogue][color=steel],:host[theme=dialogue][color=steel] i{color:#5b6770}:host[theme=dialogue][color=metal],:host[theme=dialogue][color=metal] i{color:#637893}:host[theme=dialogue][color=sand],:host[theme=dialogue][color=sand] i{color:#f4f4f4}:host[theme=dialogue][color=silver],:host[theme=dialogue][color=silver] i{color:#e2e2e2}:host[theme=dialogue][color=stone],:host[theme=dialogue][color=stone] i{color:#bebebe}:host[theme=dialogue][color=ash],:host[theme=dialogue][color=ash] i{color:#a0a0a0}:host[theme=dialogue][color=slate],:host[theme=dialogue][color=slate] i{color:#707070}:host[theme=dialogue][color=onyx],:host[theme=dialogue][color=onyx] i{color:#526980}:host[theme=dialogue][color=charcoal],:host[theme=dialogue][color=charcoal] i{color:#282828}:host[theme=dialogue][color=moonlight],:host[theme=dialogue][color=moonlight] i{color:#1a242f}:host[theme=dialogue][color=midnight],:host[theme=dialogue][color=midnight] i{color:#202945}:host[theme=dialogue][color=darkness],:host[theme=dialogue][color=darkness] i{color:#161f27}:host[theme=dialogue][color=navy],:host[theme=dialogue][color=navy] i{color:#0d2d42}:host[theme=dialogue][color=aqua],:host[theme=dialogue][color=aqua] i{color:#3bafda}:host[theme=dialogue][color=ocean],:host[theme=dialogue][color=ocean] i{color:#4a89dc}:host[theme=dialogue][color=mint],:host[theme=dialogue][color=mint] i{color:#37bc9b}:host[theme=dialogue][color=grass],:host[theme=dialogue][color=grass] i{color:#8cc152}:host[theme=dialogue][color=sunflower],:host[theme=dialogue][color=sunflower] i{color:#f6b042}:host[theme=dialogue][color=bittersweet],:host[theme=dialogue][color=bittersweet] i{color:#eb6845}:host[theme=dialogue][color=grapefruit],:host[theme=dialogue][color=grapefruit] i{color:#da4453}:host[theme=dialogue][color=carnation],:host[theme=dialogue][color=carnation] i{color:#d770ad}:host[theme=dialogue][color=lavender],:host[theme=dialogue][color=lavender] i{color:#967adc}:host[theme=dialogue][color=mountain],:host[theme=dialogue][color=mountain] i{color:#9678b6}:host[theme=dialogue][color=info],:host[theme=dialogue][color=info] i,:host[theme=dialogue][color=positive],:host[theme=dialogue][color=positive] i{color:#4a89dc}:host[theme=dialogue][color=success],:host[theme=dialogue][color=success] i{color:#8cc152}:host[theme=dialogue][color=danger],:host[theme=dialogue][color=danger] i,:host[theme=dialogue][color=error],:host[theme=dialogue][color=error] i,:host[theme=dialogue][color=negative],:host[theme=dialogue][color=negative] i{color:#da4453}:host[theme=dialogue][color=warning],:host[theme=dialogue][color=warning] i{color:#f6b042}:host[theme=dialogue][color=empty],:host[theme=dialogue][color=empty] i{color:#cccdcc}:host[theme=dialogue][color=disabled],:host[theme=dialogue][color=disabled] i{color:#bebebe}:host[theme=dialogue][color=background],:host[theme=dialogue][color=background] i{color:#f7f7f7}:host[theme=dialogue][color=backgroundDark],:host[theme=dialogue][color=backgroundDark] i{color:#e2e2e2}:host[theme=dialogue][color=presentation],:host[theme=dialogue][color=presentation] i{color:#5b6770}:host[theme=dialogue][color=bullhorn],:host[theme=dialogue][color=bullhorn] i{color:#ff6900}:host[theme=dialogue][color=pulse],:host[theme=dialogue][color=pulse] i{color:#3bafda}:host[theme=dialogue][color=company],:host[theme=dialogue][color=company] i{color:#39d}:host[theme=dialogue][color=candidate],:host[theme=dialogue][color=candidate] i{color:#4b7}:host[theme=dialogue][color=lead],:host[theme=dialogue][color=lead] i{color:#a69}:host[theme=dialogue][color=contact],:host[theme=dialogue][color=contact] i{color:#fa4}:host[theme=dialogue][color=opportunity],:host[theme=dialogue][color=opportunity] i{color:#625}:host[theme=dialogue][color=job],:host[theme=dialogue][color=job] i{color:#b56}:host[theme=dialogue][color=submission],:host[theme=dialogue][color=submission] i{color:#a9adbb}:host[theme=dialogue][color=sendout],:host[theme=dialogue][color=sendout] i{color:#747884}:host[theme=dialogue][color=placement],:host[theme=dialogue][color=placement] i{color:#0b344f}:host[theme=dialogue][color=note],:host[theme=dialogue][color=note] i{color:#747884}:host[theme=dialogue][color=contract],:host[theme=dialogue][color=contract] i{color:#454ea0}:host[theme=dialogue][color=billableCharge],:host[theme=dialogue][color=billableCharge] i,:host[theme=dialogue][color=corporateUser],:host[theme=dialogue][color=corporateUser] i,:host[theme=dialogue][color=credential],:host[theme=dialogue][color=credential] i,:host[theme=dialogue][color=distributionList],:host[theme=dialogue][color=distributionList] i,:host[theme=dialogue][color=earnCode],:host[theme=dialogue][color=earnCode] i,:host[theme=dialogue][color=invoiceStatement],:host[theme=dialogue][color=invoiceStatement] i,:host[theme=dialogue][color=jobCode],:host[theme=dialogue][color=jobCode] i,:host[theme=dialogue][color=payableCharge],:host[theme=dialogue][color=payableCharge] i,:host[theme=dialogue][color=person],:host[theme=dialogue][color=person] i,:host[theme=dialogue][color=user],:host[theme=dialogue][color=user] i{color:#696d79}:host[theme=dialogue]:focus,:host[theme=dialogue]:hover{background:#ededed}:host[theme=dialogue]:active{background:#e0e0e0}:host[theme=dialogue][inverse]:focus,:host[theme=dialogue][inverse]:hover{background:rgba(0,0,0,.2)}:host[theme=dialogue][inverse]:active{background:rgba(0,0,0,.35)}", ":host[theme=field]{background:transparent;border:none;border-bottom:1px solid #3d464d;border-radius:0;color:#3d464d;font-size:1.2rem;height:1.8rem;margin-bottom:4px;padding:.25rem .5rem;text-align:left}:host[theme=field]:active,:host[theme=field]:focus,:host[theme=field]:hover{border-bottom:1px solid #4a89dc}:host[theme=select]{align-items:center;background-color:transparent;border:none;border-bottom:1px solid #afb9c0;border-radius:0;color:#3d464d;cursor:pointer;display:flex;font-size:1.2rem;height:2rem;height:1.8rem;justify-content:space-between;min-height:2rem;padding:0;position:relative;text-align:left;text-shadow:none;text-transform:none;width:100%;z-index:1}:host[theme=select].empty{color:#a9a9a9}:host[theme=select]:focus,:host[theme=select]:hover{outline:none}:host[theme=select]:hover{border-bottom:1px solid #5f6d78}:host[theme=select]:hover i{opacity:.75}:host[theme=select]:focus{border-bottom:1px solid #4a89dc}:host[theme=select]:focus i{color:rgba(0,0,0,.73)}:host[theme=select] i{color:#3d464d;font-size:.8rem;opacity:.45}"]
+                    styles: [":host{-moz-user-select:none;-webkit-user-select:none;background:transparent;border:none;border-radius:3px;color:var(--text-main,#3d464d);cursor:pointer;flex:0 0 auto;flex-direction:row;font-size:var(--font-size-button);gap:1rem;height:3rem;justify-content:center;overflow:hidden;padding:0 1rem;text-overflow:clip;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}:host,:host .button-contents{align-items:center;display:inline-flex;text-transform:uppercase}:host .button-contents{color:inherit}:host .button-contents,:host i{font-size:inherit;height:var(--font-size-button);line-height:1}:host[size=small]{font-size:1rem;gap:.5rem;height:2.4rem;padding:0 1rem}:host[size=small] .button-contents,:host[size=small] i{height:1rem}:host[size=large]{font-size:1.6rem;gap:1.25rem;height:3.6rem;padding:0 1.25rem}:host[size=large] .button-contents,:host[size=large] i{height:1.6rem}:host:focus{outline:none}:host.novo-button-disabled,:host[disabled]{cursor:not-allowed;opacity:.5;pointer-events:none}:host[disabled=false]{cursor:pointer;opacity:1;pointer-events:auto}:host[loading=true]{cursor:not-allowed;opacity:.5;pointer-events:none}:host[loading=true] i.loading{-webkit-animation:rotate 1.2s linear infinite;align-items:center;animation:rotate 1.2s linear infinite;display:flex;justify-content:center}:host[loading=true] i.loading svg{height:100%;max-height:15px;max-width:15px;width:100%}:host[loading=true] i.loading svg .spinner{fill:currentColor}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}", ":host[theme=standard]{background:var(--button-background);color:var(--button-text)}:host[theme=standard][color=black]{background:#000;color:#fff}:host[theme=standard][color=white]{background:#fff;color:#3d464d}:host[theme=standard][color=gray],:host[theme=standard][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=standard][color=bright],:host[theme=standard][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=standard][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=standard][color=neutral]{background:#4f5361;color:#fff}:host[theme=standard][color=dark]{background:#3d464d;color:#fff}:host[theme=standard][color=orange]{background:#ff6900;color:#3d464d}:host[theme=standard][color=navigation]{background:#202945;color:#fff}:host[theme=standard][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=standard][color=steel]{background:#5b6770;color:#fff}:host[theme=standard][color=metal]{background:#637893;color:#fff}:host[theme=standard][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=standard][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=standard][color=stone]{background:#bebebe;color:#3d464d}:host[theme=standard][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=standard][color=slate]{background:#707070;color:#fff}:host[theme=standard][color=onyx]{background:#526980;color:#fff}:host[theme=standard][color=charcoal]{background:#282828;color:#fff}:host[theme=standard][color=moonlight]{background:#1a242f;color:#fff}:host[theme=standard][color=midnight]{background:#202945;color:#fff}:host[theme=standard][color=darkness]{background:#161f27;color:#fff}:host[theme=standard][color=navy]{background:#0d2d42;color:#fff}:host[theme=standard][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=standard][color=ocean]{background:#4a89dc;color:#fff}:host[theme=standard][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=standard][color=grass]{background:#8cc152;color:#fff}:host[theme=standard][color=sunflower]{background:#f6b042;color:#fff}:host[theme=standard][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=standard][color=grapefruit]{background:#da4453;color:#fff}:host[theme=standard][color=carnation]{background:#d770ad;color:#fff}:host[theme=standard][color=lavender]{background:#967adc;color:#fff}:host[theme=standard][color=mountain]{background:#9678b6;color:#fff}:host[theme=standard][color=info],:host[theme=standard][color=positive]{background:#4a89dc;color:#fff}:host[theme=standard][color=success]{background:#8cc152;color:#fff}:host[theme=standard][color=danger],:host[theme=standard][color=error],:host[theme=standard][color=negative]{background:#da4453;color:#fff}:host[theme=standard][color=warning]{background:#f6b042;color:#fff}:host[theme=standard][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=standard][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=standard][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=standard][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=standard][color=presentation]{background:#5b6770;color:#fff}:host[theme=standard][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=standard][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=standard][color=company]{background:#39d;color:#fff}:host[theme=standard][color=candidate]{background:#4b7;color:#fff}:host[theme=standard][color=lead]{background:#a69;color:#fff}:host[theme=standard][color=contact]{background:#fa4;color:#fff}:host[theme=standard][color=opportunity]{background:#625;color:#fff}:host[theme=standard][color=job]{background:#b56;color:#fff}:host[theme=standard][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=standard][color=sendout]{background:#747884;color:#fff}:host[theme=standard][color=placement]{background:#0b344f;color:#fff}:host[theme=standard][color=note]{background:#747884;color:#fff}:host[theme=standard][color=contract]{background:#454ea0;color:#fff}:host[theme=standard][color=billableCharge],:host[theme=standard][color=corporateUser],:host[theme=standard][color=credential],:host[theme=standard][color=distributionList],:host[theme=standard][color=earnCode],:host[theme=standard][color=invoiceStatement],:host[theme=standard][color=jobCode],:host[theme=standard][color=payableCharge],:host[theme=standard][color=person],:host[theme=standard][color=user]{background:#696d79;color:#fff}:host[theme=standard]:focus,:host[theme=standard]:hover{box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15)}:host[theme=standard]:active{box-shadow:0 1px 2px rgba(0,0,0,.15)}", ":host[theme=primary]{background:#4a89dc;color:#fff;text-align:left}:host[theme=primary][color=black]{background:#000;color:#fff}:host[theme=primary][color=white]{color:#3d464d}:host[theme=primary][color=gray],:host[theme=primary][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=primary][color=bright],:host[theme=primary][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=primary][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=primary][color=neutral]{background:#4f5361;color:#fff}:host[theme=primary][color=dark]{background:#3d464d;color:#fff}:host[theme=primary][color=orange]{background:#ff6900;color:#3d464d}:host[theme=primary][color=navigation]{background:#202945;color:#fff}:host[theme=primary][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=primary][color=steel]{background:#5b6770;color:#fff}:host[theme=primary][color=metal]{background:#637893;color:#fff}:host[theme=primary][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=primary][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=primary][color=stone]{background:#bebebe;color:#3d464d}:host[theme=primary][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=primary][color=slate]{background:#707070;color:#fff}:host[theme=primary][color=onyx]{background:#526980;color:#fff}:host[theme=primary][color=charcoal]{background:#282828;color:#fff}:host[theme=primary][color=moonlight]{background:#1a242f;color:#fff}:host[theme=primary][color=midnight]{background:#202945;color:#fff}:host[theme=primary][color=darkness]{background:#161f27;color:#fff}:host[theme=primary][color=navy]{background:#0d2d42;color:#fff}:host[theme=primary][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=primary][color=ocean]{background:#4a89dc;color:#fff}:host[theme=primary][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=primary][color=grass]{background:#8cc152;color:#fff}:host[theme=primary][color=sunflower]{background:#f6b042;color:#fff}:host[theme=primary][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=primary][color=grapefruit]{background:#da4453;color:#fff}:host[theme=primary][color=carnation]{background:#d770ad;color:#fff}:host[theme=primary][color=lavender]{background:#967adc;color:#fff}:host[theme=primary][color=mountain]{background:#9678b6;color:#fff}:host[theme=primary][color=info],:host[theme=primary][color=positive]{background:#4a89dc;color:#fff}:host[theme=primary][color=success]{background:#8cc152;color:#fff}:host[theme=primary][color=danger],:host[theme=primary][color=error],:host[theme=primary][color=negative]{background:#da4453;color:#fff}:host[theme=primary][color=warning]{background:#f6b042;color:#fff}:host[theme=primary][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=primary][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=primary][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=primary][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=primary][color=presentation]{background:#5b6770;color:#fff}:host[theme=primary][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=primary][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=primary][color=company]{background:#39d;color:#fff}:host[theme=primary][color=candidate]{background:#4b7;color:#fff}:host[theme=primary][color=lead]{background:#a69;color:#fff}:host[theme=primary][color=contact]{background:#fa4;color:#fff}:host[theme=primary][color=opportunity]{background:#625;color:#fff}:host[theme=primary][color=job]{background:#b56;color:#fff}:host[theme=primary][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=primary][color=sendout]{background:#747884;color:#fff}:host[theme=primary][color=placement]{background:#0b344f;color:#fff}:host[theme=primary][color=note]{background:#747884;color:#fff}:host[theme=primary][color=contract]{background:#454ea0;color:#fff}:host[theme=primary][color=billableCharge],:host[theme=primary][color=corporateUser],:host[theme=primary][color=credential],:host[theme=primary][color=distributionList],:host[theme=primary][color=earnCode],:host[theme=primary][color=invoiceStatement],:host[theme=primary][color=jobCode],:host[theme=primary][color=payableCharge],:host[theme=primary][color=person],:host[theme=primary][color=user]{background:#696d79;color:#fff}:host[theme=primary]:focus,:host[theme=primary]:hover{box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15);filter:brightness(1.15)}:host[theme=primary]:active{box-shadow:0 1px 2px rgba(0,0,0,.15);filter:brightness(.85)}:host[theme=primary][color=white]{background:#fff;color:#4a89dc}:host[theme=primary][color=white]:focus,:host[theme=primary][color=white]:hover{background:#f7f7f7}:host[theme=primary][color=white]:active{background:#eaeaea}:host[theme=primary][color=white] i{background:rgba(0,0,0,.05)}:host[theme=primary][size=large] i{margin-left:3px}", ":host[theme=secondary]{align-items:center;background:#fff;border:1px solid #4a89dc;color:#4a89dc;padding:0 calc(1rem - 1px);text-align:left}:host[theme=secondary][color=black],:host[theme=secondary][color=black] i{color:#000}:host[theme=secondary][color=white],:host[theme=secondary][color=white] i{color:#fff}:host[theme=secondary][color=gray],:host[theme=secondary][color=gray] i,:host[theme=secondary][color=grey],:host[theme=secondary][color=grey] i{color:#9e9e9e}:host[theme=secondary][color=bright],:host[theme=secondary][color=bright] i,:host[theme=secondary][color=offWhite],:host[theme=secondary][color=offWhite] i{color:#f7f7f7}:host[theme=secondary][color=light],:host[theme=secondary][color=light] i{color:#dbdbdb}:host[theme=secondary][color=neutral],:host[theme=secondary][color=neutral] i{color:#4f5361}:host[theme=secondary][color=dark],:host[theme=secondary][color=dark] i{color:#3d464d}:host[theme=secondary][color=orange],:host[theme=secondary][color=orange] i{color:#ff6900}:host[theme=secondary][color=navigation],:host[theme=secondary][color=navigation] i{color:#202945}:host[theme=secondary][color=skyBlue],:host[theme=secondary][color=skyBlue] i{color:#009bdf}:host[theme=secondary][color=steel],:host[theme=secondary][color=steel] i{color:#5b6770}:host[theme=secondary][color=metal],:host[theme=secondary][color=metal] i{color:#637893}:host[theme=secondary][color=sand],:host[theme=secondary][color=sand] i{color:#f4f4f4}:host[theme=secondary][color=silver],:host[theme=secondary][color=silver] i{color:#e2e2e2}:host[theme=secondary][color=stone],:host[theme=secondary][color=stone] i{color:#bebebe}:host[theme=secondary][color=ash],:host[theme=secondary][color=ash] i{color:#a0a0a0}:host[theme=secondary][color=slate],:host[theme=secondary][color=slate] i{color:#707070}:host[theme=secondary][color=onyx],:host[theme=secondary][color=onyx] i{color:#526980}:host[theme=secondary][color=charcoal],:host[theme=secondary][color=charcoal] i{color:#282828}:host[theme=secondary][color=moonlight],:host[theme=secondary][color=moonlight] i{color:#1a242f}:host[theme=secondary][color=midnight],:host[theme=secondary][color=midnight] i{color:#202945}:host[theme=secondary][color=darkness],:host[theme=secondary][color=darkness] i{color:#161f27}:host[theme=secondary][color=navy],:host[theme=secondary][color=navy] i{color:#0d2d42}:host[theme=secondary][color=aqua],:host[theme=secondary][color=aqua] i{color:#3bafda}:host[theme=secondary][color=ocean],:host[theme=secondary][color=ocean] i{color:#4a89dc}:host[theme=secondary][color=mint],:host[theme=secondary][color=mint] i{color:#37bc9b}:host[theme=secondary][color=grass],:host[theme=secondary][color=grass] i{color:#8cc152}:host[theme=secondary][color=sunflower],:host[theme=secondary][color=sunflower] i{color:#f6b042}:host[theme=secondary][color=bittersweet],:host[theme=secondary][color=bittersweet] i{color:#eb6845}:host[theme=secondary][color=grapefruit],:host[theme=secondary][color=grapefruit] i{color:#da4453}:host[theme=secondary][color=carnation],:host[theme=secondary][color=carnation] i{color:#d770ad}:host[theme=secondary][color=lavender],:host[theme=secondary][color=lavender] i{color:#967adc}:host[theme=secondary][color=mountain],:host[theme=secondary][color=mountain] i{color:#9678b6}:host[theme=secondary][color=info],:host[theme=secondary][color=info] i,:host[theme=secondary][color=positive],:host[theme=secondary][color=positive] i{color:#4a89dc}:host[theme=secondary][color=success],:host[theme=secondary][color=success] i{color:#8cc152}:host[theme=secondary][color=danger],:host[theme=secondary][color=danger] i,:host[theme=secondary][color=error],:host[theme=secondary][color=error] i,:host[theme=secondary][color=negative],:host[theme=secondary][color=negative] i{color:#da4453}:host[theme=secondary][color=warning],:host[theme=secondary][color=warning] i{color:#f6b042}:host[theme=secondary][color=empty],:host[theme=secondary][color=empty] i{color:#cccdcc}:host[theme=secondary][color=disabled],:host[theme=secondary][color=disabled] i{color:#bebebe}:host[theme=secondary][color=background],:host[theme=secondary][color=background] i{color:#f7f7f7}:host[theme=secondary][color=backgroundDark],:host[theme=secondary][color=backgroundDark] i{color:#e2e2e2}:host[theme=secondary][color=presentation],:host[theme=secondary][color=presentation] i{color:#5b6770}:host[theme=secondary][color=bullhorn],:host[theme=secondary][color=bullhorn] i{color:#ff6900}:host[theme=secondary][color=pulse],:host[theme=secondary][color=pulse] i{color:#3bafda}:host[theme=secondary][color=company],:host[theme=secondary][color=company] i{color:#39d}:host[theme=secondary][color=candidate],:host[theme=secondary][color=candidate] i{color:#4b7}:host[theme=secondary][color=lead],:host[theme=secondary][color=lead] i{color:#a69}:host[theme=secondary][color=contact],:host[theme=secondary][color=contact] i{color:#fa4}:host[theme=secondary][color=opportunity],:host[theme=secondary][color=opportunity] i{color:#625}:host[theme=secondary][color=job],:host[theme=secondary][color=job] i{color:#b56}:host[theme=secondary][color=submission],:host[theme=secondary][color=submission] i{color:#a9adbb}:host[theme=secondary][color=sendout],:host[theme=secondary][color=sendout] i{color:#747884}:host[theme=secondary][color=placement],:host[theme=secondary][color=placement] i{color:#0b344f}:host[theme=secondary][color=note],:host[theme=secondary][color=note] i{color:#747884}:host[theme=secondary][color=contract],:host[theme=secondary][color=contract] i{color:#454ea0}:host[theme=secondary][color=billableCharge],:host[theme=secondary][color=billableCharge] i,:host[theme=secondary][color=corporateUser],:host[theme=secondary][color=corporateUser] i,:host[theme=secondary][color=credential],:host[theme=secondary][color=credential] i,:host[theme=secondary][color=distributionList],:host[theme=secondary][color=distributionList] i,:host[theme=secondary][color=earnCode],:host[theme=secondary][color=earnCode] i,:host[theme=secondary][color=invoiceStatement],:host[theme=secondary][color=invoiceStatement] i,:host[theme=secondary][color=jobCode],:host[theme=secondary][color=jobCode] i,:host[theme=secondary][color=payableCharge],:host[theme=secondary][color=payableCharge] i,:host[theme=secondary][color=person],:host[theme=secondary][color=person] i,:host[theme=secondary][color=user],:host[theme=secondary][color=user] i{color:#696d79}:host[theme=secondary][color=black]{border:1px solid #000}:host[theme=secondary][color=white]{border:1px solid #fff}:host[theme=secondary][color=gray],:host[theme=secondary][color=grey]{border:1px solid #9e9e9e}:host[theme=secondary][color=bright],:host[theme=secondary][color=offWhite]{border:1px solid #f7f7f7}:host[theme=secondary][color=light]{border:1px solid #dbdbdb}:host[theme=secondary][color=neutral]{border:1px solid #4f5361}:host[theme=secondary][color=dark]{border:1px solid #3d464d}:host[theme=secondary][color=orange]{border:1px solid #ff6900}:host[theme=secondary][color=navigation]{border:1px solid #202945}:host[theme=secondary][color=skyBlue]{border:1px solid #009bdf}:host[theme=secondary][color=steel]{border:1px solid #5b6770}:host[theme=secondary][color=metal]{border:1px solid #637893}:host[theme=secondary][color=sand]{border:1px solid #f4f4f4}:host[theme=secondary][color=silver]{border:1px solid #e2e2e2}:host[theme=secondary][color=stone]{border:1px solid #bebebe}:host[theme=secondary][color=ash]{border:1px solid #a0a0a0}:host[theme=secondary][color=slate]{border:1px solid #707070}:host[theme=secondary][color=onyx]{border:1px solid #526980}:host[theme=secondary][color=charcoal]{border:1px solid #282828}:host[theme=secondary][color=moonlight]{border:1px solid #1a242f}:host[theme=secondary][color=midnight]{border:1px solid #202945}:host[theme=secondary][color=darkness]{border:1px solid #161f27}:host[theme=secondary][color=navy]{border:1px solid #0d2d42}:host[theme=secondary][color=aqua]{border:1px solid #3bafda}:host[theme=secondary][color=ocean]{border:1px solid #4a89dc}:host[theme=secondary][color=mint]{border:1px solid #37bc9b}:host[theme=secondary][color=grass]{border:1px solid #8cc152}:host[theme=secondary][color=sunflower]{border:1px solid #f6b042}:host[theme=secondary][color=bittersweet]{border:1px solid #eb6845}:host[theme=secondary][color=grapefruit]{border:1px solid #da4453}:host[theme=secondary][color=carnation]{border:1px solid #d770ad}:host[theme=secondary][color=lavender]{border:1px solid #967adc}:host[theme=secondary][color=mountain]{border:1px solid #9678b6}:host[theme=secondary][color=info],:host[theme=secondary][color=positive]{border:1px solid #4a89dc}:host[theme=secondary][color=success]{border:1px solid #8cc152}:host[theme=secondary][color=danger],:host[theme=secondary][color=error],:host[theme=secondary][color=negative]{border:1px solid #da4453}:host[theme=secondary][color=warning]{border:1px solid #f6b042}:host[theme=secondary][color=empty]{border:1px solid #cccdcc}:host[theme=secondary][color=disabled]{border:1px solid #bebebe}:host[theme=secondary][color=background]{border:1px solid #f7f7f7}:host[theme=secondary][color=backgroundDark]{border:1px solid #e2e2e2}:host[theme=secondary][color=presentation]{border:1px solid #5b6770}:host[theme=secondary][color=bullhorn]{border:1px solid #ff6900}:host[theme=secondary][color=pulse]{border:1px solid #3bafda}:host[theme=secondary][color=company]{border:1px solid #39d}:host[theme=secondary][color=candidate]{border:1px solid #4b7}:host[theme=secondary][color=lead]{border:1px solid #a69}:host[theme=secondary][color=contact]{border:1px solid #fa4}:host[theme=secondary][color=opportunity]{border:1px solid #625}:host[theme=secondary][color=job]{border:1px solid #b56}:host[theme=secondary][color=submission]{border:1px solid #a9adbb}:host[theme=secondary][color=sendout]{border:1px solid #747884}:host[theme=secondary][color=placement]{border:1px solid #0b344f}:host[theme=secondary][color=note]{border:1px solid #747884}:host[theme=secondary][color=contract]{border:1px solid #454ea0}:host[theme=secondary][color=billableCharge],:host[theme=secondary][color=corporateUser],:host[theme=secondary][color=credential],:host[theme=secondary][color=distributionList],:host[theme=secondary][color=earnCode],:host[theme=secondary][color=invoiceStatement],:host[theme=secondary][color=jobCode],:host[theme=secondary][color=payableCharge],:host[theme=secondary][color=person],:host[theme=secondary][color=user]{border:1px solid #696d79}:host[theme=secondary] i.loading{margin-left:.8rem}:host[theme=secondary] i.loading svg .spinner{fill:#4a89dc}:host[theme=secondary]:focus,:host[theme=secondary]:hover{background:#fff;box-shadow:0 3px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15)}:host[theme=secondary]:active{box-shadow:0 1px 2px rgba(0,0,0,.15)}:host[theme=secondary][inverse]{background:rgba(0,0,0,.25);border:1px solid #fff;color:#fff}:host[theme=secondary][inverse]:focus,:host[theme=secondary][inverse]:hover{background:rgba(0,0,0,.35)}:host[theme=secondary][inverse]:active{background:rgba(0,0,0,.45)}:host[theme=secondary][inverse] i.loading svg .spinner{fill:#fff}", ":host[theme=fab]{align-items:center;border-radius:50%!important;display:inline-flex;font-size:1.2rem;height:3.2rem;justify-content:center;padding:0;width:3.2rem}:host[theme=fab][color=black]{background:#000;color:#fff}:host[theme=fab][color=white]{background:#fff;color:#3d464d}:host[theme=fab][color=gray],:host[theme=fab][color=grey]{background:#9e9e9e;color:#3d464d}:host[theme=fab][color=bright],:host[theme=fab][color=offWhite]{background:#f7f7f7;color:#3d464d}:host[theme=fab][color=light]{background:#dbdbdb;color:#3d464d}:host[theme=fab][color=neutral]{background:#4f5361;color:#fff}:host[theme=fab][color=dark]{background:#3d464d;color:#fff}:host[theme=fab][color=orange]{background:#ff6900;color:#3d464d}:host[theme=fab][color=navigation]{background:#202945;color:#fff}:host[theme=fab][color=skyBlue]{background:#009bdf;color:#fff}:host[theme=fab][color=steel]{background:#5b6770;color:#fff}:host[theme=fab][color=metal]{background:#637893;color:#fff}:host[theme=fab][color=sand]{background:#f4f4f4;color:#3d464d}:host[theme=fab][color=silver]{background:#e2e2e2;color:#3d464d}:host[theme=fab][color=stone]{background:#bebebe;color:#3d464d}:host[theme=fab][color=ash]{background:#a0a0a0;color:#3d464d}:host[theme=fab][color=slate]{background:#707070;color:#fff}:host[theme=fab][color=onyx]{background:#526980;color:#fff}:host[theme=fab][color=charcoal]{background:#282828;color:#fff}:host[theme=fab][color=moonlight]{background:#1a242f;color:#fff}:host[theme=fab][color=midnight]{background:#202945;color:#fff}:host[theme=fab][color=darkness]{background:#161f27;color:#fff}:host[theme=fab][color=navy]{background:#0d2d42;color:#fff}:host[theme=fab][color=aqua]{background:#3bafda;color:#3d464d}:host[theme=fab][color=ocean]{background:#4a89dc;color:#fff}:host[theme=fab][color=mint]{background:#37bc9b;color:#3d464d}:host[theme=fab][color=grass]{background:#8cc152;color:#fff}:host[theme=fab][color=sunflower]{background:#f6b042;color:#fff}:host[theme=fab][color=bittersweet]{background:#eb6845;color:#fff}:host[theme=fab][color=grapefruit]{background:#da4453;color:#fff}:host[theme=fab][color=carnation]{background:#d770ad;color:#fff}:host[theme=fab][color=lavender]{background:#967adc;color:#fff}:host[theme=fab][color=mountain]{background:#9678b6;color:#fff}:host[theme=fab][color=info],:host[theme=fab][color=positive]{background:#4a89dc;color:#fff}:host[theme=fab][color=success]{background:#8cc152;color:#fff}:host[theme=fab][color=danger],:host[theme=fab][color=error],:host[theme=fab][color=negative]{background:#da4453;color:#fff}:host[theme=fab][color=warning]{background:#f6b042;color:#fff}:host[theme=fab][color=empty]{background:#cccdcc;color:#3d464d}:host[theme=fab][color=disabled]{background:#bebebe;color:#3d464d}:host[theme=fab][color=background]{background:#f7f7f7;color:#3d464d}:host[theme=fab][color=backgroundDark]{background:#e2e2e2;color:#3d464d}:host[theme=fab][color=presentation]{background:#5b6770;color:#fff}:host[theme=fab][color=bullhorn]{background:#ff6900;color:#3d464d}:host[theme=fab][color=pulse]{background:#3bafda;color:#3d464d}:host[theme=fab][color=company]{background:#39d;color:#fff}:host[theme=fab][color=candidate]{background:#4b7;color:#fff}:host[theme=fab][color=lead]{background:#a69;color:#fff}:host[theme=fab][color=contact]{background:#fa4;color:#fff}:host[theme=fab][color=opportunity]{background:#625;color:#fff}:host[theme=fab][color=job]{background:#b56;color:#fff}:host[theme=fab][color=submission]{background:#a9adbb;color:#3d464d}:host[theme=fab][color=sendout]{background:#747884;color:#fff}:host[theme=fab][color=placement]{background:#0b344f;color:#fff}:host[theme=fab][color=note]{background:#747884;color:#fff}:host[theme=fab][color=contract]{background:#454ea0;color:#fff}:host[theme=fab][color=billableCharge],:host[theme=fab][color=corporateUser],:host[theme=fab][color=credential],:host[theme=fab][color=distributionList],:host[theme=fab][color=earnCode],:host[theme=fab][color=invoiceStatement],:host[theme=fab][color=jobCode],:host[theme=fab][color=payableCharge],:host[theme=fab][color=person],:host[theme=fab][color=user]{background:#696d79;color:#fff}:host[theme=fab][inverse]{color:#fff}:host[theme=fab]:active,:host[theme=fab]:focus,:host[theme=fab]:hover{box-shadow:0 1px 2px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}:host[theme=fab] .button-contents{display:contents}:host[theme=fab] i{margin:0;padding:0}:host[theme=fab] i:before{display:block}", ":host[theme=icon]{font-size:1.4rem;height:2.4rem;padding:.5rem}:host[theme=icon][color=black],:host[theme=icon][color=black] i{color:#000}:host[theme=icon][color=white],:host[theme=icon][color=white] i{color:#fff}:host[theme=icon][color=gray],:host[theme=icon][color=gray] i,:host[theme=icon][color=grey],:host[theme=icon][color=grey] i{color:#9e9e9e}:host[theme=icon][color=bright],:host[theme=icon][color=bright] i,:host[theme=icon][color=offWhite],:host[theme=icon][color=offWhite] i{color:#f7f7f7}:host[theme=icon][color=light],:host[theme=icon][color=light] i{color:#dbdbdb}:host[theme=icon][color=neutral],:host[theme=icon][color=neutral] i{color:#4f5361}:host[theme=icon][color=dark],:host[theme=icon][color=dark] i{color:#3d464d}:host[theme=icon][color=orange],:host[theme=icon][color=orange] i{color:#ff6900}:host[theme=icon][color=navigation],:host[theme=icon][color=navigation] i{color:#202945}:host[theme=icon][color=skyBlue],:host[theme=icon][color=skyBlue] i{color:#009bdf}:host[theme=icon][color=steel],:host[theme=icon][color=steel] i{color:#5b6770}:host[theme=icon][color=metal],:host[theme=icon][color=metal] i{color:#637893}:host[theme=icon][color=sand],:host[theme=icon][color=sand] i{color:#f4f4f4}:host[theme=icon][color=silver],:host[theme=icon][color=silver] i{color:#e2e2e2}:host[theme=icon][color=stone],:host[theme=icon][color=stone] i{color:#bebebe}:host[theme=icon][color=ash],:host[theme=icon][color=ash] i{color:#a0a0a0}:host[theme=icon][color=slate],:host[theme=icon][color=slate] i{color:#707070}:host[theme=icon][color=onyx],:host[theme=icon][color=onyx] i{color:#526980}:host[theme=icon][color=charcoal],:host[theme=icon][color=charcoal] i{color:#282828}:host[theme=icon][color=moonlight],:host[theme=icon][color=moonlight] i{color:#1a242f}:host[theme=icon][color=midnight],:host[theme=icon][color=midnight] i{color:#202945}:host[theme=icon][color=darkness],:host[theme=icon][color=darkness] i{color:#161f27}:host[theme=icon][color=navy],:host[theme=icon][color=navy] i{color:#0d2d42}:host[theme=icon][color=aqua],:host[theme=icon][color=aqua] i{color:#3bafda}:host[theme=icon][color=ocean],:host[theme=icon][color=ocean] i{color:#4a89dc}:host[theme=icon][color=mint],:host[theme=icon][color=mint] i{color:#37bc9b}:host[theme=icon][color=grass],:host[theme=icon][color=grass] i{color:#8cc152}:host[theme=icon][color=sunflower],:host[theme=icon][color=sunflower] i{color:#f6b042}:host[theme=icon][color=bittersweet],:host[theme=icon][color=bittersweet] i{color:#eb6845}:host[theme=icon][color=grapefruit],:host[theme=icon][color=grapefruit] i{color:#da4453}:host[theme=icon][color=carnation],:host[theme=icon][color=carnation] i{color:#d770ad}:host[theme=icon][color=lavender],:host[theme=icon][color=lavender] i{color:#967adc}:host[theme=icon][color=mountain],:host[theme=icon][color=mountain] i{color:#9678b6}:host[theme=icon][color=info],:host[theme=icon][color=info] i,:host[theme=icon][color=positive],:host[theme=icon][color=positive] i{color:#4a89dc}:host[theme=icon][color=success],:host[theme=icon][color=success] i{color:#8cc152}:host[theme=icon][color=danger],:host[theme=icon][color=danger] i,:host[theme=icon][color=error],:host[theme=icon][color=error] i,:host[theme=icon][color=negative],:host[theme=icon][color=negative] i{color:#da4453}:host[theme=icon][color=warning],:host[theme=icon][color=warning] i{color:#f6b042}:host[theme=icon][color=empty],:host[theme=icon][color=empty] i{color:#cccdcc}:host[theme=icon][color=disabled],:host[theme=icon][color=disabled] i{color:#bebebe}:host[theme=icon][color=background],:host[theme=icon][color=background] i{color:#f7f7f7}:host[theme=icon][color=backgroundDark],:host[theme=icon][color=backgroundDark] i{color:#e2e2e2}:host[theme=icon][color=presentation],:host[theme=icon][color=presentation] i{color:#5b6770}:host[theme=icon][color=bullhorn],:host[theme=icon][color=bullhorn] i{color:#ff6900}:host[theme=icon][color=pulse],:host[theme=icon][color=pulse] i{color:#3bafda}:host[theme=icon][color=company],:host[theme=icon][color=company] i{color:#39d}:host[theme=icon][color=candidate],:host[theme=icon][color=candidate] i{color:#4b7}:host[theme=icon][color=lead],:host[theme=icon][color=lead] i{color:#a69}:host[theme=icon][color=contact],:host[theme=icon][color=contact] i{color:#fa4}:host[theme=icon][color=opportunity],:host[theme=icon][color=opportunity] i{color:#625}:host[theme=icon][color=job],:host[theme=icon][color=job] i{color:#b56}:host[theme=icon][color=submission],:host[theme=icon][color=submission] i{color:#a9adbb}:host[theme=icon][color=sendout],:host[theme=icon][color=sendout] i{color:#747884}:host[theme=icon][color=placement],:host[theme=icon][color=placement] i{color:#0b344f}:host[theme=icon][color=note],:host[theme=icon][color=note] i{color:#747884}:host[theme=icon][color=contract],:host[theme=icon][color=contract] i{color:#454ea0}:host[theme=icon][color=billableCharge],:host[theme=icon][color=billableCharge] i,:host[theme=icon][color=corporateUser],:host[theme=icon][color=corporateUser] i,:host[theme=icon][color=credential],:host[theme=icon][color=credential] i,:host[theme=icon][color=distributionList],:host[theme=icon][color=distributionList] i,:host[theme=icon][color=earnCode],:host[theme=icon][color=earnCode] i,:host[theme=icon][color=invoiceStatement],:host[theme=icon][color=invoiceStatement] i,:host[theme=icon][color=jobCode],:host[theme=icon][color=jobCode] i,:host[theme=icon][color=payableCharge],:host[theme=icon][color=payableCharge] i,:host[theme=icon][color=person],:host[theme=icon][color=person] i,:host[theme=icon][color=user],:host[theme=icon][color=user] i{color:#696d79}:host[theme=icon][inverse]{color:#fff}:host[theme=icon] i{display:contents;margin:0!important}:host[theme=icon]:focus,:host[theme=icon]:hover{background:rgba(0,0,0,.1)}:host[theme=icon]:active{background:rgba(0,0,0,.25)}:host[theme=icon] .button-contents{display:contents}:host[theme=icon][size=small]{font-size:1.2rem;height:2rem;padding:.5rem}:host[theme=icon][size=large]{font-size:2rem;height:2.8rem;padding:1rem}", ":host[theme=dialogue]{background:transparent;color:#4a89dc}:host[theme=dialogue][color=black],:host[theme=dialogue][color=black] i{color:#000}:host[theme=dialogue][color=white],:host[theme=dialogue][color=white] i{color:#fff}:host[theme=dialogue][color=gray],:host[theme=dialogue][color=gray] i,:host[theme=dialogue][color=grey],:host[theme=dialogue][color=grey] i{color:#9e9e9e}:host[theme=dialogue][color=bright],:host[theme=dialogue][color=bright] i,:host[theme=dialogue][color=offWhite],:host[theme=dialogue][color=offWhite] i{color:#f7f7f7}:host[theme=dialogue][color=light],:host[theme=dialogue][color=light] i{color:#dbdbdb}:host[theme=dialogue][color=neutral],:host[theme=dialogue][color=neutral] i{color:#4f5361}:host[theme=dialogue][color=dark],:host[theme=dialogue][color=dark] i{color:#3d464d}:host[theme=dialogue][color=orange],:host[theme=dialogue][color=orange] i{color:#ff6900}:host[theme=dialogue][color=navigation],:host[theme=dialogue][color=navigation] i{color:#202945}:host[theme=dialogue][color=skyBlue],:host[theme=dialogue][color=skyBlue] i{color:#009bdf}:host[theme=dialogue][color=steel],:host[theme=dialogue][color=steel] i{color:#5b6770}:host[theme=dialogue][color=metal],:host[theme=dialogue][color=metal] i{color:#637893}:host[theme=dialogue][color=sand],:host[theme=dialogue][color=sand] i{color:#f4f4f4}:host[theme=dialogue][color=silver],:host[theme=dialogue][color=silver] i{color:#e2e2e2}:host[theme=dialogue][color=stone],:host[theme=dialogue][color=stone] i{color:#bebebe}:host[theme=dialogue][color=ash],:host[theme=dialogue][color=ash] i{color:#a0a0a0}:host[theme=dialogue][color=slate],:host[theme=dialogue][color=slate] i{color:#707070}:host[theme=dialogue][color=onyx],:host[theme=dialogue][color=onyx] i{color:#526980}:host[theme=dialogue][color=charcoal],:host[theme=dialogue][color=charcoal] i{color:#282828}:host[theme=dialogue][color=moonlight],:host[theme=dialogue][color=moonlight] i{color:#1a242f}:host[theme=dialogue][color=midnight],:host[theme=dialogue][color=midnight] i{color:#202945}:host[theme=dialogue][color=darkness],:host[theme=dialogue][color=darkness] i{color:#161f27}:host[theme=dialogue][color=navy],:host[theme=dialogue][color=navy] i{color:#0d2d42}:host[theme=dialogue][color=aqua],:host[theme=dialogue][color=aqua] i{color:#3bafda}:host[theme=dialogue][color=ocean],:host[theme=dialogue][color=ocean] i{color:#4a89dc}:host[theme=dialogue][color=mint],:host[theme=dialogue][color=mint] i{color:#37bc9b}:host[theme=dialogue][color=grass],:host[theme=dialogue][color=grass] i{color:#8cc152}:host[theme=dialogue][color=sunflower],:host[theme=dialogue][color=sunflower] i{color:#f6b042}:host[theme=dialogue][color=bittersweet],:host[theme=dialogue][color=bittersweet] i{color:#eb6845}:host[theme=dialogue][color=grapefruit],:host[theme=dialogue][color=grapefruit] i{color:#da4453}:host[theme=dialogue][color=carnation],:host[theme=dialogue][color=carnation] i{color:#d770ad}:host[theme=dialogue][color=lavender],:host[theme=dialogue][color=lavender] i{color:#967adc}:host[theme=dialogue][color=mountain],:host[theme=dialogue][color=mountain] i{color:#9678b6}:host[theme=dialogue][color=info],:host[theme=dialogue][color=info] i,:host[theme=dialogue][color=positive],:host[theme=dialogue][color=positive] i{color:#4a89dc}:host[theme=dialogue][color=success],:host[theme=dialogue][color=success] i{color:#8cc152}:host[theme=dialogue][color=danger],:host[theme=dialogue][color=danger] i,:host[theme=dialogue][color=error],:host[theme=dialogue][color=error] i,:host[theme=dialogue][color=negative],:host[theme=dialogue][color=negative] i{color:#da4453}:host[theme=dialogue][color=warning],:host[theme=dialogue][color=warning] i{color:#f6b042}:host[theme=dialogue][color=empty],:host[theme=dialogue][color=empty] i{color:#cccdcc}:host[theme=dialogue][color=disabled],:host[theme=dialogue][color=disabled] i{color:#bebebe}:host[theme=dialogue][color=background],:host[theme=dialogue][color=background] i{color:#f7f7f7}:host[theme=dialogue][color=backgroundDark],:host[theme=dialogue][color=backgroundDark] i{color:#e2e2e2}:host[theme=dialogue][color=presentation],:host[theme=dialogue][color=presentation] i{color:#5b6770}:host[theme=dialogue][color=bullhorn],:host[theme=dialogue][color=bullhorn] i{color:#ff6900}:host[theme=dialogue][color=pulse],:host[theme=dialogue][color=pulse] i{color:#3bafda}:host[theme=dialogue][color=company],:host[theme=dialogue][color=company] i{color:#39d}:host[theme=dialogue][color=candidate],:host[theme=dialogue][color=candidate] i{color:#4b7}:host[theme=dialogue][color=lead],:host[theme=dialogue][color=lead] i{color:#a69}:host[theme=dialogue][color=contact],:host[theme=dialogue][color=contact] i{color:#fa4}:host[theme=dialogue][color=opportunity],:host[theme=dialogue][color=opportunity] i{color:#625}:host[theme=dialogue][color=job],:host[theme=dialogue][color=job] i{color:#b56}:host[theme=dialogue][color=submission],:host[theme=dialogue][color=submission] i{color:#a9adbb}:host[theme=dialogue][color=sendout],:host[theme=dialogue][color=sendout] i{color:#747884}:host[theme=dialogue][color=placement],:host[theme=dialogue][color=placement] i{color:#0b344f}:host[theme=dialogue][color=note],:host[theme=dialogue][color=note] i{color:#747884}:host[theme=dialogue][color=contract],:host[theme=dialogue][color=contract] i{color:#454ea0}:host[theme=dialogue][color=billableCharge],:host[theme=dialogue][color=billableCharge] i,:host[theme=dialogue][color=corporateUser],:host[theme=dialogue][color=corporateUser] i,:host[theme=dialogue][color=credential],:host[theme=dialogue][color=credential] i,:host[theme=dialogue][color=distributionList],:host[theme=dialogue][color=distributionList] i,:host[theme=dialogue][color=earnCode],:host[theme=dialogue][color=earnCode] i,:host[theme=dialogue][color=invoiceStatement],:host[theme=dialogue][color=invoiceStatement] i,:host[theme=dialogue][color=jobCode],:host[theme=dialogue][color=jobCode] i,:host[theme=dialogue][color=payableCharge],:host[theme=dialogue][color=payableCharge] i,:host[theme=dialogue][color=person],:host[theme=dialogue][color=person] i,:host[theme=dialogue][color=user],:host[theme=dialogue][color=user] i{color:#696d79}:host[theme=dialogue]:focus,:host[theme=dialogue]:hover{background:#ededed}:host[theme=dialogue]:active{background:#e0e0e0}:host[theme=dialogue][inverse]:focus,:host[theme=dialogue][inverse]:hover{background:rgba(0,0,0,.2)}:host[theme=dialogue][inverse]:active{background:rgba(0,0,0,.35)}", ":host[theme=field]{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;color:#3d464d;font-size:1.2rem;height:1.8rem;margin-bottom:4px;padding:.25rem .5rem;text-align:left}:host[theme=field]:active,:host[theme=field]:focus,:host[theme=field]:hover{border-bottom:1px solid var(--selection)}:host[theme=select]{align-items:center;background-color:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;color:var(--text-main);cursor:pointer;display:flex;font-size:1.2rem;height:2rem;height:1.8rem;justify-content:space-between;min-height:2rem;padding:0;position:relative;text-align:left;text-shadow:none;text-transform:none;width:100%;z-index:1}:host[theme=select].empty{color:var(--text-muted)}:host[theme=select]:focus,:host[theme=select]:hover{outline:none}:host[theme=select]:hover{border-bottom:1px solid #5f6d78}:host[theme=select]:hover i{opacity:.75}:host[theme=select]:focus{border-bottom:1px solid var(--selection)}:host[theme=select]:focus i{color:rgba(0,0,0,.73)}:host[theme=select] i{color:var(--text-main);font-size:.8rem;opacity:.45}"]
                 },] }
     ];
     NovoButtonElement.ctorParameters = function () { return [
@@ -22886,20 +22905,18 @@
                             animations.transition('* => visible', [
                                 animations.style({
                                     opacity: 0,
-                                    visibility: 'visible',
                                 }),
-                                animations.animate('0.3s ease-in'),
+                                animations.animate('0.3s 0.1s ease-in'),
                             ]),
                             animations.transition('* => hidden', [
                                 animations.style({
                                     opacity: 1,
-                                    visibility: 'hidden',
                                 }),
-                                animations.animate('0.3s ease-in'),
+                                animations.animate('0.3s 0.1s ease-in'),
                             ]),
                         ]),
                     ],
-                    styles: ["novo-tooltip div{background:#383838;box-shadow:4px 4px 8px rgba(0,0,0,.3);color:#fff;font-size:12px;line-height:12px;padding:8px 10px;text-shadow:0 -1px 0 #000;white-space:nowrap}novo-tooltip div.error{background-color:#b34e4d;text-shadow:0 -1px 0 #592726}novo-tooltip div.info{background-color:#3986ac;text-shadow:0 -1px 0 #1a3c4d}novo-tooltip div.warning{background-color:#c09854;text-shadow:0 -1px 0 #6c5328}novo-tooltip div.success{background-color:#458746;text-shadow:0 -1px 0 #1a321a}novo-tooltip div.rounded{border-radius:4px}novo-tooltip div.extra-large,novo-tooltip div.large,novo-tooltip div.medium,novo-tooltip div.small{line-height:1.4em;white-space:normal;word-wrap:break-word}novo-tooltip div.extra-large{font-size:1.2vh;width:400px}novo-tooltip div.large{width:300px}novo-tooltip div.medium{width:150px}novo-tooltip div.small{width:80px}novo-tooltip div.preline{white-space:pre-line}novo-tooltip div.top:before{border-top-color:#383838;bottom:0;left:calc(50% - 6px);margin-bottom:-11px}novo-tooltip div.top.error:before{border-top-color:#b34e4d}novo-tooltip div.top.info:before{border-top-color:#3986ac}novo-tooltip div.top.warning:before{border-top-color:#c09854}novo-tooltip div.top.success:before{border-top-color:#458746}novo-tooltip div.top-left:before{border-top-color:#383838;bottom:0;margin-bottom:-11px;margin-right:0;right:0}novo-tooltip div.top-left.error:before{border-top-color:#b34e4d}novo-tooltip div.top-left.info:before{border-top-color:#3986ac}novo-tooltip div.top-left.warning:before{border-top-color:#c09854}novo-tooltip div.top-left.success:before{border-top-color:#458746}novo-tooltip div.top-right:before{border-top-color:#383838;bottom:0;left:0;margin-bottom:-11px;margin-left:0}novo-tooltip div.top-right.error:before{border-top-color:#b34e4d}novo-tooltip div.top-right.info:before{border-top-color:#3986ac}novo-tooltip div.top-right.warning:before{border-top-color:#c09854}novo-tooltip div.top-right.success:before{border-top-color:#458746}novo-tooltip div.bottom:before{border-bottom-color:#383838;left:calc(50% - 6px);margin-top:-11px;top:0}novo-tooltip div.bottom.error:before{border-top-color:#b34e4d}novo-tooltip div.bottom.info:before{border-top-color:#3986ac}novo-tooltip div.bottom.warning:before{border-top-color:#c09854}novo-tooltip div.bottom.success:before{border-top-color:#458746}novo-tooltip div.bottom-left:before{border-bottom-color:#383838;margin-right:0;margin-top:-11px;right:0;top:0}novo-tooltip div.bottom-left.error:before{border-bottom-color:#b34e4d}novo-tooltip div.bottom-left.info:before{border-bottom-color:#3986ac}novo-tooltip div.bottom-left.warning:before{border-bottom-color:#c09854}novo-tooltip div.bottom-left.success:before{border-bottom-color:#458746}novo-tooltip div.bottom-right:before{border-bottom-color:#383838;left:0;margin-left:0;margin-top:-11px;top:0}novo-tooltip div.bottom-right.error:before{border-bottom-color:#b34e4d}novo-tooltip div.bottom-right.info:before{border-bottom-color:#3986ac}novo-tooltip div.bottom-right.warning:before{border-bottom-color:#c09854}novo-tooltip div.bottom-right.success:before{border-bottom-color:#458746}novo-tooltip div.left:before{border-left-color:#383838;bottom:50%;margin-bottom:-6px;margin-right:-11px;right:0}novo-tooltip div.left.error:before{border-left-color:#b34e4d}novo-tooltip div.left.info:before{border-left-color:#3986ac}novo-tooltip div.left.warning:before{border-left-color:#c09854}novo-tooltip div.left.success:before{border-left-color:#458746}novo-tooltip div.right:before{border-right-color:#383838;bottom:50%;left:0;margin-bottom:-6px;margin-left:-11px}novo-tooltip div.right.error:before{border-right-color:#b34e4d}novo-tooltip div.right.info:before{border-right-color:#3986ac}novo-tooltip div.right.warning:before{border-right-color:#c09854}novo-tooltip div.right.success:before{border-right-color:#458746}novo-tooltip div:before{background:0 0;border:6px solid transparent;box-sizing:border-box;content:\"\";position:absolute}"]
+                    styles: ["novo-tooltip div{background:var(--tooltip-background-color,#383838);border-radius:var(--tooltip-border-radius,4px);box-shadow:var(--shadow-2);color:var(--color-white,#fff);font-size:12px;line-height:12px;padding:8px 10px;white-space:nowrap}novo-tooltip div.error{background-color:var(--color-shade-error,#b34e4d)}novo-tooltip div.error.top-left:before,novo-tooltip div.error.top-right:before,novo-tooltip div.error.top:before{border-top-color:var(--color-shade-error,#b34e4d)}novo-tooltip div.error.bottom-left:before,novo-tooltip div.error.bottom-right:before,novo-tooltip div.error.bottom:before{border-bottom-color:var(--color-shade-error,#b34e4d)}novo-tooltip div.error.left:before{border-left-color:var(--color-shade-error,#b34e4d)}novo-tooltip div.error.right:before{border-right-color:var(--color-shade-error,#b34e4d)}novo-tooltip div.info{background-color:var(--color-shade-info,#3986ac)}novo-tooltip div.info.top-left:before,novo-tooltip div.info.top-right:before,novo-tooltip div.info.top:before{border-top-color:var(--color-shade-info,#3986ac)}novo-tooltip div.info.bottom-left:before,novo-tooltip div.info.bottom-right:before,novo-tooltip div.info.bottom:before{border-bottom-color:var(--color-shade-info,#3986ac)}novo-tooltip div.info.left:before{border-left-color:var(--color-shade-info,#3986ac)}novo-tooltip div.info.right:before{border-right-color:var(--color-shade-info,#3986ac)}novo-tooltip div.warning{background-color:var(--color-shade-warning,#c09854)}novo-tooltip div.warning.top-left:before,novo-tooltip div.warning.top-right:before,novo-tooltip div.warning.top:before{border-top-color:var(--color-shade-warning,#c09854)}novo-tooltip div.warning.bottom-left:before,novo-tooltip div.warning.bottom-right:before,novo-tooltip div.warning.bottom:before{border-bottom-color:var(--color-shade-warning,#c09854)}novo-tooltip div.warning.left:before{border-left-color:var(--color-shade-warning,#c09854)}novo-tooltip div.warning.right:before{border-right-color:var(--color-shade-warning,#c09854)}novo-tooltip div.success{background-color:var(--color-shade-success,#458746)}novo-tooltip div.success.top-left:before,novo-tooltip div.success.top-right:before,novo-tooltip div.success.top:before{border-top-color:var(--color-shade-success,#458746)}novo-tooltip div.success.bottom-left:before,novo-tooltip div.success.bottom-right:before,novo-tooltip div.success.bottom:before{border-bottom-color:var(--color-shade-success,#458746)}novo-tooltip div.success.left:before{border-left-color:var(--color-shade-success,#458746)}novo-tooltip div.success.right:before{border-right-color:var(--color-shade-success,#458746)}novo-tooltip div.top-left:before,novo-tooltip div.top-right:before,novo-tooltip div.top:before{border-top-color:var(--tooltip-background-color,#383838)}novo-tooltip div.bottom-left:before,novo-tooltip div.bottom-right:before,novo-tooltip div.bottom:before{border-bottom-color:var(--tooltip-background-color,#383838)}novo-tooltip div.left:before{border-left-color:var(--tooltip-background-color,#383838)}novo-tooltip div.right:before{border-right-color:var(--tooltip-background-color,#383838)}novo-tooltip div.top:before{bottom:0;left:calc(50% - 6px);margin-bottom:-11px}novo-tooltip div.top-left:before{bottom:0;margin-bottom:-11px;margin-right:0;right:1px}novo-tooltip div.top-right:before{bottom:0;left:1px;margin-bottom:-11px;margin-left:0}novo-tooltip div.bottom:before{left:calc(50% - 6px);margin-top:-11px;top:0}novo-tooltip div.bottom-left:before{margin-right:0;margin-top:-11px;right:1px;top:0}novo-tooltip div.bottom-right:before{left:1px;margin-left:0;margin-top:-11px;top:0}novo-tooltip div.left:before{bottom:50%;margin-bottom:-6px;margin-right:-11px;right:0}novo-tooltip div.right:before{bottom:50%;left:0;margin-bottom:-6px;margin-left:-11px}novo-tooltip div:before{background:0 0;border:6px solid transparent;box-sizing:border-box;content:\"\";position:absolute}novo-tooltip div.extra-large,novo-tooltip div.large,novo-tooltip div.medium,novo-tooltip div.small{line-height:1.4em;white-space:normal;word-wrap:break-word}novo-tooltip div.extra-large{font-size:1.2vh;width:400px}novo-tooltip div.large{width:300px}novo-tooltip div.medium{width:150px}novo-tooltip div.small{width:80px}novo-tooltip div.preline{white-space:pre-line}"]
                 },] }
     ];
 
@@ -24338,10 +24355,11 @@
             this.injector = injector;
             this.overlay = overlay;
         }
-        NovoAsideService.prototype.open = function (component, params) {
+        NovoAsideService.prototype.open = function (component, params, config) {
             if (params === void 0) { params = {}; }
+            if (config === void 0) { config = {}; }
             // Override default configuration
-            var asideConfig = DEFAULT_CONFIG;
+            var asideConfig = this.getOverlayConfig(Object.assign(Object.assign({}, DEFAULT_CONFIG), config));
             // Returns an OverlayRef which is a PortalHost
             var overlayRef = this.createOverlay(asideConfig);
             // Instantiate remote control
@@ -24353,7 +24371,6 @@
             return overlayRef;
         };
         NovoAsideService.prototype.createOverlay = function (config) {
-            // const overlayConfig = this.getOverlayConfig(config);
             return this.overlay.create(config);
         };
         NovoAsideService.prototype.attachAsideContainer = function (component, overlayRef, config, asideRef) {
@@ -24368,14 +24385,14 @@
             return new portal.PortalInjector(this.injector, injectionTokens);
         };
         NovoAsideService.prototype.getOverlayConfig = function (config) {
-            var positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
-            var overlayConfig = new i1.OverlayConfig({
-                positionStrategy: positionStrategy,
+            // const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
+            var scrollStrategy = config.hasBackdrop ? this.overlay.scrollStrategies.block() : this.overlay.scrollStrategies.noop();
+            return {
+                scrollStrategy: scrollStrategy,
                 hasBackdrop: config.hasBackdrop,
                 backdropClass: config.backdropClass,
                 panelClass: config.panelClass,
-            });
-            return overlayConfig;
+            };
         };
         return NovoAsideService;
     }());
@@ -24724,7 +24741,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'novo-breadcrumb-item',
                     template: "<ng-container *ngIf=\"showMenu; else breadcrumbContentTpl\">\n  <span [ngClass]=\"{ 'novo-breadcrumb-item-active': isOpen }\" #origin\n    class=\"novo-dropdown-no-border novo-dropdown-origin novo-breadcrumb-dropdown-origin\">\n    <ng-template [ngTemplateOutlet]=\"breadcrumbContentTpl\"></ng-template>\n    <novo-dropdown>\n      <novo-button theme=\"icon\" icon=\"collapse\" size=\"small\"></novo-button>\n      <novo-optgroup class=\"novo-breadcrumb-dropdown-menu\">\n        <div *ngIf=\"isSearch\" class=\"dropdown-search-container\">\n          <novo-search alwaysOpen=\"true\" (searchFn)=\"searchEvent($event)\" [class]=\"'search-in-dropdown'\"></novo-search>\n        </div>\n        <novo-option *ngFor=\"let item of menuListDisplay\" title=\"{{ item.name }}\">\n          <a *ngIf=\"!item.linkType || item.linkType === 'hrefLink'\" [href]=\"item.link\" rel=\"noopener\"\n            [target]=\"item.target ? item.target : '_self'\">{{ item.name }}</a>\n          <a *ngIf=\"item.linkType === 'routerLink'\" rel=\"noopener\" [target]=\"item.target\" [href]=\"item.link\"\n            (click)=\"navigateTo($event, item)\">{{ item.name }}</a>\n        </novo-option>\n      </novo-optgroup>\n    </novo-dropdown>\n  </span>\n</ng-container>\n\n<ng-template #breadcrumbContentTpl>\n  <span class=\"novo-breadcrumb-item\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n\n<ng-template #dropDownMenuTpl>\n  <div>test</div>\n\n</ng-template>\n\n<span class=\"novo-breadcrumb-separator\">\n  <ng-template\n    [ngTemplateOutlet]=\"breadcrumbComponent.separatorIcon ? breadcrumbComponent.separatorIcon : defaultSeparator\"\n    [ngTemplateOutletContext]=\"{\n    $implicit: this\n  }\">\n  </ng-template>\n</span>\n\n<ng-template #defaultSeparator>\n  <span class=\"novo-breadcrumb-separator\">\n    /\n  </span>\n</ng-template>",
-                    styles: [".novo-breadcrumb-font-style,:host .novo-breadcrumb-item,:host .novo-breadcrumb-item ::ng-deep a,:host .novo-breadcrumb-separator{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out}.novo-breadcrumb-font-style.text-nowrap,:host .novo-breadcrumb-item ::ng-deep a.text-nowrap,:host .text-nowrap.novo-breadcrumb-item,:host .text-nowrap.novo-breadcrumb-separator{white-space:nowrap}.novo-breadcrumb-font-style.text-ellipsis,:host .novo-breadcrumb-item ::ng-deep a.text-ellipsis,:host .text-ellipsis.novo-breadcrumb-item,:host .text-ellipsis.novo-breadcrumb-separator{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-breadcrumb-font-style.text-size-default,:host .novo-breadcrumb-item ::ng-deep a.text-size-default,:host .text-size-default.novo-breadcrumb-item,:host .text-size-default.novo-breadcrumb-separator{font-size:inherit}.novo-breadcrumb-font-style.text-size-body,:host .novo-breadcrumb-item ::ng-deep a.text-size-body,:host .text-size-body.novo-breadcrumb-item,:host .text-size-body.novo-breadcrumb-separator{font-size:1.2rem}.novo-breadcrumb-font-style.text-size-xs,:host .novo-breadcrumb-item ::ng-deep a.text-size-xs,:host .text-size-xs.novo-breadcrumb-item,:host .text-size-xs.novo-breadcrumb-separator{font-size:.8rem}.novo-breadcrumb-font-style.text-size-sm,:host .novo-breadcrumb-item ::ng-deep a.text-size-sm,:host .text-size-sm.novo-breadcrumb-item,:host .text-size-sm.novo-breadcrumb-separator{font-size:1rem}.novo-breadcrumb-font-style.text-size-md,:host .novo-breadcrumb-item ::ng-deep a.text-size-md,:host .text-size-md.novo-breadcrumb-item,:host .text-size-md.novo-breadcrumb-separator{font-size:1.2rem}.novo-breadcrumb-font-style.text-size-lg,:host .novo-breadcrumb-item ::ng-deep a.text-size-lg,:host .text-size-lg.novo-breadcrumb-item,:host .text-size-lg.novo-breadcrumb-separator{font-size:1.6rem}.novo-breadcrumb-font-style.text-size-xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-xl,:host .text-size-xl.novo-breadcrumb-item,:host .text-size-xl.novo-breadcrumb-separator{font-size:2rem}.novo-breadcrumb-font-style.text-size-2xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-2xl,:host .text-size-2xl.novo-breadcrumb-item,:host .text-size-2xl.novo-breadcrumb-separator{font-size:2.6rem}.novo-breadcrumb-font-style.text-size-3xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-3xl,:host .text-size-3xl.novo-breadcrumb-item,:host .text-size-3xl.novo-breadcrumb-separator{font-size:3.2rem}.novo-breadcrumb-font-style.text-size-smaller,:host .novo-breadcrumb-item ::ng-deep a.text-size-smaller,:host .text-size-smaller.novo-breadcrumb-item,:host .text-size-smaller.novo-breadcrumb-separator{font-size:.8em}.novo-breadcrumb-font-style.text-size-larger,:host .novo-breadcrumb-item ::ng-deep a.text-size-larger,:host .text-size-larger.novo-breadcrumb-item,:host .text-size-larger.novo-breadcrumb-separator{font-size:1.2em}.novo-breadcrumb-font-style.text-color-black,:host .novo-breadcrumb-item ::ng-deep a.text-color-black,:host .text-color-black.novo-breadcrumb-item,:host .text-color-black.novo-breadcrumb-separator{color:#000}.novo-breadcrumb-font-style.text-color-white,:host .novo-breadcrumb-item ::ng-deep a.text-color-white,:host .text-color-white.novo-breadcrumb-item,:host .text-color-white.novo-breadcrumb-separator{color:#fff}.novo-breadcrumb-font-style.text-color-gray,.novo-breadcrumb-font-style.text-color-grey,:host .novo-breadcrumb-item ::ng-deep a.text-color-gray,:host .novo-breadcrumb-item ::ng-deep a.text-color-grey,:host .text-color-gray.novo-breadcrumb-item,:host .text-color-gray.novo-breadcrumb-separator,:host .text-color-grey.novo-breadcrumb-item,:host .text-color-grey.novo-breadcrumb-separator{color:#9e9e9e}.novo-breadcrumb-font-style.text-color-bright,.novo-breadcrumb-font-style.text-color-offWhite,:host .novo-breadcrumb-item ::ng-deep a.text-color-bright,:host .novo-breadcrumb-item ::ng-deep a.text-color-offWhite,:host .text-color-bright.novo-breadcrumb-item,:host .text-color-bright.novo-breadcrumb-separator,:host .text-color-offWhite.novo-breadcrumb-item,:host .text-color-offWhite.novo-breadcrumb-separator{color:#f7f7f7}.novo-breadcrumb-font-style.text-color-light,:host .novo-breadcrumb-item ::ng-deep a.text-color-light,:host .text-color-light.novo-breadcrumb-item,:host .text-color-light.novo-breadcrumb-separator{color:#dbdbdb}.novo-breadcrumb-font-style.text-color-neutral,:host .novo-breadcrumb-item ::ng-deep a.text-color-neutral,:host .text-color-neutral.novo-breadcrumb-item,:host .text-color-neutral.novo-breadcrumb-separator{color:#4f5361}.novo-breadcrumb-font-style.text-color-dark,:host .novo-breadcrumb-item ::ng-deep a.text-color-dark,:host .text-color-dark.novo-breadcrumb-item,:host .text-color-dark.novo-breadcrumb-separator{color:#3d464d}.novo-breadcrumb-font-style.text-color-orange,:host .novo-breadcrumb-item ::ng-deep a.text-color-orange,:host .text-color-orange.novo-breadcrumb-item,:host .text-color-orange.novo-breadcrumb-separator{color:#ff6900}.novo-breadcrumb-font-style.text-color-navigation,:host .novo-breadcrumb-item ::ng-deep a.text-color-navigation,:host .text-color-navigation.novo-breadcrumb-item,:host .text-color-navigation.novo-breadcrumb-separator{color:#202945}.novo-breadcrumb-font-style.text-color-skyBlue,:host .novo-breadcrumb-item ::ng-deep a.text-color-skyBlue,:host .text-color-skyBlue.novo-breadcrumb-item,:host .text-color-skyBlue.novo-breadcrumb-separator{color:#009bdf}.novo-breadcrumb-font-style.text-color-steel,:host .novo-breadcrumb-item ::ng-deep a.text-color-steel,:host .text-color-steel.novo-breadcrumb-item,:host .text-color-steel.novo-breadcrumb-separator{color:#5b6770}.novo-breadcrumb-font-style.text-color-metal,:host .novo-breadcrumb-item ::ng-deep a.text-color-metal,:host .text-color-metal.novo-breadcrumb-item,:host .text-color-metal.novo-breadcrumb-separator{color:#637893}.novo-breadcrumb-font-style.text-color-sand,:host .novo-breadcrumb-item ::ng-deep a.text-color-sand,:host .text-color-sand.novo-breadcrumb-item,:host .text-color-sand.novo-breadcrumb-separator{color:#f4f4f4}.novo-breadcrumb-font-style.text-color-silver,:host .novo-breadcrumb-item ::ng-deep a.text-color-silver,:host .text-color-silver.novo-breadcrumb-item,:host .text-color-silver.novo-breadcrumb-separator{color:#e2e2e2}.novo-breadcrumb-font-style.text-color-stone,:host .novo-breadcrumb-item ::ng-deep a.text-color-stone,:host .text-color-stone.novo-breadcrumb-item,:host .text-color-stone.novo-breadcrumb-separator{color:#bebebe}.novo-breadcrumb-font-style.text-color-ash,:host .novo-breadcrumb-item ::ng-deep a.text-color-ash,:host .text-color-ash.novo-breadcrumb-item,:host .text-color-ash.novo-breadcrumb-separator{color:#a0a0a0}.novo-breadcrumb-font-style.text-color-slate,:host .novo-breadcrumb-item ::ng-deep a.text-color-slate,:host .text-color-slate.novo-breadcrumb-item,:host .text-color-slate.novo-breadcrumb-separator{color:#707070}.novo-breadcrumb-font-style.text-color-onyx,:host .novo-breadcrumb-item ::ng-deep a.text-color-onyx,:host .text-color-onyx.novo-breadcrumb-item,:host .text-color-onyx.novo-breadcrumb-separator{color:#526980}.novo-breadcrumb-font-style.text-color-charcoal,:host .novo-breadcrumb-item ::ng-deep a.text-color-charcoal,:host .text-color-charcoal.novo-breadcrumb-item,:host .text-color-charcoal.novo-breadcrumb-separator{color:#282828}.novo-breadcrumb-font-style.text-color-moonlight,:host .novo-breadcrumb-item ::ng-deep a.text-color-moonlight,:host .text-color-moonlight.novo-breadcrumb-item,:host .text-color-moonlight.novo-breadcrumb-separator{color:#1a242f}.novo-breadcrumb-font-style.text-color-midnight,:host .novo-breadcrumb-item ::ng-deep a.text-color-midnight,:host .text-color-midnight.novo-breadcrumb-item,:host .text-color-midnight.novo-breadcrumb-separator{color:#202945}.novo-breadcrumb-font-style.text-color-darkness,:host .novo-breadcrumb-item ::ng-deep a.text-color-darkness,:host .text-color-darkness.novo-breadcrumb-item,:host .text-color-darkness.novo-breadcrumb-separator{color:#161f27}.novo-breadcrumb-font-style.text-color-navy,:host .novo-breadcrumb-item ::ng-deep a.text-color-navy,:host .text-color-navy.novo-breadcrumb-item,:host .text-color-navy.novo-breadcrumb-separator{color:#0d2d42}.novo-breadcrumb-font-style.text-color-aqua,:host .novo-breadcrumb-item ::ng-deep a.text-color-aqua,:host .text-color-aqua.novo-breadcrumb-item,:host .text-color-aqua.novo-breadcrumb-separator{color:#3bafda}.novo-breadcrumb-font-style.text-color-ocean,:host .novo-breadcrumb-item ::ng-deep a.text-color-ocean,:host .text-color-ocean.novo-breadcrumb-item,:host .text-color-ocean.novo-breadcrumb-separator{color:#4a89dc}.novo-breadcrumb-font-style.text-color-mint,:host .novo-breadcrumb-item ::ng-deep a.text-color-mint,:host .text-color-mint.novo-breadcrumb-item,:host .text-color-mint.novo-breadcrumb-separator{color:#37bc9b}.novo-breadcrumb-font-style.text-color-grass,:host .novo-breadcrumb-item ::ng-deep a.text-color-grass,:host .text-color-grass.novo-breadcrumb-item,:host .text-color-grass.novo-breadcrumb-separator{color:#8cc152}.novo-breadcrumb-font-style.text-color-sunflower,:host .novo-breadcrumb-item ::ng-deep a.text-color-sunflower,:host .text-color-sunflower.novo-breadcrumb-item,:host .text-color-sunflower.novo-breadcrumb-separator{color:#f6b042}.novo-breadcrumb-font-style.text-color-bittersweet,:host .novo-breadcrumb-item ::ng-deep a.text-color-bittersweet,:host .text-color-bittersweet.novo-breadcrumb-item,:host .text-color-bittersweet.novo-breadcrumb-separator{color:#eb6845}.novo-breadcrumb-font-style.text-color-grapefruit,:host .novo-breadcrumb-item ::ng-deep a.text-color-grapefruit,:host .text-color-grapefruit.novo-breadcrumb-item,:host .text-color-grapefruit.novo-breadcrumb-separator{color:#da4453}.novo-breadcrumb-font-style.text-color-carnation,:host .novo-breadcrumb-item ::ng-deep a.text-color-carnation,:host .text-color-carnation.novo-breadcrumb-item,:host .text-color-carnation.novo-breadcrumb-separator{color:#d770ad}.novo-breadcrumb-font-style.text-color-lavender,:host .novo-breadcrumb-item ::ng-deep a.text-color-lavender,:host .text-color-lavender.novo-breadcrumb-item,:host .text-color-lavender.novo-breadcrumb-separator{color:#967adc}.novo-breadcrumb-font-style.text-color-mountain,:host .novo-breadcrumb-item ::ng-deep a.text-color-mountain,:host .text-color-mountain.novo-breadcrumb-item,:host .text-color-mountain.novo-breadcrumb-separator{color:#9678b6}.novo-breadcrumb-font-style.text-color-info,.novo-breadcrumb-font-style.text-color-positive,:host .novo-breadcrumb-item ::ng-deep a.text-color-info,:host .novo-breadcrumb-item ::ng-deep a.text-color-positive,:host .text-color-info.novo-breadcrumb-item,:host .text-color-info.novo-breadcrumb-separator,:host .text-color-positive.novo-breadcrumb-item,:host .text-color-positive.novo-breadcrumb-separator{color:#4a89dc}.novo-breadcrumb-font-style.text-color-success,:host .novo-breadcrumb-item ::ng-deep a.text-color-success,:host .text-color-success.novo-breadcrumb-item,:host .text-color-success.novo-breadcrumb-separator{color:#8cc152}.novo-breadcrumb-font-style.text-color-danger,.novo-breadcrumb-font-style.text-color-error,.novo-breadcrumb-font-style.text-color-negative,:host .novo-breadcrumb-item ::ng-deep a.text-color-danger,:host .novo-breadcrumb-item ::ng-deep a.text-color-error,:host .novo-breadcrumb-item ::ng-deep a.text-color-negative,:host .text-color-danger.novo-breadcrumb-item,:host .text-color-danger.novo-breadcrumb-separator,:host .text-color-error.novo-breadcrumb-item,:host .text-color-error.novo-breadcrumb-separator,:host .text-color-negative.novo-breadcrumb-item,:host .text-color-negative.novo-breadcrumb-separator{color:#da4453}.novo-breadcrumb-font-style.text-color-warning,:host .novo-breadcrumb-item ::ng-deep a.text-color-warning,:host .text-color-warning.novo-breadcrumb-item,:host .text-color-warning.novo-breadcrumb-separator{color:#f6b042}.novo-breadcrumb-font-style.text-color-empty,:host .novo-breadcrumb-item ::ng-deep a.text-color-empty,:host .text-color-empty.novo-breadcrumb-item,:host .text-color-empty.novo-breadcrumb-separator{color:#cccdcc}.novo-breadcrumb-font-style.text-color-disabled,:host .novo-breadcrumb-item ::ng-deep a.text-color-disabled,:host .text-color-disabled.novo-breadcrumb-item,:host .text-color-disabled.novo-breadcrumb-separator{color:#bebebe}.novo-breadcrumb-font-style.text-color-background,:host .novo-breadcrumb-item ::ng-deep a.text-color-background,:host .text-color-background.novo-breadcrumb-item,:host .text-color-background.novo-breadcrumb-separator{color:#f7f7f7}.novo-breadcrumb-font-style.text-color-backgroundDark,:host .novo-breadcrumb-item ::ng-deep a.text-color-backgroundDark,:host .text-color-backgroundDark.novo-breadcrumb-item,:host .text-color-backgroundDark.novo-breadcrumb-separator{color:#e2e2e2}.novo-breadcrumb-font-style.text-color-presentation,:host .novo-breadcrumb-item ::ng-deep a.text-color-presentation,:host .text-color-presentation.novo-breadcrumb-item,:host .text-color-presentation.novo-breadcrumb-separator{color:#5b6770}.novo-breadcrumb-font-style.text-color-bullhorn,:host .novo-breadcrumb-item ::ng-deep a.text-color-bullhorn,:host .text-color-bullhorn.novo-breadcrumb-item,:host .text-color-bullhorn.novo-breadcrumb-separator{color:#ff6900}.novo-breadcrumb-font-style.text-color-pulse,:host .novo-breadcrumb-item ::ng-deep a.text-color-pulse,:host .text-color-pulse.novo-breadcrumb-item,:host .text-color-pulse.novo-breadcrumb-separator{color:#3bafda}.novo-breadcrumb-font-style.text-color-company,:host .novo-breadcrumb-item ::ng-deep a.text-color-company,:host .text-color-company.novo-breadcrumb-item,:host .text-color-company.novo-breadcrumb-separator{color:#39d}.novo-breadcrumb-font-style.text-color-candidate,:host .novo-breadcrumb-item ::ng-deep a.text-color-candidate,:host .text-color-candidate.novo-breadcrumb-item,:host .text-color-candidate.novo-breadcrumb-separator{color:#4b7}.novo-breadcrumb-font-style.text-color-lead,:host .novo-breadcrumb-item ::ng-deep a.text-color-lead,:host .text-color-lead.novo-breadcrumb-item,:host .text-color-lead.novo-breadcrumb-separator{color:#a69}.novo-breadcrumb-font-style.text-color-contact,:host .novo-breadcrumb-item ::ng-deep a.text-color-contact,:host .text-color-contact.novo-breadcrumb-item,:host .text-color-contact.novo-breadcrumb-separator{color:#fa4}.novo-breadcrumb-font-style.text-color-opportunity,:host .novo-breadcrumb-item ::ng-deep a.text-color-opportunity,:host .text-color-opportunity.novo-breadcrumb-item,:host .text-color-opportunity.novo-breadcrumb-separator{color:#625}.novo-breadcrumb-font-style.text-color-job,:host .novo-breadcrumb-item ::ng-deep a.text-color-job,:host .text-color-job.novo-breadcrumb-item,:host .text-color-job.novo-breadcrumb-separator{color:#b56}.novo-breadcrumb-font-style.text-color-submission,:host .novo-breadcrumb-item ::ng-deep a.text-color-submission,:host .text-color-submission.novo-breadcrumb-item,:host .text-color-submission.novo-breadcrumb-separator{color:#a9adbb}.novo-breadcrumb-font-style.text-color-sendout,:host .novo-breadcrumb-item ::ng-deep a.text-color-sendout,:host .text-color-sendout.novo-breadcrumb-item,:host .text-color-sendout.novo-breadcrumb-separator{color:#747884}.novo-breadcrumb-font-style.text-color-placement,:host .novo-breadcrumb-item ::ng-deep a.text-color-placement,:host .text-color-placement.novo-breadcrumb-item,:host .text-color-placement.novo-breadcrumb-separator{color:#0b344f}.novo-breadcrumb-font-style.text-color-note,:host .novo-breadcrumb-item ::ng-deep a.text-color-note,:host .text-color-note.novo-breadcrumb-item,:host .text-color-note.novo-breadcrumb-separator{color:#747884}.novo-breadcrumb-font-style.text-color-contract,:host .novo-breadcrumb-item ::ng-deep a.text-color-contract,:host .text-color-contract.novo-breadcrumb-item,:host .text-color-contract.novo-breadcrumb-separator{color:#454ea0}.novo-breadcrumb-font-style.text-color-billableCharge,.novo-breadcrumb-font-style.text-color-corporateUser,.novo-breadcrumb-font-style.text-color-credential,.novo-breadcrumb-font-style.text-color-distributionList,.novo-breadcrumb-font-style.text-color-earnCode,.novo-breadcrumb-font-style.text-color-invoiceStatement,.novo-breadcrumb-font-style.text-color-jobCode,.novo-breadcrumb-font-style.text-color-payableCharge,.novo-breadcrumb-font-style.text-color-person,.novo-breadcrumb-font-style.text-color-user,:host .novo-breadcrumb-item ::ng-deep a.text-color-billableCharge,:host .novo-breadcrumb-item ::ng-deep a.text-color-corporateUser,:host .novo-breadcrumb-item ::ng-deep a.text-color-credential,:host .novo-breadcrumb-item ::ng-deep a.text-color-distributionList,:host .novo-breadcrumb-item ::ng-deep a.text-color-earnCode,:host .novo-breadcrumb-item ::ng-deep a.text-color-invoiceStatement,:host .novo-breadcrumb-item ::ng-deep a.text-color-jobCode,:host .novo-breadcrumb-item ::ng-deep a.text-color-payableCharge,:host .novo-breadcrumb-item ::ng-deep a.text-color-person,:host .novo-breadcrumb-item ::ng-deep a.text-color-user,:host .text-color-billableCharge.novo-breadcrumb-item,:host .text-color-billableCharge.novo-breadcrumb-separator,:host .text-color-corporateUser.novo-breadcrumb-item,:host .text-color-corporateUser.novo-breadcrumb-separator,:host .text-color-credential.novo-breadcrumb-item,:host .text-color-credential.novo-breadcrumb-separator,:host .text-color-distributionList.novo-breadcrumb-item,:host .text-color-distributionList.novo-breadcrumb-separator,:host .text-color-earnCode.novo-breadcrumb-item,:host .text-color-earnCode.novo-breadcrumb-separator,:host .text-color-invoiceStatement.novo-breadcrumb-item,:host .text-color-invoiceStatement.novo-breadcrumb-separator,:host .text-color-jobCode.novo-breadcrumb-item,:host .text-color-jobCode.novo-breadcrumb-separator,:host .text-color-payableCharge.novo-breadcrumb-item,:host .text-color-payableCharge.novo-breadcrumb-separator,:host .text-color-person.novo-breadcrumb-item,:host .text-color-person.novo-breadcrumb-separator,:host .text-color-user.novo-breadcrumb-item,:host .text-color-user.novo-breadcrumb-separator{color:#696d79}.novo-breadcrumb-font-style.margin-before,:host .margin-before.novo-breadcrumb-item,:host .margin-before.novo-breadcrumb-separator,:host .novo-breadcrumb-item ::ng-deep a.margin-before{margin-top:.4rem}.novo-breadcrumb-font-style.margin-after,:host .margin-after.novo-breadcrumb-item,:host .margin-after.novo-breadcrumb-separator,:host .novo-breadcrumb-item ::ng-deep a.margin-after{margin-bottom:.8rem}.novo-breadcrumb-font-style.text-length-small,:host .novo-breadcrumb-item ::ng-deep a.text-length-small,:host .text-length-small.novo-breadcrumb-item,:host .text-length-small.novo-breadcrumb-separator{max-width:40ch}.novo-breadcrumb-font-style.text-length-medium,:host .novo-breadcrumb-item ::ng-deep a.text-length-medium,:host .text-length-medium.novo-breadcrumb-item,:host .text-length-medium.novo-breadcrumb-separator{max-width:55ch}.novo-breadcrumb-font-style.text-length-large,:host .novo-breadcrumb-item ::ng-deep a.text-length-large,:host .text-length-large.novo-breadcrumb-item,:host .text-length-large.novo-breadcrumb-separator{max-width:70ch}.novo-breadcrumb-font-style.text-weight-hairline,:host .novo-breadcrumb-item ::ng-deep a.text-weight-hairline,:host .text-weight-hairline.novo-breadcrumb-item,:host .text-weight-hairline.novo-breadcrumb-separator{font-weight:100}.novo-breadcrumb-font-style.text-weight-thin,:host .novo-breadcrumb-item ::ng-deep a.text-weight-thin,:host .text-weight-thin.novo-breadcrumb-item,:host .text-weight-thin.novo-breadcrumb-separator{font-weight:200}.novo-breadcrumb-font-style.text-weight-light,:host .novo-breadcrumb-item ::ng-deep a.text-weight-light,:host .text-weight-light.novo-breadcrumb-item,:host .text-weight-light.novo-breadcrumb-separator{font-weight:300}.novo-breadcrumb-font-style.text-weight-normal,:host .novo-breadcrumb-item ::ng-deep a.text-weight-normal,:host .text-weight-normal.novo-breadcrumb-item,:host .text-weight-normal.novo-breadcrumb-separator{font-weight:400}.novo-breadcrumb-font-style.text-weight-medium,:host .novo-breadcrumb-item ::ng-deep a.text-weight-medium,:host .text-weight-medium.novo-breadcrumb-item,:host .text-weight-medium.novo-breadcrumb-separator{font-weight:500}.novo-breadcrumb-font-style.text-weight-semibold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-semibold,:host .text-weight-semibold.novo-breadcrumb-item,:host .text-weight-semibold.novo-breadcrumb-separator{font-weight:600}.novo-breadcrumb-font-style.text-weight-bold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-bold,:host .text-weight-bold.novo-breadcrumb-item,:host .text-weight-bold.novo-breadcrumb-separator{font-weight:700}.novo-breadcrumb-font-style.text-weight-extrabold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-extrabold,:host .text-weight-extrabold.novo-breadcrumb-item,:host .text-weight-extrabold.novo-breadcrumb-separator{font-weight:800}.novo-breadcrumb-font-style.text-weight-heavy,:host .novo-breadcrumb-item ::ng-deep a.text-weight-heavy,:host .text-weight-heavy.novo-breadcrumb-item,:host .text-weight-heavy.novo-breadcrumb-separator{font-weight:900}.novo-breadcrumb-font-style.text-weight-lighter,:host .novo-breadcrumb-item ::ng-deep a.text-weight-lighter,:host .text-weight-lighter.novo-breadcrumb-item,:host .text-weight-lighter.novo-breadcrumb-separator{font-weight:lighter}.novo-breadcrumb-font-style.text-weight-bolder,:host .novo-breadcrumb-item ::ng-deep a.text-weight-bolder,:host .text-weight-bolder.novo-breadcrumb-item,:host .text-weight-bolder.novo-breadcrumb-separator{font-weight:bolder}:host,:host .novo-breadcrumb-item{align-items:center;display:flex;flex-flow:row nowrap}:host .novo-breadcrumb-item{cursor:auto}:host .novo-breadcrumb-item ::ng-deep a:hover{text-decoration:none}:host .novo-breadcrumb-item ::ng-deep a{color:#4a89dc;cursor:pointer}:host .novo-breadcrumb-item ::ng-deep a:focus{text-decoration:none}:host .novo-breadcrumb-down-icon{cursor:pointer;display:inline-block;height:16px;margin-right:-5px;outline:none;text-align:center;vertical-align:middle;width:16px}:host .novo-breadcrumb-down-icon:hover svg g polygon{fill:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active{color:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active ::ng-deep a{color:var(--text-main,#3d464d);text-decoration:none}:host .novo-breadcrumb-item-active svg g polygon{fill:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active span{color:var(--text-main,#3d464d)}:host .novo-breadcrumb-separator{margin:0 3px}:host .novo-breadcrumb-dropdown-menu{max-width:200px;padding:10px 0}:host .novo-breadcrumb-dropdown-menu li{cursor:pointer;font-size:12px;line-height:36px;overflow:hidden;padding:0 15px;text-overflow:ellipsis;white-space:nowrap;width:200px}:host .novo-breadcrumb-dropdown-menu li a{color:#3d464d;display:inline-block;line-height:36px;width:170px}:host .novo-breadcrumb-dropdown-menu li a:focus{text-decoration:none}:host .novo-breadcrumb-dropdown-menu li:hover{background:#dbdbdb}:host .novo-breadcrumb-dropdown-menu li:hover a{text-decoration:none}:host .novo-search-container{max-width:200px}:host span.novo-breadcrumb-dropdown-origin{display:inline-flex;min-width:unset;padding:0}:host novo-search{width:100%}"]
+                    styles: [".novo-breadcrumb-font-style,:host .novo-breadcrumb-item,:host .novo-breadcrumb-item ::ng-deep a,:host .novo-breadcrumb-separator{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}.novo-breadcrumb-font-style.text-nowrap,:host .novo-breadcrumb-item ::ng-deep a.text-nowrap,:host .text-nowrap.novo-breadcrumb-item,:host .text-nowrap.novo-breadcrumb-separator{white-space:nowrap}.novo-breadcrumb-font-style.text-ellipsis,:host .novo-breadcrumb-item ::ng-deep a.text-ellipsis,:host .text-ellipsis.novo-breadcrumb-item,:host .text-ellipsis.novo-breadcrumb-separator{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-breadcrumb-font-style.text-size-default,:host .novo-breadcrumb-item ::ng-deep a.text-size-default,:host .text-size-default.novo-breadcrumb-item,:host .text-size-default.novo-breadcrumb-separator{font-size:inherit}.novo-breadcrumb-font-style.text-size-body,:host .novo-breadcrumb-item ::ng-deep a.text-size-body,:host .text-size-body.novo-breadcrumb-item,:host .text-size-body.novo-breadcrumb-separator{font-size:1.3rem}.novo-breadcrumb-font-style.text-size-xs,:host .novo-breadcrumb-item ::ng-deep a.text-size-xs,:host .text-size-xs.novo-breadcrumb-item,:host .text-size-xs.novo-breadcrumb-separator{font-size:1rem}.novo-breadcrumb-font-style.text-size-sm,:host .novo-breadcrumb-item ::ng-deep a.text-size-sm,:host .text-size-sm.novo-breadcrumb-item,:host .text-size-sm.novo-breadcrumb-separator{font-size:1.2rem}.novo-breadcrumb-font-style.text-size-md,:host .novo-breadcrumb-item ::ng-deep a.text-size-md,:host .text-size-md.novo-breadcrumb-item,:host .text-size-md.novo-breadcrumb-separator{font-size:1.3rem}.novo-breadcrumb-font-style.text-size-lg,:host .novo-breadcrumb-item ::ng-deep a.text-size-lg,:host .text-size-lg.novo-breadcrumb-item,:host .text-size-lg.novo-breadcrumb-separator{font-size:1.6rem}.novo-breadcrumb-font-style.text-size-xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-xl,:host .text-size-xl.novo-breadcrumb-item,:host .text-size-xl.novo-breadcrumb-separator{font-size:2rem}.novo-breadcrumb-font-style.text-size-2xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-2xl,:host .text-size-2xl.novo-breadcrumb-item,:host .text-size-2xl.novo-breadcrumb-separator{font-size:2.6rem}.novo-breadcrumb-font-style.text-size-3xl,:host .novo-breadcrumb-item ::ng-deep a.text-size-3xl,:host .text-size-3xl.novo-breadcrumb-item,:host .text-size-3xl.novo-breadcrumb-separator{font-size:3.2rem}.novo-breadcrumb-font-style.text-size-smaller,:host .novo-breadcrumb-item ::ng-deep a.text-size-smaller,:host .text-size-smaller.novo-breadcrumb-item,:host .text-size-smaller.novo-breadcrumb-separator{font-size:.8em}.novo-breadcrumb-font-style.text-size-larger,:host .novo-breadcrumb-item ::ng-deep a.text-size-larger,:host .text-size-larger.novo-breadcrumb-item,:host .text-size-larger.novo-breadcrumb-separator{font-size:1.2em}.novo-breadcrumb-font-style.text-color-black,:host .novo-breadcrumb-item ::ng-deep a.text-color-black,:host .text-color-black.novo-breadcrumb-item,:host .text-color-black.novo-breadcrumb-separator{color:#000}.novo-breadcrumb-font-style.text-color-white,:host .novo-breadcrumb-item ::ng-deep a.text-color-white,:host .text-color-white.novo-breadcrumb-item,:host .text-color-white.novo-breadcrumb-separator{color:#fff}.novo-breadcrumb-font-style.text-color-gray,.novo-breadcrumb-font-style.text-color-grey,:host .novo-breadcrumb-item ::ng-deep a.text-color-gray,:host .novo-breadcrumb-item ::ng-deep a.text-color-grey,:host .text-color-gray.novo-breadcrumb-item,:host .text-color-gray.novo-breadcrumb-separator,:host .text-color-grey.novo-breadcrumb-item,:host .text-color-grey.novo-breadcrumb-separator{color:#9e9e9e}.novo-breadcrumb-font-style.text-color-bright,.novo-breadcrumb-font-style.text-color-offWhite,:host .novo-breadcrumb-item ::ng-deep a.text-color-bright,:host .novo-breadcrumb-item ::ng-deep a.text-color-offWhite,:host .text-color-bright.novo-breadcrumb-item,:host .text-color-bright.novo-breadcrumb-separator,:host .text-color-offWhite.novo-breadcrumb-item,:host .text-color-offWhite.novo-breadcrumb-separator{color:#f7f7f7}.novo-breadcrumb-font-style.text-color-light,:host .novo-breadcrumb-item ::ng-deep a.text-color-light,:host .text-color-light.novo-breadcrumb-item,:host .text-color-light.novo-breadcrumb-separator{color:#dbdbdb}.novo-breadcrumb-font-style.text-color-neutral,:host .novo-breadcrumb-item ::ng-deep a.text-color-neutral,:host .text-color-neutral.novo-breadcrumb-item,:host .text-color-neutral.novo-breadcrumb-separator{color:#4f5361}.novo-breadcrumb-font-style.text-color-dark,:host .novo-breadcrumb-item ::ng-deep a.text-color-dark,:host .text-color-dark.novo-breadcrumb-item,:host .text-color-dark.novo-breadcrumb-separator{color:#3d464d}.novo-breadcrumb-font-style.text-color-orange,:host .novo-breadcrumb-item ::ng-deep a.text-color-orange,:host .text-color-orange.novo-breadcrumb-item,:host .text-color-orange.novo-breadcrumb-separator{color:#ff6900}.novo-breadcrumb-font-style.text-color-navigation,:host .novo-breadcrumb-item ::ng-deep a.text-color-navigation,:host .text-color-navigation.novo-breadcrumb-item,:host .text-color-navigation.novo-breadcrumb-separator{color:#202945}.novo-breadcrumb-font-style.text-color-skyBlue,:host .novo-breadcrumb-item ::ng-deep a.text-color-skyBlue,:host .text-color-skyBlue.novo-breadcrumb-item,:host .text-color-skyBlue.novo-breadcrumb-separator{color:#009bdf}.novo-breadcrumb-font-style.text-color-steel,:host .novo-breadcrumb-item ::ng-deep a.text-color-steel,:host .text-color-steel.novo-breadcrumb-item,:host .text-color-steel.novo-breadcrumb-separator{color:#5b6770}.novo-breadcrumb-font-style.text-color-metal,:host .novo-breadcrumb-item ::ng-deep a.text-color-metal,:host .text-color-metal.novo-breadcrumb-item,:host .text-color-metal.novo-breadcrumb-separator{color:#637893}.novo-breadcrumb-font-style.text-color-sand,:host .novo-breadcrumb-item ::ng-deep a.text-color-sand,:host .text-color-sand.novo-breadcrumb-item,:host .text-color-sand.novo-breadcrumb-separator{color:#f4f4f4}.novo-breadcrumb-font-style.text-color-silver,:host .novo-breadcrumb-item ::ng-deep a.text-color-silver,:host .text-color-silver.novo-breadcrumb-item,:host .text-color-silver.novo-breadcrumb-separator{color:#e2e2e2}.novo-breadcrumb-font-style.text-color-stone,:host .novo-breadcrumb-item ::ng-deep a.text-color-stone,:host .text-color-stone.novo-breadcrumb-item,:host .text-color-stone.novo-breadcrumb-separator{color:#bebebe}.novo-breadcrumb-font-style.text-color-ash,:host .novo-breadcrumb-item ::ng-deep a.text-color-ash,:host .text-color-ash.novo-breadcrumb-item,:host .text-color-ash.novo-breadcrumb-separator{color:#a0a0a0}.novo-breadcrumb-font-style.text-color-slate,:host .novo-breadcrumb-item ::ng-deep a.text-color-slate,:host .text-color-slate.novo-breadcrumb-item,:host .text-color-slate.novo-breadcrumb-separator{color:#707070}.novo-breadcrumb-font-style.text-color-onyx,:host .novo-breadcrumb-item ::ng-deep a.text-color-onyx,:host .text-color-onyx.novo-breadcrumb-item,:host .text-color-onyx.novo-breadcrumb-separator{color:#526980}.novo-breadcrumb-font-style.text-color-charcoal,:host .novo-breadcrumb-item ::ng-deep a.text-color-charcoal,:host .text-color-charcoal.novo-breadcrumb-item,:host .text-color-charcoal.novo-breadcrumb-separator{color:#282828}.novo-breadcrumb-font-style.text-color-moonlight,:host .novo-breadcrumb-item ::ng-deep a.text-color-moonlight,:host .text-color-moonlight.novo-breadcrumb-item,:host .text-color-moonlight.novo-breadcrumb-separator{color:#1a242f}.novo-breadcrumb-font-style.text-color-midnight,:host .novo-breadcrumb-item ::ng-deep a.text-color-midnight,:host .text-color-midnight.novo-breadcrumb-item,:host .text-color-midnight.novo-breadcrumb-separator{color:#202945}.novo-breadcrumb-font-style.text-color-darkness,:host .novo-breadcrumb-item ::ng-deep a.text-color-darkness,:host .text-color-darkness.novo-breadcrumb-item,:host .text-color-darkness.novo-breadcrumb-separator{color:#161f27}.novo-breadcrumb-font-style.text-color-navy,:host .novo-breadcrumb-item ::ng-deep a.text-color-navy,:host .text-color-navy.novo-breadcrumb-item,:host .text-color-navy.novo-breadcrumb-separator{color:#0d2d42}.novo-breadcrumb-font-style.text-color-aqua,:host .novo-breadcrumb-item ::ng-deep a.text-color-aqua,:host .text-color-aqua.novo-breadcrumb-item,:host .text-color-aqua.novo-breadcrumb-separator{color:#3bafda}.novo-breadcrumb-font-style.text-color-ocean,:host .novo-breadcrumb-item ::ng-deep a.text-color-ocean,:host .text-color-ocean.novo-breadcrumb-item,:host .text-color-ocean.novo-breadcrumb-separator{color:#4a89dc}.novo-breadcrumb-font-style.text-color-mint,:host .novo-breadcrumb-item ::ng-deep a.text-color-mint,:host .text-color-mint.novo-breadcrumb-item,:host .text-color-mint.novo-breadcrumb-separator{color:#37bc9b}.novo-breadcrumb-font-style.text-color-grass,:host .novo-breadcrumb-item ::ng-deep a.text-color-grass,:host .text-color-grass.novo-breadcrumb-item,:host .text-color-grass.novo-breadcrumb-separator{color:#8cc152}.novo-breadcrumb-font-style.text-color-sunflower,:host .novo-breadcrumb-item ::ng-deep a.text-color-sunflower,:host .text-color-sunflower.novo-breadcrumb-item,:host .text-color-sunflower.novo-breadcrumb-separator{color:#f6b042}.novo-breadcrumb-font-style.text-color-bittersweet,:host .novo-breadcrumb-item ::ng-deep a.text-color-bittersweet,:host .text-color-bittersweet.novo-breadcrumb-item,:host .text-color-bittersweet.novo-breadcrumb-separator{color:#eb6845}.novo-breadcrumb-font-style.text-color-grapefruit,:host .novo-breadcrumb-item ::ng-deep a.text-color-grapefruit,:host .text-color-grapefruit.novo-breadcrumb-item,:host .text-color-grapefruit.novo-breadcrumb-separator{color:#da4453}.novo-breadcrumb-font-style.text-color-carnation,:host .novo-breadcrumb-item ::ng-deep a.text-color-carnation,:host .text-color-carnation.novo-breadcrumb-item,:host .text-color-carnation.novo-breadcrumb-separator{color:#d770ad}.novo-breadcrumb-font-style.text-color-lavender,:host .novo-breadcrumb-item ::ng-deep a.text-color-lavender,:host .text-color-lavender.novo-breadcrumb-item,:host .text-color-lavender.novo-breadcrumb-separator{color:#967adc}.novo-breadcrumb-font-style.text-color-mountain,:host .novo-breadcrumb-item ::ng-deep a.text-color-mountain,:host .text-color-mountain.novo-breadcrumb-item,:host .text-color-mountain.novo-breadcrumb-separator{color:#9678b6}.novo-breadcrumb-font-style.text-color-info,.novo-breadcrumb-font-style.text-color-positive,:host .novo-breadcrumb-item ::ng-deep a.text-color-info,:host .novo-breadcrumb-item ::ng-deep a.text-color-positive,:host .text-color-info.novo-breadcrumb-item,:host .text-color-info.novo-breadcrumb-separator,:host .text-color-positive.novo-breadcrumb-item,:host .text-color-positive.novo-breadcrumb-separator{color:#4a89dc}.novo-breadcrumb-font-style.text-color-success,:host .novo-breadcrumb-item ::ng-deep a.text-color-success,:host .text-color-success.novo-breadcrumb-item,:host .text-color-success.novo-breadcrumb-separator{color:#8cc152}.novo-breadcrumb-font-style.text-color-danger,.novo-breadcrumb-font-style.text-color-error,.novo-breadcrumb-font-style.text-color-negative,:host .novo-breadcrumb-item ::ng-deep a.text-color-danger,:host .novo-breadcrumb-item ::ng-deep a.text-color-error,:host .novo-breadcrumb-item ::ng-deep a.text-color-negative,:host .text-color-danger.novo-breadcrumb-item,:host .text-color-danger.novo-breadcrumb-separator,:host .text-color-error.novo-breadcrumb-item,:host .text-color-error.novo-breadcrumb-separator,:host .text-color-negative.novo-breadcrumb-item,:host .text-color-negative.novo-breadcrumb-separator{color:#da4453}.novo-breadcrumb-font-style.text-color-warning,:host .novo-breadcrumb-item ::ng-deep a.text-color-warning,:host .text-color-warning.novo-breadcrumb-item,:host .text-color-warning.novo-breadcrumb-separator{color:#f6b042}.novo-breadcrumb-font-style.text-color-empty,:host .novo-breadcrumb-item ::ng-deep a.text-color-empty,:host .text-color-empty.novo-breadcrumb-item,:host .text-color-empty.novo-breadcrumb-separator{color:#cccdcc}.novo-breadcrumb-font-style.text-color-disabled,:host .novo-breadcrumb-item ::ng-deep a.text-color-disabled,:host .text-color-disabled.novo-breadcrumb-item,:host .text-color-disabled.novo-breadcrumb-separator{color:#bebebe}.novo-breadcrumb-font-style.text-color-background,:host .novo-breadcrumb-item ::ng-deep a.text-color-background,:host .text-color-background.novo-breadcrumb-item,:host .text-color-background.novo-breadcrumb-separator{color:#f7f7f7}.novo-breadcrumb-font-style.text-color-backgroundDark,:host .novo-breadcrumb-item ::ng-deep a.text-color-backgroundDark,:host .text-color-backgroundDark.novo-breadcrumb-item,:host .text-color-backgroundDark.novo-breadcrumb-separator{color:#e2e2e2}.novo-breadcrumb-font-style.text-color-presentation,:host .novo-breadcrumb-item ::ng-deep a.text-color-presentation,:host .text-color-presentation.novo-breadcrumb-item,:host .text-color-presentation.novo-breadcrumb-separator{color:#5b6770}.novo-breadcrumb-font-style.text-color-bullhorn,:host .novo-breadcrumb-item ::ng-deep a.text-color-bullhorn,:host .text-color-bullhorn.novo-breadcrumb-item,:host .text-color-bullhorn.novo-breadcrumb-separator{color:#ff6900}.novo-breadcrumb-font-style.text-color-pulse,:host .novo-breadcrumb-item ::ng-deep a.text-color-pulse,:host .text-color-pulse.novo-breadcrumb-item,:host .text-color-pulse.novo-breadcrumb-separator{color:#3bafda}.novo-breadcrumb-font-style.text-color-company,:host .novo-breadcrumb-item ::ng-deep a.text-color-company,:host .text-color-company.novo-breadcrumb-item,:host .text-color-company.novo-breadcrumb-separator{color:#39d}.novo-breadcrumb-font-style.text-color-candidate,:host .novo-breadcrumb-item ::ng-deep a.text-color-candidate,:host .text-color-candidate.novo-breadcrumb-item,:host .text-color-candidate.novo-breadcrumb-separator{color:#4b7}.novo-breadcrumb-font-style.text-color-lead,:host .novo-breadcrumb-item ::ng-deep a.text-color-lead,:host .text-color-lead.novo-breadcrumb-item,:host .text-color-lead.novo-breadcrumb-separator{color:#a69}.novo-breadcrumb-font-style.text-color-contact,:host .novo-breadcrumb-item ::ng-deep a.text-color-contact,:host .text-color-contact.novo-breadcrumb-item,:host .text-color-contact.novo-breadcrumb-separator{color:#fa4}.novo-breadcrumb-font-style.text-color-opportunity,:host .novo-breadcrumb-item ::ng-deep a.text-color-opportunity,:host .text-color-opportunity.novo-breadcrumb-item,:host .text-color-opportunity.novo-breadcrumb-separator{color:#625}.novo-breadcrumb-font-style.text-color-job,:host .novo-breadcrumb-item ::ng-deep a.text-color-job,:host .text-color-job.novo-breadcrumb-item,:host .text-color-job.novo-breadcrumb-separator{color:#b56}.novo-breadcrumb-font-style.text-color-submission,:host .novo-breadcrumb-item ::ng-deep a.text-color-submission,:host .text-color-submission.novo-breadcrumb-item,:host .text-color-submission.novo-breadcrumb-separator{color:#a9adbb}.novo-breadcrumb-font-style.text-color-sendout,:host .novo-breadcrumb-item ::ng-deep a.text-color-sendout,:host .text-color-sendout.novo-breadcrumb-item,:host .text-color-sendout.novo-breadcrumb-separator{color:#747884}.novo-breadcrumb-font-style.text-color-placement,:host .novo-breadcrumb-item ::ng-deep a.text-color-placement,:host .text-color-placement.novo-breadcrumb-item,:host .text-color-placement.novo-breadcrumb-separator{color:#0b344f}.novo-breadcrumb-font-style.text-color-note,:host .novo-breadcrumb-item ::ng-deep a.text-color-note,:host .text-color-note.novo-breadcrumb-item,:host .text-color-note.novo-breadcrumb-separator{color:#747884}.novo-breadcrumb-font-style.text-color-contract,:host .novo-breadcrumb-item ::ng-deep a.text-color-contract,:host .text-color-contract.novo-breadcrumb-item,:host .text-color-contract.novo-breadcrumb-separator{color:#454ea0}.novo-breadcrumb-font-style.text-color-billableCharge,.novo-breadcrumb-font-style.text-color-corporateUser,.novo-breadcrumb-font-style.text-color-credential,.novo-breadcrumb-font-style.text-color-distributionList,.novo-breadcrumb-font-style.text-color-earnCode,.novo-breadcrumb-font-style.text-color-invoiceStatement,.novo-breadcrumb-font-style.text-color-jobCode,.novo-breadcrumb-font-style.text-color-payableCharge,.novo-breadcrumb-font-style.text-color-person,.novo-breadcrumb-font-style.text-color-user,:host .novo-breadcrumb-item ::ng-deep a.text-color-billableCharge,:host .novo-breadcrumb-item ::ng-deep a.text-color-corporateUser,:host .novo-breadcrumb-item ::ng-deep a.text-color-credential,:host .novo-breadcrumb-item ::ng-deep a.text-color-distributionList,:host .novo-breadcrumb-item ::ng-deep a.text-color-earnCode,:host .novo-breadcrumb-item ::ng-deep a.text-color-invoiceStatement,:host .novo-breadcrumb-item ::ng-deep a.text-color-jobCode,:host .novo-breadcrumb-item ::ng-deep a.text-color-payableCharge,:host .novo-breadcrumb-item ::ng-deep a.text-color-person,:host .novo-breadcrumb-item ::ng-deep a.text-color-user,:host .text-color-billableCharge.novo-breadcrumb-item,:host .text-color-billableCharge.novo-breadcrumb-separator,:host .text-color-corporateUser.novo-breadcrumb-item,:host .text-color-corporateUser.novo-breadcrumb-separator,:host .text-color-credential.novo-breadcrumb-item,:host .text-color-credential.novo-breadcrumb-separator,:host .text-color-distributionList.novo-breadcrumb-item,:host .text-color-distributionList.novo-breadcrumb-separator,:host .text-color-earnCode.novo-breadcrumb-item,:host .text-color-earnCode.novo-breadcrumb-separator,:host .text-color-invoiceStatement.novo-breadcrumb-item,:host .text-color-invoiceStatement.novo-breadcrumb-separator,:host .text-color-jobCode.novo-breadcrumb-item,:host .text-color-jobCode.novo-breadcrumb-separator,:host .text-color-payableCharge.novo-breadcrumb-item,:host .text-color-payableCharge.novo-breadcrumb-separator,:host .text-color-person.novo-breadcrumb-item,:host .text-color-person.novo-breadcrumb-separator,:host .text-color-user.novo-breadcrumb-item,:host .text-color-user.novo-breadcrumb-separator{color:#696d79}.novo-breadcrumb-font-style.margin-before,:host .margin-before.novo-breadcrumb-item,:host .margin-before.novo-breadcrumb-separator,:host .novo-breadcrumb-item ::ng-deep a.margin-before{margin-top:.4rem}.novo-breadcrumb-font-style.margin-after,:host .margin-after.novo-breadcrumb-item,:host .margin-after.novo-breadcrumb-separator,:host .novo-breadcrumb-item ::ng-deep a.margin-after{margin-bottom:.8rem}.novo-breadcrumb-font-style.text-length-small,:host .novo-breadcrumb-item ::ng-deep a.text-length-small,:host .text-length-small.novo-breadcrumb-item,:host .text-length-small.novo-breadcrumb-separator{max-width:40ch}.novo-breadcrumb-font-style.text-length-medium,:host .novo-breadcrumb-item ::ng-deep a.text-length-medium,:host .text-length-medium.novo-breadcrumb-item,:host .text-length-medium.novo-breadcrumb-separator{max-width:55ch}.novo-breadcrumb-font-style.text-length-large,:host .novo-breadcrumb-item ::ng-deep a.text-length-large,:host .text-length-large.novo-breadcrumb-item,:host .text-length-large.novo-breadcrumb-separator{max-width:70ch}.novo-breadcrumb-font-style.text-weight-hairline,:host .novo-breadcrumb-item ::ng-deep a.text-weight-hairline,:host .text-weight-hairline.novo-breadcrumb-item,:host .text-weight-hairline.novo-breadcrumb-separator{font-weight:100}.novo-breadcrumb-font-style.text-weight-thin,:host .novo-breadcrumb-item ::ng-deep a.text-weight-thin,:host .text-weight-thin.novo-breadcrumb-item,:host .text-weight-thin.novo-breadcrumb-separator{font-weight:200}.novo-breadcrumb-font-style.text-weight-light,:host .novo-breadcrumb-item ::ng-deep a.text-weight-light,:host .text-weight-light.novo-breadcrumb-item,:host .text-weight-light.novo-breadcrumb-separator{font-weight:300}.novo-breadcrumb-font-style.text-weight-normal,:host .novo-breadcrumb-item ::ng-deep a.text-weight-normal,:host .text-weight-normal.novo-breadcrumb-item,:host .text-weight-normal.novo-breadcrumb-separator{font-weight:400}.novo-breadcrumb-font-style.text-weight-medium,:host .novo-breadcrumb-item ::ng-deep a.text-weight-medium,:host .text-weight-medium.novo-breadcrumb-item,:host .text-weight-medium.novo-breadcrumb-separator{font-weight:500}.novo-breadcrumb-font-style.text-weight-semibold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-semibold,:host .text-weight-semibold.novo-breadcrumb-item,:host .text-weight-semibold.novo-breadcrumb-separator{font-weight:600}.novo-breadcrumb-font-style.text-weight-bold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-bold,:host .text-weight-bold.novo-breadcrumb-item,:host .text-weight-bold.novo-breadcrumb-separator{font-weight:700}.novo-breadcrumb-font-style.text-weight-extrabold,:host .novo-breadcrumb-item ::ng-deep a.text-weight-extrabold,:host .text-weight-extrabold.novo-breadcrumb-item,:host .text-weight-extrabold.novo-breadcrumb-separator{font-weight:800}.novo-breadcrumb-font-style.text-weight-heavy,:host .novo-breadcrumb-item ::ng-deep a.text-weight-heavy,:host .text-weight-heavy.novo-breadcrumb-item,:host .text-weight-heavy.novo-breadcrumb-separator{font-weight:900}.novo-breadcrumb-font-style.text-weight-lighter,:host .novo-breadcrumb-item ::ng-deep a.text-weight-lighter,:host .text-weight-lighter.novo-breadcrumb-item,:host .text-weight-lighter.novo-breadcrumb-separator{font-weight:lighter}.novo-breadcrumb-font-style.text-weight-bolder,:host .novo-breadcrumb-item ::ng-deep a.text-weight-bolder,:host .text-weight-bolder.novo-breadcrumb-item,:host .text-weight-bolder.novo-breadcrumb-separator{font-weight:bolder}:host,:host .novo-breadcrumb-item{align-items:center;display:flex;flex-flow:row nowrap}:host .novo-breadcrumb-item{cursor:auto}:host .novo-breadcrumb-item ::ng-deep a:hover{text-decoration:none}:host .novo-breadcrumb-item ::ng-deep a{color:#4a89dc;cursor:pointer}:host .novo-breadcrumb-item ::ng-deep a:focus{text-decoration:none}:host .novo-breadcrumb-down-icon{cursor:pointer;display:inline-block;height:16px;margin-right:-5px;outline:none;text-align:center;vertical-align:middle;width:16px}:host .novo-breadcrumb-down-icon:hover svg g polygon{fill:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active{color:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active ::ng-deep a{color:var(--text-main,#3d464d);text-decoration:none}:host .novo-breadcrumb-item-active svg g polygon{fill:var(--text-main,#3d464d)}:host .novo-breadcrumb-item-active span{color:var(--text-main,#3d464d)}:host .novo-breadcrumb-separator{margin:0 3px}:host .novo-breadcrumb-dropdown-menu{max-width:200px;padding:10px 0}:host .novo-breadcrumb-dropdown-menu li{cursor:pointer;font-size:12px;line-height:36px;overflow:hidden;padding:0 15px;text-overflow:ellipsis;white-space:nowrap;width:200px}:host .novo-breadcrumb-dropdown-menu li a{color:#3d464d;display:inline-block;line-height:36px;width:170px}:host .novo-breadcrumb-dropdown-menu li a:focus{text-decoration:none}:host .novo-breadcrumb-dropdown-menu li:hover{background:#dbdbdb}:host .novo-breadcrumb-dropdown-menu li:hover a{text-decoration:none}:host .novo-search-container{max-width:200px}:host span.novo-breadcrumb-dropdown-origin{display:inline-flex;min-width:unset;padding:0}:host novo-search{width:100%}"]
                 },] }
     ];
     BreadcrumbItemElement.ctorParameters = function () { return [
@@ -24771,9 +24788,16 @@
         function BackgroundColorDirective(el) {
             this.el = el;
         }
-        Object.defineProperty(BackgroundColorDirective.prototype, "hb_textColor", {
+        Object.defineProperty(BackgroundColorDirective.prototype, "hb_bgColor", {
+            get: function () {
+                return isValidColor(this.bg) ? 'novo-background-custom' : "novo-background-" + this.bg;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BackgroundColorDirective.prototype, "hb_bgStyle", {
             get: function () {
-                return "novo-background-" + this.bg;
+                return isValidColor(this.bg) ? this.bg : null;
             },
             enumerable: false,
             configurable: true
@@ -24790,8 +24814,12 @@
     ]; };
     BackgroundColorDirective.propDecorators = {
         bg: [{ type: i0.Input }],
-        hb_textColor: [{ type: i0.HostBinding, args: ['class',] }]
+        hb_bgColor: [{ type: i0.HostBinding, args: ['class',] }],
+        hb_bgStyle: [{ type: i0.HostBinding, args: ['style.background-color',] }]
     };
+    function isValidColor(color) {
+        return color.startsWith('#') || color.startsWith('rgb');
+    }
 
     // tslint:disable: directive-selector
     var BorderDirective = /** @class */ (function () {
@@ -24886,7 +24914,14 @@
         }
         Object.defineProperty(TextColorDirective.prototype, "hb_textColor", {
             get: function () {
-                return "txc-" + this.txc;
+                return isValidColor$1(this.txc) ? 'novo-text-custom' : "novo-text-" + this.txc;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TextColorDirective.prototype, "hb_textStyle", {
+            get: function () {
+                return isValidColor$1(this.txc) ? this.txc : null;
             },
             enumerable: false,
             configurable: true
@@ -24903,8 +24938,12 @@
     ]; };
     TextColorDirective.propDecorators = {
         txc: [{ type: i0.Input }],
-        hb_textColor: [{ type: i0.HostBinding, args: ['class',] }]
+        hb_textColor: [{ type: i0.HostBinding, args: ['class',] }],
+        hb_textStyle: [{ type: i0.HostBinding, args: ['style.color',] }]
     };
+    function isValidColor$1(color) {
+        return color.startsWith('#') || color.startsWith('rgb');
+    }
 
     // tslint:disable: directive-selector
     var FillColorDirective = /** @class */ (function () {
@@ -25390,7 +25429,7 @@
                         '[class.novo-optgroup-disabled]': 'disabled',
                     },
                     providers: [{ provide: NOVO_OPTGROUP, useExisting: NovoOptgroup }],
-                    styles: [".novo-optgroup-label{color:var(--text-muted);color:#9e9e9e;cursor:default;display:block;flex:1;font-size:var(--font-size-label);font-weight:500;line-height:1.375;overflow-wrap:break-word;padding:5px 10px;text-transform:uppercase;transition:.2s ease-out;word-break:word-break}.novo-optgroup-label.text-nowrap{white-space:nowrap}.novo-optgroup-label.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-optgroup-label.text-size-default{font-size:inherit}.novo-optgroup-label.text-size-body{font-size:1.2rem}.novo-optgroup-label.text-size-xs{font-size:.8rem}.novo-optgroup-label.text-size-sm{font-size:1rem}.novo-optgroup-label.text-size-md{font-size:1.2rem}.novo-optgroup-label.text-size-lg{font-size:1.6rem}.novo-optgroup-label.text-size-xl{font-size:2rem}.novo-optgroup-label.text-size-2xl{font-size:2.6rem}.novo-optgroup-label.text-size-3xl{font-size:3.2rem}.novo-optgroup-label.text-size-smaller{font-size:.8em}.novo-optgroup-label.text-size-larger{font-size:1.2em}.novo-optgroup-label.text-color-black{color:#000}.novo-optgroup-label.text-color-white{color:#fff}.novo-optgroup-label.text-color-gray,.novo-optgroup-label.text-color-grey{color:#9e9e9e}.novo-optgroup-label.text-color-bright,.novo-optgroup-label.text-color-offWhite{color:#f7f7f7}.novo-optgroup-label.text-color-light{color:#dbdbdb}.novo-optgroup-label.text-color-neutral{color:#4f5361}.novo-optgroup-label.text-color-dark{color:#3d464d}.novo-optgroup-label.text-color-orange{color:#ff6900}.novo-optgroup-label.text-color-navigation{color:#202945}.novo-optgroup-label.text-color-skyBlue{color:#009bdf}.novo-optgroup-label.text-color-steel{color:#5b6770}.novo-optgroup-label.text-color-metal{color:#637893}.novo-optgroup-label.text-color-sand{color:#f4f4f4}.novo-optgroup-label.text-color-silver{color:#e2e2e2}.novo-optgroup-label.text-color-stone{color:#bebebe}.novo-optgroup-label.text-color-ash{color:#a0a0a0}.novo-optgroup-label.text-color-slate{color:#707070}.novo-optgroup-label.text-color-onyx{color:#526980}.novo-optgroup-label.text-color-charcoal{color:#282828}.novo-optgroup-label.text-color-moonlight{color:#1a242f}.novo-optgroup-label.text-color-midnight{color:#202945}.novo-optgroup-label.text-color-darkness{color:#161f27}.novo-optgroup-label.text-color-navy{color:#0d2d42}.novo-optgroup-label.text-color-aqua{color:#3bafda}.novo-optgroup-label.text-color-ocean{color:#4a89dc}.novo-optgroup-label.text-color-mint{color:#37bc9b}.novo-optgroup-label.text-color-grass{color:#8cc152}.novo-optgroup-label.text-color-sunflower{color:#f6b042}.novo-optgroup-label.text-color-bittersweet{color:#eb6845}.novo-optgroup-label.text-color-grapefruit{color:#da4453}.novo-optgroup-label.text-color-carnation{color:#d770ad}.novo-optgroup-label.text-color-lavender{color:#967adc}.novo-optgroup-label.text-color-mountain{color:#9678b6}.novo-optgroup-label.text-color-info,.novo-optgroup-label.text-color-positive{color:#4a89dc}.novo-optgroup-label.text-color-success{color:#8cc152}.novo-optgroup-label.text-color-danger,.novo-optgroup-label.text-color-error,.novo-optgroup-label.text-color-negative{color:#da4453}.novo-optgroup-label.text-color-warning{color:#f6b042}.novo-optgroup-label.text-color-empty{color:#cccdcc}.novo-optgroup-label.text-color-disabled{color:#bebebe}.novo-optgroup-label.text-color-background{color:#f7f7f7}.novo-optgroup-label.text-color-backgroundDark{color:#e2e2e2}.novo-optgroup-label.text-color-presentation{color:#5b6770}.novo-optgroup-label.text-color-bullhorn{color:#ff6900}.novo-optgroup-label.text-color-pulse{color:#3bafda}.novo-optgroup-label.text-color-company{color:#39d}.novo-optgroup-label.text-color-candidate{color:#4b7}.novo-optgroup-label.text-color-lead{color:#a69}.novo-optgroup-label.text-color-contact{color:#fa4}.novo-optgroup-label.text-color-opportunity{color:#625}.novo-optgroup-label.text-color-job{color:#b56}.novo-optgroup-label.text-color-submission{color:#a9adbb}.novo-optgroup-label.text-color-sendout{color:#747884}.novo-optgroup-label.text-color-placement{color:#0b344f}.novo-optgroup-label.text-color-note{color:#747884}.novo-optgroup-label.text-color-contract{color:#454ea0}.novo-optgroup-label.text-color-billableCharge,.novo-optgroup-label.text-color-corporateUser,.novo-optgroup-label.text-color-credential,.novo-optgroup-label.text-color-distributionList,.novo-optgroup-label.text-color-earnCode,.novo-optgroup-label.text-color-invoiceStatement,.novo-optgroup-label.text-color-jobCode,.novo-optgroup-label.text-color-payableCharge,.novo-optgroup-label.text-color-person,.novo-optgroup-label.text-color-user{color:#696d79}.novo-optgroup-label.margin-before{margin-top:.4rem}.novo-optgroup-label.margin-after{margin-bottom:.8rem}.novo-optgroup-label.text-length-small{max-width:40ch}.novo-optgroup-label.text-length-medium{max-width:55ch}.novo-optgroup-label.text-length-large{max-width:70ch}.novo-optgroup-label.text-weight-hairline{font-weight:100}.novo-optgroup-label.text-weight-thin{font-weight:200}.novo-optgroup-label.text-weight-light{font-weight:300}.novo-optgroup-label.text-weight-normal{font-weight:400}.novo-optgroup-label.text-weight-medium{font-weight:500}.novo-optgroup-label.text-weight-semibold{font-weight:600}.novo-optgroup-label.text-weight-bold{font-weight:700}.novo-optgroup-label.text-weight-extrabold{font-weight:800}.novo-optgroup-label.text-weight-heavy{font-weight:900}.novo-optgroup-label.text-weight-lighter{font-weight:lighter}.novo-optgroup-label.text-weight-bolder{font-weight:bolder}"]
+                    styles: [".novo-optgroup-label{color:var(--text-muted);color:#9e9e9e;cursor:default;display:block;flex:1;font-size:var(--font-size-label);font-weight:500;line-height:1.375;overflow-wrap:break-word;padding:5px 10px;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle;word-break:word-break}.novo-optgroup-label.text-nowrap{white-space:nowrap}.novo-optgroup-label.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-optgroup-label.text-size-default{font-size:inherit}.novo-optgroup-label.text-size-body{font-size:1.3rem}.novo-optgroup-label.text-size-xs{font-size:1rem}.novo-optgroup-label.text-size-sm{font-size:1.2rem}.novo-optgroup-label.text-size-md{font-size:1.3rem}.novo-optgroup-label.text-size-lg{font-size:1.6rem}.novo-optgroup-label.text-size-xl{font-size:2rem}.novo-optgroup-label.text-size-2xl{font-size:2.6rem}.novo-optgroup-label.text-size-3xl{font-size:3.2rem}.novo-optgroup-label.text-size-smaller{font-size:.8em}.novo-optgroup-label.text-size-larger{font-size:1.2em}.novo-optgroup-label.text-color-black{color:#000}.novo-optgroup-label.text-color-white{color:#fff}.novo-optgroup-label.text-color-gray,.novo-optgroup-label.text-color-grey{color:#9e9e9e}.novo-optgroup-label.text-color-bright,.novo-optgroup-label.text-color-offWhite{color:#f7f7f7}.novo-optgroup-label.text-color-light{color:#dbdbdb}.novo-optgroup-label.text-color-neutral{color:#4f5361}.novo-optgroup-label.text-color-dark{color:#3d464d}.novo-optgroup-label.text-color-orange{color:#ff6900}.novo-optgroup-label.text-color-navigation{color:#202945}.novo-optgroup-label.text-color-skyBlue{color:#009bdf}.novo-optgroup-label.text-color-steel{color:#5b6770}.novo-optgroup-label.text-color-metal{color:#637893}.novo-optgroup-label.text-color-sand{color:#f4f4f4}.novo-optgroup-label.text-color-silver{color:#e2e2e2}.novo-optgroup-label.text-color-stone{color:#bebebe}.novo-optgroup-label.text-color-ash{color:#a0a0a0}.novo-optgroup-label.text-color-slate{color:#707070}.novo-optgroup-label.text-color-onyx{color:#526980}.novo-optgroup-label.text-color-charcoal{color:#282828}.novo-optgroup-label.text-color-moonlight{color:#1a242f}.novo-optgroup-label.text-color-midnight{color:#202945}.novo-optgroup-label.text-color-darkness{color:#161f27}.novo-optgroup-label.text-color-navy{color:#0d2d42}.novo-optgroup-label.text-color-aqua{color:#3bafda}.novo-optgroup-label.text-color-ocean{color:#4a89dc}.novo-optgroup-label.text-color-mint{color:#37bc9b}.novo-optgroup-label.text-color-grass{color:#8cc152}.novo-optgroup-label.text-color-sunflower{color:#f6b042}.novo-optgroup-label.text-color-bittersweet{color:#eb6845}.novo-optgroup-label.text-color-grapefruit{color:#da4453}.novo-optgroup-label.text-color-carnation{color:#d770ad}.novo-optgroup-label.text-color-lavender{color:#967adc}.novo-optgroup-label.text-color-mountain{color:#9678b6}.novo-optgroup-label.text-color-info,.novo-optgroup-label.text-color-positive{color:#4a89dc}.novo-optgroup-label.text-color-success{color:#8cc152}.novo-optgroup-label.text-color-danger,.novo-optgroup-label.text-color-error,.novo-optgroup-label.text-color-negative{color:#da4453}.novo-optgroup-label.text-color-warning{color:#f6b042}.novo-optgroup-label.text-color-empty{color:#cccdcc}.novo-optgroup-label.text-color-disabled{color:#bebebe}.novo-optgroup-label.text-color-background{color:#f7f7f7}.novo-optgroup-label.text-color-backgroundDark{color:#e2e2e2}.novo-optgroup-label.text-color-presentation{color:#5b6770}.novo-optgroup-label.text-color-bullhorn{color:#ff6900}.novo-optgroup-label.text-color-pulse{color:#3bafda}.novo-optgroup-label.text-color-company{color:#39d}.novo-optgroup-label.text-color-candidate{color:#4b7}.novo-optgroup-label.text-color-lead{color:#a69}.novo-optgroup-label.text-color-contact{color:#fa4}.novo-optgroup-label.text-color-opportunity{color:#625}.novo-optgroup-label.text-color-job{color:#b56}.novo-optgroup-label.text-color-submission{color:#a9adbb}.novo-optgroup-label.text-color-sendout{color:#747884}.novo-optgroup-label.text-color-placement{color:#0b344f}.novo-optgroup-label.text-color-note{color:#747884}.novo-optgroup-label.text-color-contract{color:#454ea0}.novo-optgroup-label.text-color-billableCharge,.novo-optgroup-label.text-color-corporateUser,.novo-optgroup-label.text-color-credential,.novo-optgroup-label.text-color-distributionList,.novo-optgroup-label.text-color-earnCode,.novo-optgroup-label.text-color-invoiceStatement,.novo-optgroup-label.text-color-jobCode,.novo-optgroup-label.text-color-payableCharge,.novo-optgroup-label.text-color-person,.novo-optgroup-label.text-color-user{color:#696d79}.novo-optgroup-label.margin-before{margin-top:.4rem}.novo-optgroup-label.margin-after{margin-bottom:.8rem}.novo-optgroup-label.text-length-small{max-width:40ch}.novo-optgroup-label.text-length-medium{max-width:55ch}.novo-optgroup-label.text-length-large{max-width:70ch}.novo-optgroup-label.text-weight-hairline{font-weight:100}.novo-optgroup-label.text-weight-thin{font-weight:200}.novo-optgroup-label.text-weight-light{font-weight:300}.novo-optgroup-label.text-weight-normal{font-weight:400}.novo-optgroup-label.text-weight-medium{font-weight:500}.novo-optgroup-label.text-weight-semibold{font-weight:600}.novo-optgroup-label.text-weight-bold{font-weight:700}.novo-optgroup-label.text-weight-extrabold{font-weight:800}.novo-optgroup-label.text-weight-heavy{font-weight:900}.novo-optgroup-label.text-weight-lighter{font-weight:lighter}.novo-optgroup-label.text-weight-bolder{font-weight:bolder}"]
                 },] }
     ];
     NovoOptgroup.ctorParameters = function () { return [
@@ -25437,9 +25476,12 @@
             /** Emits when the state of the option changes and any parents have to be notified. */
             this._stateChanges = new rxjs.Subject();
             // (click) is overridden when defined by user.
-            this._clickListener = rxjs.fromEvent(this._element.nativeElement, 'click', { capture: true }).subscribe(function (evt) {
+            this._clickCapture = rxjs.fromEvent(this._element.nativeElement, 'click', { capture: true }).subscribe(function (evt) {
                 _this._handleDisabledClick(evt);
             });
+            this._clickPassive = rxjs.fromEvent(this._element.nativeElement, 'click').subscribe(function (evt) {
+                setTimeout(function () { return _this._handlePassiveClick(evt); });
+            });
         }
         Object.defineProperty(NovoOptionBase.prototype, "selectable", {
             /** If there is no parent then nothing is managing the selection. */
@@ -25554,25 +25596,19 @@
             return this.viewValue;
         };
         NovoOptionBase.prototype._handleDisabledClick = function (event) {
-            console.log('Captured click');
             if (this.disabled) {
-                console.log('disabled');
                 event.preventDefault();
                 event.stopPropagation();
                 event.stopImmediatePropagation();
             }
-            else if (this.inert) {
-                // do nothing
-                console.log('this is inert');
-            }
-            else {
-                console.log('selecting');
+        };
+        NovoOptionBase.prototype._handlePassiveClick = function (event) {
+            if (!this.inert) {
                 this._selectViaInteraction();
             }
         };
         /** Ensures the option is selected when activated from the keyboard. */
         NovoOptionBase.prototype._handleKeydown = function (event) {
-            console.log('KEY DOWN');
             if (event.target instanceof HTMLInputElement && event.key === "Enter" /* Enter */) {
                 this._emitSelectionChangeEvent(!this.keepOpen);
             }
@@ -25636,7 +25672,8 @@
         };
         NovoOptionBase.prototype.ngOnDestroy = function () {
             this._stateChanges.complete();
-            this._clickListener.unsubscribe();
+            this._clickCapture.unsubscribe();
+            this._clickPassive.unsubscribe();
         };
         /** Emits the selection change event. */
         NovoOptionBase.prototype._emitSelectionChangeEvent = function (isUserInput) {
@@ -25703,7 +25740,7 @@
                     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>",
                     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}.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.2rem}.novo-option.text-size-xs{font-size:.8rem}.novo-option.text-size-sm{font-size:1rem}.novo-option.text-size-md{font-size:1.2rem}.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-contact{color:#fa4}.novo-option.text-color-opportunity{color:#625}.novo-option.text-color-job{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));color:var(--text-bright,#3d464d)}.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-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-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}"]
+                    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-contact{color:#fa4}.novo-option.text-color-opportunity{color:#625}.novo-option.text-color-job{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));color:var(--text-bright,#3d464d)}.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-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-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}"]
                 },] }
     ];
     NovoOption.ctorParameters = function () { return [
@@ -25904,7 +25941,7 @@
                     host: {
                         class: 'novo-caption',
                     },
-                    styles: [":host{color:var(--text-muted,#3d464d);display:inline;font-size:var(--font-size-caption);font-weight:400;line-height:1.375;transition:.2s ease-out}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.2rem}:host.text-size-xs{font-size:.8rem}:host.text-size-sm{font-size:1rem}:host.text-size-md{font-size:1.2rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host novo-icon{font-size:1em;vertical-align:top}"]
+                    styles: [":host{color:var(--text-muted,#3d464d);display:inline;font-size:var(--font-size-caption);font-weight:400;line-height:1.375;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}"]
                 },] }
     ];
 
@@ -25932,7 +25969,7 @@
                     host: {
                         class: 'novo-label',
                     },
-                    styles: [":host{color:var(--text-muted);display:inline-block;font-size:var(--font-size-label);font-weight:500;line-height:1.375;overflow-wrap:break-word;text-transform:uppercase;transition:.2s ease-out;word-break:word-break}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.2rem}:host.text-size-xs{font-size:.8rem}:host.text-size-sm{font-size:1rem}:host.text-size-md{font-size:1.2rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}"]
+                    styles: [":host{color:var(--text-muted);display:inline-block;font-size:var(--font-size-label);font-weight:500;line-height:1.375;overflow-wrap:break-word;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle;word-break:word-break}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}"]
                 },] }
     ];
 
@@ -25961,7 +25998,7 @@
                     host: {
                         class: 'novo-link',
                     },
-                    styles: [":host{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.2rem}:host.text-size-xs{font-size:.8rem}:host.text-size-sm{font-size:1rem}:host.text-size-md{font-size:1.2rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}"]
+                    styles: [":host{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host::ng-deep novo-icon,:host novo-icon{font-size:1em}"]
                 },] }
     ];
     NovoLink.propDecorators = {
@@ -25993,7 +26030,7 @@
                     host: {
                         class: 'novo-text',
                     },
-                    styles: [".novo-text{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out}.novo-text.text-nowrap{white-space:nowrap}.novo-text.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-text.text-size-default{font-size:inherit}.novo-text.text-size-body{font-size:1.2rem}.novo-text.text-size-xs{font-size:.8rem}.novo-text.text-size-sm{font-size:1rem}.novo-text.text-size-md{font-size:1.2rem}.novo-text.text-size-lg{font-size:1.6rem}.novo-text.text-size-xl{font-size:2rem}.novo-text.text-size-2xl{font-size:2.6rem}.novo-text.text-size-3xl{font-size:3.2rem}.novo-text.text-size-smaller{font-size:.8em}.novo-text.text-size-larger{font-size:1.2em}.novo-text.text-color-black{color:#000}.novo-text.text-color-white{color:#fff}.novo-text.text-color-gray,.novo-text.text-color-grey{color:#9e9e9e}.novo-text.text-color-bright,.novo-text.text-color-offWhite{color:#f7f7f7}.novo-text.text-color-light{color:#dbdbdb}.novo-text.text-color-neutral{color:#4f5361}.novo-text.text-color-dark{color:#3d464d}.novo-text.text-color-orange{color:#ff6900}.novo-text.text-color-navigation{color:#202945}.novo-text.text-color-skyBlue{color:#009bdf}.novo-text.text-color-steel{color:#5b6770}.novo-text.text-color-metal{color:#637893}.novo-text.text-color-sand{color:#f4f4f4}.novo-text.text-color-silver{color:#e2e2e2}.novo-text.text-color-stone{color:#bebebe}.novo-text.text-color-ash{color:#a0a0a0}.novo-text.text-color-slate{color:#707070}.novo-text.text-color-onyx{color:#526980}.novo-text.text-color-charcoal{color:#282828}.novo-text.text-color-moonlight{color:#1a242f}.novo-text.text-color-midnight{color:#202945}.novo-text.text-color-darkness{color:#161f27}.novo-text.text-color-navy{color:#0d2d42}.novo-text.text-color-aqua{color:#3bafda}.novo-text.text-color-ocean{color:#4a89dc}.novo-text.text-color-mint{color:#37bc9b}.novo-text.text-color-grass{color:#8cc152}.novo-text.text-color-sunflower{color:#f6b042}.novo-text.text-color-bittersweet{color:#eb6845}.novo-text.text-color-grapefruit{color:#da4453}.novo-text.text-color-carnation{color:#d770ad}.novo-text.text-color-lavender{color:#967adc}.novo-text.text-color-mountain{color:#9678b6}.novo-text.text-color-info,.novo-text.text-color-positive{color:#4a89dc}.novo-text.text-color-success{color:#8cc152}.novo-text.text-color-danger,.novo-text.text-color-error,.novo-text.text-color-negative{color:#da4453}.novo-text.text-color-warning{color:#f6b042}.novo-text.text-color-empty{color:#cccdcc}.novo-text.text-color-disabled{color:#bebebe}.novo-text.text-color-background{color:#f7f7f7}.novo-text.text-color-backgroundDark{color:#e2e2e2}.novo-text.text-color-presentation{color:#5b6770}.novo-text.text-color-bullhorn{color:#ff6900}.novo-text.text-color-pulse{color:#3bafda}.novo-text.text-color-company{color:#39d}.novo-text.text-color-candidate{color:#4b7}.novo-text.text-color-lead{color:#a69}.novo-text.text-color-contact{color:#fa4}.novo-text.text-color-opportunity{color:#625}.novo-text.text-color-job{color:#b56}.novo-text.text-color-submission{color:#a9adbb}.novo-text.text-color-sendout{color:#747884}.novo-text.text-color-placement{color:#0b344f}.novo-text.text-color-note{color:#747884}.novo-text.text-color-contract{color:#454ea0}.novo-text.text-color-billableCharge,.novo-text.text-color-corporateUser,.novo-text.text-color-credential,.novo-text.text-color-distributionList,.novo-text.text-color-earnCode,.novo-text.text-color-invoiceStatement,.novo-text.text-color-jobCode,.novo-text.text-color-payableCharge,.novo-text.text-color-person,.novo-text.text-color-user{color:#696d79}.novo-text.margin-before{margin-top:.4rem}.novo-text.margin-after{margin-bottom:.8rem}.novo-text.text-length-small{max-width:40ch}.novo-text.text-length-medium{max-width:55ch}.novo-text.text-length-large{max-width:70ch}.novo-text.text-weight-hairline{font-weight:100}.novo-text.text-weight-thin{font-weight:200}.novo-text.text-weight-light{font-weight:300}.novo-text.text-weight-normal{font-weight:400}.novo-text.text-weight-medium{font-weight:500}.novo-text.text-weight-semibold{font-weight:600}.novo-text.text-weight-bold{font-weight:700}.novo-text.text-weight-extrabold{font-weight:800}.novo-text.text-weight-heavy{font-weight:900}.novo-text.text-weight-lighter{font-weight:lighter}.novo-text.text-weight-bolder{font-weight:bolder}.novo-text.text-block{display:block;line-height:1.375em;max-width:75ch;min-width:55ch}.novo-text::ng-deep novo-icon{font-size:inherit;vertical-align:top}"]
+                    styles: [".novo-text{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}.novo-text.text-nowrap{white-space:nowrap}.novo-text.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-text.text-size-default{font-size:inherit}.novo-text.text-size-body{font-size:1.3rem}.novo-text.text-size-xs{font-size:1rem}.novo-text.text-size-sm{font-size:1.2rem}.novo-text.text-size-md{font-size:1.3rem}.novo-text.text-size-lg{font-size:1.6rem}.novo-text.text-size-xl{font-size:2rem}.novo-text.text-size-2xl{font-size:2.6rem}.novo-text.text-size-3xl{font-size:3.2rem}.novo-text.text-size-smaller{font-size:.8em}.novo-text.text-size-larger{font-size:1.2em}.novo-text.text-color-black{color:#000}.novo-text.text-color-white{color:#fff}.novo-text.text-color-gray,.novo-text.text-color-grey{color:#9e9e9e}.novo-text.text-color-bright,.novo-text.text-color-offWhite{color:#f7f7f7}.novo-text.text-color-light{color:#dbdbdb}.novo-text.text-color-neutral{color:#4f5361}.novo-text.text-color-dark{color:#3d464d}.novo-text.text-color-orange{color:#ff6900}.novo-text.text-color-navigation{color:#202945}.novo-text.text-color-skyBlue{color:#009bdf}.novo-text.text-color-steel{color:#5b6770}.novo-text.text-color-metal{color:#637893}.novo-text.text-color-sand{color:#f4f4f4}.novo-text.text-color-silver{color:#e2e2e2}.novo-text.text-color-stone{color:#bebebe}.novo-text.text-color-ash{color:#a0a0a0}.novo-text.text-color-slate{color:#707070}.novo-text.text-color-onyx{color:#526980}.novo-text.text-color-charcoal{color:#282828}.novo-text.text-color-moonlight{color:#1a242f}.novo-text.text-color-midnight{color:#202945}.novo-text.text-color-darkness{color:#161f27}.novo-text.text-color-navy{color:#0d2d42}.novo-text.text-color-aqua{color:#3bafda}.novo-text.text-color-ocean{color:#4a89dc}.novo-text.text-color-mint{color:#37bc9b}.novo-text.text-color-grass{color:#8cc152}.novo-text.text-color-sunflower{color:#f6b042}.novo-text.text-color-bittersweet{color:#eb6845}.novo-text.text-color-grapefruit{color:#da4453}.novo-text.text-color-carnation{color:#d770ad}.novo-text.text-color-lavender{color:#967adc}.novo-text.text-color-mountain{color:#9678b6}.novo-text.text-color-info,.novo-text.text-color-positive{color:#4a89dc}.novo-text.text-color-success{color:#8cc152}.novo-text.text-color-danger,.novo-text.text-color-error,.novo-text.text-color-negative{color:#da4453}.novo-text.text-color-warning{color:#f6b042}.novo-text.text-color-empty{color:#cccdcc}.novo-text.text-color-disabled{color:#bebebe}.novo-text.text-color-background{color:#f7f7f7}.novo-text.text-color-backgroundDark{color:#e2e2e2}.novo-text.text-color-presentation{color:#5b6770}.novo-text.text-color-bullhorn{color:#ff6900}.novo-text.text-color-pulse{color:#3bafda}.novo-text.text-color-company{color:#39d}.novo-text.text-color-candidate{color:#4b7}.novo-text.text-color-lead{color:#a69}.novo-text.text-color-contact{color:#fa4}.novo-text.text-color-opportunity{color:#625}.novo-text.text-color-job{color:#b56}.novo-text.text-color-submission{color:#a9adbb}.novo-text.text-color-sendout{color:#747884}.novo-text.text-color-placement{color:#0b344f}.novo-text.text-color-note{color:#747884}.novo-text.text-color-contract{color:#454ea0}.novo-text.text-color-billableCharge,.novo-text.text-color-corporateUser,.novo-text.text-color-credential,.novo-text.text-color-distributionList,.novo-text.text-color-earnCode,.novo-text.text-color-invoiceStatement,.novo-text.text-color-jobCode,.novo-text.text-color-payableCharge,.novo-text.text-color-person,.novo-text.text-color-user{color:#696d79}.novo-text.margin-before{margin-top:.4rem}.novo-text.margin-after{margin-bottom:.8rem}.novo-text.text-length-small{max-width:40ch}.novo-text.text-length-medium{max-width:55ch}.novo-text.text-length-large{max-width:70ch}.novo-text.text-weight-hairline{font-weight:100}.novo-text.text-weight-thin{font-weight:200}.novo-text.text-weight-light{font-weight:300}.novo-text.text-weight-normal{font-weight:400}.novo-text.text-weight-medium{font-weight:500}.novo-text.text-weight-semibold{font-weight:600}.novo-text.text-weight-bold{font-weight:700}.novo-text.text-weight-extrabold{font-weight:800}.novo-text.text-weight-heavy{font-weight:900}.novo-text.text-weight-lighter{font-weight:lighter}.novo-text.text-weight-bolder{font-weight:bolder}.novo-text.text-block{display:block;line-height:1.375em;max-width:75ch;min-width:55ch}"]
                 },] }
     ];
     NovoText.propDecorators = {
@@ -26018,7 +26055,7 @@
         __extends(NovoTitle, _super);
         function NovoTitle() {
             var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.weight = 'semibold';
+            _this.weight = 'medium';
             return _this;
         }
         return NovoTitle;
@@ -26030,7 +26067,7 @@
                     host: {
                         class: 'novo-title',
                     },
-                    styles: [":host{color:var(--text-main,#3d464d);display:block;font-size:var(--font-size-title);font-weight:600;line-height:1.5;text-overflow:ellipsis;transition:.2s ease-out}:host,:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.2rem}:host.text-size-xs{font-size:.8rem}:host.text-size-sm{font-size:1rem}:host.text-size-md{font-size:1.2rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}"]
+                    styles: [":host{color:var(--text-main,#3d464d);display:block;font-size:var(--font-size-title);font-weight:500;line-height:1.5;text-overflow:ellipsis;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}:host,:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}"]
                 },] }
     ];
 
@@ -26380,6 +26417,12 @@
                 if (_this.overlayRef) {
                     _this.overlayRef.updatePosition();
                     _this.opening.emit(true);
+                    setTimeout(function () {
+                        // TODO: @charlesabarnes Remove this once we remove table
+                        if (_this.overlayRef) {
+                            _this.overlayRef.updatePosition();
+                        }
+                    });
                 }
             });
         };
@@ -26752,6 +26795,9 @@
                     }
                 });
             }
+            else if ("Escape" /* Escape */ === key) {
+                this.closePanel();
+            }
             else {
                 var previouslyFocusedIndex = manager.activeItemIndex;
                 manager.onKeydown(event);
@@ -27012,7 +27058,10 @@
         { type: i0.Component, args: [{
                     selector: 'novo-icon',
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: "\n    <i [class]=\"iconName\"\n      ><span (cdkObserveContent)=\"projectContentChanged($event)\"><ng-content></ng-content></span\n    ></i>\n  "
+                    template: "\n    <i [class]=\"iconName\"\n      ><span (cdkObserveContent)=\"projectContentChanged($event)\"><ng-content></ng-content></span\n    ></i>\n  ",
+                    host: {
+                        class: 'novo-icon',
+                    }
                 },] }
     ];
     NovoIconComponent.ctorParameters = function () { return [
@@ -27438,6 +27487,16 @@
             this.onModelChange = function () { };
             this.onModelTouched = function () { };
         }
+        Object.defineProperty(NovoSwitchElement.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoSwitchElement.prototype.onKeydown = function (event) {
             if (event.key === " " /* Space */) {
                 event.preventDefault();
@@ -27452,13 +27511,13 @@
             if (this.disabled) {
                 return;
             }
-            this.model = !this.model;
-            this.onChange.next(this.model);
-            this.onModelChange(this.model);
+            this.value = !this.value;
+            this.onChange.next(this.value);
+            this.onModelChange(this.value);
             this.ref.markForCheck();
         };
         NovoSwitchElement.prototype.writeValue = function (model) {
-            this.model = model;
+            this.value = model;
             this.ref.markForCheck();
         };
         NovoSwitchElement.prototype.registerOnChange = function (fn) {
@@ -27473,11 +27532,11 @@
         { type: i0.Component, args: [{
                     selector: 'novo-switch',
                     providers: [SWITCH_VALUE_ACCESSOR],
-                    template: "\n    <div (click)=\"toggle($event)\">\n      <div class=\"novo-switch-container\">\n        <div class=\"novo-switch-bar\"></div>\n        <div class=\"novo-switch-thumb-container\">\n          <div class=\"novo-switch-thumb\">\n            <novo-icon *ngIf=\"!model\" smaller>{{ icons[0] }}</novo-icon>\n            <novo-icon *ngIf=\"model\" smaller>{{ icons[1] }}</novo-icon>\n          </div>\n        </div>\n      </div>\n      <div class=\"novo-switch-label\"><ng-content></ng-content></div>\n    </div>\n  ",
+                    template: "\n    <div (click)=\"toggle($event)\">\n      <div class=\"novo-switch-container\">\n        <div class=\"novo-switch-bar\"></div>\n        <div class=\"novo-switch-thumb-container\">\n          <div class=\"novo-switch-thumb\">\n            <novo-icon *ngIf=\"!value\" smaller>{{ icons[0] }}</novo-icon>\n            <novo-icon *ngIf=\"value\" smaller>{{ icons[1] }}</novo-icon>\n          </div>\n        </div>\n      </div>\n      <div class=\"novo-switch-label\"><ng-content></ng-content></div>\n    </div>\n  ",
                     host: {
                         role: 'checkbox',
                         class: 'novo-switch',
-                        '[attr.aria-checked]': 'model',
+                        '[attr.aria-checked]': 'value',
                         '[attr.aria-disabled]': 'disabled',
                         '(keydown)': 'onKeydown($event)',
                         '[class]': 'theme',
@@ -28589,7 +28648,8 @@
             this.overlay.openPanel();
         };
         NovoSearchBoxElement.prototype.closePanel = function () {
-            this.overlay.closePanel();
+            var _this = this;
+            setTimeout(function () { return _this.overlay.closePanel(); });
         };
         Object.defineProperty(NovoSearchBoxElement.prototype, "panelOpen", {
             get: function () {
@@ -29071,7 +29131,7 @@
     NovoCalendarElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-calendar',
-                    template: "<div class=\"calendar-header\">\n  <novo-button theme=\"icon\" icon=\"previous\" size=\"small\" (click)=\"prevMonth($event)\"\n    data-automation-id=\"calendar-previous\"></novo-button>\n  <ng-container *ngFor=\"let month of months; let i = index;\">\n    <span class=\"heading\" [class.secondary]=\"i > 0\">\n      <span class=\"month\" (click)=\"openView($event, 'months')\"\n        data-automation-id=\"header-month\">{{ month.label }}</span>\n      <span class=\"year\" (click)=\"openView($event, 'years')\"\n        data-automation-id=\"header-year\">{{ month.date?.getFullYear() }}</span>\n    </span>\n  </ng-container>\n  <novo-button theme=\"icon\" icon=\"next\" size=\"small\" (click)=\"nextMonth($event)\" data-automation-id=\"calendar-next\">\n  </novo-button>\n</div>\n<section class=\"calendar-content\" [ngSwitch]=\"activeView\">\n  <ng-container *ngSwitchCase=\"'days'\">\n    <ng-container *ngFor=\"let month of months; let i = index\">\n      <div class=\"calendar-header\" *ngIf=\"layout==='vertical' && i > 0\">\n        <span class=\"previous\" (click)=\"prevMonth($event)\" data-automation-id=\"calendar-previous\"></span>\n        <span class=\"heading\">\n          <span class=\"month\" (click)=\"openView($event, 'months')\"\n            data-automation-id=\"header-month\">{{ month.label }}</span>\n          <span class=\"year\" (click)=\"openView($event, 'years')\"\n            data-automation-id=\"header-year\">{{ month.date?.getFullYear() }}</span>\n        </span>\n        <span class=\"next\" (click)=\"nextMonth($event)\" data-automation-id=\"calendar-next\"></span>\n      </div>\n      <novo-month-view\n        class=\"month-view\"\n        [activeDate]=\"month.date\"\n        [selected]=\"selected\"\n        [preview]=\"preview\"\n        [overlays]=\"overlays\"\n        [isRange]=\"_isRange()\"\n        [hideOverflowDays]=\"months.length > 1\"\n        [weekStartsOn]=\"weekStartsOn\"\n        (select)=\"dateSelected($event)\"\n        (hover)=\"updatePreview($event)\"></novo-month-view>\n    </ng-container>\n  </ng-container>\n  <novo-month-select\n    *ngSwitchCase=\"'months'\"\n    [activeDate]=\"activeDate\"\n    [selected]=\"selected\"\n    (select)=\"monthSelected($event)\">\n  </novo-month-select>\n  <novo-year-select\n    *ngSwitchCase=\"'years'\"\n    [activeDate]=\"activeDate\"\n    [selected]=\"selected\"\n    (select)=\"yearSelected($event)\">\n  </novo-year-select>\n</section>",
+                    template: "<div class=\"calendar-header\">\n  <novo-button theme=\"icon\" icon=\"previous\" size=\"small\" (click)=\"prevMonth($event)\"\n    data-automation-id=\"calendar-previous\"></novo-button>\n  <ng-container *ngFor=\"let month of months; let i = index;\">\n    <span class=\"heading\" [class.secondary]=\"i > 0\">\n      <span class=\"month\" (click)=\"openView($event, 'months')\"\n        data-automation-id=\"header-month\">{{ month.label }}</span>\n      <span class=\"year\" (click)=\"openView($event, 'years')\"\n        data-automation-id=\"header-year\">{{ month.date?.getFullYear() }}</span>\n    </span>\n  </ng-container>\n  <novo-button theme=\"icon\" icon=\"next\" size=\"small\" (click)=\"nextMonth($event)\" data-automation-id=\"calendar-next\">\n  </novo-button>\n</div>\n<section class=\"calendar-content\" [ngSwitch]=\"activeView\">\n  <ng-container *ngSwitchCase=\"'days'\">\n    <ng-container *ngFor=\"let month of months; let i = index\">\n      <div class=\"calendar-header\" *ngIf=\"layout==='vertical' && i > 0\">\n        <span class=\"previous\" (click)=\"prevMonth($event)\" data-automation-id=\"calendar-previous\"></span>\n        <span class=\"heading\">\n          <span class=\"month\" (click)=\"openView($event, 'months')\"\n            data-automation-id=\"header-month\">{{ month.label }}</span>\n          <span class=\"year\" (click)=\"openView($event, 'years')\"\n            data-automation-id=\"header-year\">{{ month.date?.getFullYear() }}</span>\n        </span>\n        <span class=\"next\" (click)=\"nextMonth($event)\" data-automation-id=\"calendar-next\"></span>\n      </div>\n      <novo-month-view\n        class=\"month-view\"\n        [activeDate]=\"month.date\"\n        [selected]=\"selected\"\n        [preview]=\"preview\"\n        [overlays]=\"overlays\"\n        [isRange]=\"_isRange()\"\n        [hideOverflowDays]=\"months.length > 1\"\n        [weekStartsOn]=\"weekStartsOn\"\n        [disabledDateMessage]=\"disabledDateMessage\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (select)=\"dateSelected($event)\"\n        (hover)=\"updatePreview($event)\"></novo-month-view>\n    </ng-container>\n  </ng-container>\n  <novo-month-select\n    *ngSwitchCase=\"'months'\"\n    [activeDate]=\"activeDate\"\n    [selected]=\"selected\"\n    (select)=\"monthSelected($event)\">\n  </novo-month-select>\n  <novo-year-select\n    *ngSwitchCase=\"'years'\"\n    [activeDate]=\"activeDate\"\n    [selected]=\"selected\"\n    (select)=\"yearSelected($event)\">\n  </novo-year-select>\n</section>",
                     styles: [":host(.layout-horizontal){font-size:1.2rem}:host(.layout-horizontal) .calendar-content{flex-flow:row nowrap}:host(.layout-horizontal) .month-view+.month-view{border-collapse:unset;border-left:1px solid #dbdbdb;margin-left:.5rem;padding-left:.5rem}:host(.layout-vertical) .calendar-content{flex-flow:column nowrap}:host(.layout-vertical) .calendar-header .heading.secondary{display:none}:host{-moz-user-select:none;-webkit-user-select:none;background:var(--background-bright);color:var(--text-bright);display:block;position:relative;text-align:center;user-select:none;width:100%}:host .calendar-content{display:flex;height:-webkit-min-content;height:-moz-min-content;height:min-content;left:0;overflow:hidden;position:static;top:0;width:100%}:host .calendar-header{-webkit-user-select:none;align-items:center;border-bottom:1px solid var(--border);border-collapse:collapse;cursor:default;display:flex;flex-flow:row nowrap;justify-content:space-between;padding:1rem .8rem;width:100%}:host .calendar-header .previous{cursor:pointer;display:inline-block;height:15px;width:30px}:host .calendar-header .previous:after{border-bottom:4px solid transparent;border-right:4px solid #aaa;border-top:4px solid transparent;content:\"\";display:inline-block;height:0;vertical-align:middle;width:0}:host .calendar-header .previous:hover:after{border-right:4px solid #4a89dc;cursor:pointer}:host .calendar-header .heading{color:#4a89dc;display:inline-block;flex:1;font-weight:600;vertical-align:middle}:host .calendar-header .heading .month{border-radius:2px;padding:3px 8px}:host .calendar-header .heading .month:hover{background:#4a89dc;color:#fff;cursor:pointer}:host .calendar-header .heading .year{border-radius:2px;padding:3px 8px}:host .calendar-header .heading .year:hover{background:#4a89dc;color:#fff;cursor:pointer}:host .calendar-header .next{cursor:pointer;display:inline-block;height:15px;width:30px}:host .calendar-header .next:before{border-bottom:4px solid transparent;border-left:4px solid #aaa;border-top:4px solid transparent;content:\"\";display:inline-block;height:0;vertical-align:middle;width:0}:host .calendar-header .next:hover:before{border-left:4px solid #4a89dc;cursor:pointer;opacity:1}"]
                 },] }
     ];
@@ -29084,6 +29144,8 @@
     NovoCalendarElement.propDecorators = {
         minYear: [{ type: i0.Input }],
         maxYear: [{ type: i0.Input }],
+        minDate: [{ type: i0.Input }],
+        maxDate: [{ type: i0.Input }],
         activeView: [{ type: i0.Input }],
         layout: [{ type: i0.Input }],
         selected: [{ type: i0.Input }],
@@ -29092,6 +29154,7 @@
         previewChange: [{ type: i0.Output }],
         activeDateChange: [{ type: i0.Output }],
         overlays: [{ type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         activeDate: [{ type: i0.Input }],
         weekStartsOn: [{ type: i0.Input }],
         numberOfMonths: [{ type: i0.Input }],
@@ -29274,7 +29337,7 @@
     NovoMonthViewElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-month-view',
-                    template: "<div class=\"calendar-table\" cellspacing=\"0\" cellpadding=\"0\">\n  <div class=\"calendar-thead\">\n    <div class=\"calendar-th weekday\" *ngFor=\"let day of weekdays\" title=\"{{ day }}\"\n      [attr.data-automation-id]=\"day.substr(0, 2)\">\n      {{ day.substr(0, 2) }}\n    </div>\n  </div>\n  <div class=\"calendar-body\">\n    <div class=\"calendar-week\" *ngFor=\"let week of weeks\">\n      <div class=\"calendar-date\" *ngFor=\"let day of week.days\"\n        [class.today]=\"day.isToday\"\n        [class.notinmonth]=\"day.date.getMonth() !== activeDate.getMonth()\"\n        [class.selected]=\"_isSelected(day.date)\"\n        [class.preview]=\"_isPreview(day.date)\"\n        [class.overlay]=\"_isOverlay(day.date)\"\n        [class]=\"_hasOverlayType(day.date)\"\n        [class.inRange]=\"_isInRange(day.date)\"\n        [class.rangeStart]=\"_isRangeStart(day.date)\"\n        [class.rangeEnd]=\"_isRangeEnd(day.date)\"\n        [class.inPreview]=\"_isInPreview(day.date)\"\n        [class.previewStart]=\"_isPreviewStart(day.date)\"\n        [class.previewEnd]=\"_isPreviewEnd(day.date)\"\n        [class.calendar-date]=\"true\"\n        [attr.aria-label]=\"day.name\"\n        [attr.aria-disabled]=\"isDisabled(day.date)\"\n        [attr.aria-selected]=\"_isSelected(day.date)\"\n        [attr.data-automation-id]=\"day.number\"\n        (mouseover)=\"onHover($event, day)\">\n        <novo-button\n          class=\"day\"\n          [attr.data-automation-id]=\"day.number\"\n          [disabled]=\"isDisabled(day.date)\"\n          (click)=\"onSelect($event, day)\">\n          {{ day.number }}\n        </novo-button>\n      </div>\n    </div>\n  </div>\n</div>",
+                    template: "<div class=\"calendar-table\" cellspacing=\"0\" cellpadding=\"0\">\n  <div class=\"calendar-thead\">\n    <div class=\"calendar-th weekday\" *ngFor=\"let day of weekdays\" title=\"{{ day }}\"\n      [attr.data-automation-id]=\"day.substr(0, 2)\">\n      {{ day.substr(0, 2) }}\n    </div>\n  </div>\n  <div class=\"calendar-body\">\n    <div class=\"calendar-week\" *ngFor=\"let week of weeks\">\n      <div class=\"calendar-date\" *ngFor=\"let day of week.days\"\n        [class.today]=\"day.isToday\"\n        [class.notinmonth]=\"day.date.getMonth() !== activeDate.getMonth()\"\n        [class.selected]=\"_isSelected(day.date)\"\n        [class.preview]=\"_isPreview(day.date)\"\n        [class.overlay]=\"_isOverlay(day.date)\"\n        [class]=\"_hasOverlayType(day.date)\"\n        [class.inRange]=\"_isInRange(day.date)\"\n        [class.rangeStart]=\"_isRangeStart(day.date)\"\n        [class.rangeEnd]=\"_isRangeEnd(day.date)\"\n        [class.inPreview]=\"_isInPreview(day.date)\"\n        [class.previewStart]=\"_isPreviewStart(day.date)\"\n        [class.previewEnd]=\"_isPreviewEnd(day.date)\"\n        [class.calendar-date]=\"true\"\n        [attr.aria-label]=\"day.name\"\n        [attr.aria-disabled]=\"isDisabled(day.date)\"\n        [attr.aria-selected]=\"_isSelected(day.date)\"\n        [attr.data-automation-id]=\"day.number\"\n        [title]=\"isDisabled(day.date) ? disabledDateMessage : ''\"\n        (mouseover)=\"onHover($event, day)\">\n        <novo-button\n          class=\"day\"\n          [attr.data-automation-id]=\"day.number\"\n          [disabled]=\"isDisabled(day.date)\"\n          (click)=\"onSelect($event, day)\">\n          {{ day.number }}\n        </novo-button>\n      </div>\n    </div>\n  </div>\n</div>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{background:var(--background-bright);height:-webkit-min-content;height:-moz-min-content;height:min-content;position:relative;width:100%}:host .calendar-table{display:table}:host .calendar-table .calendar-thead{display:table-header-group}:host .calendar-table .calendar-th{display:table-cell;padding:10px 0;width:30px}:host .calendar-table .calendar-body{display:table-row-group}:host .calendar-table .calendar-week{display:table-row}:host .calendar-table .month,:host .calendar-table .year{border-radius:3px;color:#666;font-weight:400;margin:5px;overflow-x:hidden;padding:4px 15px;text-align:center;text-overflow:ellipsis}:host .calendar-table .month.selected,:host .calendar-table .year.selected{background-color:#4a89dc;color:#fff}:host .calendar-table .month:hover,:host .calendar-table .year:hover{background-color:#4a89dc;color:#fff;cursor:pointer}:host .calendar-table .day{background-color:transparent;border:none;border-radius:50%;box-shadow:inset 0 0 0 2px transparent;color:var(--text-main,#3d464d);font-size:1.2rem;height:3.2rem;line-height:1;padding:1px;position:relative;transition:box-shadow .14s ease-in-out;width:3.2rem}:host .calendar-table .day:focus{outline:none}:host .calendar-table .day:disabled{box-shadow:none!important;color:var(--text-muted,#d7d9e4);cursor:not-allowed!important}:host .calendar-table .calendar-date{display:table-cell}:host .calendar-table .calendar-date.noinmonth>novo-button.day,:host .calendar-table .calendar-date.notinmonth{color:var(--text-muted,#d7d9e4)}:host .calendar-table .calendar-date:hover .day{box-shadow:inset 0 0 0 2px #4a89dc;cursor:pointer}:host .calendar-table .calendar-date.inRange:hover .day{box-shadow:inset 0 0 0 2px #fff}:host .calendar-table .calendar-date.inRange{background:#4a89dc;border-radius:0;color:#fff;height:3.2rem;width:3.2rem}:host .calendar-table .calendar-date.inRange .day{color:#fff}:host .calendar-table .calendar-date.rangeStart{border-radius:50% 0 0 50%;box-shadow:none!important;position:relative}:host .calendar-table .calendar-date.rangeStart:before{background:#4a89dc;content:\"\";height:100%;position:absolute;right:-5px;top:0;width:10px;z-index:-1}:host .calendar-table .calendar-date.rangeEnd{border-radius:0 50% 50% 0;box-shadow:none!important;position:relative}:host .calendar-table .calendar-date.rangeEnd:before{background:#4a89dc;content:\"\";height:100%;left:-5px;position:absolute;top:0;width:10px;z-index:-1}:host .calendar-table .calendar-date.selected .day{background:#4a89dc;color:#fff}:host .calendar-table .calendar-date.preview:not(.previewStart):not(.previewEnd) .day{border:1px dashed #4a89dc}:host .calendar-table .calendar-date.preview:not(.previewStart):not(.previewEnd).selected .day{border:1px dashed #9dbeff}:host .calendar-table .calendar-date.today .day:after{border-radius:100%;box-shadow:inset 0 0 0 2px #dbdbdb;content:\"\";height:100%;left:0;margin:0 auto;max-width:3.2rem;position:absolute;top:0;width:100%}:host .calendar-table .calendar-date.today.inRange .day:after,:host .calendar-table .calendar-date.today.selected .day:after{box-shadow:inset 0 0 0 2px #9dbeff}:host .calendar-table .calendar-date.inPreview .day{border-bottom:1px dashed #4a89dc;border-radius:0;border-top:1px dashed #4a89dc}:host .calendar-table .calendar-date.previewStart .day{border-bottom-right-radius:0;border-left:1px dashed #4a89dc;border-radius:50%;border-top-right-radius:0;box-shadow:none!important}:host .calendar-table .calendar-date.previewEnd .day{border-bottom-left-radius:0;border-radius:50%;border-right:1px dashed #4a89dc;border-top-left-radius:0;box-shadow:none!important}"]
                 },] }
@@ -29292,6 +29355,7 @@
         selected: [{ type: i0.Input }],
         preview: [{ type: i0.Input }],
         overlays: [{ type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         isRange: [{ type: i0.Input }],
         hideOverflowDays: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-overflow-days',] }],
         weekStartsOn: [{ type: i0.Input }],
@@ -30694,7 +30758,7 @@
                         '(focus)': 'focus()',
                         '(blur)': '_blur()',
                     },
-                    styles: [".novo-chip{-moz-appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;align-items:center;background:var(--background-main);border:none;border:1px solid transparent;border-radius:.4rem;box-sizing:border-box;color:inherit;cursor:default;display:inline;display:inline-flex;font-size:var(--font-size-text);font-weight:400;gap:1rem;height:1px;min-height:2.4rem;padding:0 1rem;position:relative;transition:.2s ease-out;transition:all .2s ease-in-out}.novo-chip.text-nowrap{white-space:nowrap}.novo-chip.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-chip.text-size-default{font-size:inherit}.novo-chip.text-size-body{font-size:1.2rem}.novo-chip.text-size-xs{font-size:.8rem}.novo-chip.text-size-sm{font-size:1rem}.novo-chip.text-size-md{font-size:1.2rem}.novo-chip.text-size-lg{font-size:1.6rem}.novo-chip.text-size-xl{font-size:2rem}.novo-chip.text-size-2xl{font-size:2.6rem}.novo-chip.text-size-3xl{font-size:3.2rem}.novo-chip.text-size-smaller{font-size:.8em}.novo-chip.text-size-larger{font-size:1.2em}.novo-chip.text-color-black{color:#000}.novo-chip.text-color-white{color:#fff}.novo-chip.text-color-gray,.novo-chip.text-color-grey{color:#9e9e9e}.novo-chip.text-color-bright,.novo-chip.text-color-offWhite{color:#f7f7f7}.novo-chip.text-color-light{color:#dbdbdb}.novo-chip.text-color-neutral{color:#4f5361}.novo-chip.text-color-dark{color:#3d464d}.novo-chip.text-color-orange{color:#ff6900}.novo-chip.text-color-navigation{color:#202945}.novo-chip.text-color-skyBlue{color:#009bdf}.novo-chip.text-color-steel{color:#5b6770}.novo-chip.text-color-metal{color:#637893}.novo-chip.text-color-sand{color:#f4f4f4}.novo-chip.text-color-silver{color:#e2e2e2}.novo-chip.text-color-stone{color:#bebebe}.novo-chip.text-color-ash{color:#a0a0a0}.novo-chip.text-color-slate{color:#707070}.novo-chip.text-color-onyx{color:#526980}.novo-chip.text-color-charcoal{color:#282828}.novo-chip.text-color-moonlight{color:#1a242f}.novo-chip.text-color-midnight{color:#202945}.novo-chip.text-color-darkness{color:#161f27}.novo-chip.text-color-navy{color:#0d2d42}.novo-chip.text-color-aqua{color:#3bafda}.novo-chip.text-color-ocean{color:#4a89dc}.novo-chip.text-color-mint{color:#37bc9b}.novo-chip.text-color-grass{color:#8cc152}.novo-chip.text-color-sunflower{color:#f6b042}.novo-chip.text-color-bittersweet{color:#eb6845}.novo-chip.text-color-grapefruit{color:#da4453}.novo-chip.text-color-carnation{color:#d770ad}.novo-chip.text-color-lavender{color:#967adc}.novo-chip.text-color-mountain{color:#9678b6}.novo-chip.text-color-info,.novo-chip.text-color-positive{color:#4a89dc}.novo-chip.text-color-success{color:#8cc152}.novo-chip.text-color-danger,.novo-chip.text-color-error,.novo-chip.text-color-negative{color:#da4453}.novo-chip.text-color-warning{color:#f6b042}.novo-chip.text-color-empty{color:#cccdcc}.novo-chip.text-color-disabled{color:#bebebe}.novo-chip.text-color-background{color:#f7f7f7}.novo-chip.text-color-backgroundDark{color:#e2e2e2}.novo-chip.text-color-presentation{color:#5b6770}.novo-chip.text-color-bullhorn{color:#ff6900}.novo-chip.text-color-pulse{color:#3bafda}.novo-chip.text-color-company{color:#39d}.novo-chip.text-color-candidate{color:#4b7}.novo-chip.text-color-lead{color:#a69}.novo-chip.text-color-contact{color:#fa4}.novo-chip.text-color-opportunity{color:#625}.novo-chip.text-color-job{color:#b56}.novo-chip.text-color-submission{color:#a9adbb}.novo-chip.text-color-sendout{color:#747884}.novo-chip.text-color-placement{color:#0b344f}.novo-chip.text-color-note{color:#747884}.novo-chip.text-color-contract{color:#454ea0}.novo-chip.text-color-billableCharge,.novo-chip.text-color-corporateUser,.novo-chip.text-color-credential,.novo-chip.text-color-distributionList,.novo-chip.text-color-earnCode,.novo-chip.text-color-invoiceStatement,.novo-chip.text-color-jobCode,.novo-chip.text-color-payableCharge,.novo-chip.text-color-person,.novo-chip.text-color-user{color:#696d79}.novo-chip.margin-before{margin-top:.4rem}.novo-chip.margin-after{margin-bottom:.8rem}.novo-chip.text-length-small{max-width:40ch}.novo-chip.text-length-medium{max-width:55ch}.novo-chip.text-length-large{max-width:70ch}.novo-chip.text-weight-hairline{font-weight:100}.novo-chip.text-weight-thin{font-weight:200}.novo-chip.text-weight-light{font-weight:300}.novo-chip.text-weight-normal{font-weight:400}.novo-chip.text-weight-medium{font-weight:500}.novo-chip.text-weight-semibold{font-weight:600}.novo-chip.text-weight-bold{font-weight:700}.novo-chip.text-weight-extrabold{font-weight:800}.novo-chip.text-weight-heavy{font-weight:900}.novo-chip.text-weight-lighter{font-weight:lighter}.novo-chip.text-weight-bolder{font-weight:bolder}.novo-chip.novo-chip-selectable{color:var(--selection)}.novo-chip.novo-chip-selectable:after{background-color:#000;border-radius:inherit;bottom:0;content:\"\";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s ease-in-out}.novo-chip.novo-chip-selectable:focus{border:1px solid var(--selection);outline:none}.novo-chip.novo-chip-selectable:focus:after{opacity:.16}.novo-chip.novo-chip-selectable:hover{border:1px solid var(--selection)}.novo-chip.novo-chip-disabled{opacity:.4;pointer-events:none}.novo-chip.novo-chip-disabled:after{opacity:0}.novo-chip.novo-chip-disabled .novo-chip-remove,.novo-chip.novo-chip-disabled .novo-chip-trailing-icon{cursor:default}.novo-chip .novo-chip-avatar::not(novo-icon){height:24px;width:24px}.novo-chip .novo-chip-avatar{-o-object-fit:cover;align-items:center;border-radius:50%;display:flex;justify-content:center;margin-left:0;margin-right:0;object-fit:cover;overflow:hidden}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{cursor:pointer;height:18px;margin-left:0;margin-right:0;width:18px}.novo-chip .novo-chip-remove{color:#dbdbdb}.novo-chip:not(.novo-chip-disabled) .novo-chip-remove:hover{color:#8f8f8f}.novo-chip.novo-size-xs{border-radius:.4rem;font-size:.8rem;min-height:1.6rem;padding:0 .25rem}.novo-chip.novo-size-xs.novo-chip-with-avatar{padding-left:.125rem}.novo-chip.novo-size-xs.novo-chip-with-trailing-icon{padding-right:.125rem}.novo-chip.novo-size-sm{border-radius:.4rem;font-size:1rem;min-height:2rem;padding:0 .5rem}.novo-chip.novo-size-sm.novo-chip-with-avatar{padding-left:.25rem}.novo-chip.novo-size-sm.novo-chip-with-trailing-icon{padding-right:.25rem}.novo-chip.novo-size-md{border-radius:.4rem;font-size:1.2rem;min-height:2.8rem;padding:0 1rem}.novo-chip.novo-size-md.novo-chip-with-avatar{padding-left:.5rem}.novo-chip.novo-size-md.novo-chip-with-trailing-icon{padding-right:.5rem}.novo-chip.novo-size-lg{border-radius:.4rem;font-size:1.4rem;min-height:3.2rem;padding:0 1.25rem}.novo-chip.novo-size-lg.novo-chip-with-avatar{padding-left:.625rem}.novo-chip.novo-size-lg.novo-chip-with-trailing-icon{padding-right:.625rem}.novo-chip.novo-size-xl{border-radius:.4rem;font-size:1.8rem;min-height:3.6rem;padding:0 1.5rem}.novo-chip.novo-size-xl.novo-chip-with-avatar{padding-left:.75rem}.novo-chip.novo-size-xl.novo-chip-with-trailing-icon{padding-right:.75rem}.novo-chip.novo-color-black{background:#000;color:#fff}.novo-chip.novo-color-black>*{color:inherit}.novo-chip.novo-accent-black{border:1px solid #000;color:#000}.novo-chip.novo-color-white{background:#fff;color:#3d464d}.novo-chip.novo-color-white>*{color:inherit}.novo-chip.novo-accent-white{border:1px solid #fff;color:#fff}.novo-chip.novo-color-gray{background:#9e9e9e;color:#3d464d}.novo-chip.novo-color-gray>*{color:inherit}.novo-chip.novo-accent-gray{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-grey{background:#9e9e9e;color:#3d464d}.novo-chip.novo-color-grey>*{color:inherit}.novo-chip.novo-accent-grey{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-offWhite{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-offWhite>*{color:inherit}.novo-chip.novo-accent-offWhite{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-bright{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-bright>*{color:inherit}.novo-chip.novo-accent-bright{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-light{background:#dbdbdb;color:#3d464d}.novo-chip.novo-color-light>*{color:inherit}.novo-chip.novo-accent-light{border:1px solid #dbdbdb;color:#dbdbdb}.novo-chip.novo-color-neutral{background:#4f5361;color:#fff}.novo-chip.novo-color-neutral>*{color:inherit}.novo-chip.novo-accent-neutral{border:1px solid #4f5361;color:#4f5361}.novo-chip.novo-color-dark{background:#3d464d;color:#fff}.novo-chip.novo-color-dark>*{color:inherit}.novo-chip.novo-accent-dark{border:1px solid #3d464d;color:#3d464d}.novo-chip.novo-color-orange{background:#ff6900;color:#3d464d}.novo-chip.novo-color-orange>*{color:inherit}.novo-chip.novo-accent-orange{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-navigation{background:#202945;color:#fff}.novo-chip.novo-color-navigation>*{color:inherit}.novo-chip.novo-accent-navigation{border:1px solid #202945;color:#202945}.novo-chip.novo-color-skyBlue{background:#009bdf;color:#fff}.novo-chip.novo-color-skyBlue>*{color:inherit}.novo-chip.novo-accent-skyBlue{border:1px solid #009bdf;color:#009bdf}.novo-chip.novo-color-steel{background:#5b6770;color:#fff}.novo-chip.novo-color-steel>*{color:inherit}.novo-chip.novo-accent-steel{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-metal{background:#637893;color:#fff}.novo-chip.novo-color-metal>*{color:inherit}.novo-chip.novo-accent-metal{border:1px solid #637893;color:#637893}.novo-chip.novo-color-sand{background:#f4f4f4;color:#3d464d}.novo-chip.novo-color-sand>*{color:inherit}.novo-chip.novo-accent-sand{border:1px solid #f4f4f4;color:#f4f4f4}.novo-chip.novo-color-silver{background:#e2e2e2;color:#3d464d}.novo-chip.novo-color-silver>*{color:inherit}.novo-chip.novo-accent-silver{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-stone{background:#bebebe;color:#3d464d}.novo-chip.novo-color-stone>*{color:inherit}.novo-chip.novo-accent-stone{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-ash{background:#a0a0a0;color:#3d464d}.novo-chip.novo-color-ash>*{color:inherit}.novo-chip.novo-accent-ash{border:1px solid #a0a0a0;color:#a0a0a0}.novo-chip.novo-color-slate{background:#707070;color:#fff}.novo-chip.novo-color-slate>*{color:inherit}.novo-chip.novo-accent-slate{border:1px solid #707070;color:#707070}.novo-chip.novo-color-onyx{background:#526980;color:#fff}.novo-chip.novo-color-onyx>*{color:inherit}.novo-chip.novo-accent-onyx{border:1px solid #526980;color:#526980}.novo-chip.novo-color-charcoal{background:#282828;color:#fff}.novo-chip.novo-color-charcoal>*{color:inherit}.novo-chip.novo-accent-charcoal{border:1px solid #282828;color:#282828}.novo-chip.novo-color-moonlight{background:#1a242f;color:#fff}.novo-chip.novo-color-moonlight>*{color:inherit}.novo-chip.novo-accent-moonlight{border:1px solid #1a242f;color:#1a242f}.novo-chip.novo-color-midnight{background:#202945;color:#fff}.novo-chip.novo-color-midnight>*{color:inherit}.novo-chip.novo-accent-midnight{border:1px solid #202945;color:#202945}.novo-chip.novo-color-darkness{background:#161f27;color:#fff}.novo-chip.novo-color-darkness>*{color:inherit}.novo-chip.novo-accent-darkness{border:1px solid #161f27;color:#161f27}.novo-chip.novo-color-navy{background:#0d2d42;color:#fff}.novo-chip.novo-color-navy>*{color:inherit}.novo-chip.novo-accent-navy{border:1px solid #0d2d42;color:#0d2d42}.novo-chip.novo-color-aqua{background:#3bafda;color:#3d464d}.novo-chip.novo-color-aqua>*{color:inherit}.novo-chip.novo-accent-aqua{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-ocean{background:#4a89dc;color:#fff}.novo-chip.novo-color-ocean>*{color:inherit}.novo-chip.novo-accent-ocean{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-mint{background:#37bc9b;color:#3d464d}.novo-chip.novo-color-mint>*{color:inherit}.novo-chip.novo-accent-mint{border:1px solid #37bc9b;color:#37bc9b}.novo-chip.novo-color-grass{background:#8cc152;color:#fff}.novo-chip.novo-color-grass>*{color:inherit}.novo-chip.novo-accent-grass{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-sunflower{background:#f6b042;color:#fff}.novo-chip.novo-color-sunflower>*{color:inherit}.novo-chip.novo-accent-sunflower{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-bittersweet{background:#eb6845;color:#fff}.novo-chip.novo-color-bittersweet>*{color:inherit}.novo-chip.novo-accent-bittersweet{border:1px solid #eb6845;color:#eb6845}.novo-chip.novo-color-grapefruit{background:#da4453;color:#fff}.novo-chip.novo-color-grapefruit>*{color:inherit}.novo-chip.novo-accent-grapefruit{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-carnation{background:#d770ad;color:#fff}.novo-chip.novo-color-carnation>*{color:inherit}.novo-chip.novo-accent-carnation{border:1px solid #d770ad;color:#d770ad}.novo-chip.novo-color-lavender{background:#967adc;color:#fff}.novo-chip.novo-color-lavender>*{color:inherit}.novo-chip.novo-accent-lavender{border:1px solid #967adc;color:#967adc}.novo-chip.novo-color-mountain{background:#9678b6;color:#fff}.novo-chip.novo-color-mountain>*{color:inherit}.novo-chip.novo-accent-mountain{border:1px solid #9678b6;color:#9678b6}.novo-chip.novo-color-info{background:#4a89dc;color:#fff}.novo-chip.novo-color-info>*{color:inherit}.novo-chip.novo-accent-info{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-positive{background:#4a89dc;color:#fff}.novo-chip.novo-color-positive>*{color:inherit}.novo-chip.novo-accent-positive{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-success{background:#8cc152;color:#fff}.novo-chip.novo-color-success>*{color:inherit}.novo-chip.novo-accent-success{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-negative{background:#da4453;color:#fff}.novo-chip.novo-color-negative>*{color:inherit}.novo-chip.novo-accent-negative{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-danger{background:#da4453;color:#fff}.novo-chip.novo-color-danger>*{color:inherit}.novo-chip.novo-accent-danger{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-error{background:#da4453;color:#fff}.novo-chip.novo-color-error>*{color:inherit}.novo-chip.novo-accent-error{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-warning{background:#f6b042;color:#fff}.novo-chip.novo-color-warning>*{color:inherit}.novo-chip.novo-accent-warning{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-empty{background:#cccdcc;color:#3d464d}.novo-chip.novo-color-empty>*{color:inherit}.novo-chip.novo-accent-empty{border:1px solid #cccdcc;color:#cccdcc}.novo-chip.novo-color-disabled{background:#bebebe;color:#3d464d}.novo-chip.novo-color-disabled>*{color:inherit}.novo-chip.novo-accent-disabled{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-background{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-background>*{color:inherit}.novo-chip.novo-accent-background{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-backgroundDark{background:#e2e2e2;color:#3d464d}.novo-chip.novo-color-backgroundDark>*{color:inherit}.novo-chip.novo-accent-backgroundDark{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-presentation{background:#5b6770;color:#fff}.novo-chip.novo-color-presentation>*{color:inherit}.novo-chip.novo-accent-presentation{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-bullhorn{background:#ff6900;color:#3d464d}.novo-chip.novo-color-bullhorn>*{color:inherit}.novo-chip.novo-accent-bullhorn{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-pulse{background:#3bafda;color:#3d464d}.novo-chip.novo-color-pulse>*{color:inherit}.novo-chip.novo-accent-pulse{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-company{background:#39d;color:#fff}.novo-chip.novo-color-company>*{color:inherit}.novo-chip.novo-accent-company{border:1px solid #39d;color:#39d}.novo-chip.novo-color-candidate{background:#4b7;color:#fff}.novo-chip.novo-color-candidate>*{color:inherit}.novo-chip.novo-accent-candidate{border:1px solid #4b7;color:#4b7}.novo-chip.novo-color-lead{background:#a69;color:#fff}.novo-chip.novo-color-lead>*{color:inherit}.novo-chip.novo-accent-lead{border:1px solid #a69;color:#a69}.novo-chip.novo-color-contact{background:#fa4;color:#fff}.novo-chip.novo-color-contact>*{color:inherit}.novo-chip.novo-accent-contact{border:1px solid #fa4;color:#fa4}.novo-chip.novo-color-opportunity{background:#625;color:#fff}.novo-chip.novo-color-opportunity>*{color:inherit}.novo-chip.novo-accent-opportunity{border:1px solid #625;color:#625}.novo-chip.novo-color-job{background:#b56;color:#fff}.novo-chip.novo-color-job>*{color:inherit}.novo-chip.novo-accent-job{border:1px solid #b56;color:#b56}.novo-chip.novo-color-submission{background:#a9adbb;color:#3d464d}.novo-chip.novo-color-submission>*{color:inherit}.novo-chip.novo-accent-submission{border:1px solid #a9adbb;color:#a9adbb}.novo-chip.novo-color-sendout{background:#747884;color:#fff}.novo-chip.novo-color-sendout>*{color:inherit}.novo-chip.novo-accent-sendout{border:1px solid #747884;color:#747884}.novo-chip.novo-color-placement{background:#0b344f;color:#fff}.novo-chip.novo-color-placement>*{color:inherit}.novo-chip.novo-accent-placement{border:1px solid #0b344f;color:#0b344f}.novo-chip.novo-color-note{background:#747884;color:#fff}.novo-chip.novo-color-note>*{color:inherit}.novo-chip.novo-accent-note{border:1px solid #747884;color:#747884}.novo-chip.novo-color-contract{background:#454ea0;color:#fff}.novo-chip.novo-color-contract>*{color:inherit}.novo-chip.novo-accent-contract{border:1px solid #454ea0;color:#454ea0}.novo-chip.novo-color-jobCode{background:#696d79;color:#fff}.novo-chip.novo-color-jobCode>*{color:inherit}.novo-chip.novo-accent-jobCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-earnCode{background:#696d79;color:#fff}.novo-chip.novo-color-earnCode>*{color:inherit}.novo-chip.novo-accent-earnCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-invoiceStatement{background:#696d79;color:#fff}.novo-chip.novo-color-invoiceStatement>*{color:inherit}.novo-chip.novo-accent-invoiceStatement{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-billableCharge{background:#696d79;color:#fff}.novo-chip.novo-color-billableCharge>*{color:inherit}.novo-chip.novo-accent-billableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-payableCharge{background:#696d79;color:#fff}.novo-chip.novo-color-payableCharge>*{color:inherit}.novo-chip.novo-accent-payableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-user{background:#696d79;color:#fff}.novo-chip.novo-color-user>*{color:inherit}.novo-chip.novo-accent-user{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-corporateUser{background:#696d79;color:#fff}.novo-chip.novo-color-corporateUser>*{color:inherit}.novo-chip.novo-accent-corporateUser{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-distributionList{background:#696d79;color:#fff}.novo-chip.novo-color-distributionList>*{color:inherit}.novo-chip.novo-accent-distributionList{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-credential{background:#696d79;color:#fff}.novo-chip.novo-color-credential>*{color:inherit}.novo-chip.novo-accent-credential{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-person{background:#696d79;color:#fff}.novo-chip.novo-color-person>*{color:inherit}.novo-chip.novo-accent-person{border:1px solid #696d79;color:#696d79}"]
+                    styles: [".novo-chip{-moz-appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;align-items:center;background:var(--background-main);border:none;border:1px solid transparent;border-radius:.4rem;box-sizing:border-box;color:inherit;cursor:default;display:inline;display:inline-flex;font-size:var(--font-size-text);font-weight:400;gap:1rem;height:1px;min-height:2.4rem;padding:0 1rem;position:relative;transition:.2s ease-out;transition:all .2s ease-in-out;transition-property:color,opacity;vertical-align:middle}.novo-chip.text-nowrap{white-space:nowrap}.novo-chip.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.novo-chip.text-size-default{font-size:inherit}.novo-chip.text-size-body{font-size:1.3rem}.novo-chip.text-size-xs{font-size:1rem}.novo-chip.text-size-sm{font-size:1.2rem}.novo-chip.text-size-md{font-size:1.3rem}.novo-chip.text-size-lg{font-size:1.6rem}.novo-chip.text-size-xl{font-size:2rem}.novo-chip.text-size-2xl{font-size:2.6rem}.novo-chip.text-size-3xl{font-size:3.2rem}.novo-chip.text-size-smaller{font-size:.8em}.novo-chip.text-size-larger{font-size:1.2em}.novo-chip.text-color-black{color:#000}.novo-chip.text-color-white{color:#fff}.novo-chip.text-color-gray,.novo-chip.text-color-grey{color:#9e9e9e}.novo-chip.text-color-bright,.novo-chip.text-color-offWhite{color:#f7f7f7}.novo-chip.text-color-light{color:#dbdbdb}.novo-chip.text-color-neutral{color:#4f5361}.novo-chip.text-color-dark{color:#3d464d}.novo-chip.text-color-orange{color:#ff6900}.novo-chip.text-color-navigation{color:#202945}.novo-chip.text-color-skyBlue{color:#009bdf}.novo-chip.text-color-steel{color:#5b6770}.novo-chip.text-color-metal{color:#637893}.novo-chip.text-color-sand{color:#f4f4f4}.novo-chip.text-color-silver{color:#e2e2e2}.novo-chip.text-color-stone{color:#bebebe}.novo-chip.text-color-ash{color:#a0a0a0}.novo-chip.text-color-slate{color:#707070}.novo-chip.text-color-onyx{color:#526980}.novo-chip.text-color-charcoal{color:#282828}.novo-chip.text-color-moonlight{color:#1a242f}.novo-chip.text-color-midnight{color:#202945}.novo-chip.text-color-darkness{color:#161f27}.novo-chip.text-color-navy{color:#0d2d42}.novo-chip.text-color-aqua{color:#3bafda}.novo-chip.text-color-ocean{color:#4a89dc}.novo-chip.text-color-mint{color:#37bc9b}.novo-chip.text-color-grass{color:#8cc152}.novo-chip.text-color-sunflower{color:#f6b042}.novo-chip.text-color-bittersweet{color:#eb6845}.novo-chip.text-color-grapefruit{color:#da4453}.novo-chip.text-color-carnation{color:#d770ad}.novo-chip.text-color-lavender{color:#967adc}.novo-chip.text-color-mountain{color:#9678b6}.novo-chip.text-color-info,.novo-chip.text-color-positive{color:#4a89dc}.novo-chip.text-color-success{color:#8cc152}.novo-chip.text-color-danger,.novo-chip.text-color-error,.novo-chip.text-color-negative{color:#da4453}.novo-chip.text-color-warning{color:#f6b042}.novo-chip.text-color-empty{color:#cccdcc}.novo-chip.text-color-disabled{color:#bebebe}.novo-chip.text-color-background{color:#f7f7f7}.novo-chip.text-color-backgroundDark{color:#e2e2e2}.novo-chip.text-color-presentation{color:#5b6770}.novo-chip.text-color-bullhorn{color:#ff6900}.novo-chip.text-color-pulse{color:#3bafda}.novo-chip.text-color-company{color:#39d}.novo-chip.text-color-candidate{color:#4b7}.novo-chip.text-color-lead{color:#a69}.novo-chip.text-color-contact{color:#fa4}.novo-chip.text-color-opportunity{color:#625}.novo-chip.text-color-job{color:#b56}.novo-chip.text-color-submission{color:#a9adbb}.novo-chip.text-color-sendout{color:#747884}.novo-chip.text-color-placement{color:#0b344f}.novo-chip.text-color-note{color:#747884}.novo-chip.text-color-contract{color:#454ea0}.novo-chip.text-color-billableCharge,.novo-chip.text-color-corporateUser,.novo-chip.text-color-credential,.novo-chip.text-color-distributionList,.novo-chip.text-color-earnCode,.novo-chip.text-color-invoiceStatement,.novo-chip.text-color-jobCode,.novo-chip.text-color-payableCharge,.novo-chip.text-color-person,.novo-chip.text-color-user{color:#696d79}.novo-chip.margin-before{margin-top:.4rem}.novo-chip.margin-after{margin-bottom:.8rem}.novo-chip.text-length-small{max-width:40ch}.novo-chip.text-length-medium{max-width:55ch}.novo-chip.text-length-large{max-width:70ch}.novo-chip.text-weight-hairline{font-weight:100}.novo-chip.text-weight-thin{font-weight:200}.novo-chip.text-weight-light{font-weight:300}.novo-chip.text-weight-normal{font-weight:400}.novo-chip.text-weight-medium{font-weight:500}.novo-chip.text-weight-semibold{font-weight:600}.novo-chip.text-weight-bold{font-weight:700}.novo-chip.text-weight-extrabold{font-weight:800}.novo-chip.text-weight-heavy{font-weight:900}.novo-chip.text-weight-lighter{font-weight:lighter}.novo-chip.text-weight-bolder{font-weight:bolder}.novo-chip.novo-chip-selectable{color:var(--selection)}.novo-chip.novo-chip-selectable:after{background-color:#000;border-radius:inherit;bottom:0;content:\"\";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s ease-in-out}.novo-chip.novo-chip-selectable:focus{border:1px solid var(--selection);outline:none}.novo-chip.novo-chip-selectable:focus:after{opacity:.16}.novo-chip.novo-chip-selectable:hover{border:1px solid var(--selection)}.novo-chip.novo-chip-disabled{opacity:.4;pointer-events:none}.novo-chip.novo-chip-disabled:after{opacity:0}.novo-chip.novo-chip-disabled .novo-chip-remove,.novo-chip.novo-chip-disabled .novo-chip-trailing-icon{cursor:default}.novo-chip .novo-chip-avatar::not(novo-icon){height:24px;width:24px}.novo-chip .novo-chip-avatar{-o-object-fit:cover;align-items:center;border-radius:50%;display:flex;justify-content:center;margin-left:0;margin-right:0;object-fit:cover;overflow:hidden}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{cursor:pointer;height:18px;margin-left:0;margin-right:0;width:18px}.novo-chip .novo-chip-remove{color:#dbdbdb}.novo-chip:not(.novo-chip-disabled) .novo-chip-remove:hover{color:#8f8f8f}.novo-chip.novo-size-xs{border-radius:.4rem;font-size:.8rem;gap:.25rem;min-height:1.6rem;padding:0 .25rem}.novo-chip.novo-size-xs.novo-chip-with-avatar{padding-left:.125rem}.novo-chip.novo-size-xs.novo-chip-with-trailing-icon{padding-right:.125rem}.novo-chip.novo-size-xs .novo-text{font-size:inherit}.novo-chip.novo-size-sm{border-radius:.4rem;font-size:1rem;gap:.5rem;min-height:2rem;padding:0 .5rem}.novo-chip.novo-size-sm.novo-chip-with-avatar{padding-left:.25rem}.novo-chip.novo-size-sm.novo-chip-with-trailing-icon{padding-right:.25rem}.novo-chip.novo-size-sm .novo-text{font-size:inherit}.novo-chip.novo-size-md{border-radius:.4rem;font-size:1.2rem;gap:1rem;min-height:2.8rem;padding:0 1rem}.novo-chip.novo-size-md.novo-chip-with-avatar{padding-left:.5rem}.novo-chip.novo-size-md.novo-chip-with-trailing-icon{padding-right:.5rem}.novo-chip.novo-size-md .novo-text{font-size:inherit}.novo-chip.novo-size-lg{border-radius:.4rem;font-size:1.4rem;gap:1.25rem;min-height:3.2rem;padding:0 1.25rem}.novo-chip.novo-size-lg.novo-chip-with-avatar{padding-left:.625rem}.novo-chip.novo-size-lg.novo-chip-with-trailing-icon{padding-right:.625rem}.novo-chip.novo-size-lg .novo-text{font-size:inherit}.novo-chip.novo-size-xl{border-radius:.4rem;font-size:1.8rem;gap:1.5rem;min-height:3.6rem;padding:0 1.5rem}.novo-chip.novo-size-xl.novo-chip-with-avatar{padding-left:.75rem}.novo-chip.novo-size-xl.novo-chip-with-trailing-icon{padding-right:.75rem}.novo-chip.novo-size-xl .novo-text{font-size:inherit}.novo-chip.novo-color-black{background:#000;color:#fff}.novo-chip.novo-color-black>*{color:inherit}.novo-chip.novo-accent-black{border:1px solid #000;color:#000}.novo-chip.novo-color-white{background:#fff;color:#3d464d}.novo-chip.novo-color-white>*{color:inherit}.novo-chip.novo-accent-white{border:1px solid #fff;color:#fff}.novo-chip.novo-color-gray{background:#9e9e9e;color:#3d464d}.novo-chip.novo-color-gray>*{color:inherit}.novo-chip.novo-accent-gray{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-grey{background:#9e9e9e;color:#3d464d}.novo-chip.novo-color-grey>*{color:inherit}.novo-chip.novo-accent-grey{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-offWhite{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-offWhite>*{color:inherit}.novo-chip.novo-accent-offWhite{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-bright{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-bright>*{color:inherit}.novo-chip.novo-accent-bright{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-light{background:#dbdbdb;color:#3d464d}.novo-chip.novo-color-light>*{color:inherit}.novo-chip.novo-accent-light{border:1px solid #dbdbdb;color:#dbdbdb}.novo-chip.novo-color-neutral{background:#4f5361;color:#fff}.novo-chip.novo-color-neutral>*{color:inherit}.novo-chip.novo-accent-neutral{border:1px solid #4f5361;color:#4f5361}.novo-chip.novo-color-dark{background:#3d464d;color:#fff}.novo-chip.novo-color-dark>*{color:inherit}.novo-chip.novo-accent-dark{border:1px solid #3d464d;color:#3d464d}.novo-chip.novo-color-orange{background:#ff6900;color:#3d464d}.novo-chip.novo-color-orange>*{color:inherit}.novo-chip.novo-accent-orange{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-navigation{background:#202945;color:#fff}.novo-chip.novo-color-navigation>*{color:inherit}.novo-chip.novo-accent-navigation{border:1px solid #202945;color:#202945}.novo-chip.novo-color-skyBlue{background:#009bdf;color:#fff}.novo-chip.novo-color-skyBlue>*{color:inherit}.novo-chip.novo-accent-skyBlue{border:1px solid #009bdf;color:#009bdf}.novo-chip.novo-color-steel{background:#5b6770;color:#fff}.novo-chip.novo-color-steel>*{color:inherit}.novo-chip.novo-accent-steel{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-metal{background:#637893;color:#fff}.novo-chip.novo-color-metal>*{color:inherit}.novo-chip.novo-accent-metal{border:1px solid #637893;color:#637893}.novo-chip.novo-color-sand{background:#f4f4f4;color:#3d464d}.novo-chip.novo-color-sand>*{color:inherit}.novo-chip.novo-accent-sand{border:1px solid #f4f4f4;color:#f4f4f4}.novo-chip.novo-color-silver{background:#e2e2e2;color:#3d464d}.novo-chip.novo-color-silver>*{color:inherit}.novo-chip.novo-accent-silver{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-stone{background:#bebebe;color:#3d464d}.novo-chip.novo-color-stone>*{color:inherit}.novo-chip.novo-accent-stone{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-ash{background:#a0a0a0;color:#3d464d}.novo-chip.novo-color-ash>*{color:inherit}.novo-chip.novo-accent-ash{border:1px solid #a0a0a0;color:#a0a0a0}.novo-chip.novo-color-slate{background:#707070;color:#fff}.novo-chip.novo-color-slate>*{color:inherit}.novo-chip.novo-accent-slate{border:1px solid #707070;color:#707070}.novo-chip.novo-color-onyx{background:#526980;color:#fff}.novo-chip.novo-color-onyx>*{color:inherit}.novo-chip.novo-accent-onyx{border:1px solid #526980;color:#526980}.novo-chip.novo-color-charcoal{background:#282828;color:#fff}.novo-chip.novo-color-charcoal>*{color:inherit}.novo-chip.novo-accent-charcoal{border:1px solid #282828;color:#282828}.novo-chip.novo-color-moonlight{background:#1a242f;color:#fff}.novo-chip.novo-color-moonlight>*{color:inherit}.novo-chip.novo-accent-moonlight{border:1px solid #1a242f;color:#1a242f}.novo-chip.novo-color-midnight{background:#202945;color:#fff}.novo-chip.novo-color-midnight>*{color:inherit}.novo-chip.novo-accent-midnight{border:1px solid #202945;color:#202945}.novo-chip.novo-color-darkness{background:#161f27;color:#fff}.novo-chip.novo-color-darkness>*{color:inherit}.novo-chip.novo-accent-darkness{border:1px solid #161f27;color:#161f27}.novo-chip.novo-color-navy{background:#0d2d42;color:#fff}.novo-chip.novo-color-navy>*{color:inherit}.novo-chip.novo-accent-navy{border:1px solid #0d2d42;color:#0d2d42}.novo-chip.novo-color-aqua{background:#3bafda;color:#3d464d}.novo-chip.novo-color-aqua>*{color:inherit}.novo-chip.novo-accent-aqua{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-ocean{background:#4a89dc;color:#fff}.novo-chip.novo-color-ocean>*{color:inherit}.novo-chip.novo-accent-ocean{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-mint{background:#37bc9b;color:#3d464d}.novo-chip.novo-color-mint>*{color:inherit}.novo-chip.novo-accent-mint{border:1px solid #37bc9b;color:#37bc9b}.novo-chip.novo-color-grass{background:#8cc152;color:#fff}.novo-chip.novo-color-grass>*{color:inherit}.novo-chip.novo-accent-grass{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-sunflower{background:#f6b042;color:#fff}.novo-chip.novo-color-sunflower>*{color:inherit}.novo-chip.novo-accent-sunflower{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-bittersweet{background:#eb6845;color:#fff}.novo-chip.novo-color-bittersweet>*{color:inherit}.novo-chip.novo-accent-bittersweet{border:1px solid #eb6845;color:#eb6845}.novo-chip.novo-color-grapefruit{background:#da4453;color:#fff}.novo-chip.novo-color-grapefruit>*{color:inherit}.novo-chip.novo-accent-grapefruit{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-carnation{background:#d770ad;color:#fff}.novo-chip.novo-color-carnation>*{color:inherit}.novo-chip.novo-accent-carnation{border:1px solid #d770ad;color:#d770ad}.novo-chip.novo-color-lavender{background:#967adc;color:#fff}.novo-chip.novo-color-lavender>*{color:inherit}.novo-chip.novo-accent-lavender{border:1px solid #967adc;color:#967adc}.novo-chip.novo-color-mountain{background:#9678b6;color:#fff}.novo-chip.novo-color-mountain>*{color:inherit}.novo-chip.novo-accent-mountain{border:1px solid #9678b6;color:#9678b6}.novo-chip.novo-color-info{background:#4a89dc;color:#fff}.novo-chip.novo-color-info>*{color:inherit}.novo-chip.novo-accent-info{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-positive{background:#4a89dc;color:#fff}.novo-chip.novo-color-positive>*{color:inherit}.novo-chip.novo-accent-positive{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-success{background:#8cc152;color:#fff}.novo-chip.novo-color-success>*{color:inherit}.novo-chip.novo-accent-success{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-negative{background:#da4453;color:#fff}.novo-chip.novo-color-negative>*{color:inherit}.novo-chip.novo-accent-negative{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-danger{background:#da4453;color:#fff}.novo-chip.novo-color-danger>*{color:inherit}.novo-chip.novo-accent-danger{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-error{background:#da4453;color:#fff}.novo-chip.novo-color-error>*{color:inherit}.novo-chip.novo-accent-error{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-warning{background:#f6b042;color:#fff}.novo-chip.novo-color-warning>*{color:inherit}.novo-chip.novo-accent-warning{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-empty{background:#cccdcc;color:#3d464d}.novo-chip.novo-color-empty>*{color:inherit}.novo-chip.novo-accent-empty{border:1px solid #cccdcc;color:#cccdcc}.novo-chip.novo-color-disabled{background:#bebebe;color:#3d464d}.novo-chip.novo-color-disabled>*{color:inherit}.novo-chip.novo-accent-disabled{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-background{background:#f7f7f7;color:#3d464d}.novo-chip.novo-color-background>*{color:inherit}.novo-chip.novo-accent-background{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-backgroundDark{background:#e2e2e2;color:#3d464d}.novo-chip.novo-color-backgroundDark>*{color:inherit}.novo-chip.novo-accent-backgroundDark{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-presentation{background:#5b6770;color:#fff}.novo-chip.novo-color-presentation>*{color:inherit}.novo-chip.novo-accent-presentation{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-bullhorn{background:#ff6900;color:#3d464d}.novo-chip.novo-color-bullhorn>*{color:inherit}.novo-chip.novo-accent-bullhorn{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-pulse{background:#3bafda;color:#3d464d}.novo-chip.novo-color-pulse>*{color:inherit}.novo-chip.novo-accent-pulse{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-company{background:#39d;color:#fff}.novo-chip.novo-color-company>*{color:inherit}.novo-chip.novo-accent-company{border:1px solid #39d;color:#39d}.novo-chip.novo-color-candidate{background:#4b7;color:#fff}.novo-chip.novo-color-candidate>*{color:inherit}.novo-chip.novo-accent-candidate{border:1px solid #4b7;color:#4b7}.novo-chip.novo-color-lead{background:#a69;color:#fff}.novo-chip.novo-color-lead>*{color:inherit}.novo-chip.novo-accent-lead{border:1px solid #a69;color:#a69}.novo-chip.novo-color-contact{background:#fa4;color:#fff}.novo-chip.novo-color-contact>*{color:inherit}.novo-chip.novo-accent-contact{border:1px solid #fa4;color:#fa4}.novo-chip.novo-color-opportunity{background:#625;color:#fff}.novo-chip.novo-color-opportunity>*{color:inherit}.novo-chip.novo-accent-opportunity{border:1px solid #625;color:#625}.novo-chip.novo-color-job{background:#b56;color:#fff}.novo-chip.novo-color-job>*{color:inherit}.novo-chip.novo-accent-job{border:1px solid #b56;color:#b56}.novo-chip.novo-color-submission{background:#a9adbb;color:#3d464d}.novo-chip.novo-color-submission>*{color:inherit}.novo-chip.novo-accent-submission{border:1px solid #a9adbb;color:#a9adbb}.novo-chip.novo-color-sendout{background:#747884;color:#fff}.novo-chip.novo-color-sendout>*{color:inherit}.novo-chip.novo-accent-sendout{border:1px solid #747884;color:#747884}.novo-chip.novo-color-placement{background:#0b344f;color:#fff}.novo-chip.novo-color-placement>*{color:inherit}.novo-chip.novo-accent-placement{border:1px solid #0b344f;color:#0b344f}.novo-chip.novo-color-note{background:#747884;color:#fff}.novo-chip.novo-color-note>*{color:inherit}.novo-chip.novo-accent-note{border:1px solid #747884;color:#747884}.novo-chip.novo-color-contract{background:#454ea0;color:#fff}.novo-chip.novo-color-contract>*{color:inherit}.novo-chip.novo-accent-contract{border:1px solid #454ea0;color:#454ea0}.novo-chip.novo-color-jobCode{background:#696d79;color:#fff}.novo-chip.novo-color-jobCode>*{color:inherit}.novo-chip.novo-accent-jobCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-earnCode{background:#696d79;color:#fff}.novo-chip.novo-color-earnCode>*{color:inherit}.novo-chip.novo-accent-earnCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-invoiceStatement{background:#696d79;color:#fff}.novo-chip.novo-color-invoiceStatement>*{color:inherit}.novo-chip.novo-accent-invoiceStatement{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-billableCharge{background:#696d79;color:#fff}.novo-chip.novo-color-billableCharge>*{color:inherit}.novo-chip.novo-accent-billableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-payableCharge{background:#696d79;color:#fff}.novo-chip.novo-color-payableCharge>*{color:inherit}.novo-chip.novo-accent-payableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-user{background:#696d79;color:#fff}.novo-chip.novo-color-user>*{color:inherit}.novo-chip.novo-accent-user{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-corporateUser{background:#696d79;color:#fff}.novo-chip.novo-color-corporateUser>*{color:inherit}.novo-chip.novo-accent-corporateUser{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-distributionList{background:#696d79;color:#fff}.novo-chip.novo-color-distributionList>*{color:inherit}.novo-chip.novo-accent-distributionList{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-credential{background:#696d79;color:#fff}.novo-chip.novo-color-credential>*{color:inherit}.novo-chip.novo-accent-credential{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-person{background:#696d79;color:#fff}.novo-chip.novo-color-person>*{color:inherit}.novo-chip.novo-accent-person{border:1px solid #696d79;color:#696d79}"]
                 },] }
     ];
     NovoChipElement.ctorParameters = function () { return [
@@ -30775,7 +30839,7 @@
                         // Remove align attribute to prevent it from interfering with layout.
                         '[attr.align]': 'null',
                     },
-                    styles: [":host{color:var(--text-muted,#3d464d);color:#9e9e9e;display:flex;flex:1 0 auto;font-size:var(--font-size-caption);font-weight:400;line-height:1.375;padding-bottom:.4rem;padding-top:.4rem;transition:.2s ease-out;width:-webkit-max-content;width:-moz-max-content;width:max-content}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.2rem}:host.text-size-xs{font-size:.8rem}:host.text-size-sm{font-size:1rem}:host.text-size-md{font-size:1.2rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host.novo-field-hint-end{align-content:end;justify-content:flex-end;order:1;text-align:right}"]
+                    styles: [":host{color:var(--text-muted,#3d464d);color:#9e9e9e;display:flex;flex:1 0 auto;font-size:var(--font-size-caption);font-weight:400;line-height:1.375;padding-bottom:.4rem;padding-top:.4rem;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle;width:-webkit-max-content;width:-moz-max-content;width:max-content}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray,:host.text-color-grey{color:#9e9e9e}:host.text-color-bright,:host.text-color-offWhite{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info,:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-danger,:host.text-color-error,:host.text-color-negative{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-billableCharge,:host.text-color-corporateUser,:host.text-color-credential,:host.text-color-distributionList,:host.text-color-earnCode,:host.text-color-invoiceStatement,:host.text-color-jobCode,:host.text-color-payableCharge,:host.text-color-person,:host.text-color-user{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host.novo-field-hint-end{align-content:end;justify-content:flex-end;order:1;text-align:right}"]
                 },] }
     ];
     NovoHintElement.propDecorators = {
@@ -30911,7 +30975,7 @@
                         '[class.ng-pending]': '_shouldForward("pending")',
                     },
                     providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }],
-                    styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0 1rem;grid-template-areas:\"label input\" \". messages\";grid-template-columns:150px minmax(-webkit-min-content,-webkit-max-content);grid-template-columns:150px minmax(min-content,max-content)}:host.novo-field-layout-vertical{grid-template-areas:\"label\" \"input\" \"messages\";grid-template-columns:minmax(-webkit-min-content,100%);grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(-webkit-min-content,-webkit-max-content));grid-template-rows:repeat(3,minmax(min-content,max-content));width:-webkit-max-content;width:-moz-max-content;width:max-content}:host .novo-field-label{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:grid;grid-area:label}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host .novo-field-input{-ms-grid-column:3;-ms-grid-row:1;display:grid;flex:1 1 100%;grid-area:input;grid-template-columns:minmax(auto,-webkit-max-content) 1fr minmax(auto,-webkit-max-content);grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content)}:host .novo-field-input::ng-deep .novo-input-element{background-color:transparent;background-image:none;border:none;border-bottom:none!important;box-shadow:none;color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;padding:.4rem .2rem;transition:.2s ease-out}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray,:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright,:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info,:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger,:host .novo-field-input::ng-deep .novo-input-element.text-color-error,:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge,:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser,:host .novo-field-input::ng-deep .novo-input-element.text-color-credential,:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList,:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode,:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement,:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode,:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge,:host .novo-field-input::ng-deep .novo-input-element.text-color-person,:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-infix,:host .novo-field-input .novo-field-prefix{align-items:center;display:flex}:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element,:host .novo-field-input .novo-field-infix select{width:100%}:host .novo-field-input .novo-field-suffix{align-items:center;display:flex}:host .novo-field-messages{-ms-grid-column:3;-ms-grid-row:3;display:grid;grid-area:messages}:host .novo-field-hint-wrapper{display:flex}", ":host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input{border-bottom:1px solid #afb9c0!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{border-bottom:1px solid #3d464d!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-focused .novo-field-input{border-bottom:1px solid #4a89dc!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-invalid .novo-field-input{border-bottom:1px solid #da4453!important}", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input,:host.novo-field-appearance-fill.novo-field-layout-vertical{background:var(--background-main)}:host.novo-field-appearance-fill.novo-field-layout-vertical .novo-field-label{padding-left:.5em;padding-right:.5em;padding-top:.5em}:host.novo-field-appearance-fill.novo-field-layout-vertical .novo-field-input{padding:0 .5em}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input{border-bottom:1px solid #afb9c0!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{border-bottom:1px solid #3d464d!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-focused .novo-field-label{color:#4a89dc!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-focused .novo-field-input{border-bottom:1px solid #4a89dc!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-invalid .novo-field-input{border-bottom:1px solid #da4453!important}", ":host.novo-field-appearance-outline{border:1px solid #afb9c0!important;border-radius:.4rem;padding:.5rem}:host.novo-field-appearance-outline.novo-field-layout-vertical .novo-field-label{background:#fff;margin-left:.5rem;margin-top:-1.5rem;padding:.5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}:host.novo-field-appearance-outline:not(.novo-focused):hover{border:1px solid #3d464d!important}:host.novo-field-appearance-outline.novo-focused{border:1px solid #4a89dc!important}:host.novo-field-appearance-outline.novo-field-invalid{border:1px solid #da4453!important}", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;min-height:4.2rem;padding:.5rem 1.2rem}:host.novo-field-appearance-list.novo-field-layout-horizontal .novo-field-label{align-items:start;margin-top:.9rem}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-no-label{gap:0;grid-template-columns:0 minmax(300px,600px)}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:rgba(74,137,220,.15)}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined.novo-focused .novo-field-label{color:#4a89dc!important}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined.novo-field-invalid .novo-field-label{color:#da4453!important}"]
+                    styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0 1rem;grid-template-areas:\"label input\" \". messages\";grid-template-columns:150px minmax(-webkit-min-content,-webkit-max-content);grid-template-columns:150px minmax(min-content,max-content)}:host.novo-field-layout-vertical{grid-template-areas:\"label\" \"input\" \"messages\";grid-template-columns:minmax(-webkit-min-content,100%);grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(-webkit-min-content,-webkit-max-content));grid-template-rows:repeat(3,minmax(min-content,max-content));width:-webkit-max-content;width:-moz-max-content;width:max-content}:host .novo-field-label{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:grid;grid-area:label}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host .novo-field-input{-ms-grid-column:3;-ms-grid-row:1;display:grid;flex:1 1 100%;grid-area:input;grid-template-columns:minmax(auto,-webkit-max-content) 1fr minmax(auto,-webkit-max-content);grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content)}:host .novo-field-input::ng-deep .novo-input-element{background-color:transparent;background-image:none;border:none;border-bottom:none!important;box-shadow:none;color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;padding:.4rem .2rem;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray,:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright,:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info,:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger,:host .novo-field-input::ng-deep .novo-input-element.text-color-error,:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge,:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser,:host .novo-field-input::ng-deep .novo-input-element.text-color-credential,:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList,:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode,:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement,:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode,:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge,:host .novo-field-input::ng-deep .novo-input-element.text-color-person,:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-infix,:host .novo-field-input .novo-field-prefix{align-items:center;display:flex}:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element,:host .novo-field-input .novo-field-infix select{width:100%}:host .novo-field-input .novo-field-suffix{align-items:center;display:flex}:host .novo-field-messages{-ms-grid-column:3;-ms-grid-row:3;display:grid;grid-area:messages}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}", ":host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input{border-bottom:1px solid #afb9c0!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{border-bottom:1px solid #3d464d!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-focused .novo-field-input{border-bottom:1px solid #4a89dc!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-invalid .novo-field-input{border-bottom:1px solid #da4453!important}", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input,:host.novo-field-appearance-fill.novo-field-layout-vertical{background:var(--background-main)}:host.novo-field-appearance-fill.novo-field-layout-vertical .novo-field-label{padding-left:.5em;padding-right:.5em;padding-top:.5em}:host.novo-field-appearance-fill.novo-field-layout-vertical .novo-field-input{padding:0 .5em}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input{border-bottom:1px solid #afb9c0!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{border-bottom:1px solid #3d464d!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-focused .novo-field-label{color:#4a89dc!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-focused .novo-field-input{border-bottom:1px solid #4a89dc!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-invalid .novo-field-input{border-bottom:1px solid #da4453!important}", ":host.novo-field-appearance-outline{border:1px solid #afb9c0!important;border-radius:.4rem;padding:.5rem}:host.novo-field-appearance-outline.novo-field-layout-vertical .novo-field-label{background:#fff;margin-left:.5rem;margin-top:-1.5rem;padding:.5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}:host.novo-field-appearance-outline:not(.novo-focused):hover{border:1px solid #3d464d!important}:host.novo-field-appearance-outline.novo-focused{border:1px solid #4a89dc!important}:host.novo-field-appearance-outline.novo-field-invalid{border:1px solid #da4453!important}", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;min-height:4.2rem;padding:.5rem 1.2rem}:host.novo-field-appearance-list.novo-field-layout-horizontal .novo-field-label{align-items:start;margin-top:.9rem}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-no-label{gap:0;grid-template-columns:0 minmax(300px,600px)}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:rgba(74,137,220,.15)}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined.novo-focused .novo-field-label{color:#4a89dc!important}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined.novo-field-invalid .novo-field-label{color:#da4453!important}"]
                 },] }
     ];
     NovoFieldElement.ctorParameters = function () { return [
@@ -31347,6 +31411,8 @@
             return null;
         };
         NovoDateFormatDirective.prototype.formatValue = function (value) {
+            if (value == null)
+                return '';
             // Use `parse` because it keeps dates in locale
             var date = dateFns.parse(value);
             if (dateFns.isValid(date)) {
@@ -31419,13 +31485,23 @@
             _this.valueChange = new i0.EventEmitter();
             _this.military = false;
             _this.timeFormat = exports.TIME_FORMATS.DATE;
-            var pattern = _this.military ? 'HH:mm' : 'hh:mm A';
-            var amFormat = _this.labels.timeFormatAM.toUpperCase();
-            var pmFormat = _this.labels.timeFormatPM.toUpperCase();
-            _this.unmask = 'typed';
-            _this.imask = {
+            _this.initFormatOptions();
+            return _this;
+        }
+        NovoTimeFormatDirective.prototype.ngOnChanges = function (changes) {
+            if (Object.keys(changes).some(function (key) { return ['military', 'timeFormat'].includes(key); })) {
+                this.initFormatOptions();
+            }
+        };
+        NovoTimeFormatDirective.prototype.initFormatOptions = function () {
+            var _this = this;
+            // const pattern = this.military ? 'HH:mm' : 'hh:mm A';
+            var amFormat = this.labels.timeFormatAM.toUpperCase();
+            var pmFormat = this.labels.timeFormatPM.toUpperCase();
+            this.unmask = 'typed';
+            this.imask = {
                 mask: Date,
-                pattern: _this.military ? 'HH:mm' : 'hh:mm aa',
+                pattern: this.military ? 'HH:mm' : 'hh:mm aa',
                 overwrite: true,
                 autofix: true,
                 lazy: false,
@@ -31466,11 +31542,11 @@
                     },
                 },
             };
-            return _this;
-        }
+        };
         NovoTimeFormatDirective.prototype._checkInput = function (event) {
             if (document.activeElement === event.target) {
                 var text = event.target.value;
+                var hour = text.slice(0, 2);
                 if ((this.military && Number(text[0]) > 2) || (!this.military && Number(text[0]) > 1)) {
                     event.preventDefault();
                     var value = "0" + text;
@@ -31483,14 +31559,21 @@
                     if (timePeriod) {
                         event.target.value = text.slice(0, 5) + " " + timePeriod;
                     }
+                    if (event.target.selectionStart >= 3 && this.hourOneFormatRequired(hour)) {
+                        event.target.value = "01:" + event.target.value.slice(3, event.target.value.length);
+                    }
                 }
             }
         };
         NovoTimeFormatDirective.prototype._handleBlur = function (event) {
             var text = event.target.value;
+            var hour = text.slice(0, 2);
             if (!this.military) {
                 var input_2 = text.substr(5, 4).replace(/\-/g, '').trim().slice(0, 2);
                 var timePeriod = this.imask.blocks.aa.enum.find(function (it) { return it[0] === input_2[0]; });
+                if (this.hourOneFormatRequired(hour)) {
+                    event.target.value = "01:" + text.slice(3, text.length);
+                }
                 if (!timePeriod) {
                     event.target.value = text.slice(0, 5) + " --";
                 }
@@ -31498,9 +31581,21 @@
         };
         NovoTimeFormatDirective.prototype._handleKeydown = function (event) {
             var input = event.target;
+            var hour = input.value.slice(0, 2);
             if (event.key === "Backspace" /* Backspace */ && input.selectionStart === input.value.length) {
                 event.target.value = input.value.slice(0, 5) + " --";
             }
+            else if (event.key === "Tab" /* Tab */ && input.selectionStart <= 2 && this.hourOneFormatRequired(hour)) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                input.value = "01:" + input.value.slice(3, input.value.length);
+                input.setSelectionRange(3, 3);
+            }
+            else if (event.key === "ArrowRight" /* ArrowRight */ && input.selectionStart >= 2 && this.hourOneFormatRequired(hour)) {
+                input.value = "01:" + input.value.slice(3, input.value.length);
+                input.setSelectionRange(2, 2);
+            }
         };
         NovoTimeFormatDirective.prototype.normalize = function (value) {
             if (this.military) {
@@ -31563,6 +31658,9 @@
                 fn(formatted);
             };
         };
+        NovoTimeFormatDirective.prototype.hourOneFormatRequired = function (hourInput) {
+            return hourInput === '-1' || hourInput === '1-';
+        };
         return NovoTimeFormatDirective;
     }(angularImask.IMaskDirective));
     NovoTimeFormatDirective.decorators = [
@@ -33330,7 +33428,8 @@
         };
         /** Emits change event to set the model value. */
         NovoChipsElement.prototype._propagateChanges = function (fallbackValue) {
-            this.changed.emit({ value: this.value.length ? this.value : '', rawValue: this.items });
+            var _a;
+            this.changed.emit({ value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value : '', rawValue: this.items });
             this.onModelChange(this.value);
         };
         /**
@@ -34612,6 +34711,7 @@
             this.sortFilterSource = new rxjs.Subject();
             this.resetSource = new rxjs.Subject();
             this.expandSource = new rxjs.Subject();
+            this.allMatchingSelectedSource = new rxjs.Subject();
             this.dataLoaded = new rxjs.Subject();
             this.sort = undefined;
             this.filter = undefined;
@@ -34700,6 +34800,7 @@
         };
         DataTableState.prototype.clearSelected = function (fireUpdate) {
             if (fireUpdate === void 0) { fireUpdate = true; }
+            this.allMatchingSelectedSource.next(false);
             this.globalSearch = undefined;
             this.page = 0;
             this.reset(fireUpdate, true);
@@ -34748,9 +34849,10 @@
                 }
             }
         };
-        DataTableState.prototype.checkRetainment = function (caller) {
+        DataTableState.prototype.checkRetainment = function (caller, allMatchingSelected) {
+            if (allMatchingSelected === void 0) { allMatchingSelected = false; }
             var _a;
-            this.retainSelected = ((_a = this.selectionOptions) === null || _a === void 0 ? void 0 : _a.some(function (option) { return option.label === caller; })) || this.retainSelected;
+            this.retainSelected = ((_a = this.selectionOptions) === null || _a === void 0 ? void 0 : _a.some(function (option) { return option.label === caller; })) || this.retainSelected || allMatchingSelected;
         };
         return DataTableState;
     }());
@@ -34834,7 +34936,7 @@
                     template: "<novo-icon\n  class=\"novo-sort-asc-icon\"\n  [class.sort-active]=\"isActive\"\n  [@sortAsc]=\"value\"\n  (click)=\"changeSort(SortDirection.DESC)\">arrow-up</novo-icon>\n<novo-icon\n  class=\"novo-sort-desc-icon\"\n  [class.sort-active]=\"isActive\"\n  [@sortDesc]=\"value\"\n  (click)=\"changeSort(SortDirection.NONE)\">arrow-down</novo-icon>\n<novo-icon\n  class=\"novo-sortable-icon\"\n  [class.sort-active]=\"isActive\"\n  [@sortNone]=\"value\"\n  (click)=\"changeSort(SortDirection.ASC)\">sortable</novo-icon>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [sortAscAnim, sortDescAnim, sortNoneAnim],
-                    styles: [":host{cursor:pointer;display:inline-flex;height:1.6rem;position:relative;width:1.6rem}:host novo-icon{color:#dbdbdb;opacity:0;position:absolute}:host novo-icon:hover{color:var(--selection)}:host .novo-sort-asc-icon{color:var(--selection);top:10px}:host .novo-sort-desc-icon{color:var(--selection);top:-10px}"]
+                    styles: [":host{cursor:pointer;display:inline-flex;height:1.6rem;position:relative;width:1.6rem}:host novo-icon{color:var(--text-muted);opacity:0;position:absolute}:host novo-icon:hover{color:var(--selection)}:host .novo-sort-asc-icon{color:var(--selection);top:10px}:host .novo-sort-desc-icon{color:var(--selection);top:-10px}"]
                 },] }
     ];
     NovoDataTableSortButton.ctorParameters = function () { return [
@@ -34977,7 +35079,6 @@
             this.checkSortFilterState({ filter: this.state.filter, sort: this.state.sort }, true);
             this.multiSelect = this.config.filterConfig && this.config.filterConfig.type ? this.config.filterConfig.type === 'multi-select' : false;
             if (this.multiSelect) {
-                console.log('is multiselect');
                 this.multiSelectedOptions = this.filter ? __spread(this.filter) : [];
             }
         };
@@ -35128,6 +35229,12 @@
                 }
             }
         };
+        NovoDataTableCellHeader.prototype.handleEscapeKeydown = function (event) {
+            if (!this.multiSelect) {
+                this.error = false;
+                this.dropdown.closePanel();
+            }
+        };
         NovoDataTableCellHeader.prototype.clearOptionFilter = function () {
             this.error = false;
             if (this.optionFilter.length > 0) {
@@ -35175,7 +35282,6 @@
                 setTimeout(function () { return _this.filterInput.nativeElement.focus(); }, 0);
             }
             if (this.multiSelect && this.dropdown) {
-                console.log('focussing');
                 this.dropdown._handleKeydown = function (event) {
                     _this.multiSelectOptionFilterHandleKeydown(event);
                 };
@@ -35247,7 +35353,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        <ng-container [ngSwitch]=\"config.filterConfig.type\">\n          <novo-optgroup *ngSwitchCase=\"'date'\">\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 (onSelect)=\"filterData($event)\" [(ngModel)]=\"filter\" range=\"true\"></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\">\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>\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                />\n                <novo-icon novoSuffix>search</novo-icon>\n              </novo-field>\n            </novo-option>\n          </novo-optgroup>\n        </ng-container>\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\" 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  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -35270,7 +35376,8 @@
         filterTemplate: [{ type: i0.Input }],
         resizable: [{ type: i0.HostBinding, args: ['class.resizable',] }],
         column: [{ type: i0.Input, args: ['novo-data-table-cell-config',] }],
-        multiSelectOptionFilterHandleKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
+        multiSelectOptionFilterHandleKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }],
+        handleEscapeKeydown: [{ type: i0.HostListener, args: ['keydown.escape', ['$event'],] }]
     };
 
     var DataTableSource = /** @class */ (function (_super) {
@@ -35414,6 +35521,7 @@
             this.fixedHeader = false;
             this.maxSelected = undefined;
             this.canSelectAll = false;
+            this.allMatchingSelected = false;
             this._hideGlobalSearch = true;
             this.preferencesChanged = new i0.EventEmitter();
             this.allSelected = new i0.EventEmitter();
@@ -35449,6 +35557,9 @@
                     _this.ref.detectChanges();
                 }, 300);
             });
+            this.allMatchingSelectedSubscription = this.state.allMatchingSelectedSource.subscribe(function (event) {
+                _this.allMatchingSelected = event;
+            });
         }
         Object.defineProperty(NovoDataTable.prototype, "displayedColumns", {
             get: function () {
@@ -35635,6 +35746,9 @@
             if (this.sortFilterSubscription) {
                 this.sortFilterSubscription.unsubscribe();
             }
+            if (this.allMatchingSelectedSubscription) {
+                this.allMatchingSelectedSubscription.unsubscribe();
+            }
         };
         NovoDataTable.prototype.ngAfterContentInit = function () {
             var _this = this;
@@ -35733,14 +35847,24 @@
             }
             return this.state.selectedRows.has("" + row[this.rowIdentifier]);
         };
-        NovoDataTable.prototype.selectRow = function (row) {
+        NovoDataTable.prototype.selectRow = function (row, origin) {
             var selected = this.isSelected(row);
             if (selected) {
                 this.state.selectedRows.delete("" + row[this.rowIdentifier]);
             }
             else {
-                this.state.selectedRows.set("" + row[this.rowIdentifier], row);
+                if (this.canSelectAll && this.allMatchingSelected && ['onClick'].includes(origin)) {
+                    // When all matching records are selected the user could be on another page where all rows only appear selected
+                    // Need to reset the rows that are actually selected, select rows on the current page and deselect the chosen record
+                    this.state.selectedRows.clear();
+                    this.selectRows(true);
+                    this.state.selectedRows.delete("" + row[this.rowIdentifier]);
+                }
+                else {
+                    this.state.selectedRows.set("" + row[this.rowIdentifier], row);
+                }
             }
+            this.state.allMatchingSelectedSource.next(false);
             this.state.onSelectionChange();
         };
         NovoDataTable.prototype.selectRows = function (selected) {
@@ -35757,6 +35881,9 @@
         };
         NovoDataTable.prototype.allCurrentRowsSelected = function () {
             var _a, _b;
+            if (this.allMatchingSelected) {
+                return true;
+            }
             if (!((_b = (_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
                 return false;
             }
@@ -35880,7 +36007,7 @@
                             animations.transition('void <=> *', animations.animate('70ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
                     ],
-                    template: "\n    <header\n      *ngIf=\"(!(dataSource?.totallyEmpty && !state.userFiltered) && !loading) || forceShowHeader\"\n      [class.empty]=\"hideGlobalSearch && !paginationOptions && !templates['customActions']\"\n    >\n      <ng-container *ngTemplateOutlet=\"templates['customHeader']\"></ng-container>\n      <novo-search\n        alwaysOpen=\"true\"\n        (searchChanged)=\"onSearchChange($event)\"\n        [(ngModel)]=\"state.globalSearch\"\n        *ngIf=\"!hideGlobalSearch\"\n        [placeholder]=\"searchOptions?.placeholder\"\n        [hint]=\"searchOptions?.tooltip\"\n      >\n      </novo-search>\n      <novo-data-table-pagination\n        *ngIf=\"paginationOptions\"\n        [theme]=\"paginationOptions.theme\"\n        [length]=\"dataSource?.currentTotal\"\n        [page]=\"paginationOptions.page\"\n        [pageSize]=\"paginationOptions.pageSize\"\n        [pageSizeOptions]=\"paginationOptions.pageSizeOptions\"\n        [dataFeatureId]=\"paginatorDataFeatureId\"\n      >\n      </novo-data-table-pagination>\n      <div class=\"novo-data-table-actions\" *ngIf=\"templates['customActions']\">\n        <ng-container *ngTemplateOutlet=\"templates['customActions']\"></ng-container>\n      </div>\n    </header>\n    <div class=\"novo-data-table-loading-mask\" *ngIf=\"dataSource?.loading || loading\" data-automation-id=\"novo-data-table-loading\">\n      <novo-loading></novo-loading>\n    </div>\n    <div class=\"novo-data-table-outside-container\" [ngClass]=\"{ 'novo-data-table-outside-container-fixed': fixedHeader }\">\n      <div class=\"novo-data-table-custom-filter\" *ngIf=\"customFilter\">\n        <ng-container *ngTemplateOutlet=\"templates['customFilter']\"></ng-container>\n      </div>\n      <div\n        #novoDataTableContainer\n        class=\"novo-data-table-container\"\n        [ngClass]=\"{ 'novo-data-table-container-fixed': fixedHeader }\"\n        [class.empty-user-filtered]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n        [class.empty]=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <cdk-table\n          *ngIf=\"columns?.length > 0 && columnsLoaded && dataSource\"\n          [dataSource]=\"dataSource\"\n          [trackBy]=\"trackByFn\"\n          novoDataTableSortFilter\n          [class.expandable]=\"expandable\"\n          [class.empty]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n          [hidden]=\"dataSource?.totallyEmpty && !state.userFiltered\"\n        >\n          <ng-container cdkColumnDef=\"selection\">\n            <novo-data-table-checkbox-header-cell\n              *cdkHeaderCellDef\n              [maxSelected]=\"maxSelected\"\n              [canSelectAll]=\"canSelectAll\"\n            ></novo-data-table-checkbox-header-cell>\n            <novo-data-table-checkbox-cell\n              *cdkCellDef=\"let row; let i = index\"\n              [row]=\"row\"\n              [maxSelected]=\"maxSelected\"\n            ></novo-data-table-checkbox-cell>\n          </ng-container>\n          <ng-container cdkColumnDef=\"expand\">\n            <novo-data-table-expand-header-cell *cdkHeaderCellDef></novo-data-table-expand-header-cell>\n            <novo-data-table-expand-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></novo-data-table-expand-cell>\n          </ng-container>\n          <ng-container *ngFor=\"let column of columns; trackBy: trackColumnsBy\" [cdkColumnDef]=\"column.id\">\n            <novo-data-table-header-cell\n              *cdkHeaderCellDef\n              [column]=\"column\"\n              [filterTemplate]=\"templates['column-filter-' + column.id]\"\n              [novo-data-table-cell-config]=\"column\"\n              [resized]=\"resized\"\n              [defaultSort]=\"defaultSort\"\n              [allowMultipleFilters]=\"allowMultipleFilters\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-header-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-header-cell]=\"column?.type === 'action' && column?.action?.options\"\n              [class.fixed-header]=\"fixedHeader\"\n            ></novo-data-table-header-cell>\n            <novo-data-table-cell\n              *cdkCellDef=\"let row\"\n              [resized]=\"resized\"\n              [column]=\"column\"\n              [row]=\"row\"\n              [template]=\"columnToTemplate[column.id]\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-cell]=\"column?.type === 'action' && column?.action?.options\"\n            ></novo-data-table-cell>\n          </ng-container>\n          <novo-data-table-header-row\n            *cdkHeaderRowDef=\"displayedColumns\"\n            [fixedHeader]=\"fixedHeader\"\n            data-automation-id=\"novo-data-table-header-row\"\n          ></novo-data-table-header-row>\n          <novo-data-table-row\n            *cdkRowDef=\"let row; columns: displayedColumns\"\n            [ngClass]=\"{ active: row[rowIdentifier] == activeRowIdentifier }\"\n            [novoDataTableExpand]=\"detailRowTemplate\"\n            [row]=\"row\"\n            [id]=\"name + '-' + row[rowIdentifier]\"\n            [dataAutomationId]=\"row[rowIdentifier]\"\n          ></novo-data-table-row>\n        </cdk-table>\n        <div class=\"novo-data-table-footer\" *ngIf=\"templates['footer']\">\n          <ng-container *ngTemplateOutlet=\"templates['footer']; context: { $implicit: columns, data: dataSource.data }\"></ng-container>\n        </div>\n        <div\n          class=\"novo-data-table-no-results-container\"\n          [style.left.px]=\"scrollLeft\"\n          *ngIf=\"dataSource?.currentlyEmpty && state.userFiltered && !dataSource?.loading && !loading && !dataSource.pristine\"\n        >\n          <div class=\"novo-data-table-empty-message\">\n            <ng-container *ngTemplateOutlet=\"templates['noResultsMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"novo-data-table-empty-container\"\n        *ngIf=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <div class=\"novo-data-table-empty-message\">\n          <ng-container *ngTemplateOutlet=\"templates['emptyMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <!-- DEFAULT CELL TEMPLATE -->\n    <ng-template novoTemplate=\"textCellTemplate\" let-row let-col=\"col\">\n      <span [style.width.px]=\"col?.width\" [style.min-width.px]=\"col?.width\" [style.max-width.px]=\"col?.width\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"dateCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"datetimeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"timeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"currencyCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableCurrencyRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"bigdecimalCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableBigDecimalRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"numberCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"percentCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col:true }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"linkCellTemplate\" let-row let-col=\"col\">\n      <a\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n        [style.width.px]=\"col?.width\"\n        [style.min-width.px]=\"col?.width\"\n        [style.max-width.px]=\"col?.width\"\n        >{{ row[col.id] | dataTableInterpolate: col }}</a\n      >\n    </ng-template>\n    <ng-template novoTemplate=\"telCellTemplate\" let-row let-col=\"col\">\n      <a href=\"tel:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"mailtoCellTemplate\" let-row let-col=\"col\">\n      <a href=\"mailto:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"buttonCellTemplate\" let-row let-col=\"col\">\n      <novo-button\n        size=\"small\"\n        theme=\"icon\"\n        [tooltip]=\"col?.action?.tooltip\"\n        tooltipPosition=\"right\"\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        [disabled]=\"isDisabled(col, row)\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n      >\n        <novo-icon>{{ col?.action?.icon }}</novo-icon>\n      </novo-button>\n    </ng-template>\n    <ng-template novoTemplate=\"dropdownCellTemplate\" let-row let-col=\"col\">\n      <novo-dropdown parentScrollSelector=\".novo-data-table-container\" containerClass=\"novo-data-table-dropdown\">\n        <novo-button type=\"button\" theme=\"dialogue\" [icon]=\"col.action.icon\" inverse>{{ col.label }}</novo-button>\n        <novo-optgroup>\n          <novo-option\n            *ngFor=\"let option of col?.action?.options\"\n            (click)=\"option.handlers.click({ originalEvent: $event?.originalEvent, row: row })\"\n            [disabled]=\"isDisabled(option, row)\"\n          >\n            <span [attr.data-automation-id]=\"option.label\">{{ option.label }}</span>\n          </novo-option>\n        </novo-optgroup>\n      </novo-dropdown>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultNoResultsMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultEmptyMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"expandedRow\"> You did not provide an \"expandedRow\" template! </ng-template>\n    <ng-template #detailRowTemplate let-row>\n      <div class=\"novo-data-table-detail-row\" [@expand] style=\"overflow: hidden\">\n        <ng-container *ngTemplateOutlet=\"templates['expandedRow']; context: { $implicit: row }\"></ng-container>\n      </div>\n    </ng-template>\n    <!-- CUSTOM CELLS PASSED IN -->\n    <ng-content></ng-content>\n  ",
+                    template: "\n    <header\n      *ngIf=\"(!(dataSource?.totallyEmpty && !state.userFiltered) && !loading) || forceShowHeader\"\n      [class.empty]=\"hideGlobalSearch && !paginationOptions && !templates['customActions']\"\n    >\n      <ng-container *ngTemplateOutlet=\"templates['customHeader']\"></ng-container>\n      <novo-search\n        alwaysOpen=\"true\"\n        (searchChanged)=\"onSearchChange($event)\"\n        [(ngModel)]=\"state.globalSearch\"\n        *ngIf=\"!hideGlobalSearch\"\n        [placeholder]=\"searchOptions?.placeholder\"\n        [hint]=\"searchOptions?.tooltip\"\n      >\n      </novo-search>\n      <novo-data-table-pagination\n        *ngIf=\"paginationOptions\"\n        [theme]=\"paginationOptions.theme\"\n        [length]=\"dataSource?.currentTotal\"\n        [page]=\"paginationOptions.page\"\n        [pageSize]=\"paginationOptions.pageSize\"\n        [pageSizeOptions]=\"paginationOptions.pageSizeOptions\"\n        [dataFeatureId]=\"paginatorDataFeatureId\"\n        [canSelectAll]=\"canSelectAll\"\n        [allMatchingSelected]=\"allMatchingSelected\"\n      >\n      </novo-data-table-pagination>\n      <div class=\"novo-data-table-actions\" *ngIf=\"templates['customActions']\">\n        <ng-container *ngTemplateOutlet=\"templates['customActions']\"></ng-container>\n      </div>\n    </header>\n    <div class=\"novo-data-table-loading-mask\" *ngIf=\"dataSource?.loading || loading\" data-automation-id=\"novo-data-table-loading\">\n      <novo-loading></novo-loading>\n    </div>\n    <div class=\"novo-data-table-outside-container\" [ngClass]=\"{ 'novo-data-table-outside-container-fixed': fixedHeader }\">\n      <div class=\"novo-data-table-custom-filter\" *ngIf=\"customFilter\">\n        <ng-container *ngTemplateOutlet=\"templates['customFilter']\"></ng-container>\n      </div>\n      <div\n        #novoDataTableContainer\n        class=\"novo-data-table-container\"\n        [ngClass]=\"{ 'novo-data-table-container-fixed': fixedHeader }\"\n        [class.empty-user-filtered]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n        [class.empty]=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <cdk-table\n          *ngIf=\"columns?.length > 0 && columnsLoaded && dataSource\"\n          [dataSource]=\"dataSource\"\n          [trackBy]=\"trackByFn\"\n          novoDataTableSortFilter\n          [class.expandable]=\"expandable\"\n          [class.empty]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n          [hidden]=\"dataSource?.totallyEmpty && !state.userFiltered\"\n        >\n          <ng-container cdkColumnDef=\"selection\">\n            <novo-data-table-checkbox-header-cell *cdkHeaderCellDef [maxSelected]=\"maxSelected\"></novo-data-table-checkbox-header-cell>\n            <novo-data-table-checkbox-cell\n              *cdkCellDef=\"let row; let i = index\"\n              [row]=\"row\"\n              [maxSelected]=\"maxSelected\"\n            ></novo-data-table-checkbox-cell>\n          </ng-container>\n          <ng-container cdkColumnDef=\"expand\">\n            <novo-data-table-expand-header-cell *cdkHeaderCellDef></novo-data-table-expand-header-cell>\n            <novo-data-table-expand-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></novo-data-table-expand-cell>\n          </ng-container>\n          <ng-container *ngFor=\"let column of columns; trackBy: trackColumnsBy\" [cdkColumnDef]=\"column.id\">\n            <novo-data-table-header-cell\n              *cdkHeaderCellDef\n              [column]=\"column\"\n              [filterTemplate]=\"templates['column-filter-' + column.id]\"\n              [novo-data-table-cell-config]=\"column\"\n              [resized]=\"resized\"\n              [defaultSort]=\"defaultSort\"\n              [allowMultipleFilters]=\"allowMultipleFilters\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-header-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-header-cell]=\"column?.type === 'action' && column?.action?.options\"\n              [class.fixed-header]=\"fixedHeader\"\n            ></novo-data-table-header-cell>\n            <novo-data-table-cell\n              *cdkCellDef=\"let row\"\n              [resized]=\"resized\"\n              [column]=\"column\"\n              [row]=\"row\"\n              [template]=\"columnToTemplate[column.id]\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-cell]=\"column?.type === 'action' && column?.action?.options\"\n            ></novo-data-table-cell>\n          </ng-container>\n          <novo-data-table-header-row\n            *cdkHeaderRowDef=\"displayedColumns\"\n            [fixedHeader]=\"fixedHeader\"\n            data-automation-id=\"novo-data-table-header-row\"\n          ></novo-data-table-header-row>\n          <novo-data-table-row\n            *cdkRowDef=\"let row; columns: displayedColumns\"\n            [ngClass]=\"{ active: row[rowIdentifier] == activeRowIdentifier }\"\n            [novoDataTableExpand]=\"detailRowTemplate\"\n            [row]=\"row\"\n            [id]=\"name + '-' + row[rowIdentifier]\"\n            [dataAutomationId]=\"row[rowIdentifier]\"\n          ></novo-data-table-row>\n        </cdk-table>\n        <div class=\"novo-data-table-footer\" *ngIf=\"templates['footer']\">\n          <ng-container *ngTemplateOutlet=\"templates['footer']; context: { $implicit: columns, data: dataSource.data }\"></ng-container>\n        </div>\n        <div\n          class=\"novo-data-table-no-results-container\"\n          [style.left.px]=\"scrollLeft\"\n          *ngIf=\"dataSource?.currentlyEmpty && state.userFiltered && !dataSource?.loading && !loading && !dataSource.pristine\"\n        >\n          <div class=\"novo-data-table-empty-message\">\n            <ng-container *ngTemplateOutlet=\"templates['noResultsMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"novo-data-table-empty-container\"\n        *ngIf=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <div class=\"novo-data-table-empty-message\">\n          <ng-container *ngTemplateOutlet=\"templates['emptyMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <!-- DEFAULT CELL TEMPLATE -->\n    <ng-template novoTemplate=\"textCellTemplate\" let-row let-col=\"col\">\n      <span [style.width.px]=\"col?.width\" [style.min-width.px]=\"col?.width\" [style.max-width.px]=\"col?.width\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"dateCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"datetimeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"timeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"currencyCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableCurrencyRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"bigdecimalCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableBigDecimalRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"numberCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"percentCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col:true }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"linkCellTemplate\" let-row let-col=\"col\">\n      <a\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n        [style.width.px]=\"col?.width\"\n        [style.min-width.px]=\"col?.width\"\n        [style.max-width.px]=\"col?.width\"\n        >{{ row[col.id] | dataTableInterpolate: col }}</a\n      >\n    </ng-template>\n    <ng-template novoTemplate=\"telCellTemplate\" let-row let-col=\"col\">\n      <a href=\"tel:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"mailtoCellTemplate\" let-row let-col=\"col\">\n      <a href=\"mailto:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"buttonCellTemplate\" let-row let-col=\"col\">\n      <novo-button\n        size=\"small\"\n        theme=\"icon\"\n        [tooltip]=\"col?.action?.tooltip\"\n        tooltipPosition=\"right\"\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        [disabled]=\"isDisabled(col, row)\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n      >\n        <novo-icon>{{ col?.action?.icon }}</novo-icon>\n      </novo-button>\n    </ng-template>\n    <ng-template novoTemplate=\"dropdownCellTemplate\" let-row let-col=\"col\">\n      <novo-dropdown parentScrollSelector=\".novo-data-table-container\" containerClass=\"novo-data-table-dropdown\">\n        <novo-button type=\"button\" theme=\"dialogue\" [icon]=\"col.action.icon\" inverse>{{ col.label }}</novo-button>\n        <novo-optgroup>\n          <novo-option\n            *ngFor=\"let option of col?.action?.options\"\n            (click)=\"option.handlers.click({ originalEvent: $event?.originalEvent, row: row })\"\n            [disabled]=\"isDisabled(option, row)\"\n          >\n            <span [attr.data-automation-id]=\"option.label\">{{ option.label }}</span>\n          </novo-option>\n        </novo-optgroup>\n      </novo-dropdown>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultNoResultsMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultEmptyMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"expandedRow\"> You did not provide an \"expandedRow\" template! </ng-template>\n    <ng-template #detailRowTemplate let-row>\n      <div class=\"novo-data-table-detail-row\" [@expand] style=\"overflow: hidden\">\n        <ng-container *ngTemplateOutlet=\"templates['expandedRow']; context: { $implicit: row }\"></ng-container>\n      </div>\n    </ng-template>\n    <!-- CUSTOM CELLS PASSED IN -->\n    <ng-content></ng-content>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [DataTableState]
                 },] }
@@ -35912,6 +36039,7 @@
         paginatorDataFeatureId: [{ type: i0.Input }],
         maxSelected: [{ type: i0.Input }],
         canSelectAll: [{ type: i0.Input }],
+        allMatchingSelected: [{ type: i0.Input }],
         dataTableService: [{ type: i0.Input }],
         rows: [{ type: i0.Input }],
         outsideFilter: [{ type: i0.Input }],
@@ -35937,22 +36065,23 @@
             _this.toaster = toaster;
             _this.role = 'columnheader';
             _this.maxSelected = undefined;
-            _this.canSelectAll = false;
             _this.checked = false;
             renderer.setAttribute(elementRef.nativeElement, 'data-automation-id', "novo-checkbox-column-header-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, 'novo-data-table-checkbox-header-cell');
             _this.selectionSubscription = _this.dataTable.state.selectionSource.subscribe(function () {
-                _this.checked = _this.dataTable.allCurrentRowsSelected();
-                if (_this.canSelectAll) {
+                var _a, _b, _c;
+                _this.checked = _this.dataTable.allCurrentRowsSelected() || (((_a = _this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) && ((_b = _this.dataTable) === null || _b === void 0 ? void 0 : _b.allMatchingSelected));
+                if ((_c = _this.dataTable) === null || _c === void 0 ? void 0 : _c.canSelectAll) {
                     _this.selectAllChanged();
                 }
                 _this.ref.markForCheck();
             });
             _this.paginationSubscription = _this.dataTable.state.paginationSource.subscribe(function (event) {
+                var _a, _b, _c, _d;
                 if (event.isPageSizeChange) {
                     _this.checked = false;
-                    if (_this.canSelectAll) {
+                    if ((_a = _this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) {
                         _this.selectAllChanged();
                     }
                     _this.dataTable.selectRows(false);
@@ -35960,16 +36089,17 @@
                     _this.dataTable.state.reset(false, true);
                 }
                 else {
-                    _this.checked = _this.dataTable.allCurrentRowsSelected();
-                    if (_this.canSelectAll) {
+                    _this.checked = _this.dataTable.allCurrentRowsSelected() || (((_b = _this.dataTable) === null || _b === void 0 ? void 0 : _b.canSelectAll) && ((_c = _this.dataTable) === null || _c === void 0 ? void 0 : _c.allMatchingSelected));
+                    if ((_d = _this.dataTable) === null || _d === void 0 ? void 0 : _d.canSelectAll) {
                         _this.selectAllChanged();
                     }
                 }
                 _this.ref.markForCheck();
             });
             _this.resetSubscription = _this.dataTable.state.resetSource.subscribe(function () {
+                var _a;
                 _this.checked = false;
-                if (_this.canSelectAll) {
+                if ((_a = _this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) {
                     _this.selectAllChanged();
                 }
                 _this.ref.markForCheck();
@@ -35995,6 +36125,7 @@
             }
         };
         NovoDataTableCheckboxHeaderCell.prototype.onClick = function () {
+            var _a;
             if (this.isAtLimit) {
                 this.toaster.alert({
                     theme: 'danger',
@@ -36006,15 +36137,16 @@
             else {
                 this.dataTable.selectRows(!this.checked);
             }
-            if (this.canSelectAll) {
+            if ((_a = this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) {
                 this.selectAllChanged();
             }
         };
         NovoDataTableCheckboxHeaderCell.prototype.selectAllChanged = function () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             var allSelectedEvent = {
                 allSelected: this.checked,
                 selectedCount: (_c = (_b = (_a = this.dataTable) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.length,
+                allMatchingSelected: (_d = this.dataTable) === null || _d === void 0 ? void 0 : _d.allMatchingSelected,
             };
             this.dataTable.allSelected.emit(allSelectedEvent);
         };
@@ -36037,8 +36169,7 @@
     ]; };
     NovoDataTableCheckboxHeaderCell.propDecorators = {
         role: [{ type: i0.HostBinding, args: ['attr.role',] }],
-        maxSelected: [{ type: i0.Input }],
-        canSelectAll: [{ type: i0.Input }]
+        maxSelected: [{ type: i0.Input }]
     };
 
     var NovoDataTableExpandHeaderCell = /** @class */ (function (_super) {
@@ -36198,7 +36329,8 @@
             renderer.addClass(elementRef.nativeElement, "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, 'novo-data-table-checkbox-cell');
             _this.selectionSubscription = _this.dataTable.state.selectionSource.subscribe(function () {
-                _this.checked = _this.dataTable.isSelected(_this.row);
+                var _a, _b;
+                _this.checked = _this.dataTable.isSelected(_this.row) || (((_a = _this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) && ((_b = _this.dataTable) === null || _b === void 0 ? void 0 : _b.allMatchingSelected));
                 _this.ref.markForCheck();
             });
             _this.resetSubscription = _this.dataTable.state.resetSource.subscribe(function () {
@@ -36215,11 +36347,12 @@
             configurable: true
         });
         NovoDataTableCheckboxCell.prototype.ngOnInit = function () {
-            this.checked = this.dataTable.isSelected(this.row);
+            var _a, _b;
+            this.checked = this.dataTable.isSelected(this.row) || (((_a = this.dataTable) === null || _a === void 0 ? void 0 : _a.canSelectAll) && ((_b = this.dataTable) === null || _b === void 0 ? void 0 : _b.allMatchingSelected));
         };
         NovoDataTableCheckboxCell.prototype.onClick = function () {
             if (!this.isAtLimit) {
-                this.dataTable.selectRow(this.row);
+                this.dataTable.selectRow(this.row, 'onClick');
             }
         };
         NovoDataTableCheckboxCell.prototype.getTooltip = function () {
@@ -36612,6 +36745,7 @@
         NovoDatePickerElement.prototype.setToday = function () {
             var tmp = new Date();
             this.updateView(tmp);
+            this.updateSelection(Array.of(tmp));
         };
         NovoDatePickerElement.prototype.toggleRangeSelect = function (range) {
             this.rangeSelectMode = range;
@@ -36698,7 +36832,7 @@
                             animations.transition('startDate <=> endDate', animations.animate('200ms ease-in')),
                         ]),
                     ],
-                    template: "\n    <div class=\"date-picker-container\">\n      <div class=\"date-range-tabs\" *ngIf=\"range\" [class.week-select-mode]=\"weekRangeSelect\">\n        <span\n          class=\"range-tab\"\n          (click)=\"toggleRangeSelect('startDate')\"\n          [@startDateTextState]=\"rangeSelectMode\"\n          data-automation-id=\"calendar-start-date\"\n          >{{ startDateLabel }}</span\n        >\n        <span\n          class=\"range-tab\"\n          (click)=\"toggleRangeSelect('endDate')\"\n          [@endDateTextState]=\"rangeSelectMode\"\n          data-automation-id=\"calendar-end-date\"\n          >{{ endDateLabel }}</span\n        >\n        <i class=\"indicator\" [@indicatorState]=\"rangeSelectMode\"></i>\n      </div>\n\n      <novo-calendar\n        [activeDate]=\"activeDate\"\n        [(selected)]=\"selection\"\n        (selectedChange)=\"updateSelection($event)\"\n        [mode]=\"mode\"\n        [numberOfMonths]=\"numberOfMonths\"\n        [weekStartsOn]=\"weekStart\"\n      ></novo-calendar>\n\n      <div class=\"calendar-footer\" [hidden]=\"hideFooter\">\n        <novo-button (click)=\"setToday()\" class=\"today\" size=\"small\" data-automation-id=\"calendar-today\">{{ labels.today }}</novo-button>\n      </div>\n    </div>\n  "
+                    template: "\n    <div class=\"date-picker-container\">\n      <div class=\"date-range-tabs\" *ngIf=\"range\" [class.week-select-mode]=\"weekRangeSelect\">\n        <span\n          class=\"range-tab\"\n          (click)=\"toggleRangeSelect('startDate')\"\n          [@startDateTextState]=\"rangeSelectMode\"\n          data-automation-id=\"calendar-start-date\"\n          >{{ startDateLabel }}</span\n        >\n        <span\n          class=\"range-tab\"\n          (click)=\"toggleRangeSelect('endDate')\"\n          [@endDateTextState]=\"rangeSelectMode\"\n          data-automation-id=\"calendar-end-date\"\n          >{{ endDateLabel }}</span\n        >\n        <i class=\"indicator\" [@indicatorState]=\"rangeSelectMode\"></i>\n      </div>\n\n      <novo-calendar\n        [activeDate]=\"activeDate\"\n        [(selected)]=\"selection\"\n        (selectedChange)=\"updateSelection($event)\"\n        [mode]=\"mode\"\n        [numberOfMonths]=\"numberOfMonths\"\n        [weekStartsOn]=\"weekStart\"\n        [disabledDateMessage]=\"disabledDateMessage\"\n        [minDate]=\"start\"\n        [maxDate]=\"end\"\n      ></novo-calendar>\n\n      <div class=\"calendar-footer\" [hidden]=\"hideFooter\">\n        <novo-button (click)=\"setToday()\" class=\"today\" size=\"small\" data-automation-id=\"calendar-today\">{{ labels.today }}</novo-button>\n      </div>\n    </div>\n  "
                 },] }
     ];
     NovoDatePickerElement.ctorParameters = function () { return [
@@ -36978,14 +37112,22 @@
             this.blurEvent = new i0.EventEmitter();
             this.focusEvent = new i0.EventEmitter();
             this.changeEvent = new i0.EventEmitter();
-            this.placeholder = this.labels.dateFormatString().toUpperCase() || this.labels.dateFormatPlaceholder;
+            this.placeholder = this.labels.localizedDatePlaceholder();
         }
         NovoDatePickerInputElement.prototype.ngOnInit = function () {
+            this._initFormatOptions();
+        };
+        NovoDatePickerInputElement.prototype.ngOnChanges = function (changes) {
+            if (Object.keys(changes).some(function (key) { return ['format'].includes(key); })) {
+                this._initFormatOptions();
+            }
+        };
+        NovoDatePickerInputElement.prototype._initFormatOptions = function () {
             this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
             if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
                 this.maskOptions = this.maskOptions || {
                     mask: this.dateFormatService.getDateMask(),
-                    pipe: createAutoCorrectedDatePipe__default['default'](this.format || this.labels.dateFormatString().toLowerCase()),
+                    pipe: createAutoCorrectedDatePipe__default['default']((this.format || this.labels.dateFormatString()).toLowerCase()),
                     keepCharPositions: false,
                     guide: true,
                 };
@@ -37115,8 +37257,8 @@
             this.value = value;
         };
         NovoDatePickerInputElement.prototype._setFormValue = function (value) {
-            if (this.value) {
-                var test = this.formatDateValue(this.value);
+            if (value) {
+                var test = this.formatDateValue(value);
                 this.formattedValue = test;
             }
             else {
@@ -37223,6 +37365,7 @@
             this.formattedStartDate = '';
             this.formattedEndDate = '';
             this.weekRangeSelect = false;
+            this.mode = 'range';
             this.textMaskEnabled = true;
             this.allowInvalidDate = false;
             this.weekStart = 0;
@@ -37267,11 +37410,19 @@
             configurable: true
         });
         NovoDateRangeInputElement.prototype.ngOnInit = function () {
+            this._initFormatOptions();
+        };
+        NovoDateRangeInputElement.prototype.ngOnChanges = function (changes) {
+            if (Object.keys(changes).some(function (key) { return ['format'].includes(key); })) {
+                this._initFormatOptions();
+            }
+        };
+        NovoDateRangeInputElement.prototype._initFormatOptions = function () {
             this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
             if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
                 this.maskOptions = this.maskOptions || {
                     mask: this.dateFormatService.getDateMask(),
-                    pipe: createAutoCorrectedDatePipe__default['default'](this.format || this.labels.dateFormatString().toLowerCase()),
+                    pipe: createAutoCorrectedDatePipe__default['default']((this.format || this.labels.dateFormatString()).toLowerCase()),
                     keepCharPositions: false,
                     guide: true,
                 };
@@ -37436,7 +37587,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-date-range-input',
                     providers: [DATE_VALUE_ACCESSOR$1],
-                    template: "\n    <div class=\"date-range-input-container\">\n      <input\n        type=\"text\"\n        [name]=\"name\"\n        [(ngModel)]=\"formattedStartDate\"\n        [textMask]=\"maskOptions\"\n        [placeholder]=\"placeholder\"\n        (keydown)=\"_onStartInputChange($event)\"\n        (input)=\"_onStartInputChange($event)\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleBlur($event)\"\n        #startDate\n        data-automation-id=\"date-range-input-start\"\n        [disabled]=\"disabled\"\n      />\n      <novo-icon *ngIf=\"!hasStartValue\" (click)=\"openPanel()\">calendar</novo-icon>\n      <novo-icon *ngIf=\"hasStartValue\" (click)=\"clearStartValue()\">x</novo-icon>\n    </div>\n    <div class=\"date-range-input-divider\">-</div>\n    <div class=\"date-range-input-container\">\n      <input\n        type=\"text\"\n        [name]=\"name\"\n        [(ngModel)]=\"formattedEndDate\"\n        [textMask]=\"maskOptions\"\n        [placeholder]=\"placeholder\"\n        (keydown)=\"_onEndInputChange($event)\"\n        (input)=\"_onEndInputChange($event)\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleBlur($event)\"\n        #endDate\n        data-automation-id=\"date-range-input-end\"\n        [disabled]=\"disabled\"\n      />\n      <novo-icon *ngIf=\"!hasEndValue\" (click)=\"openPanel()\">calendar</novo-icon>\n      <novo-icon *ngIf=\"hasEndValue\" (click)=\"clearEndValue()\">x</novo-icon>\n    </div>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        [weekRangeSelect]=\"weekRangeSelect\"\n        range=\"true\"\n        inline=\"true\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [ngModel]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
+                    template: "\n    <div class=\"date-range-input-container\">\n      <input\n        type=\"text\"\n        [name]=\"name\"\n        [(ngModel)]=\"formattedStartDate\"\n        [textMask]=\"maskOptions\"\n        [placeholder]=\"placeholder\"\n        (keydown)=\"_onStartInputChange($event)\"\n        (input)=\"_onStartInputChange($event)\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleBlur($event)\"\n        #startDate\n        data-automation-id=\"date-range-input-start\"\n        [disabled]=\"disabled\"\n      />\n      <novo-icon *ngIf=\"!hasStartValue\" (click)=\"openPanel()\">calendar</novo-icon>\n      <novo-icon *ngIf=\"hasStartValue\" (click)=\"clearStartValue()\">x</novo-icon>\n    </div>\n    <div class=\"date-range-input-divider\">-</div>\n    <div class=\"date-range-input-container\">\n      <input\n        type=\"text\"\n        [name]=\"name\"\n        [(ngModel)]=\"formattedEndDate\"\n        [textMask]=\"maskOptions\"\n        [placeholder]=\"placeholder\"\n        (keydown)=\"_onEndInputChange($event)\"\n        (input)=\"_onEndInputChange($event)\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleBlur($event)\"\n        #endDate\n        data-automation-id=\"date-range-input-end\"\n        [disabled]=\"disabled\"\n      />\n      <novo-icon *ngIf=\"!hasEndValue\" (click)=\"openPanel()\">calendar</novo-icon>\n      <novo-icon *ngIf=\"hasEndValue\" (click)=\"clearEndValue()\">x</novo-icon>\n    </div>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        [mode]=\"mode\"\n        range=\"true\"\n        inline=\"true\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [ngModel]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoDateRangeInputElement.ctorParameters = function () { return [
@@ -37450,6 +37601,7 @@
         start: [{ type: i0.Input }],
         end: [{ type: i0.Input }],
         weekRangeSelect: [{ type: i0.Input }],
+        mode: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         maskOptions: [{ type: i0.Input }],
         format: [{ type: i0.Input }],
@@ -37630,7 +37782,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-multi-date-input',
                     providers: [MULTI_DATE_VALUE_ACCESSOR],
-                    template: "\n    <novo-chip *ngFor=\"let date of value | default: []\" (removed)=\"remove($event, date)\">\n      {{ date | date: format }}\n      <novo-icon novoChipRemove>close</novo-icon>\n    </novo-chip>\n    <!-- <div *ngIf=\"value.length > chipsCount\">\n      <ul class=\"summary\">\n        <li *ngFor=\"let type of notShown\">+ {{ type.count }} {{ labels.more }} {{ type.type }}</li>\n      </ul>\n    </div> -->\n    <div class=\"chip-input-container\" (click)=\"_handleFocus($event)\">\n      <span class=\"placeholder\" *ngIf=\"!value.length\" data-automation-id=\"multi-date-input\">{{ placeholder }}</span>\n    </div>\n    <novo-icon class=\"panel-toggle\" [class.selected]=\"panelOpen\" (click)=\"openPanel()\">calendar</novo-icon>\n    <label class=\"clear-all\" *ngIf=\"value.length\" (click)=\"clearValue()\">{{ labels.clearAll }} <i class=\"bhi-times\"></i></label>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        inline=\"true\"\n        mode=\"multiple\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [(ngModel)]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
+                    template: "\n    <novo-chip-list>\n      <novo-chip *ngFor=\"let date of value | default: []\" (removed)=\"remove($event, date)\">\n        {{ date | date: format }}\n        <novo-icon novoChipRemove>close</novo-icon>\n      </novo-chip>\n    </novo-chip-list>\n    <!-- <div *ngIf=\"value.length > chipsCount\">\n      <ul class=\"summary\">\n        <li *ngFor=\"let type of notShown\">+ {{ type.count }} {{ labels.more }} {{ type.type }}</li>\n      </ul>\n    </div> -->\n    <div class=\"chip-input-container\" (click)=\"_handleFocus($event)\">\n      <span class=\"placeholder\" *ngIf=\"!value.length\" data-automation-id=\"multi-date-input\">{{ placeholder }}</span>\n    </div>\n    <novo-icon class=\"panel-toggle\" [class.selected]=\"panelOpen\" (click)=\"openPanel()\">calendar</novo-icon>\n    <label class=\"clear-all\" *ngIf=\"value.length\" (click)=\"clearValue()\">{{ labels.clearAll }} <i class=\"bhi-times\"></i></label>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        inline=\"true\"\n        mode=\"multiple\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [(ngModel)]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoMultiDateInputElement.ctorParameters = function () { return [
@@ -38140,7 +38292,7 @@
             _this.id = _this._uniqueId;
             _this.name = _this._uniqueId;
             _this.placeholder = 'Select...';
-            _this.position = 'center';
+            _this.position = 'bottom';
             _this.onSelect = new i0.EventEmitter();
             /** Event emitted when the selected value has been changed by the user. */
             _this.selectionChange = new i0.EventEmitter();
@@ -38155,7 +38307,7 @@
             /** Function that maps an option's control value to its display value in the trigger. */
             _this.displayWith = null;
             /** * Function to compare the option values with the selected values. */
-            _this.compareWith = function (o1, o2) { return o1 === o2; };
+            _this.compareWith = function (o1, o2) { return o1 === o2 || o1 === o2.id || (!Helpers.isEmpty(o1.id) && !Helpers.isEmpty(o2.id) && o1.id === o2.id); };
             _this.header = {
                 open: false,
                 valid: true,
@@ -38167,6 +38319,7 @@
             _this.disabled = false;
             _this._value = null;
             _this._multiple = false;
+            _this._focused = false;
             if (ngControl) {
                 ngControl.valueAccessor = _this;
             }
@@ -38206,10 +38359,9 @@
             configurable: true
         });
         Object.defineProperty(NovoSelectElement.prototype, "focused", {
-            /** Whether any radio buttons has focus. */
+            /** Whether the select is focused. */
             get: function () {
-                // todo: implement this.
-                return false;
+                return this._focused || this.panelOpen;
             },
             enumerable: false,
             configurable: true
@@ -38254,6 +38406,8 @@
                 if (origin === 'keyboard' && !_this.disabled) {
                     _this.openPanel();
                 }
+                _this._focused = !!origin;
+                _this.stateChanges.next();
             }); });
         };
         NovoSelectElement.prototype.ngOnChanges = function (changes) {
@@ -38278,8 +38432,16 @@
             this._initializeSelection();
             // Listen to selection changes to select and deselect options
             this._selectionModel.changed.pipe(operators.takeUntil(this._destroy)).subscribe(function (event) {
-                event.added.forEach(function (option) { return option.select(); });
-                event.removed.forEach(function (option) { return option.deselect(); });
+                event.added.forEach(function (option) {
+                    if (option.select) {
+                        option.select();
+                    }
+                });
+                event.removed.forEach(function (option) {
+                    if (option.deselect) {
+                        option.deselect();
+                    }
+                });
             });
             // Listen to QueryList changes
             rxjs.merge(this.contentOptions.changes, this.viewOptions.changes)
@@ -38321,7 +38483,11 @@
          */
         NovoSelectElement.prototype._setSelectionByValue = function (value) {
             var _this = this;
-            this._selectionModel.selected.forEach(function (option) { return option.setInactiveStyles(); });
+            this._selectionModel.selected.forEach(function (option) {
+                if (option.setInactiveStyles) {
+                    option.setInactiveStyles();
+                }
+            });
             this._selectionModel.clear();
             if (this.multiple && value) {
                 value.forEach(function (currentValue) { return _this._selectValue(currentValue); });
@@ -38355,11 +38521,25 @@
                 if (_this._selectionModel.isSelected(option)) {
                     return false;
                 }
-                return option.value != null && _this.compareWith(option.value, value);
+                return !Helpers.isEmpty(value) && !Helpers.isEmpty(option.value) && _this.compareWith(option.value, value);
             });
             if (correspondingOption) {
                 this._selectionModel.select(correspondingOption);
             }
+            else if (value && !correspondingOption) {
+                // Double Check option not already added.
+                var legacyOption = this.filteredOptions.find(function (it) { return it.value === value; });
+                if (!legacyOption) {
+                    // Add a disabled option to the list and select it
+                    this.filteredOptions.push({
+                        disabled: true,
+                        tooltip: 'Value is not provided in list of valid options.',
+                        label: (value === null || value === void 0 ? void 0 : value.label) || value,
+                        value: value,
+                    });
+                    this.ref.detectChanges();
+                }
+            }
             return correspondingOption;
         };
         NovoSelectElement.prototype.select = function (option, i, fireEvents) {
@@ -38405,9 +38585,13 @@
             this._watchSelectionEvents();
         };
         NovoSelectElement.prototype._getDisplayValue = function (option) {
-            if (!option)
+            if (!option) {
                 return '';
-            var toDisplay = this.displayWith ? this.displayWith(option.value) : option.viewValue;
+            }
+            var toDisplay = option.viewValue;
+            if (this.displayWith) {
+                toDisplay = this.displayWith(option.value);
+            }
             // Simply falling back to an empty string if the display value is falsy does not work properly.
             // The display value can also be the number zero and shouldn't fall back to an empty string.
             var displayValue = toDisplay != null ? toDisplay : '';
@@ -38487,6 +38671,9 @@
                     }
                 });
             }
+            else if ("Escape" /* Escape */ === key) {
+                this.closePanel();
+            }
             else {
                 var previouslyFocusedIndex = manager.activeItemIndex;
                 manager.onKeydown(event);
@@ -38618,11 +38805,11 @@
             }
             else {
                 this.filteredOptions = (this.options || [])
-                    .filter(function (item) {
-                    return !item.readOnly;
+                    .map(function (item) {
+                    return Object.assign(Object.assign({}, item), { disabled: item.readOnly || item.disabled });
                 })
-                    .map(function (element) {
-                    return Object.assign(Object.assign({}, element), { active: false });
+                    .map(function (item) {
+                    return Object.assign(Object.assign({}, item), { active: false });
                 });
             }
         };
@@ -38677,7 +38864,26 @@
                         { provide: NovoFieldControl, useExisting: NovoSelectElement },
                         { provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoSelectElement },
                     ],
-                    template: "\n    <div class=\"novo-select-trigger\" #dropdownElement (click)=\"togglePanel(); (false)\" tabIndex=\"{{ disabled ? -1 : 0 }}\" type=\"button\">\n      <span class=\"novo-select-placeholder\" *ngIf=\"empty\">{{ placeholder }}</span>\n      <span class=\"novo-select-display-value\" *ngIf=\"!empty\">{{ displayValue }}</span>\n      <i class=\"bhi-collapse\"></i>\n    </div>\n    <novo-overlay-template\n      [parent]=\"elementRef\"\n      [position]=\"position\"\n      [width]=\"overlayWidth\"\n      [height]=\"overlayHeight\"\n      (closing)=\"dropdown.nativeElement.focus()\"\n    >\n      <div #panel class=\"novo-select-list\" tabIndex=\"-1\" [class.has-header]=\"headerConfig\" [class.active]=\"panelOpen\">\n        <novo-option *ngIf=\"headerConfig\" class=\"select-header\" [class.open]=\"header.open\">\n          <novo-button *ngIf=\"!header.open\" icon=\"add-thin\" (click)=\"toggleHeader($event); (false)\" tabIndex=\"-1\" class=\"header\">\n            {{ headerConfig.label }}\n          </novo-button>\n          <div *ngIf=\"header.open\" [ngClass]=\"{ active: header.open }\">\n            <input\n              autofocus\n              type=\"text\"\n              [placeholder]=\"headerConfig.placeholder\"\n              [attr.id]=\"name\"\n              autocomplete=\"off\"\n              [value]=\"header.value\"\n              [ngClass]=\"{ invalid: !header.valid }\"\n            />\n            <footer>\n              <novo-button (click)=\"toggleHeader($event, false)\">{{ labels.cancel }}</novo-button>\n              <novo-button (click)=\"saveHeader()\" class=\"primary\">{{ labels.save }}</novo-button>\n            </footer>\n          </div>\n        </novo-option>\n        <!-- Declarative Content Goes Here -->\n        <ng-content></ng-content>\n        <!-- Data Driven Content Goes Here -->\n        <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\n          <novo-option\n            *ngIf=\"!option.divider; else divider\"\n            class=\"select-item\"\n            [class.active]=\"option.active\"\n            [class.disabled]=\"option.disabled\"\n            [attr.data-automation-value]=\"option.label\"\n            [value]=\"option.value\"\n            [tooltip]=\"option.tooltip\"\n            [tooltipPosition]=\"option.tooltipPosition || 'right'\"\n          >\n            <span [innerHtml]=\"highlight(option.label, filterTerm)\"></span> <i *ngIf=\"option.active\" class=\"bhi-check\"></i>\n          </novo-option>\n          <ng-template #divider>\n            <novo-divider class=\"select-item-divider\" [class.with-label]=\"option.label\" [class.without-label]=\"!option.label\">\n              {{ option?.label }}\n            </novo-divider>\n          </ng-template>\n        </ng-container>\n      </div>\n    </novo-overlay-template>\n  "
+                    template: "\n    <div class=\"novo-select-trigger\" #dropdownElement (click)=\"togglePanel(); (false)\" tabIndex=\"{{ disabled ? -1 : 0 }}\" type=\"button\">\n      <span class=\"novo-select-placeholder\" *ngIf=\"empty\">{{ placeholder }}</span>\n      <span class=\"novo-select-display-value\" *ngIf=\"!empty\">{{ displayValue }}</span>\n      <i class=\"bhi-collapse\"></i>\n    </div>\n    <novo-overlay-template\n      [parent]=\"elementRef\"\n      [position]=\"position\"\n      [width]=\"overlayWidth\"\n      [height]=\"overlayHeight\"\n      (closing)=\"dropdown.nativeElement.focus()\"\n    >\n      <div #panel class=\"novo-select-list\" tabIndex=\"-1\" [class.has-header]=\"headerConfig\" [class.active]=\"panelOpen\">\n        <novo-option *ngIf=\"headerConfig\" class=\"select-header\" [class.open]=\"header.open\">\n          <novo-button *ngIf=\"!header.open\" icon=\"add-thin\" (click)=\"toggleHeader($event); (false)\" tabIndex=\"-1\" class=\"header\">\n            {{ headerConfig.label }}\n          </novo-button>\n          <div *ngIf=\"header.open\" [ngClass]=\"{ active: header.open }\">\n            <input\n              autofocus\n              type=\"text\"\n              [placeholder]=\"headerConfig.placeholder\"\n              [attr.id]=\"name\"\n              autocomplete=\"off\"\n              [value]=\"header.value\"\n              [ngClass]=\"{ invalid: !header.valid }\"\n            />\n            <footer>\n              <novo-button (click)=\"toggleHeader($event, false)\">{{ labels.cancel }}</novo-button>\n              <novo-button (click)=\"saveHeader()\" class=\"primary\">{{ labels.save }}</novo-button>\n            </footer>\n          </div>\n        </novo-option>\n        <!-- Declarative Content Goes Here -->\n        <ng-content></ng-content>\n        <!-- Data Driven Content Goes Here -->\n        <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\n          <novo-option\n            *ngIf=\"!option.divider; else divider\"\n            class=\"select-item\"\n            [disabled]=\"option.disabled\"\n            [class.active]=\"option.active\"\n            [attr.data-automation-value]=\"option.label\"\n            [value]=\"option.value\"\n            [tooltip]=\"option.tooltip\"\n            [tooltipPosition]=\"option.tooltipPosition || 'right'\"\n          >\n            <span [innerHtml]=\"highlight(option.label, filterTerm)\"></span> <i *ngIf=\"option.active\" class=\"bhi-check\"></i>\n          </novo-option>\n          <ng-template #divider>\n            <novo-divider class=\"select-item-divider\" [class.with-label]=\"option.label\" [class.without-label]=\"!option.label\">\n              {{ option?.label }}\n            </novo-divider>\n          </ng-template>\n        </ng-container>\n      </div>\n    </novo-overlay-template>\n  ",
+                    host: {
+                        class: 'novo-select',
+                        role: 'combobox',
+                        'aria-autocomplete': 'none',
+                        'aria-haspopup': 'true',
+                        '[attr.id]': 'id',
+                        '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
+                        '[attr.aria-expanded]': 'panelOpen',
+                        '[attr.aria-required]': 'required.toString()',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-invalid]': 'errorState',
+                        '[attr.aria-describedby]': '_ariaDescribedby || null',
+                        '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
+                        '[class.novo-select-disabled]': 'disabled',
+                        '[class.novo-select-invalid]': 'errorState',
+                        '[class.novo-select-required]': 'required',
+                        '[class.novo-select-empty]': 'empty',
+                        '[class.novo-select-multiple]': 'multiple',
+                    }
                 },] }
     ];
     NovoSelectElement.ctorParameters = function () { return [
@@ -39848,6 +40054,8 @@
             this.theme = 'standard';
             this._page = 0;
             this._pageSizeOptions = [];
+            this.canSelectAll = false;
+            this.allMatchingSelected = false;
             this._length = 0;
             this.pageChange = new i0.EventEmitter();
             this.resetSubscription = this.state.resetSource.subscribe(function () {
@@ -39915,12 +40123,12 @@
             this.resetSubscription.unsubscribe();
         };
         NovoDataTablePagination.prototype.selectPage = function (page) {
-            this.state.checkRetainment('page');
+            this.state.checkRetainment('page', this.canSelectAll && this.allMatchingSelected);
             this.page = page;
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.nextPage = function () {
-            this.state.checkRetainment('page');
+            this.state.checkRetainment('page', this.canSelectAll && this.allMatchingSelected);
             if (!this.hasNextPage()) {
                 return;
             }
@@ -39929,7 +40137,7 @@
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.previousPage = function () {
-            this.state.checkRetainment('page');
+            this.state.checkRetainment('page', this.canSelectAll && this.allMatchingSelected);
             if (!this.hasPreviousPage()) {
                 return;
             }
@@ -40048,6 +40256,8 @@
         pageSize: [{ type: i0.Input }],
         dataFeatureId: [{ type: i0.Input }],
         pageSizeOptions: [{ type: i0.Input }],
+        canSelectAll: [{ type: i0.Input }],
+        allMatchingSelected: [{ type: i0.Input }],
         length: [{ type: i0.Input }],
         pageChange: [{ type: i0.Output }]
     };
@@ -41157,8 +41367,9 @@
         { type: i0.Component, args: [{
                     selector: 'novo-time-picker',
                     providers: [TIME_PICKER_VALUE_ACCESSOR],
-                    template: "\n    <!-- <div class=\"digital\" [class.inline]=\"inline\" [class.military]=\"military\" *ngIf=\"inline\">\n      <div class=\"digital--inner\">\n        <span class=\"digital--clock\" *ngIf=\"analog\">\n          <span class=\"hours\" data-automation-id=\"novo-time-picker-hours\">{{ hours }}</span\n          >:<span class=\"minutes\" data-automation-id=\"novo-time-picker-minutes\">{{ minutes }}</span>\n        </span>\n        <div class=\"control-block\" *ngIf=\"!military && analog\">\n          <span\n            *ngFor=\"let period of MERIDIANS\"\n            class=\"digital--period\"\n            [class.active]=\"meridian == period\"\n            (click)=\"setPeriod($event, period, true)\"\n            [attr.data-automation-id]=\"period\"\n            >{{ period }}</span\n          >\n        </div>\n      </div>\n    </div> -->\n    <div class=\"increments\" *ngIf=\"!analog\">\n      <novo-list direction=\"vertical\" data-automation-id=\"novo-time-picker-increments\">\n        <novo-list-item\n          *ngFor=\"let increment of HOURS\"\n          (click)=\"setHours($event, increment, true)\"\n          [class.active]=\"increment == activeHour\"\n          [attr.data-automation-id]=\"increment\"\n        >\n          <item-content>{{ increment }}</item-content>\n        </novo-list-item>\n      </novo-list>\n      <novo-list direction=\"vertical\" data-automation-id=\"novo-time-picker-increments\">\n        <novo-list-item\n          *ngFor=\"let increment of MINUTES\"\n          (click)=\"setMinutes($event, increment, true)\"\n          [class.active]=\"increment == activeMinute\"\n          [attr.data-automation-id]=\"increment\"\n        >\n          <item-content>{{ increment }}</item-content>\n        </novo-list-item>\n      </novo-list>\n      <novo-list direction=\"vertical\" *ngIf=\"!military\" data-automation-id=\"novo-time-picker-meridians\">\n        <novo-list-item\n          *ngFor=\"let period of MERIDIANS\"\n          (click)=\"setPeriod($event, period, true)\"\n          [class.active]=\"meridian == period\"\n          [attr.data-automation-id]=\"period\"\n        >\n          <item-content>{{ period }}</item-content>\n        </novo-list-item>\n      </novo-list>\n    </div>\n    <div class=\"analog\" *ngIf=\"analog\">\n      <div class=\"analog--inner\">\n        <div class=\"analog--face\">\n          <span class=\"analog--center\"></span>\n          <span class=\"analog--hand--hours\" [ngClass]=\"hoursClass\">\n            <span class=\"analog--ball\"></span>\n          </span>\n          <span class=\"analog--hand--minutes\" [ngClass]=\"minutesClass\">\n            <span class=\"analog--ball\" [ngClass]=\"{ between: inBetween }\"></span>\n          </span>\n        </div>\n        <div class=\"analog--hours\">\n          <span\n            *ngFor=\"let hour of HOURS\"\n            class=\"analog--hour\"\n            [ngClass]=\"{ active: activeHour == hour }\"\n            (click)=\"setHours($event, hour, true)\"\n            [attr.data-automation-id]=\"hour\"\n            >{{ hour }}</span\n          >\n        </div>\n        <div class=\"analog--minutes\">\n          <span\n            *ngFor=\"let minute of MINUTES\"\n            class=\"analog--minute\"\n            [ngClass]=\"{ active: activeMinute == minute }\"\n            (click)=\"setMinutes($event, minute, true)\"\n            [attr.data-automation-id]=\"minute\"\n            >{{ minute }}</span\n          >\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <!-- <div class=\"digital\" [class.inline]=\"inline\" [class.military]=\"military\" *ngIf=\"inline\">\n      <div class=\"digital--inner\">\n        <span class=\"digital--clock\" *ngIf=\"analog\">\n          <span class=\"hours\" data-automation-id=\"novo-time-picker-hours\">{{ hours }}</span\n          >:<span class=\"minutes\" data-automation-id=\"novo-time-picker-minutes\">{{ minutes }}</span>\n        </span>\n        <div class=\"control-block\" *ngIf=\"!military && analog\">\n          <span\n            *ngFor=\"let period of MERIDIANS\"\n            class=\"digital--period\"\n            [class.active]=\"meridian == period\"\n            (click)=\"setPeriod($event, period, true)\"\n            [attr.data-automation-id]=\"period\"\n            >{{ period }}</span\n          >\n        </div>\n      </div>\n    </div> -->\n    <div class=\"increments\" *ngIf=\"!analog\">\n      <novo-list class=\"increments--hours\" direction=\"vertical\" data-automation-id=\"novo-time-picker-hours\">\n        <novo-list-item\n          class=\"increments--hour\"\n          *ngFor=\"let increment of HOURS\"\n          (click)=\"setHours($event, increment, true)\"\n          [class.active]=\"increment == activeHour\"\n          [attr.data-automation-id]=\"increment\"\n        >\n          <item-content>{{ increment }}</item-content>\n        </novo-list-item>\n      </novo-list>\n      <novo-list class=\"increments--minutes\" direction=\"vertical\" data-automation-id=\"novo-time-picker-minutes\">\n        <novo-list-item\n          class=\"increments--minute\"\n          *ngFor=\"let increment of MINUTES\"\n          (click)=\"setMinutes($event, increment, true)\"\n          [class.active]=\"increment == activeMinute\"\n          [attr.data-automation-id]=\"increment\"\n        >\n          <item-content>{{ increment }}</item-content>\n        </novo-list-item>\n      </novo-list>\n      <novo-list class=\"increments--meridians\" direction=\"vertical\" *ngIf=\"!military\" data-automation-id=\"novo-time-picker-meridians\">\n        <novo-list-item\n          class=\"increments--meridian\"\n          *ngFor=\"let period of MERIDIANS\"\n          (click)=\"setPeriod($event, period, true)\"\n          [class.active]=\"meridian == period\"\n          [attr.data-automation-id]=\"period\"\n        >\n          <item-content>{{ period }}</item-content>\n        </novo-list-item>\n      </novo-list>\n    </div>\n    <div class=\"analog\" *ngIf=\"analog\">\n      <div class=\"analog--inner\">\n        <div class=\"analog--face\">\n          <span class=\"analog--center\"></span>\n          <span class=\"analog--hand--hours\" [ngClass]=\"hoursClass\">\n            <span class=\"analog--ball\"></span>\n          </span>\n          <span class=\"analog--hand--minutes\" [ngClass]=\"minutesClass\">\n            <span class=\"analog--ball\" [ngClass]=\"{ between: inBetween }\"></span>\n          </span>\n        </div>\n        <div class=\"analog--hours\">\n          <span\n            *ngFor=\"let hour of HOURS\"\n            class=\"analog--hour\"\n            [ngClass]=\"{ active: activeHour == hour }\"\n            (click)=\"setHours($event, hour, true)\"\n            [attr.data-automation-id]=\"hour\"\n            >{{ hour }}</span\n          >\n        </div>\n        <div class=\"analog--minutes\">\n          <span\n            *ngFor=\"let minute of MINUTES\"\n            class=\"analog--minute\"\n            [ngClass]=\"{ active: activeMinute == minute }\"\n            (click)=\"setMinutes($event, minute, true)\"\n            [attr.data-automation-id]=\"minute\"\n            >{{ minute }}</span\n          >\n        </div>\n      </div>\n    </div>\n  ",
                     host: {
+                        class: 'novo-time-picker',
                         '[class.military]': 'military',
                     }
                 },] }
@@ -41195,10 +41406,23 @@
             this._onTouched = function () { };
             this.military = false;
             this.disabled = false;
+            /**
+             * @deprecated don't use
+             */
+            this.analog = false;
             this.blurEvent = new i0.EventEmitter();
             this.focusEvent = new i0.EventEmitter();
         }
         NovoTimePickerInputElement.prototype.ngOnInit = function () {
+            this.initFormatOptions();
+        };
+        NovoTimePickerInputElement.prototype.ngOnChanges = function (changes) {
+            // set icon and styling
+            if (Object.keys(changes).some(function (key) { return ['military', 'maskOptions'].includes(key); })) {
+                this.initFormatOptions();
+            }
+        };
+        NovoTimePickerInputElement.prototype.initFormatOptions = function () {
             var _this = this;
             this.placeholder = this.military ? this.labels.timeFormatPlaceholder24Hour : this.labels.timeFormatPlaceholderAM;
             var timeFormat = this.military ? 'HH:mm' : 'hh:mm A';
@@ -41279,18 +41503,39 @@
         /** END: Convenient Panel Methods. */
         NovoTimePickerInputElement.prototype._handleKeydown = function (event) {
             var input = event.target;
-            if ((event.key === "Escape" /* Escape */ || event.key === "Enter" /* Enter */ || event.key === "Tab" /* Tab */) && this.panelOpen) {
+            var hour = input.value.slice(0, 2);
+            if ((event.key === "Escape" /* Escape */ || event.key === "Enter" /* Enter */) && this.panelOpen) {
                 this.closePanel();
                 event.stopPropagation();
                 event.stopImmediatePropagation();
+                if (this.hourOneFormatRequired(hour)) {
+                    input.value = "01:" + input.value.slice(3, input.value.length);
+                }
             }
-            if (event.key === "Backspace" /* Backspace */ && input.selectionStart === input.value.length) {
-                event.target.value = input.value.slice(0, 5) + " xx";
+            else if (event.key === "Tab" /* Tab */ && input.selectionStart <= 2 && this.hourOneFormatRequired(hour)) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                input.value = "01:" + input.value.slice(3, input.value.length);
+                input.setSelectionRange(3, 3);
+            }
+            else if (event.key === "Backspace" /* Backspace */ && input.selectionStart === input.value.length) {
+                input.value = input.value.slice(0, 5) + " xx";
+            }
+            else if (event.key === "Tab" /* Tab */ && this.panelOpen) {
+                this.closePanel();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+            else if (event.key === "ArrowRight" /* ArrowRight */ && input.selectionStart >= 2 && this.hourOneFormatRequired(hour)) {
+                input.value = "01:" + input.value.slice(3, input.value.length);
+                input.setSelectionRange(2, 2);
             }
         };
         NovoTimePickerInputElement.prototype._handleInput = function (event) {
             if (document.activeElement === event.target) {
                 var text = event.target.value;
+                var hour = text.slice(0, 2);
                 this.openPanel();
                 if ((this.military && Number(text[0]) > 2) || (!this.military && Number(text[0]) > 1)) {
                     event.preventDefault();
@@ -41300,18 +41545,25 @@
                     var test_1 = text.substr(5, 4).replace(/x/g, '').trim().slice(0, 2);
                     var timePeriod = this.maskOptions.blocks.aa.enum.find(function (it) { return it[0] === test_1[0]; });
                     if (timePeriod) {
-                        event.target.value = text.slice(0, 5) + " " + timePeriod;
+                        event.target.value = event.target.value.slice(0, 5) + " " + timePeriod;
+                    }
+                    if (event.target.selectionStart >= 3 && this.hourOneFormatRequired(hour)) {
+                        event.target.value = "01:" + event.target.value.slice(3, event.target.value.length);
                     }
                 }
             }
         };
         NovoTimePickerInputElement.prototype._handleBlur = function (event) {
             var text = event.target.value;
+            var hour = text.slice(0, 2);
             if (!this.military) {
                 var test_2 = text.substr(5, 4).replace(/x/g, '').trim().slice(0, 2);
                 var timePeriod = this.maskOptions.blocks.aa.enum.find(function (it) { return it[0] === test_2[0]; });
+                if (this.hourOneFormatRequired(hour)) {
+                    event.target.value = "01:" + text.slice(3, text.length);
+                }
                 if (!timePeriod) {
-                    event.target.value = text.slice(0, 5) + " xx";
+                    event.target.value = event.target.value.slice(0, 5) + " xx";
                 }
             }
         };
@@ -41389,13 +41641,16 @@
             }
             return hours + ":" + minutes;
         };
+        NovoTimePickerInputElement.prototype.hourOneFormatRequired = function (hourInput) {
+            return hourInput === 'h1' || hourInput === '1h';
+        };
         return NovoTimePickerInputElement;
     }());
     NovoTimePickerInputElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-time-picker-input',
                     providers: [DATE_VALUE_ACCESSOR$2],
-                    template: "\n    <input\n      type=\"text\"\n      [name]=\"name\"\n      [(ngModel)]=\"value\"\n      [imask]=\"maskOptions\"\n      [unmask]=\"'typed'\"\n      (complete)=\"onComplete($event)\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"_handleFocus($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n      (input)=\"_handleInput($event)\"\n      (blur)=\"_handleBlur($event)\"\n      #input\n      data-automation-id=\"time-input\"\n      [disabled]=\"disabled\"\n    />\n    <i *ngIf=\"!hasValue\" (click)=\"openPanel()\" class=\"bhi-clock\"></i> <i *ngIf=\"hasValue\" (click)=\"clearValue()\" class=\"bhi-times\"></i>\n\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-time-picker inline=\"true\" (onSelect)=\"setValue($event)\" [ngModel]=\"value\" [military]=\"military\"></novo-time-picker>\n    </novo-overlay-template>\n  "
+                    template: "\n    <input\n      type=\"text\"\n      [name]=\"name\"\n      [(ngModel)]=\"value\"\n      [imask]=\"maskOptions\"\n      [unmask]=\"'typed'\"\n      (complete)=\"onComplete($event)\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"_handleFocus($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n      (input)=\"_handleInput($event)\"\n      (blur)=\"_handleBlur($event)\"\n      #input\n      data-automation-id=\"time-input\"\n      [disabled]=\"disabled\"\n    />\n    <i *ngIf=\"!hasValue\" (click)=\"openPanel()\" class=\"bhi-clock\"></i> <i *ngIf=\"hasValue\" (click)=\"clearValue()\" class=\"bhi-times\"></i>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-time-picker\n        inline=\"true\"\n        [analog]=\"analog\"\n        (onSelect)=\"setValue($event)\"\n        [ngModel]=\"value\"\n        [military]=\"military\"\n      ></novo-time-picker>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoTimePickerInputElement.ctorParameters = function () { return [
@@ -41410,9 +41665,11 @@
         military: [{ type: i0.Input }],
         maskOptions: [{ type: i0.Input }],
         disabled: [{ type: i0.HostBinding, args: ['class.disabled',] }, { type: i0.Input }],
+        analog: [{ type: i0.Input }],
         blurEvent: [{ type: i0.Output }],
         focusEvent: [{ type: i0.Output }],
-        overlay: [{ type: i0.ViewChild, args: [NovoOverlayTemplateComponent,] }]
+        overlay: [{ type: i0.ViewChild, args: [NovoOverlayTemplateComponent,] }],
+        input: [{ type: i0.ViewChild, args: ['input',] }]
     };
 
     // NG2
@@ -42029,8 +42286,8 @@
     }());
 
     var zoomInOut = animations.trigger('zoomInOut', [
-        animations.transition('void => *', [animations.style({ transform: 'scale3d(.3, .3, .3)' }), animations.animate(100)]),
-        animations.transition('* => void', [animations.animate(100, animations.style({ transform: 'scale3d(.0, .0, .0)' }))]),
+        animations.transition('void => *', [animations.style({ transform: 'scale3d(.3, .3, .3)' }), animations.animate(50)]),
+        animations.transition('* => void', [animations.animate(50, animations.style({ transform: 'scale3d(.0, .0, .0)' }))]),
     ]);
 
     var NovoModalContainerComponent = /** @class */ (function () {
@@ -43334,6 +43591,9 @@
                     'quick-note',
                     'date',
                     'custom',
+                    'switch',
+                    'native-select',
+                    'native-input',
                 ].indexOf(this.form.controls[this.control.key].controlType) !== -1);
             },
             enumerable: false,
@@ -43574,6 +43834,10 @@
             this._remove = false;
             this._edit = false;
             this._collapsible = false;
+            // Edit icon at the end of each row (no bhi- prefix)
+            this.editIcon = 'edit';
+            // Remove icon at the end of each row (no bhi- prefix)
+            this.removeIcon = 'delete-o';
             this.onRemove = new i0.EventEmitter();
             this.onEdit = new i0.EventEmitter();
             this.onAdd = new i0.EventEmitter();
@@ -43855,7 +44119,7 @@
     NovoControlGroup.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-control-group',
-                    template: "<h6 class=\"novo-section-header\" *ngIf=\"label\">\n  <span (click)=\"toggle($event)\" [class.clickable]=\"collapsible\">\n    <i *ngIf=\"icon && !collapsible\" [ngClass]=\"icon\" [attr.data-automation-id]=\"'novo-control-group-icon-' + key\"></i>\n    <i *ngIf=\"collapsible\" class=\"bhi-next\" [class.toggled]=\"toggled\"\n      [attr.data-automation-id]=\"'novo-control-group-collapse-' + key\"></i>\n    <span [attr.data-automation-id]=\"'novo-control-group-label-' + key\">{{ label }}</span>\n  </span>\n  <label class=\"novo-control-group-description\" *ngIf=\"description\"\n    [attr.data-automation-id]=\"'novo-control-group-description-' + key\">{{ description }}</label>\n</h6>\n<div class=\"novo-control-group-controls\" [class.vertical]=\"vertical\" [class.horizontal]=\"!vertical\"\n  [class.hidden]=\"collapsible && !toggled\">\n\n  <ng-template #defaultTemplate let-index=\"index\" let-form=\"form\" let-key=\"key\">\n    <div class=\"novo-control-group-control\">\n      <div *ngFor=\"let c of controls\" class=\"novo-control-container {{c.key}}\"\n        [class.is-label]=\"c.controlType === 'read-only'\" [style.max-width.px]=\"c.width\">\n        <novo-control (change)=\"onChange()\" [form]=\"(form?.controls)[key]['controls'][index]\" [control]=\"c\"\n          [condensed]=\"!vertical || c.controlType === 'read-only'\"></novo-control>\n      </div>\n      <div class=\"novo-control-container last\" *ngIf=\"edit && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n          *ngIf=\"edit && !vertical\" theme=\"icon\" icon=\"edit\"\n          (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n        </novo-button>\n      </div>\n      <div class=\"novo-control-container last\" *ngIf=\"remove && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n          *ngIf=\"remove && !vertical\" theme=\"icon\"\n          icon=\"delete-o\" (click)=\"removeControl(index)\"\n          [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n          index=\"-1\">\n        </novo-button>\n      </div>\n    </div>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n      *ngIf=\"edit && vertical\"\n      theme=\"icon\" icon=\"edit\"\n      (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n    </novo-button>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n      *ngIf=\"remove && vertical\" theme=\"icon\"\n      icon=\"delete-o\" (click)=\"removeControl(index)\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n      index=\"-1\">\n    </novo-button>\n  </ng-template>\n\n  <ng-template #defaultColumnLabelTemplate let-form=\"form\" let-key=\"key\">\n    <div *ngFor=\"let label of controlLabels\"\n      class=\"novo-control-group-control-label {{ label.key }}\"\n      [class.novo-control-group-control-hidden]=\"label.hidden\"\n      [style.max-width.px]=\"label.width\" [class.column-required]=\"label.required\">\n      <span [attr.data-automation-id]=\"'novo-control-group-label-' + label.value\">{{ label.value }}</span>\n    </div>\n    <div class=\"novo-control-group-control-label last\" *ngIf=\"edit\"\n      [attr.data-automation-id]=\"'novo-control-group-edit-' + key\"></div>\n    <div class=\"novo-control-group-control-label last\" *ngIf=\"remove\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"></div>\n  </ng-template>\n\n  <ng-container *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n    <div class=\"novo-control-group-labels\"\n      *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n      <ng-template [ngTemplateOutlet]=\"columnLabelTemplate || defaultColumnLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, key: key, controlLabels: controlLabels }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(form?.controls)[key]\">\n    <div class=\"novo-control-group-row\"\n      *ngFor=\"let control of (form?.controls)[key]['controls']; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"rowTemplate || defaultTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, formGroup: control, index: index, key: key, controls: controls }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <div class=\"novo-control-group-empty\"\n    *ngIf=\"(form?.controls)[key] && (form?.controls)[key]['controls'].length === 0\"\n    [attr.data-automation-id]=\"'novo-control-group-empty-' + key\">\n    {{ emptyMessage }}\n  </div>\n\n  <div *ngIf=\"add\" class=\"novo-control-group-footer\">\n    <novo-button type=\"button\" theme=\"dialogue\" icon=\"add-thin\" side=\"left\" (click)=\"onClickAdd()\"\n      [attr.data-automation-id]=\"'novo-control-group-bottom-add-' + key\" index=\"-1\">\n      {{ add?.label }}\n    </novo-button>\n    <!-- <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"close\" side=\"left\"\n                  (click)=\"onClickCancel()\" [attr.data-automation-id]=\"'novo-control-group-bottom-cancel-' + key\"\n                  index=\"-1\">\n                {{ 'cancel' }}\n                </novo-button>\n                  <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"check\" side=\"left\"\n                  (click)=\"onClickSave()\" [attr.data-automation-id]=\"'novo-control-group-bottom-save-' + key\"\n                  index=\"-1\">\n                {{ add?.label }}\n                </novo-button> -->\n  </div>\n</div>",
+                    template: "<h6 class=\"novo-section-header\" *ngIf=\"label\">\n  <span (click)=\"toggle($event)\" [class.clickable]=\"collapsible\">\n    <i *ngIf=\"icon && !collapsible\" [ngClass]=\"icon\" [attr.data-automation-id]=\"'novo-control-group-icon-' + key\"></i>\n    <i *ngIf=\"collapsible\" class=\"bhi-next\" [class.toggled]=\"toggled\"\n      [attr.data-automation-id]=\"'novo-control-group-collapse-' + key\"></i>\n    <span [attr.data-automation-id]=\"'novo-control-group-label-' + key\">{{ label }}</span>\n  </span>\n  <label class=\"novo-control-group-description\" *ngIf=\"description\"\n    [attr.data-automation-id]=\"'novo-control-group-description-' + key\">{{ description }}</label>\n</h6>\n<div class=\"novo-control-group-controls\" [class.vertical]=\"vertical\" [class.horizontal]=\"!vertical\"\n  [class.hidden]=\"collapsible && !toggled\">\n\n  <ng-template #defaultTemplate let-index=\"index\" let-form=\"form\" let-key=\"key\">\n    <div class=\"novo-control-group-control\">\n      <div *ngFor=\"let c of controls\" class=\"novo-control-container {{c.key}}\"\n        [class.is-label]=\"c.controlType === 'read-only'\" [style.max-width.px]=\"c.width\">\n        <novo-control (change)=\"onChange()\" [form]=\"(form?.controls)[key]['controls'][index]\" [control]=\"c\"\n          [condensed]=\"!vertical || c.controlType === 'read-only'\"></novo-control>\n      </div>\n      <div class=\"novo-control-container edit last\" *ngIf=\"edit && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n          *ngIf=\"edit && !vertical\" theme=\"icon\" [icon]=\"editIcon\"\n          (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n        </novo-button>\n      </div>\n      <div class=\"novo-control-container remove last\" *ngIf=\"remove && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n          *ngIf=\"remove && !vertical\" theme=\"icon\"\n          [icon]=\"removeIcon\" (click)=\"removeControl(index)\"\n          [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n          index=\"-1\">\n        </novo-button>\n      </div>\n    </div>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n      *ngIf=\"edit && vertical\"\n      theme=\"icon\" [icon]=\"editIcon\"\n      (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n    </novo-button>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n      *ngIf=\"remove && vertical\" theme=\"icon\"\n      [icon]=\"removeIcon\" (click)=\"removeControl(index)\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n      index=\"-1\">\n    </novo-button>\n  </ng-template>\n\n  <ng-template #defaultColumnLabelTemplate let-form=\"form\" let-key=\"key\">\n    <div *ngFor=\"let label of controlLabels\"\n      class=\"novo-control-group-control-label {{ label.key }}\"\n      [class.novo-control-group-control-hidden]=\"label.hidden\"\n      [style.max-width.px]=\"label.width\" [class.column-required]=\"label.required\">\n      <span [attr.data-automation-id]=\"'novo-control-group-label-' + label.value\">{{ label.value }}</span>\n    </div>\n    <div class=\"novo-control-group-control-label edit last\" *ngIf=\"edit\"\n      [attr.data-automation-id]=\"'novo-control-group-edit-' + key\"></div>\n    <div class=\"novo-control-group-control-label remove last\" *ngIf=\"remove\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"></div>\n  </ng-template>\n\n  <ng-container *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n    <div class=\"novo-control-group-labels\"\n      *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n      <ng-template [ngTemplateOutlet]=\"columnLabelTemplate || defaultColumnLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, key: key, controlLabels: controlLabels }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(form?.controls)[key]\">\n    <div class=\"novo-control-group-row\"\n      *ngFor=\"let control of (form?.controls)[key]['controls']; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"rowTemplate || defaultTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, formGroup: control, index: index, key: key, controls: controls }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <div class=\"novo-control-group-empty\"\n    *ngIf=\"(form?.controls)[key] && (form?.controls)[key]['controls'].length === 0\"\n    [attr.data-automation-id]=\"'novo-control-group-empty-' + key\">\n    {{ emptyMessage }}\n  </div>\n\n  <div *ngIf=\"add\" class=\"novo-control-group-footer\">\n    <novo-button type=\"button\" theme=\"dialogue\" icon=\"add-thin\" side=\"left\" (click)=\"onClickAdd()\"\n      [attr.data-automation-id]=\"'novo-control-group-bottom-add-' + key\" index=\"-1\">\n      {{ add?.label }}\n    </novo-button>\n    <!-- <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"close\" side=\"left\"\n                  (click)=\"onClickCancel()\" [attr.data-automation-id]=\"'novo-control-group-bottom-cancel-' + key\"\n                  index=\"-1\">\n                {{ 'cancel' }}\n                </novo-button>\n                  <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"check\" side=\"left\"\n                  (click)=\"onClickSave()\" [attr.data-automation-id]=\"'novo-control-group-bottom-save-' + key\"\n                  index=\"-1\">\n                {{ add?.label }}\n                </novo-button> -->\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class.novo-control-group-appearance-card]': "appearance=='card'",
@@ -43883,6 +44147,8 @@
         description: [{ type: i0.Input }],
         emptyMessage: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
+        editIcon: [{ type: i0.Input }],
+        removeIcon: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
         canEdit: [{ type: i0.Input }],
         canRemove: [{ type: i0.Input }],
@@ -43912,7 +44178,7 @@
     NovoControlTemplates.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-control-templates',
-                    template: "\n    <!---Readonly--->\n    <ng-template novoTemplate=\"read-only\" let-form=\"form\" let-control>\n      <div>{{ form.value[control.key] }}</div>\n    </ng-template>\n    <!--Textbox--->\n    <ng-template novoTemplate=\"textbox\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container novo-control-input-with-label\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <input\n          *ngIf=\"control?.type !== 'number' && control?.textMaskEnabled\"\n          [textMask]=\"control.maskOptions\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          autocomplete\n        />\n        <input\n          *ngIf=\"control?.type !== 'number' && !control?.textMaskEnabled\"\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          [maxlength]=\"control?.maxlength\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          autocomplete\n        />\n        <input\n          *ngIf=\"control?.type === 'number' && control?.subType !== 'percentage'\"\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (keydown)=\"methods.restrictKeys($event)\"\n          (input)=\"methods.emitChange($event)\"\n          [maxlength]=\"control?.maxlength\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          step=\"any\"\n          (mousewheel)=\"numberInput.blur()\"\n          #numberInput\n        />\n        <!-- the percentage input does not use formControlName like a normal reactive input because instead of\n          setting the floating point value directly, it is multiplied by 100 into a percentage value -->\n        <input\n          *ngIf=\"control?.type === 'number' && control?.subType === 'percentage'\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (keydown)=\"methods.restrictKeys($event)\"\n          [value]=\"control?.percentValue\"\n          [disabled]=\"control?.readOnly\"\n          (input)=\"methods.handlePercentChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          step=\"any\"\n          (mousewheel)=\"percentInput.blur()\"\n          #percentInput\n        />\n        <label class=\"input-label\" *ngIf=\"control?.subType === 'currency'\">{{ control.currencyFormat }}</label>\n        <label class=\"input-label\" *ngIf=\"control?.subType === 'percentage'\">%</label>\n      </div>\n    </ng-template>\n\n    <!--Textarea--->\n    <ng-template novoTemplate=\"text-area\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        class=\"textarea-container\"\n        [formGroup]=\"form\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <textarea\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [name]=\"control.key\"\n          [attr.id]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          autosize\n          (input)=\"methods.handleTextAreaInput($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [maxlength]=\"control?.maxlength\"\n        ></textarea>\n      </div>\n    </ng-template>\n\n    <!--Editor-->\n    <ng-template novoTemplate=\"editor\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-editor\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [startupFocus]=\"control.startupFocus\"\n          [minimal]=\"control.minimal\"\n          [fileBrowserImageUploadUrl]=\"control.fileBrowserImageUploadUrl\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [config]=\"control.config\"\n        ></novo-editor>\n      </div>\n    </ng-template>\n\n    <!--AceEditor-->\n    <ng-template novoTemplate=\"ace-editor\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-ace-editor\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n        ></novo-ace-editor>\n      </div>\n    </ng-template>\n\n    <!--HTML5 Select-->\n    <ng-template novoTemplate=\"native-select\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <select\n          [id]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        >\n          <option *ngIf=\"control.placeholder\" value=\"\" disabled selected hidden>{{ control.placeholder }}</option>\n          <option *ngFor=\"let opt of control.options\" [value]=\"opt.key\">{{ opt.value }}</option>\n        </select>\n      </div>\n    </ng-template>\n\n    <!--File-->\n    <ng-template novoTemplate=\"file\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-file-input\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [name]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [value]=\"control.value\"\n          [multiple]=\"control.multiple\"\n          [layoutOptions]=\"control.layoutOptions\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (edit)=\"methods.handleEdit($event)\"\n          (save)=\"methods.handleSave($event)\"\n          (delete)=\"methods.handleDelete($event)\"\n          (upload)=\"methods.handleUpload($event)\"\n        ></novo-file-input>\n      </div>\n    </ng-template>\n\n    <!--Tiles-->\n    <ng-template novoTemplate=\"tiles\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-tiles\n          [options]=\"control.options\"\n          [formControlName]=\"control.key\"\n          (onChange)=\"methods.modelChange($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [controlDisabled]=\"control.disabled\"\n        ></novo-tiles>\n      </div>\n    </ng-template>\n\n    <!--Picker-->\n    <ng-template novoTemplate=\"picker\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\" class=\"novo-control-input-container\">\n        <novo-picker\n          [config]=\"control.config\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [parentScrollSelector]=\"control.parentScrollSelector\"\n          *ngIf=\"!control.multiple\"\n          (select)=\"methods.modelChange($event)\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-picker>\n        <novo-chips\n          [source]=\"control.config\"\n          [type]=\"control.config.type\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [maxlength]=\"control?.maxlength\"\n          *ngIf=\"control.multiple && !control.config.columns\"\n          [closeOnSelect]=\"control.closeOnSelect\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-chips>\n        <novo-row-chips\n          [source]=\"control.config\"\n          [type]=\"control.config.type\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          *ngIf=\"control.multiple && control.config.columns\"\n          [closeOnSelect]=\"control.closeOnSelect\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-row-chips>\n      </div>\n    </ng-template>\n\n    <!--Novo Select-->\n    <ng-template novoTemplate=\"select\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-select\n          [options]=\"control.options\"\n          [headerConfig]=\"control.headerConfig\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-select>\n      </div>\n    </ng-template>\n\n    <!--Timezone -->\n    <ng-template novoTemplate=\"timezone\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-select\n          [options]=\"control.options\"\n          [headerConfig]=\"control.headerConfig\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          position=\"bottom\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-select>\n      </div>\n    </ng-template>\n\n    <!--Radio-->\n    <ng-template novoTemplate=\"radio\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\" class=\"novo-control-input-container\">\n        <novo-radio-group [name]=\"control.key\" [formControlName]=\"control.key\">\n          <novo-radio\n            *ngFor=\"let option of control.options\"\n            [value]=\"option.value\"\n            [label]=\"option.label\"\n            [checked]=\"option.value === form.value[control.key] || (form.value[control.key] && option.value === form.value[control.key].id)\"\n            [tooltip]=\"control.tooltip\"\n            [tooltipPosition]=\"control.tooltipPosition\"\n            [tooltipSize]=\"control?.tooltipSize\"\n            [tooltipPreline]=\"control?.tooltipPreline\"\n            [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n            [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n            [button]=\"!!option.icon\"\n            [icon]=\"option.icon\"\n            [color]=\"option.color\"\n            [theme]=\"!!option.icon && !option.label ? 'icon' : 'secondary'\"\n            [attr.data-automation-id]=\"control.key + '-' + (option?.label || option?.value)\"\n          ></novo-radio>\n        </novo-radio-group>\n      </div>\n    </ng-template>\n\n    <!--Time-->\n    <ng-template novoTemplate=\"time\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-time-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [military]=\"control.military\"\n        ></novo-time-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Native Input--->\n    <ng-template novoTemplate=\"native-input\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container novo-control-input-with-label\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <input\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n        />\n      </div>\n    </ng-template>\n\n    <!--Date-->\n    <ng-template novoTemplate=\"date\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control.tooltip\"\n        [tooltipPosition]=\"control.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-date-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [start]=\"control.startDate\"\n          [end]=\"control.endDate\"\n          [format]=\"control.dateFormat\"\n          [allowInvalidDate]=\"control.allowInvalidDate\"\n          [textMaskEnabled]=\"control.textMaskEnabled\"\n          [placeholder]=\"control.placeholder\"\n          [weekStart]=\"control.weekStart\"\n          [disabledDateMessage]=\"control.disabledDateMessage\"\n          (focusEvent)=\"methods.handleFocus($event)\"\n          (blurEvent)=\"methods.handleBlur($event)\"\n          (changeEvent)=\"methods.emitChange($event)\"\n        ></novo-date-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Date and Time-->\n    <ng-template novoTemplate=\"date-time\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control.tooltip\"\n        [tooltipPosition]=\"control.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-date-time-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [start]=\"control.startDate\"\n          [end]=\"control.endDate\"\n          [placeholder]=\"control.placeholder\"\n          [military]=\"control.military\"\n          [weekStart]=\"control.weekStart\"\n          (focusEvent)=\"methods.handleFocus($event)\"\n          (blurEvent)=\"methods.handleBlur($event)\"\n          (changeEvent)=\"methods.emitChange($event)\"\n        ></novo-date-time-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Address-->\n    <ng-template novoTemplate=\"address\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-address\n          [formControlName]=\"control.key\"\n          [config]=\"control?.config\"\n          [readOnly]=\"control?.readOnly\"\n          (change)=\"methods.handleAddressChange($event)\"\n          (focus)=\"methods.handleFocus($event.event, $event.field)\"\n          (blur)=\"methods.handleBlur($event.event, $event.field)\"\n          (validityChange)=\"methods.updateValidity()\"\n        ></novo-address>\n      </div>\n    </ng-template>\n\n    <!--Checkbox-->\n    <ng-template novoTemplate=\"checkbox\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-checkbox\n          [formControlName]=\"control?.key\"\n          [name]=\"control?.key\"\n          [label]=\"control?.checkboxLabel\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [layoutOptions]=\"control?.layoutOptions\"\n        ></novo-checkbox>\n      </div>\n    </ng-template>\n\n    <!--Checklist-->\n    <ng-template novoTemplate=\"checklist\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-check-list\n          [formControlName]=\"control.key\"\n          [name]=\"control.key\"\n          [options]=\"control?.options\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-check-list>\n      </div>\n    </ng-template>\n\n    <!--QuickNote-->\n    <ng-template novoTemplate=\"quick-note\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-quick-note\n          [formControlName]=\"control.key\"\n          [startupFocus]=\"control?.startupFocus\"\n          [placeholder]=\"control?.placeholder\"\n          [config]=\"control?.config\"\n          (change)=\"methods.modelChange($event)\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n        ></novo-quick-note>\n      </div>\n    </ng-template>\n  "
+                    template: "\n    <!---Readonly--->\n    <ng-template novoTemplate=\"read-only\" let-form=\"form\" let-control>\n      <div>{{ form.value[control.key] }}</div>\n    </ng-template>\n    <!--Textbox--->\n    <ng-template novoTemplate=\"textbox\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container novo-control-input-with-label\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <input\n          *ngIf=\"control?.type !== 'number' && control?.textMaskEnabled\"\n          [textMask]=\"control.maskOptions\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          autocomplete\n        />\n        <input\n          *ngIf=\"control?.type !== 'number' && !control?.textMaskEnabled\"\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          [maxlength]=\"control?.maxlength\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          autocomplete\n        />\n        <input\n          *ngIf=\"control?.type === 'number' && control?.subType !== 'percentage'\"\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (keydown)=\"methods.restrictKeys($event)\"\n          (input)=\"methods.emitChange($event)\"\n          [maxlength]=\"control?.maxlength\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          step=\"any\"\n          (mousewheel)=\"numberInput.blur()\"\n          #numberInput\n        />\n        <!-- the percentage input does not use formControlName like a normal reactive input because instead of\n          setting the floating point value directly, it is multiplied by 100 into a percentage value -->\n        <input\n          *ngIf=\"control?.type === 'number' && control?.subType === 'percentage'\"\n          [id]=\"control.key\"\n          [type]=\"control?.type\"\n          [placeholder]=\"control?.placeholder\"\n          (keydown)=\"methods.restrictKeys($event)\"\n          [value]=\"control?.percentValue\"\n          [disabled]=\"control?.readOnly\"\n          (input)=\"methods.handlePercentChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          step=\"any\"\n          (mousewheel)=\"percentInput.blur()\"\n          #percentInput\n        />\n        <label class=\"input-label\" *ngIf=\"control?.subType === 'currency'\">{{ control.currencyFormat }}</label>\n        <label class=\"input-label\" *ngIf=\"control?.subType === 'percentage'\">%</label>\n      </div>\n    </ng-template>\n\n    <!--Textarea--->\n    <ng-template novoTemplate=\"text-area\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        class=\"textarea-container\"\n        [formGroup]=\"form\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <textarea\n          [class.maxlength-error]=\"errors?.maxlength\"\n          [name]=\"control.key\"\n          [attr.id]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          autosize\n          (input)=\"methods.handleTextAreaInput($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [maxlength]=\"control?.maxlength\"\n        ></textarea>\n      </div>\n    </ng-template>\n\n    <!--Editor-->\n    <ng-template novoTemplate=\"editor\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-editor\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [startupFocus]=\"control.startupFocus\"\n          [minimal]=\"control.minimal\"\n          [fileBrowserImageUploadUrl]=\"control.fileBrowserImageUploadUrl\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [config]=\"control.config\"\n        ></novo-editor>\n      </div>\n    </ng-template>\n\n    <!--AceEditor-->\n    <ng-template novoTemplate=\"ace-editor\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-ace-editor\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n        ></novo-ace-editor>\n      </div>\n    </ng-template>\n\n    <!--HTML5 Select-->\n    <ng-template novoTemplate=\"native-select\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <select\n          [id]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        >\n          <option *ngIf=\"control.placeholder\" value=\"\" disabled selected hidden>{{ control.placeholder }}</option>\n          <option *ngFor=\"let opt of control.options\" [value]=\"opt.key\">{{ opt.value }}</option>\n        </select>\n      </div>\n    </ng-template>\n\n    <!--File-->\n    <ng-template novoTemplate=\"file\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-file-input\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [name]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [value]=\"control.value\"\n          [multiple]=\"control.multiple\"\n          [layoutOptions]=\"control.layoutOptions\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (edit)=\"methods.handleEdit($event)\"\n          (save)=\"methods.handleSave($event)\"\n          (delete)=\"methods.handleDelete($event)\"\n          (upload)=\"methods.handleUpload($event)\"\n        ></novo-file-input>\n      </div>\n    </ng-template>\n\n    <!--Tiles-->\n    <ng-template novoTemplate=\"tiles\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-tiles\n          [options]=\"control.options\"\n          [formControlName]=\"control.key\"\n          (onChange)=\"methods.modelChange($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [controlDisabled]=\"control.disabled\"\n        ></novo-tiles>\n      </div>\n    </ng-template>\n\n    <!--Picker-->\n    <ng-template novoTemplate=\"picker\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\" class=\"novo-control-input-container\">\n        <novo-picker\n          [config]=\"control.config\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [parentScrollSelector]=\"control.parentScrollSelector\"\n          *ngIf=\"!control.multiple\"\n          (select)=\"methods.modelChange($event)\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-picker>\n        <novo-chips\n          [source]=\"control.config\"\n          [type]=\"control.config.type\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [maxlength]=\"control?.maxlength\"\n          *ngIf=\"control.multiple && !control.config.columns\"\n          [closeOnSelect]=\"control.closeOnSelect\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-chips>\n        <novo-row-chips\n          [source]=\"control.config\"\n          [type]=\"control.config.type\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          *ngIf=\"control.multiple && control.config.columns\"\n          [closeOnSelect]=\"control.closeOnSelect\"\n          (changed)=\"methods.modelChangeWithRaw($event)\"\n          (typing)=\"methods.handleTyping($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-row-chips>\n      </div>\n    </ng-template>\n\n    <!--Novo Select-->\n    <ng-template novoTemplate=\"select\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-select\n          [options]=\"control.options\"\n          [headerConfig]=\"control.headerConfig\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-select>\n      </div>\n    </ng-template>\n\n    <!--Timezone -->\n    <ng-template novoTemplate=\"timezone\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-select\n          [options]=\"control.options\"\n          [headerConfig]=\"control.headerConfig\"\n          [placeholder]=\"control.placeholder\"\n          [formControlName]=\"control.key\"\n          [tooltip]=\"control.tooltip\"\n          [tooltipPosition]=\"control.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          position=\"bottom\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-select>\n      </div>\n    </ng-template>\n\n    <!--Radio-->\n    <ng-template novoTemplate=\"radio\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\" class=\"novo-control-input-container\">\n        <novo-radio-group [name]=\"control.key\" [formControlName]=\"control.key\">\n          <novo-radio\n            *ngFor=\"let option of control.options\"\n            [value]=\"option.value\"\n            [label]=\"option.label\"\n            [checked]=\"option.value === form.value[control.key] || (form.value[control.key] && option.value === form.value[control.key].id)\"\n            [tooltip]=\"control.tooltip\"\n            [tooltipPosition]=\"control.tooltipPosition\"\n            [tooltipSize]=\"control?.tooltipSize\"\n            [tooltipPreline]=\"control?.tooltipPreline\"\n            [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n            [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n            [button]=\"!!option.icon\"\n            [icon]=\"option.icon\"\n            [color]=\"option.color\"\n            [theme]=\"!!option.icon && !option.label ? 'icon' : 'secondary'\"\n            [attr.data-automation-id]=\"control.key + '-' + (option?.label || option?.value)\"\n          ></novo-radio>\n        </novo-radio-group>\n      </div>\n    </ng-template>\n\n    <!--Time-->\n    <ng-template novoTemplate=\"time\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-time-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [placeholder]=\"control.placeholder\"\n          [military]=\"control.military\"\n        ></novo-time-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Native Input--->\n    <ng-template novoTemplate=\"native-input\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container novo-control-input-with-label\"\n        [tooltip]=\"control?.tooltip\"\n        [tooltipPosition]=\"control?.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <input\n          [formControlName]=\"control.key\"\n          [id]=\"control.key\"\n          [type]=\"control.type\"\n          [placeholder]=\"control?.placeholder\"\n          (input)=\"methods.emitChange($event)\"\n          (focus)=\"methods.handleFocus($event)\"\n          (blur)=\"methods.handleBlur($event)\"\n        />\n      </div>\n    </ng-template>\n\n    <!--Date-->\n    <ng-template novoTemplate=\"date\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control.tooltip\"\n        [tooltipPosition]=\"control.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-date-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [start]=\"control.startDate\"\n          [end]=\"control.endDate\"\n          [format]=\"control.dateFormat\"\n          [allowInvalidDate]=\"control.allowInvalidDate\"\n          [textMaskEnabled]=\"control.textMaskEnabled\"\n          [placeholder]=\"control.placeholder\"\n          [weekStart]=\"control.weekStart\"\n          [disabledDateMessage]=\"control.disabledDateMessage\"\n          (focusEvent)=\"methods.handleFocus($event)\"\n          (blurEvent)=\"methods.handleBlur($event)\"\n          (changeEvent)=\"methods.emitChange($event)\"\n        ></novo-date-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Date and Time-->\n    <ng-template novoTemplate=\"date-time\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div\n        [formGroup]=\"form\"\n        class=\"novo-control-input-container\"\n        [tooltip]=\"control.tooltip\"\n        [tooltipPosition]=\"control.tooltipPosition\"\n        [tooltipSize]=\"control?.tooltipSize\"\n        [tooltipPreline]=\"control?.tooltipPreline\"\n        [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n        [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n      >\n        <novo-date-time-picker-input\n          [attr.id]=\"control.key\"\n          [name]=\"control.key\"\n          [formControlName]=\"control.key\"\n          [start]=\"control.startDate\"\n          [end]=\"control.endDate\"\n          [placeholder]=\"control.placeholder\"\n          [military]=\"control.military\"\n          [weekStart]=\"control.weekStart\"\n          (focusEvent)=\"methods.handleFocus($event)\"\n          (blurEvent)=\"methods.handleBlur($event)\"\n          (changeEvent)=\"methods.emitChange($event)\"\n        ></novo-date-time-picker-input>\n      </div>\n    </ng-template>\n\n    <!--Address-->\n    <ng-template novoTemplate=\"address\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-address\n          [formControlName]=\"control.key\"\n          [config]=\"control?.config\"\n          [readOnly]=\"control?.readOnly\"\n          (change)=\"methods.handleAddressChange($event)\"\n          (focus)=\"methods.handleFocus($event.event, $event.field)\"\n          (blur)=\"methods.handleBlur($event.event, $event.field)\"\n          (validityChange)=\"methods.updateValidity()\"\n        ></novo-address>\n      </div>\n    </ng-template>\n\n    <!--Checkbox-->\n    <ng-template novoTemplate=\"checkbox\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-checkbox\n          [formControlName]=\"control?.key\"\n          [name]=\"control?.key\"\n          [label]=\"control?.checkboxLabel\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [layoutOptions]=\"control?.layoutOptions\"\n        ></novo-checkbox>\n      </div>\n    </ng-template>\n\n    <!--Switch-->\n    <ng-template novoTemplate=\"switch\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-switch\n          [formControlName]=\"control?.key\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n        ></novo-switch>\n      </div>\n    </ng-template>\n\n    <!--Checklist-->\n    <ng-template novoTemplate=\"checklist\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-check-list\n          [formControlName]=\"control.key\"\n          [name]=\"control.key\"\n          [options]=\"control?.options\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          (onSelect)=\"methods.modelChange($event)\"\n        ></novo-check-list>\n      </div>\n    </ng-template>\n\n    <!--QuickNote-->\n    <ng-template novoTemplate=\"quick-note\" let-control let-form=\"form\" let-errors=\"errors\" let-methods=\"methods\">\n      <div [formGroup]=\"form\">\n        <novo-quick-note\n          [formControlName]=\"control.key\"\n          [startupFocus]=\"control?.startupFocus\"\n          [placeholder]=\"control?.placeholder\"\n          [config]=\"control?.config\"\n          (change)=\"methods.modelChange($event)\"\n          [tooltip]=\"control?.tooltip\"\n          [tooltipPosition]=\"control?.tooltipPosition\"\n          [tooltipSize]=\"control?.tooltipSize\"\n          [removeTooltipArrow]=\"control?.removeTooltipArrow\"\n          [tooltipAutoPosition]=\"control?.tooltipAutoPosition\"\n          [tooltipPreline]=\"control?.tooltipPreline\"\n        ></novo-quick-note>\n      </div>\n    </ng-template>\n  "
                 },] }
     ];
     NovoControlTemplates.ctorParameters = function () { return [
@@ -45677,6 +45943,7 @@
                         NovoCheckboxModule,
                         NovoIconModule,
                         NovoRadioModule,
+                        NovoSwitchModule,
                     ],
                     declarations: [
                         NovoAutoSize,
@@ -45740,6 +46007,9 @@
                 _this._changeDetectorRef.markForCheck();
             });
         };
+        NovoLayoutContent.prototype.getHostElement = function () {
+            return this.elementRef.nativeElement;
+        };
         return NovoLayoutContent;
     }(i1.CdkScrollable));
     NovoLayoutContent.decorators = [
@@ -46719,7 +46989,7 @@
         { type: i0.Component, args: [{
                     selector: 'menu-content',
                     template: "<div class=\"menu-container novo-menu\" [ngClass]=\"menuClass\" tabindex=\"0\">\n    <ul #menu class=\"menu\" style=\"position: static; float: none;\" tabindex=\"0\">\n      <ng-container *ngFor=\"let menuItem of menuItems; let i = index\">\n        <ng-template [ngTemplateOutlet]=\"menuItem.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <!-- <novo-icon class=\"sub-menu-caret\" suffix *ngIf=\"!!menuItem.subMenu\" size=\"small\" color=\"ash\">expand</novo-icon> -->\n      </ng-container>\n    </ul>\n  </div> ",
-                    styles: [":host .passive{clear:both;display:block;font-weight:400;padding:3px 20px;white-space:nowrap}:host .menu-container{width:180px}:host .menu-container .menu{-webkit-padding-start:0!important;background-color:var(--background-bright);box-shadow:0 -1px 3px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);cursor:default;list-style:none;padding-inline-start:0!important}:host .menu-container .menu :hover{background:rgba(74,137,220,.1);color:#3d464d}:host .menu-container .menu :active{background:rgba(74,137,220,.4)}:host .menu-container .menu .menu-item-container{align-items:center;display:flex;position:relative}:host .menu-container .menu .menu-item-container .sub-menu-caret{position:absolute;right:.5rem}:host .menu-container .menu .menu-item{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline;display:flex;flex:1;font-size:var(--font-size-text);font-weight:400;gap:1rem;margin:0;padding:1rem 1rem 1rem 1.25rem;transition:.2s ease-out}:host .menu-container .menu .menu-item.text-nowrap{white-space:nowrap}:host .menu-container .menu .menu-item.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .menu-container .menu .menu-item.text-size-default{font-size:inherit}:host .menu-container .menu .menu-item.text-size-body{font-size:1.2rem}:host .menu-container .menu .menu-item.text-size-xs{font-size:.8rem}:host .menu-container .menu .menu-item.text-size-sm{font-size:1rem}:host .menu-container .menu .menu-item.text-size-md{font-size:1.2rem}:host .menu-container .menu .menu-item.text-size-lg{font-size:1.6rem}:host .menu-container .menu .menu-item.text-size-xl{font-size:2rem}:host .menu-container .menu .menu-item.text-size-2xl{font-size:2.6rem}:host .menu-container .menu .menu-item.text-size-3xl{font-size:3.2rem}:host .menu-container .menu .menu-item.text-size-smaller{font-size:.8em}:host .menu-container .menu .menu-item.text-size-larger{font-size:1.2em}:host .menu-container .menu .menu-item.text-color-black{color:#000}:host .menu-container .menu .menu-item.text-color-white{color:#fff}:host .menu-container .menu .menu-item.text-color-gray,:host .menu-container .menu .menu-item.text-color-grey{color:#9e9e9e}:host .menu-container .menu .menu-item.text-color-bright,:host .menu-container .menu .menu-item.text-color-offWhite{color:#f7f7f7}:host .menu-container .menu .menu-item.text-color-light{color:#dbdbdb}:host .menu-container .menu .menu-item.text-color-neutral{color:#4f5361}:host .menu-container .menu .menu-item.text-color-dark{color:#3d464d}:host .menu-container .menu .menu-item.text-color-orange{color:#ff6900}:host .menu-container .menu .menu-item.text-color-navigation{color:#202945}:host .menu-container .menu .menu-item.text-color-skyBlue{color:#009bdf}:host .menu-container .menu .menu-item.text-color-steel{color:#5b6770}:host .menu-container .menu .menu-item.text-color-metal{color:#637893}:host .menu-container .menu .menu-item.text-color-sand{color:#f4f4f4}:host .menu-container .menu .menu-item.text-color-silver{color:#e2e2e2}:host .menu-container .menu .menu-item.text-color-stone{color:#bebebe}:host .menu-container .menu .menu-item.text-color-ash{color:#a0a0a0}:host .menu-container .menu .menu-item.text-color-slate{color:#707070}:host .menu-container .menu .menu-item.text-color-onyx{color:#526980}:host .menu-container .menu .menu-item.text-color-charcoal{color:#282828}:host .menu-container .menu .menu-item.text-color-moonlight{color:#1a242f}:host .menu-container .menu .menu-item.text-color-midnight{color:#202945}:host .menu-container .menu .menu-item.text-color-darkness{color:#161f27}:host .menu-container .menu .menu-item.text-color-navy{color:#0d2d42}:host .menu-container .menu .menu-item.text-color-aqua{color:#3bafda}:host .menu-container .menu .menu-item.text-color-ocean{color:#4a89dc}:host .menu-container .menu .menu-item.text-color-mint{color:#37bc9b}:host .menu-container .menu .menu-item.text-color-grass{color:#8cc152}:host .menu-container .menu .menu-item.text-color-sunflower{color:#f6b042}:host .menu-container .menu .menu-item.text-color-bittersweet{color:#eb6845}:host .menu-container .menu .menu-item.text-color-grapefruit{color:#da4453}:host .menu-container .menu .menu-item.text-color-carnation{color:#d770ad}:host .menu-container .menu .menu-item.text-color-lavender{color:#967adc}:host .menu-container .menu .menu-item.text-color-mountain{color:#9678b6}:host .menu-container .menu .menu-item.text-color-info,:host .menu-container .menu .menu-item.text-color-positive{color:#4a89dc}:host .menu-container .menu .menu-item.text-color-success{color:#8cc152}:host .menu-container .menu .menu-item.text-color-danger,:host .menu-container .menu .menu-item.text-color-error,:host .menu-container .menu .menu-item.text-color-negative{color:#da4453}:host .menu-container .menu .menu-item.text-color-warning{color:#f6b042}:host .menu-container .menu .menu-item.text-color-empty{color:#cccdcc}:host .menu-container .menu .menu-item.text-color-disabled{color:#bebebe}:host .menu-container .menu .menu-item.text-color-background{color:#f7f7f7}:host .menu-container .menu .menu-item.text-color-backgroundDark{color:#e2e2e2}:host .menu-container .menu .menu-item.text-color-presentation{color:#5b6770}:host .menu-container .menu .menu-item.text-color-bullhorn{color:#ff6900}:host .menu-container .menu .menu-item.text-color-pulse{color:#3bafda}:host .menu-container .menu .menu-item.text-color-company{color:#39d}:host .menu-container .menu .menu-item.text-color-candidate{color:#4b7}:host .menu-container .menu .menu-item.text-color-lead{color:#a69}:host .menu-container .menu .menu-item.text-color-contact{color:#fa4}:host .menu-container .menu .menu-item.text-color-opportunity{color:#625}:host .menu-container .menu .menu-item.text-color-job{color:#b56}:host .menu-container .menu .menu-item.text-color-submission{color:#a9adbb}:host .menu-container .menu .menu-item.text-color-sendout{color:#747884}:host .menu-container .menu .menu-item.text-color-placement{color:#0b344f}:host .menu-container .menu .menu-item.text-color-note{color:#747884}:host .menu-container .menu .menu-item.text-color-contract{color:#454ea0}:host .menu-container .menu .menu-item.text-color-billableCharge,:host .menu-container .menu .menu-item.text-color-corporateUser,:host .menu-container .menu .menu-item.text-color-credential,:host .menu-container .menu .menu-item.text-color-distributionList,:host .menu-container .menu .menu-item.text-color-earnCode,:host .menu-container .menu .menu-item.text-color-invoiceStatement,:host .menu-container .menu .menu-item.text-color-jobCode,:host .menu-container .menu .menu-item.text-color-payableCharge,:host .menu-container .menu .menu-item.text-color-person,:host .menu-container .menu .menu-item.text-color-user{color:#696d79}:host .menu-container .menu .menu-item.margin-before{margin-top:.4rem}:host .menu-container .menu .menu-item.margin-after{margin-bottom:.8rem}:host .menu-container .menu .menu-item.text-length-small{max-width:40ch}:host .menu-container .menu .menu-item.text-length-medium{max-width:55ch}:host .menu-container .menu .menu-item.text-length-large{max-width:70ch}:host .menu-container .menu .menu-item.text-weight-hairline{font-weight:100}:host .menu-container .menu .menu-item.text-weight-thin{font-weight:200}:host .menu-container .menu .menu-item.text-weight-light{font-weight:300}:host .menu-container .menu .menu-item.text-weight-normal{font-weight:400}:host .menu-container .menu .menu-item.text-weight-medium{font-weight:500}:host .menu-container .menu .menu-item.text-weight-semibold{font-weight:600}:host .menu-container .menu .menu-item.text-weight-bold{font-weight:700}:host .menu-container .menu .menu-item.text-weight-extrabold{font-weight:800}:host .menu-container .menu .menu-item.text-weight-heavy{font-weight:900}:host .menu-container .menu .menu-item.text-weight-lighter{font-weight:lighter}:host .menu-container .menu .menu-item.text-weight-bolder{font-weight:bolder}:host .menu-container .menu .divider{background:#e2e2e2;height:1px;order:none}:host .menu-container .menu a.disabled{color:#bebebe;cursor:not-allowed}"]
+                    styles: [":host .passive{clear:both;display:block;font-weight:400;padding:3px 20px;white-space:nowrap}:host .menu-container{width:180px}:host .menu-container .menu{-webkit-padding-start:0!important;background-color:var(--background-bright);box-shadow:0 -1px 3px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);cursor:default;list-style:none;padding-inline-start:0!important}:host .menu-container .menu :hover{background:rgba(74,137,220,.1);color:#3d464d}:host .menu-container .menu :active{background:rgba(74,137,220,.4)}:host .menu-container .menu .menu-item-container{align-items:center;display:flex;position:relative}:host .menu-container .menu .menu-item-container .sub-menu-caret{position:absolute;right:.5rem}:host .menu-container .menu .menu-item{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline;display:flex;flex:1;font-size:var(--font-size-text);font-weight:400;gap:1rem;margin:0;padding:1rem 1rem 1rem 1.25rem;transition:.2s ease-out;transition-property:color,opacity;vertical-align:middle}:host .menu-container .menu .menu-item.text-nowrap{white-space:nowrap}:host .menu-container .menu .menu-item.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .menu-container .menu .menu-item.text-size-default{font-size:inherit}:host .menu-container .menu .menu-item.text-size-body{font-size:1.3rem}:host .menu-container .menu .menu-item.text-size-xs{font-size:1rem}:host .menu-container .menu .menu-item.text-size-sm{font-size:1.2rem}:host .menu-container .menu .menu-item.text-size-md{font-size:1.3rem}:host .menu-container .menu .menu-item.text-size-lg{font-size:1.6rem}:host .menu-container .menu .menu-item.text-size-xl{font-size:2rem}:host .menu-container .menu .menu-item.text-size-2xl{font-size:2.6rem}:host .menu-container .menu .menu-item.text-size-3xl{font-size:3.2rem}:host .menu-container .menu .menu-item.text-size-smaller{font-size:.8em}:host .menu-container .menu .menu-item.text-size-larger{font-size:1.2em}:host .menu-container .menu .menu-item.text-color-black{color:#000}:host .menu-container .menu .menu-item.text-color-white{color:#fff}:host .menu-container .menu .menu-item.text-color-gray,:host .menu-container .menu .menu-item.text-color-grey{color:#9e9e9e}:host .menu-container .menu .menu-item.text-color-bright,:host .menu-container .menu .menu-item.text-color-offWhite{color:#f7f7f7}:host .menu-container .menu .menu-item.text-color-light{color:#dbdbdb}:host .menu-container .menu .menu-item.text-color-neutral{color:#4f5361}:host .menu-container .menu .menu-item.text-color-dark{color:#3d464d}:host .menu-container .menu .menu-item.text-color-orange{color:#ff6900}:host .menu-container .menu .menu-item.text-color-navigation{color:#202945}:host .menu-container .menu .menu-item.text-color-skyBlue{color:#009bdf}:host .menu-container .menu .menu-item.text-color-steel{color:#5b6770}:host .menu-container .menu .menu-item.text-color-metal{color:#637893}:host .menu-container .menu .menu-item.text-color-sand{color:#f4f4f4}:host .menu-container .menu .menu-item.text-color-silver{color:#e2e2e2}:host .menu-container .menu .menu-item.text-color-stone{color:#bebebe}:host .menu-container .menu .menu-item.text-color-ash{color:#a0a0a0}:host .menu-container .menu .menu-item.text-color-slate{color:#707070}:host .menu-container .menu .menu-item.text-color-onyx{color:#526980}:host .menu-container .menu .menu-item.text-color-charcoal{color:#282828}:host .menu-container .menu .menu-item.text-color-moonlight{color:#1a242f}:host .menu-container .menu .menu-item.text-color-midnight{color:#202945}:host .menu-container .menu .menu-item.text-color-darkness{color:#161f27}:host .menu-container .menu .menu-item.text-color-navy{color:#0d2d42}:host .menu-container .menu .menu-item.text-color-aqua{color:#3bafda}:host .menu-container .menu .menu-item.text-color-ocean{color:#4a89dc}:host .menu-container .menu .menu-item.text-color-mint{color:#37bc9b}:host .menu-container .menu .menu-item.text-color-grass{color:#8cc152}:host .menu-container .menu .menu-item.text-color-sunflower{color:#f6b042}:host .menu-container .menu .menu-item.text-color-bittersweet{color:#eb6845}:host .menu-container .menu .menu-item.text-color-grapefruit{color:#da4453}:host .menu-container .menu .menu-item.text-color-carnation{color:#d770ad}:host .menu-container .menu .menu-item.text-color-lavender{color:#967adc}:host .menu-container .menu .menu-item.text-color-mountain{color:#9678b6}:host .menu-container .menu .menu-item.text-color-info,:host .menu-container .menu .menu-item.text-color-positive{color:#4a89dc}:host .menu-container .menu .menu-item.text-color-success{color:#8cc152}:host .menu-container .menu .menu-item.text-color-danger,:host .menu-container .menu .menu-item.text-color-error,:host .menu-container .menu .menu-item.text-color-negative{color:#da4453}:host .menu-container .menu .menu-item.text-color-warning{color:#f6b042}:host .menu-container .menu .menu-item.text-color-empty{color:#cccdcc}:host .menu-container .menu .menu-item.text-color-disabled{color:#bebebe}:host .menu-container .menu .menu-item.text-color-background{color:#f7f7f7}:host .menu-container .menu .menu-item.text-color-backgroundDark{color:#e2e2e2}:host .menu-container .menu .menu-item.text-color-presentation{color:#5b6770}:host .menu-container .menu .menu-item.text-color-bullhorn{color:#ff6900}:host .menu-container .menu .menu-item.text-color-pulse{color:#3bafda}:host .menu-container .menu .menu-item.text-color-company{color:#39d}:host .menu-container .menu .menu-item.text-color-candidate{color:#4b7}:host .menu-container .menu .menu-item.text-color-lead{color:#a69}:host .menu-container .menu .menu-item.text-color-contact{color:#fa4}:host .menu-container .menu .menu-item.text-color-opportunity{color:#625}:host .menu-container .menu .menu-item.text-color-job{color:#b56}:host .menu-container .menu .menu-item.text-color-submission{color:#a9adbb}:host .menu-container .menu .menu-item.text-color-sendout{color:#747884}:host .menu-container .menu .menu-item.text-color-placement{color:#0b344f}:host .menu-container .menu .menu-item.text-color-note{color:#747884}:host .menu-container .menu .menu-item.text-color-contract{color:#454ea0}:host .menu-container .menu .menu-item.text-color-billableCharge,:host .menu-container .menu .menu-item.text-color-corporateUser,:host .menu-container .menu .menu-item.text-color-credential,:host .menu-container .menu .menu-item.text-color-distributionList,:host .menu-container .menu .menu-item.text-color-earnCode,:host .menu-container .menu .menu-item.text-color-invoiceStatement,:host .menu-container .menu .menu-item.text-color-jobCode,:host .menu-container .menu .menu-item.text-color-payableCharge,:host .menu-container .menu .menu-item.text-color-person,:host .menu-container .menu .menu-item.text-color-user{color:#696d79}:host .menu-container .menu .menu-item.margin-before{margin-top:.4rem}:host .menu-container .menu .menu-item.margin-after{margin-bottom:.8rem}:host .menu-container .menu .menu-item.text-length-small{max-width:40ch}:host .menu-container .menu .menu-item.text-length-medium{max-width:55ch}:host .menu-container .menu .menu-item.text-length-large{max-width:70ch}:host .menu-container .menu .menu-item.text-weight-hairline{font-weight:100}:host .menu-container .menu .menu-item.text-weight-thin{font-weight:200}:host .menu-container .menu .menu-item.text-weight-light{font-weight:300}:host .menu-container .menu .menu-item.text-weight-normal{font-weight:400}:host .menu-container .menu .menu-item.text-weight-medium{font-weight:500}:host .menu-container .menu .menu-item.text-weight-semibold{font-weight:600}:host .menu-container .menu .menu-item.text-weight-bold{font-weight:700}:host .menu-container .menu .menu-item.text-weight-extrabold{font-weight:800}:host .menu-container .menu .menu-item.text-weight-heavy{font-weight:900}:host .menu-container .menu .menu-item.text-weight-lighter{font-weight:lighter}:host .menu-container .menu .menu-item.text-weight-bolder{font-weight:bolder}:host .menu-container .menu .divider{background:#e2e2e2;height:1px;order:none}:host .menu-container .menu a.disabled{color:#bebebe;cursor:not-allowed}"]
                 },] }
     ];
     MenuContentComponent.ctorParameters = function () { return []; };
@@ -52098,7 +52368,6 @@
             }
         };
         TableFilter.prototype.onClick = function (event) {
-            console.log('hmmm');
             Helpers.swallowEvent(event);
         };
         return TableFilter;
@@ -52279,7 +52548,6 @@
         }
         ThSortable.prototype.onToggleSort = function (event) {
             if (event) {
-                console.log('sorting');
                 // event.preventDefault();
             }
             if (this.config && this.column && this.config.sorting !== false && this.column.sorting !== false) {
@@ -52318,7 +52586,7 @@
     }());
     NovoTableExtrasModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, forms.FormsModule, NovoSelectModule, NovoDropdownModule, NovoButtonModule],
+                    imports: [common.CommonModule, forms.FormsModule, NovoSelectModule, NovoDropdownModule, NovoButtonModule, NovoCommonModule],
                     declarations: [
                         NovoTableHeaderElement,
                         NovoTableFooterElement,
@@ -52528,6 +52796,7 @@
         });
         NovoTableElement.prototype.onDropdownToggled = function (event, column) {
             this.toggledDropdownMap[column] = event;
+            this.cdr.markForCheck();
         };
         NovoTableElement.prototype.focusInput = function () {
             if (this.filterInputs && this.filterInputs.length) {
@@ -52582,7 +52851,6 @@
             return tableFormRows.controls[i];
         };
         NovoTableElement.prototype.onFilterClick = function (column, filter) {
-            console.log('clicking filter', filter);
             if (filter.range && !column.calendarShow) {
                 column.calenderShow = true;
                 return;
@@ -53173,7 +53441,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=\"right\"\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\" 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  "
                 },] }
     ];
     NovoTableElement.ctorParameters = function () { return [
@@ -54687,6 +54955,7 @@
     exports.SkillsSpecialtyPickerResults = SkillsSpecialtyPickerResults;
     exports.StaticActivityTableService = StaticActivityTableService;
     exports.StaticDataTableService = StaticDataTableService;
+    exports.SwitchControl = SwitchControl;
     exports.TIMEFORMAT_VALUE_ACCESSOR = TIMEFORMAT_VALUE_ACCESSOR;
     exports.TableCell = TableCell;
     exports.TableFilter = TableFilter;