npm - novo-elements - Versions diffs - 6.0.0-next.1 → 6.0.0-next.5 - Mend

novo-elements 6.0.0-next.1 → 6.0.0-next.5

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

Files changed (334) hide show

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('brace/index'), require('brace/mode/javascript'), require('brace/theme/chrome'), require('brace/ext/language_tools.js'), require('@angular/common'), require('date-fns'), require('@angular/cdk/coercion'), require('timezone-support'), require('timezone-support/dist/parse-format'), require('rxjs'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('rxjs/operators'), require('@angular/platform-browser'), require('@angular/router'), require('@angular/platform-browser/animations'), require('@angular/cdk/keycodes'), require('@angular/cdk/scrolling'), require('@angular/cdk/a11y'), require('@angular/cdk/observers'), require('angular2-text-mask'), require('@angular/cdk/platform'), require('@angular/cdk/bidi'), require('@angular/cdk/collections'), require('angular-imask'), require('imask'), require('@angular/cdk/text-field'), require('@angular/cdk/table'), require('text-mask-addons/dist/createAutoCorrectedDatePipe'), require('@bullhorn/dragula'), require('@angular/cdk/accordion'), require('@angular/common/http'), require('@angular/cdk/stepper')) :
-    typeof define === 'function' && define.amd ? define('novo-elements', ['exports', '@angular/core', '@angular/forms', 'brace/index', 'brace/mode/javascript', 'brace/theme/chrome', 'brace/ext/language_tools.js', '@angular/common', 'date-fns', '@angular/cdk/coercion', 'timezone-support', 'timezone-support/dist/parse-format', 'rxjs', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', 'rxjs/operators', '@angular/platform-browser', '@angular/router', '@angular/platform-browser/animations', '@angular/cdk/keycodes', '@angular/cdk/scrolling', '@angular/cdk/a11y', '@angular/cdk/observers', 'angular2-text-mask', '@angular/cdk/platform', '@angular/cdk/bidi', '@angular/cdk/collections', 'angular-imask', 'imask', '@angular/cdk/text-field', '@angular/cdk/table', 'text-mask-addons/dist/createAutoCorrectedDatePipe', '@bullhorn/dragula', '@angular/cdk/accordion', '@angular/common/http', '@angular/cdk/stepper'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['novo-elements'] = {}, global.ng.core, global.ng.forms, null, null, null, null, global.ng.common, global.dateFns, global.ng.cdk.coercion, global.timezoneSupport, global.parseFormat, global.rxjs, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.rxjs.operators, global.ng.platformBrowser, global.ng.router, global.ng.platformBrowser.animations, global.ng.cdk.keycodes, global.ng.cdk.scrolling, global.ng.cdk.a11y, global.ng.cdk.observers, global.angular2TextMask, global.ng.cdk.platform, global.ng.cdk.bidi, global.ng.cdk.collections, global.angularImask, global.IMask, global.ng.cdk.textField, global.ng.cdk.table, global.createAutoCorrectedDatePipe, global.dragulaImported, global.ng.cdk.accordion, global.ng.common.http, global.ng.cdk.stepper));
-}(this, (function (exports, i0, forms, index, javascript, chrome, language_tools_js, common, dateFns, coercion, timezoneSupport, parseFormat, rxjs, animations, i1, portal, operators, platformBrowser, router, animations$1, keycodes, scrolling, a11y, observers, angular2TextMask, platform, bidi, collections, angularImask, IMask, textField, table, createAutoCorrectedDatePipe, dragulaImported, accordion, http, stepper) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('brace/index'), require('brace/mode/javascript'), require('brace/theme/chrome'), require('brace/ext/language_tools.js'), require('@angular/common'), require('date-fns'), require('@angular/cdk/coercion'), require('timezone-support'), require('timezone-support/dist/parse-format'), require('rxjs'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('rxjs/operators'), require('@angular/platform-browser'), require('@angular/router'), require('novo-design-tokens'), require('@angular/platform-browser/animations'), require('@angular/cdk/keycodes'), require('@angular/cdk/scrolling'), require('@angular/cdk/a11y'), require('@angular/cdk/observers'), require('angular2-text-mask'), require('@angular/cdk/platform'), require('@angular/cdk/bidi'), require('@angular/cdk/collections'), require('angular-imask'), require('imask'), require('@angular/cdk/text-field'), require('@angular/cdk/table'), require('text-mask-addons/dist/createAutoCorrectedDatePipe'), require('@bullhorn/dragula'), require('@angular/cdk/accordion'), require('@angular/common/http'), require('@angular/cdk/stepper')) :
+    typeof define === 'function' && define.amd ? define('novo-elements', ['exports', '@angular/core', '@angular/forms', 'brace/index', 'brace/mode/javascript', 'brace/theme/chrome', 'brace/ext/language_tools.js', '@angular/common', 'date-fns', '@angular/cdk/coercion', 'timezone-support', 'timezone-support/dist/parse-format', 'rxjs', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', 'rxjs/operators', '@angular/platform-browser', '@angular/router', 'novo-design-tokens', '@angular/platform-browser/animations', '@angular/cdk/keycodes', '@angular/cdk/scrolling', '@angular/cdk/a11y', '@angular/cdk/observers', 'angular2-text-mask', '@angular/cdk/platform', '@angular/cdk/bidi', '@angular/cdk/collections', 'angular-imask', 'imask', '@angular/cdk/text-field', '@angular/cdk/table', 'text-mask-addons/dist/createAutoCorrectedDatePipe', '@bullhorn/dragula', '@angular/cdk/accordion', '@angular/common/http', '@angular/cdk/stepper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['novo-elements'] = {}, global.ng.core, global.ng.forms, null, null, null, null, global.ng.common, global.dateFns, global.ng.cdk.coercion, global.timezoneSupport, global.parseFormat, global.rxjs, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.rxjs.operators, global.ng.platformBrowser, global.ng.router, global.tokens, global.ng.platformBrowser.animations, global.ng.cdk.keycodes, global.ng.cdk.scrolling, global.ng.cdk.a11y, global.ng.cdk.observers, global.angular2TextMask, global.ng.cdk.platform, global.ng.cdk.bidi, global.ng.cdk.collections, global.angularImask, global.IMask, global.ng.cdk.textField, global.ng.cdk.table, global.createAutoCorrectedDatePipe, global.dragulaImported, global.ng.cdk.accordion, global.ng.common.http, global.ng.cdk.stepper));
+}(this, (function (exports, i0, forms, index, javascript, chrome, language_tools_js, common, dateFns, coercion, timezoneSupport, parseFormat, rxjs, animations, i1, portal, operators, platformBrowser, router, tokens, animations$1, keycodes, scrolling, a11y, observers, angular2TextMask, platform, bidi, collections, angularImask, IMask, textField, table, createAutoCorrectedDatePipe, dragulaImported, accordion, http, stepper) { 'use strict';
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20251,6 +20251,7 @@
                 _this.isEmpty = config.isEmpty;
             }
             _this.weekStart = config.weekStart || 0;
+            _this.disabledDateMessage = config.disabledDateMessage;
             return _this;
         }
         return BaseControl;
@@ -20806,6 +20807,7 @@
             _this.tipWell = control.tipWell;
             _this.customControlConfig = control.customControlConfig;
             _this.warning = control.warning;
+            _this.disabledDateMessage = control.disabledDateMessage;
             // Reactive Form, need to enable/disable, can't bind to [disabled]
             if (_this.readOnly) {
                 _this.disable();
@@ -20966,6 +20968,7 @@
             this.clearAllNormalCase = 'Clear All';
             this.clearSort = 'Clear Sort';
             this.clearFilter = 'Clear Filter';
+            this.clearSelected = 'Clear Selected';
             this.today = 'Today';
             this.now = 'Now';
             this.isRequired = 'is required';
@@ -21981,7 +21984,7 @@
             return key.indexOf('customEncrypted') > -1;
         };
         FormUtils.prototype.getControlForField = function (field, http, config, overrides, forTable, fieldData) {
-            var e_1, _a;
+            var e_1, _b;
             if (forTable === void 0) { forTable = false; }
             // TODO: if field.type overrides `determineInputType` we should use it in that method or use this method
             // TODO: (cont.) as the setter of the field argument
@@ -22020,7 +22023,7 @@
                 closeOnSelect: field.closeOnSelect,
                 layoutOptions: field.layoutOptions,
             };
-            this.inferStartDate(controlConfig, field);
+            this.inferDateRange(controlConfig, field);
             // TODO: getControlOptions should always return the correct format
             var optionsConfig = this.getControlOptions(field, http, config, fieldData);
             if (Array.isArray(optionsConfig) && !(type === 'chips' || type === 'picker')) {
@@ -22174,8 +22177,8 @@
                     controlConfig.config.readOnly = controlConfig.readOnly;
                     if (field.fields && field.fields.length) {
                         try {
-                            for (var _b = __values(field.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                var subfield = _c.value;
+                            for (var _c = __values(field.fields), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                var subfield = _d.value;
                                 controlConfig.config[subfield.name] = {
                                     required: !!subfield.required,
                                     hidden: !!subfield.readOnly,
@@ -22213,7 +22216,7 @@
                         catch (e_1_1) { e_1 = { error: e_1_1 }; }
                         finally {
                             try {
-                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                                if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
@@ -22341,7 +22344,7 @@
             return (data && data[field.name]) || null;
         };
         FormUtils.prototype.getEmbeddedFieldData = function (field, data) {
-            var _a = __read(field.name.split('.'), 2), parentFieldName = _a[0], fieldName = _a[1];
+            var _b = __read(field.name.split('.'), 2), parentFieldName = _b[0], fieldName = _b[1];
             return (data && data[parentFieldName] && data[parentFieldName][fieldName]) || null;
         };
         FormUtils.prototype.getFormFields = function (meta) {
@@ -22352,6 +22355,7 @@
                 })
                 : [];
             var fields = meta.fields.map(function (field) {
+                field.parentEntity = meta.entity;
                 if (!field.hasOwnProperty('sortOrder')) {
                     field.sortOrder = Number.MAX_SAFE_INTEGER - 1;
                 }
@@ -22562,23 +22566,23 @@
                 return dateFns.addDays(dateFns.startOfToday(), dateRange.minOffset);
             }
         };
-        /**
-         * Get the min start date of a Date base on field data.
-         */
-        FormUtils.prototype.getStartDate = function (field) {
-            if (field.allowedDateRange) {
-                return this.getStartDateFromRange(field.allowedDateRange);
+        FormUtils.prototype.getEndDateFromRange = function (dateRange) {
+            if (dateRange.maxDate) {
+                return dateFns.parse(dateRange.maxDate);
+            }
+            else if (dateRange.minOffset) {
+                return dateFns.addDays(dateFns.startOfToday(), dateRange.minOffset);
             }
-            // there is no restriction on the start date
-            return null;
         };
-        FormUtils.prototype.inferStartDate = function (controlConfig, field) {
-            if (field.dataType === 'Date') {
-                var startDate = this.getStartDate(field);
-                if (startDate) {
-                    controlConfig.startDate = startDate;
-                }
-                return startDate;
+        /**
+         * Get the min start date and max end date of a Date base on field data.
+         */
+        FormUtils.prototype.inferDateRange = function (controlConfig, field) {
+            var _a;
+            if (field.dataType === 'Date' && field.allowedDateRange) {
+                controlConfig.startDate = this.getStartDateFromRange(field.allowedDateRange);
+                controlConfig.endDate = this.getEndDateFromRange(field.allowedDateRange);
+                controlConfig.disabledDateMessage = (_a = field.allowedDateRange) === null || _a === void 0 ? void 0 : _a.disabledDateMessage;
             }
         };
         FormUtils.prototype.inflateEmbeddedProperties = function (data) {
@@ -22586,7 +22590,7 @@
                 Object.keys(data)
                     .filter(function (fieldName) { return fieldName.includes('.'); })
                     .forEach(function (field) {
-                    var _a = __read(field.split('.'), 2), parentFieldName = _a[0], fieldName = _a[1];
+                    var _b = __read(field.split('.'), 2), parentFieldName = _b[0], fieldName = _b[1];
                     if (!data[parentFieldName]) {
                         data[parentFieldName] = {};
                     }
@@ -22815,9 +22819,9 @@
                         '[attr.size]': 'size',
                         '[attr.role]': "'button'",
                     },
-                    template: "\n    <!--Left Icon-->\n    <i *ngIf=\"icon && side === 'left' && !loading\" [ngClass]=\"icon\"></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\"></i>\n    <!--Loading-->\n    <i *ngIf=\"loading\" class=\"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  ",
+                    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: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{-moz-user-select:none;-webkit-user-select:none;align-items:center;background:transparent;border:none;border-radius:3px;color:var(--text-main,#3d464d);cursor:pointer;display:inline-flex;flex-direction:row;font-size:1.2rem;gap:.4rem;justify-content:center;line-height:3.2rem;overflow:hidden;padding:0 1rem;text-overflow:clip;text-transform:uppercase;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}:host .button-contents{color:inherit;display:contents}:host .button-contents,:host i{font-size:inherit;line-height:inherit}:host i:before{vertical-align:top}:host[size=small]{font-size:1rem;line-height:2.4rem;padding:0 .5rem}:host[size=large]{font-size:1.8rem;line-height:4rem;padding:0 1.25rem}: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}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host[theme=standard]{background:#dbdbdb;color:#3d464d}:host[theme=standard][color=black]{background:#000;color:#fff}:host[theme=standard][color=white]{background:#fff;color:#000}:host[theme=standard][color=gray],:host[theme=standard][color=grey]{background:#9e9e9e;color:#000}:host[theme=standard][color=bright],:host[theme=standard][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=standard][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=standard][color=navigation]{background:#202b38;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:#000}:host[theme=standard][color=silver]{background:#e2e2e2;color:#000}:host[theme=standard][color=stone]{background:#bebebe;color:#000}:host[theme=standard][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=standard][color=ocean]{background:#4a89dc;color:#fff}:host[theme=standard][color=mint]{background:#37bc9b;color:#000}:host[theme=standard][color=grass]{background:#8cc152;color:#000}:host[theme=standard][color=sunflower]{background:#f6b042;color:#000}: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=positive]{background:#4a89dc;color:#fff}:host[theme=standard][color=success]{background:#8cc152;color:#000}:host[theme=standard][color=negative]{background:#da4453;color:#fff}:host[theme=standard][color=warning]{background:#f6b042;color:#000}:host[theme=standard][color=empty]{background:#cccdcc;color:#000}:host[theme=standard][color=disabled]{background:#bebebe;color:#000}:host[theme=standard][color=background]{background:#f7f7f7;color:#000}:host[theme=standard][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=standard][color=presentation]{background:#5b6770;color:#fff}:host[theme=standard][color=bullhorn]{background:#ff6900;color:#000}:host[theme=standard][color=pulse]{background:#3bafda;color:#000}:host[theme=standard][color=company]{background:#39d;color:#fff}:host[theme=standard][color=candidate]{background:#4b7;color:#000}:host[theme=standard][color=lead]{background:#a69;color:#fff}:host[theme=standard][color=contact]{background:#fa4;color:#000}: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:#000}: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 1px rgba(0,0,0,.05)}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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:#000}:host[theme=primary][color=gray],:host[theme=primary][color=grey]{background:#9e9e9e;color:#000}:host[theme=primary][color=bright],:host[theme=primary][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=primary][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=primary][color=navigation]{background:#202b38;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:#000}:host[theme=primary][color=silver]{background:#e2e2e2;color:#000}:host[theme=primary][color=stone]{background:#bebebe;color:#000}:host[theme=primary][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=primary][color=ocean]{background:#4a89dc;color:#fff}:host[theme=primary][color=mint]{background:#37bc9b;color:#000}:host[theme=primary][color=grass]{background:#8cc152;color:#000}:host[theme=primary][color=sunflower]{background:#f6b042;color:#000}: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=positive]{background:#4a89dc;color:#fff}:host[theme=primary][color=success]{background:#8cc152;color:#000}:host[theme=primary][color=negative]{background:#da4453;color:#fff}:host[theme=primary][color=warning]{background:#f6b042;color:#000}:host[theme=primary][color=empty]{background:#cccdcc;color:#000}:host[theme=primary][color=disabled]{background:#bebebe;color:#000}:host[theme=primary][color=background]{background:#f7f7f7;color:#000}:host[theme=primary][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=primary][color=presentation]{background:#5b6770;color:#fff}:host[theme=primary][color=bullhorn]{background:#ff6900;color:#000}:host[theme=primary][color=pulse]{background:#3bafda;color:#000}:host[theme=primary][color=company]{background:#39d;color:#fff}:host[theme=primary][color=candidate]{background:#4b7;color:#000}:host[theme=primary][color=lead]{background:#a69;color:#fff}:host[theme=primary][color=contact]{background:#fa4;color:#000}: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:#000}: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{background:#75a5e4}:host[theme=primary]:active{background:#357bd8}: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)}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host[theme=secondary]{align-items:center;background:#fff;border:1px solid #4a89dc;color:#4a89dc;line-height:calc(3.2rem - 2px);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:#202b38}: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:#202b38}: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=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=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 #202b38}: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 #202b38}: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=positive]{border:1px solid #4a89dc}:host[theme=secondary][color=success]{border:1px solid #8cc152}: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][size=small]{line-height:calc(2.4rem - 2px)}:host[theme=secondary][size=large]{line-height:calc(4rem - 2px)}: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 1px rgba(0,0,0,.05)}: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}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host[theme=fab]{align-items:center;border-radius:50%!important;display:inline-flex;font-size:1.2rem;height:3.2rem;justify-content:center;line-height:1.6rem;padding:0;width:3.2rem}:host[theme=fab][color=black]{background:#000;color:#fff}:host[theme=fab][color=white]{background:#fff;color:#000}:host[theme=fab][color=gray],:host[theme=fab][color=grey]{background:#9e9e9e;color:#000}:host[theme=fab][color=bright],:host[theme=fab][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=fab][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=fab][color=navigation]{background:#202b38;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:#000}:host[theme=fab][color=silver]{background:#e2e2e2;color:#000}:host[theme=fab][color=stone]{background:#bebebe;color:#000}:host[theme=fab][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=fab][color=ocean]{background:#4a89dc;color:#fff}:host[theme=fab][color=mint]{background:#37bc9b;color:#000}:host[theme=fab][color=grass]{background:#8cc152;color:#000}:host[theme=fab][color=sunflower]{background:#f6b042;color:#000}: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=positive]{background:#4a89dc;color:#fff}:host[theme=fab][color=success]{background:#8cc152;color:#000}:host[theme=fab][color=negative]{background:#da4453;color:#fff}:host[theme=fab][color=warning]{background:#f6b042;color:#000}:host[theme=fab][color=empty]{background:#cccdcc;color:#000}:host[theme=fab][color=disabled]{background:#bebebe;color:#000}:host[theme=fab][color=background]{background:#f7f7f7;color:#000}:host[theme=fab][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=fab][color=presentation]{background:#5b6770;color:#fff}:host[theme=fab][color=bullhorn]{background:#ff6900;color:#000}:host[theme=fab][color=pulse]{background:#3bafda;color:#000}:host[theme=fab][color=company]{background:#39d;color:#fff}:host[theme=fab][color=candidate]{background:#4b7;color:#000}:host[theme=fab][color=lead]{background:#a69;color:#fff}:host[theme=fab][color=contact]{background:#fa4;color:#000}: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:#000}: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] i{margin:0;padding:0}:host[theme=fab] i:before{display:block}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host[theme=icon]{font-size:1.6rem;line-height:1.6rem;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:#202b38}: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:#202b38}: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=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=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{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][size=small]{font-size:1.2rem;line-height:1.2rem;padding:.5rem}:host[theme=icon][size=large]{font-size:2rem;line-height:2rem;padding:1rem}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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:#202b38}: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:#202b38}: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=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=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)}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host[theme=field]{background:transparent;border:none;border-bottom:1px solid #3d464d;border-radius:0;color:#3d464d;font-size:1.2rem;line-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;justify-content:space-between;line-height:1.8rem;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;align-items:center;background:transparent;border:none;border-radius:3px;color:var(--text-main,#3d464d);cursor:pointer;display:inline-flex;flex:0 0 auto;flex-direction:row;font-size:1.2rem;gap:.4rem;justify-content:center;line-height:3.2rem;overflow:hidden;padding:0 1rem;text-overflow:clip;text-transform:uppercase;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}:host .button-contents{color:inherit;display:contents}:host .button-contents,:host i{font-size:inherit;line-height:inherit}:host[size=small]{font-size:1rem;line-height:2.4rem;padding:0 .5rem}:host[size=large]{font-size:1.6rem;line-height:3.6rem;padding:0 1.25rem}: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:#000}:host[theme=standard][color=gray],:host[theme=standard][color=grey]{background:#9e9e9e;color:#000}:host[theme=standard][color=bright],:host[theme=standard][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=standard][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=standard][color=navigation]{background:#202b38;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:#000}:host[theme=standard][color=silver]{background:#e2e2e2;color:#000}:host[theme=standard][color=stone]{background:#bebebe;color:#000}:host[theme=standard][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=standard][color=ocean]{background:#4a89dc;color:#fff}:host[theme=standard][color=mint]{background:#37bc9b;color:#000}:host[theme=standard][color=grass]{background:#8cc152;color:#000}:host[theme=standard][color=sunflower]{background:#f6b042;color:#000}: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:#000}: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:#000}:host[theme=standard][color=empty]{background:#cccdcc;color:#000}:host[theme=standard][color=disabled]{background:#bebebe;color:#000}:host[theme=standard][color=background]{background:#f7f7f7;color:#000}:host[theme=standard][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=standard][color=presentation]{background:#5b6770;color:#fff}:host[theme=standard][color=bullhorn]{background:#ff6900;color:#000}:host[theme=standard][color=pulse]{background:#3bafda;color:#000}:host[theme=standard][color=company]{background:#39d;color:#fff}:host[theme=standard][color=candidate]{background:#4b7;color:#000}:host[theme=standard][color=lead]{background:#a69;color:#fff}:host[theme=standard][color=contact]{background:#fa4;color:#000}: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:#000}: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:#000}:host[theme=primary][color=gray],:host[theme=primary][color=grey]{background:#9e9e9e;color:#000}:host[theme=primary][color=bright],:host[theme=primary][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=primary][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=primary][color=navigation]{background:#202b38;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:#000}:host[theme=primary][color=silver]{background:#e2e2e2;color:#000}:host[theme=primary][color=stone]{background:#bebebe;color:#000}:host[theme=primary][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=primary][color=ocean]{background:#4a89dc;color:#fff}:host[theme=primary][color=mint]{background:#37bc9b;color:#000}:host[theme=primary][color=grass]{background:#8cc152;color:#000}:host[theme=primary][color=sunflower]{background:#f6b042;color:#000}: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:#000}: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:#000}:host[theme=primary][color=empty]{background:#cccdcc;color:#000}:host[theme=primary][color=disabled]{background:#bebebe;color:#000}:host[theme=primary][color=background]{background:#f7f7f7;color:#000}:host[theme=primary][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=primary][color=presentation]{background:#5b6770;color:#fff}:host[theme=primary][color=bullhorn]{background:#ff6900;color:#000}:host[theme=primary][color=pulse]{background:#3bafda;color:#000}:host[theme=primary][color=company]{background:#39d;color:#fff}:host[theme=primary][color=candidate]{background:#4b7;color:#000}:host[theme=primary][color=lead]{background:#a69;color:#fff}:host[theme=primary][color=contact]{background:#fa4;color:#000}: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:#000}: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=secondary]{align-items:center;background:#fff;border:1px solid #4a89dc;color:#4a89dc;line-height:calc(3.2rem - 2px);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:#202b38}: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:#202b38}: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 #202b38}: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 #202b38}: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][size=small]{line-height:calc(2.4rem - 2px)}:host[theme=secondary][size=large]{line-height:calc(4rem - 2px)}: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;line-height:1.6rem;padding:0;width:3.2rem}:host[theme=fab][color=black]{background:#000;color:#fff}:host[theme=fab][color=white]{background:#fff;color:#000}:host[theme=fab][color=gray],:host[theme=fab][color=grey]{background:#9e9e9e;color:#000}:host[theme=fab][color=bright],:host[theme=fab][color=offWhite]{background:#f7f7f7;color:#000}:host[theme=fab][color=light]{background:#dbdbdb;color:#000}: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:#000}:host[theme=fab][color=navigation]{background:#202b38;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:#000}:host[theme=fab][color=silver]{background:#e2e2e2;color:#000}:host[theme=fab][color=stone]{background:#bebebe;color:#000}:host[theme=fab][color=ash]{background:#a0a0a0;color:#000}: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:#202b38;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:#000}:host[theme=fab][color=ocean]{background:#4a89dc;color:#fff}:host[theme=fab][color=mint]{background:#37bc9b;color:#000}:host[theme=fab][color=grass]{background:#8cc152;color:#000}:host[theme=fab][color=sunflower]{background:#f6b042;color:#000}: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:#000}: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:#000}:host[theme=fab][color=empty]{background:#cccdcc;color:#000}:host[theme=fab][color=disabled]{background:#bebebe;color:#000}:host[theme=fab][color=background]{background:#f7f7f7;color:#000}:host[theme=fab][color=backgroundDark]{background:#e2e2e2;color:#000}:host[theme=fab][color=presentation]{background:#5b6770;color:#fff}:host[theme=fab][color=bullhorn]{background:#ff6900;color:#000}:host[theme=fab][color=pulse]{background:#3bafda;color:#000}:host[theme=fab][color=company]{background:#39d;color:#fff}:host[theme=fab][color=candidate]{background:#4b7;color:#000}:host[theme=fab][color=lead]{background:#a69;color:#fff}:host[theme=fab][color=contact]{background:#fa4;color:#000}: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:#000}: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] i{margin:0;padding:0}:host[theme=fab] i:before{display:block}", ":host[theme=icon]{font-size:1.6rem;line-height:1.6rem;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:#202b38}: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:#202b38}: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{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][size=small]{font-size:1.2rem;line-height:1.2rem;padding:.5rem}:host[theme=icon][size=large]{font-size:2rem;line-height:2rem;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:#202b38}: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:#202b38}: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;line-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;justify-content:space-between;line-height:1.8rem;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}"]
                 },] }
     ];
     NovoButtonElement.ctorParameters = function () { return [
@@ -22881,7 +22885,7 @@
                             ]),
                         ]),
                     ],
-                    styles: ["novo-tooltip div{background:#383838;box-shadow:4px 4px 8px rgba(0,0,0,.3);color:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;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:#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}"]
                 },] }
     ];
@@ -24568,7 +24572,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-avatar',
                     template: '<img *ngIf="src" [src]="src"/>',
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{background-color:var(--background-muted);background-position:50%;background-size:cover;display:inline-block;height:30px;overflow:hidden;position:relative;width:30px}:host img{border-radius:inherit;height:inherit;width:inherit}:host.avatar-size-small{height:20px;width:20px}:host.avatar-size-large{height:40px;width:40px}:host.avatar-shape-round{border-radius:2em}:host.avatar-shape-square{border-radius:.4em}:host.avatar-color-black{background-color:#000;color:#fff}:host.avatar-color-white{background-color:#fff;color:#000}:host.avatar-color-gray,:host.avatar-color-grey{background-color:#9e9e9e;color:#000}:host.avatar-color-bright,:host.avatar-color-offWhite{background-color:#f7f7f7;color:#000}:host.avatar-color-light{background-color:#dbdbdb;color:#000}:host.avatar-color-neutral{background-color:#4f5361;color:#fff}:host.avatar-color-dark{background-color:#3d464d;color:#fff}:host.avatar-color-orange{background-color:#ff6900;color:#000}:host.avatar-color-navigation{background-color:#202b38;color:#fff}:host.avatar-color-skyBlue{background-color:#009bdf;color:#fff}:host.avatar-color-steel{background-color:#5b6770;color:#fff}:host.avatar-color-metal{background-color:#637893;color:#fff}:host.avatar-color-sand{background-color:#f4f4f4;color:#000}:host.avatar-color-silver{background-color:#e2e2e2;color:#000}:host.avatar-color-stone{background-color:#bebebe;color:#000}:host.avatar-color-ash{background-color:#a0a0a0;color:#000}:host.avatar-color-slate{background-color:#707070;color:#fff}:host.avatar-color-onyx{background-color:#526980;color:#fff}:host.avatar-color-charcoal{background-color:#282828;color:#fff}:host.avatar-color-moonlight{background-color:#1a242f;color:#fff}:host.avatar-color-midnight{background-color:#202b38;color:#fff}:host.avatar-color-darkness{background-color:#161f27;color:#fff}:host.avatar-color-navy{background-color:#0d2d42;color:#fff}:host.avatar-color-aqua{background-color:#3bafda;color:#000}:host.avatar-color-ocean{background-color:#4a89dc;color:#fff}:host.avatar-color-mint{background-color:#37bc9b;color:#000}:host.avatar-color-grass{background-color:#8cc152;color:#000}:host.avatar-color-sunflower{background-color:#f6b042;color:#000}:host.avatar-color-bittersweet{background-color:#eb6845;color:#fff}:host.avatar-color-grapefruit{background-color:#da4453;color:#fff}:host.avatar-color-carnation{background-color:#d770ad;color:#fff}:host.avatar-color-lavender{background-color:#967adc;color:#fff}:host.avatar-color-mountain{background-color:#9678b6;color:#fff}:host.avatar-color-positive{background-color:#4a89dc;color:#fff}:host.avatar-color-success{background-color:#8cc152;color:#000}:host.avatar-color-negative{background-color:#da4453;color:#fff}:host.avatar-color-warning{background-color:#f6b042;color:#000}:host.avatar-color-empty{background-color:#cccdcc;color:#000}:host.avatar-color-disabled{background-color:#bebebe;color:#000}:host.avatar-color-background{background-color:#f7f7f7;color:#000}:host.avatar-color-backgroundDark{background-color:#e2e2e2;color:#000}:host.avatar-color-presentation{background-color:#5b6770;color:#fff}:host.avatar-color-bullhorn{background-color:#ff6900;color:#000}:host.avatar-color-pulse{background-color:#3bafda;color:#000}:host.avatar-color-company{background-color:#39d;color:#fff}:host.avatar-color-candidate{background-color:#4b7;color:#000}:host.avatar-color-lead{background-color:#a69;color:#fff}:host.avatar-color-contact{background-color:#fa4;color:#000}:host.avatar-color-opportunity{background-color:#625;color:#fff}:host.avatar-color-job{background-color:#b56;color:#fff}:host.avatar-color-submission{background-color:#a9adbb;color:#000}:host.avatar-color-sendout{background-color:#747884;color:#fff}:host.avatar-color-placement{background-color:#0b344f;color:#fff}:host.avatar-color-note{background-color:#747884;color:#fff}:host.avatar-color-contract{background-color:#454ea0;color:#fff}:host.avatar-color-billableCharge,:host.avatar-color-corporateUser,:host.avatar-color-credential,:host.avatar-color-distributionList,:host.avatar-color-earnCode,:host.avatar-color-invoiceStatement,:host.avatar-color-jobCode,:host.avatar-color-payableCharge,:host.avatar-color-person,:host.avatar-color-user{background-color:#696d79;color:#fff}:host(.menu-active){box-shadow:0 0 4px 1px var(--selection)}"]
+                    styles: [":host{background-color:var(--background-muted);background-position:50%;background-size:cover;display:inline-block;height:30px;overflow:hidden;position:relative;width:30px}:host img{border-radius:inherit;height:inherit;width:inherit}:host.avatar-size-small{height:20px;width:20px}:host.avatar-size-large{height:40px;width:40px}:host.avatar-shape-round{border-radius:2em}:host.avatar-shape-square{border-radius:.4em}:host.avatar-color-black{background-color:#000;color:#fff}:host.avatar-color-white{background-color:#fff;color:#000}:host.avatar-color-gray,:host.avatar-color-grey{background-color:#9e9e9e;color:#000}:host.avatar-color-bright,:host.avatar-color-offWhite{background-color:#f7f7f7;color:#000}:host.avatar-color-light{background-color:#dbdbdb;color:#000}:host.avatar-color-neutral{background-color:#4f5361;color:#fff}:host.avatar-color-dark{background-color:#3d464d;color:#fff}:host.avatar-color-orange{background-color:#ff6900;color:#000}:host.avatar-color-navigation{background-color:#202b38;color:#fff}:host.avatar-color-skyBlue{background-color:#009bdf;color:#fff}:host.avatar-color-steel{background-color:#5b6770;color:#fff}:host.avatar-color-metal{background-color:#637893;color:#fff}:host.avatar-color-sand{background-color:#f4f4f4;color:#000}:host.avatar-color-silver{background-color:#e2e2e2;color:#000}:host.avatar-color-stone{background-color:#bebebe;color:#000}:host.avatar-color-ash{background-color:#a0a0a0;color:#000}:host.avatar-color-slate{background-color:#707070;color:#fff}:host.avatar-color-onyx{background-color:#526980;color:#fff}:host.avatar-color-charcoal{background-color:#282828;color:#fff}:host.avatar-color-moonlight{background-color:#1a242f;color:#fff}:host.avatar-color-midnight{background-color:#202b38;color:#fff}:host.avatar-color-darkness{background-color:#161f27;color:#fff}:host.avatar-color-navy{background-color:#0d2d42;color:#fff}:host.avatar-color-aqua{background-color:#3bafda;color:#000}:host.avatar-color-ocean{background-color:#4a89dc;color:#fff}:host.avatar-color-mint{background-color:#37bc9b;color:#000}:host.avatar-color-grass{background-color:#8cc152;color:#000}:host.avatar-color-sunflower{background-color:#f6b042;color:#000}:host.avatar-color-bittersweet{background-color:#eb6845;color:#fff}:host.avatar-color-grapefruit{background-color:#da4453;color:#fff}:host.avatar-color-carnation{background-color:#d770ad;color:#fff}:host.avatar-color-lavender{background-color:#967adc;color:#fff}:host.avatar-color-mountain{background-color:#9678b6;color:#fff}:host.avatar-color-info,:host.avatar-color-positive{background-color:#4a89dc;color:#fff}:host.avatar-color-success{background-color:#8cc152;color:#000}:host.avatar-color-danger,:host.avatar-color-error,:host.avatar-color-negative{background-color:#da4453;color:#fff}:host.avatar-color-warning{background-color:#f6b042;color:#000}:host.avatar-color-empty{background-color:#cccdcc;color:#000}:host.avatar-color-disabled{background-color:#bebebe;color:#000}:host.avatar-color-background{background-color:#f7f7f7;color:#000}:host.avatar-color-backgroundDark{background-color:#e2e2e2;color:#000}:host.avatar-color-presentation{background-color:#5b6770;color:#fff}:host.avatar-color-bullhorn{background-color:#ff6900;color:#000}:host.avatar-color-pulse{background-color:#3bafda;color:#000}:host.avatar-color-company{background-color:#39d;color:#fff}:host.avatar-color-candidate{background-color:#4b7;color:#000}:host.avatar-color-lead{background-color:#a69;color:#fff}:host.avatar-color-contact{background-color:#fa4;color:#000}:host.avatar-color-opportunity{background-color:#625;color:#fff}:host.avatar-color-job{background-color:#b56;color:#fff}:host.avatar-color-submission{background-color:#a9adbb;color:#000}:host.avatar-color-sendout{background-color:#747884;color:#fff}:host.avatar-color-placement{background-color:#0b344f;color:#fff}:host.avatar-color-note{background-color:#747884;color:#fff}:host.avatar-color-contract{background-color:#454ea0;color:#fff}:host.avatar-color-billableCharge,:host.avatar-color-corporateUser,:host.avatar-color-credential,:host.avatar-color-distributionList,:host.avatar-color-earnCode,:host.avatar-color-invoiceStatement,:host.avatar-color-jobCode,:host.avatar-color-payableCharge,:host.avatar-color-person,:host.avatar-color-user{background-color:#696d79;color:#fff}:host(.menu-active){box-shadow:0 0 4px 1px var(--selection)}"]
                 },] }
     ];
     NovoAvatarElement.ctorParameters = function () { return [
@@ -24606,7 +24610,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-avatar-stack',
                     template: "\n    <ng-content></ng-content>\n    <novo-avatar *ngIf=\"showTotal\" label=\"+5\"></novo-avatar>\n  ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:inline-flex;flex-flow:row nowrap}:host::ng-deep novo-avatar{transition:all .1s ease-in-out}:host::ng-deep novo-avatar img{border:1px solid #fff}:host::ng-deep novo-avatar+novo-avatar{margin-left:-15px}:host::ng-deep novo-avatar:first-child{z-index:5}:host::ng-deep novo-avatar:nth-child(2){z-index:4}:host::ng-deep novo-avatar:nth-child(3){z-index:3}:host::ng-deep novo-avatar:nth-child(4){z-index:2}:host::ng-deep novo-avatar:nth-child(5){z-index:1}:host::ng-deep novo-avatar:nth-child(n+6){display:none;margin-left:-15px;opacity:0;z-index:0}:host:hover::ng-deep novo-avatar{margin-left:0;margin-right:1px}:host:hover::ng-deep novo-avatar:nth-child(n+6){display:unset;opacity:1}"]
+                    styles: [":host{display:inline-flex;flex-flow:row nowrap}:host::ng-deep novo-avatar{transition:all .1s ease-in-out}:host::ng-deep novo-avatar img{border:1px solid #fff}:host::ng-deep novo-avatar+novo-avatar{margin-left:-15px}:host::ng-deep novo-avatar:first-child{z-index:5}:host::ng-deep novo-avatar:nth-child(2){z-index:4}:host::ng-deep novo-avatar:nth-child(3){z-index:3}:host::ng-deep novo-avatar:nth-child(4){z-index:2}:host::ng-deep novo-avatar:nth-child(5){z-index:1}:host::ng-deep novo-avatar:nth-child(n+6){display:none;margin-left:-15px;opacity:0;z-index:0}:host:hover::ng-deep novo-avatar{margin-left:0;margin-right:1px}:host:hover::ng-deep novo-avatar:nth-child(n+6){display:unset;opacity:1}"]
                 },] }
     ];
     NovoAvatarStackElement.propDecorators = {
@@ -24706,7 +24710,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: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.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:1.2rem;font-weight:400}: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}: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 [
@@ -24721,6 +24725,33 @@
         toggleEvent: [{ type: i0.Output }]
     };
+    // tslint:disable: directive-selector
+    var AccentColorDirective = /** @class */ (function () {
+        function AccentColorDirective(el) {
+            this.el = el;
+        }
+        Object.defineProperty(AccentColorDirective.prototype, "hb_textColor", {
+            get: function () {
+                return "novo-accent-" + this.accent;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AccentColorDirective;
+    }());
+    AccentColorDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[accent]',
+                },] }
+    ];
+    AccentColorDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    AccentColorDirective.propDecorators = {
+        accent: [{ type: i0.Input }],
+        hb_textColor: [{ type: i0.HostBinding, args: ['class',] }]
+    };
     // tslint:disable: directive-selector
     var BackgroundColorDirective = /** @class */ (function () {
         function BackgroundColorDirective() {
@@ -24857,6 +24888,33 @@
         hb_textColor: [{ type: i0.HostBinding, args: ['class',] }]
     };
+    // tslint:disable: directive-selector
+    var FillColorDirective = /** @class */ (function () {
+        function FillColorDirective(el) {
+            this.el = el;
+        }
+        Object.defineProperty(FillColorDirective.prototype, "hb_textColor", {
+            get: function () {
+                return "novo-fill-" + this.fill;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return FillColorDirective;
+    }());
+    FillColorDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[fill]',
+                },] }
+    ];
+    FillColorDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    FillColorDirective.propDecorators = {
+        fill: [{ type: i0.Input }],
+        hb_textColor: [{ type: i0.HostBinding, args: ['class',] }]
+    };
     // tslint:disable: directive-selector
     /*
     Prop	CSS Property	Theme Field
@@ -24894,10 +24952,20 @@
     const selectors = [...marginAttrs, ...paddingAttrs];
     */
+    var getSpacingToken = function (value) {
+        if (Object.keys(tokens.spacing).includes(value)) {
+            return tokens.spacing[value];
+        }
+        // TODO: Maybe Validate Value ie.(rem, px)
+        return value;
+    };
     var MarginDirective = /** @class */ (function () {
         function MarginDirective() {
         }
         Object.defineProperty(MarginDirective.prototype, "hb_margin", {
+            // @HostBinding('style.margin') get hb_margin() {
+            //   return getSpacingToken(this.margin || this.m);
+            // }
             get: function () {
                 return "margin-" + (this.margin || this.m);
             },
@@ -24906,28 +24974,28 @@
         });
         Object.defineProperty(MarginDirective.prototype, "hb_margin_left", {
             get: function () {
-                return this.marginLeft || this.ml || this.mx || this.marginX;
+                return getSpacingToken(this.marginLeft || this.ml || this.mx || this.marginX);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(MarginDirective.prototype, "hb_margin_right", {
             get: function () {
-                return this.marginRight || this.mr || this.mx || this.marginX;
+                return getSpacingToken(this.marginRight || this.mr || this.mx || this.marginX);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(MarginDirective.prototype, "hb_margin_top", {
             get: function () {
-                return this.marginTop || this.mt || this.my || this.marginY;
+                return getSpacingToken(this.marginTop || this.mt || this.my || this.marginY);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(MarginDirective.prototype, "hb_margin_bottom", {
             get: function () {
-                return this.marginBottom || this.mb || this.my || this.marginY;
+                return getSpacingToken(this.marginBottom || this.mb || this.my || this.marginY);
             },
             enumerable: false,
             configurable: true
@@ -24965,9 +25033,6 @@
         function PaddingDirective() {
         }
         Object.defineProperty(PaddingDirective.prototype, "hb_padding", {
-            // @HostBinding('style.padding') get hb_padding() {
-            //   return this.padding || this.p;
-            // }
             get: function () {
                 return "padding-" + (this.padding || this.p);
             },
@@ -24975,29 +25040,32 @@
             configurable: true
         });
         Object.defineProperty(PaddingDirective.prototype, "hb_padding_left", {
+            // @HostBinding('class') get hb_padding() {
+            //   return `padding-${this.padding || this.p}`;
+            // }
             get: function () {
-                return this.paddingLeft || this.pl || this.px || this.paddingX;
+                return getSpacingToken(this.paddingLeft || this.pl || this.px || this.paddingX);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(PaddingDirective.prototype, "hb_padding_right", {
             get: function () {
-                return this.paddingRight || this.pr || this.px || this.paddingX;
+                return getSpacingToken(this.paddingRight || this.pr || this.px || this.paddingX);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(PaddingDirective.prototype, "hb_padding_top", {
             get: function () {
-                return this.paddingTop || this.pt || this.py || this.paddingY;
+                return getSpacingToken(this.paddingTop || this.pt || this.py || this.paddingY);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(PaddingDirective.prototype, "hb_padding_bottom", {
             get: function () {
-                return this.paddingBottom || this.pb || this.py || this.paddingY;
+                return getSpacingToken(this.paddingBottom || this.pb || this.py || this.paddingY);
             },
             enumerable: false,
             configurable: true
@@ -25031,6 +25099,27 @@
         hb_padding_top: [{ type: i0.HostBinding, args: ['style.padding-top',] }],
         hb_padding_bottom: [{ type: i0.HostBinding, args: ['style.padding-bottom',] }]
     };
+    var GapDirective = /** @class */ (function () {
+        function GapDirective() {
+        }
+        Object.defineProperty(GapDirective.prototype, "hb_gap", {
+            get: function () {
+                return getSpacingToken(this.gap);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return GapDirective;
+    }());
+    GapDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[gap]',
+                },] }
+    ];
+    GapDirective.propDecorators = {
+        gap: [{ type: i0.Input }],
+        hb_gap: [{ type: i0.HostBinding, args: ['style.gap',] }]
+    };
     var NovoTemplate = /** @class */ (function () {
         function NovoTemplate(template) {
@@ -25092,7 +25181,7 @@
                         '[class.novo-pseudo-checkbox-disabled]': 'disabled',
                         '[class._novo-animation-noopable]': '_animationMode === "NoopAnimations"',
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-pseudo-checkbox{box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:16px;position:relative;transition:color .3s ease-in-out;vertical-align:middle;width:16px}.novo-pseudo-checkbox.novo-pseudo-checkbox-checked,.novo-pseudo-checkbox.novo-pseudo-checkbox-indeterminate{-webkit-animation:iconEnter .16s ease-in-out;animation:iconEnter .16s ease-in-out;color:#4a89dc}.novo-pseudo-checkbox i{font-size:1.4rem;line-height:1rem}.novo-pseudo-checkbox-disabled{cursor:default}"]
+                    styles: [".novo-pseudo-checkbox{box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:16px;position:relative;transition:color .3s ease-in-out;vertical-align:middle;width:16px}.novo-pseudo-checkbox.novo-pseudo-checkbox-checked,.novo-pseudo-checkbox.novo-pseudo-checkbox-indeterminate{-webkit-animation:iconEnter .16s ease-in-out;animation:iconEnter .16s ease-in-out;color:#4a89dc}.novo-pseudo-checkbox i{font-size:1.4rem;line-height:1rem}.novo-pseudo-checkbox-disabled{cursor:default}"]
                 },] }
     ];
     NovoPseudoCheckbox.ctorParameters = function () { return [
@@ -25210,7 +25299,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-optgroup',
                     exportAs: 'novoOptgroup',
-                    template: "<span class=\"novo-optgroup-label\" aria-hidden=\"true\" [id]=\"_labelId\">{{ label }} <ng-content></ng-content></span>\n<ng-content select=\"novo-option, ng-container, novo-divider\"></ng-content>",
+                    template: "<span *ngIf=\"label\" class=\"novo-optgroup-label\" aria-hidden=\"true\" [id]=\"_labelId\">{{ label }}</span>\n<ng-content select=\"novo-option, ng-container, novo-divider\"></ng-content>",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     inputs: ['disabled'],
@@ -25222,7 +25311,7 @@
                         '[class.novo-optgroup-disabled]': 'disabled',
                     },
                     providers: [{ provide: NOVO_OPTGROUP, useExisting: NovoOptgroup }],
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-optgroup-label{color:#707070;color:#9e9e9e;cursor:default;display:block;flex:1;font-size:1.1rem;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}"]
+                    styles: [".novo-optgroup-label{color:#707070;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}"]
                 },] }
     ];
     NovoOptgroup.ctorParameters = function () { return [
@@ -25268,6 +25357,14 @@
             this._stateChanges = new rxjs.Subject();
             this._element.nativeElement.addEventListener('click', this._handleDisabledClick, false);
         }
+        Object.defineProperty(NovoOptionBase.prototype, "selectable", {
+            /** If there is no parent then nothing is managing the selection. */
+            get: function () {
+                return this._parent;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(NovoOptionBase.prototype, "multiple", {
             /** Whether the wrapping component is in multiple selection mode. */
             get: function () {
@@ -25483,17 +25580,17 @@
                         '[attr.aria-selected]': '_getAriaSelected()',
                         '[attr.aria-disabled]': 'disabled.toString()',
                         '[class.novo-active]': 'active',
-                        '[class.novo-selected]': 'selected',
+                        '[class.novo-selected]': 'selectable && selected',
                         '[class.novo-option-multiple]': 'multiple',
                         '[class.novo-option-disabled]': 'disabled',
                         '(click)': '_selectViaInteraction()',
                         '(keydown)': '_handleKeydown($event)',
                         class: 'novo-option novo-focus-indicator',
                     },
-                    template: "<novo-pseudo-checkbox *ngIf=\"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=\"!multiple && selected\" class=\"novo-option-pseudo-checkbox\" state=\"checked\" shape=\"line\"\n  [disabled]=\"disabled\"></novo-pseudo-checkbox>\n\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>",
+                    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<!-- 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: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.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:1.2rem;font-weight:400;gap:1rem;margin:0;max-width:100%;outline:none;padding:1rem 1rem 1rem 1.6rem;position:relative}.novo-option:hover{background:var(--background-main,rgba(74,137,220,.1));color:var(--text-bright,#3d464d)}.novo-option.novo-active,.novo-option:active{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-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}.novo-option:hover{background:var(--background-main,rgba(74,137,220,.1));color:var(--text-bright,#3d464d)}.novo-option.novo-active,.novo-option:active{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{background:#000;color:#fff}.novo-option.novo-fill-black:focus,.novo-option.novo-fill-black:hover{background:#333}.novo-option.novo-fill-black:active{background:#000}.novo-option.novo-accent-white{border-left:4px solid #fff}.novo-option.novo-fill-white{background:#fff;color:#000}.novo-option.novo-fill-white:focus,.novo-option.novo-fill-white:hover{background:#fff}.novo-option.novo-fill-white:active{background:#ccc}.novo-option.novo-accent-gray{border-left:4px solid #9e9e9e}.novo-option.novo-fill-gray{background:#9e9e9e;color:#000}.novo-option.novo-fill-gray:focus,.novo-option.novo-fill-gray:hover{background:#b1b1b1}.novo-option.novo-fill-gray:active{background:#7e7e7e}.novo-option.novo-accent-grey{border-left:4px solid #9e9e9e}.novo-option.novo-fill-grey{background:#9e9e9e;color:#000}.novo-option.novo-fill-grey:focus,.novo-option.novo-fill-grey:hover{background:#b1b1b1}.novo-option.novo-fill-grey:active{background:#7e7e7e}.novo-option.novo-accent-offWhite{border-left:4px solid #f7f7f7}.novo-option.novo-fill-offWhite{background:#f7f7f7;color:#000}.novo-option.novo-fill-offWhite:focus,.novo-option.novo-fill-offWhite:hover{background:#f8f8f8}.novo-option.novo-fill-offWhite:active{background:#c5c5c5}.novo-option.novo-accent-bright{border-left:4px solid #f7f7f7}.novo-option.novo-fill-bright{background:#f7f7f7;color:#000}.novo-option.novo-fill-bright:focus,.novo-option.novo-fill-bright:hover{background:#f8f8f8}.novo-option.novo-fill-bright:active{background:#c5c5c5}.novo-option.novo-accent-light{border-left:4px solid #dbdbdb}.novo-option.novo-fill-light{background:#dbdbdb;color:#000}.novo-option.novo-fill-light:focus,.novo-option.novo-fill-light:hover{background:#e2e2e2}.novo-option.novo-fill-light:active{background:#afafaf}.novo-option.novo-accent-neutral{border-left:4px solid #4f5361}.novo-option.novo-fill-neutral{background:#4f5361;color:#fff}.novo-option.novo-fill-neutral:focus,.novo-option.novo-fill-neutral:hover{background:#727580}.novo-option.novo-fill-neutral:active{background:#3f424d}.novo-option.novo-accent-dark{border-left:4px solid #3d464d}.novo-option.novo-fill-dark{background:#3d464d;color:#fff}.novo-option.novo-fill-dark:focus,.novo-option.novo-fill-dark:hover{background:#636b70}.novo-option.novo-fill-dark:active{background:#30383d}.novo-option.novo-accent-orange{border-left:4px solid #ff6900}.novo-option.novo-fill-orange{background:#ff6900;color:#000}.novo-option.novo-fill-orange:focus,.novo-option.novo-fill-orange:hover{background:#ff8733}.novo-option.novo-fill-orange:active{background:#cc5400}.novo-option.novo-accent-navigation{border-left:4px solid #202b38}.novo-option.novo-fill-navigation{background:#202b38;color:#fff}.novo-option.novo-fill-navigation:focus,.novo-option.novo-fill-navigation:hover{background:#4c555f}.novo-option.novo-fill-navigation:active{background:#19222c}.novo-option.novo-accent-skyBlue{border-left:4px solid #009bdf}.novo-option.novo-fill-skyBlue{background:#009bdf;color:#fff}.novo-option.novo-fill-skyBlue:focus,.novo-option.novo-fill-skyBlue:hover{background:#33afe5}.novo-option.novo-fill-skyBlue:active{background:#007cb2}.novo-option.novo-accent-steel{border-left:4px solid #5b6770}.novo-option.novo-fill-steel{background:#5b6770;color:#fff}.novo-option.novo-fill-steel:focus,.novo-option.novo-fill-steel:hover{background:#7b858c}.novo-option.novo-fill-steel:active{background:#485259}.novo-option.novo-accent-metal{border-left:4px solid #637893}.novo-option.novo-fill-metal{background:#637893;color:#fff}.novo-option.novo-fill-metal:focus,.novo-option.novo-fill-metal:hover{background:#8293a8}.novo-option.novo-fill-metal:active{background:#4f6075}.novo-option.novo-accent-sand{border-left:4px solid #f4f4f4}.novo-option.novo-fill-sand{background:#f4f4f4;color:#000}.novo-option.novo-fill-sand:focus,.novo-option.novo-fill-sand:hover{background:#f6f6f6}.novo-option.novo-fill-sand:active{background:#c3c3c3}.novo-option.novo-accent-silver{border-left:4px solid #e2e2e2}.novo-option.novo-fill-silver{background:#e2e2e2;color:#000}.novo-option.novo-fill-silver:focus,.novo-option.novo-fill-silver:hover{background:#e7e7e7}.novo-option.novo-fill-silver:active{background:#b4b4b4}.novo-option.novo-accent-stone{border-left:4px solid #bebebe}.novo-option.novo-fill-stone{background:#bebebe;color:#000}.novo-option.novo-fill-stone:focus,.novo-option.novo-fill-stone:hover{background:#cbcbcb}.novo-option.novo-fill-stone:active{background:#989898}.novo-option.novo-accent-ash{border-left:4px solid #a0a0a0}.novo-option.novo-fill-ash{background:#a0a0a0;color:#000}.novo-option.novo-fill-ash:focus,.novo-option.novo-fill-ash:hover{background:#b3b3b3}.novo-option.novo-fill-ash:active{background:grey}.novo-option.novo-accent-slate{border-left:4px solid #707070}.novo-option.novo-fill-slate{background:#707070;color:#fff}.novo-option.novo-fill-slate:focus,.novo-option.novo-fill-slate:hover{background:#8c8c8c}.novo-option.novo-fill-slate:active{background:#595959}.novo-option.novo-accent-onyx{border-left:4px solid #526980}.novo-option.novo-fill-onyx{background:#526980;color:#fff}.novo-option.novo-fill-onyx:focus,.novo-option.novo-fill-onyx:hover{background:#748799}.novo-option.novo-fill-onyx:active{background:#415466}.novo-option.novo-accent-charcoal{border-left:4px solid #282828}.novo-option.novo-fill-charcoal{background:#282828;color:#fff}.novo-option.novo-fill-charcoal:focus,.novo-option.novo-fill-charcoal:hover{background:#535353}.novo-option.novo-fill-charcoal:active{background:#202020}.novo-option.novo-accent-moonlight{border-left:4px solid #1a242f}.novo-option.novo-fill-moonlight{background:#1a242f;color:#fff}.novo-option.novo-fill-moonlight:focus,.novo-option.novo-fill-moonlight:hover{background:#474f58}.novo-option.novo-fill-moonlight:active{background:#141c25}.novo-option.novo-accent-midnight{border-left:4px solid #202b38}.novo-option.novo-fill-midnight{background:#202b38;color:#fff}.novo-option.novo-fill-midnight:focus,.novo-option.novo-fill-midnight:hover{background:#4c555f}.novo-option.novo-fill-midnight:active{background:#19222c}.novo-option.novo-accent-darkness{border-left:4px solid #161f27}.novo-option.novo-fill-darkness{background:#161f27;color:#fff}.novo-option.novo-fill-darkness:focus,.novo-option.novo-fill-darkness:hover{background:#444b52}.novo-option.novo-fill-darkness:active{background:#11181f}.novo-option.novo-accent-navy{border-left:4px solid #0d2d42}.novo-option.novo-fill-navy{background:#0d2d42;color:#fff}.novo-option.novo-fill-navy:focus,.novo-option.novo-fill-navy:hover{background:#3d5767}.novo-option.novo-fill-navy:active{background:#0a2434}.novo-option.novo-accent-aqua{border-left:4px solid #3bafda}.novo-option.novo-fill-aqua{background:#3bafda;color:#000}.novo-option.novo-fill-aqua:focus,.novo-option.novo-fill-aqua:hover{background:#62bfe1}.novo-option.novo-fill-aqua:active{background:#2f8cae}.novo-option.novo-accent-ocean{border-left:4px solid #4a89dc}.novo-option.novo-fill-ocean{background:#4a89dc;color:#fff}.novo-option.novo-fill-ocean:focus,.novo-option.novo-fill-ocean:hover{background:#6ea0e3}.novo-option.novo-fill-ocean:active{background:#3b6db0}.novo-option.novo-accent-mint{border-left:4px solid #37bc9b}.novo-option.novo-fill-mint{background:#37bc9b;color:#000}.novo-option.novo-fill-mint:focus,.novo-option.novo-fill-mint:hover{background:#5fc9af}.novo-option.novo-fill-mint:active{background:#2c967c}.novo-option.novo-accent-grass{border-left:4px solid #8cc152}.novo-option.novo-fill-grass{background:#8cc152;color:#000}.novo-option.novo-fill-grass:focus,.novo-option.novo-fill-grass:hover{background:#a3cd74}.novo-option.novo-fill-grass:active{background:#709a41}.novo-option.novo-accent-sunflower{border-left:4px solid #f6b042}.novo-option.novo-fill-sunflower{background:#f6b042;color:#000}.novo-option.novo-fill-sunflower:focus,.novo-option.novo-fill-sunflower:hover{background:#f7bf67}.novo-option.novo-fill-sunflower:active{background:#c48c34}.novo-option.novo-accent-bittersweet{border-left:4px solid #eb6845}.novo-option.novo-fill-bittersweet{background:#eb6845;color:#fff}.novo-option.novo-fill-bittersweet:focus,.novo-option.novo-fill-bittersweet:hover{background:#ef866a}.novo-option.novo-fill-bittersweet:active{background:#bc5337}.novo-option.novo-accent-grapefruit{border-left:4px solid #da4453}.novo-option.novo-fill-grapefruit{background:#da4453;color:#fff}.novo-option.novo-fill-grapefruit:focus,.novo-option.novo-fill-grapefruit:hover{background:#e16975}.novo-option.novo-fill-grapefruit:active{background:#ae3642}.novo-option.novo-accent-carnation{border-left:4px solid #d770ad}.novo-option.novo-fill-carnation{background:#d770ad;color:#fff}.novo-option.novo-fill-carnation:focus,.novo-option.novo-fill-carnation:hover{background:#df8cbd}.novo-option.novo-fill-carnation:active{background:#ac598a}.novo-option.novo-accent-lavender{border-left:4px solid #967adc}.novo-option.novo-fill-lavender{background:#967adc;color:#fff}.novo-option.novo-fill-lavender:focus,.novo-option.novo-fill-lavender:hover{background:#ab94e3}.novo-option.novo-fill-lavender:active{background:#7861b0}.novo-option.novo-accent-mountain{border-left:4px solid #9678b6}.novo-option.novo-fill-mountain{background:#9678b6;color:#fff}.novo-option.novo-fill-mountain:focus,.novo-option.novo-fill-mountain:hover{background:#ab93c4}.novo-option.novo-fill-mountain:active{background:#786091}.novo-option.novo-accent-info{border-left:4px solid #4a89dc}.novo-option.novo-fill-info{background:#4a89dc;color:#fff}.novo-option.novo-fill-info:focus,.novo-option.novo-fill-info:hover{background:#6ea0e3}.novo-option.novo-fill-info:active{background:#3b6db0}.novo-option.novo-accent-positive{border-left:4px solid #4a89dc}.novo-option.novo-fill-positive{background:#4a89dc;color:#fff}.novo-option.novo-fill-positive:focus,.novo-option.novo-fill-positive:hover{background:#6ea0e3}.novo-option.novo-fill-positive:active{background:#3b6db0}.novo-option.novo-accent-success{border-left:4px solid #8cc152}.novo-option.novo-fill-success{background:#8cc152;color:#000}.novo-option.novo-fill-success:focus,.novo-option.novo-fill-success:hover{background:#a3cd74}.novo-option.novo-fill-success:active{background:#709a41}.novo-option.novo-accent-negative{border-left:4px solid #da4453}.novo-option.novo-fill-negative{background:#da4453;color:#fff}.novo-option.novo-fill-negative:focus,.novo-option.novo-fill-negative:hover{background:#e16975}.novo-option.novo-fill-negative:active{background:#ae3642}.novo-option.novo-accent-danger{border-left:4px solid #da4453}.novo-option.novo-fill-danger{background:#da4453;color:#fff}.novo-option.novo-fill-danger:focus,.novo-option.novo-fill-danger:hover{background:#e16975}.novo-option.novo-fill-danger:active{background:#ae3642}.novo-option.novo-accent-error{border-left:4px solid #da4453}.novo-option.novo-fill-error{background:#da4453;color:#fff}.novo-option.novo-fill-error:focus,.novo-option.novo-fill-error:hover{background:#e16975}.novo-option.novo-fill-error:active{background:#ae3642}.novo-option.novo-accent-warning{border-left:4px solid #f6b042}.novo-option.novo-fill-warning{background:#f6b042;color:#000}.novo-option.novo-fill-warning:focus,.novo-option.novo-fill-warning:hover{background:#f7bf67}.novo-option.novo-fill-warning:active{background:#c48c34}.novo-option.novo-accent-empty{border-left:4px solid #cccdcc}.novo-option.novo-fill-empty{background:#cccdcc;color:#000}.novo-option.novo-fill-empty:focus,.novo-option.novo-fill-empty:hover{background:#d6d7d6}.novo-option.novo-fill-empty:active{background:#a3a4a3}.novo-option.novo-accent-disabled{border-left:4px solid #bebebe}.novo-option.novo-fill-disabled{background:#bebebe;color:#000}.novo-option.novo-fill-disabled:focus,.novo-option.novo-fill-disabled:hover{background:#cbcbcb}.novo-option.novo-fill-disabled:active{background:#989898}.novo-option.novo-accent-background{border-left:4px solid #f7f7f7}.novo-option.novo-fill-background{background:#f7f7f7;color:#000}.novo-option.novo-fill-background:focus,.novo-option.novo-fill-background:hover{background:#f8f8f8}.novo-option.novo-fill-background:active{background:#c5c5c5}.novo-option.novo-accent-backgroundDark{border-left:4px solid #e2e2e2}.novo-option.novo-fill-backgroundDark{background:#e2e2e2;color:#000}.novo-option.novo-fill-backgroundDark:focus,.novo-option.novo-fill-backgroundDark:hover{background:#e7e7e7}.novo-option.novo-fill-backgroundDark:active{background:#b4b4b4}.novo-option.novo-accent-presentation{border-left:4px solid #5b6770}.novo-option.novo-fill-presentation{background:#5b6770;color:#fff}.novo-option.novo-fill-presentation:focus,.novo-option.novo-fill-presentation:hover{background:#7b858c}.novo-option.novo-fill-presentation:active{background:#485259}.novo-option.novo-accent-bullhorn{border-left:4px solid #ff6900}.novo-option.novo-fill-bullhorn{background:#ff6900;color:#000}.novo-option.novo-fill-bullhorn:focus,.novo-option.novo-fill-bullhorn:hover{background:#ff8733}.novo-option.novo-fill-bullhorn:active{background:#cc5400}.novo-option.novo-accent-pulse{border-left:4px solid #3bafda}.novo-option.novo-fill-pulse{background:#3bafda;color:#000}.novo-option.novo-fill-pulse:focus,.novo-option.novo-fill-pulse:hover{background:#62bfe1}.novo-option.novo-fill-pulse:active{background:#2f8cae}.novo-option.novo-accent-company{border-left:4px solid #39d}.novo-option.novo-fill-company{background:#39d;color:#fff}.novo-option.novo-fill-company:focus,.novo-option.novo-fill-company:hover{background:#5bade3}.novo-option.novo-fill-company:active{background:#287ab0}.novo-option.novo-accent-candidate{border-left:4px solid #4b7}.novo-option.novo-fill-candidate{background:#4b7;color:#000}.novo-option.novo-fill-candidate:focus,.novo-option.novo-fill-candidate:hover{background:#69c892}.novo-option.novo-fill-candidate:active{background:#36955f}.novo-option.novo-accent-lead{border-left:4px solid #a69}.novo-option.novo-fill-lead{background:#a69;color:#fff}.novo-option.novo-fill-lead:focus,.novo-option.novo-fill-lead:hover{background:#bb84ad}.novo-option.novo-fill-lead:active{background:#88517a}.novo-option.novo-accent-contact{border-left:4px solid #fa4}.novo-option.novo-fill-contact{background:#fa4;color:#000}.novo-option.novo-fill-contact:focus,.novo-option.novo-fill-contact:hover{background:#ffbb69}.novo-option.novo-fill-contact:active{background:#cc8836}.novo-option.novo-accent-opportunity{border-left:4px solid #625}.novo-option.novo-fill-opportunity{background:#625;color:#fff}.novo-option.novo-fill-opportunity:focus,.novo-option.novo-fill-opportunity:hover{background:#844e77}.novo-option.novo-fill-opportunity:active{background:#511b44}.novo-option.novo-accent-job{border-left:4px solid #b56}.novo-option.novo-fill-job{background:#b56;color:#fff}.novo-option.novo-fill-job:focus,.novo-option.novo-fill-job:hover{background:#c87784}.novo-option.novo-fill-job:active{background:#954451}.novo-option.novo-accent-submission{border-left:4px solid #a9adbb}.novo-option.novo-fill-submission{background:#a9adbb;color:#000}.novo-option.novo-fill-submission:focus,.novo-option.novo-fill-submission:hover{background:#babdc8}.novo-option.novo-fill-submission:active{background:#878a95}.novo-option.novo-accent-sendout{border-left:4px solid #747884}.novo-option.novo-fill-sendout{background:#747884;color:#fff}.novo-option.novo-fill-sendout:focus,.novo-option.novo-fill-sendout:hover{background:#8f939c}.novo-option.novo-fill-sendout:active{background:#5c6069}.novo-option.novo-accent-placement{border-left:4px solid #0b344f}.novo-option.novo-fill-placement{background:#0b344f;color:#fff}.novo-option.novo-fill-placement:focus,.novo-option.novo-fill-placement:hover{background:#3b5c72}.novo-option.novo-fill-placement:active{background:#08293f}.novo-option.novo-accent-note{border-left:4px solid #747884}.novo-option.novo-fill-note{background:#747884;color:#fff}.novo-option.novo-fill-note:focus,.novo-option.novo-fill-note:hover{background:#8f939c}.novo-option.novo-fill-note:active{background:#5c6069}.novo-option.novo-accent-contract{border-left:4px solid #454ea0}.novo-option.novo-fill-contract{background:#454ea0;color:#fff}.novo-option.novo-fill-contract:focus,.novo-option.novo-fill-contract:hover{background:#6a71b3}.novo-option.novo-fill-contract:active{background:#373e80}.novo-option.novo-accent-jobCode{border-left:4px solid #696d79}.novo-option.novo-fill-jobCode{background:#696d79;color:#fff}.novo-option.novo-fill-jobCode:focus,.novo-option.novo-fill-jobCode:hover{background:#878a93}.novo-option.novo-fill-jobCode:active{background:#545760}.novo-option.novo-accent-earnCode{border-left:4px solid #696d79}.novo-option.novo-fill-earnCode{background:#696d79;color:#fff}.novo-option.novo-fill-earnCode:focus,.novo-option.novo-fill-earnCode:hover{background:#878a93}.novo-option.novo-fill-earnCode:active{background:#545760}.novo-option.novo-accent-invoiceStatement{border-left:4px solid #696d79}.novo-option.novo-fill-invoiceStatement{background:#696d79;color:#fff}.novo-option.novo-fill-invoiceStatement:focus,.novo-option.novo-fill-invoiceStatement:hover{background:#878a93}.novo-option.novo-fill-invoiceStatement:active{background:#545760}.novo-option.novo-accent-billableCharge{border-left:4px solid #696d79}.novo-option.novo-fill-billableCharge{background:#696d79;color:#fff}.novo-option.novo-fill-billableCharge:focus,.novo-option.novo-fill-billableCharge:hover{background:#878a93}.novo-option.novo-fill-billableCharge:active{background:#545760}.novo-option.novo-accent-payableCharge{border-left:4px solid #696d79}.novo-option.novo-fill-payableCharge{background:#696d79;color:#fff}.novo-option.novo-fill-payableCharge:focus,.novo-option.novo-fill-payableCharge:hover{background:#878a93}.novo-option.novo-fill-payableCharge:active{background:#545760}.novo-option.novo-accent-user{border-left:4px solid #696d79}.novo-option.novo-fill-user{background:#696d79;color:#fff}.novo-option.novo-fill-user:focus,.novo-option.novo-fill-user:hover{background:#878a93}.novo-option.novo-fill-user:active{background:#545760}.novo-option.novo-accent-corporateUser{border-left:4px solid #696d79}.novo-option.novo-fill-corporateUser{background:#696d79;color:#fff}.novo-option.novo-fill-corporateUser:focus,.novo-option.novo-fill-corporateUser:hover{background:#878a93}.novo-option.novo-fill-corporateUser:active{background:#545760}.novo-option.novo-accent-distributionList{border-left:4px solid #696d79}.novo-option.novo-fill-distributionList{background:#696d79;color:#fff}.novo-option.novo-fill-distributionList:focus,.novo-option.novo-fill-distributionList:hover{background:#878a93}.novo-option.novo-fill-distributionList:active{background:#545760}.novo-option.novo-accent-credential{border-left:4px solid #696d79}.novo-option.novo-fill-credential{background:#696d79;color:#fff}.novo-option.novo-fill-credential:focus,.novo-option.novo-fill-credential:hover{background:#878a93}.novo-option.novo-fill-credential:active{background:#545760}.novo-option.novo-accent-person{border-left:4px solid #696d79}.novo-option.novo-fill-person{background:#696d79;color:#fff}.novo-option.novo-fill-person:focus,.novo-option.novo-fill-person:hover{background:#878a93}.novo-option.novo-fill-person: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 [
@@ -25558,27 +25655,6 @@
         function NovoBaseTextElement(element) {
             this.element = element;
         }
-        Object.defineProperty(NovoBaseTextElement.prototype, "hb_isSizeSmall", {
-            get: function () {
-                return this.size === 'small';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NovoBaseTextElement.prototype, "hb_isSizeLarge", {
-            get: function () {
-                return this.size === 'large';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NovoBaseTextElement.prototype, "hb_isSizeDefault", {
-            get: function () {
-                return !['small', 'large'].includes(this.size);
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(NovoBaseTextElement.prototype, "hb_isWeightThin", {
             get: function () {
                 return this.weight === 'thin';
@@ -25609,7 +25685,11 @@
         });
         Object.defineProperty(NovoBaseTextElement.prototype, "hb_classBinding", {
             get: function () {
-                return [this.color ? "text-color-" + this.color : null, this.lineLength ? "text-length-" + this.lineLength : null]
+                return [
+                    this.color ? "text-color-" + this.color : null,
+                    this.lineLength ? "text-length-" + this.lineLength : null,
+                    this.size ? "text-size-" + this.size : null,
+                ]
                     .filter(Boolean)
                     .join(' ');
             },
@@ -25636,9 +25716,6 @@
         weight: [{ type: i0.Input }],
         lineLength: [{ type: i0.Input }],
         color: [{ type: i0.Input }],
-        hb_isSizeSmall: [{ type: i0.HostBinding, args: ['class.text-size-small',] }],
-        hb_isSizeLarge: [{ type: i0.HostBinding, args: ['class.text-size-large',] }],
-        hb_isSizeDefault: [{ type: i0.HostBinding, args: ['class.text-size-default',] }],
         hb_isWeightThin: [{ type: i0.HostBinding, args: ['class.text-weight-thin',] }],
         hb_isWeightMedium: [{ type: i0.HostBinding, args: ['class.text-weight-medium',] }],
         hb_isWeightBold: [{ type: i0.HostBinding, args: ['class.text-weight-bold',] }],
@@ -25649,7 +25726,9 @@
         error: [{ type: i0.HostBinding, args: ['class.text-color-negative',] }, { type: i0.Input }],
         marginBefore: [{ type: i0.HostBinding, args: ['class.margin-before',] }, { type: i0.Input }],
         marginAfter: [{ type: i0.HostBinding, args: ['class.margin-after',] }, { type: i0.Input }],
-        nowrap: [{ type: i0.HostBinding, args: ['class.text-nowrap',] }, { type: i0.Input }]
+        nowrap: [{ type: i0.HostBinding, args: ['class.text-nowrap',] }, { type: i0.Input }],
+        smaller: [{ type: i0.HostBinding, args: ['class.text-size-smaller',] }, { type: i0.Input }],
+        larger: [{ type: i0.HostBinding, args: ['class.text-size-larger',] }, { type: i0.Input }]
     };
     __decorate([
         BooleanInput(),
@@ -25675,6 +25754,14 @@
         BooleanInput(),
         __metadata("design:type", Boolean)
     ], NovoBaseTextElement.prototype, "nowrap", void 0);
+    __decorate([
+        BooleanInput(),
+        __metadata("design:type", Boolean)
+    ], NovoBaseTextElement.prototype, "smaller", void 0);
+    __decorate([
+        BooleanInput(),
+        __metadata("design:type", Boolean)
+    ], NovoBaseTextElement.prototype, "larger", void 0);
     /**
      * Tag Example
@@ -25697,7 +25784,10 @@
         { type: i0.Component, args: [{
                     selector: 'novo-caption,[novo-caption]',
                     template: " <ng-content></ng-content> ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:#4f5361;display:inline;font-family:Roboto,sans-serif;font-size:.9rem;font-weight:400;line-height:1.2rem}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:.9rem}:host.text-size-small{font-size:.8rem}:host.text-size-large{font-size:1rem}: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:#202b38}: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:#202b38}: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-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}: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.text-weight-thin{font-weight:200}:host.text-weight-default{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-bold{font-weight:700}: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 novo-icon{font-size:1em;vertical-align:top}"]
+                    host: {
+                        class: 'novo-caption',
+                    },
+                    styles: [":host{color:#4f5361;display:inline;font-size:var(--font-size-caption);font-weight:400;line-height:1.375em}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.4rem}: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:.8rem}:host.text-size-larger{font-size:1rem}: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:#202b38}: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:#202b38}: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.text-weight-thin{font-weight:200}:host.text-weight-default{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-bold{font-weight:700}: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 novo-icon{font-size:1em;vertical-align:top}"]
                 },] }
     ];
@@ -25722,7 +25812,10 @@
         { type: i0.Component, args: [{
                     selector: 'novo-label,[novo-label]',
                     template: " <ng-content></ng-content> ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:inherit;display:inline-block;font-family:Roboto,sans-serif;font-size:1.1rem;font-weight:500;line-height:1.2rem;overflow-wrap:break-word;text-transform:uppercase;transition:.2s ease-out;word-break:word-break}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:1.1rem}:host.text-size-small{font-size:1rem}:host.text-size-large{font-size:1.2rem}: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:#202b38}: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:#202b38}: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-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}: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: {
+                        class: 'novo-label',
+                    },
+                    styles: [":host{color:inherit;display:inline-block;font-size:var(--font-size-label);font-weight:500;line-height:1.375em;overflow-wrap:break-word;text-transform:uppercase;transition:.2s ease-out;word-break:word-break}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.4rem}: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:1rem}:host.text-size-larger{font-size:1.2rem}: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:#202b38}: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:#202b38}: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}"]
                 },] }
     ];
@@ -25748,7 +25841,10 @@
                     selector: 'novo-link',
                     template: "<a [attr.href]=\"href\"><ng-content></ng-content></a>",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:inline;font-family:Roboto,sans-serif;font-size:1em;font-weight:400;line-height:inherit}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:1em}:host.text-size-small{font-size:.8em}:host.text-size-large{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:#202b38}: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:#202b38}: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-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}: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.text-weight-thin{font-weight:200}:host.text-weight-default{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-bold{font-weight:700}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}"]
+                    host: {
+                        class: 'novo-link',
+                    },
+                    styles: [":host{display:inline;font-size:1em;font-weight:400;line-height:inherit}:host::ng-deep novo-icon{font-size:1em;vertical-align:top}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.4rem}: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:#202b38}: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:#202b38}: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.text-weight-thin{font-weight:200}:host.text-weight-default{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-bold{font-weight:700}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}"]
                 },] }
     ];
     NovoLink.propDecorators = {
@@ -25776,7 +25872,11 @@
         { type: i0.Component, args: [{
                     selector: 'novo-text,[novo-text]',
                     template: " <ng-content></ng-content> ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:inherit;display:inline;font-family:Roboto,sans-serif;font-size:1.2rem;font-weight:400;line-height:1.5rem}:host.text-block{display:block;line-height:1.5rem;max-width:75ch;min-width:55ch}:host::ng-deep novo-icon{font-size:1.2em;vertical-align:top}:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:1.2rem}:host.text-size-small{font-size:1rem}:host.text-size-large{font-size:1.4rem}: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:#202b38}: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:#202b38}: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-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}: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.text-weight-thin{font-weight:200}:host.text-weight-default{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-bold{font-weight:700}: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}"]
+                    encapsulation: i0.ViewEncapsulation.None,
+                    host: {
+                        class: 'novo-text',
+                    },
+                    styles: [".novo-text{color:inherit;display:inline;font-size:var(--font-size-text);font-weight:400;line-height:1.375em}.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}.novo-text.text-nowrap{white-space:nowrap}.novo-text.text-size-default{font-size:inherit}.novo-text.text-size-body{font-size:1.4rem}.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:1rem}.novo-text.text-size-larger{font-size:1.6rem}.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:#202b38}.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:#202b38}.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.text-weight-thin{font-weight:200}.novo-text.text-weight-default{font-weight:400}.novo-text.text-weight-medium{font-weight:500}.novo-text.text-weight-bold{font-weight:700}.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}"]
                 },] }
     ];
     NovoText.propDecorators = {
@@ -25808,7 +25908,10 @@
         { type: i0.Component, args: [{
                     selector: 'novo-title,[novo-title]',
                     template: " <ng-content></ng-content> ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:inherit;display:block;font-family:Roboto,sans-serif;font-size:1.8rem;font-weight:500;line-height:1.2rem;text-overflow:ellipsis}:host,:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:1.8rem}:host.text-size-small{font-size:1.5rem}:host.text-size-large{font-size:2.1rem}: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:#202b38}: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:#202b38}: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-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}: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::ng-deep novo-icon{font-size:1em;vertical-align:top}"]
+                    host: {
+                        class: 'novo-title',
+                    },
+                    styles: [":host{color:inherit;display:block;font-size:var(--font-size-title);font-weight:500;line-height:1.175em;text-overflow:ellipsis}:host,:host.text-nowrap{white-space:nowrap}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.4rem}: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:1.6rem}:host.text-size-larger{font-size:2.6rem}: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:#202b38}: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:#202b38}: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::ng-deep novo-icon{font-size:1em;vertical-align:top}"]
                 },] }
     ];
@@ -25832,6 +25935,9 @@
                         BackgroundColorDirective,
                         TextColorDirective,
                         BorderDirective,
+                        GapDirective,
+                        AccentColorDirective,
+                        FillColorDirective,
                     ],
                     declarations: [
                         NovoTemplate,
@@ -25845,6 +25951,9 @@
                         BackgroundColorDirective,
                         TextColorDirective,
                         BorderDirective,
+                        GapDirective,
+                        AccentColorDirective,
+                        FillColorDirective,
                     ],
                 },] }
     ];
@@ -25898,10 +26007,10 @@
                     var colorPalette = value || this.defaultColor;
                     if (colorPalette !== this._color) {
                         if (this._color) {
-                            this._elementRef.nativeElement.classList.remove("novo-" + this._color);
+                            this._elementRef.nativeElement.classList.remove("novo-color-" + this._color);
                         }
                         if (colorPalette) {
-                            this._elementRef.nativeElement.classList.add("novo-" + colorPalette);
+                            this._elementRef.nativeElement.classList.add("novo-color-" + colorPalette);
                         }
                         this._color = colorPalette;
                     }
@@ -26021,6 +26130,44 @@
         }(base));
     }
+    /** Mixin to augment a directive with a `size` property. */
+    function mixinSize(base, defaultSize) {
+        return /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var _this = _super.apply(this, __spread(args)) || this;
+                _this.defaultSize = defaultSize;
+                // Set the default size that can be specified from the mixin.
+                _this.size = defaultSize;
+                return _this;
+            }
+            Object.defineProperty(class_1.prototype, "size", {
+                get: function () {
+                    return this._size;
+                },
+                set: function (value) {
+                    var size = value || this.defaultSize;
+                    if (size !== this._size) {
+                        if (this._size) {
+                            this._elementRef.nativeElement.classList.remove("novo-size-" + this._size);
+                        }
+                        if (size) {
+                            this._elementRef.nativeElement.classList.add("novo-size-" + size);
+                        }
+                        this._size = size;
+                    }
+                },
+                enumerable: false,
+                configurable: true
+            });
+            return class_1;
+        }(base));
+    }
     /** Mixin to augment a directive with a `tabIndex` property. */
     function mixinTabIndex(base, defaultTabIndex) {
         if (defaultTabIndex === void 0) { defaultTabIndex = 0; }
@@ -26539,7 +26686,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-dropdown',
                     template: "\n    <ng-content select=\"button,novo-button,[dropdownTrigger]\" #trigger></ng-content>\n    <novo-overlay-template [parent]=\"element\" [width]=\"width\" [position]=\"side\" [scrollStrategy]=\"scrollStrategy\">\n      <div #panel class=\"dropdown-container {{ containerClass }}\" [style.height.px]=\"height\" [class.has-height]=\"!!height\">\n        <ng-content></ng-content>\n      </div>\n    </novo-overlay-template>\n  ",
-                    providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoDropdownElement }],
+                    // providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoDropdownElement }],
                     host: {
                         '[attr.tabIndex]': 'disabled ? -1 : 0',
                     }
@@ -26691,6 +26838,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NovoIconComponent.prototype, "hb_classBinding", {
+            get: function () {
+                return [this.color ? "text-color-" + this.color : null, this.size ? "text-size-" + this.size : null].filter(Boolean).join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoIconComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             if (this.element.nativeElement.textContent.trim()) {
@@ -26718,15 +26872,26 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     NovoIconComponent.propDecorators = {
-        raised: [{ type: i0.HostBinding, args: ['attr.raised',] }, { type: i0.Input }],
-        size: [{ type: i0.HostBinding, args: ['attr.size',] }, { type: i0.Input }],
+        raised: [{ type: i0.HostBinding, args: ['class.novo-icon-raised',] }, { type: i0.Input }],
         theme: [{ type: i0.HostBinding, args: ['attr.theme',] }, { type: i0.Input }],
-        color: [{ type: i0.HostBinding, args: ['attr.color',] }, { type: i0.Input }],
+        color: [{ type: i0.Input }],
         role: [{ type: i0.HostBinding, args: ['attr.role',] }],
         ariaLabel: [{ type: i0.HostBinding, args: ['attr.aria-label',] }],
+        size: [{ type: i0.Input }],
+        smaller: [{ type: i0.HostBinding, args: ['class.text-size-smaller',] }, { type: i0.Input }],
+        larger: [{ type: i0.HostBinding, args: ['class.text-size-larger',] }, { type: i0.Input }],
         alt: [{ type: i0.Input }],
-        name: [{ type: i0.Input }]
+        name: [{ type: i0.Input }],
+        hb_classBinding: [{ type: i0.HostBinding, args: ['class',] }]
     };
+    __decorate([
+        BooleanInput(),
+        __metadata("design:type", Boolean)
+    ], NovoIconComponent.prototype, "smaller", void 0);
+    __decorate([
+        BooleanInput(),
+        __metadata("design:type", Boolean)
+    ], NovoIconComponent.prototype, "larger", void 0);
     var NovoIconModule = /** @class */ (function () {
         function NovoIconModule() {
@@ -26752,6 +26917,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-list',
                     host: {
+                        class: 'novo-list',
                         '[class.vertical-list]': 'direction === "vertical"',
                         '[class.horizontal-list]': 'direction === "horizontal"',
                         '[attr.theme]': 'theme',
@@ -26769,23 +26935,20 @@
     var NovoItemAvatarElement = /** @class */ (function () {
         function NovoItemAvatarElement() {
         }
-        NovoItemAvatarElement.prototype.ngOnChanges = function (changes) {
-            this.iconClass = this.icon ? "bhi-" + this.icon : null;
-            this.classMap = [this.iconClass, this.icon];
-        };
-        NovoItemAvatarElement.prototype.ngOnInit = function () {
-            this.ngOnChanges();
-        };
         return NovoItemAvatarElement;
     }());
     NovoItemAvatarElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-avatar',
-                    template: " <i *ngIf=\"iconClass\" [ngClass]=\"classMap\" theme=\"contained\"></i> "
+                    selector: 'item-avatar, novo-item-avatar',
+                    template: " <novo-icon *ngIf=\"icon\" [color]=\"color || icon\">{{ icon }}</novo-icon> ",
+                    host: {
+                        class: 'novo-item-avatar',
+                    }
                 },] }
     ];
     NovoItemAvatarElement.propDecorators = {
-        icon: [{ type: i0.Input }]
+        icon: [{ type: i0.Input }],
+        color: [{ type: i0.Input }]
     };
     var NovoItemTitleElement = /** @class */ (function () {
         function NovoItemTitleElement() {
@@ -26794,8 +26957,11 @@
     }());
     NovoItemTitleElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-title',
-                    template: " <h6><ng-content></ng-content></h6> "
+                    selector: 'item-title, novo-item-title',
+                    template: "<ng-content></ng-content>",
+                    host: {
+                        class: 'novo-item-title',
+                    }
                 },] }
     ];
     var NovoItemHeaderElement = /** @class */ (function () {
@@ -26805,8 +26971,11 @@
     }());
     NovoItemHeaderElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-header',
-                    template: "\n    <ng-content select=\"item-avatar\"></ng-content>\n    <ng-content select=\"item-title\"></ng-content>\n    <ng-content select=\"item-header-end\"></ng-content>\n  "
+                    selector: 'item-header, novo-item-header',
+                    template: "\n    <novo-title class=\"novo-item-header-container\" smaller>\n      <ng-content select=\"item-avatar, novo-item-avatar\"></ng-content>\n      <ng-content select=\"item-title, novo-item-title\"></ng-content>\n      <ng-content select=\"item-header-end, novo-item-header-end\"></ng-content>\n    </novo-title>\n  ",
+                    host: {
+                        class: 'novo-item-header',
+                    }
                 },] }
     ];
     var NovoItemDateElement = /** @class */ (function () {
@@ -26816,8 +26985,11 @@
     }());
     NovoItemDateElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-header-end',
-                    template: " <ng-content></ng-content> "
+                    selector: 'item-header-end, novo-item-header-end',
+                    template: " <ng-content></ng-content> ",
+                    host: {
+                        class: 'novo-item-header-end',
+                    }
                 },] }
     ];
     var NovoItemContentElement = /** @class */ (function () {
@@ -26827,8 +26999,9 @@
     }());
     NovoItemContentElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-content',
+                    selector: 'item-content, novo-item-content',
                     host: {
+                        class: 'novo-item-content',
                         '[class.vertical-list]': 'direction === "vertical"',
                         '[class.horizontal-list]': 'direction === "horizontal"',
                     },
@@ -26845,8 +27018,11 @@
     }());
     NovoItemEndElement.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'item-end',
-                    template: " <ng-content></ng-content> "
+                    selector: 'item-end, novo-item-end',
+                    template: " <ng-content></ng-content> ",
+                    host: {
+                        class: 'novo-item-end',
+                    }
                 },] }
     ];
     var NovoListItemElement = /** @class */ (function () {
@@ -26862,7 +27038,10 @@
     NovoListItemElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-list-item, a[list-item], button[list-item]',
-                    template: "\n    <div class=\"list-item\" [ngClass]=\"{ avatar: avatar }\" *ngIf=\"_content || _header\">\n      <ng-content select=\"item-header\"></ng-content>\n      <ng-content select=\"item-content\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <ng-content select=\"item-end\"></ng-content>\n  "
+                    template: "\n    <div class=\"list-item\" [ngClass]=\"{ avatar: avatar }\" *ngIf=\"_content || _header\">\n      <ng-content select=\"item-header, novo-item-header\"></ng-content>\n      <ng-content select=\"item-content, novo-item-content\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <ng-content select=\"item-end, novo-item-end\"></ng-content>\n  ",
+                    host: {
+                        class: 'novo-list-item',
+                    }
                 },] }
     ];
     NovoListItemElement.ctorParameters = function () { return [
@@ -26881,7 +27060,7 @@
     }());
     NovoListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
+                    imports: [common.CommonModule, NovoCommonModule, NovoIconModule],
                     declarations: [
                         NovoListElement,
                         NovoListItemElement,
@@ -27045,7 +27224,7 @@
         });
         NovoIsLoadingDirective.prototype.createViews = function (templates) {
             var _this = this;
-            return templates && templates.map(function (v) { return _this.viewContainer.createEmbeddedView(v); });
+            return templates && templates.map(function (v, i) { return _this.viewContainer.createEmbeddedView(v, null, i); });
         };
         NovoIsLoadingDirective.prototype.destroyViews = function (views) {
             var e_1, _a;
@@ -28749,7 +28928,7 @@
         { 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>",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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}"]
+                    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}"]
                 },] }
     ];
     NovoCalendarElement.ctorParameters = function () { return [
@@ -28807,7 +28986,7 @@
                     selector: 'novo-month-select',
                     template: "<div *ngFor=\"let month of monthNames; let i = index\" (click)=\"onSelect($event, i)\">\n  <div class=\"month\" [class.selected]=\"_isSelected(i)\" [attr.data-automation-id]=\"month\">\n    {{ month }}</div>\n</div>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:grid;flex:1;grid-template-columns:1fr 1fr 1fr}:host .month{border-radius:.4rem;cursor:pointer;padding:1rem}:host .month.selected,:host .month:hover{background-color:#4a89dc;color:#fff}"]
+                    styles: [":host{display:grid;flex:1;grid-template-columns:1fr 1fr 1fr}:host .month{border-radius:.4rem;cursor:pointer;padding:1rem}:host .month.selected,:host .month:hover{background-color:#4a89dc;color:#fff}"]
                 },] }
     ];
     NovoMonthSelectElement.ctorParameters = function () { return [
@@ -28953,7 +29132,7 @@
                     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>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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.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-bottom-right-radius:0;border-radius:50%;border-top-right-radius:0;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-bottom-left-radius:0;border-radius:50%;border-top-left-radius: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}"]
+                    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.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-bottom-right-radius:0;border-radius:50%;border-top-right-radius:0;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-bottom-left-radius:0;border-radius:50%;border-top-left-radius: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}"]
                 },] }
     ];
     NovoMonthViewElement.ctorParameters = function () { return [
@@ -29038,7 +29217,7 @@
                     selector: 'novo-year-select',
                     template: "<div *ngFor=\"let year of years\" (click)=\"onSelect($event, year)\">\n  <div class=\"year\" [class.selected]=\"_isSelected(year)\" [attr.data-automation-id]=\"year\">{{ year }}</div>\n</div>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:grid;flex:1;grid-template-columns:1fr 1fr 1fr 1fr;max-height:320px;overflow-y:scroll}:host .year{border-radius:.4rem;cursor:pointer;padding:1rem}:host .year.selected,:host .year:hover{background-color:#4a89dc;color:#fff}"]
+                    styles: [":host{display:grid;flex:1;grid-template-columns:1fr 1fr 1fr 1fr;max-height:320px;overflow-y:scroll}:host .year{border-radius:.4rem;cursor:pointer;padding:1rem}:host .year.selected,:host .year:hover{background-color:#4a89dc;color:#fff}"]
                 },] }
     ];
     NovoYearSelectElement.ctorParameters = function () { return [
@@ -29178,7 +29357,7 @@
                         '[attr.data-automation-id]': 'cardAutomationId',
                         '[class.loading]': 'loading || config.loading',
                     },
-                    template: "\n    <!--Loading-->\n    <div class=\"card-loading-container\" *ngIf=\"loading || config.loading\">\n      <novo-loading theme=\"line\" [attr.data-automation-id]=\"cardAutomationId + '-loading'\"></novo-loading>\n    </div>\n    <!--Card Header-->\n    <header *ngIf=\"title || config.title\">\n      <div class=\"title\">\n        <!--Grabber Icon-->\n        <span tooltip=\"{{ labels.move }}\" tooltipPosition=\"bottom-right\">\n          <novo-icon *ngIf=\"move || config.move\" [attr.data-automation-id]=\"cardAutomationId + '-move'\">move</novo-icon>\n        </span>\n        <!--Card Title-->\n        <h3 [attr.data-automation-id]=\"cardAutomationId + '-title'\">\n          <span [tooltip]=\"iconTooltip\" tooltipPosition=\"right\"><i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i></span>\n          {{ title || config.title }}\n        </h3>\n      </div>\n      <!--Card Actions-->\n      <div class=\"actions\" [attr.data-automation-id]=\"cardAutomationId + '-actions'\">\n        <ng-content select=\"novo-card-actions\"></ng-content>\n        <novo-button\n          theme=\"icon\"\n          icon=\"refresh\"\n          (click)=\"toggleRefresh()\"\n          *ngIf=\"refresh || config.refresh\"\n          [attr.data-automation-id]=\"cardAutomationId + '-refresh'\"\n          tooltip=\"{{ labels.refresh }}\"\n          tooltipPosition=\"bottom-left\"\n        ></novo-button>\n\n        <novo-button\n          theme=\"icon\"\n          icon=\"close-o\"\n          (click)=\"toggleClose()\"\n          *ngIf=\"close || config.close\"\n          [attr.data-automation-id]=\"cardAutomationId + '-close'\"\n          tooltip=\"{{ labels.close }}\"\n          tooltipPosition=\"bottom-left\"\n        ></novo-button>\n      </div>\n    </header>\n    <!--Content (transcluded)-->\n    <ng-content *ngIf=\"!(loading || config.loading) && !(message || config.message)\"></ng-content>\n    <!--Error/Empty Message-->\n    <p\n      class=\"card-message\"\n      *ngIf=\"!(loading || config.loading) && (message || config.message)\"\n      [attr.data-automation-id]=\"cardAutomationId + '-message'\"\n    >\n      <i *ngIf=\"messageIconClass\" [ngClass]=\"messageIconClass\"></i> <span [innerHtml]=\"message || config.message\"></span>\n    </p>\n    <!--Card Footer-->\n    <ng-content\n      *ngIf=\"!(loading || config.loading) && !(message || config.message)\"\n      select=\"footer,novo-card-footer,[novo-card-footer],[novoCardFooter]\"\n    ></ng-content>\n  "
+                    template: "\n    <!--Loading-->\n    <div class=\"card-loading-container\" *ngIf=\"loading || config.loading\">\n      <novo-loading theme=\"line\" [attr.data-automation-id]=\"cardAutomationId + '-loading'\"></novo-loading>\n    </div>\n    <!--Card Header-->\n    <header *ngIf=\"title || config.title\">\n      <div class=\"title\">\n        <!--Grabber Icon-->\n        <novo-icon\n          *ngIf=\"move || config.move\"\n          tooltip=\"{{ labels.move }}\"\n          tooltipPosition=\"bottom-right\"\n          [attr.data-automation-id]=\"cardAutomationId + '-move'\"\n          >move</novo-icon\n        >\n        <!--Card Title-->\n        <h3 [attr.data-automation-id]=\"cardAutomationId + '-title'\">\n          <span [tooltip]=\"iconTooltip\" tooltipPosition=\"right\"><i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i></span>\n          {{ title || config.title }}\n        </h3>\n      </div>\n      <!--Card Actions-->\n      <div class=\"actions\" [attr.data-automation-id]=\"cardAutomationId + '-actions'\">\n        <ng-content select=\"novo-card-actions\"></ng-content>\n        <novo-button\n          theme=\"icon\"\n          icon=\"refresh\"\n          (click)=\"toggleRefresh()\"\n          *ngIf=\"refresh || config.refresh\"\n          [attr.data-automation-id]=\"cardAutomationId + '-refresh'\"\n          tooltip=\"{{ labels.refresh }}\"\n          tooltipPosition=\"bottom-left\"\n        ></novo-button>\n\n        <novo-button\n          theme=\"icon\"\n          icon=\"close-o\"\n          (click)=\"toggleClose()\"\n          *ngIf=\"close || config.close\"\n          [attr.data-automation-id]=\"cardAutomationId + '-close'\"\n          tooltip=\"{{ labels.close }}\"\n          tooltipPosition=\"bottom-left\"\n        ></novo-button>\n      </div>\n    </header>\n    <!--Content (transcluded)-->\n    <ng-content *ngIf=\"!(loading || config.loading) && !(message || config.message)\"></ng-content>\n    <!--Error/Empty Message-->\n    <p\n      class=\"card-message\"\n      *ngIf=\"!(loading || config.loading) && (message || config.message)\"\n      [attr.data-automation-id]=\"cardAutomationId + '-message'\"\n    >\n      <i *ngIf=\"messageIconClass\" [ngClass]=\"messageIconClass\"></i> <span [innerHtml]=\"message || config.message\"></span>\n    </p>\n    <!--Card Footer-->\n    <ng-content\n      *ngIf=\"!(loading || config.loading) && !(message || config.message)\"\n      select=\"footer,novo-card-footer,[novo-card-footer],[novoCardFooter]\"\n    ></ng-content>\n  "
                 },] }
     ];
     CardElement.ctorParameters = function () { return [
@@ -29421,7 +29600,9 @@
         __metadata("design:type", Boolean)
     ], NovoNavElement.prototype, "condensed", void 0);
     var NovoTabElement = /** @class */ (function () {
-        function NovoTabElement(nav) {
+        function NovoTabElement(nav, el, cdr) {
+            this.el = el;
+            this.cdr = cdr;
             this.role = 'tab';
             this.active = false;
             this.disabled = false;
@@ -29429,6 +29610,13 @@
             this.onlyText = true;
             this.nav = nav;
             this.nav.add(this);
+            var tablink = el.nativeElement.querySelector('.novo-tab-link');
+            if (tablink) {
+                for (var i = 0; i < tablink.childNodes.length; i++) {
+                    if (tablink.childNodes[i].nodeType !== Node.TEXT_NODE)
+                        this.onlyText = false;
+                }
+            }
         }
         Object.defineProperty(NovoTabElement.prototype, "hb_textOnly", {
             get: function () {
@@ -29437,18 +29625,12 @@
             enumerable: false,
             configurable: true
         });
-        NovoTabElement.prototype.ngAfterViewInit = function () {
-            var nodes = this.tablink.nativeElement.childNodes;
-            for (var i = 0; i < nodes.length; i++) {
-                if (nodes[i].nodeType !== Node.TEXT_NODE)
-                    this.onlyText = false;
-            }
-        };
         NovoTabElement.prototype.select = function () {
             if (!this.disabled) {
                 this.activeChange.emit(true);
                 this.nav.select(this);
             }
+            this.cdr.detectChanges();
         };
         return NovoTabElement;
     }());
@@ -29461,11 +29643,14 @@
                         '[class.disabled]': 'disabled',
                         '[attr.role]': 'tab',
                     },
-                    template: "\n    <div #tablink class=\"novo-tab-link\">\n      <ng-content></ng-content>\n    </div>\n    <span class=\"indicator\"></span>\n  "
+                    template: "\n    <div #tablink class=\"novo-tab-link\">\n      <ng-content></ng-content>\n    </div>\n    <span class=\"indicator\"></span>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     NovoTabElement.ctorParameters = function () { return [
-        { type: NovoNavElement }
+        { type: NovoNavElement },
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     NovoTabElement.propDecorators = {
         role: [{ type: i0.HostBinding, args: ['attr.role',] }],
@@ -29515,13 +29700,20 @@
         disabled: [{ type: i0.Input }]
     };
     var NovoTabLinkElement = /** @class */ (function () {
-        function NovoTabLinkElement(nav) {
+        function NovoTabLinkElement(nav, router, cdr, link) {
+            this.router = router;
+            this.cdr = cdr;
+            this.link = link;
             this.role = 'tab';
             this.active = false;
             this.disabled = false;
             this.nav = nav;
             this.nav.add(this);
+            if (this.isLinkActive(this.link)) {
+                this.nav.select(this);
+            }
         }
+        NovoTabLinkElement.prototype.ngOnInit = function () { };
         NovoTabLinkElement.prototype.select = function () {
             if (!this.disabled) {
                 this.nav.select(this);
@@ -29529,8 +29721,12 @@
                     var el = document.querySelector("#" + this.spy);
                     el === null || el === void 0 ? void 0 : el.scrollIntoView(true);
                 }
+                this.cdr.detectChanges();
             }
         };
+        NovoTabLinkElement.prototype.isLinkActive = function (link) {
+            return link && link.urlTree ? this.router.isActive(link.urlTree, false) : false;
+        };
         return NovoTabLinkElement;
     }());
     NovoTabLinkElement.decorators = [
@@ -29541,11 +29737,15 @@
                         '[class.active]': 'active',
                         '[class.disabled]': 'disabled',
                     },
-                    template: "\n    <div class=\"novo-tab-link\">\n      <ng-content></ng-content>\n    </div>\n    <span class=\"indicator\"></span>\n  "
+                    template: "\n    <div class=\"novo-tab-link\">\n      <ng-content></ng-content>\n    </div>\n    <span class=\"indicator\"></span>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     NovoTabLinkElement.ctorParameters = function () { return [
-        { type: NovoNavElement }
+        { type: NovoNavElement },
+        { type: router.Router },
+        { type: i0.ChangeDetectorRef },
+        { type: router.RouterLink, decorators: [{ type: i0.Optional }] }
     ]; };
     NovoTabLinkElement.propDecorators = {
         role: [{ type: i0.HostBinding, args: ['attr.role',] }],
@@ -29784,9 +29984,9 @@
         NovoCheckboxElement.prototype.select = function (event) {
             Helpers.swallowEvent(event);
             if (!this.disabled) {
-                this.model = !this.model;
-                this.onModelChange(this.model);
-                this.onSelect.emit({ originalEvent: event, value: this.model });
+                this.checked = !this.checked;
+                this.onModelChange(this.checked);
+                this.onSelect.emit({ originalEvent: event, value: this.checked });
             }
         };
         // Implemented as part of ControlValueAccessor.
@@ -29883,8 +30083,12 @@
         { type: i0.Component, args: [{
                     selector: 'novo-checkbox',
                     providers: [CHECKBOX_VALUE_ACCESSOR],
-                    template: "\n    <div class=\"check-box-group\" [class.checked]=\"model\" [class.disabled]=\"disabled\">\n      <input\n        #input\n        type=\"checkbox\"\n        [required]=\"required\"\n        [checked]=\"checked\"\n        [id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-checked]=\"_getAriaChecked()\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        (change)=\"_onInteractionEvent($event)\"\n        (click)=\"_onInputClick($event)\"\n      />\n      <!-- <input type=\"checkbox\" [(ngModel)]=\"model\" [attr.id]=\"name\" [disabled]=\"disabled\" /> -->\n      <label [attr.for]=\"name\" (click)=\"select($event)\" [class.disabled]=\"disabled\">\n        <i\n          [class.bhi-checkbox-empty]=\"!model && !indeterminate && boxIcon\"\n          [class.bhi-checkbox-filled]=\"model && !indeterminate && boxIcon\"\n          [class.bhi-checkbox-indeterminate]=\"indeterminate && boxIcon\"\n          [class.bhi-circle-o]=\"!model && !indeterminate && !boxIcon\"\n          [class.bhi-check]=\"model && !indeterminate && !boxIcon\"\n          [class.bhi-circle]=\"indeterminate && !boxIcon\"\n        ></i>\n        <span *ngIf=\"label\">{{ label }}</span>\n        <span *ngIf=\"!label\"><ng-content></ng-content></span>\n      </label>\n    </div>\n  ",
-                    styles: ["novo-check-list,novo-checkbox{display:flex;flex-flow:row wrap}novo-check-list [class*=-group],novo-checkbox [class*=-group]{cursor:pointer;margin-right:15px;position:relative}novo-check-list [class*=-group]:hover label i:before,novo-checkbox [class*=-group]:hover label i:before{box-shadow:0 0 15px 3px rgba(74,137,220,.25)}novo-check-list [class*=-group]:hover label i.bhi-checkbox-empty,novo-check-list [class*=-group]:hover label i.bhi-radio-empty,novo-checkbox [class*=-group]:hover label i.bhi-checkbox-empty,novo-checkbox [class*=-group]:hover label i.bhi-radio-empty{color:#4a89dc}novo-check-list [class*=-group].checked label,novo-checkbox [class*=-group].checked label{color:#393939}novo-check-list [class*=-group].checked label i,novo-checkbox [class*=-group].checked label i{-webkit-animation:iconEnter .16s ease-in-out;animation:iconEnter .16s ease-in-out}novo-check-list [class*=-group].disabled,novo-checkbox [class*=-group].disabled{pointer-events:none}novo-check-list [class*=-group].disabled label>i,novo-checkbox [class*=-group].disabled label>i{opacity:.7}novo-check-list [class*=-group] input,novo-checkbox [class*=-group] input{-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;border:none!important;height:0!important;position:absolute}novo-check-list [class*=-group] input:focus+label i:before,novo-checkbox [class*=-group] input:focus+label i:before{text-shadow:0 0 20px rgba(74,137,220,.5)}novo-check-list [class*=-group] input:focus+label i.bhi-checkbox-empty,novo-check-list [class*=-group] input:focus+label i.bhi-checkbox-filled,novo-checkbox [class*=-group] input:focus+label i.bhi-checkbox-empty,novo-checkbox [class*=-group] input:focus+label i.bhi-checkbox-filled{color:#4a89dc}novo-check-list [class*=-group] label,novo-checkbox [class*=-group] label{align-items:baseline;color:#868686;cursor:pointer;display:flex;margin-left:0;transition:all .2s ease-in-out}novo-check-list [class*=-group] label i,novo-checkbox [class*=-group] label i{margin-right:5px;transition:all .2s ease-in-out}novo-check-list [class*=-group] label i.bhi-checkbox-empty,novo-check-list [class*=-group] label i.bhi-circle-o,novo-check-list [class*=-group] label i.bhi-radio-empty,novo-checkbox [class*=-group] label i.bhi-checkbox-empty,novo-checkbox [class*=-group] label i.bhi-circle-o,novo-checkbox [class*=-group] label i.bhi-radio-empty{color:#d2d2d2}novo-check-list [class*=-group] label i.bhi-check,novo-checkbox [class*=-group] label i.bhi-check{background:#d2d2d2;border-radius:50%;color:#fff;font-size:1em;height:20px;padding:.15em 0 0 .3em;width:20px}novo-check-list [class*=-group] label i.bhi-checkbox-filled,novo-check-list [class*=-group] label i.bhi-radio-filled,novo-checkbox [class*=-group] label i.bhi-checkbox-filled,novo-checkbox [class*=-group] label i.bhi-radio-filled{color:#4a89dc}novo-check-list [class*=-group] label span,novo-checkbox [class*=-group] label span{display:inline-block}"]
+                    template: "\n    <div class=\"novo-checkbox-group\" [class.checked]=\"checked\" [class.disabled]=\"disabled\">\n      <input\n        #input\n        type=\"checkbox\"\n        [required]=\"required\"\n        [checked]=\"checked\"\n        [id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [disabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-checked]=\"_getAriaChecked()\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        (change)=\"_onInteractionEvent($event)\"\n        (click)=\"_onInputClick($event)\"\n      />\n      <label [attr.for]=\"name\" (click)=\"select($event)\" [class.disabled]=\"disabled\">\n        <i\n          [class.bhi-checkbox-empty]=\"!checked && !indeterminate && boxIcon\"\n          [class.bhi-checkbox-filled]=\"checked && !indeterminate && boxIcon\"\n          [class.bhi-checkbox-indeterminate]=\"indeterminate && boxIcon\"\n          [class.bhi-circle-o]=\"!checked && !indeterminate && !boxIcon\"\n          [class.bhi-check]=\"checked && !indeterminate && !boxIcon\"\n          [class.bhi-circle]=\"indeterminate && !boxIcon\"\n        ></i>\n        <span *ngIf=\"label\">{{ label }}</span>\n        <span *ngIf=\"!label\" class=\"novo-checkbox-text\"><ng-content></ng-content></span>\n      </label>\n    </div>\n  ",
+                    host: {
+                        class: 'novo-checkbox',
+                        '[class.has-label]': 'label',
+                    },
+                    styles: [":host{display:flex;flex-flow:row wrap}:host.has-label [class*=-group]{margin-right:15px}:host .novo-checkbox-text{margin-left:15px}:host .novo-checkbox-group{cursor:pointer;position:relative}:host .novo-checkbox-group:hover label i:before{box-shadow:0 0 15px 3px rgba(74,137,220,.25)}:host .novo-checkbox-group:hover label i.bhi-checkbox-empty,:host .novo-checkbox-group:hover label i.bhi-radio-empty{color:#4a89dc}:host .novo-checkbox-group.checked label{color:#393939}:host .novo-checkbox-group.checked label i{-webkit-animation:iconEnter .16s ease-in-out;animation:iconEnter .16s ease-in-out}:host .novo-checkbox-group.disabled{pointer-events:none}:host .novo-checkbox-group.disabled label>i{opacity:.7}:host .novo-checkbox-group input[type=checkbox]{-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;border:none!important;height:0!important;position:absolute}:host .novo-checkbox-group input[type=checkbox]:focus+label i:before{text-shadow:0 0 20px rgba(74,137,220,.5)}:host .novo-checkbox-group input[type=checkbox]:focus+label i.bhi-checkbox-empty,:host .novo-checkbox-group input[type=checkbox]:focus+label i.bhi-checkbox-filled{color:#4a89dc}:host .novo-checkbox-group label{align-items:baseline;color:#868686;cursor:pointer;display:flex;margin-left:0;transition:all .2s ease-in-out}:host .novo-checkbox-group label i{margin-right:5px;transition:all .2s ease-in-out}:host .novo-checkbox-group label i.bhi-checkbox-empty,:host .novo-checkbox-group label i.bhi-circle-o,:host .novo-checkbox-group label i.bhi-radio-empty{color:#d2d2d2}:host .novo-checkbox-group label i.bhi-check{background:#d2d2d2;border-radius:50%;color:#fff;font-size:1em;height:20px;padding:.15em 0 0 .3em;width:20px}:host .novo-checkbox-group label i.bhi-checkbox-filled,:host .novo-checkbox-group label i.bhi-radio-filled{color:#4a89dc}:host .novo-checkbox-group label span{display:inline-block}"]
                 },] }
     ];
     NovoCheckboxElement.ctorParameters = function () { return [
@@ -29996,7 +30200,8 @@
         { type: i0.Component, args: [{
                     selector: 'novo-check-list',
                     providers: [CHECKLIST_VALUE_ACCESSOR],
-                    template: "\n    <div\n      class=\"check-box-group\"\n      *ngFor=\"let option of _options; let i = index\"\n      [ngClass]=\"{ checked: option.checked }\"\n      [class.disabled]=\"disabled\"\n      [attr.data-automation-id]=\"option.label\"\n    >\n      <input\n        [name]=\"name\"\n        type=\"checkbox\"\n        [ngModel]=\"option.checked\"\n        [attr.id]=\"name + i\"\n        [value]=\"option.checked\"\n        (change)=\"select($event, option)\"\n        [disabled]=\"disabled\"\n      />\n      <label [attr.for]=\"name + i\" (click)=\"select($event, option)\">\n        <i [ngClass]=\"{ 'bhi-checkbox-empty': !option.checked, 'bhi-checkbox-filled': option.checked }\"></i>\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n  "
+                    template: "\n    <div\n      class=\"novo-checkbox-group\"\n      *ngFor=\"let option of _options; let i = index\"\n      [ngClass]=\"{ checked: option.checked }\"\n      [class.disabled]=\"disabled\"\n      [attr.data-automation-id]=\"option.label\"\n    >\n      <input\n        [name]=\"name\"\n        type=\"checkbox\"\n        [ngModel]=\"option.checked\"\n        [attr.id]=\"name + i\"\n        [value]=\"option.checked\"\n        (change)=\"select($event, option)\"\n        [disabled]=\"disabled\"\n      />\n      <label [attr.for]=\"name + i\" (click)=\"select($event, option)\">\n        <i [ngClass]=\"{ 'bhi-checkbox-empty': !option.checked, 'bhi-checkbox-filled': option.checked }\"></i>\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n  ",
+                    styles: [":host{display:flex;flex-flow:row wrap;gap:1rem}:host.hasLabel [class*=-group]{margin-right:15px}:host .novo-checkbox-group{cursor:pointer;position:relative}:host .novo-checkbox-group:hover label i:before{box-shadow:0 0 15px 3px rgba(74,137,220,.25)}:host .novo-checkbox-group:hover label i.bhi-checkbox-empty,:host .novo-checkbox-group:hover label i.bhi-radio-empty{color:#4a89dc}:host .novo-checkbox-group.checked label{color:var(--text-main)}:host .novo-checkbox-group.checked label i{-webkit-animation:iconEnter .16s ease-in-out;animation:iconEnter .16s ease-in-out}:host .novo-checkbox-group.disabled{pointer-events:none}:host .novo-checkbox-group.disabled label>i{opacity:.7}:host .novo-checkbox-group input[type=checkbox]{-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;border:none!important;height:0!important;position:absolute}:host .novo-checkbox-group input[type=checkbox]:focus+label i:before{text-shadow:0 0 20px rgba(74,137,220,.5)}:host .novo-checkbox-group input[type=checkbox]:focus+label i.bhi-checkbox-empty,:host .novo-checkbox-group input[type=checkbox]:focus+label i.bhi-checkbox-filled{color:#4a89dc}:host .novo-checkbox-group label{align-items:baseline;color:#868686;cursor:pointer;display:flex;margin-left:0;transition:all .2s ease-in-out}:host .novo-checkbox-group label i{margin-right:5px;transition:all .2s ease-in-out}:host .novo-checkbox-group label i.bhi-checkbox-empty,:host .novo-checkbox-group label i.bhi-circle-o,:host .novo-checkbox-group label i.bhi-radio-empty{color:#d2d2d2}:host .novo-checkbox-group label i.bhi-check{background:#d2d2d2;border-radius:50%;color:#fff;font-size:1em;height:20px;padding:.15em 0 0 .3em;width:20px}:host .novo-checkbox-group label i.bhi-checkbox-filled,:host .novo-checkbox-group label i.bhi-radio-filled{color:#4a89dc}:host .novo-checkbox-group label span{display:inline-block}"]
                 },] }
     ];
     NovoCheckListElement.propDecorators = {
@@ -30045,7 +30250,7 @@
         }
         return NovoChipBase;
     }());
-    var NovoChipMixinBase = mixinTabIndex(mixinColor(NovoChipBase, 'primary'), -1);
+    var NovoChipMixinBase = mixinSize(mixinTabIndex(mixinColor(NovoChipBase, null), -1), 'md');
     /**
      * Dummy directive to add CSS class to chip avatar.
      * @docs-private
@@ -30062,13 +30267,11 @@
                 },] }
     ];
     /**
-     * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
-     * available at https://material.io/icons/#ic_cancel.
-     *
+     * Applies proper (click) support and adds styling for use with Bullhorn's "x" icon *
      * Example:
      *
      *     `<novo-chip>
-     *       <novo-icon novoChipRemove>cancel</novo-icon>
+     *       <novo-icon novoChipRemove>x</novo-icon>
      *     </novo-chip>`
      *
      * You *may* use a custom icon, but you may need to override the `novo-chip-remove` positioning
@@ -30110,7 +30313,7 @@
         { type: i0.ElementRef }
     ]; };
     /**
-     * Material design styled Chip component. Used inside the NovoChipList component.
+     * Chip component. Used inside the NovoChipList component.
      */
     var NovoChipElement = /** @class */ (function (_super) {
         __extends(NovoChipElement, _super);
@@ -30122,13 +30325,13 @@
             /** Whether the chip has focus. */
             _this._hasFocus = false;
             /** Whether the chip list is selectable */
-            _this.chipListSelectable = true;
+            _this._chipListSelectable = true;
             /** Whether the chip list is in multi-selection mode. */
             _this._chipListMultiple = false;
             /** Whether the chip list as a whole is disabled. */
             _this._chipListDisabled = false;
             _this._selected = false;
-            _this._selectable = true;
+            _this._selectable = false;
             _this._disabled = false;
             _this._removable = true;
             /** Emits when the chip is focused. */
@@ -30179,7 +30382,7 @@
              * not selectable.
              */
             get: function () {
-                return this._selectable && this.chipListSelectable;
+                return this._selectable && this._chipListSelectable;
             },
             set: function (value) {
                 this._selectable = coercion.coerceBooleanProperty(value);
@@ -30331,20 +30534,22 @@
         return NovoChipElement;
     }(NovoChipMixinBase));
     NovoChipElement.decorators = [
-        { type: i0.Directive, args: [{
+        { type: i0.Component, args: [{
                     selector: "novo-chip, [novo-chip]",
-                    inputs: ['color', 'tabIndex'],
-                    exportAs: 'novoChip',
+                    template: "<ng-content></ng-content>",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    inputs: ['color', 'tabIndex', 'size'],
                     providers: [{ provide: REMOVABLE_REF, useExisting: NovoChipElement }],
                     host: {
                         class: 'novo-chip novo-focus-indicator',
-                        '[attr.tabindex]': 'disabled ? null : tabIndex',
                         role: 'option',
+                        '[class.novo-chip-selectable]': 'selectable',
                         '[class.novo-chip-selected]': 'selected',
                         '[class.novo-chip-with-avatar]': 'avatar',
                         '[class.novo-chip-with-trailing-icon]': 'removeIcon',
                         '[class.novo-chip-disabled]': 'disabled',
                         '[class._novo-animation-noopable]': '_animationsDisabled',
+                        '[attr.tabindex]': 'disabled ? null : tabIndex',
                         '[attr.disabled]': 'disabled || null',
                         '[attr.aria-disabled]': 'disabled.toString()',
                         '[attr.aria-selected]': 'ariaSelected',
@@ -30355,6 +30560,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:all .2s ease-in-out}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.novo-chip.novo-color-orange>*{color:inherit}.novo-chip.novo-accent-orange{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-navigation{background:#202b38;color:#fff}.novo-chip.novo-color-navigation>*{color:inherit}.novo-chip.novo-accent-navigation{border:1px solid #202b38;color:#202b38}.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:#000}.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:#000}.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:#000}.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:#000}.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:#202b38;color:#fff}.novo-chip.novo-color-midnight>*{color:inherit}.novo-chip.novo-accent-midnight{border:1px solid #202b38;color:#202b38}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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:#000}.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 [
@@ -30395,7 +30601,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-error',
                     template: "<ng-content></ng-content>",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:#da4453;display:flex;flex:1;font-size:.8em;padding-bottom:5px}"]
+                    styles: [":host{color:#da4453;display:flex;flex:1;font-size:.8em;padding-bottom:5px}"]
                 },] }
     ];
     NovoErrorElement.ctorParameters = function () { return [
@@ -30435,7 +30641,7 @@
                         // Remove align attribute to prevent it from interfering with layout.
                         '[attr.align]': 'null',
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{color:var(--text-muted,#3d464d);color:#9e9e9e;display:flex;flex:1 0 auto;font-size:.8rem;font-size:.9rem;font-weight:400;line-height:1.375;padding-bottom:.4rem;padding-top:.4rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}: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;width:-webkit-max-content;width:-moz-max-content;width:max-content}:host.novo-field-hint-end{align-content:end;justify-content:flex-end;order:1;text-align:right}"]
                 },] }
     ];
     NovoHintElement.propDecorators = {
@@ -30571,7 +30777,7 @@
                         '[class.ng-pending]': '_shouldForward("pending")',
                     },
                     providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }],
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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,-webkit-max-content);grid-template-columns:minmax(min-content,max-content);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;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:1.2rem;font-weight:400;padding:.4rem .2rem}: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 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}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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}", "@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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,-webkit-max-content);grid-template-columns:minmax(min-content,max-content);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;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}: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 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}"]
                 },] }
     ];
     NovoFieldElement.ctorParameters = function () { return [
@@ -30833,7 +31039,7 @@
                     exportAs: 'novoAutocomplete',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-autocomplete-options{-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}"]
+                    styles: [".novo-autocomplete-options{-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}"]
                 },] }
     ];
     NovoAutocompleteElement.ctorParameters = function () { return [
@@ -30922,7 +31128,7 @@
                         '[class.novo-fieldset-appearance-outline]': 'appearance == "outline"',
                         '[class.novo-fieldset-appearance-list]': 'appearance == "list"',
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:grid;grid-gap:1.2rem}:host.novo-fieldset-appearance-list{grid-gap:0}:host.full-width::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(300px,1fr);width:-webkit-fill-available}:host.full-width::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host.full-width::ng-deep novo-field.novo-field-layout-horizontal{grid-template-columns:150px minmax(150px,1fr)}:host.full-width::ng-deep novo-field.novo-field-layout-horizontal .novo-input-element{width:100%}"]
+                    styles: [":host{display:grid;grid-gap:2.8rem 2rem}:host.novo-fieldset-appearance-list{grid-gap:0}:host.full-width::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(300px,1fr);width:-webkit-fill-available}:host.full-width::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host.full-width::ng-deep novo-field.novo-field-layout-horizontal{grid-template-columns:150px minmax(150px,1fr)}:host.full-width::ng-deep novo-field.novo-field-layout-horizontal .novo-input-element{width:100%}"]
                 },] }
     ];
     NovoFieldsElement.propDecorators = {
@@ -32089,7 +32295,7 @@
                 var _this = this;
                 this._selectable = coercion.coerceBooleanProperty(value);
                 if (this.chips) {
-                    this.chips.forEach(function (chip) { return (chip.chipListSelectable = _this._selectable); });
+                    this.chips.forEach(function (chip) { return (chip._chipListSelectable = _this._selectable); });
                 }
             },
             enumerable: false,
@@ -32541,6 +32747,7 @@
                 this.chips.forEach(function (chip) {
                     chip._chipListDisabled = _this._disabled;
                     chip._chipListMultiple = _this.multiple;
+                    chip._chipListSelectable = _this.selectable;
                 });
             }
         };
@@ -33023,7 +33230,7 @@
         { type: i0.Component, args: [{
                     selector: 'chips,novo-chips',
                     providers: [CHIPS_VALUE_ACCESSOR],
-                    template: "\n    <div class=\"novo-chip-container\">\n      <novo-chip\n        *ngFor=\"let item of _items | async\"\n        [class.selected]=\"item == selected\"\n        [disabled]=\"disablePickerInput\"\n        (removed)=\"remove($event, item)\"\n        (selectionChange)=\"select($event, item)\"\n        (deselect)=\"deselect($event, item)\"\n      >\n        <novo-icon *ngIf=\"getAvatarType(item)\" size=\"small\" class=\"tc-{{ getAvatarType(item) }}\" novoChipAvatar>circle</novo-icon>\n        {{ item.label }}\n        <novo-icon size=\"small\" color=\"light\" novoChipRemove>close</novo-icon>\n      </novo-chip>\n    </div>\n    <div class=\"chip-input-container\" *ngIf=\"!maxlength || (maxlength && items.length < maxlength)\">\n      <novo-picker\n        clearValueOnSelect=\"true\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [config]=\"source\"\n        [disablePickerInput]=\"disablePickerInput\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"itemToAdd\"\n        (select)=\"add($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocus($event)\"\n        (typing)=\"onTyping($event)\"\n        (blur)=\"onTouched($event)\"\n        [selected]=\"items\"\n        [overrideElement]=\"element\"\n      >\n      </novo-picker>\n    </div>\n    <div class=\"preview-container\">\n      <span #preview></span>\n    </div>\n    <i class=\"bhi-search\" [class.has-value]=\"items.length\" *ngIf=\"!disablePickerInput\"></i>\n    <label class=\"clear-all\" *ngIf=\"items.length && !disablePickerInput\" (click)=\"clearValue()\"\n      >{{ labels.clearAll }} <i class=\"bhi-times\"></i\n    ></label>\n  ",
+                    template: "\n    <div class=\"novo-chip-container\">\n      <novo-chip\n        *ngFor=\"let item of _items | async\"\n        [class.selected]=\"item == selected\"\n        [selectable]=\"true\"\n        [disabled]=\"disablePickerInput\"\n        (removed)=\"remove($event, item)\"\n        (selectionChange)=\"select($event, item)\"\n        (deselect)=\"deselect($event, item)\"\n      >\n        <novo-icon *ngIf=\"getAvatarType(item)\" class=\"txc-{{ getAvatarType(item) }}\" novoChipAvatar>circle</novo-icon>\n        {{ item.label }}\n        <novo-icon novoChipRemove>x</novo-icon>\n      </novo-chip>\n    </div>\n    <div class=\"chip-input-container\" *ngIf=\"!maxlength || (maxlength && items.length < maxlength)\">\n      <novo-picker\n        clearValueOnSelect=\"true\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [config]=\"source\"\n        [disablePickerInput]=\"disablePickerInput\"\n        [placeholder]=\"placeholder\"\n        [(ngModel)]=\"itemToAdd\"\n        (select)=\"add($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onFocus($event)\"\n        (typing)=\"onTyping($event)\"\n        (blur)=\"onTouched($event)\"\n        [selected]=\"items\"\n        [overrideElement]=\"element\"\n      >\n      </novo-picker>\n    </div>\n    <div class=\"preview-container\">\n      <span #preview></span>\n    </div>\n    <i class=\"bhi-search\" [class.has-value]=\"items.length\" *ngIf=\"!disablePickerInput\"></i>\n    <label class=\"clear-all\" *ngIf=\"items.length && !disablePickerInput\" (click)=\"clearValue()\"\n      >{{ labels.clearAll }} <i class=\"bhi-times\"></i\n    ></label>\n  ",
                     host: {
                         '[class.with-value]': 'items.length > 0',
                         '[class.disabled]': 'disablePickerInput',
@@ -33556,7 +33763,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-color-input',
                     providers: [COLOR_VALUE_ACCESSOR],
-                    template: "\n    <novo-field>\n      <input\n        novoInput\n        type=\"text\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [style.color]=\"value\"\n        (focus)=\"_handleFocus($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n        (input)=\"_handleInput($event)\"\n        (blur)=\"_handleBlur($event)\"\n        [(ngModel)]=\"value\"\n        #input\n      />\n      <novo-icon *ngIf=\"!hasValue\" (click)=\"openPanel()\">complex</novo-icon>\n      <novo-icon *ngIf=\"hasValue\" size=\"small\" (click)=\"clearValue()\">x</novo-icon>\n    </novo-field>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-color-picker [(color)]=\"value\" (onChange)=\"setValueAndClose($event)\"></novo-color-picker>\n    </novo-overlay-template>\n  "
+                    template: "\n    <novo-field>\n      <input\n        novoInput\n        type=\"text\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [style.color]=\"value\"\n        (focus)=\"_handleFocus($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n        (input)=\"_handleInput($event)\"\n        (blur)=\"_handleBlur($event)\"\n        [(ngModel)]=\"value\"\n        #input\n      />\n      <novo-icon *ngIf=\"!hasValue\" (click)=\"openPanel()\">complex</novo-icon>\n      <novo-icon *ngIf=\"hasValue\" smaller (click)=\"clearValue()\">x</novo-icon>\n    </novo-field>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-color-picker [(color)]=\"value\" (onChange)=\"setValueAndClose($event)\"></novo-color-picker>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoColorInputElement.ctorParameters = function () { return [
@@ -33943,7 +34150,7 @@
                     template: "\n    <div class=\"novo-color-preview\" [style.backgroundColor]=\"currentColor.hex\">\n      <div class=\"novo-color-preview-text\">{{ hex }}</div>\n    </div>\n    <div class=\"novo-color-swatches\">\n      <novo-color-swatch\n        *ngFor=\"let color of colors\"\n        [color]=\"color\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onHover)=\"handleSwatchHover($event)\"\n      ></novo-color-swatch>\n    </div>\n    <div class=\"novo-color-input\">\n      <input [value]=\"hex.replace('#', '')\" (onChange)=\"handleValueChange($event)\" />\n    </div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{background-color:var(--background-bright,#fff);border-radius:.4rem;box-shadow:0 3px 1px -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;display:grid;grid-template-rows:6rem 1fr -webkit-min-content;grid-template-rows:6rem 1fr min-content;overflow:auto;transform:translateY(0);transition:all .15s cubic-bezier(.35,0,.25,1);width:18rem}:host .novo-color-preview{align-items:center;display:flex;justify-content:center}:host .novo-color-swatches{display:grid;grid-auto-rows:2.4rem;grid-gap:.4rem;grid-template-columns:repeat(6,2.4rem);justify-content:center;margin:.4rem 0}:host .novo-color-input{padding:.4rem .8rem}"]
+                    styles: [":host{background-color:var(--background-bright,#fff);border-radius:.4rem;box-shadow:0 3px 1px -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;display:grid;grid-template-rows:6rem 1fr -webkit-min-content;grid-template-rows:6rem 1fr min-content;overflow:auto;transform:translateY(0);transition:all .15s cubic-bezier(.35,0,.25,1);width:18rem}:host .novo-color-preview{align-items:center;display:flex;justify-content:center}:host .novo-color-swatches{display:grid;grid-auto-rows:2.4rem;grid-gap:.4rem;grid-template-columns:repeat(6,2.4rem);justify-content:center;margin:.4rem 0}:host .novo-color-input{padding:.4rem .8rem}"]
                 },] }
     ];
     NovoColorPickerComponent.propDecorators = {
@@ -34017,6 +34224,215 @@
                 },] }
     ];
+    // NG2
+    var NovoToastElement = /** @class */ (function () {
+        function NovoToastElement(sanitizer) {
+            this.sanitizer = sanitizer;
+            this.appearance = 'banner';
+            this.theme = 'danger';
+            this.icon = 'caution';
+            this.hasDialogue = false;
+            this.isCloseable = false;
+            this.closed = new i0.EventEmitter();
+            this.show = false;
+            this.animate = false;
+            this.parent = null;
+            this.launched = false;
+            this.onActionPromise = Deferred();
+        }
+        Object.defineProperty(NovoToastElement.prototype, "message", {
+            set: function (m) {
+                this._message = this.sanitizer.bypassSecurityTrustHtml(m);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NovoToastElement.prototype.ngOnInit = function () {
+            if (!this.launched) {
+                // clear position and time
+                this.position = null;
+                this.time = null;
+                // set icon and styling
+                this.iconClass = "bhi-" + this.icon;
+                this.alertTheme = this.theme + " toast-container embedded";
+                if (this.hasDialogue) {
+                    this.alertTheme += ' dialogue';
+                }
+            }
+        };
+        NovoToastElement.prototype.ngOnChanges = function (changes) {
+            // set icon and styling
+            this.iconClass = "bhi-" + this.icon;
+            this.alertTheme = this.theme + " toast-container embedded";
+            if (this.hasDialogue) {
+                this.alertTheme += ' dialogue';
+            }
+        };
+        NovoToastElement.prototype.clickHandler = function (event) {
+            if (!this.isCloseable) {
+                if (event) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                if (this.parent) {
+                    this.parent.hide(this);
+                }
+                else {
+                    this.closed.emit({ closed: true });
+                }
+            }
+        };
+        NovoToastElement.prototype.close = function (event) {
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if (this.parent) {
+                this.parent.hide(this);
+            }
+            else {
+                this.closed.emit({ closed: true });
+            }
+        };
+        NovoToastElement.prototype.actionHandler = function (event) {
+            this.onActionPromise.resolve(event);
+        };
+        NovoToastElement.prototype.onAction = function (fn) {
+            return this.onActionPromise.then(fn);
+        };
+        return NovoToastElement;
+    }());
+    NovoToastElement.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-toast',
+                    host: {
+                        '[class]': 'alertTheme',
+                        '[class.growl]': 'appearance == "growl"',
+                        '[class.banner]': 'appearance == "banner"',
+                        '[class.show]': 'show',
+                        '[class.animate]': 'animate',
+                        '[class.embedded]': 'embedded',
+                        '[attr.theme]': 'theme',
+                        '(click)': '!isCloseable && clickHandler($event)',
+                    },
+                    template: "\n    <div class=\"toast-icon\">\n      <i [ngClass]=\"iconClass\"></i>\n    </div>\n    <div class=\"toast-content\">\n      <h5 *ngIf=\"title\">{{ title }}</h5>\n      <p *ngIf=\"_message\" [class.message-only]=\"!title\" [innerHtml]=\"_message\"></p>\n      <div *ngIf=\"link\" class=\"link-generated\">\n        <input type=\"text\" [value]=\"link\" onfocus=\"this.select();\" />\n      </div>\n      <div class=\"dialogue\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"action\" class=\"action\">\n        <button theme=\"dialogue\" color=\"white\" (click)=\"actionHandler($event)\">{{ action }}</button>\n      </div>\n    </div>\n    <div class=\"close-icon\" *ngIf=\"isCloseable\" (click)=\"close($event)\">\n      <i class=\"bhi-times\"></i>\n    </div>\n  "
+                },] }
+    ];
+    NovoToastElement.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    NovoToastElement.propDecorators = {
+        appearance: [{ type: i0.Input }],
+        theme: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        action: [{ type: i0.Input }],
+        hasDialogue: [{ type: i0.Input }],
+        link: [{ type: i0.Input }],
+        isCloseable: [{ type: i0.Input }],
+        message: [{ type: i0.Input }],
+        closed: [{ type: i0.Output }]
+    };
+    // NG2
+    var NovoToastService = /** @class */ (function () {
+        function NovoToastService(componentUtils) {
+            this.componentUtils = componentUtils;
+            this.references = [];
+            this.icons = { default: 'bell', success: 'check', info: 'info', warning: 'warning', danger: 'remove' };
+            this.defaults = { hideDelay: 3500, position: 'growlTopRight', theme: 'default' };
+        }
+        Object.defineProperty(NovoToastService.prototype, "parentViewContainer", {
+            set: function (view) {
+                this._parentViewContainer = view;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NovoToastService.prototype.alert = function (options, toastElement) {
+            var _this = this;
+            if (toastElement === void 0) { toastElement = NovoToastElement; }
+            return new Promise(function (resolve) {
+                if (!_this._parentViewContainer) {
+                    console.error('No parent view container specified for the ToastService. Set it inside your main application. \nthis.toastService.parentViewContainer = view (ViewContainerRef)');
+                    return;
+                }
+                var toast = _this.componentUtils.append(toastElement, _this._parentViewContainer);
+                _this.references.push(toast);
+                _this.handleAlert(toast.instance, options);
+                resolve(toast.instance);
+            });
+        };
+        NovoToastService.prototype.isVisible = function (toast) {
+            return toast.show;
+        };
+        NovoToastService.prototype.hide = function (toast) {
+            var _this = this;
+            toast.animate = false;
+            setTimeout(function () {
+                toast.show = false;
+                var REF = _this.references.filter(function (x) { return x.instance === toast; })[0];
+                if (REF) {
+                    _this.references.splice(_this.references.indexOf(REF), 1);
+                    REF.destroy();
+                }
+            }, 300);
+        };
+        NovoToastService.prototype.handleAlert = function (toast, options) {
+            var _this = this;
+            this.setToastOnSession(toast, options);
+            setTimeout(function () {
+                _this.show(toast);
+            }, 20);
+            if (!toast.isCloseable) {
+                this.toastTimer(toast);
+            }
+        };
+        NovoToastService.prototype.setToastOnSession = function (toast, opts) {
+            var OPTIONS = typeof opts === 'object' ? opts : {};
+            toast.parent = this;
+            toast.title = OPTIONS.title || '';
+            toast.message = OPTIONS.message || '';
+            toast.action = OPTIONS.action || null;
+            toast.hideDelay = OPTIONS.hideDelay || this.defaults.hideDelay;
+            toast.link = OPTIONS.link || '';
+            toast.isCloseable = OPTIONS.isCloseable || false;
+            var CUSTOM_CLASS = OPTIONS.customClass || '';
+            var ALERT_STYLE = OPTIONS.accent ? "novo-accent-" + OPTIONS.accent : OPTIONS.theme || this.defaults.theme;
+            var ALERT_POSITION = OPTIONS.position || this.defaults.position;
+            var ALERT_ICON = OPTIONS.icon || this.icons.default;
+            toast.iconClass = "bhi-" + ALERT_ICON;
+            toast.launched = true;
+            toast.alertTheme = ALERT_STYLE + " " + ALERT_POSITION + " " + CUSTOM_CLASS + " toast-container launched";
+        };
+        NovoToastService.prototype.show = function (toast) {
+            toast.show = true;
+            setTimeout(addClass, 25);
+            /**
+             * Adds animate class to be called after a timeout
+             **/
+            function addClass() {
+                toast.animate = true;
+            }
+        };
+        NovoToastService.prototype.toastTimer = function (toast) {
+            var _this = this;
+            if (toast.hideDelay < 0) {
+                return;
+            }
+            setTimeout(function () {
+                _this.hide(toast);
+            }, toast.hideDelay);
+        };
+        return NovoToastService;
+    }());
+    NovoToastService.decorators = [
+        { type: i0.Injectable }
+    ];
+    NovoToastService.ctorParameters = function () { return [
+        { type: ComponentUtils }
+    ]; };
     var NovoDataTableFilterUtils = /** @class */ (function () {
         function NovoDataTableFilterUtils() {
         }
@@ -34071,6 +34487,7 @@
             this.expandedRows = new Set();
             this.isForceRefresh = false;
             this.updates = new i0.EventEmitter();
+            this.retainSelected = false;
         }
         Object.defineProperty(DataTableState.prototype, "userFiltered", {
             get: function () {
@@ -34101,9 +34518,12 @@
                 this.filter = undefined;
             }
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            if (!this.retainSelected) {
+                this.selectedRows.clear();
+                this.resetSource.next();
+            }
             this.onSortFilterChange();
+            this.retainSelected = false;
             if (fireUpdate) {
                 this.updates.emit({
                     sort: this.sort,
@@ -34116,8 +34536,8 @@
             if (fireUpdate === void 0) { fireUpdate = true; }
             this.sort = undefined;
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            this.checkRetainment('sort');
+            this.reset(fireUpdate, true);
             this.onSortFilterChange();
             if (fireUpdate) {
                 this.updates.emit({
@@ -34132,8 +34552,8 @@
             this.filter = undefined;
             this.globalSearch = undefined;
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            this.checkRetainment('filter');
+            this.reset(fireUpdate, true);
             this.onSortFilterChange();
             if (fireUpdate) {
                 this.updates.emit({
@@ -34143,6 +34563,20 @@
                 });
             }
         };
+        DataTableState.prototype.clearSelected = function (fireUpdate) {
+            if (fireUpdate === void 0) { fireUpdate = true; }
+            this.globalSearch = undefined;
+            this.page = 0;
+            this.reset(fireUpdate, true);
+            this.onSelectionChange();
+            if (fireUpdate) {
+                this.updates.emit({
+                    sort: this.sort,
+                    filter: this.filter,
+                    globalSearch: this.globalSearch,
+                });
+            }
+        };
         DataTableState.prototype.onSelectionChange = function () {
             this.selectionSource.next();
         };
@@ -34150,9 +34584,12 @@
             this.expandSource.next(targetId);
         };
         DataTableState.prototype.onPaginationChange = function (isPageSizeChange, pageSize) {
+            this.checkRetainment('page');
             this.paginationSource.next({ isPageSizeChange: isPageSizeChange, pageSize: pageSize });
         };
         DataTableState.prototype.onSortFilterChange = function () {
+            this.checkRetainment('sort');
+            this.checkRetainment('filter');
             this.sortFilterSource.next({
                 sort: this.sort,
                 filter: this.filter,
@@ -34176,6 +34613,10 @@
                 }
             }
         };
+        DataTableState.prototype.checkRetainment = function (caller) {
+            var _a;
+            this.retainSelected = ((_a = this.selectionOptions) === null || _a === void 0 ? void 0 : _a.some(function (option) { return option.label === caller; })) || this.retainSelected;
+        };
         return DataTableState;
     }());
     DataTableState.decorators = [
@@ -34251,7 +34692,7 @@
                     template: "<novo-icon class=\"novo-sort-asc-icon\" [@sortAsc]=\"value\" (click)=\"changeSort(SortDirection.DESC)\">arrow-up</novo-icon>\n<novo-icon class=\"novo-sort-desc-icon\" [@sortDesc]=\"value\" (click)=\"changeSort(SortDirection.NONE)\">arrow-down\n</novo-icon>\n<novo-icon class=\"novo-sortable-icon\" [@sortNone]=\"value\" (click)=\"changeSort(SortDirection.ASC)\">sortable</novo-icon>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [sortAscAnim, sortDescAnim, sortNoneAnim],
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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:#4a89dc}:host .novo-sort-asc-icon{top:10px}:host .novo-sort-desc-icon{top:-10px}"]
+                    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}"]
                 },] }
     ];
     NovoDataTableSortButton.ctorParameters = function () { return [
@@ -34283,6 +34724,7 @@
                 }
             }
             this.state.filter = filter;
+            this.state.checkRetainment('filter');
             this.state.reset(false, true);
             this.state.updates.next({ filter: filter, sort: this.state.sort });
             this.state.onSortFilterChange();
@@ -34290,6 +34732,7 @@
         NovoDataTableSortFilter.prototype.sort = function (id, value, transform) {
             var sort = { id: id, value: value, transform: transform };
             this.state.sort = sort;
+            this.state.checkRetainment('sort');
             this.state.reset(false, true);
             this.state.updates.next({ sort: sort, filter: this.state.filter });
             this.state.onSortFilterChange();
@@ -34659,7 +35102,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=\"right\"\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      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'right'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\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                {{ option.label }} <i class=\"bhi-check\" *ngIf=\"activeDateFilter === option.label\"></i>\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              {{ labels.customDateRange }} <i class=\"bhi-check\" *ngIf=\"labels.customDateRange === activeDateFilter\"></i>\n            </novo-option>\n            <div class=\"calendar-container\" *ngIf=\"showCustomRange\">\n              <div (click)=\"toggleCustomRange($event, false)\"><i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}</div>\n              <novo-date-picker (onSelect)=\"filterData($event)\" [(ngModel)]=\"filter\" range=\"true\"></novo-date-picker>\n            </div>\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              <i class=\"bhi-check\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"></i>\n            </novo-option>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchCase=\"'multi-select'\">\n            <div class=\"dropdown-list-filter\" (keydown)=\"multiSelectOptionFilterHandleKeydown($event)\">\n              <div class=\"filter-search\" keepOpen=\"true\">\n                <input\n                  [(ngModel)]=\"optionFilter\"\n                  (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                  #optionFilterInput\n                  data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                />\n                <i class=\"bhi-search\"></i>\n                <span class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{ labels.selectFilterOptions }}</span>\n              </div>\n            </div>\n            <div 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                <i\n                  [class.bhi-checkbox-empty]=\"!isSelected(option, multiSelectedOptions)\"\n                  [class.bhi-checkbox-filled]=\"isSelected(option, multiSelectedOptions)\"\n                ></i>\n              </novo-option>\n            </div>\n            <p class=\"filter-null-results\" [hidden]=\"multiSelectHasVisibleOptions()\">{{ labels.pickerEmpty }}</p>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchCase=\"'custom'\">\n            <div class=\"filter-search\">\n              <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n            </div>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchDefault>\n            <div class=\"filter-search\">\n              <input\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            </div>\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=\"right\"\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      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'right'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\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                {{ option.label }} <i class=\"bhi-check\" *ngIf=\"activeDateFilter === option.label\"></i>\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              {{ labels.customDateRange }} <i class=\"bhi-check\" *ngIf=\"labels.customDateRange === activeDateFilter\"></i>\n            </novo-option>\n            <novo-option class=\"calendar-container\" *ngIf=\"showCustomRange\">\n              <novo-stack>\n                <div (click)=\"toggleCustomRange($event, false)\"><i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}</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              <i class=\"bhi-check\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"></i>\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\" keepOpen=\"true\">\n                <input\n                  [(ngModel)]=\"optionFilter\"\n                  (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                  #optionFilterInput\n                  data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                />\n                <i class=\"bhi-search\"></i>\n                <span class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{ labels.selectFilterOptions }}</span>\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                <i\n                  [class.bhi-checkbox-empty]=\"!isSelected(option, multiSelectedOptions)\"\n                  [class.bhi-checkbox-filled]=\"isSelected(option, multiSelectedOptions)\"\n                ></i>\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            <div class=\"filter-search\">\n              <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n            </div>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchDefault>\n            <novo-option class=\"filter-search\">\n              <input\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-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  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -34734,7 +35177,10 @@
                 _this.current = data.results.length;
                 _this.data = data.results;
                 // Clear selection
-                _this.state.selectedRows.clear();
+                if (!_this.state.retainSelected) {
+                    _this.state.selectedRows.clear();
+                }
+                _this.state.retainSelected = false;
                 _this.state.onSelectionChange();
                 // Mark changes
                 setTimeout(function () {
@@ -34821,6 +35267,7 @@
             this.trackByFn = function (index, item) { return item.id; };
             this.templates = {};
             this.fixedHeader = false;
+            this.maxSelected = undefined;
             this._hideGlobalSearch = true;
             this.preferencesChanged = new i0.EventEmitter();
             this.loading = true;
@@ -35044,6 +35491,7 @@
         };
         NovoDataTable.prototype.ngAfterContentInit = function () {
             var _this = this;
+            var _a;
             if (this.displayedColumns && this.displayedColumns.length) {
                 this.expandable = this.displayedColumns.includes('expand');
             }
@@ -35073,6 +35521,7 @@
             }
             this.state.page = this.paginationOptions ? this.paginationOptions.page : undefined;
             this.state.pageSize = this.paginationOptions ? this.paginationOptions.pageSize : undefined;
+            this.state.selectionOptions = (_a = this.selectionOptions) !== null && _a !== void 0 ? _a : undefined;
             // Scrolling inside table
             this.novoDataTableContainer.nativeElement.addEventListener('scroll', this.scrollListenerHandler);
             this.initialized = true;
@@ -35247,11 +35696,11 @@
             this.ref.markForCheck();
         };
         NovoDataTable.prototype.performInteractions = function (event) {
-            var e_1, _a;
+            var e_1, _b;
             if (this.listInteractions) {
                 try {
-                    for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var column = _c.value;
+                    for (var _c = __values(this.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var column = _d.value;
                         var allListColumnInteractions = this.listInteractions[column.id];
                         var listColumnInteraction = allListColumnInteractions && allListColumnInteractions.find(function (int) { return int.event.includes(event); });
                         if (listColumnInteraction) {
@@ -35262,7 +35711,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -35280,7 +35729,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 *cdkHeaderCellDef></novo-data-table-checkbox-header-cell>\n            <novo-data-table-checkbox-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></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        <list>\n          <item\n            *ngFor=\"let option of col?.action?.options\"\n            (action)=\"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          </item>\n        </list>\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      >\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        <list>\n          <item\n            *ngFor=\"let option of col?.action?.options\"\n            (action)=\"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          </item>\n        </list>\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]
                 },] }
@@ -35300,6 +35749,7 @@
         displayedColumns: [{ type: i0.Input }],
         paginationOptions: [{ type: i0.Input }],
         searchOptions: [{ type: i0.Input }],
+        selectionOptions: [{ type: i0.Input }],
         defaultSort: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         allowMultipleFilters: [{ type: i0.Input }],
@@ -35309,6 +35759,7 @@
         templates: [{ type: i0.Input }],
         fixedHeader: [{ type: i0.Input }],
         paginatorDataFeatureId: [{ type: i0.Input }],
+        maxSelected: [{ type: i0.Input }],
         dataTableService: [{ type: i0.Input }],
         rows: [{ type: i0.Input }],
         outsideFilter: [{ type: i0.Input }],
@@ -35326,11 +35777,13 @@
     var NovoDataTableCheckboxHeaderCell = /** @class */ (function (_super) {
         __extends(NovoDataTableCheckboxHeaderCell, _super);
-        function NovoDataTableCheckboxHeaderCell(columnDef, elementRef, renderer, dataTable, ref) {
+        function NovoDataTableCheckboxHeaderCell(columnDef, elementRef, renderer, dataTable, ref, toaster) {
             var _this = _super.call(this, columnDef, elementRef) || this;
             _this.dataTable = dataTable;
             _this.ref = ref;
+            _this.toaster = toaster;
             _this.role = 'columnheader';
+            _this.maxSelected = undefined;
             _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);
@@ -35343,6 +35796,8 @@
                 if (event.isPageSizeChange) {
                     _this.checked = false;
                     _this.dataTable.selectRows(false);
+                    _this.dataTable.state.checkRetainment('pageSize');
+                    _this.dataTable.state.reset(false, true);
                 }
                 else {
                     _this.checked = _this.dataTable.allCurrentRowsSelected();
@@ -35355,6 +35810,13 @@
             });
             return _this;
         }
+        Object.defineProperty(NovoDataTableCheckboxHeaderCell.prototype, "isAtLimit", {
+            get: function () {
+                return (this.maxSelected && this.dataTable.state.selectedRows.size + this.dataTable.dataSource.data.length > this.maxSelected && !this.checked);
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoDataTableCheckboxHeaderCell.prototype.ngOnDestroy = function () {
             if (this.selectionSubscription) {
                 this.selectionSubscription.unsubscribe();
@@ -35367,7 +35829,17 @@
             }
         };
         NovoDataTableCheckboxHeaderCell.prototype.onClick = function () {
-            this.dataTable.selectRows(!this.checked);
+            if (this.isAtLimit) {
+                this.toaster.alert({
+                    theme: 'danger',
+                    position: 'fixedTop',
+                    message: 'Error, more than 500 items are not able to be selected at one time',
+                    icon: 'caution',
+                });
+            }
+            else {
+                this.dataTable.selectRows(!this.checked);
+            }
         };
         return NovoDataTableCheckboxHeaderCell;
     }(table.CdkHeaderCell));
@@ -35383,10 +35855,12 @@
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
         { type: NovoDataTable },
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: NovoToastService }
     ]; };
     NovoDataTableCheckboxHeaderCell.propDecorators = {
-        role: [{ type: i0.HostBinding, args: ['attr.role',] }]
+        role: [{ type: i0.HostBinding, args: ['attr.role',] }],
+        maxSelected: [{ type: i0.Input }]
     };
     var NovoDataTableExpandHeaderCell = /** @class */ (function (_super) {
@@ -35540,6 +36014,7 @@
             _this.dataTable = dataTable;
             _this.ref = ref;
             _this.role = 'gridcell';
+            _this.maxSelected = undefined;
             _this.checked = false;
             renderer.setAttribute(elementRef.nativeElement, 'data-automation-id', "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
@@ -35554,11 +36029,23 @@
             });
             return _this;
         }
+        Object.defineProperty(NovoDataTableCheckboxCell.prototype, "isAtLimit", {
+            get: function () {
+                return this.maxSelected && this.dataTable.state.selectedRows.size >= this.maxSelected && !this.checked;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoDataTableCheckboxCell.prototype.ngOnInit = function () {
             this.checked = this.dataTable.isSelected(this.row);
         };
         NovoDataTableCheckboxCell.prototype.onClick = function () {
-            this.dataTable.selectRow(this.row);
+            if (!this.isAtLimit) {
+                this.dataTable.selectRow(this.row);
+            }
+        };
+        NovoDataTableCheckboxCell.prototype.getTooltip = function () {
+            return this.isAtLimit ? 'More than ' + this.maxSelected + ' items are not able to be selected at one time' : '';
         };
         NovoDataTableCheckboxCell.prototype.ngOnDestroy = function () {
             if (this.selectionSubscription) {
@@ -35573,7 +36060,7 @@
     NovoDataTableCheckboxCell.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-data-table-checkbox-cell',
-                    template: "\n    <div class=\"data-table-checkbox\" (click)=\"onClick()\">\n      <input type=\"checkbox\" [checked]=\"checked\" />\n      <label>\n        <i [class.bhi-checkbox-empty]=\"!checked\" [class.bhi-checkbox-filled]=\"checked\"></i>\n      </label>\n    </div>\n  ",
+                    template: "\n    <div class=\"data-table-checkbox\" (click)=\"onClick()\" [tooltip]=\"getTooltip()\" tooltipPosition=\"right\">\n      <input type=\"checkbox\" [checked]=\"checked\" />\n      <label>\n        <i [class.bhi-checkbox-disabled]=\"isAtLimit\" [class.bhi-checkbox-empty]=\"!checked\" [class.bhi-checkbox-filled]=\"checked\"></i>\n      </label>\n    </div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -35586,7 +36073,8 @@
     ]; };
     NovoDataTableCheckboxCell.propDecorators = {
         role: [{ type: i0.HostBinding, args: ['attr.role',] }],
-        row: [{ type: i0.Input }]
+        row: [{ type: i0.Input }],
+        maxSelected: [{ type: i0.Input }]
     };
     var NovoDataTableExpandCell = /** @class */ (function (_super) {
@@ -35644,6 +36132,7 @@
             this.state = state;
             this.ref = ref;
             this.labels = labels;
+            this.selectedClear = new i0.EventEmitter();
             this.sortClear = new i0.EventEmitter();
             this.filterClear = new i0.EventEmitter();
             this.allClear = new i0.EventEmitter();
@@ -35656,9 +36145,14 @@
             this.state.clearFilter();
             this.filterClear.emit(true);
         };
+        NovoDataTableClearButton.prototype.clearSelected = function () {
+            this.state.clearSelected();
+            this.selectedClear.emit(true);
+        };
         NovoDataTableClearButton.prototype.clearAll = function () {
             this.state.reset();
             this.allClear.emit(true);
+            this.selectedClear.emit(true);
             this.sortClear.emit(true);
             this.filterClear.emit(true);
         };
@@ -35667,7 +36161,7 @@
     NovoDataTableClearButton.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-data-table-clear-button',
-                    template: "\n    <novo-dropdown side=\"bottom-right\" class=\"novo-data-table-clear-button\" data-automation-id=\"novo-data-table-clear-dropdown\">\n      <novo-button type=\"button\" theme=\"primary\" color=\"negative\" icon=\"collapse\" data-automation-id=\"novo-data-table-clear-dropdown-btn\">\n        {{ labels.clear }}\n      </novo-button>\n      <list>\n        <item *ngIf=\"state.sort\" (click)=\"clearSort()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-sort\">{{\n          labels.clearSort\n        }}</item>\n        <item *ngIf=\"state.filter\" (click)=\"clearFilter()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-filter\">{{\n          labels.clearFilter\n        }}</item>\n        <item *ngIf=\"state.sort && state.filter\" (click)=\"clearAll()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-all\">{{\n          labels.clearAllNormalCase\n        }}</item>\n      </list>\n    </novo-dropdown>\n  ",
+                    template: "\n    <novo-dropdown side=\"bottom-right\" class=\"novo-data-table-clear-button\" data-automation-id=\"novo-data-table-clear-dropdown\">\n      <novo-button type=\"button\" theme=\"primary\" color=\"negative\" icon=\"collapse\" data-automation-id=\"novo-data-table-clear-dropdown-btn\">\n        {{ labels.clear }}\n      </novo-button>\n      <list>\n        <item\n          *ngIf=\"state.selected.length > 0\"\n          (click)=\"clearSelected()\"\n          data-automation-id=\"novo-data-table-clear-dropdown-clear-selected\"\n          >{{ labels.clearSelected }}</item\n        >\n        <item *ngIf=\"state.sort\" (click)=\"clearSort()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-sort\">{{\n          labels.clearSort\n        }}</item>\n        <item *ngIf=\"state.filter\" (click)=\"clearFilter()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-filter\">{{\n          labels.clearFilter\n        }}</item>\n        <item *ngIf=\"state.sort && state.filter\" (click)=\"clearAll()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-all\">{{\n          labels.clearAllNormalCase\n        }}</item>\n      </list>\n    </novo-dropdown>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -35677,6 +36171,7 @@
         { type: NovoLabelService }
     ]; };
     NovoDataTableClearButton.propDecorators = {
+        selectedClear: [{ type: i0.Output }],
         sortClear: [{ type: i0.Output }],
         filterClear: [{ type: i0.Output }],
         allClear: [{ type: i0.Output }]
@@ -36044,6 +36539,7 @@
         preselected: [{ type: i0.Input }],
         hideOverflowDays: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-overflow-days',] }],
         hideFooter: [{ type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         onSelect: [{ type: i0.Output }],
         numberOfMonths: [{ type: i0.Input }],
         mode: [{ type: i0.Input }],
@@ -36482,7 +36978,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-date-picker-input',
                     providers: [DATE_VALUE_ACCESSOR],
-                    template: "\n    <input\n      type=\"text\"\n      [name]=\"name\"\n      [(ngModel)]=\"formattedValue\"\n      [textMask]=\"maskOptions\"\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=\"date-input\"\n      [disabled]=\"disabled\"\n    />\n    <i *ngIf=\"!hasValue\" (click)=\"openPanel()\" class=\"bhi-calendar\"></i>\n    <i *ngIf=\"hasValue\" (click)=\"clearValue()\" class=\"bhi-times\"></i>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        inline=\"true\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [ngModel]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
+                    template: "\n    <input\n      type=\"text\"\n      [name]=\"name\"\n      [(ngModel)]=\"formattedValue\"\n      [textMask]=\"maskOptions\"\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=\"date-input\"\n      [disabled]=\"disabled\"\n    />\n    <i *ngIf=\"!hasValue\" (click)=\"openPanel()\" class=\"bhi-calendar\"></i>\n    <i *ngIf=\"hasValue\" (click)=\"clearValue()\" class=\"bhi-times\"></i>\n    <novo-overlay-template [parent]=\"element\" position=\"above-below\">\n      <novo-date-picker\n        [start]=\"start\"\n        [end]=\"end\"\n        inline=\"true\"\n        (onSelect)=\"setValueAndClose($event)\"\n        [disabledDateMessage]=\"disabledDateMessage\"\n        [ngModel]=\"value\"\n        [weekStart]=\"weekStart\"\n      ></novo-date-picker>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoDatePickerInputElement.ctorParameters = function () { return [
@@ -36501,6 +36997,7 @@
         textMaskEnabled: [{ type: i0.Input }],
         allowInvalidDate: [{ type: i0.Input }],
         disabled: [{ type: i0.HostBinding, args: ['class.disabled',] }, { type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         weekStart: [{ type: i0.Input }],
         blurEvent: [{ type: i0.Output }],
         focusEvent: [{ type: i0.Output }],
@@ -36736,7 +37233,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\" size=\"small\" (click)=\"clearStartValue()\">times</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\" size=\"small\" (click)=\"clearEndValue()\">times</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        [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  "
                 },] }
     ];
     NovoDateRangeInputElement.ctorParameters = function () { return [
@@ -36930,7 +37427,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 size=\"small\" 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 *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  "
                 },] }
     ];
     NovoMultiDateInputElement.ctorParameters = function () { return [
@@ -36982,6 +37479,154 @@
                 },] }
     ];
+    // NG2
+    var NovoBoxElement = /** @class */ (function () {
+        function NovoBoxElement() {
+            this.direction = 'row';
+            this.align = 'center';
+            this.justify = 'flex-start';
+            this.wrap = 'nowrap';
+            // get hb_gridCols() {
+            //   return this._sanitizer.bypassSecurityTrustStyle(`repeat(${this.columns}, ${ResourceSettings.eventWidth})`);
+            // }
+        }
+        Object.defineProperty(NovoBoxElement.prototype, "display", {
+            get: function () {
+                return 'block';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NovoBoxElement;
+    }());
+    NovoBoxElement.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-box',
+                    template: " <ng-content></ng-content> "
+                },] }
+    ];
+    NovoBoxElement.propDecorators = {
+        display: [{ type: i0.HostBinding, args: ['style.display',] }],
+        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
+        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
+        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
+        wrap: [{ type: i0.HostBinding, args: ['style.flex-wrap',] }, { type: i0.Input }],
+        gap: [{ type: i0.HostBinding, args: ['style.gap',] }, { type: i0.Input }]
+    };
+    var NovoFlexElement = /** @class */ (function () {
+        function NovoFlexElement() {
+            this.direction = 'row';
+            this.align = 'center';
+            this.justify = 'flex-start';
+            this.wrap = 'nowrap';
+            // get hb_gridCols() {
+            //   return this._sanitizer.bypassSecurityTrustStyle(`repeat(${this.columns}, ${ResourceSettings.eventWidth})`);
+            // }
+        }
+        Object.defineProperty(NovoFlexElement.prototype, "display", {
+            get: function () {
+                return 'flex';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NovoFlexElement;
+    }());
+    NovoFlexElement.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-flex,novo-row',
+                    template: " <ng-content></ng-content> "
+                },] }
+    ];
+    NovoFlexElement.propDecorators = {
+        display: [{ type: i0.HostBinding, args: ['style.display',] }],
+        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
+        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
+        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
+        wrap: [{ type: i0.HostBinding, args: ['style.flex-wrap',] }, { type: i0.Input }],
+        gap: [{ type: i0.HostBinding, args: ['style.gap',] }, { type: i0.Input }]
+    };
+    var NovoStackElement = /** @class */ (function (_super) {
+        __extends(NovoStackElement, _super);
+        function NovoStackElement() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.direction = 'column';
+            _this.align = 'start';
+            return _this;
+        }
+        return NovoStackElement;
+    }(NovoFlexElement));
+    NovoStackElement.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-stack,novo-column',
+                    template: " <ng-content></ng-content> "
+                },] }
+    ];
+    NovoStackElement.propDecorators = {
+        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
+        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }]
+    };
+    // NG2
+    var NovoGridElement = /** @class */ (function () {
+        function NovoGridElement(_sanitizer) {
+            this._sanitizer = _sanitizer;
+            this.direction = 'row';
+            this.align = 'start';
+            this.justify = 'flex-start';
+            this.columns = '1';
+        }
+        Object.defineProperty(NovoGridElement.prototype, "display", {
+            get: function () {
+                return 'grid';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoGridElement.prototype, "hb_gridCols", {
+            get: function () {
+                if (coercion._isNumberValue(this.columns)) {
+                    return this._sanitizer.bypassSecurityTrustStyle("repeat(" + this.columns + ", 1fr)");
+                }
+                return this._sanitizer.bypassSecurityTrustStyle("" + this.columns);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NovoGridElement;
+    }());
+    NovoGridElement.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-grid',
+                    template: " <ng-content></ng-content> "
+                },] }
+    ];
+    NovoGridElement.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    NovoGridElement.propDecorators = {
+        display: [{ type: i0.HostBinding, args: ['style.display',] }],
+        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
+        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
+        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
+        columns: [{ type: i0.Input }],
+        hb_gridCols: [{ type: i0.HostBinding, args: ['style.grid-template-columns',] }]
+    };
+    var NovoFlexModule = /** @class */ (function () {
+        function NovoFlexModule() {
+        }
+        return NovoFlexModule;
+    }());
+    NovoFlexModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    declarations: [NovoFlexElement, NovoStackElement, NovoGridElement, NovoBoxElement],
+                    exports: [NovoFlexElement, NovoStackElement, NovoGridElement, NovoBoxElement],
+                },] }
+    ];
     // NG2
     var dragula = dragulaImported__namespace;
     var NovoDragulaService = /** @class */ (function () {
@@ -37216,7 +37861,7 @@
                     template: '',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-divider{border-top:1px solid var(--border);display:block;margin:0}.novo-divider.novo-divider-vertical{border-right:1px solid var(--border);border-top:0;display:inline;margin-left:1rem;margin-right:1rem}.novo-divider.novo-divider-inset{margin-left:80px}[dir=rtl] .novo-divider.novo-divider-inset{margin-left:auto;margin-right:80px}"]
+                    styles: [".novo-divider{border-top:1px solid var(--border);display:block;margin:0}.novo-divider.novo-divider-vertical{border-right:1px solid var(--border);border-top:0;display:inline;margin-left:1rem;margin-right:1rem}.novo-divider.novo-divider-inset{margin-left:80px}[dir=rtl] .novo-divider.novo-divider-inset{margin-left:auto;margin-right:80px}"]
                 },] }
     ];
     NovoDividerComponent.propDecorators = {
@@ -37351,6 +37996,7 @@
             },
             set: function (value) {
                 this._multiple = coercion.coerceBooleanProperty(value);
+                this.position = 'above-below';
             },
             enumerable: false,
             configurable: true
@@ -37824,7 +38470,7 @@
                         { provide: NovoFieldControl, useExisting: NovoSelectElement },
                         { provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoSelectElement },
                     ],
-                    template: "\n    <div #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            [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  "
                 },] }
     ];
     NovoSelectElement.ctorParameters = function () { return [
@@ -38251,7 +38897,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-address',
                     providers: [ADDRESS_VALUE_ACCESSOR],
-                    template: "\n    <span\n      *ngIf=\"!config?.address1?.hidden\"\n      class=\"street-address\"\n      [class.invalid]=\"invalid.address1\"\n      [class.focus]=\"focused.address1\"\n      [class.disabled]=\"disabled.address1\"\n    >\n      <i\n        *ngIf=\"config.address1.required\"\n        class=\"required-indicator address1\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address1, 'bhi-check': valid.address1 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address1\"\n        type=\"text\"\n        id=\"address1\"\n        name=\"address1\"\n        [placeholder]=\"config.address1.label\"\n        [maxlength]=\"config?.address1?.maxlength\"\n        autocomplete=\"shipping street-address address-line-1\"\n        [(ngModel)]=\"model.address1\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address1')\"\n        (blur)=\"isBlurred($event, 'address1')\"\n        (input)=\"onInput($event, 'address1')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.address2?.hidden\"\n      class=\"apt suite\"\n      [class.invalid]=\"invalid.address2\"\n      [class.focus]=\"focused.address2\"\n      [class.disabled]=\"disabled.address2\"\n    >\n      <i\n        *ngIf=\"config.address2.required\"\n        class=\"required-indicator address2\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address2, 'bhi-check': valid.address2 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address2\"\n        type=\"text\"\n        id=\"address2\"\n        name=\"address2\"\n        [placeholder]=\"config.address2.label\"\n        [maxlength]=\"config?.address2?.maxlength\"\n        autocomplete=\"shipping address-line-2\"\n        [(ngModel)]=\"model.address2\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address2')\"\n        (blur)=\"isBlurred($event, 'address2')\"\n        (input)=\"onInput($event, 'address2')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.city?.hidden\"\n      class=\"city locality\"\n      [class.invalid]=\"invalid.city\"\n      [class.focus]=\"focused.city\"\n      [class.disabled]=\"disabled.city\"\n    >\n      <i *ngIf=\"config.city.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.city, 'bhi-check': valid.city }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.city\"\n        type=\"text\"\n        id=\"city\"\n        name=\"city\"\n        [placeholder]=\"config.city.label\"\n        autocomplete=\"shipping city locality\"\n        [maxlength]=\"config?.city?.maxlength\"\n        [(ngModel)]=\"model.city\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'city')\"\n        (blur)=\"isBlurred($event, 'city')\"\n        (input)=\"onInput($event, 'city')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.state?.hidden\"\n      class=\"state region\"\n      [class.invalid]=\"invalid.state\"\n      [class.focus]=\"focused.state\"\n      [class.disabled]=\"disabled.state\"\n      [tooltip]=\"tooltip.state\"\n    >\n      <i *ngIf=\"config.state.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.state, 'bhi-check': valid.state }\"> </i>\n      <novo-picker\n        [config]=\"config?.state?.pickerConfig\"\n        [placeholder]=\"config?.state?.label\"\n        (changed)=\"onStateChange($event)\"\n        autocomplete=\"shipping region\"\n        [(ngModel)]=\"model.state\"\n        [disablePickerInput]=\"disabled.state\"\n      ></novo-picker>\n    </span>\n    <span\n      *ngIf=\"!config?.zip?.hidden\"\n      class=\"zip postal-code\"\n      [class.invalid]=\"invalid.zip\"\n      [class.focus]=\"focused.zip\"\n      [class.disabled]=\"disabled.zip\"\n    >\n      <i *ngIf=\"config.zip.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.zip, 'bhi-check': valid.zip }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.zip\"\n        type=\"text\"\n        id=\"zip\"\n        name=\"zip\"\n        [placeholder]=\"config.zip.label\"\n        autocomplete=\"shipping postal-code\"\n        [maxlength]=\"config?.zip?.maxlength\"\n        [(ngModel)]=\"model.zip\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'zip')\"\n        (blur)=\"isBlurred($event, 'zip')\"\n        (input)=\"onInput($event, 'zip')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.countryID?.hidden\"\n      class=\"country-name\"\n      [class.invalid]=\"invalid.countryID\"\n      [class.focus]=\"focused.countryID\"\n      [class.disabled]=\"disabled.countryID\"\n    >\n      <i\n        *ngIf=\"config.countryID.required\"\n        class=\"required-indicator\"\n        [ngClass]=\"{ 'bhi-circle': !valid.countryID, 'bhi-check': valid.countryID }\"\n      >\n      </i>\n      <novo-picker\n        [config]=\"config?.countryID?.pickerConfig\"\n        [placeholder]=\"config.countryID.label\"\n        (changed)=\"onCountryChange($event)\"\n        autocomplete=\"shipping country\"\n        [(ngModel)]=\"model.countryID\"\n        [disablePickerInput]=\"disabled.countryID\"\n      ></novo-picker>\n    </span>\n  "
+                    template: "\n    <span\n      *ngIf=\"!config?.address1?.hidden\"\n      class=\"street-address\"\n      [class.invalid]=\"invalid.address1\"\n      [class.focus]=\"focused.address1\"\n      [class.disabled]=\"disabled.address1\"\n    >\n      <i\n        *ngIf=\"config.address1.required\"\n        class=\"required-indicator address1\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address1, 'bhi-check': valid.address1 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address1\"\n        type=\"text\"\n        id=\"address1\"\n        name=\"address1\"\n        [placeholder]=\"config.address1.label\"\n        [maxlength]=\"config?.address1?.maxlength\"\n        autocomplete=\"shipping street-address address-line-1\"\n        [(ngModel)]=\"model.address1\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address1')\"\n        (blur)=\"isBlurred($event, 'address1')\"\n        (input)=\"onInput($event, 'address1')\"\n        [disabled]=\"disabled.address1\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.address2?.hidden\"\n      class=\"apt suite\"\n      [class.invalid]=\"invalid.address2\"\n      [class.focus]=\"focused.address2\"\n      [class.disabled]=\"disabled.address2\"\n    >\n      <i\n        *ngIf=\"config.address2.required\"\n        class=\"required-indicator address2\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address2, 'bhi-check': valid.address2 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address2\"\n        type=\"text\"\n        id=\"address2\"\n        name=\"address2\"\n        [placeholder]=\"config.address2.label\"\n        [maxlength]=\"config?.address2?.maxlength\"\n        autocomplete=\"shipping address-line-2\"\n        [(ngModel)]=\"model.address2\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address2')\"\n        (blur)=\"isBlurred($event, 'address2')\"\n        (input)=\"onInput($event, 'address2')\"\n        [disabled]=\"disabled.address2\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.city?.hidden\"\n      class=\"city locality\"\n      [class.invalid]=\"invalid.city\"\n      [class.focus]=\"focused.city\"\n      [class.disabled]=\"disabled.city\"\n    >\n      <i *ngIf=\"config.city.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.city, 'bhi-check': valid.city }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.city\"\n        type=\"text\"\n        id=\"city\"\n        name=\"city\"\n        [placeholder]=\"config.city.label\"\n        autocomplete=\"shipping city locality\"\n        [maxlength]=\"config?.city?.maxlength\"\n        [(ngModel)]=\"model.city\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'city')\"\n        (blur)=\"isBlurred($event, 'city')\"\n        (input)=\"onInput($event, 'city')\"\n        [disabled]=\"disabled.city\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.state?.hidden\"\n      class=\"state region\"\n      [class.invalid]=\"invalid.state\"\n      [class.focus]=\"focused.state\"\n      [class.disabled]=\"disabled.state\"\n      [tooltip]=\"tooltip.state\"\n    >\n      <i *ngIf=\"config.state.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.state, 'bhi-check': valid.state }\"> </i>\n      <novo-picker\n        [config]=\"config?.state?.pickerConfig\"\n        [placeholder]=\"config?.state?.label\"\n        (changed)=\"onStateChange($event)\"\n        autocomplete=\"shipping region\"\n        [(ngModel)]=\"model.state\"\n        [disablePickerInput]=\"disabled.state\"\n      ></novo-picker>\n    </span>\n    <span\n      *ngIf=\"!config?.zip?.hidden\"\n      class=\"zip postal-code\"\n      [class.invalid]=\"invalid.zip\"\n      [class.focus]=\"focused.zip\"\n      [class.disabled]=\"disabled.zip\"\n    >\n      <i *ngIf=\"config.zip.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.zip, 'bhi-check': valid.zip }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.zip\"\n        type=\"text\"\n        id=\"zip\"\n        name=\"zip\"\n        [placeholder]=\"config.zip.label\"\n        autocomplete=\"shipping postal-code\"\n        [maxlength]=\"config?.zip?.maxlength\"\n        [(ngModel)]=\"model.zip\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'zip')\"\n        (blur)=\"isBlurred($event, 'zip')\"\n        (input)=\"onInput($event, 'zip')\"\n        [disabled]=\"disabled.zip\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.countryID?.hidden\"\n      class=\"country-name\"\n      [class.invalid]=\"invalid.countryID\"\n      [class.focus]=\"focused.countryID\"\n      [class.disabled]=\"disabled.countryID\"\n    >\n      <i\n        *ngIf=\"config.countryID.required\"\n        class=\"required-indicator\"\n        [ngClass]=\"{ 'bhi-circle': !valid.countryID, 'bhi-check': valid.countryID }\"\n      >\n      </i>\n      <novo-picker\n        [config]=\"config?.countryID?.pickerConfig\"\n        [placeholder]=\"config.countryID.label\"\n        (changed)=\"onCountryChange($event)\"\n        autocomplete=\"shipping country\"\n        [(ngModel)]=\"model.countryID\"\n        [disablePickerInput]=\"disabled.countryID\"\n      ></novo-picker>\n    </span>\n  "
                 },] }
     ];
     NovoAddressElement.ctorParameters = function () { return [
@@ -38310,36 +38956,113 @@
     }());
     // Value accessor for the component (supports ngModel)
-    var FILE_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return NovoFileInputElement; }),
-        multi: true,
-    };
+    // const FILE_VALUE_ACCESSOR = {
+    //   provide: NG_VALUE_ACCESSOR,
+    //   useExisting: forwardRef(() => NovoFileInputElement),
+    //   multi: true,
+    // };
     var LAYOUT_DEFAULTS$1 = { order: 'default', download: true, removable: true, labelStyle: 'default', draggable: false };
-    var NovoFileInputElement = /** @class */ (function () {
-        function NovoFileInputElement(element, labels, dragula) {
-            this.element = element;
-            this.labels = labels;
-            this.dragula = dragula;
-            this.multiple = false;
-            this.disabled = false;
-            this.value = [];
-            this.edit = new i0.EventEmitter();
-            this.save = new i0.EventEmitter();
-            this.delete = new i0.EventEmitter();
-            this.upload = new i0.EventEmitter();
-            this.elements = [];
-            this.files = [];
-            this.active = false;
-            this.onModelChange = function () { };
-            this.onModelTouched = function () { };
-            this.commands = {
-                dragenter: this.dragEnterHandler.bind(this),
-                dragleave: this.dragLeaveHandler.bind(this),
-                dragover: this.dragOverHandler.bind(this),
-                drop: this.dropHandler.bind(this),
+    // make file-input ids unique
+    var nextId$2 = 0;
+    var NovoFileInputBase = /** @class */ (function () {
+        function NovoFileInputBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
+            this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
+            this._parentForm = _parentForm;
+            this._parentFormGroup = _parentFormGroup;
+            this.ngControl = ngControl;
+        }
+        return NovoFileInputBase;
+    }());
+    var NovoFileInputMixins = mixinErrorState(NovoFileInputBase);
+    var NovoFileInputElement = /** @class */ (function (_super) {
+        __extends(NovoFileInputElement, _super);
+        function NovoFileInputElement(element, labels, dragula, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, _ngControl) {
+            var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, _ngControl) || this;
+            _this.element = element;
+            _this.labels = labels;
+            _this.dragula = dragula;
+            _this._uniqueId = "novo-file-input-" + ++nextId$2;
+            /** Tab index for the chip list. */
+            _this._tabIndex = 0;
+            /** User defined tab index. */
+            _this._userTabIndex = null;
+            _this.controlType = 'file-input';
+            /** @docs-private Implemented as part of NovoFieldControl. */
+            _this.lastKeyValue = null;
+            _this.id = _this._uniqueId;
+            _this.tabindex = 0;
+            _this.multiple = false;
+            _this.value = [];
+            _this.edit = new i0.EventEmitter();
+            _this.save = new i0.EventEmitter();
+            _this.delete = new i0.EventEmitter();
+            _this.upload = new i0.EventEmitter();
+            _this.elements = [];
+            _this.files = [];
+            _this.active = false;
+            _this.onModelChange = function () { };
+            _this.onModelTouched = function () { };
+            _this._name = _this._uniqueId;
+            _this._value = false;
+            _this._required = false;
+            _this._disabled = false;
+            if (_ngControl) {
+                _ngControl.valueAccessor = _this;
+            }
+            _this.commands = {
+                dragenter: _this.dragEnterHandler.bind(_this),
+                dragleave: _this.dragLeaveHandler.bind(_this),
+                dragover: _this.dragOverHandler.bind(_this),
+                drop: _this.dropHandler.bind(_this),
             };
+            return _this;
         }
+        Object.defineProperty(NovoFileInputElement.prototype, "name", {
+            get: function () {
+                return this._name;
+            },
+            set: function (value) {
+                this.name = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoFileInputElement.prototype, "disabled", {
+            get: function () {
+                return this.ngControl ? !!this.ngControl.disabled : this._disabled;
+            },
+            set: function (value) {
+                this._disabled = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoFileInputElement.prototype, "required", {
+            /**
+             * Implemented as part of NovoFieldControl.
+             * @docs-private
+             */
+            get: function () {
+                return this._required;
+            },
+            set: function (value) {
+                this._required = coercion.coerceBooleanProperty(value);
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoFileInputElement.prototype, "placeholder", {
+            /** Implemented as part of NovoFieldControl. */
+            get: function () {
+                return this._placeholder;
+            },
+            set: function (value) {
+                this._placeholder = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoFileInputElement.prototype.ngOnInit = function () {
             var _this = this;
             ['dragenter', 'dragleave', 'dragover', 'drop'].forEach(function (type) {
@@ -38493,35 +39216,86 @@
         NovoFileInputElement.prototype.setDisabledState = function (disabled) {
             this.disabled = disabled;
         };
+        Object.defineProperty(NovoFileInputElement.prototype, "focused", {
+            /** Whether any radio buttons has focus. */
+            get: function () {
+                // todo: implement this.
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoFileInputElement.prototype, "empty", {
+            /** Implemented as part of NovoFieldControl. */
+            get: function () {
+                return this.value === null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NovoFileInputElement.prototype, "shouldLabelFloat", {
+            /** Implemented as part of NovoFieldControl. */
+            get: function () {
+                return !this.empty || this.focused;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /** Implemented as part of NovoFieldControl. */
+        NovoFileInputElement.prototype.setDescribedByIds = function (ids) {
+            this._ariaDescribedby = ids.join(' ');
+        };
+        /** Implemented as part of NovoFieldControl. */
+        NovoFileInputElement.prototype.onContainerClick = function (event) {
+            this.focus();
+        };
+        /**
+         * Focuses the first non-disabled chip in this chip list, or the associated input when there
+         * are no eligible chips.
+         */
+        NovoFileInputElement.prototype.focus = function (options) {
+            if (this.disabled) {
+                return;
+            }
+            // TODO
+        };
         return NovoFileInputElement;
-    }());
+    }(NovoFileInputMixins));
     NovoFileInputElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-file-input',
-                    providers: [FILE_VALUE_ACCESSOR],
+                    providers: [{ provide: NovoFieldControl, useExisting: NovoFileInputElement }],
                     template: "\n    <div #container></div>\n    <ng-template #fileInput>\n      <div class=\"file-input-group\" [class.disabled]=\"disabled\" [class.active]=\"active\">\n        <input\n          *ngIf=\"!layoutOptions.customActions\"\n          type=\"file\"\n          [name]=\"name\"\n          [attr.id]=\"name\"\n          (change)=\"check($event)\"\n          [attr.multiple]=\"multiple\"\n          tabindex=\"-1\"\n          [attr.data-feature-id]=\"dataFeatureId\"\n        />\n        <input\n          *ngIf=\"layoutOptions.customActions\"\n          type=\"file\"\n          [name]=\"name\"\n          [attr.id]=\"name\"\n          (change)=\"customCheck($event)\"\n          [attr.multiple]=\"multiple\"\n          tabindex=\"-1\"\n          [attr.data-feature-id]=\"dataFeatureId\"\n        />\n        <section [ngSwitch]=\"layoutOptions.labelStyle\">\n          <label *ngSwitchCase=\"'no-box'\" [attr.for]=\"name\" class=\"no-box\">\n            <div>\n              <i class=\"bhi-dropzone\"></i>{{ placeholder || labels.chooseAFile }} {{ labels.or }}\n              <strong class=\"link\">{{ labels.clickToBrowse }}</strong>\n            </div>\n          </label>\n          <label *ngSwitchDefault [attr.for]=\"name\" class=\"boxed\">\n            <span>{{ placeholder || labels.chooseAFile }}</span>\n            <small\n              >{{ labels.or }} <strong class=\"link\">{{ labels.clickToBrowse }}</strong></small\n            >\n          </label>\n        </section>\n      </div>\n    </ng-template>\n    <ng-template #fileOutput>\n      <div class=\"file-output-group\" [dragula]=\"fileOutputBag\" [dragulaModel]=\"files\">\n        <div class=\"file-item\" *ngFor=\"let file of files\" [class.disabled]=\"disabled\">\n          <i *ngIf=\"layoutOptions.draggable\" class=\"bhi-move\"></i>\n          <label *ngIf=\"file.link\"\n            ><span\n              ><a href=\"{{ file.link }}\" target=\"_blank\">{{ file.name | decodeURI }}</a></span\n            ><span *ngIf=\"file.description\">||</span><span>{{ file.description }}</span></label\n          >\n          <label *ngIf=\"!file.link\">{{ file.name | decodeURI }}</label>\n          <div class=\"actions\" [attr.data-automation-id]=\"'file-actions'\" *ngIf=\"file.loaded\">\n            <div *ngIf=\"!layoutOptions.customActions\">\n              <button\n                *ngIf=\"layoutOptions.download\"\n                type=\"button\"\n                theme=\"icon\"\n                icon=\"save\"\n                (click)=\"download(file)\"\n                [attr.data-automation-id]=\"'file-download'\"\n                tabindex=\"-1\"\n              ></button>\n              <button\n                *ngIf=\"!disabled && (layoutOptions.removable || (!layoutOptions.removable && layoutOptions.removableWhenNew && !file.link))\"\n                type=\"button\"\n                theme=\"icon\"\n                icon=\"close\"\n                (click)=\"remove(file)\"\n                [attr.data-automation-id]=\"'file-remove'\"\n                tabindex=\"-1\"\n              ></button>\n            </div>\n            <div *ngIf=\"layoutOptions.customActions\">\n              <button\n                *ngIf=\"layoutOptions.edit && !disabled\"\n                type=\"button\"\n                theme=\"icon\"\n                icon=\"edit\"\n                (click)=\"customEdit(file)\"\n                [attr.data-automation-id]=\"'file-edit'\"\n                tabindex=\"-1\"\n              ></button>\n              <button\n                *ngIf=\"layoutOptions.download\"\n                type=\"button\"\n                theme=\"icon\"\n                icon=\"save\"\n                (click)=\"customSave(file)\"\n                [attr.data-automation-id]=\"'file-download'\"\n                tabindex=\"-1\"\n              ></button>\n              <button\n                *ngIf=\"!disabled\"\n                type=\"button\"\n                theme=\"icon\"\n                icon=\"close\"\n                (click)=\"customDelete(file)\"\n                [attr.data-automation-id]=\"'file-remove'\"\n                tabindex=\"-1\"\n              ></button>\n            </div>\n          </div>\n          <novo-loading *ngIf=\"!file.loaded\"></novo-loading>\n        </div>\n      </div>\n    </ng-template>\n  "
                 },] }
     ];
     NovoFileInputElement.ctorParameters = function () { return [
         { type: i0.ElementRef },
         { type: NovoLabelService },
-        { type: NovoDragulaService }
+        { type: NovoDragulaService },
+        { type: ErrorStateMatcher },
+        { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
+        { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
     ]; };
     NovoFileInputElement.propDecorators = {
+        id: [{ type: i0.Input }],
+        tabindex: [{ type: i0.Input }],
+        errorStateMatcher: [{ type: i0.Input }],
         fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: true },] }],
         fileOutput: [{ type: i0.ViewChild, args: ['fileOutput', { static: true },] }],
         container: [{ type: i0.ViewChild, args: ['container', { read: i0.ViewContainerRef, static: true },] }],
-        name: [{ type: i0.Input }],
         multiple: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
         layoutOptions: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         dataFeatureId: [{ type: i0.Input }],
         edit: [{ type: i0.Output }],
         save: [{ type: i0.Output }],
         delete: [{ type: i0.Output }],
-        upload: [{ type: i0.Output }]
+        upload: [{ type: i0.Output }],
+        name: [{ type: i0.Input }],
+        disabled: [{ type: i0.HostBinding, args: ['class.disabled',] }, { type: i0.Input }],
+        required: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }]
     };
     // NG2
@@ -38934,10 +39708,12 @@
             this.resetSubscription.unsubscribe();
         };
         NovoDataTablePagination.prototype.selectPage = function (page) {
+            this.state.checkRetainment('page');
             this.page = page;
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.nextPage = function () {
+            this.state.checkRetainment('page');
             if (!this.hasNextPage()) {
                 return;
             }
@@ -38946,6 +39722,7 @@
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.previousPage = function () {
+            this.state.checkRetainment('page');
             if (!this.hasPreviousPage()) {
                 return;
             }
@@ -39140,6 +39917,7 @@
                         NovoTooltipModule,
                         NovoOptionModule,
                         NovoCheckboxModule,
+                        NovoFlexModule,
                     ],
                     declarations: [
                         DataTableInterpolatePipe,
@@ -39318,7 +40096,7 @@
                             animations.transition('date <=> time', animations.animate('200ms ease-in')),
                         ]),
                     ],
-                    template: "\n    <div class=\"date-time-container\">\n      <div class=\"date-time-tabs\">\n        <span\n          class=\"date-tab\"\n          (click)=\"toggleView('date')\"\n          [@dateTextState]=\"componentTabState\"\n          data-automation-id=\"novo-date-time-date-tab\"\n          >{{ selectedLabel }}</span\n        >\n        <span\n          class=\"time-tab\"\n          (click)=\"toggleView('time')\"\n          [@timeTextState]=\"componentTabState\"\n          data-automation-id=\"novo-date-time-time-tab\"\n        >\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 *ngIf=\"!military\" class=\"meridian\"> {{ meridian }}</span>\n        </span>\n        <i class=\"date-time-indicator\" [@indicatorState]=\"componentTabState\"></i>\n      </div>\n      <div class=\"view-container\" [@containerState]=\"componentTabState\">\n        <div class=\"calendar\">\n          <novo-date-picker\n            (onSelect)=\"onDateSelected($event)\"\n            [(ngModel)]=\"model\"\n            inline=\"true\"\n            [minYear]=\"minYear\"\n            [maxYear]=\"maxYear\"\n            [start]=\"start\"\n            [end]=\"end\"\n            [weekStart]=\"weekStart\"\n          ></novo-date-picker>\n        </div>\n        <div class=\"time-picker\">\n          <novo-time-picker (onSelect)=\"onTimeSelected($event)\" [(ngModel)]=\"model\" [military]=\"military\" inline=\"true\"></novo-time-picker>\n        </div>\n      </div>\n    </div>\n  "
+                    template: "\n    <div class=\"date-time-container\">\n      <div class=\"date-time-tabs\">\n        <span\n          class=\"date-tab\"\n          (click)=\"toggleView('date')\"\n          [@dateTextState]=\"componentTabState\"\n          data-automation-id=\"novo-date-time-date-tab\"\n          >{{ selectedLabel }}</span\n        >\n        <span\n          class=\"time-tab\"\n          (click)=\"toggleView('time')\"\n          [@timeTextState]=\"componentTabState\"\n          data-automation-id=\"novo-date-time-time-tab\"\n        >\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 *ngIf=\"!military\" class=\"meridian\"> {{ meridian }}</span>\n        </span>\n        <i class=\"date-time-indicator\" [@indicatorState]=\"componentTabState\"></i>\n      </div>\n      <div class=\"view-container\" [@containerState]=\"componentTabState\">\n        <div class=\"calendar\">\n          <novo-date-picker\n            (onSelect)=\"onDateSelected($event)\"\n            [(ngModel)]=\"model\"\n            inline=\"true\"\n            [minYear]=\"minYear\"\n            [maxYear]=\"maxYear\"\n            [start]=\"start\"\n            [end]=\"end\"\n            [disabledDateMessage]=\"disabledDateMessage\"\n            [weekStart]=\"weekStart\"\n          ></novo-date-picker>\n        </div>\n        <div class=\"time-picker\">\n          <novo-time-picker (onSelect)=\"onTimeSelected($event)\" [(ngModel)]=\"model\" [military]=\"military\" inline=\"true\"></novo-time-picker>\n        </div>\n      </div>\n    </div>\n  "
                 },] }
     ];
     NovoDateTimePickerElement.ctorParameters = function () { return [
@@ -39332,6 +40110,7 @@
         end: [{ type: i0.Input }],
         military: [{ type: i0.Input }],
         weekStart: [{ type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         onSelect: [{ type: i0.Output }]
     };
@@ -40550,7 +41329,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-date-time-picker-input',
                     providers: [DATE_VALUE_ACCESSOR$3],
-                    template: "\n    <novo-date-picker-input\n      [ngModel]=\"datePart\"\n      (ngModelChange)=\"updateDate($event)\"\n      [start]=\"start\"\n      [end]=\"end\"\n      [maskOptions]=\"maskOptions\"\n      (blurEvent)=\"handleBlur($event)\"\n      (focusEvent)=\"handleFocus($event)\"\n      [disabled]=\"disabled\"\n      [weekStart]=\"weekStart\"\n    ></novo-date-picker-input>\n    <novo-time-picker-input\n      [ngModel]=\"timePart\"\n      (ngModelChange)=\"updateTime($event)\"\n      [military]=\"military\"\n      (blurEvent)=\"handleBlur($event)\"\n      (focusEvent)=\"handleFocus($event)\"\n      [disabled]=\"disabled\"\n    ></novo-time-picker-input>\n  "
+                    template: "\n    <novo-date-picker-input\n      [ngModel]=\"datePart\"\n      (ngModelChange)=\"updateDate($event)\"\n      [start]=\"start\"\n      [end]=\"end\"\n      [disabledDateMessage]=\"disabledDateMessage\"\n      [maskOptions]=\"maskOptions\"\n      (blurEvent)=\"handleBlur($event)\"\n      (focusEvent)=\"handleFocus($event)\"\n      [disabled]=\"disabled\"\n      [weekStart]=\"weekStart\"\n    ></novo-date-picker-input>\n    <novo-time-picker-input\n      [ngModel]=\"timePart\"\n      (ngModelChange)=\"updateTime($event)\"\n      [military]=\"military\"\n      (blurEvent)=\"handleBlur($event)\"\n      (focusEvent)=\"handleFocus($event)\"\n      [disabled]=\"disabled\"\n    ></novo-time-picker-input>\n  "
                 },] }
     ];
     NovoDateTimePickerInputElement.ctorParameters = function () { return [
@@ -40568,6 +41347,7 @@
         disabled: [{ type: i0.Input }],
         format: [{ type: i0.Input }],
         weekStart: [{ type: i0.Input }],
+        disabledDateMessage: [{ type: i0.Input }],
         blurEvent: [{ type: i0.Output }],
         focusEvent: [{ type: i0.Output }],
         changeEvent: [{ type: i0.Output }]
@@ -40797,7 +41577,7 @@
                         '[class.novo-expansion-panel-spacing]': '_hasSpacing()',
                         '[class.novo-expansion-panel-padding]': 'padding',
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-expansion-panel{background:var(--background-bright,#fff);color:var(--text-main,#3d464d)}.novo-action-row{border-top-color:var(--border,#3d464d)}.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]):hover{background:rgba(0,0,0,.04)}.novo-expansion-panel-header-title{color:var(--text-main,#3d464d)}.novo-expansion-indicator:after,.novo-expansion-panel-header-description{color:#9e9e9e}.novo-expansion-panel-header[aria-disabled=true]{color:#9e9e9e;pointer-events:none}.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-description,.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-title{color:inherit}.novo-expansion-panel.novo-expanded[theme=black]{border-top:3px solid #000}.novo-expansion-panel.novo-expanded[theme=white]{border-top:3px solid #fff}.novo-expansion-panel.novo-expanded[theme=gray],.novo-expansion-panel.novo-expanded[theme=grey]{border-top:3px solid #9e9e9e}.novo-expansion-panel.novo-expanded[theme=bright],.novo-expansion-panel.novo-expanded[theme=offWhite]{border-top:3px solid #f7f7f7}.novo-expansion-panel.novo-expanded[theme=light]{border-top:3px solid #dbdbdb}.novo-expansion-panel.novo-expanded[theme=neutral]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=dark]{border-top:3px solid #3d464d}.novo-expansion-panel.novo-expanded[theme=orange]{border-top:3px solid #ff6900}.novo-expansion-panel.novo-expanded[theme=navigation]{border-top:3px solid #202b38}.novo-expansion-panel.novo-expanded[theme=skyBlue]{border-top:3px solid #009bdf}.novo-expansion-panel.novo-expanded[theme=steel]{border-top:3px solid #5b6770}.novo-expansion-panel.novo-expanded[theme=metal]{border-top:3px solid #637893}.novo-expansion-panel.novo-expanded[theme=sand]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=silver]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=stone]{border-top:3px solid #bebebe}.novo-expansion-panel.novo-expanded[theme=ash]{border-top:3px solid #a0a0a0}.novo-expansion-panel.novo-expanded[theme=slate]{border-top:3px solid #707070}.novo-expansion-panel.novo-expanded[theme=onyx]{border-top:3px solid #526980}.novo-expansion-panel.novo-expanded[theme=charcoal]{border-top:3px solid #282828}.novo-expansion-panel.novo-expanded[theme=moonlight]{border-top:3px solid #1a242f}.novo-expansion-panel.novo-expanded[theme=midnight]{border-top:3px solid #202b38}.novo-expansion-panel.novo-expanded[theme=darkness]{border-top:3px solid #161f27}.novo-expansion-panel.novo-expanded[theme=navy]{border-top:3px solid #0d2d42}.novo-expansion-panel.novo-expanded[theme=aqua]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=ocean]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=mint]{border-top:3px solid #37bc9b}.novo-expansion-panel.novo-expanded[theme=grass]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=sunflower]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=bittersweet]{border-top:3px solid #eb6845}.novo-expansion-panel.novo-expanded[theme=grapefruit]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=carnation]{border-top:3px solid #d770ad}.novo-expansion-panel.novo-expanded[theme=lavender]{border-top:3px solid #967adc}.novo-expansion-panel.novo-expanded[theme=mountain]{border-top:3px solid #9678b6}.novo-expansion-panel.novo-expanded[theme=positive]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=success]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=negative]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=warning]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=empty]{border-top:3px solid #cccdcc}.novo-expansion-panel.novo-expanded[theme=disabled]{border-top:3px solid #bebebe}.novo-expansion-panel.novo-expanded[theme=background]{border-top:3px solid #f7f7f7}.novo-expansion-panel.novo-expanded[theme=backgroundDark]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=presentation]{border-top:3px solid #5b6770}.novo-expansion-panel.novo-expanded[theme=bullhorn]{border-top:3px solid #ff6900}.novo-expansion-panel.novo-expanded[theme=pulse]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=company]{border-top:3px solid #39d}.novo-expansion-panel.novo-expanded[theme=candidate]{border-top:3px solid #4b7}.novo-expansion-panel.novo-expanded[theme=lead]{border-top:3px solid #a69}.novo-expansion-panel.novo-expanded[theme=contact]{border-top:3px solid #fa4}.novo-expansion-panel.novo-expanded[theme=opportunity]{border-top:3px solid #625}.novo-expansion-panel.novo-expanded[theme=job]{border-top:3px solid #b56}.novo-expansion-panel.novo-expanded[theme=submission]{border-top:3px solid #a9adbb}.novo-expansion-panel.novo-expanded[theme=sendout]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=placement]{border-top:3px solid #0b344f}.novo-expansion-panel.novo-expanded[theme=note]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=contract]{border-top:3px solid #454ea0}.novo-expansion-panel.novo-expanded[theme=billableCharge],.novo-expansion-panel.novo-expanded[theme=corporateUser],.novo-expansion-panel.novo-expanded[theme=credential],.novo-expansion-panel.novo-expanded[theme=distributionList],.novo-expansion-panel.novo-expanded[theme=earnCode],.novo-expansion-panel.novo-expanded[theme=invoiceStatement],.novo-expansion-panel.novo-expanded[theme=jobCode],.novo-expansion-panel.novo-expanded[theme=payableCharge],.novo-expansion-panel.novo-expanded[theme=person],.novo-expansion-panel.novo-expanded[theme=user]{border-top:3px solid #696d79}.novo-expansion-panel{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:content-box;display:block;margin:0 16px;transition:margin 225ms ease-in-out}.novo-expansion-panel.novo-expanded{margin:16px 4px}.novo-expansion-panel.novo-expanded:first-child{margin-top:0}.novo-expansion-panel.novo-expanded:last-child{margin-bottom:0}.novo-expansion-panel-content{overflow:hidden}.novo-expansion-panel-content.novo-expanded{overflow:visible}.novo-expansion-panel-padding .novo-expansion-panel-body{padding:0 24px 16px}.novo-accordion .novo-expansion-panel-spacing:first-child{margin-top:0}.novo-accordion .novo-expansion-panel-spacing:last-child{margin-bottom:0}.novo-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.novo-action-row button.novo-button{margin-left:8px}[dir=rtl] .novo-action-row button.novo-button{margin-left:0;margin-right:8px}"]
+                    styles: [".novo-expansion-panel{background:var(--background-bright,#fff);color:var(--text-main,#3d464d)}.novo-action-row{border-top-color:var(--border,#3d464d)}.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]):hover{background:rgba(0,0,0,.04)}.novo-expansion-panel-header-title{color:var(--text-main,#3d464d)}.novo-expansion-indicator:after,.novo-expansion-panel-header-description{color:#9e9e9e}.novo-expansion-panel-header[aria-disabled=true]{color:#9e9e9e;pointer-events:none}.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-description,.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-title{color:inherit}.novo-expansion-panel.novo-expanded[theme=black]{border-top:3px solid #000}.novo-expansion-panel.novo-expanded[theme=white]{border-top:3px solid #fff}.novo-expansion-panel.novo-expanded[theme=gray],.novo-expansion-panel.novo-expanded[theme=grey]{border-top:3px solid #9e9e9e}.novo-expansion-panel.novo-expanded[theme=bright],.novo-expansion-panel.novo-expanded[theme=offWhite]{border-top:3px solid #f7f7f7}.novo-expansion-panel.novo-expanded[theme=light]{border-top:3px solid #dbdbdb}.novo-expansion-panel.novo-expanded[theme=neutral]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=dark]{border-top:3px solid #3d464d}.novo-expansion-panel.novo-expanded[theme=orange]{border-top:3px solid #ff6900}.novo-expansion-panel.novo-expanded[theme=navigation]{border-top:3px solid #202b38}.novo-expansion-panel.novo-expanded[theme=skyBlue]{border-top:3px solid #009bdf}.novo-expansion-panel.novo-expanded[theme=steel]{border-top:3px solid #5b6770}.novo-expansion-panel.novo-expanded[theme=metal]{border-top:3px solid #637893}.novo-expansion-panel.novo-expanded[theme=sand]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=silver]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=stone]{border-top:3px solid #bebebe}.novo-expansion-panel.novo-expanded[theme=ash]{border-top:3px solid #a0a0a0}.novo-expansion-panel.novo-expanded[theme=slate]{border-top:3px solid #707070}.novo-expansion-panel.novo-expanded[theme=onyx]{border-top:3px solid #526980}.novo-expansion-panel.novo-expanded[theme=charcoal]{border-top:3px solid #282828}.novo-expansion-panel.novo-expanded[theme=moonlight]{border-top:3px solid #1a242f}.novo-expansion-panel.novo-expanded[theme=midnight]{border-top:3px solid #202b38}.novo-expansion-panel.novo-expanded[theme=darkness]{border-top:3px solid #161f27}.novo-expansion-panel.novo-expanded[theme=navy]{border-top:3px solid #0d2d42}.novo-expansion-panel.novo-expanded[theme=aqua]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=ocean]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=mint]{border-top:3px solid #37bc9b}.novo-expansion-panel.novo-expanded[theme=grass]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=sunflower]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=bittersweet]{border-top:3px solid #eb6845}.novo-expansion-panel.novo-expanded[theme=grapefruit]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=carnation]{border-top:3px solid #d770ad}.novo-expansion-panel.novo-expanded[theme=lavender]{border-top:3px solid #967adc}.novo-expansion-panel.novo-expanded[theme=mountain]{border-top:3px solid #9678b6}.novo-expansion-panel.novo-expanded[theme=info],.novo-expansion-panel.novo-expanded[theme=positive]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=success]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=danger],.novo-expansion-panel.novo-expanded[theme=error],.novo-expansion-panel.novo-expanded[theme=negative]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=warning]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=empty]{border-top:3px solid #cccdcc}.novo-expansion-panel.novo-expanded[theme=disabled]{border-top:3px solid #bebebe}.novo-expansion-panel.novo-expanded[theme=background]{border-top:3px solid #f7f7f7}.novo-expansion-panel.novo-expanded[theme=backgroundDark]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=presentation]{border-top:3px solid #5b6770}.novo-expansion-panel.novo-expanded[theme=bullhorn]{border-top:3px solid #ff6900}.novo-expansion-panel.novo-expanded[theme=pulse]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=company]{border-top:3px solid #39d}.novo-expansion-panel.novo-expanded[theme=candidate]{border-top:3px solid #4b7}.novo-expansion-panel.novo-expanded[theme=lead]{border-top:3px solid #a69}.novo-expansion-panel.novo-expanded[theme=contact]{border-top:3px solid #fa4}.novo-expansion-panel.novo-expanded[theme=opportunity]{border-top:3px solid #625}.novo-expansion-panel.novo-expanded[theme=job]{border-top:3px solid #b56}.novo-expansion-panel.novo-expanded[theme=submission]{border-top:3px solid #a9adbb}.novo-expansion-panel.novo-expanded[theme=sendout]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=placement]{border-top:3px solid #0b344f}.novo-expansion-panel.novo-expanded[theme=note]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=contract]{border-top:3px solid #454ea0}.novo-expansion-panel.novo-expanded[theme=billableCharge],.novo-expansion-panel.novo-expanded[theme=corporateUser],.novo-expansion-panel.novo-expanded[theme=credential],.novo-expansion-panel.novo-expanded[theme=distributionList],.novo-expansion-panel.novo-expanded[theme=earnCode],.novo-expansion-panel.novo-expanded[theme=invoiceStatement],.novo-expansion-panel.novo-expanded[theme=jobCode],.novo-expansion-panel.novo-expanded[theme=payableCharge],.novo-expansion-panel.novo-expanded[theme=person],.novo-expansion-panel.novo-expanded[theme=user]{border-top:3px solid #696d79}.novo-expansion-panel{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:content-box;display:block;margin:0 16px;transition:margin 225ms ease-in-out}.novo-expansion-panel.novo-expanded{margin:16px 4px}.novo-expansion-panel.novo-expanded:first-child{margin-top:0}.novo-expansion-panel.novo-expanded:last-child{margin-bottom:0}.novo-expansion-panel-content{overflow:hidden}.novo-expansion-panel-content.novo-expanded{overflow:visible}.novo-expansion-panel-padding .novo-expansion-panel-body{padding:0 24px 16px}.novo-accordion .novo-expansion-panel-spacing:first-child{margin-top:0}.novo-accordion .novo-expansion-panel-spacing:last-child{margin-bottom:0}.novo-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.novo-action-row button.novo-button{margin-left:8px}[dir=rtl] .novo-action-row button.novo-button{margin-left:0;margin-right:8px}"]
                 },] }
     ];
     NovoExpansionPanel.ctorParameters = function () { return [
@@ -40906,7 +41686,7 @@
                         '(keydown)': '_keydown($event)',
                         '[@expansionHeight]': "{\n        value: _getExpandedState(),\n        params: {\n          collapsedHeight: collapsedHeight,\n          expandedHeight: expandedHeight\n        }\n    }",
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-expansion-panel-header{align-items:center;display:flex;flex-direction:row;padding:0 24px}.novo-expansion-panel-header:focus,.novo-expansion-panel-header:hover{outline:none}.novo-expansion-panel-header.novo-expanded:focus,.novo-expansion-panel-header.novo-expanded:hover{background:inherit}.novo-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.novo-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.novo-expansion-panel-header-description,.novo-expansion-panel-header-title{align-items:center;display:flex;flex-grow:1;gap:1rem;margin-right:16px}[dir=rtl] .novo-expansion-panel-header-description,[dir=rtl] .novo-expansion-panel-header-title{margin-left:16px;margin-right:0}.novo-expansion-panel-header-description{flex-grow:2}.novo-expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"]
+                    styles: [".novo-expansion-panel-header{align-items:center;display:flex;flex-direction:row;padding:0 24px}.novo-expansion-panel-header:focus,.novo-expansion-panel-header:hover{outline:none}.novo-expansion-panel-header.novo-expanded:focus,.novo-expansion-panel-header.novo-expanded:hover{background:inherit}.novo-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.novo-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.novo-expansion-panel-header-description,.novo-expansion-panel-header-title{align-items:center;display:flex;flex-grow:1;gap:1rem;margin-right:16px}[dir=rtl] .novo-expansion-panel-header-description,[dir=rtl] .novo-expansion-panel-header-title{margin-left:16px;margin-right:0}.novo-expansion-panel-header-description{flex-grow:2}.novo-expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"]
                 },] }
     ];
     NovoExpansionPanelHeader.ctorParameters = function () { return [
@@ -40984,157 +41764,6 @@
                 },] }
     ];
-    // NG2
-    var NovoBoxElement = /** @class */ (function () {
-        function NovoBoxElement() {
-            this.direction = 'row';
-            this.align = 'center';
-            this.justify = 'flex-start';
-            this.wrap = 'nowrap';
-            this.gap = 'nowrap';
-            // get hb_gridCols() {
-            //   return this._sanitizer.bypassSecurityTrustStyle(`repeat(${this.columns}, ${ResourceSettings.eventWidth})`);
-            // }
-        }
-        Object.defineProperty(NovoBoxElement.prototype, "display", {
-            get: function () {
-                return 'block';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return NovoBoxElement;
-    }());
-    NovoBoxElement.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'novo-box',
-                    template: " <ng-content></ng-content> "
-                },] }
-    ];
-    NovoBoxElement.propDecorators = {
-        display: [{ type: i0.HostBinding, args: ['style.display',] }],
-        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
-        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
-        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
-        wrap: [{ type: i0.HostBinding, args: ['style.flex-wrap',] }, { type: i0.Input }],
-        gap: [{ type: i0.HostBinding, args: ['style.gap',] }, { type: i0.Input }]
-    };
-    var NovoFlexElement = /** @class */ (function () {
-        function NovoFlexElement() {
-            this.direction = 'row';
-            this.align = 'center';
-            this.justify = 'flex-start';
-            this.wrap = 'nowrap';
-            // get hb_gridCols() {
-            //   return this._sanitizer.bypassSecurityTrustStyle(`repeat(${this.columns}, ${ResourceSettings.eventWidth})`);
-            // }
-        }
-        Object.defineProperty(NovoFlexElement.prototype, "display", {
-            get: function () {
-                return 'flex';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return NovoFlexElement;
-    }());
-    NovoFlexElement.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'novo-flex,novo-row',
-                    template: " <ng-content></ng-content> "
-                },] }
-    ];
-    NovoFlexElement.propDecorators = {
-        display: [{ type: i0.HostBinding, args: ['style.display',] }],
-        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
-        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
-        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
-        wrap: [{ type: i0.HostBinding, args: ['style.flex-wrap',] }, { type: i0.Input }],
-        gap: [{ type: i0.HostBinding, args: ['style.gap',] }, { type: i0.Input }]
-    };
-    var NovoStackElement = /** @class */ (function (_super) {
-        __extends(NovoStackElement, _super);
-        function NovoStackElement() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.direction = 'column';
-            _this.align = 'start';
-            return _this;
-        }
-        return NovoStackElement;
-    }(NovoFlexElement));
-    NovoStackElement.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'novo-stack,novo-column',
-                    template: " <ng-content></ng-content> "
-                },] }
-    ];
-    NovoStackElement.propDecorators = {
-        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
-        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }]
-    };
-    // NG2
-    var NovoGridElement = /** @class */ (function () {
-        function NovoGridElement(_sanitizer) {
-            this._sanitizer = _sanitizer;
-            this.direction = 'row';
-            this.align = 'start';
-            this.justify = 'flex-start';
-            this.gap = 'nowrap';
-            this.columns = '1';
-        }
-        Object.defineProperty(NovoGridElement.prototype, "display", {
-            get: function () {
-                return 'grid';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NovoGridElement.prototype, "hb_gridCols", {
-            get: function () {
-                if (coercion._isNumberValue(this.columns)) {
-                    return this._sanitizer.bypassSecurityTrustStyle("repeat(" + this.columns + ", 1fr)");
-                }
-                return this._sanitizer.bypassSecurityTrustStyle("" + this.columns);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return NovoGridElement;
-    }());
-    NovoGridElement.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'novo-grid',
-                    template: " <ng-content></ng-content> "
-                },] }
-    ];
-    NovoGridElement.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    NovoGridElement.propDecorators = {
-        display: [{ type: i0.HostBinding, args: ['style.display',] }],
-        direction: [{ type: i0.HostBinding, args: ['style.flex-direction',] }, { type: i0.Input }],
-        align: [{ type: i0.HostBinding, args: ['style.align-items',] }, { type: i0.Input }],
-        justify: [{ type: i0.HostBinding, args: ['style.justify-content',] }, { type: i0.Input }],
-        gap: [{ type: i0.HostBinding, args: ['style.gap',] }, { type: i0.Input }],
-        columns: [{ type: i0.Input }],
-        hb_gridCols: [{ type: i0.HostBinding, args: ['style.grid-template-columns',] }]
-    };
-    var NovoFlexModule = /** @class */ (function () {
-        function NovoFlexModule() {
-        }
-        return NovoFlexModule;
-    }());
-    NovoFlexModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    declarations: [NovoFlexElement, NovoStackElement, NovoGridElement, NovoBoxElement],
-                    exports: [NovoFlexElement, NovoStackElement, NovoGridElement, NovoBoxElement],
-                },] }
-    ];
     var NovoModalParams = /** @class */ (function () {
         function NovoModalParams() {
         }
@@ -41302,211 +41931,6 @@
         { type: i1.Overlay }
     ]; };
-    // NG2
-    var NovoToastElement = /** @class */ (function () {
-        function NovoToastElement(sanitizer) {
-            this.sanitizer = sanitizer;
-            this.theme = 'danger';
-            this.icon = 'caution';
-            this.hasDialogue = false;
-            this.isCloseable = false;
-            this.closed = new i0.EventEmitter();
-            this.show = false;
-            this.animate = false;
-            this.parent = null;
-            this.launched = false;
-            this.onActionPromise = Deferred();
-        }
-        Object.defineProperty(NovoToastElement.prototype, "message", {
-            set: function (m) {
-                this._message = this.sanitizer.bypassSecurityTrustHtml(m);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NovoToastElement.prototype.ngOnInit = function () {
-            if (!this.launched) {
-                // clear position and time
-                this.position = null;
-                this.time = null;
-                // set icon and styling
-                this.iconClass = "bhi-" + this.icon;
-                this.alertTheme = this.theme + " toast-container embedded";
-                if (this.hasDialogue) {
-                    this.alertTheme += ' dialogue';
-                }
-            }
-        };
-        NovoToastElement.prototype.ngOnChanges = function (changes) {
-            // set icon and styling
-            this.iconClass = "bhi-" + this.icon;
-            this.alertTheme = this.theme + " toast-container embedded";
-            if (this.hasDialogue) {
-                this.alertTheme += ' dialogue';
-            }
-        };
-        NovoToastElement.prototype.clickHandler = function (event) {
-            if (!this.isCloseable) {
-                if (event) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                if (this.parent) {
-                    this.parent.hide(this);
-                }
-                else {
-                    this.closed.emit({ closed: true });
-                }
-            }
-        };
-        NovoToastElement.prototype.close = function (event) {
-            if (event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            if (this.parent) {
-                this.parent.hide(this);
-            }
-            else {
-                this.closed.emit({ closed: true });
-            }
-        };
-        NovoToastElement.prototype.actionHandler = function (event) {
-            this.onActionPromise.resolve(event);
-        };
-        NovoToastElement.prototype.onAction = function (fn) {
-            return this.onActionPromise.then(fn);
-        };
-        return NovoToastElement;
-    }());
-    NovoToastElement.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'novo-toast',
-                    host: {
-                        '[class]': 'alertTheme',
-                        '[class.show]': 'show',
-                        '[class.animate]': 'animate',
-                        '[class.embedded]': 'embedded',
-                        '[attr.theme]': 'theme',
-                        '(click)': '!isCloseable && clickHandler($event)',
-                    },
-                    template: "\n    <div class=\"toast-icon\">\n      <i [ngClass]=\"iconClass\"></i>\n    </div>\n    <div class=\"toast-content\">\n      <h5 *ngIf=\"title\">{{ title }}</h5>\n      <p *ngIf=\"_message\" [class.message-only]=\"!title\" [innerHtml]=\"_message\"></p>\n      <div *ngIf=\"link\" class=\"link-generated\">\n        <input type=\"text\" [value]=\"link\" onfocus=\"this.select();\" />\n      </div>\n      <div class=\"dialogue\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"action\" class=\"action\">\n        <button theme=\"dialogue\" color=\"white\" (click)=\"actionHandler($event)\">{{ action }}</button>\n      </div>\n    </div>\n    <div class=\"close-icon\" *ngIf=\"isCloseable\" (click)=\"close($event)\">\n      <i class=\"bhi-times\"></i>\n    </div>\n  "
-                },] }
-    ];
-    NovoToastElement.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    NovoToastElement.propDecorators = {
-        theme: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        action: [{ type: i0.Input }],
-        hasDialogue: [{ type: i0.Input }],
-        link: [{ type: i0.Input }],
-        isCloseable: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
-        closed: [{ type: i0.Output }]
-    };
-    // NG2
-    var NovoToastService = /** @class */ (function () {
-        function NovoToastService(componentUtils) {
-            this.componentUtils = componentUtils;
-            this.references = [];
-            this.icons = { default: 'bell', success: 'check', info: 'info', warning: 'warning', danger: 'remove' };
-            this.defaults = { hideDelay: 3500, position: 'growlTopRight', theme: 'default' };
-        }
-        Object.defineProperty(NovoToastService.prototype, "parentViewContainer", {
-            set: function (view) {
-                this._parentViewContainer = view;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NovoToastService.prototype.alert = function (options, toastElement) {
-            var _this = this;
-            if (toastElement === void 0) { toastElement = NovoToastElement; }
-            return new Promise(function (resolve) {
-                if (!_this._parentViewContainer) {
-                    console.error('No parent view container specified for the ToastService. Set it inside your main application. \nthis.toastService.parentViewContainer = view (ViewContainerRef)');
-                    return;
-                }
-                var toast = _this.componentUtils.append(toastElement, _this._parentViewContainer);
-                _this.references.push(toast);
-                _this.handleAlert(toast.instance, options);
-                resolve(toast.instance);
-            });
-        };
-        NovoToastService.prototype.isVisible = function (toast) {
-            return toast.show;
-        };
-        NovoToastService.prototype.hide = function (toast) {
-            var _this = this;
-            toast.animate = false;
-            setTimeout(function () {
-                toast.show = false;
-                var REF = _this.references.filter(function (x) { return x.instance === toast; })[0];
-                if (REF) {
-                    _this.references.splice(_this.references.indexOf(REF), 1);
-                    REF.destroy();
-                }
-            }, 300);
-        };
-        NovoToastService.prototype.handleAlert = function (toast, options) {
-            var _this = this;
-            this.setToastOnSession(toast, options);
-            setTimeout(function () {
-                _this.show(toast);
-            }, 20);
-            if (!toast.isCloseable) {
-                this.toastTimer(toast);
-            }
-        };
-        NovoToastService.prototype.setToastOnSession = function (toast, opts) {
-            var OPTIONS = typeof opts === 'object' ? opts : {};
-            toast.parent = this;
-            toast.title = OPTIONS.title || '';
-            toast.message = OPTIONS.message || '';
-            toast.action = OPTIONS.action || null;
-            toast.hideDelay = OPTIONS.hideDelay || this.defaults.hideDelay;
-            toast.link = OPTIONS.link || '';
-            toast.isCloseable = OPTIONS.isCloseable || false;
-            var CUSTOM_CLASS = OPTIONS.customClass || '';
-            var ALERT_STYLE = OPTIONS.theme || this.defaults.theme;
-            var ALERT_POSITION = OPTIONS.position || this.defaults.position;
-            var ALERT_ICON = OPTIONS.icon || this.icons.default;
-            toast.iconClass = "bhi-" + ALERT_ICON;
-            toast.launched = true;
-            toast.alertTheme = ALERT_STYLE + " " + ALERT_POSITION + " " + CUSTOM_CLASS + " toast-container launched";
-        };
-        NovoToastService.prototype.show = function (toast) {
-            toast.show = true;
-            setTimeout(addClass, 25);
-            /**
-             * Adds animate class to be called after a timeout
-             **/
-            function addClass() {
-                toast.animate = true;
-            }
-        };
-        NovoToastService.prototype.toastTimer = function (toast) {
-            var _this = this;
-            if (toast.hideDelay < 0) {
-                return;
-            }
-            setTimeout(function () {
-                _this.hide(toast);
-            }, toast.hideDelay);
-        };
-        return NovoToastService;
-    }());
-    NovoToastService.decorators = [
-        { type: i0.Injectable }
-    ];
-    NovoToastService.ctorParameters = function () { return [
-        { type: ComponentUtils }
-    ]; };
     // NG2
     var ControlConfirmModal = /** @class */ (function () {
         function ControlConfirmModal(modalRef, params, labels) {
@@ -43280,7 +43704,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' : null\"\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          (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    <!--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 [
@@ -43292,13 +43716,17 @@
     var NovoFieldsetHeaderElement = /** @class */ (function () {
         function NovoFieldsetHeaderElement() {
+            this.icon = 'section';
         }
         return NovoFieldsetHeaderElement;
     }());
     NovoFieldsetHeaderElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-fieldset-header',
-                    template: " <h6><i [class]=\"icon || 'bhi-section'\"></i>{{ title }}</h6> "
+                    template: "\n    <novo-title smaller>\n      <novo-icon>{{ icon.replace('bhi-', '') }}</novo-icon\n      >{{ title }}\n    </novo-title>\n  ",
+                    host: {
+                        class: 'novo-fieldset-header',
+                    }
                 },] }
     ];
     NovoFieldsetHeaderElement.propDecorators = {
@@ -43619,7 +44047,10 @@
     NovoUtilActionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'util-action, novo-action',
-                    template: "\n    <novo-button theme=\"icon\" [icon]=\"icon\" [attr.inverse]=\"inverse\" [disabled]=\"disabled\">\n      <ng-content></ng-content>\n    </novo-button>\n  "
+                    template: "\n    <novo-button theme=\"icon\" [icon]=\"icon\" [attr.inverse]=\"inverse\" [disabled]=\"disabled\">\n      <ng-content></ng-content>\n    </novo-button>\n  ",
+                    host: {
+                        class: 'novo-action',
+                    }
                 },] }
     ];
     NovoUtilActionComponent.propDecorators = {
@@ -43671,7 +44102,7 @@
     NovoHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-header,header[theme]',
-                    template: "\n    <section>\n      <div class=\"header-title\">\n        <ng-content select=\"[prefix]\"></ng-content>\n        <ng-container *ngIf=\"title\">\n          <novo-icon class=\"header-icon\" *ngIf=\"icon\">{{ icon }}</novo-icon>\n          <div class=\"header-titles\">\n            <novo-title size=\"large\">{{ title }}</novo-title>\n            <novo-title size=\"small\">{{ subTitle }}</novo-title>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!title\">\n          <ng-content select=\"novo-icon, [novo-icon]\"></ng-content>\n          <div class=\"header-titles\">\n            <ng-content select=\"h1, h2, h3, h4, h5, h6, small, novo-title, [novo-title], [novo-subtitle]\"></ng-content>\n          </div>\n        </ng-container>\n      </div>\n      <ng-content select=\"section\"></ng-content>\n      <span class=\"spacer\"></span>\n      <ng-content select=\"utils\"></ng-content>\n      <ng-content select=\"[suffix]\"></ng-content>\n      <div class=\"header-actions\">\n        <ng-content select=\"novo-action,[novo-action]\"></ng-content>\n      </div>\n    </section>\n    <ng-content></ng-content>\n  "
+                    template: "\n    <section>\n      <div class=\"header-title\">\n        <ng-content select=\"[prefix]\"></ng-content>\n        <ng-container *ngIf=\"title\">\n          <novo-icon class=\"header-icon\" *ngIf=\"icon\">{{ icon }}</novo-icon>\n          <div class=\"header-titles\">\n            <novo-title size=\"xl\">{{ title }}</novo-title>\n            <novo-title size=\"md\" *ngIf=\"subTitle\">{{ subTitle }}</novo-title>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!title\">\n          <ng-content select=\"novo-icon, [novo-icon]\"></ng-content>\n          <div class=\"header-titles\">\n            <ng-content select=\"h1, h2, h3, h4, h5, h6, small, novo-title, [novo-title], [novo-subtitle]\"></ng-content>\n          </div>\n        </ng-container>\n      </div>\n      <ng-content select=\"section\"></ng-content>\n      <span class=\"spacer\"></span>\n      <div class=\"header-actions\">\n        <ng-content select=\"novo-action,[novo-action]\"></ng-content>\n      </div>\n      <ng-content select=\"utils\"></ng-content>\n      <ng-content select=\"[suffix]\"></ng-content>\n    </section>\n    <ng-content></ng-content>\n  "
                 },] }
     ];
     NovoHeaderComponent.propDecorators = {
@@ -44489,7 +44920,7 @@
     // NG2
     // make radio-buttons ids unique
-    var nextId$2 = 0;
+    var nextId$3 = 0;
     // Value accessor for the component (supports ngModel)
     var RADIO_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
@@ -44500,7 +44931,7 @@
         function NovoRadioElement(radioGroup, ref) {
             this.radioGroup = radioGroup;
             this.ref = ref;
-            this._uniqueId = "novo-radio-" + ++nextId$2;
+            this._uniqueId = "novo-radio-" + ++nextId$3;
             this.id = this._uniqueId;
             this.name = this._uniqueId;
             this.tabindex = 0;
@@ -44627,7 +45058,7 @@
     };
     // make radio-button-group ids unique
-    var nextId$3 = 0;
+    var nextId$4 = 0;
     // Value accessor for the component (supports ngModel)
     var RADIOGROUP_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
@@ -44649,7 +45080,7 @@
         __extends(NovoRadioGroup, _super);
         function NovoRadioGroup() {
             var _this = _super.apply(this, __spread(arguments)) || this;
-            _this._uniqueId = "ngx-radio-group-" + ++nextId$3;
+            _this._uniqueId = "novo-radio-group-" + ++nextId$4;
             /** Tab index for the chip list. */
             _this._tabIndex = 0;
             /** User defined tab index. */
@@ -45028,6 +45459,8 @@
                         NovoAceEditorModule,
                         NovoCommonModule,
                         NovoCheckboxModule,
+                        NovoIconModule,
+                        NovoRadioModule,
                     ],
                     declarations: [
                         NovoAutoSize,
@@ -45099,8 +45532,6 @@
                     template: '<ng-content></ng-content>',
                     host: {
                         class: 'novo-layout-content',
-                        '[style.margin-left.px]': '_container._contentMargins.left',
-                        '[style.margin-right.px]': '_container._contentMargins.right',
                     },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
@@ -45114,6 +45545,31 @@
         { type: i0.NgZone }
     ]; };
+    var NovoRailComponent = /** @class */ (function (_super) {
+        __extends(NovoRailComponent, _super);
+        function NovoRailComponent(elementRef, scrollDispatcher, ngZone) {
+            return _super.call(this, elementRef, scrollDispatcher, ngZone) || this;
+        }
+        NovoRailComponent.prototype.ngAfterContentInit = function () { };
+        return NovoRailComponent;
+    }(i1.CdkScrollable));
+    NovoRailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-rail',
+                    template: "\n    <div class=\"novo-rail-contents\">\n      <ng-content></ng-content>\n    </div>\n  ",
+                    host: {
+                        class: 'novo-rail',
+                    },
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    NovoRailComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i1.ScrollDispatcher },
+        { type: i0.NgZone }
+    ]; };
     /**
      * Animations used by the Material drawers.
      * @docs-private
@@ -45510,7 +45966,7 @@
                     },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-sidenav-inner-container{-webkit-overflow-scrolling:touch;height:100%;overflow:auto;width:100%}.novo-sidenav-fixed{position:fixed}.novo-sidenav{bottom:0;box-sizing:border-box;display:block;outline:0;overflow-y:auto;position:relative;position:absolute;top:0;transform:translate3d(-100%,0,0);z-index:4;z-index:3}.novo-sidenav[theme=black]{background:#000;color:#fff}.novo-sidenav[theme=white]{background:#fff;color:#000}.novo-sidenav[theme=gray],.novo-sidenav[theme=grey]{background:#9e9e9e;color:#000}.novo-sidenav[theme=bright],.novo-sidenav[theme=offWhite]{background:#f7f7f7;color:#000}.novo-sidenav[theme=light]{background:#dbdbdb;color:#000}.novo-sidenav[theme=neutral]{background:#4f5361;color:#fff}.novo-sidenav[theme=dark]{background:#3d464d;color:#fff}.novo-sidenav[theme=orange]{background:#ff6900;color:#000}.novo-sidenav[theme=navigation]{background:#202b38;color:#fff}.novo-sidenav[theme=skyBlue]{background:#009bdf;color:#fff}.novo-sidenav[theme=steel]{background:#5b6770;color:#fff}.novo-sidenav[theme=metal]{background:#637893;color:#fff}.novo-sidenav[theme=sand]{background:#f4f4f4;color:#000}.novo-sidenav[theme=silver]{background:#e2e2e2;color:#000}.novo-sidenav[theme=stone]{background:#bebebe;color:#000}.novo-sidenav[theme=ash]{background:#a0a0a0;color:#000}.novo-sidenav[theme=slate]{background:#707070;color:#fff}.novo-sidenav[theme=onyx]{background:#526980;color:#fff}.novo-sidenav[theme=charcoal]{background:#282828;color:#fff}.novo-sidenav[theme=moonlight]{background:#1a242f;color:#fff}.novo-sidenav[theme=midnight]{background:#202b38;color:#fff}.novo-sidenav[theme=darkness]{background:#161f27;color:#fff}.novo-sidenav[theme=navy]{background:#0d2d42;color:#fff}.novo-sidenav[theme=aqua]{background:#3bafda;color:#000}.novo-sidenav[theme=ocean]{background:#4a89dc;color:#fff}.novo-sidenav[theme=mint]{background:#37bc9b;color:#000}.novo-sidenav[theme=grass]{background:#8cc152;color:#000}.novo-sidenav[theme=sunflower]{background:#f6b042;color:#000}.novo-sidenav[theme=bittersweet]{background:#eb6845;color:#fff}.novo-sidenav[theme=grapefruit]{background:#da4453;color:#fff}.novo-sidenav[theme=carnation]{background:#d770ad;color:#fff}.novo-sidenav[theme=lavender]{background:#967adc;color:#fff}.novo-sidenav[theme=mountain]{background:#9678b6;color:#fff}.novo-sidenav[theme=positive]{background:#4a89dc;color:#fff}.novo-sidenav[theme=success]{background:#8cc152;color:#000}.novo-sidenav[theme=negative]{background:#da4453;color:#fff}.novo-sidenav[theme=warning]{background:#f6b042;color:#000}.novo-sidenav[theme=empty]{background:#cccdcc;color:#000}.novo-sidenav[theme=disabled]{background:#bebebe;color:#000}.novo-sidenav[theme=background]{background:#f7f7f7;color:#000}.novo-sidenav[theme=backgroundDark]{background:#e2e2e2;color:#000}.novo-sidenav[theme=presentation]{background:#5b6770;color:#fff}.novo-sidenav[theme=bullhorn]{background:#ff6900;color:#000}.novo-sidenav[theme=pulse]{background:#3bafda;color:#000}.novo-sidenav[theme=company]{background:#39d;color:#fff}.novo-sidenav[theme=candidate]{background:#4b7;color:#000}.novo-sidenav[theme=lead]{background:#a69;color:#fff}.novo-sidenav[theme=contact]{background:#fa4;color:#000}.novo-sidenav[theme=opportunity]{background:#625;color:#fff}.novo-sidenav[theme=job]{background:#b56;color:#fff}.novo-sidenav[theme=submission]{background:#a9adbb;color:#000}.novo-sidenav[theme=sendout]{background:#747884;color:#fff}.novo-sidenav[theme=placement]{background:#0b344f;color:#fff}.novo-sidenav[theme=note]{background:#747884;color:#fff}.novo-sidenav[theme=contract]{background:#454ea0;color:#fff}.novo-sidenav[theme=billableCharge],.novo-sidenav[theme=corporateUser],.novo-sidenav[theme=credential],.novo-sidenav[theme=distributionList],.novo-sidenav[theme=earnCode],.novo-sidenav[theme=invoiceStatement],.novo-sidenav[theme=jobCode],.novo-sidenav[theme=payableCharge],.novo-sidenav[theme=person],.novo-sidenav[theme=user]{background:#696d79;color:#fff}.novo-sidenav,[dir=rtl] .novo-sidenav.novo-sidenav-end{border-right:1px solid var(--border)}.novo-sidenav.novo-sidenav-end,[dir=rtl] .novo-sidenav{border-left:1px solid var(--border);border-right:none}.novo-sidenav.novo-sidenav-side{z-index:2}.novo-sidenav.novo-sidenav-end{right:0}.novo-sidenav.novo-sidenav-end,[dir=rtl] .novo-sidenav{transform:translate3d(100%,0,0)}[dir=rtl] .novo-sidenav.novo-sidenav-end{left:0;right:auto;transform:translate3d(-100%,0,0)}"]
+                    styles: [".novo-sidenav-inner-container{-webkit-overflow-scrolling:touch;height:100%;overflow:auto;width:100%}.novo-sidenav-fixed{position:fixed}.novo-sidenav{bottom:0;box-sizing:border-box;display:block;outline:0;overflow-y:auto;position:relative;position:absolute;top:0;transform:translate3d(-100%,0,0);z-index:4;z-index:3}.novo-sidenav[theme=black]{background:#000;color:#fff}.novo-sidenav[theme=white]{background:#fff;color:#000}.novo-sidenav[theme=gray],.novo-sidenav[theme=grey]{background:#9e9e9e;color:#000}.novo-sidenav[theme=bright],.novo-sidenav[theme=offWhite]{background:#f7f7f7;color:#000}.novo-sidenav[theme=light]{background:#dbdbdb;color:#000}.novo-sidenav[theme=neutral]{background:#4f5361;color:#fff}.novo-sidenav[theme=dark]{background:#3d464d;color:#fff}.novo-sidenav[theme=orange]{background:#ff6900;color:#000}.novo-sidenav[theme=navigation]{background:#202b38;color:#fff}.novo-sidenav[theme=skyBlue]{background:#009bdf;color:#fff}.novo-sidenav[theme=steel]{background:#5b6770;color:#fff}.novo-sidenav[theme=metal]{background:#637893;color:#fff}.novo-sidenav[theme=sand]{background:#f4f4f4;color:#000}.novo-sidenav[theme=silver]{background:#e2e2e2;color:#000}.novo-sidenav[theme=stone]{background:#bebebe;color:#000}.novo-sidenav[theme=ash]{background:#a0a0a0;color:#000}.novo-sidenav[theme=slate]{background:#707070;color:#fff}.novo-sidenav[theme=onyx]{background:#526980;color:#fff}.novo-sidenav[theme=charcoal]{background:#282828;color:#fff}.novo-sidenav[theme=moonlight]{background:#1a242f;color:#fff}.novo-sidenav[theme=midnight]{background:#202b38;color:#fff}.novo-sidenav[theme=darkness]{background:#161f27;color:#fff}.novo-sidenav[theme=navy]{background:#0d2d42;color:#fff}.novo-sidenav[theme=aqua]{background:#3bafda;color:#000}.novo-sidenav[theme=ocean]{background:#4a89dc;color:#fff}.novo-sidenav[theme=mint]{background:#37bc9b;color:#000}.novo-sidenav[theme=grass]{background:#8cc152;color:#000}.novo-sidenav[theme=sunflower]{background:#f6b042;color:#000}.novo-sidenav[theme=bittersweet]{background:#eb6845;color:#fff}.novo-sidenav[theme=grapefruit]{background:#da4453;color:#fff}.novo-sidenav[theme=carnation]{background:#d770ad;color:#fff}.novo-sidenav[theme=lavender]{background:#967adc;color:#fff}.novo-sidenav[theme=mountain]{background:#9678b6;color:#fff}.novo-sidenav[theme=info],.novo-sidenav[theme=positive]{background:#4a89dc;color:#fff}.novo-sidenav[theme=success]{background:#8cc152;color:#000}.novo-sidenav[theme=danger],.novo-sidenav[theme=error],.novo-sidenav[theme=negative]{background:#da4453;color:#fff}.novo-sidenav[theme=warning]{background:#f6b042;color:#000}.novo-sidenav[theme=empty]{background:#cccdcc;color:#000}.novo-sidenav[theme=disabled]{background:#bebebe;color:#000}.novo-sidenav[theme=background]{background:#f7f7f7;color:#000}.novo-sidenav[theme=backgroundDark]{background:#e2e2e2;color:#000}.novo-sidenav[theme=presentation]{background:#5b6770;color:#fff}.novo-sidenav[theme=bullhorn]{background:#ff6900;color:#000}.novo-sidenav[theme=pulse]{background:#3bafda;color:#000}.novo-sidenav[theme=company]{background:#39d;color:#fff}.novo-sidenav[theme=candidate]{background:#4b7;color:#000}.novo-sidenav[theme=lead]{background:#a69;color:#fff}.novo-sidenav[theme=contact]{background:#fa4;color:#000}.novo-sidenav[theme=opportunity]{background:#625;color:#fff}.novo-sidenav[theme=job]{background:#b56;color:#fff}.novo-sidenav[theme=submission]{background:#a9adbb;color:#000}.novo-sidenav[theme=sendout]{background:#747884;color:#fff}.novo-sidenav[theme=placement]{background:#0b344f;color:#fff}.novo-sidenav[theme=note]{background:#747884;color:#fff}.novo-sidenav[theme=contract]{background:#454ea0;color:#fff}.novo-sidenav[theme=billableCharge],.novo-sidenav[theme=corporateUser],.novo-sidenav[theme=credential],.novo-sidenav[theme=distributionList],.novo-sidenav[theme=earnCode],.novo-sidenav[theme=invoiceStatement],.novo-sidenav[theme=jobCode],.novo-sidenav[theme=payableCharge],.novo-sidenav[theme=person],.novo-sidenav[theme=user]{background:#696d79;color:#fff}.novo-sidenav,[dir=rtl] .novo-sidenav.novo-sidenav-end{border-right:1px solid var(--border)}.novo-sidenav.novo-sidenav-end,[dir=rtl] .novo-sidenav{border-left:1px solid var(--border);border-right:none}.novo-sidenav.novo-sidenav-side{z-index:2}.novo-sidenav.novo-sidenav-end{right:0}.novo-sidenav.novo-sidenav-end,[dir=rtl] .novo-sidenav{transform:translate3d(100%,0,0)}[dir=rtl] .novo-sidenav.novo-sidenav-end{left:0;right:auto;transform:translate3d(-100%,0,0)}"]
                 },] }
     ];
     NovoSidenavComponent.ctorParameters = function () { return [
@@ -45862,7 +46318,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-layout-container',
                     exportAs: 'novoLayoutContainer',
-                    template: "<div class=\"novo-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\"\n  [class.novo-drawer-shown]=\"_isShowingBackdrop()\"></div>\n\n<ng-content select=\"novo-sidenav\"></ng-content>\n\n<ng-content select=\"novo-layout-content\">\n</ng-content>\n\n<novo-layout-content *ngIf=\"!_content\" cdkScrollable>\n  <ng-content></ng-content>\n</novo-layout-content>",
+                    template: "<div class=\"novo-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\"\n  [class.novo-drawer-shown]=\"_isShowingBackdrop()\"></div>\n\n<ng-content select=\"novo-sidenav\"></ng-content>\n\n<div class=\"novo-layout-content-container\"\n  [class.and-has-rail]=\"_rail\"\n  [style.margin-left.px]=\"_contentMargins.left\"\n  [style.margin-right.px]=\"_contentMargins.right\">\n  <ng-content select=\"novo-rail\"></ng-content>\n\n  <ng-content select=\"novo-layout-content\">\n  </ng-content>\n\n  <novo-layout-content *ngIf=\"!_content\" cdkScrollable>\n    <ng-content></ng-content>\n  </novo-layout-content>\n</div>",
                     host: {
                         class: 'novo-layout-container',
                         '[class.novo-layout-container-explicit-backdrop]': '_backdropOverride',
@@ -45875,7 +46331,7 @@
                             useExisting: NovoLayoutContainer$1,
                         },
                     ],
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-layout-container{-webkit-overflow-scrolling:touch;box-sizing:border-box;display:block;height:100%;overflow:hidden;position:relative;z-index:1}.novo-layout-container[fullscreen].novo-layout-container-has-open{overflow:hidden}.novo-layout-container.novo-layout-container-explicit-backdrop .novo-drawer-side{z-index:3}.ng-animate-disabled .novo-layout-container .novo-drawer-backdrop,.ng-animate-disabled .novo-layout-container .novo-layout-content,.novo-layout-container.ng-animate-disabled .novo-drawer-backdrop,.novo-layout-container.ng-animate-disabled .novo-layout-content{transition:none}.novo-drawer-backdrop{background:#000;bottom:0;display:block;left:0;opacity:.5;position:absolute;right:0;top:0;visibility:hidden;z-index:3}.novo-drawer-backdrop.novo-drawer-shown{visibility:visible}.novo-drawer-transition .novo-drawer-backdrop{transition-duration:.1s;transition-property:background-color,visibility;transition-timing-function:ease-out}.novo-layout-content{display:block;height:100%;overflow:auto;position:relative;z-index:1}.novo-drawer-transition .novo-layout-content{transition-duration:.1s;transition-property:transform,margin-left,margin-right;transition-timing-function:ease-out}"]
+                    styles: [".novo-layout-container{-webkit-overflow-scrolling:touch;box-sizing:border-box;display:block;height:100%;overflow:hidden;position:relative;z-index:1}.novo-layout-container[fullscreen].novo-layout-container-has-open{overflow:hidden}.novo-layout-container.novo-layout-container-explicit-backdrop .novo-drawer-side{z-index:3}.ng-animate-disabled .novo-layout-container .novo-drawer-backdrop,.ng-animate-disabled .novo-layout-container .novo-layout-content,.novo-layout-container.ng-animate-disabled .novo-drawer-backdrop,.novo-layout-container.ng-animate-disabled .novo-layout-content{transition:none}.novo-drawer-backdrop{background:#000;bottom:0;display:block;left:0;opacity:.5;position:absolute;right:0;top:0;visibility:hidden;z-index:3}.novo-drawer-backdrop.novo-drawer-shown{visibility:visible}.novo-drawer-transition .novo-drawer-backdrop{transition-duration:.1s;transition-property:background-color,visibility;transition-timing-function:ease-out}.novo-layout-content{display:block;height:100%;overflow:auto;position:relative;z-index:1}.novo-drawer-transition .novo-layout-content{transition-duration:.1s;transition-property:transform,margin-left,margin-right;transition-timing-function:ease-out}.novo-rail{align-items:flex-start;background:var(--background-bright);display:inline-flex;flex-direction:column;height:inherit;height:100%;justify-content:flex-start;min-width:5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}.novo-rail .novo-rail-contents{display:inline-flex;flex-direction:column;width:-webkit-fill-available}.novo-layout-content-container{display:grid;grid-template-columns:1fr;height:100%}.novo-layout-content-container.and-has-rail{grid-template-columns:auto 1fr}"]
                 },] }
     ];
     NovoLayoutContainer$1.ctorParameters = function () { return [
@@ -45893,6 +46349,7 @@
                         // indirect descendants if it's left as false.
                         descendants: true,
                     },] }],
+        _rail: [{ type: i0.ContentChild, args: [NovoRailComponent,] }],
         _content: [{ type: i0.ContentChild, args: [NovoLayoutContent,] }],
         _userContent: [{ type: i0.ViewChild, args: [NovoLayoutContent,] }],
         autosize: [{ type: i0.Input }],
@@ -45909,8 +46366,8 @@
     NovoLayoutModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule],
-                    declarations: [NovoLayoutContainer$1, NovoLayoutContent, NovoSidenavComponent],
-                    exports: [NovoLayoutContainer$1, NovoLayoutContent, NovoSidenavComponent],
+                    declarations: [NovoLayoutContainer$1, NovoLayoutContent, NovoSidenavComponent, NovoRailComponent],
+                    exports: [NovoLayoutContainer$1, NovoLayoutContent, NovoSidenavComponent, NovoRailComponent],
                 },] }
     ];
@@ -46045,7 +46502,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: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}: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-weight:400;gap:1rem;margin:0;padding:1rem 1rem 1rem 1.25rem}: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}: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 []; };
@@ -48107,7 +48564,7 @@
     // NG2
     // make radio-button-group ids unique
-    var nextId$4 = 0;
+    var nextId$5 = 0;
     // Value accessor for the component (supports ngModel)
     var PROGRESS_BAR_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
@@ -48118,7 +48575,7 @@
         function NovoProgressBarElement(ref, progress) {
             this.ref = ref;
             this.progress = progress;
-            this._uniqueId = "novo-progress-" + ++nextId$4;
+            this._uniqueId = "novo-progress-" + ++nextId$5;
             this.appearance = exports.ProgressAppearance.LINEAR;
             this.id = this._uniqueId;
             this.name = this._uniqueId;
@@ -48222,7 +48679,7 @@
                     selector: 'novo-progress-bar',
                     providers: [PROGRESS_BAR_VALUE_ACCESSOR],
                     template: "\n    <div *ngIf=\"isLinear()\" class=\"progress-bar\"></div>\n    <svg *ngIf=\"isRadial()\" width=\"120\" height=\"120\">\n      <circle\n        [style.strokeDasharray]=\"circumference\"\n        [style.strokeDashoffset]=\"dashoffset\"\n        [attr.r]=\"radius\"\n        cx=\"60\"\n        cy=\"60\"\n        stroke-width=\"4\"\n        fill=\"transparent\"\n        class=\"progress__value\"\n      />\n      <!-- <text x=\"18\" y=\"20.35\" class=\"percentage\">30%</text> -->\n    </svg>\n  ",
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{display:flex;height:100%}:host.linear{background-color:#4a89dc}:host.linear[color=black]{background:#000;color:#fff}:host.linear[color=white]{background:#fff;color:#000}:host.linear[color=gray],:host.linear[color=grey]{background:#9e9e9e;color:#000}:host.linear[color=bright],:host.linear[color=offWhite]{background:#f7f7f7;color:#000}:host.linear[color=light]{background:#dbdbdb;color:#000}:host.linear[color=neutral]{background:#4f5361;color:#fff}:host.linear[color=dark]{background:#3d464d;color:#fff}:host.linear[color=orange]{background:#ff6900;color:#000}:host.linear[color=navigation]{background:#202b38;color:#fff}:host.linear[color=skyBlue]{background:#009bdf;color:#fff}:host.linear[color=steel]{background:#5b6770;color:#fff}:host.linear[color=metal]{background:#637893;color:#fff}:host.linear[color=sand]{background:#f4f4f4;color:#000}:host.linear[color=silver]{background:#e2e2e2;color:#000}:host.linear[color=stone]{background:#bebebe;color:#000}:host.linear[color=ash]{background:#a0a0a0;color:#000}:host.linear[color=slate]{background:#707070;color:#fff}:host.linear[color=onyx]{background:#526980;color:#fff}:host.linear[color=charcoal]{background:#282828;color:#fff}:host.linear[color=moonlight]{background:#1a242f;color:#fff}:host.linear[color=midnight]{background:#202b38;color:#fff}:host.linear[color=darkness]{background:#161f27;color:#fff}:host.linear[color=navy]{background:#0d2d42;color:#fff}:host.linear[color=aqua]{background:#3bafda;color:#000}:host.linear[color=ocean]{background:#4a89dc;color:#fff}:host.linear[color=mint]{background:#37bc9b;color:#000}:host.linear[color=grass]{background:#8cc152;color:#000}:host.linear[color=sunflower]{background:#f6b042;color:#000}:host.linear[color=bittersweet]{background:#eb6845;color:#fff}:host.linear[color=grapefruit]{background:#da4453;color:#fff}:host.linear[color=carnation]{background:#d770ad;color:#fff}:host.linear[color=lavender]{background:#967adc;color:#fff}:host.linear[color=mountain]{background:#9678b6;color:#fff}:host.linear[color=positive]{background:#4a89dc;color:#fff}:host.linear[color=success]{background:#8cc152;color:#000}:host.linear[color=negative]{background:#da4453;color:#fff}:host.linear[color=warning]{background:#f6b042;color:#000}:host.linear[color=empty]{background:#cccdcc;color:#000}:host.linear[color=disabled]{background:#bebebe;color:#000}:host.linear[color=background]{background:#f7f7f7;color:#000}:host.linear[color=backgroundDark]{background:#e2e2e2;color:#000}:host.linear[color=presentation]{background:#5b6770;color:#fff}:host.linear[color=bullhorn]{background:#ff6900;color:#000}:host.linear[color=pulse]{background:#3bafda;color:#000}:host.linear[color=company]{background:#39d;color:#fff}:host.linear[color=candidate]{background:#4b7;color:#000}:host.linear[color=lead]{background:#a69;color:#fff}:host.linear[color=contact]{background:#fa4;color:#000}:host.linear[color=opportunity]{background:#625;color:#fff}:host.linear[color=job]{background:#b56;color:#fff}:host.linear[color=submission]{background:#a9adbb;color:#000}:host.linear[color=sendout]{background:#747884;color:#fff}:host.linear[color=placement]{background:#0b344f;color:#fff}:host.linear[color=note]{background:#747884;color:#fff}:host.linear[color=contract]{background:#454ea0;color:#fff}:host.linear[color=billableCharge],:host.linear[color=corporateUser],:host.linear[color=credential],:host.linear[color=distributionList],:host.linear[color=earnCode],:host.linear[color=invoiceStatement],:host.linear[color=jobCode],:host.linear[color=payableCharge],:host.linear[color=person],:host.linear[color=user]{background:#696d79;color:#fff}:host.linear:first-child{border-radius:.2em 0 0 .2em}:host.linear:last-child{border-radius:0 .2em .2em 0}:host.linear.striped{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:40px 40px}:host.linear.animated{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}:host.radial{position:absolute}:host.radial[color=black] svg circle{stroke:#000}:host.radial[color=white] svg circle{stroke:#fff}:host.radial[color=gray] svg circle,:host.radial[color=grey] svg circle{stroke:#9e9e9e}:host.radial[color=bright] svg circle,:host.radial[color=offWhite] svg circle{stroke:#f7f7f7}:host.radial[color=light] svg circle{stroke:#dbdbdb}:host.radial[color=neutral] svg circle{stroke:#4f5361}:host.radial[color=dark] svg circle{stroke:#3d464d}:host.radial[color=orange] svg circle{stroke:#ff6900}:host.radial[color=navigation] svg circle{stroke:#202b38}:host.radial[color=skyBlue] svg circle{stroke:#009bdf}:host.radial[color=steel] svg circle{stroke:#5b6770}:host.radial[color=metal] svg circle{stroke:#637893}:host.radial[color=sand] svg circle{stroke:#f4f4f4}:host.radial[color=silver] svg circle{stroke:#e2e2e2}:host.radial[color=stone] svg circle{stroke:#bebebe}:host.radial[color=ash] svg circle{stroke:#a0a0a0}:host.radial[color=slate] svg circle{stroke:#707070}:host.radial[color=onyx] svg circle{stroke:#526980}:host.radial[color=charcoal] svg circle{stroke:#282828}:host.radial[color=moonlight] svg circle{stroke:#1a242f}:host.radial[color=midnight] svg circle{stroke:#202b38}:host.radial[color=darkness] svg circle{stroke:#161f27}:host.radial[color=navy] svg circle{stroke:#0d2d42}:host.radial[color=aqua] svg circle{stroke:#3bafda}:host.radial[color=ocean] svg circle{stroke:#4a89dc}:host.radial[color=mint] svg circle{stroke:#37bc9b}:host.radial[color=grass] svg circle{stroke:#8cc152}:host.radial[color=sunflower] svg circle{stroke:#f6b042}:host.radial[color=bittersweet] svg circle{stroke:#eb6845}:host.radial[color=grapefruit] svg circle{stroke:#da4453}:host.radial[color=carnation] svg circle{stroke:#d770ad}:host.radial[color=lavender] svg circle{stroke:#967adc}:host.radial[color=mountain] svg circle{stroke:#9678b6}:host.radial[color=positive] svg circle{stroke:#4a89dc}:host.radial[color=success] svg circle{stroke:#8cc152}:host.radial[color=negative] svg circle{stroke:#da4453}:host.radial[color=warning] svg circle{stroke:#f6b042}:host.radial[color=empty] svg circle{stroke:#cccdcc}:host.radial[color=disabled] svg circle{stroke:#bebebe}:host.radial[color=background] svg circle{stroke:#f7f7f7}:host.radial[color=backgroundDark] svg circle{stroke:#e2e2e2}:host.radial[color=presentation] svg circle{stroke:#5b6770}:host.radial[color=bullhorn] svg circle{stroke:#ff6900}:host.radial[color=pulse] svg circle{stroke:#3bafda}:host.radial[color=company] svg circle{stroke:#39d}:host.radial[color=candidate] svg circle{stroke:#4b7}:host.radial[color=lead] svg circle{stroke:#a69}:host.radial[color=contact] svg circle{stroke:#fa4}:host.radial[color=opportunity] svg circle{stroke:#625}:host.radial[color=job] svg circle{stroke:#b56}:host.radial[color=submission] svg circle{stroke:#a9adbb}:host.radial[color=sendout] svg circle{stroke:#747884}:host.radial[color=placement] svg circle{stroke:#0b344f}:host.radial[color=note] svg circle{stroke:#747884}:host.radial[color=contract] svg circle{stroke:#454ea0}:host.radial[color=billableCharge] svg circle,:host.radial[color=corporateUser] svg circle,:host.radial[color=credential] svg circle,:host.radial[color=distributionList] svg circle,:host.radial[color=earnCode] svg circle,:host.radial[color=invoiceStatement] svg circle,:host.radial[color=jobCode] svg circle,:host.radial[color=payableCharge] svg circle,:host.radial[color=person] svg circle,:host.radial[color=user] svg circle{stroke:#696d79}:host.radial svg circle{stroke:#4a89dc;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .35s}:host.radial svg text{fill:#666;font-family:sans-serif;font-size:.5em;text-anchor:middle}@-webkit-keyframes progress-bar-stripes{0%{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{0%{background-position:0 0}to{background-position:40px 0}}"]
+                    styles: [":host{display:flex;height:100%}:host.linear{background-color:#4a89dc}:host.linear[color=black]{background:#000;color:#fff}:host.linear[color=white]{background:#fff;color:#000}:host.linear[color=gray],:host.linear[color=grey]{background:#9e9e9e;color:#000}:host.linear[color=bright],:host.linear[color=offWhite]{background:#f7f7f7;color:#000}:host.linear[color=light]{background:#dbdbdb;color:#000}:host.linear[color=neutral]{background:#4f5361;color:#fff}:host.linear[color=dark]{background:#3d464d;color:#fff}:host.linear[color=orange]{background:#ff6900;color:#000}:host.linear[color=navigation]{background:#202b38;color:#fff}:host.linear[color=skyBlue]{background:#009bdf;color:#fff}:host.linear[color=steel]{background:#5b6770;color:#fff}:host.linear[color=metal]{background:#637893;color:#fff}:host.linear[color=sand]{background:#f4f4f4;color:#000}:host.linear[color=silver]{background:#e2e2e2;color:#000}:host.linear[color=stone]{background:#bebebe;color:#000}:host.linear[color=ash]{background:#a0a0a0;color:#000}:host.linear[color=slate]{background:#707070;color:#fff}:host.linear[color=onyx]{background:#526980;color:#fff}:host.linear[color=charcoal]{background:#282828;color:#fff}:host.linear[color=moonlight]{background:#1a242f;color:#fff}:host.linear[color=midnight]{background:#202b38;color:#fff}:host.linear[color=darkness]{background:#161f27;color:#fff}:host.linear[color=navy]{background:#0d2d42;color:#fff}:host.linear[color=aqua]{background:#3bafda;color:#000}:host.linear[color=ocean]{background:#4a89dc;color:#fff}:host.linear[color=mint]{background:#37bc9b;color:#000}:host.linear[color=grass]{background:#8cc152;color:#000}:host.linear[color=sunflower]{background:#f6b042;color:#000}:host.linear[color=bittersweet]{background:#eb6845;color:#fff}:host.linear[color=grapefruit]{background:#da4453;color:#fff}:host.linear[color=carnation]{background:#d770ad;color:#fff}:host.linear[color=lavender]{background:#967adc;color:#fff}:host.linear[color=mountain]{background:#9678b6;color:#fff}:host.linear[color=info],:host.linear[color=positive]{background:#4a89dc;color:#fff}:host.linear[color=success]{background:#8cc152;color:#000}:host.linear[color=danger],:host.linear[color=error],:host.linear[color=negative]{background:#da4453;color:#fff}:host.linear[color=warning]{background:#f6b042;color:#000}:host.linear[color=empty]{background:#cccdcc;color:#000}:host.linear[color=disabled]{background:#bebebe;color:#000}:host.linear[color=background]{background:#f7f7f7;color:#000}:host.linear[color=backgroundDark]{background:#e2e2e2;color:#000}:host.linear[color=presentation]{background:#5b6770;color:#fff}:host.linear[color=bullhorn]{background:#ff6900;color:#000}:host.linear[color=pulse]{background:#3bafda;color:#000}:host.linear[color=company]{background:#39d;color:#fff}:host.linear[color=candidate]{background:#4b7;color:#000}:host.linear[color=lead]{background:#a69;color:#fff}:host.linear[color=contact]{background:#fa4;color:#000}:host.linear[color=opportunity]{background:#625;color:#fff}:host.linear[color=job]{background:#b56;color:#fff}:host.linear[color=submission]{background:#a9adbb;color:#000}:host.linear[color=sendout]{background:#747884;color:#fff}:host.linear[color=placement]{background:#0b344f;color:#fff}:host.linear[color=note]{background:#747884;color:#fff}:host.linear[color=contract]{background:#454ea0;color:#fff}:host.linear[color=billableCharge],:host.linear[color=corporateUser],:host.linear[color=credential],:host.linear[color=distributionList],:host.linear[color=earnCode],:host.linear[color=invoiceStatement],:host.linear[color=jobCode],:host.linear[color=payableCharge],:host.linear[color=person],:host.linear[color=user]{background:#696d79;color:#fff}:host.linear:first-child{border-radius:.2em 0 0 .2em}:host.linear:last-child{border-radius:0 .2em .2em 0}:host.linear.striped{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:40px 40px}:host.linear.animated{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}:host.radial{position:absolute}:host.radial[color=black] svg circle{stroke:#000}:host.radial[color=white] svg circle{stroke:#fff}:host.radial[color=gray] svg circle,:host.radial[color=grey] svg circle{stroke:#9e9e9e}:host.radial[color=bright] svg circle,:host.radial[color=offWhite] svg circle{stroke:#f7f7f7}:host.radial[color=light] svg circle{stroke:#dbdbdb}:host.radial[color=neutral] svg circle{stroke:#4f5361}:host.radial[color=dark] svg circle{stroke:#3d464d}:host.radial[color=orange] svg circle{stroke:#ff6900}:host.radial[color=navigation] svg circle{stroke:#202b38}:host.radial[color=skyBlue] svg circle{stroke:#009bdf}:host.radial[color=steel] svg circle{stroke:#5b6770}:host.radial[color=metal] svg circle{stroke:#637893}:host.radial[color=sand] svg circle{stroke:#f4f4f4}:host.radial[color=silver] svg circle{stroke:#e2e2e2}:host.radial[color=stone] svg circle{stroke:#bebebe}:host.radial[color=ash] svg circle{stroke:#a0a0a0}:host.radial[color=slate] svg circle{stroke:#707070}:host.radial[color=onyx] svg circle{stroke:#526980}:host.radial[color=charcoal] svg circle{stroke:#282828}:host.radial[color=moonlight] svg circle{stroke:#1a242f}:host.radial[color=midnight] svg circle{stroke:#202b38}:host.radial[color=darkness] svg circle{stroke:#161f27}:host.radial[color=navy] svg circle{stroke:#0d2d42}:host.radial[color=aqua] svg circle{stroke:#3bafda}:host.radial[color=ocean] svg circle{stroke:#4a89dc}:host.radial[color=mint] svg circle{stroke:#37bc9b}:host.radial[color=grass] svg circle{stroke:#8cc152}:host.radial[color=sunflower] svg circle{stroke:#f6b042}:host.radial[color=bittersweet] svg circle{stroke:#eb6845}:host.radial[color=grapefruit] svg circle{stroke:#da4453}:host.radial[color=carnation] svg circle{stroke:#d770ad}:host.radial[color=lavender] svg circle{stroke:#967adc}:host.radial[color=mountain] svg circle{stroke:#9678b6}:host.radial[color=info] svg circle,:host.radial[color=positive] svg circle{stroke:#4a89dc}:host.radial[color=success] svg circle{stroke:#8cc152}:host.radial[color=danger] svg circle,:host.radial[color=error] svg circle,:host.radial[color=negative] svg circle{stroke:#da4453}:host.radial[color=warning] svg circle{stroke:#f6b042}:host.radial[color=empty] svg circle{stroke:#cccdcc}:host.radial[color=disabled] svg circle{stroke:#bebebe}:host.radial[color=background] svg circle{stroke:#f7f7f7}:host.radial[color=backgroundDark] svg circle{stroke:#e2e2e2}:host.radial[color=presentation] svg circle{stroke:#5b6770}:host.radial[color=bullhorn] svg circle{stroke:#ff6900}:host.radial[color=pulse] svg circle{stroke:#3bafda}:host.radial[color=company] svg circle{stroke:#39d}:host.radial[color=candidate] svg circle{stroke:#4b7}:host.radial[color=lead] svg circle{stroke:#a69}:host.radial[color=contact] svg circle{stroke:#fa4}:host.radial[color=opportunity] svg circle{stroke:#625}:host.radial[color=job] svg circle{stroke:#b56}:host.radial[color=submission] svg circle{stroke:#a9adbb}:host.radial[color=sendout] svg circle{stroke:#747884}:host.radial[color=placement] svg circle{stroke:#0b344f}:host.radial[color=note] svg circle{stroke:#747884}:host.radial[color=contract] svg circle{stroke:#454ea0}:host.radial[color=billableCharge] svg circle,:host.radial[color=corporateUser] svg circle,:host.radial[color=credential] svg circle,:host.radial[color=distributionList] svg circle,:host.radial[color=earnCode] svg circle,:host.radial[color=invoiceStatement] svg circle,:host.radial[color=jobCode] svg circle,:host.radial[color=payableCharge] svg circle,:host.radial[color=person] svg circle,:host.radial[color=user] svg circle{stroke:#696d79}:host.radial svg circle{stroke:#4a89dc;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .35s}:host.radial svg text{fill:#666;font-family:sans-serif;font-size:.5em;text-anchor:middle}@-webkit-keyframes progress-bar-stripes{0%{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{0%{background-position:0 0}to{background-position:40px 0}}"]
                 },] }
     ];
     NovoProgressBarElement.ctorParameters = function () { return [
@@ -48313,7 +48770,7 @@
                             useExisting: NovoProgressElement$1,
                         },
                     ],
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}:host{border-radius:.2em;display:flex;position:relative}:host.striped{background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 50%,rgba(0,0,0,.25) 0,rgba(0,0,0,.25) 75%,transparent 0,transparent);background-size:20px 20px}:host.linear{background-color:#f7f7f7;border:1px solid #cccdcc;height:1.2em;width:200px}:host.radial{height:9.2em;width:9.2em}"]
+                    styles: [":host{border-radius:.2em;display:flex;position:relative}:host.striped{background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 50%,rgba(0,0,0,.25) 0,rgba(0,0,0,.25) 75%,transparent 0,transparent);background-size:20px 20px}:host.linear{background-color:#f7f7f7;border:1px solid #cccdcc;height:1.2em;width:200px}:host.radial{height:9.2em;width:9.2em}"]
                 },] }
     ];
     NovoProgressElement$1.propDecorators = {
@@ -50411,14 +50868,14 @@
     NovoStepHeader.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-step-header',
-                    template: "<div [class.novo-step-icon]=\"touched\"\n  [class.novo-step-icon-not-touched]=\"!touched\">\n  <ng-container *ngIf=\"icon\">\n    <novo-icon size=\"small\" raised=\"true\" [theme]=\"theme\">{{icon}}</novo-icon>\n  </ng-container>\n  <ng-container *ngIf=\"!icon\">\n    <span class=\"novo-step-number\">{{index + 1}}</span>\n  </ng-container>\n</div>\n<div class=\"novo-step-label\"\n  [class.novo-step-label-active]=\"active\"\n  [class.novo-step-label-selected]=\"selected\">\n  <!-- If there is a label template, use it. -->\n  <ng-container *ngIf=\"_templateLabel()\" [ngTemplateOutlet]=\"_templateLabel()!.template\">\n  </ng-container>\n  <!-- It there is no label template, fall back to the text label. -->\n  <div class=\"novo-step-text-label\" *ngIf=\"_stringLabel()\">{{label}}</div>\n</div>\n<novo-step-status [state]=\"state\"></novo-step-status>",
+                    template: "<div [class.novo-step-icon]=\"touched\"\n  [class.novo-step-icon-not-touched]=\"!touched\">\n  <ng-container *ngIf=\"icon\">\n    <novo-icon raised=\"true\" [theme]=\"theme\">{{icon}}</novo-icon>\n  </ng-container>\n  <ng-container *ngIf=\"!icon\">\n    <span class=\"novo-step-number\">{{index + 1}}</span>\n  </ng-container>\n</div>\n<div class=\"novo-step-label\"\n  [class.novo-step-label-active]=\"active\"\n  [class.novo-step-label-selected]=\"selected\">\n  <!-- If there is a label template, use it. -->\n  <ng-container *ngIf=\"_templateLabel()\" [ngTemplateOutlet]=\"_templateLabel()!.template\">\n  </ng-container>\n  <!-- It there is no label template, fall back to the text label. -->\n  <div class=\"novo-step-text-label\" *ngIf=\"_stringLabel()\">{{label}}</div>\n</div>\n<novo-step-status [state]=\"state\"></novo-step-status>",
                     host: {
                         class: 'novo-step-header',
                         role: 'tab',
                     },
                     preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-step-header{cursor:pointer;outline:none;overflow:visible;position:relative}.novo-step-optional{font-size:12px}.novo-step-icon,.novo-step-icon-not-touched{align-items:center;border-radius:50%;display:flex;height:24px;justify-content:center;width:24px}.novo-step-icon-not-touched .novo-step-number,.novo-step-icon .novo-step-number{align-items:center;border-radius:4px;box-shadow:2px 2px 0 rgba(0,0,0,.2);display:flex;font-size:1em;height:1.6em;justify-content:center;min-width:1.6em}.novo-step-icon .novo-step-number{background:#4a89dc;color:#fff}.novo-step-icon-not-touched .novo-step-number{background:#a9adbb;color:#fff}.novo-step-label{display:inline-block;min-width:50px;padding:4px 0;vertical-align:middle;white-space:nowrap}.novo-step-label,.novo-step-text-label{overflow:hidden;text-align:center;text-overflow:ellipsis}"]
+                    styles: [".novo-step-header{cursor:pointer;outline:none;overflow:visible;position:relative}.novo-step-optional{font-size:12px}.novo-step-icon,.novo-step-icon-not-touched{align-items:center;border-radius:50%;display:flex;height:24px;justify-content:center;width:24px}.novo-step-icon-not-touched .novo-step-number,.novo-step-icon .novo-step-number{align-items:center;border-radius:4px;box-shadow:2px 2px 0 rgba(0,0,0,.2);display:flex;font-size:1em;height:1.6em;justify-content:center;min-width:1.6em}.novo-step-icon .novo-step-number{background:#4a89dc;color:#fff}.novo-step-icon-not-touched .novo-step-number{background:#a9adbb;color:#fff}.novo-step-label{display:inline-block;min-width:50px;padding:4px 0;vertical-align:middle;white-space:nowrap}.novo-step-label,.novo-step-text-label{overflow:hidden;text-align:center;text-overflow:ellipsis}"]
                 },] }
     ];
     NovoStepHeader.ctorParameters = function () { return [
@@ -50584,7 +51041,7 @@
                     // encapsulation: ViewEncapsulation.None,
                     preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-stepper-horizontal,.novo-stepper-vertical{display:block}.novo-horizontal-stepper-header-container{align-items:center;background:#f7f7f7;display:flex;justify-content:center;margin-bottom:1em;white-space:nowrap}.novo-stepper-horizontal-line{border-bottom:1px solid #dbdbdb;flex:auto;height:80px;min-width:0}.novo-stepper-horizontal-line.complete{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header{align-items:center;display:flex;flex-flow:column;height:80px;justify-content:center;overflow:visible;padding:0 24px}.novo-horizontal-stepper-header .novo-step-status{align-items:center;bottom:0;display:flex;height:1px;justify-content:center;position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line{position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:before{border-bottom:1px solid #dbdbdb;content:\"\";display:block;margin-right:8px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:after{border-top:1px solid #dbdbdb;content:\"\";display:block;margin-left:calc(50% + 8px);margin-top:-1px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:before,.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.edit:before{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:after{border-top:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon{position:relative}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon:before{background:#fff;border-radius:50%;bottom:1px;content:\"\";display:block;left:1px;position:absolute;right:1px;top:1px;z-index:0}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon>*{position:relative;z-index:1}.novo-vertical-stepper-header{align-items:center;display:flex;max-height:24px;padding:24px}.novo-vertical-stepper-header .novo-step-icon,.novo-vertical-stepper-header .novo-step-icon-not-touched{margin-right:12px}[dir=rtl] .novo-vertical-stepper-header .novo-step-icon,[dir=rtl] .novo-vertical-stepper-header .novo-step-icon-not-touched{margin-left:12px;margin-right:0}.novo-horizontal-stepper-content{overflow:hidden}.novo-horizontal-stepper-content[aria-expanded=false]{height:0}.novo-horizontal-content-container{overflow:hidden;padding:0 24px 24px}.novo-vertical-content-container{border:0;margin-left:36px;position:relative}[dir=rtl] .novo-vertical-content-container{margin-left:0;margin-right:36px}.novo-stepper-vertical-line:before{border-left:1px solid #dbdbdb;bottom:-16px;content:\"\";left:0;position:absolute;top:-16px;z-index:-1}[dir=rtl] .novo-stepper-vertical-line:before{left:auto;right:0}.novo-stepper-vertical-line.done:after,.novo-stepper-vertical-line.done:before,.novo-stepper-vertical-line.edit:before{border-left-color:1px solid #4a89dc}.novo-stepper-vertical novo-step-status{left:35px;position:absolute;top:25px;transform:scale(.8)}.novo-vertical-stepper-content{overflow:hidden}.novo-vertical-content{padding:0 24px 24px}.novo-step:last-child .novo-vertical-content-container{border:none}"]
+                    styles: [".novo-stepper-horizontal,.novo-stepper-vertical{display:block}.novo-horizontal-stepper-header-container{align-items:center;background:#f7f7f7;display:flex;justify-content:center;margin-bottom:1em;white-space:nowrap}.novo-stepper-horizontal-line{border-bottom:1px solid #dbdbdb;flex:auto;height:80px;min-width:0}.novo-stepper-horizontal-line.complete{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header{align-items:center;display:flex;flex-flow:column;height:80px;justify-content:center;overflow:visible;padding:0 24px}.novo-horizontal-stepper-header .novo-step-status{align-items:center;bottom:0;display:flex;height:1px;justify-content:center;position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line{position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:before{border-bottom:1px solid #dbdbdb;content:\"\";display:block;margin-right:8px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:after{border-top:1px solid #dbdbdb;content:\"\";display:block;margin-left:calc(50% + 8px);margin-top:-1px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:before,.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.edit:before{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:after{border-top:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon{position:relative}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon:before{background:#fff;border-radius:50%;bottom:1px;content:\"\";display:block;left:1px;position:absolute;right:1px;top:1px;z-index:0}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon>*{position:relative;z-index:1}.novo-vertical-stepper-header{align-items:center;display:flex;max-height:24px;padding:24px}.novo-vertical-stepper-header .novo-step-icon,.novo-vertical-stepper-header .novo-step-icon-not-touched{margin-right:12px}[dir=rtl] .novo-vertical-stepper-header .novo-step-icon,[dir=rtl] .novo-vertical-stepper-header .novo-step-icon-not-touched{margin-left:12px;margin-right:0}.novo-horizontal-stepper-content{overflow:hidden}.novo-horizontal-stepper-content[aria-expanded=false]{height:0}.novo-horizontal-content-container{overflow:hidden;padding:0 24px 24px}.novo-vertical-content-container{border:0;margin-left:36px;position:relative}[dir=rtl] .novo-vertical-content-container{margin-left:0;margin-right:36px}.novo-stepper-vertical-line:before{border-left:1px solid #dbdbdb;bottom:-16px;content:\"\";left:0;position:absolute;top:-16px;z-index:-1}[dir=rtl] .novo-stepper-vertical-line:before{left:auto;right:0}.novo-stepper-vertical-line.done:after,.novo-stepper-vertical-line.done:before,.novo-stepper-vertical-line.edit:before{border-left-color:1px solid #4a89dc}.novo-stepper-vertical novo-step-status{left:35px;position:absolute;top:25px;transform:scale(.8)}.novo-vertical-stepper-content{overflow:hidden}.novo-vertical-content{padding:0 24px 24px}.novo-step:last-child .novo-vertical-content-container{border:none}"]
                 },] }
     ];
     var NovoVerticalStepper = /** @class */ (function (_super) {
@@ -50613,7 +51070,7 @@
                     ],
                     preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-stepper-horizontal,.novo-stepper-vertical{display:block}.novo-horizontal-stepper-header-container{align-items:center;background:#f7f7f7;display:flex;justify-content:center;margin-bottom:1em;white-space:nowrap}.novo-stepper-horizontal-line{border-bottom:1px solid #dbdbdb;flex:auto;height:80px;min-width:0}.novo-stepper-horizontal-line.complete{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header{align-items:center;display:flex;flex-flow:column;height:80px;justify-content:center;overflow:visible;padding:0 24px}.novo-horizontal-stepper-header .novo-step-status{align-items:center;bottom:0;display:flex;height:1px;justify-content:center;position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line{position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:before{border-bottom:1px solid #dbdbdb;content:\"\";display:block;margin-right:8px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:after{border-top:1px solid #dbdbdb;content:\"\";display:block;margin-left:calc(50% + 8px);margin-top:-1px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:before,.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.edit:before{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:after{border-top:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon{position:relative}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon:before{background:#fff;border-radius:50%;bottom:1px;content:\"\";display:block;left:1px;position:absolute;right:1px;top:1px;z-index:0}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon>*{position:relative;z-index:1}.novo-vertical-stepper-header{align-items:center;display:flex;max-height:24px;padding:24px}.novo-vertical-stepper-header .novo-step-icon,.novo-vertical-stepper-header .novo-step-icon-not-touched{margin-right:12px}[dir=rtl] .novo-vertical-stepper-header .novo-step-icon,[dir=rtl] .novo-vertical-stepper-header .novo-step-icon-not-touched{margin-left:12px;margin-right:0}.novo-horizontal-stepper-content{overflow:hidden}.novo-horizontal-stepper-content[aria-expanded=false]{height:0}.novo-horizontal-content-container{overflow:hidden;padding:0 24px 24px}.novo-vertical-content-container{border:0;margin-left:36px;position:relative}[dir=rtl] .novo-vertical-content-container{margin-left:0;margin-right:36px}.novo-stepper-vertical-line:before{border-left:1px solid #dbdbdb;bottom:-16px;content:\"\";left:0;position:absolute;top:-16px;z-index:-1}[dir=rtl] .novo-stepper-vertical-line:before{left:auto;right:0}.novo-stepper-vertical-line.done:after,.novo-stepper-vertical-line.done:before,.novo-stepper-vertical-line.edit:before{border-left-color:1px solid #4a89dc}.novo-stepper-vertical novo-step-status{left:35px;position:absolute;top:25px;transform:scale(.8)}.novo-vertical-stepper-content{overflow:hidden}.novo-vertical-content{padding:0 24px 24px}.novo-step:last-child .novo-vertical-content-container{border:none}"]
+                    styles: [".novo-stepper-horizontal,.novo-stepper-vertical{display:block}.novo-horizontal-stepper-header-container{align-items:center;background:#f7f7f7;display:flex;justify-content:center;margin-bottom:1em;white-space:nowrap}.novo-stepper-horizontal-line{border-bottom:1px solid #dbdbdb;flex:auto;height:80px;min-width:0}.novo-stepper-horizontal-line.complete{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header{align-items:center;display:flex;flex-flow:column;height:80px;justify-content:center;overflow:visible;padding:0 24px}.novo-horizontal-stepper-header .novo-step-status{align-items:center;bottom:0;display:flex;height:1px;justify-content:center;position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line{position:absolute;width:100%}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:before{border-bottom:1px solid #dbdbdb;content:\"\";display:block;margin-right:8px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line:after{border-top:1px solid #dbdbdb;content:\"\";display:block;margin-left:calc(50% + 8px);margin-top:-1px;width:calc(50% - 8px)}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:before,.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.edit:before{border-bottom:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-line.done:after{border-top:1px solid #4a89dc}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon{position:relative}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon:before{background:#fff;border-radius:50%;bottom:1px;content:\"\";display:block;left:1px;position:absolute;right:1px;top:1px;z-index:0}.novo-horizontal-stepper-header .novo-step-status .novo-stepper-status-icon>*{position:relative;z-index:1}.novo-vertical-stepper-header{align-items:center;display:flex;max-height:24px;padding:24px}.novo-vertical-stepper-header .novo-step-icon,.novo-vertical-stepper-header .novo-step-icon-not-touched{margin-right:12px}[dir=rtl] .novo-vertical-stepper-header .novo-step-icon,[dir=rtl] .novo-vertical-stepper-header .novo-step-icon-not-touched{margin-left:12px;margin-right:0}.novo-horizontal-stepper-content{overflow:hidden}.novo-horizontal-stepper-content[aria-expanded=false]{height:0}.novo-horizontal-content-container{overflow:hidden;padding:0 24px 24px}.novo-vertical-content-container{border:0;margin-left:36px;position:relative}[dir=rtl] .novo-vertical-content-container{margin-left:0;margin-right:36px}.novo-stepper-vertical-line:before{border-left:1px solid #dbdbdb;bottom:-16px;content:\"\";left:0;position:absolute;top:-16px;z-index:-1}[dir=rtl] .novo-stepper-vertical-line:before{left:auto;right:0}.novo-stepper-vertical-line.done:after,.novo-stepper-vertical-line.done:before,.novo-stepper-vertical-line.edit:before{border-left-color:1px solid #4a89dc}.novo-stepper-vertical novo-step-status{left:35px;position:absolute;top:25px;transform:scale(.8)}.novo-vertical-stepper-content{overflow:hidden}.novo-vertical-content{padding:0 24px 24px}.novo-step:last-child .novo-vertical-content-container{border:none}"]
                 },] }
     ];
     NovoVerticalStepper.ctorParameters = function () { return [
@@ -50629,7 +51086,7 @@
     NovoStepStatus.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-step-status',
-                    template: "<div class=\"novo-stepper-status-line\" [ngClass]=\"state\"></div>\n<div [ngSwitch]=\"state\" class=\"novo-stepper-status-icon\">\n  <novo-icon size=\"small\" color=\"positive\" *ngSwitchCase=\"'edit'\">check-circle</novo-icon>\n  <novo-icon size=\"small\" color=\"positive\" *ngSwitchCase=\"'done'\">check-circle-filled</novo-icon>\n  <novo-icon size=\"small\" color=\"positive\" *ngSwitchDefault>circle-o</novo-icon>\n</div>\n",
+                    template: "<div class=\"novo-stepper-status-line\" [ngClass]=\"state\"></div>\n<div [ngSwitch]=\"state\" class=\"novo-stepper-status-icon\">\n  <novo-icon color=\"positive\" *ngSwitchCase=\"'edit'\">check-circle</novo-icon>\n  <novo-icon color=\"positive\" *ngSwitchCase=\"'done'\">check-circle-filled</novo-icon>\n  <novo-icon color=\"positive\" *ngSwitchDefault>circle-o</novo-icon>\n</div>",
                     // encapsulation: ViewEncapsulation.None,
                     preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -51676,10 +52133,11 @@
         NovoTableMode[NovoTableMode["EDIT"] = 2] = "EDIT";
     })(exports.NovoTableMode || (exports.NovoTableMode = {}));
     var NovoTableElement = /** @class */ (function () {
-        function NovoTableElement(labels, formUtils, builder) {
+        function NovoTableElement(labels, formUtils, builder, cdr) {
             this.labels = labels;
             this.formUtils = formUtils;
             this.builder = builder;
+            this.cdr = cdr;
             this.config = {};
             this.columns = [];
             this.skipSortAndFilterClear = false;
@@ -52176,6 +52634,7 @@
                 this.selectedPageCount++;
                 this.showSelectAllMessage = this.selectedPageCount === 1 && this.selected.length !== this.dataProvider.total;
             }
+            this.cdr.detectChanges();
         };
         NovoTableElement.prototype.selectAll = function (value) {
             var e_5, _a;
@@ -52483,6 +52942,7 @@
         { type: i0.Component, args: [{
                     selector: 'novo-table',
                     host: {
+                        class: 'novo-table',
                         '[attr.theme]': 'theme',
                         '[class.editing]': 'mode === NovoTableMode.EDIT',
                         '[class.novo-table-loading]': 'loading',
@@ -52494,7 +52954,8 @@
     NovoTableElement.ctorParameters = function () { return [
         { type: NovoLabelService },
         { type: FormUtils },
-        { type: forms.FormBuilder }
+        { type: forms.FormBuilder },
+        { type: i0.ChangeDetectorRef }
     ]; };
     NovoTableElement.propDecorators = {
         filterInputs: [{ type: i0.ViewChildren, args: ['filterInput', { read: i0.ElementRef },] }],
@@ -52556,6 +53017,74 @@
                 },] }
     ];
+    // Boilerplate for applying mixins to NovoToolbar.
+    /** @docs-private */
+    var _NovoToolbarBase = mixinColor(/** @class */ (function () {
+        function class_1(_elementRef) {
+            this._elementRef = _elementRef;
+        }
+        return class_1;
+    }()));
+    var NovoToolbarRow = /** @class */ (function (_super) {
+        __extends(NovoToolbarRow, _super);
+        function NovoToolbarRow(elementRef) {
+            return _super.call(this, elementRef) || this;
+        }
+        return NovoToolbarRow;
+    }(_NovoToolbarBase));
+    NovoToolbarRow.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: 'novo-toolbar-row',
+                    host: { class: 'novo-toolbar-row' },
+                    inputs: ['color', 'gap'],
+                },] }
+    ];
+    NovoToolbarRow.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    var NovoToolbar = /** @class */ (function (_super) {
+        __extends(NovoToolbar, _super);
+        function NovoToolbar(elementRef) {
+            return _super.call(this, elementRef) || this;
+        }
+        return NovoToolbar;
+    }(_NovoToolbarBase));
+    NovoToolbar.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'novo-toolbar',
+                    template: "<ng-content></ng-content>\n<ng-content select=\"novo-toolbar-row\"></ng-content>",
+                    inputs: ['color', 'gap'],
+                    host: {
+                        class: 'novo-toolbar',
+                        '[class.novo-toolbar-multiple-rows]': '_toolbarRows.length > 0',
+                        '[class.novo-toolbar-single-row]': '_toolbarRows.length === 0',
+                    },
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    styles: [".novo-toolbar .novo-toolbar-row,.novo-toolbar.novo-toolbar-single-row{align-items:center;background-color:var(--background-bright);box-sizing:border-box;color:var(--text-main);display:flex;flex-direction:row;min-height:5rem;padding:0 1rem;white-space:nowrap;width:100%}.novo-toolbar .novo-toolbar-row .novo-divider.novo-divider-vertical,.novo-toolbar .novo-toolbar-row novo-nav,.novo-toolbar .novo-toolbar-row novo-tab,.novo-toolbar.novo-toolbar-single-row .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row novo-nav,.novo-toolbar.novo-toolbar-single-row novo-tab{height:inherit;min-height:inherit}.novo-toolbar .novo-toolbar-row.novo-color-black,.novo-toolbar.novo-toolbar-single-row.novo-color-black{background:#000;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-black>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-black>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-black>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-black>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-black>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-black>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-black>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-black .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-black .novo-divider.novo-divider-vertical{border-right-color:#333}.novo-toolbar .novo-toolbar-row.novo-accent-black,.novo-toolbar.novo-toolbar-single-row.novo-accent-black{border-bottom:2px solid #000}.novo-toolbar .novo-toolbar-row.novo-color-white,.novo-toolbar.novo-toolbar-single-row.novo-color-white{background:#fff;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-white>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-white>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-white>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-white>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-white>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-white>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-white>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-white .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-white .novo-divider.novo-divider-vertical{border-right-color:#fff}.novo-toolbar .novo-toolbar-row.novo-accent-white,.novo-toolbar.novo-toolbar-single-row.novo-accent-white{border-bottom:2px solid #fff}.novo-toolbar .novo-toolbar-row.novo-color-gray,.novo-toolbar.novo-toolbar-single-row.novo-color-gray{background:#9e9e9e;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-gray>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-gray>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-gray .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-gray .novo-divider.novo-divider-vertical{border-right-color:#b1b1b1}.novo-toolbar .novo-toolbar-row.novo-accent-gray,.novo-toolbar.novo-toolbar-single-row.novo-accent-gray{border-bottom:2px solid #9e9e9e}.novo-toolbar .novo-toolbar-row.novo-color-grey,.novo-toolbar.novo-toolbar-single-row.novo-color-grey{background:#9e9e9e;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-grey>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-grey>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-grey .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-grey .novo-divider.novo-divider-vertical{border-right-color:#b1b1b1}.novo-toolbar .novo-toolbar-row.novo-accent-grey,.novo-toolbar.novo-toolbar-single-row.novo-accent-grey{border-bottom:2px solid #9e9e9e}.novo-toolbar .novo-toolbar-row.novo-color-offWhite,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite{background:#f7f7f7;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-offWhite>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-offWhite .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-offWhite .novo-divider.novo-divider-vertical{border-right-color:#f8f8f8}.novo-toolbar .novo-toolbar-row.novo-accent-offWhite,.novo-toolbar.novo-toolbar-single-row.novo-accent-offWhite{border-bottom:2px solid #f7f7f7}.novo-toolbar .novo-toolbar-row.novo-color-bright,.novo-toolbar.novo-toolbar-single-row.novo-color-bright{background:#f7f7f7;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-bright>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-bright>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-bright .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-bright .novo-divider.novo-divider-vertical{border-right-color:#f8f8f8}.novo-toolbar .novo-toolbar-row.novo-accent-bright,.novo-toolbar.novo-toolbar-single-row.novo-accent-bright{border-bottom:2px solid #f7f7f7}.novo-toolbar .novo-toolbar-row.novo-color-light,.novo-toolbar.novo-toolbar-single-row.novo-color-light{background:#dbdbdb;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-light>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-light>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-light>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-light>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-light>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-light>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-light>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-light .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-light .novo-divider.novo-divider-vertical{border-right-color:#e2e2e2}.novo-toolbar .novo-toolbar-row.novo-accent-light,.novo-toolbar.novo-toolbar-single-row.novo-accent-light{border-bottom:2px solid #dbdbdb}.novo-toolbar .novo-toolbar-row.novo-color-neutral,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral{background:#4f5361;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-neutral>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-neutral .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-neutral .novo-divider.novo-divider-vertical{border-right-color:#727580}.novo-toolbar .novo-toolbar-row.novo-accent-neutral,.novo-toolbar.novo-toolbar-single-row.novo-accent-neutral{border-bottom:2px solid #4f5361}.novo-toolbar .novo-toolbar-row.novo-color-dark,.novo-toolbar.novo-toolbar-single-row.novo-color-dark{background:#3d464d;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-dark>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-dark>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-dark .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-dark .novo-divider.novo-divider-vertical{border-right-color:#636b70}.novo-toolbar .novo-toolbar-row.novo-accent-dark,.novo-toolbar.novo-toolbar-single-row.novo-accent-dark{border-bottom:2px solid #3d464d}.novo-toolbar .novo-toolbar-row.novo-color-orange,.novo-toolbar.novo-toolbar-single-row.novo-color-orange{background:#ff6900;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-orange>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-orange>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-orange .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-orange .novo-divider.novo-divider-vertical{border-right-color:#ff8733}.novo-toolbar .novo-toolbar-row.novo-accent-orange,.novo-toolbar.novo-toolbar-single-row.novo-accent-orange{border-bottom:2px solid #ff6900}.novo-toolbar .novo-toolbar-row.novo-color-navigation,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation{background:#202b38;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-navigation>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-navigation .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-navigation .novo-divider.novo-divider-vertical{border-right-color:#4c555f}.novo-toolbar .novo-toolbar-row.novo-accent-navigation,.novo-toolbar.novo-toolbar-single-row.novo-accent-navigation{border-bottom:2px solid #202b38}.novo-toolbar .novo-toolbar-row.novo-color-skyBlue,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue{background:#009bdf;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-skyBlue>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-skyBlue .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-skyBlue .novo-divider.novo-divider-vertical{border-right-color:#33afe5}.novo-toolbar .novo-toolbar-row.novo-accent-skyBlue,.novo-toolbar.novo-toolbar-single-row.novo-accent-skyBlue{border-bottom:2px solid #009bdf}.novo-toolbar .novo-toolbar-row.novo-color-steel,.novo-toolbar.novo-toolbar-single-row.novo-color-steel{background:#5b6770;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-steel>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-steel>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-steel .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-steel .novo-divider.novo-divider-vertical{border-right-color:#7b858c}.novo-toolbar .novo-toolbar-row.novo-accent-steel,.novo-toolbar.novo-toolbar-single-row.novo-accent-steel{border-bottom:2px solid #5b6770}.novo-toolbar .novo-toolbar-row.novo-color-metal,.novo-toolbar.novo-toolbar-single-row.novo-color-metal{background:#637893;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-metal>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-metal>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-metal .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-metal .novo-divider.novo-divider-vertical{border-right-color:#8293a8}.novo-toolbar .novo-toolbar-row.novo-accent-metal,.novo-toolbar.novo-toolbar-single-row.novo-accent-metal{border-bottom:2px solid #637893}.novo-toolbar .novo-toolbar-row.novo-color-sand,.novo-toolbar.novo-toolbar-single-row.novo-color-sand{background:#f4f4f4;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-sand>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-sand>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-sand .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-sand .novo-divider.novo-divider-vertical{border-right-color:#f6f6f6}.novo-toolbar .novo-toolbar-row.novo-accent-sand,.novo-toolbar.novo-toolbar-single-row.novo-accent-sand{border-bottom:2px solid #f4f4f4}.novo-toolbar .novo-toolbar-row.novo-color-silver,.novo-toolbar.novo-toolbar-single-row.novo-color-silver{background:#e2e2e2;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-silver>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-silver>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-silver .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-silver .novo-divider.novo-divider-vertical{border-right-color:#e7e7e7}.novo-toolbar .novo-toolbar-row.novo-accent-silver,.novo-toolbar.novo-toolbar-single-row.novo-accent-silver{border-bottom:2px solid #e2e2e2}.novo-toolbar .novo-toolbar-row.novo-color-stone,.novo-toolbar.novo-toolbar-single-row.novo-color-stone{background:#bebebe;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-stone>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-stone>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-stone .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-stone .novo-divider.novo-divider-vertical{border-right-color:#cbcbcb}.novo-toolbar .novo-toolbar-row.novo-accent-stone,.novo-toolbar.novo-toolbar-single-row.novo-accent-stone{border-bottom:2px solid #bebebe}.novo-toolbar .novo-toolbar-row.novo-color-ash,.novo-toolbar.novo-toolbar-single-row.novo-color-ash{background:#a0a0a0;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-ash>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-ash>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-ash .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-ash .novo-divider.novo-divider-vertical{border-right-color:#b3b3b3}.novo-toolbar .novo-toolbar-row.novo-accent-ash,.novo-toolbar.novo-toolbar-single-row.novo-accent-ash{border-bottom:2px solid #a0a0a0}.novo-toolbar .novo-toolbar-row.novo-color-slate,.novo-toolbar.novo-toolbar-single-row.novo-color-slate{background:#707070;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-slate>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-slate>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-slate .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-slate .novo-divider.novo-divider-vertical{border-right-color:#8c8c8c}.novo-toolbar .novo-toolbar-row.novo-accent-slate,.novo-toolbar.novo-toolbar-single-row.novo-accent-slate{border-bottom:2px solid #707070}.novo-toolbar .novo-toolbar-row.novo-color-onyx,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx{background:#526980;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-onyx>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-onyx .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-onyx .novo-divider.novo-divider-vertical{border-right-color:#748799}.novo-toolbar .novo-toolbar-row.novo-accent-onyx,.novo-toolbar.novo-toolbar-single-row.novo-accent-onyx{border-bottom:2px solid #526980}.novo-toolbar .novo-toolbar-row.novo-color-charcoal,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal{background:#282828;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-charcoal>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-charcoal .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-charcoal .novo-divider.novo-divider-vertical{border-right-color:#535353}.novo-toolbar .novo-toolbar-row.novo-accent-charcoal,.novo-toolbar.novo-toolbar-single-row.novo-accent-charcoal{border-bottom:2px solid #282828}.novo-toolbar .novo-toolbar-row.novo-color-moonlight,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight{background:#1a242f;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-moonlight>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-moonlight .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-moonlight .novo-divider.novo-divider-vertical{border-right-color:#474f58}.novo-toolbar .novo-toolbar-row.novo-accent-moonlight,.novo-toolbar.novo-toolbar-single-row.novo-accent-moonlight{border-bottom:2px solid #1a242f}.novo-toolbar .novo-toolbar-row.novo-color-midnight,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight{background:#202b38;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-midnight>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-midnight .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-midnight .novo-divider.novo-divider-vertical{border-right-color:#4c555f}.novo-toolbar .novo-toolbar-row.novo-accent-midnight,.novo-toolbar.novo-toolbar-single-row.novo-accent-midnight{border-bottom:2px solid #202b38}.novo-toolbar .novo-toolbar-row.novo-color-darkness,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness{background:#161f27;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-darkness>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-darkness .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-darkness .novo-divider.novo-divider-vertical{border-right-color:#444b52}.novo-toolbar .novo-toolbar-row.novo-accent-darkness,.novo-toolbar.novo-toolbar-single-row.novo-accent-darkness{border-bottom:2px solid #161f27}.novo-toolbar .novo-toolbar-row.novo-color-navy,.novo-toolbar.novo-toolbar-single-row.novo-color-navy{background:#0d2d42;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-navy>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-navy>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-navy .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-navy .novo-divider.novo-divider-vertical{border-right-color:#3d5767}.novo-toolbar .novo-toolbar-row.novo-accent-navy,.novo-toolbar.novo-toolbar-single-row.novo-accent-navy{border-bottom:2px solid #0d2d42}.novo-toolbar .novo-toolbar-row.novo-color-aqua,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua{background:#3bafda;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-aqua>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-aqua .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-aqua .novo-divider.novo-divider-vertical{border-right-color:#62bfe1}.novo-toolbar .novo-toolbar-row.novo-accent-aqua,.novo-toolbar.novo-toolbar-single-row.novo-accent-aqua{border-bottom:2px solid #3bafda}.novo-toolbar .novo-toolbar-row.novo-color-ocean,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean{background:#4a89dc;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-ocean>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-ocean .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-ocean .novo-divider.novo-divider-vertical{border-right-color:#6ea0e3}.novo-toolbar .novo-toolbar-row.novo-accent-ocean,.novo-toolbar.novo-toolbar-single-row.novo-accent-ocean{border-bottom:2px solid #4a89dc}.novo-toolbar .novo-toolbar-row.novo-color-mint,.novo-toolbar.novo-toolbar-single-row.novo-color-mint{background:#37bc9b;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-mint>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-mint>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-mint .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-mint .novo-divider.novo-divider-vertical{border-right-color:#5fc9af}.novo-toolbar .novo-toolbar-row.novo-accent-mint,.novo-toolbar.novo-toolbar-single-row.novo-accent-mint{border-bottom:2px solid #37bc9b}.novo-toolbar .novo-toolbar-row.novo-color-grass,.novo-toolbar.novo-toolbar-single-row.novo-color-grass{background:#8cc152;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-grass>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-grass>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-grass .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-grass .novo-divider.novo-divider-vertical{border-right-color:#a3cd74}.novo-toolbar .novo-toolbar-row.novo-accent-grass,.novo-toolbar.novo-toolbar-single-row.novo-accent-grass{border-bottom:2px solid #8cc152}.novo-toolbar .novo-toolbar-row.novo-color-sunflower,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower{background:#f6b042;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-sunflower>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-sunflower .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-sunflower .novo-divider.novo-divider-vertical{border-right-color:#f7bf67}.novo-toolbar .novo-toolbar-row.novo-accent-sunflower,.novo-toolbar.novo-toolbar-single-row.novo-accent-sunflower{border-bottom:2px solid #f6b042}.novo-toolbar .novo-toolbar-row.novo-color-bittersweet,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet{background:#eb6845;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-bittersweet>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-bittersweet .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-bittersweet .novo-divider.novo-divider-vertical{border-right-color:#ef866a}.novo-toolbar .novo-toolbar-row.novo-accent-bittersweet,.novo-toolbar.novo-toolbar-single-row.novo-accent-bittersweet{border-bottom:2px solid #eb6845}.novo-toolbar .novo-toolbar-row.novo-color-grapefruit,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit{background:#da4453;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-grapefruit>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-grapefruit .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-grapefruit .novo-divider.novo-divider-vertical{border-right-color:#e16975}.novo-toolbar .novo-toolbar-row.novo-accent-grapefruit,.novo-toolbar.novo-toolbar-single-row.novo-accent-grapefruit{border-bottom:2px solid #da4453}.novo-toolbar .novo-toolbar-row.novo-color-carnation,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation{background:#d770ad;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-carnation>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-carnation .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-carnation .novo-divider.novo-divider-vertical{border-right-color:#df8cbd}.novo-toolbar .novo-toolbar-row.novo-accent-carnation,.novo-toolbar.novo-toolbar-single-row.novo-accent-carnation{border-bottom:2px solid #d770ad}.novo-toolbar .novo-toolbar-row.novo-color-lavender,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender{background:#967adc;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-lavender>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-lavender .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-lavender .novo-divider.novo-divider-vertical{border-right-color:#ab94e3}.novo-toolbar .novo-toolbar-row.novo-accent-lavender,.novo-toolbar.novo-toolbar-single-row.novo-accent-lavender{border-bottom:2px solid #967adc}.novo-toolbar .novo-toolbar-row.novo-color-mountain,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain{background:#9678b6;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-mountain>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-mountain .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-mountain .novo-divider.novo-divider-vertical{border-right-color:#ab93c4}.novo-toolbar .novo-toolbar-row.novo-accent-mountain,.novo-toolbar.novo-toolbar-single-row.novo-accent-mountain{border-bottom:2px solid #9678b6}.novo-toolbar .novo-toolbar-row.novo-color-info,.novo-toolbar.novo-toolbar-single-row.novo-color-info{background:#4a89dc;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-info>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-info>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-info>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-info>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-info>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-info>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-info>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-info .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-info .novo-divider.novo-divider-vertical{border-right-color:#6ea0e3}.novo-toolbar .novo-toolbar-row.novo-accent-info,.novo-toolbar.novo-toolbar-single-row.novo-accent-info{border-bottom:2px solid #4a89dc}.novo-toolbar .novo-toolbar-row.novo-color-positive,.novo-toolbar.novo-toolbar-single-row.novo-color-positive{background:#4a89dc;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-positive>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-positive>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-positive .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-positive .novo-divider.novo-divider-vertical{border-right-color:#6ea0e3}.novo-toolbar .novo-toolbar-row.novo-accent-positive,.novo-toolbar.novo-toolbar-single-row.novo-accent-positive{border-bottom:2px solid #4a89dc}.novo-toolbar .novo-toolbar-row.novo-color-success,.novo-toolbar.novo-toolbar-single-row.novo-color-success{background:#8cc152;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-success>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-success>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-success>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-success>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-success>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-success>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-success>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-success .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-success .novo-divider.novo-divider-vertical{border-right-color:#a3cd74}.novo-toolbar .novo-toolbar-row.novo-accent-success,.novo-toolbar.novo-toolbar-single-row.novo-accent-success{border-bottom:2px solid #8cc152}.novo-toolbar .novo-toolbar-row.novo-color-negative,.novo-toolbar.novo-toolbar-single-row.novo-color-negative{background:#da4453;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-negative>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-negative>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-negative .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-negative .novo-divider.novo-divider-vertical{border-right-color:#e16975}.novo-toolbar .novo-toolbar-row.novo-accent-negative,.novo-toolbar.novo-toolbar-single-row.novo-accent-negative{border-bottom:2px solid #da4453}.novo-toolbar .novo-toolbar-row.novo-color-danger,.novo-toolbar.novo-toolbar-single-row.novo-color-danger{background:#da4453;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-danger>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-danger>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-danger .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-danger .novo-divider.novo-divider-vertical{border-right-color:#e16975}.novo-toolbar .novo-toolbar-row.novo-accent-danger,.novo-toolbar.novo-toolbar-single-row.novo-accent-danger{border-bottom:2px solid #da4453}.novo-toolbar .novo-toolbar-row.novo-color-error,.novo-toolbar.novo-toolbar-single-row.novo-color-error{background:#da4453;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-error>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-error>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-error>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-error>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-error>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-error>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-error>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-error .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-error .novo-divider.novo-divider-vertical{border-right-color:#e16975}.novo-toolbar .novo-toolbar-row.novo-accent-error,.novo-toolbar.novo-toolbar-single-row.novo-accent-error{border-bottom:2px solid #da4453}.novo-toolbar .novo-toolbar-row.novo-color-warning,.novo-toolbar.novo-toolbar-single-row.novo-color-warning{background:#f6b042;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-warning>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-warning>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-warning .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-warning .novo-divider.novo-divider-vertical{border-right-color:#f7bf67}.novo-toolbar .novo-toolbar-row.novo-accent-warning,.novo-toolbar.novo-toolbar-single-row.novo-accent-warning{border-bottom:2px solid #f6b042}.novo-toolbar .novo-toolbar-row.novo-color-empty,.novo-toolbar.novo-toolbar-single-row.novo-color-empty{background:#cccdcc;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-empty>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-empty>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-empty .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-empty .novo-divider.novo-divider-vertical{border-right-color:#d6d7d6}.novo-toolbar .novo-toolbar-row.novo-accent-empty,.novo-toolbar.novo-toolbar-single-row.novo-accent-empty{border-bottom:2px solid #cccdcc}.novo-toolbar .novo-toolbar-row.novo-color-disabled,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled{background:#bebebe;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-disabled>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-disabled .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-disabled .novo-divider.novo-divider-vertical{border-right-color:#cbcbcb}.novo-toolbar .novo-toolbar-row.novo-accent-disabled,.novo-toolbar.novo-toolbar-single-row.novo-accent-disabled{border-bottom:2px solid #bebebe}.novo-toolbar .novo-toolbar-row.novo-color-background,.novo-toolbar.novo-toolbar-single-row.novo-color-background{background:#f7f7f7;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-background>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-background>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-background>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-background>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-background>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-background>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-background>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-background .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-background .novo-divider.novo-divider-vertical{border-right-color:#f8f8f8}.novo-toolbar .novo-toolbar-row.novo-accent-background,.novo-toolbar.novo-toolbar-single-row.novo-accent-background{border-bottom:2px solid #f7f7f7}.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark{background:#e2e2e2;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-backgroundDark .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-backgroundDark .novo-divider.novo-divider-vertical{border-right-color:#e7e7e7}.novo-toolbar .novo-toolbar-row.novo-accent-backgroundDark,.novo-toolbar.novo-toolbar-single-row.novo-accent-backgroundDark{border-bottom:2px solid #e2e2e2}.novo-toolbar .novo-toolbar-row.novo-color-presentation,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation{background:#5b6770;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-presentation>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-presentation .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-presentation .novo-divider.novo-divider-vertical{border-right-color:#7b858c}.novo-toolbar .novo-toolbar-row.novo-accent-presentation,.novo-toolbar.novo-toolbar-single-row.novo-accent-presentation{border-bottom:2px solid #5b6770}.novo-toolbar .novo-toolbar-row.novo-color-bullhorn,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn{background:#ff6900;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-bullhorn>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-bullhorn .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-bullhorn .novo-divider.novo-divider-vertical{border-right-color:#ff8733}.novo-toolbar .novo-toolbar-row.novo-accent-bullhorn,.novo-toolbar.novo-toolbar-single-row.novo-accent-bullhorn{border-bottom:2px solid #ff6900}.novo-toolbar .novo-toolbar-row.novo-color-pulse,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse{background:#3bafda;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-pulse>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-pulse .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-pulse .novo-divider.novo-divider-vertical{border-right-color:#62bfe1}.novo-toolbar .novo-toolbar-row.novo-accent-pulse,.novo-toolbar.novo-toolbar-single-row.novo-accent-pulse{border-bottom:2px solid #3bafda}.novo-toolbar .novo-toolbar-row.novo-color-company,.novo-toolbar.novo-toolbar-single-row.novo-color-company{background:#39d;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-company>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-company>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-company>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-company>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-company>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-company>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-company>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-company .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-company .novo-divider.novo-divider-vertical{border-right-color:#5bade3}.novo-toolbar .novo-toolbar-row.novo-accent-company,.novo-toolbar.novo-toolbar-single-row.novo-accent-company{border-bottom:2px solid #39d}.novo-toolbar .novo-toolbar-row.novo-color-candidate,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate{background:#4b7;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-candidate>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-candidate .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-candidate .novo-divider.novo-divider-vertical{border-right-color:#69c892}.novo-toolbar .novo-toolbar-row.novo-accent-candidate,.novo-toolbar.novo-toolbar-single-row.novo-accent-candidate{border-bottom:2px solid #4b7}.novo-toolbar .novo-toolbar-row.novo-color-lead,.novo-toolbar.novo-toolbar-single-row.novo-color-lead{background:#a69;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-lead>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-lead>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-lead .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-lead .novo-divider.novo-divider-vertical{border-right-color:#bb84ad}.novo-toolbar .novo-toolbar-row.novo-accent-lead,.novo-toolbar.novo-toolbar-single-row.novo-accent-lead{border-bottom:2px solid #a69}.novo-toolbar .novo-toolbar-row.novo-color-contact,.novo-toolbar.novo-toolbar-single-row.novo-color-contact{background:#fa4;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-contact>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-contact>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-contact .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-contact .novo-divider.novo-divider-vertical{border-right-color:#ffbb69}.novo-toolbar .novo-toolbar-row.novo-accent-contact,.novo-toolbar.novo-toolbar-single-row.novo-accent-contact{border-bottom:2px solid #fa4}.novo-toolbar .novo-toolbar-row.novo-color-opportunity,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity{background:#625;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-opportunity>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-opportunity .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-opportunity .novo-divider.novo-divider-vertical{border-right-color:#844e77}.novo-toolbar .novo-toolbar-row.novo-accent-opportunity,.novo-toolbar.novo-toolbar-single-row.novo-accent-opportunity{border-bottom:2px solid #625}.novo-toolbar .novo-toolbar-row.novo-color-job,.novo-toolbar.novo-toolbar-single-row.novo-color-job{background:#b56;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-job>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-job>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-job>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-job>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-job>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-job>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-job>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-job .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-job .novo-divider.novo-divider-vertical{border-right-color:#c87784}.novo-toolbar .novo-toolbar-row.novo-accent-job,.novo-toolbar.novo-toolbar-single-row.novo-accent-job{border-bottom:2px solid #b56}.novo-toolbar .novo-toolbar-row.novo-color-submission,.novo-toolbar.novo-toolbar-single-row.novo-color-submission{background:#a9adbb;color:#000}.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-submission>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-submission>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-submission .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-submission .novo-divider.novo-divider-vertical{border-right-color:#babdc8}.novo-toolbar .novo-toolbar-row.novo-accent-submission,.novo-toolbar.novo-toolbar-single-row.novo-accent-submission{border-bottom:2px solid #a9adbb}.novo-toolbar .novo-toolbar-row.novo-color-sendout,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout{background:#747884;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-sendout>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-sendout .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-sendout .novo-divider.novo-divider-vertical{border-right-color:#8f939c}.novo-toolbar .novo-toolbar-row.novo-accent-sendout,.novo-toolbar.novo-toolbar-single-row.novo-accent-sendout{border-bottom:2px solid #747884}.novo-toolbar .novo-toolbar-row.novo-color-placement,.novo-toolbar.novo-toolbar-single-row.novo-color-placement{background:#0b344f;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-placement>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-placement>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-placement .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-placement .novo-divider.novo-divider-vertical{border-right-color:#3b5c72}.novo-toolbar .novo-toolbar-row.novo-accent-placement,.novo-toolbar.novo-toolbar-single-row.novo-accent-placement{border-bottom:2px solid #0b344f}.novo-toolbar .novo-toolbar-row.novo-color-note,.novo-toolbar.novo-toolbar-single-row.novo-color-note{background:#747884;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-note>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-note>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-note>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-note>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-note>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-note>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-note>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-note .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-note .novo-divider.novo-divider-vertical{border-right-color:#8f939c}.novo-toolbar .novo-toolbar-row.novo-accent-note,.novo-toolbar.novo-toolbar-single-row.novo-accent-note{border-bottom:2px solid #747884}.novo-toolbar .novo-toolbar-row.novo-color-contract,.novo-toolbar.novo-toolbar-single-row.novo-color-contract{background:#454ea0;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-contract>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-contract>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-contract .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-contract .novo-divider.novo-divider-vertical{border-right-color:#6a71b3}.novo-toolbar .novo-toolbar-row.novo-accent-contract,.novo-toolbar.novo-toolbar-single-row.novo-accent-contract{border-bottom:2px solid #454ea0}.novo-toolbar .novo-toolbar-row.novo-color-jobCode,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-jobCode>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-jobCode .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-jobCode .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-jobCode,.novo-toolbar.novo-toolbar-single-row.novo-accent-jobCode{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-earnCode,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-earnCode>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-earnCode .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-earnCode .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-earnCode,.novo-toolbar.novo-toolbar-single-row.novo-accent-earnCode{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-invoiceStatement .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-invoiceStatement .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-invoiceStatement,.novo-toolbar.novo-toolbar-single-row.novo-accent-invoiceStatement{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-billableCharge,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-billableCharge>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-billableCharge .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-billableCharge .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-billableCharge,.novo-toolbar.novo-toolbar-single-row.novo-accent-billableCharge{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-payableCharge,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-payableCharge>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-payableCharge .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-payableCharge .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-payableCharge,.novo-toolbar.novo-toolbar-single-row.novo-accent-payableCharge{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-user,.novo-toolbar.novo-toolbar-single-row.novo-color-user{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-user>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-user>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-user>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-user>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-user>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-user>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-user>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-user .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-user .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-user,.novo-toolbar.novo-toolbar-single-row.novo-accent-user{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-corporateUser,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-corporateUser>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-corporateUser .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-corporateUser .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-corporateUser,.novo-toolbar.novo-toolbar-single-row.novo-accent-corporateUser{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-distributionList,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-distributionList>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-distributionList .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-distributionList .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-distributionList,.novo-toolbar.novo-toolbar-single-row.novo-accent-distributionList{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-credential,.novo-toolbar.novo-toolbar-single-row.novo-color-credential{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-credential>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-credential>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-credential .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-credential .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-credential,.novo-toolbar.novo-toolbar-single-row.novo-accent-credential{border-bottom:2px solid #696d79}.novo-toolbar .novo-toolbar-row.novo-color-person,.novo-toolbar.novo-toolbar-single-row.novo-color-person{background:#696d79;color:#fff}.novo-toolbar .novo-toolbar-row.novo-color-person>novo-action button,.novo-toolbar .novo-toolbar-row.novo-color-person>novo-action novo-button,.novo-toolbar .novo-toolbar-row.novo-color-person>novo-icon,.novo-toolbar .novo-toolbar-row.novo-color-person>novo-label,.novo-toolbar .novo-toolbar-row.novo-color-person>novo-text,.novo-toolbar .novo-toolbar-row.novo-color-person>novo-title,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-action button,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-action novo-button,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-icon,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-label,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-text,.novo-toolbar.novo-toolbar-single-row.novo-color-person>novo-title{color:inherit}.novo-toolbar .novo-toolbar-row.novo-color-person .novo-divider.novo-divider-vertical,.novo-toolbar.novo-toolbar-single-row.novo-color-person .novo-divider.novo-divider-vertical{border-right-color:#878a93}.novo-toolbar .novo-toolbar-row.novo-accent-person,.novo-toolbar.novo-toolbar-single-row.novo-accent-person{border-bottom:2px solid #696d79}.novo-toolbar.novo-toolbar-multiple-rows{box-sizing:border-box;display:flex;flex-direction:column;width:100%}"]
+                },] }
+    ];
+    NovoToolbar.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    NovoToolbar.propDecorators = {
+        _toolbarRows: [{ type: i0.ContentChildren, args: [NovoToolbarRow, { descendants: true },] }]
+    };
+    // NG2
+    var NovoToolbarModule = /** @class */ (function () {
+        function NovoToolbarModule() {
+        }
+        return NovoToolbarModule;
+    }());
+    NovoToolbarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    declarations: [NovoToolbar, NovoToolbarRow],
+                    exports: [NovoToolbar, NovoToolbarRow],
+                },] }
+    ];
     var Unless = /** @class */ (function () {
         function Unless(templateRef, viewContainer, security) {
             this.templateRef = templateRef;
@@ -53211,6 +53740,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NovoValueElement.prototype, "icon", {
+            get: function () {
+                return this.meta.icon;
+            },
+            set: function (value) {
+                this.meta.icon = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoValueElement.prototype.ngOnInit = function () {
             if (Helpers.isEmpty(this.meta)) {
                 this.meta = {
@@ -53321,7 +53860,7 @@
     NovoValueElement.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-value',
-                    template: "\n    <ng-container [ngSwitch]=\"_type\">\n      <div class=\"value-outer\" *ngIf=\"showLabel\">\n        <novo-label>{{ meta.label }}</novo-label>\n        <span class=\"value\">\n          <i *ngIf=\"meta.showEntityIcon\" class=\"bhi-circle {{ meta.entityIconClass }}\"></i>\n          <a *ngSwitchCase=\"NOVO_VALUE_TYPE.INTERNAL_LINK\" (click)=\"openLink()\" [innerHTML]=\"data | render: meta\"></a>\n          <a *ngSwitchCase=\"NOVO_VALUE_TYPE.LINK\" class=\"value\" [href]=\"url\" target=\"_blank\" [innerHTML]=\"data | render: meta\"></a>\n        </span>\n        <novo-entity-list *ngSwitchCase=\"NOVO_VALUE_TYPE.ENTITY_LIST\" [data]=\"data\" [meta]=\"meta\"></novo-entity-list>\n      </div>\n      <div *ngSwitchDefault class=\"value-outer\" [ngClass]=\"customClass\">\n        <novo-label>{{ meta.label }}</novo-label>\n        <div *ngIf=\"isDefault\" class=\"value\" [innerHTML]=\"data | render: meta\"></div>\n      </div>\n      <div class=\"actions\" *ngIf=\"showIcon\">\n        <i *ngFor=\"let icon of meta.icons\" [class]=\"iconClass(icon)\" (click)=\"onValueClick(icon)\"></i>\n      </div>\n    </ng-container>\n  "
+                    template: "\n    <div class=\"value-outer\" [ngClass]=\"customClass\">\n      <novo-label>{{ meta.label }}</novo-label>\n      <span class=\"value\">\n        <i *ngIf=\"meta.showEntityIcon\" class=\"bhi-circle {{ meta.entityIconClass }}\"></i>\n        <novo-icon *ngIf=\"meta?.icon\">{{ meta.icon }}</novo-icon>\n        <ng-container [ngSwitch]=\"_type\">\n          <a *ngSwitchCase=\"NOVO_VALUE_TYPE.INTERNAL_LINK\" (click)=\"openLink()\" [innerHTML]=\"data | render: meta\"></a>\n          <a *ngSwitchCase=\"NOVO_VALUE_TYPE.LINK\" class=\"value\" [href]=\"url\" target=\"_blank\" [innerHTML]=\"data | render: meta\"></a>\n          <novo-entity-list *ngSwitchCase=\"NOVO_VALUE_TYPE.ENTITY_LIST\" [data]=\"data\" [meta]=\"meta\"></novo-entity-list>\n          <novo-text *ngSwitchDefault [innerHTML]=\"data | render: meta\"></novo-text>\n        </ng-container>\n      </span>\n    </div>\n    <div class=\"actions\" *ngIf=\"showIcon\">\n      <i *ngFor=\"let icon of meta.icons\" [class]=\"iconClass(icon)\" (click)=\"onValueClick(icon)\"></i>\n    </div>\n  "
                 },] }
     ];
     NovoValueElement.propDecorators = {
@@ -53331,6 +53870,7 @@
         row: [{ type: i0.HostBinding, args: ['class.horizontal',] }, { type: i0.Input }],
         label: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
         isMobile: [{ type: i0.HostBinding, args: ['class.mobile',] }]
     };
     __decorate([
@@ -53346,7 +53886,7 @@
     }());
     NovoValueModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, NovoCommonModule],
+                    imports: [common.CommonModule, NovoCommonModule, NovoIconModule],
                     declarations: [NovoValueElement, RenderPipe, EntityList],
                     exports: [NovoValueElement, RenderPipe, EntityList],
                 },] }
@@ -53416,6 +53956,7 @@
                         NovoCommonModule,
                         NovoOptionModule,
                         NovoStepperModule,
+                        NovoToolbarModule,
                         scrolling.ScrollingModule,
                         NovoTabbedGroupPickerModule,
                         NovoNonIdealStateModule,
@@ -53487,6 +54028,7 @@
      * Generated bundle index. Do not edit.
      */
+    exports.AccentColorDirective = AccentColorDirective;
     exports.AceEditorControl = AceEditorControl;
     exports.ActivityTableDataSource = ActivityTableDataSource;
     exports.ActivityTableRenderers = ActivityTableRenderers;
@@ -53552,8 +54094,10 @@
     exports.ErrorStateMatcher = ErrorStateMatcher;
     exports.FieldInteractionApi = FieldInteractionApi;
     exports.FileControl = FileControl;
+    exports.FillColorDirective = FillColorDirective;
     exports.FormUtils = FormUtils;
     exports.FormValidators = FormValidators;
+    exports.GapDirective = GapDirective;
     exports.GlobalRef = GlobalRef;
     exports.GooglePlacesModule = GooglePlacesModule;
     exports.GooglePlacesService = GooglePlacesService;
@@ -53798,6 +54342,7 @@
     exports.NovoRadioElement = NovoRadioElement;
     exports.NovoRadioGroup = NovoRadioGroup;
     exports.NovoRadioModule = NovoRadioModule;
+    exports.NovoRailComponent = NovoRailComponent;
     exports.NovoRowChipElement = NovoRowChipElement;
     exports.NovoRowChipsElement = NovoRowChipsElement;
     exports.NovoSearchBoxElement = NovoSearchBoxElement;
@@ -53872,6 +54417,9 @@
     exports.NovoToastElement = NovoToastElement;
     exports.NovoToastModule = NovoToastModule;
     exports.NovoToastService = NovoToastService;
+    exports.NovoToolbar = NovoToolbar;
+    exports.NovoToolbarModule = NovoToolbarModule;
+    exports.NovoToolbarRow = NovoToolbarRow;
     exports.NovoTooltip = NovoTooltip;
     exports.NovoTooltipModule = NovoTooltipModule;
     exports.NovoUtilActionComponent = NovoUtilActionComponent;
@@ -53949,6 +54497,7 @@
     exports.getDayView = getDayView;
     exports.getDayViewHourGrid = getDayViewHourGrid;
     exports.getMonthView = getMonthView;
+    exports.getSpacingToken = getSpacingToken;
     exports.getStateObjects = getStateObjects;
     exports.getStates = getStates;
     exports.getWeekView = getWeekView;
@@ -53961,6 +54510,7 @@
     exports.mixinErrorState = mixinErrorState;
     exports.mixinOverlay = mixinOverlay;
     exports.mixinRequired = mixinRequired;
+    exports.mixinSize = mixinSize;
     exports.mixinTabIndex = mixinTabIndex;
     exports.notify = notify;
     exports.novoExpansionAnimations = novoExpansionAnimations;