novo-elements 10.11.0-next.1 → 10.11.0-next.2

package/elements/field/field-fill.scss

@@ -43,6 +43,22 @@
           border-bottom: 1px solid $negative !important;
         }
       }
+      &.novo-field-disabled {
+        .novo-field-input {
+          color: $grey !important;
+          border-bottom: 1px dashed $grey !important;
+        }
+        &:not(.novo-focused):hover {
+          .novo-field-input {
+            color: $grey !important;
+            border-bottom: 1px dashed $grey !important;
+          }
+        }
+      }
+      .novo-field-input:disabled {
+        color: $grey !important;
+        border-bottom: 1px dashed $grey !important;
+      }
     }
   }
 }

package/elements/field/field-standard.scss

@@ -22,6 +22,22 @@
           border-bottom: 1px solid $negative !important;
         }
       }
+      &.novo-field-disabled {
+        .novo-field-input {
+          color: $grey !important;
+          border-bottom: 1px dashed $grey !important;
+        }
+        &:not(.novo-focused):hover {
+          .novo-field-input {
+            color: $grey !important;
+            border-bottom: 1px dashed $grey !important;
+          }
+        }
+      }
+      .novo-field-input:disabled {
+        color: $grey !important;
+        border-bottom: 1px dashed $grey !important;
+      }
     }
   }
 }

package/elements/select/Select.scss

@@ -57,11 +57,24 @@
       right: 0px;
     }
   }
-  &[disabled] {
+  &[disabled],
+  &.novo-select-disabled {
     pointer-events: none;
     div[type="button"] {
       color: $grey;
     }
+    i {
+      color: $grey !important;
+    }
+    .novo-select-trigger {
+      color: $grey !important;
+      border-bottom: 1px dashed $grey !important;
+
+      &:hover {
+        color: $grey !important;
+        border-bottom: 1px dashed $grey !important;
+      }
+    }
   }
 }
 

package/esm2022/elements/field/field.mjs

@@ -120,7 +120,7 @@ export class NovoFieldElement {
         return !!this._labelElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NovoFieldElement, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NovoFieldElement, selector: "novo-field", inputs: { layout: "layout", appearance: "appearance", customOverlayOrigin: "customOverlayOrigin", width: "width" }, outputs: { valueChanges: "valueChanges", stateChanges: "stateChanges" }, host: { listeners: { "click": "_handleContainerClick($event)" }, properties: { "class.novo-field-layout-horizontal": "layout==\"horizontal\"", "class.novo-field-layout-vertical": "layout==\"vertical\"", "class.novo-field-appearance-standard": "appearance == \"standard\"", "class.novo-field-appearance-fill": "appearance == \"fill\"", "class.novo-field-appearance-outline": "appearance == \"outline\"", "class.novo-field-appearance-list": "appearance == \"list\"", "class.novo-field-appearance-underlined": "_isUnderlinedInput()", "class.novo-field-invalid": "_control.errorState", "class.novo-field-has-label": "_hasLabel()", "class.novo-field-no-label": "!_hasLabel()", "class.novo-field-disabled": "_control.disabled", "class.novo-field-autofilled": "_control.autofilled", "class.novo-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")" }, classAttribute: "novo-field" }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], queries: [{ propertyName: "_labelElement", first: true, predicate: NovoLabel, descendants: true }, { propertyName: "_control", first: true, predicate: NovoFieldControl, descendants: true }, { propertyName: "_hintElements", predicate: NovoHintElement }, { propertyName: "_errorElements", predicate: NovoErrorElement }, { propertyName: "_prefixElements", predicate: NovoFieldPrefixDirective }, { propertyName: "_suffixElements", predicate: NovoFieldSuffixDirective }, { propertyName: "_overlayElements", predicate: NOVO_OVERLAY_CONTAINER }], viewQueries: [{ propertyName: "_inputContainerRef", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NovoFieldElement, selector: "novo-field", inputs: { layout: "layout", appearance: "appearance", customOverlayOrigin: "customOverlayOrigin", width: "width" }, outputs: { valueChanges: "valueChanges", stateChanges: "stateChanges" }, host: { listeners: { "click": "_handleContainerClick($event)" }, properties: { "class.novo-field-layout-horizontal": "layout==\"horizontal\"", "class.novo-field-layout-vertical": "layout==\"vertical\"", "class.novo-field-appearance-standard": "appearance == \"standard\"", "class.novo-field-appearance-fill": "appearance == \"fill\"", "class.novo-field-appearance-outline": "appearance == \"outline\"", "class.novo-field-appearance-list": "appearance == \"list\"", "class.novo-field-appearance-underlined": "_isUnderlinedInput()", "class.novo-field-invalid": "_control.errorState", "class.novo-field-has-label": "_hasLabel()", "class.novo-field-no-label": "!_hasLabel()", "class.novo-field-disabled": "_control.disabled", "class.novo-field-autofilled": "_control.autofilled", "class.novo-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")" }, classAttribute: "novo-field" }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], queries: [{ propertyName: "_labelElement", first: true, predicate: NovoLabel, descendants: true }, { propertyName: "_control", first: true, predicate: NovoFieldControl, descendants: true }, { propertyName: "_hintElements", predicate: NovoHintElement }, { propertyName: "_errorElements", predicate: NovoErrorElement }, { propertyName: "_prefixElements", predicate: NovoFieldPrefixDirective }, { propertyName: "_suffixElements", predicate: NovoFieldSuffixDirective }, { propertyName: "_overlayElements", predicate: NOVO_OVERLAY_CONTAINER }], viewQueries: [{ propertyName: "_inputContainerRef", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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-standard.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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-fill.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NovoFieldElement, decorators: [{
             type: Component,
@@ -149,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         '[class.ng-valid]': '_shouldForward("valid")',
                         '[class.ng-invalid]': '_shouldForward("invalid")',
                         '[class.ng-pending]': '_shouldForward("pending")',
-                    }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"] }]
+                    }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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-standard.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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-fill.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _inputContainerRef: [{
                 type: ViewChild,
                 args: ['inputContainer']

package/esm2022/elements/select/Select.mjs

@@ -675,7 +675,7 @@ export class NovoSelectElement extends NovoSelectMixins {
         </ng-container>
       </div>
     </novo-overlay-template>
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%;max-width:800px;min-width:180px;cursor:pointer}:host .novo-select-trigger{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #afb9c0;color:var(--text-main, #3d464d);height:2.05rem;position:relative;text-align:left;text-shadow:none;z-index:1;cursor:pointer;text-transform:none;padding:0 1rem 0 .5rem;margin-bottom:-1px;-webkit-appearance:none}:host .novo-select-trigger.text-capitalize{text-transform:capitalize}:host .novo-select-trigger.text-uppercase{text-transform:uppercase}:host .novo-select-trigger.text-nowrap{white-space:nowrap}:host .novo-select-trigger.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-select-trigger.text-size-default{font-size:inherit}:host .novo-select-trigger.text-size-body{font-size:1.3rem}:host .novo-select-trigger.text-size-xs{font-size:1rem}:host .novo-select-trigger.text-size-sm{font-size:1.2rem}:host .novo-select-trigger.text-size-md{font-size:1.3rem}:host .novo-select-trigger.text-size-lg{font-size:1.6rem}:host .novo-select-trigger.text-size-xl{font-size:2rem}:host .novo-select-trigger.text-size-2xl{font-size:2.6rem}:host .novo-select-trigger.text-size-3xl{font-size:3.2rem}:host .novo-select-trigger.text-size-smaller{font-size:.8em}:host .novo-select-trigger.text-size-larger{font-size:1.2em}:host .novo-select-trigger.text-color-black{color:#000}:host .novo-select-trigger.text-color-white{color:#fff}:host .novo-select-trigger.text-color-gray{color:#9e9e9e}:host .novo-select-trigger.text-color-grey{color:#9e9e9e}:host .novo-select-trigger.text-color-offWhite{color:#f7f7f7}:host .novo-select-trigger.text-color-bright{color:#f7f7f7}:host .novo-select-trigger.text-color-light{color:#dbdbdb}:host .novo-select-trigger.text-color-neutral{color:#4f5361}:host .novo-select-trigger.text-color-dark{color:#3d464d}:host .novo-select-trigger.text-color-orange{color:#ff6900}:host .novo-select-trigger.text-color-navigation{color:#202945}:host .novo-select-trigger.text-color-skyBlue{color:#009bdf}:host .novo-select-trigger.text-color-steel{color:#5b6770}:host .novo-select-trigger.text-color-metal{color:#637893}:host .novo-select-trigger.text-color-sand{color:#f4f4f4}:host .novo-select-trigger.text-color-silver{color:#e2e2e2}:host .novo-select-trigger.text-color-stone{color:#bebebe}:host .novo-select-trigger.text-color-ash{color:#a0a0a0}:host .novo-select-trigger.text-color-slate{color:#707070}:host .novo-select-trigger.text-color-onyx{color:#526980}:host .novo-select-trigger.text-color-charcoal{color:#282828}:host .novo-select-trigger.text-color-moonlight{color:#1a242f}:host .novo-select-trigger.text-color-midnight{color:#202945}:host .novo-select-trigger.text-color-darkness{color:#161f27}:host .novo-select-trigger.text-color-navy{color:#0d2d42}:host .novo-select-trigger.text-color-aqua{color:#3bafda}:host .novo-select-trigger.text-color-ocean{color:#4a89dc}:host .novo-select-trigger.text-color-mint{color:#37bc9b}:host .novo-select-trigger.text-color-grass{color:#8cc152}:host .novo-select-trigger.text-color-sunflower{color:#f6b042}:host .novo-select-trigger.text-color-bittersweet{color:#eb6845}:host .novo-select-trigger.text-color-grapefruit{color:#da4453}:host .novo-select-trigger.text-color-carnation{color:#d770ad}:host .novo-select-trigger.text-color-lavender{color:#967adc}:host .novo-select-trigger.text-color-mountain{color:#9678b6}:host .novo-select-trigger.text-color-info{color:#4a89dc}:host .novo-select-trigger.text-color-positive{color:#4a89dc}:host .novo-select-trigger.text-color-success{color:#8cc152}:host .novo-select-trigger.text-color-negative{color:#da4453}:host .novo-select-trigger.text-color-danger{color:#da4453}:host .novo-select-trigger.text-color-error{color:#da4453}:host .novo-select-trigger.text-color-warning{color:#f6b042}:host .novo-select-trigger.text-color-empty{color:#cccdcc}:host .novo-select-trigger.text-color-disabled{color:#bebebe}:host .novo-select-trigger.text-color-background{color:#f7f7f7}:host .novo-select-trigger.text-color-backgroundDark{color:#e2e2e2}:host .novo-select-trigger.text-color-presentation{color:#5b6770}:host .novo-select-trigger.text-color-bullhorn{color:#ff6900}:host .novo-select-trigger.text-color-pulse{color:#3bafda}:host .novo-select-trigger.text-color-company{color:#39d}:host .novo-select-trigger.text-color-candidate{color:#4b7}:host .novo-select-trigger.text-color-lead{color:#a69}:host .novo-select-trigger.text-color-contact{color:#fa4}:host .novo-select-trigger.text-color-clientcontact{color:#fa4}:host .novo-select-trigger.text-color-opportunity{color:#625}:host .novo-select-trigger.text-color-job{color:#b56}:host .novo-select-trigger.text-color-joborder{color:#b56}:host .novo-select-trigger.text-color-submission{color:#a9adbb}:host .novo-select-trigger.text-color-sendout{color:#747884}:host .novo-select-trigger.text-color-placement{color:#0b344f}:host .novo-select-trigger.text-color-note{color:#747884}:host .novo-select-trigger.text-color-contract{color:#454ea0}:host .novo-select-trigger.text-color-jobCode{color:#696d79}:host .novo-select-trigger.text-color-earnCode{color:#696d79}:host .novo-select-trigger.text-color-invoiceStatement{color:#696d79}:host .novo-select-trigger.text-color-billableCharge{color:#696d79}:host .novo-select-trigger.text-color-payableCharge{color:#696d79}:host .novo-select-trigger.text-color-user{color:#696d79}:host .novo-select-trigger.text-color-corporateUser{color:#696d79}:host .novo-select-trigger.text-color-distributionList{color:#696d79}:host .novo-select-trigger.text-color-credential{color:#696d79}:host .novo-select-trigger.text-color-person{color:#696d79}:host .novo-select-trigger.margin-before{margin-top:.4rem}:host .novo-select-trigger.margin-after{margin-bottom:.8rem}:host .novo-select-trigger.text-length-small{max-width:40ch}:host .novo-select-trigger.text-length-medium{max-width:55ch}:host .novo-select-trigger.text-length-large{max-width:70ch}:host .novo-select-trigger.text-weight-hairline{font-weight:100}:host .novo-select-trigger.text-weight-thin{font-weight:200}:host .novo-select-trigger.text-weight-light{font-weight:300}:host .novo-select-trigger.text-weight-normal{font-weight:400}:host .novo-select-trigger.text-weight-medium{font-weight:500}:host .novo-select-trigger.text-weight-semibold{font-weight:600}:host .novo-select-trigger.text-weight-bold{font-weight:700}:host .novo-select-trigger.text-weight-extrabold{font-weight:800}:host .novo-select-trigger.text-weight-heavy{font-weight:900}:host .novo-select-trigger.text-weight-lighter{font-weight:lighter}:host .novo-select-trigger.text-weight-bolder{font-weight:bolder}:host .novo-select-trigger.empty{color:#a9a9a9}:host .novo-select-trigger:focus,:host .novo-select-trigger:hover{outline:none}:host .novo-select-trigger:hover{border-bottom:1px solid #5f6d78}:host .novo-select-trigger:focus{border-bottom:1px solid #4a89dc}:host .novo-select-trigger:focus i{color:#000000ba}:host .novo-select-trigger .novo-select-placeholder{color:var(--form-placeholder)}:host .novo-select-trigger i{font-size:.8em;color:#3d464d;position:absolute;right:0}:host[disabled]{pointer-events:none}:host[disabled] div[type=button]{color:#9e9e9e}.novo-select-list{background-color:var(--background-bright);cursor:default;list-style:none;overflow:auto;margin:0;padding:0;width:100%;box-shadow:0 -1px 3px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;font-size:1rem;z-index:-1;opacity:0}.novo-select-list.active{z-index:1000;max-height:219px;min-width:200px;width:100%;max-width:800px;width:inherit;overflow:auto;opacity:1}.novo-select-list .select-item{height:35px}.select-header button{text-transform:uppercase}.select-header button.header{color:#4a89dc;position:relative;text-align:left;cursor:pointer;height:3rem;margin:0;padding:.5rem 1.6rem 0 0;box-sizing:border-box;border:none;display:block;align-items:center;justify-content:space-between;font-size:1rem}.select-header button.header:focus,.select-header button.header:hover{color:#4f4f4f}.select-header button.header i{color:#4a89dc;padding-right:10px}.select-header button.header span{text-align:left}.select-header div.active{width:100%;float:right;padding:5px}.select-header div.active footer{float:right}.select-header div.active button{display:inline-block;border:none;float:left;width:auto;font-weight:500;font-size:.8rem;color:#acacac}.select-header div.active button:hover{color:#868686}.select-header div.active button.primary{color:#4a89dc}.select-header div.active button.primary:hover{color:#2363b6}.select-header div.active input{display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.12);color:#000000ba;height:2.05rem;position:relative;text-align:left;text-shadow:none;width:100%;z-index:1;cursor:pointer;text-transform:none;padding-top:10px;font-size:1rem}.select-header div.active input.empty{color:#a9a9a9}.select-header div.active input:focus{outline:none}.select-header div.active input:hover{border-bottom:1px solid #4a89dc}.select-header div.active input.invalid{border-bottom:1px solid #da4453}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i7.NovoDividerComponent, selector: "novo-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i3.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "minWidth", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing", "backDropClicked"] }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML", "tooltipCloseOnClick", "tooltipOnOverflow", "tooltipActive"] }, { kind: "component", type: i9.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { kind: "pipe", type: i10.HighlightPipe, name: "highlight" }] }); }
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%;max-width:800px;min-width:180px;cursor:pointer}:host .novo-select-trigger{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #afb9c0;color:var(--text-main, #3d464d);height:2.05rem;position:relative;text-align:left;text-shadow:none;z-index:1;cursor:pointer;text-transform:none;padding:0 1rem 0 .5rem;margin-bottom:-1px;-webkit-appearance:none}:host .novo-select-trigger.text-capitalize{text-transform:capitalize}:host .novo-select-trigger.text-uppercase{text-transform:uppercase}:host .novo-select-trigger.text-nowrap{white-space:nowrap}:host .novo-select-trigger.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-select-trigger.text-size-default{font-size:inherit}:host .novo-select-trigger.text-size-body{font-size:1.3rem}:host .novo-select-trigger.text-size-xs{font-size:1rem}:host .novo-select-trigger.text-size-sm{font-size:1.2rem}:host .novo-select-trigger.text-size-md{font-size:1.3rem}:host .novo-select-trigger.text-size-lg{font-size:1.6rem}:host .novo-select-trigger.text-size-xl{font-size:2rem}:host .novo-select-trigger.text-size-2xl{font-size:2.6rem}:host .novo-select-trigger.text-size-3xl{font-size:3.2rem}:host .novo-select-trigger.text-size-smaller{font-size:.8em}:host .novo-select-trigger.text-size-larger{font-size:1.2em}:host .novo-select-trigger.text-color-black{color:#000}:host .novo-select-trigger.text-color-white{color:#fff}:host .novo-select-trigger.text-color-gray{color:#9e9e9e}:host .novo-select-trigger.text-color-grey{color:#9e9e9e}:host .novo-select-trigger.text-color-offWhite{color:#f7f7f7}:host .novo-select-trigger.text-color-bright{color:#f7f7f7}:host .novo-select-trigger.text-color-light{color:#dbdbdb}:host .novo-select-trigger.text-color-neutral{color:#4f5361}:host .novo-select-trigger.text-color-dark{color:#3d464d}:host .novo-select-trigger.text-color-orange{color:#ff6900}:host .novo-select-trigger.text-color-navigation{color:#202945}:host .novo-select-trigger.text-color-skyBlue{color:#009bdf}:host .novo-select-trigger.text-color-steel{color:#5b6770}:host .novo-select-trigger.text-color-metal{color:#637893}:host .novo-select-trigger.text-color-sand{color:#f4f4f4}:host .novo-select-trigger.text-color-silver{color:#e2e2e2}:host .novo-select-trigger.text-color-stone{color:#bebebe}:host .novo-select-trigger.text-color-ash{color:#a0a0a0}:host .novo-select-trigger.text-color-slate{color:#707070}:host .novo-select-trigger.text-color-onyx{color:#526980}:host .novo-select-trigger.text-color-charcoal{color:#282828}:host .novo-select-trigger.text-color-moonlight{color:#1a242f}:host .novo-select-trigger.text-color-midnight{color:#202945}:host .novo-select-trigger.text-color-darkness{color:#161f27}:host .novo-select-trigger.text-color-navy{color:#0d2d42}:host .novo-select-trigger.text-color-aqua{color:#3bafda}:host .novo-select-trigger.text-color-ocean{color:#4a89dc}:host .novo-select-trigger.text-color-mint{color:#37bc9b}:host .novo-select-trigger.text-color-grass{color:#8cc152}:host .novo-select-trigger.text-color-sunflower{color:#f6b042}:host .novo-select-trigger.text-color-bittersweet{color:#eb6845}:host .novo-select-trigger.text-color-grapefruit{color:#da4453}:host .novo-select-trigger.text-color-carnation{color:#d770ad}:host .novo-select-trigger.text-color-lavender{color:#967adc}:host .novo-select-trigger.text-color-mountain{color:#9678b6}:host .novo-select-trigger.text-color-info{color:#4a89dc}:host .novo-select-trigger.text-color-positive{color:#4a89dc}:host .novo-select-trigger.text-color-success{color:#8cc152}:host .novo-select-trigger.text-color-negative{color:#da4453}:host .novo-select-trigger.text-color-danger{color:#da4453}:host .novo-select-trigger.text-color-error{color:#da4453}:host .novo-select-trigger.text-color-warning{color:#f6b042}:host .novo-select-trigger.text-color-empty{color:#cccdcc}:host .novo-select-trigger.text-color-disabled{color:#bebebe}:host .novo-select-trigger.text-color-background{color:#f7f7f7}:host .novo-select-trigger.text-color-backgroundDark{color:#e2e2e2}:host .novo-select-trigger.text-color-presentation{color:#5b6770}:host .novo-select-trigger.text-color-bullhorn{color:#ff6900}:host .novo-select-trigger.text-color-pulse{color:#3bafda}:host .novo-select-trigger.text-color-company{color:#39d}:host .novo-select-trigger.text-color-candidate{color:#4b7}:host .novo-select-trigger.text-color-lead{color:#a69}:host .novo-select-trigger.text-color-contact{color:#fa4}:host .novo-select-trigger.text-color-clientcontact{color:#fa4}:host .novo-select-trigger.text-color-opportunity{color:#625}:host .novo-select-trigger.text-color-job{color:#b56}:host .novo-select-trigger.text-color-joborder{color:#b56}:host .novo-select-trigger.text-color-submission{color:#a9adbb}:host .novo-select-trigger.text-color-sendout{color:#747884}:host .novo-select-trigger.text-color-placement{color:#0b344f}:host .novo-select-trigger.text-color-note{color:#747884}:host .novo-select-trigger.text-color-contract{color:#454ea0}:host .novo-select-trigger.text-color-jobCode{color:#696d79}:host .novo-select-trigger.text-color-earnCode{color:#696d79}:host .novo-select-trigger.text-color-invoiceStatement{color:#696d79}:host .novo-select-trigger.text-color-billableCharge{color:#696d79}:host .novo-select-trigger.text-color-payableCharge{color:#696d79}:host .novo-select-trigger.text-color-user{color:#696d79}:host .novo-select-trigger.text-color-corporateUser{color:#696d79}:host .novo-select-trigger.text-color-distributionList{color:#696d79}:host .novo-select-trigger.text-color-credential{color:#696d79}:host .novo-select-trigger.text-color-person{color:#696d79}:host .novo-select-trigger.margin-before{margin-top:.4rem}:host .novo-select-trigger.margin-after{margin-bottom:.8rem}:host .novo-select-trigger.text-length-small{max-width:40ch}:host .novo-select-trigger.text-length-medium{max-width:55ch}:host .novo-select-trigger.text-length-large{max-width:70ch}:host .novo-select-trigger.text-weight-hairline{font-weight:100}:host .novo-select-trigger.text-weight-thin{font-weight:200}:host .novo-select-trigger.text-weight-light{font-weight:300}:host .novo-select-trigger.text-weight-normal{font-weight:400}:host .novo-select-trigger.text-weight-medium{font-weight:500}:host .novo-select-trigger.text-weight-semibold{font-weight:600}:host .novo-select-trigger.text-weight-bold{font-weight:700}:host .novo-select-trigger.text-weight-extrabold{font-weight:800}:host .novo-select-trigger.text-weight-heavy{font-weight:900}:host .novo-select-trigger.text-weight-lighter{font-weight:lighter}:host .novo-select-trigger.text-weight-bolder{font-weight:bolder}:host .novo-select-trigger.empty{color:#a9a9a9}:host .novo-select-trigger:focus,:host .novo-select-trigger:hover{outline:none}:host .novo-select-trigger:hover{border-bottom:1px solid #5f6d78}:host .novo-select-trigger:focus{border-bottom:1px solid #4a89dc}:host .novo-select-trigger:focus i{color:#000000ba}:host .novo-select-trigger .novo-select-placeholder{color:var(--form-placeholder)}:host .novo-select-trigger i{font-size:.8em;color:#3d464d;position:absolute;right:0}:host[disabled],:host.novo-select-disabled{pointer-events:none}:host[disabled] div[type=button],:host.novo-select-disabled div[type=button]{color:#9e9e9e}:host[disabled] i,:host.novo-select-disabled i{color:#9e9e9e!important}:host[disabled] .novo-select-trigger,:host.novo-select-disabled .novo-select-trigger{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host[disabled] .novo-select-trigger:hover,:host.novo-select-disabled .novo-select-trigger:hover{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}.novo-select-list{background-color:var(--background-bright);cursor:default;list-style:none;overflow:auto;margin:0;padding:0;width:100%;box-shadow:0 -1px 3px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;font-size:1rem;z-index:-1;opacity:0}.novo-select-list.active{z-index:1000;max-height:219px;min-width:200px;width:100%;max-width:800px;width:inherit;overflow:auto;opacity:1}.novo-select-list .select-item{height:35px}.select-header button{text-transform:uppercase}.select-header button.header{color:#4a89dc;position:relative;text-align:left;cursor:pointer;height:3rem;margin:0;padding:.5rem 1.6rem 0 0;box-sizing:border-box;border:none;display:block;align-items:center;justify-content:space-between;font-size:1rem}.select-header button.header:focus,.select-header button.header:hover{color:#4f4f4f}.select-header button.header i{color:#4a89dc;padding-right:10px}.select-header button.header span{text-align:left}.select-header div.active{width:100%;float:right;padding:5px}.select-header div.active footer{float:right}.select-header div.active button{display:inline-block;border:none;float:left;width:auto;font-weight:500;font-size:.8rem;color:#acacac}.select-header div.active button:hover{color:#868686}.select-header div.active button.primary{color:#4a89dc}.select-header div.active button.primary:hover{color:#2363b6}.select-header div.active input{display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.12);color:#000000ba;height:2.05rem;position:relative;text-align:left;text-shadow:none;width:100%;z-index:1;cursor:pointer;text-transform:none;padding-top:10px;font-size:1rem}.select-header div.active input.empty{color:#a9a9a9}.select-header div.active input:focus{outline:none}.select-header div.active input:hover{border-bottom:1px solid #4a89dc}.select-header div.active input.invalid{border-bottom:1px solid #da4453}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i7.NovoDividerComponent, selector: "novo-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i3.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "minWidth", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing", "backDropClicked"] }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML", "tooltipCloseOnClick", "tooltipOnOverflow", "tooltipActive"] }, { kind: "component", type: i9.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { kind: "pipe", type: i10.HighlightPipe, name: "highlight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NovoSelectElement, decorators: [{
             type: Component,
@@ -758,7 +758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         '[class.novo-select-required]': 'required',
                         '[class.novo-select-empty]': 'empty',
                         '[class.novo-select-multiple]': 'multiple',
-                    }, styles: [":host{display:block;position:relative;width:100%;max-width:800px;min-width:180px;cursor:pointer}:host .novo-select-trigger{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #afb9c0;color:var(--text-main, #3d464d);height:2.05rem;position:relative;text-align:left;text-shadow:none;z-index:1;cursor:pointer;text-transform:none;padding:0 1rem 0 .5rem;margin-bottom:-1px;-webkit-appearance:none}:host .novo-select-trigger.text-capitalize{text-transform:capitalize}:host .novo-select-trigger.text-uppercase{text-transform:uppercase}:host .novo-select-trigger.text-nowrap{white-space:nowrap}:host .novo-select-trigger.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-select-trigger.text-size-default{font-size:inherit}:host .novo-select-trigger.text-size-body{font-size:1.3rem}:host .novo-select-trigger.text-size-xs{font-size:1rem}:host .novo-select-trigger.text-size-sm{font-size:1.2rem}:host .novo-select-trigger.text-size-md{font-size:1.3rem}:host .novo-select-trigger.text-size-lg{font-size:1.6rem}:host .novo-select-trigger.text-size-xl{font-size:2rem}:host .novo-select-trigger.text-size-2xl{font-size:2.6rem}:host .novo-select-trigger.text-size-3xl{font-size:3.2rem}:host .novo-select-trigger.text-size-smaller{font-size:.8em}:host .novo-select-trigger.text-size-larger{font-size:1.2em}:host .novo-select-trigger.text-color-black{color:#000}:host .novo-select-trigger.text-color-white{color:#fff}:host .novo-select-trigger.text-color-gray{color:#9e9e9e}:host .novo-select-trigger.text-color-grey{color:#9e9e9e}:host .novo-select-trigger.text-color-offWhite{color:#f7f7f7}:host .novo-select-trigger.text-color-bright{color:#f7f7f7}:host .novo-select-trigger.text-color-light{color:#dbdbdb}:host .novo-select-trigger.text-color-neutral{color:#4f5361}:host .novo-select-trigger.text-color-dark{color:#3d464d}:host .novo-select-trigger.text-color-orange{color:#ff6900}:host .novo-select-trigger.text-color-navigation{color:#202945}:host .novo-select-trigger.text-color-skyBlue{color:#009bdf}:host .novo-select-trigger.text-color-steel{color:#5b6770}:host .novo-select-trigger.text-color-metal{color:#637893}:host .novo-select-trigger.text-color-sand{color:#f4f4f4}:host .novo-select-trigger.text-color-silver{color:#e2e2e2}:host .novo-select-trigger.text-color-stone{color:#bebebe}:host .novo-select-trigger.text-color-ash{color:#a0a0a0}:host .novo-select-trigger.text-color-slate{color:#707070}:host .novo-select-trigger.text-color-onyx{color:#526980}:host .novo-select-trigger.text-color-charcoal{color:#282828}:host .novo-select-trigger.text-color-moonlight{color:#1a242f}:host .novo-select-trigger.text-color-midnight{color:#202945}:host .novo-select-trigger.text-color-darkness{color:#161f27}:host .novo-select-trigger.text-color-navy{color:#0d2d42}:host .novo-select-trigger.text-color-aqua{color:#3bafda}:host .novo-select-trigger.text-color-ocean{color:#4a89dc}:host .novo-select-trigger.text-color-mint{color:#37bc9b}:host .novo-select-trigger.text-color-grass{color:#8cc152}:host .novo-select-trigger.text-color-sunflower{color:#f6b042}:host .novo-select-trigger.text-color-bittersweet{color:#eb6845}:host .novo-select-trigger.text-color-grapefruit{color:#da4453}:host .novo-select-trigger.text-color-carnation{color:#d770ad}:host .novo-select-trigger.text-color-lavender{color:#967adc}:host .novo-select-trigger.text-color-mountain{color:#9678b6}:host .novo-select-trigger.text-color-info{color:#4a89dc}:host .novo-select-trigger.text-color-positive{color:#4a89dc}:host .novo-select-trigger.text-color-success{color:#8cc152}:host .novo-select-trigger.text-color-negative{color:#da4453}:host .novo-select-trigger.text-color-danger{color:#da4453}:host .novo-select-trigger.text-color-error{color:#da4453}:host .novo-select-trigger.text-color-warning{color:#f6b042}:host .novo-select-trigger.text-color-empty{color:#cccdcc}:host .novo-select-trigger.text-color-disabled{color:#bebebe}:host .novo-select-trigger.text-color-background{color:#f7f7f7}:host .novo-select-trigger.text-color-backgroundDark{color:#e2e2e2}:host .novo-select-trigger.text-color-presentation{color:#5b6770}:host .novo-select-trigger.text-color-bullhorn{color:#ff6900}:host .novo-select-trigger.text-color-pulse{color:#3bafda}:host .novo-select-trigger.text-color-company{color:#39d}:host .novo-select-trigger.text-color-candidate{color:#4b7}:host .novo-select-trigger.text-color-lead{color:#a69}:host .novo-select-trigger.text-color-contact{color:#fa4}:host .novo-select-trigger.text-color-clientcontact{color:#fa4}:host .novo-select-trigger.text-color-opportunity{color:#625}:host .novo-select-trigger.text-color-job{color:#b56}:host .novo-select-trigger.text-color-joborder{color:#b56}:host .novo-select-trigger.text-color-submission{color:#a9adbb}:host .novo-select-trigger.text-color-sendout{color:#747884}:host .novo-select-trigger.text-color-placement{color:#0b344f}:host .novo-select-trigger.text-color-note{color:#747884}:host .novo-select-trigger.text-color-contract{color:#454ea0}:host .novo-select-trigger.text-color-jobCode{color:#696d79}:host .novo-select-trigger.text-color-earnCode{color:#696d79}:host .novo-select-trigger.text-color-invoiceStatement{color:#696d79}:host .novo-select-trigger.text-color-billableCharge{color:#696d79}:host .novo-select-trigger.text-color-payableCharge{color:#696d79}:host .novo-select-trigger.text-color-user{color:#696d79}:host .novo-select-trigger.text-color-corporateUser{color:#696d79}:host .novo-select-trigger.text-color-distributionList{color:#696d79}:host .novo-select-trigger.text-color-credential{color:#696d79}:host .novo-select-trigger.text-color-person{color:#696d79}:host .novo-select-trigger.margin-before{margin-top:.4rem}:host .novo-select-trigger.margin-after{margin-bottom:.8rem}:host .novo-select-trigger.text-length-small{max-width:40ch}:host .novo-select-trigger.text-length-medium{max-width:55ch}:host .novo-select-trigger.text-length-large{max-width:70ch}:host .novo-select-trigger.text-weight-hairline{font-weight:100}:host .novo-select-trigger.text-weight-thin{font-weight:200}:host .novo-select-trigger.text-weight-light{font-weight:300}:host .novo-select-trigger.text-weight-normal{font-weight:400}:host .novo-select-trigger.text-weight-medium{font-weight:500}:host .novo-select-trigger.text-weight-semibold{font-weight:600}:host .novo-select-trigger.text-weight-bold{font-weight:700}:host .novo-select-trigger.text-weight-extrabold{font-weight:800}:host .novo-select-trigger.text-weight-heavy{font-weight:900}:host .novo-select-trigger.text-weight-lighter{font-weight:lighter}:host .novo-select-trigger.text-weight-bolder{font-weight:bolder}:host .novo-select-trigger.empty{color:#a9a9a9}:host .novo-select-trigger:focus,:host .novo-select-trigger:hover{outline:none}:host .novo-select-trigger:hover{border-bottom:1px solid #5f6d78}:host .novo-select-trigger:focus{border-bottom:1px solid #4a89dc}:host .novo-select-trigger:focus i{color:#000000ba}:host .novo-select-trigger .novo-select-placeholder{color:var(--form-placeholder)}:host .novo-select-trigger i{font-size:.8em;color:#3d464d;position:absolute;right:0}:host[disabled]{pointer-events:none}:host[disabled] div[type=button]{color:#9e9e9e}.novo-select-list{background-color:var(--background-bright);cursor:default;list-style:none;overflow:auto;margin:0;padding:0;width:100%;box-shadow:0 -1px 3px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;font-size:1rem;z-index:-1;opacity:0}.novo-select-list.active{z-index:1000;max-height:219px;min-width:200px;width:100%;max-width:800px;width:inherit;overflow:auto;opacity:1}.novo-select-list .select-item{height:35px}.select-header button{text-transform:uppercase}.select-header button.header{color:#4a89dc;position:relative;text-align:left;cursor:pointer;height:3rem;margin:0;padding:.5rem 1.6rem 0 0;box-sizing:border-box;border:none;display:block;align-items:center;justify-content:space-between;font-size:1rem}.select-header button.header:focus,.select-header button.header:hover{color:#4f4f4f}.select-header button.header i{color:#4a89dc;padding-right:10px}.select-header button.header span{text-align:left}.select-header div.active{width:100%;float:right;padding:5px}.select-header div.active footer{float:right}.select-header div.active button{display:inline-block;border:none;float:left;width:auto;font-weight:500;font-size:.8rem;color:#acacac}.select-header div.active button:hover{color:#868686}.select-header div.active button.primary{color:#4a89dc}.select-header div.active button.primary:hover{color:#2363b6}.select-header div.active input{display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.12);color:#000000ba;height:2.05rem;position:relative;text-align:left;text-shadow:none;width:100%;z-index:1;cursor:pointer;text-transform:none;padding-top:10px;font-size:1rem}.select-header div.active input.empty{color:#a9a9a9}.select-header div.active input:focus{outline:none}.select-header div.active input:hover{border-bottom:1px solid #4a89dc}.select-header div.active input.invalid{border-bottom:1px solid #da4453}\n"] }]
+                    }, styles: [":host{display:block;position:relative;width:100%;max-width:800px;min-width:180px;cursor:pointer}:host .novo-select-trigger{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #afb9c0;color:var(--text-main, #3d464d);height:2.05rem;position:relative;text-align:left;text-shadow:none;z-index:1;cursor:pointer;text-transform:none;padding:0 1rem 0 .5rem;margin-bottom:-1px;-webkit-appearance:none}:host .novo-select-trigger.text-capitalize{text-transform:capitalize}:host .novo-select-trigger.text-uppercase{text-transform:uppercase}:host .novo-select-trigger.text-nowrap{white-space:nowrap}:host .novo-select-trigger.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-select-trigger.text-size-default{font-size:inherit}:host .novo-select-trigger.text-size-body{font-size:1.3rem}:host .novo-select-trigger.text-size-xs{font-size:1rem}:host .novo-select-trigger.text-size-sm{font-size:1.2rem}:host .novo-select-trigger.text-size-md{font-size:1.3rem}:host .novo-select-trigger.text-size-lg{font-size:1.6rem}:host .novo-select-trigger.text-size-xl{font-size:2rem}:host .novo-select-trigger.text-size-2xl{font-size:2.6rem}:host .novo-select-trigger.text-size-3xl{font-size:3.2rem}:host .novo-select-trigger.text-size-smaller{font-size:.8em}:host .novo-select-trigger.text-size-larger{font-size:1.2em}:host .novo-select-trigger.text-color-black{color:#000}:host .novo-select-trigger.text-color-white{color:#fff}:host .novo-select-trigger.text-color-gray{color:#9e9e9e}:host .novo-select-trigger.text-color-grey{color:#9e9e9e}:host .novo-select-trigger.text-color-offWhite{color:#f7f7f7}:host .novo-select-trigger.text-color-bright{color:#f7f7f7}:host .novo-select-trigger.text-color-light{color:#dbdbdb}:host .novo-select-trigger.text-color-neutral{color:#4f5361}:host .novo-select-trigger.text-color-dark{color:#3d464d}:host .novo-select-trigger.text-color-orange{color:#ff6900}:host .novo-select-trigger.text-color-navigation{color:#202945}:host .novo-select-trigger.text-color-skyBlue{color:#009bdf}:host .novo-select-trigger.text-color-steel{color:#5b6770}:host .novo-select-trigger.text-color-metal{color:#637893}:host .novo-select-trigger.text-color-sand{color:#f4f4f4}:host .novo-select-trigger.text-color-silver{color:#e2e2e2}:host .novo-select-trigger.text-color-stone{color:#bebebe}:host .novo-select-trigger.text-color-ash{color:#a0a0a0}:host .novo-select-trigger.text-color-slate{color:#707070}:host .novo-select-trigger.text-color-onyx{color:#526980}:host .novo-select-trigger.text-color-charcoal{color:#282828}:host .novo-select-trigger.text-color-moonlight{color:#1a242f}:host .novo-select-trigger.text-color-midnight{color:#202945}:host .novo-select-trigger.text-color-darkness{color:#161f27}:host .novo-select-trigger.text-color-navy{color:#0d2d42}:host .novo-select-trigger.text-color-aqua{color:#3bafda}:host .novo-select-trigger.text-color-ocean{color:#4a89dc}:host .novo-select-trigger.text-color-mint{color:#37bc9b}:host .novo-select-trigger.text-color-grass{color:#8cc152}:host .novo-select-trigger.text-color-sunflower{color:#f6b042}:host .novo-select-trigger.text-color-bittersweet{color:#eb6845}:host .novo-select-trigger.text-color-grapefruit{color:#da4453}:host .novo-select-trigger.text-color-carnation{color:#d770ad}:host .novo-select-trigger.text-color-lavender{color:#967adc}:host .novo-select-trigger.text-color-mountain{color:#9678b6}:host .novo-select-trigger.text-color-info{color:#4a89dc}:host .novo-select-trigger.text-color-positive{color:#4a89dc}:host .novo-select-trigger.text-color-success{color:#8cc152}:host .novo-select-trigger.text-color-negative{color:#da4453}:host .novo-select-trigger.text-color-danger{color:#da4453}:host .novo-select-trigger.text-color-error{color:#da4453}:host .novo-select-trigger.text-color-warning{color:#f6b042}:host .novo-select-trigger.text-color-empty{color:#cccdcc}:host .novo-select-trigger.text-color-disabled{color:#bebebe}:host .novo-select-trigger.text-color-background{color:#f7f7f7}:host .novo-select-trigger.text-color-backgroundDark{color:#e2e2e2}:host .novo-select-trigger.text-color-presentation{color:#5b6770}:host .novo-select-trigger.text-color-bullhorn{color:#ff6900}:host .novo-select-trigger.text-color-pulse{color:#3bafda}:host .novo-select-trigger.text-color-company{color:#39d}:host .novo-select-trigger.text-color-candidate{color:#4b7}:host .novo-select-trigger.text-color-lead{color:#a69}:host .novo-select-trigger.text-color-contact{color:#fa4}:host .novo-select-trigger.text-color-clientcontact{color:#fa4}:host .novo-select-trigger.text-color-opportunity{color:#625}:host .novo-select-trigger.text-color-job{color:#b56}:host .novo-select-trigger.text-color-joborder{color:#b56}:host .novo-select-trigger.text-color-submission{color:#a9adbb}:host .novo-select-trigger.text-color-sendout{color:#747884}:host .novo-select-trigger.text-color-placement{color:#0b344f}:host .novo-select-trigger.text-color-note{color:#747884}:host .novo-select-trigger.text-color-contract{color:#454ea0}:host .novo-select-trigger.text-color-jobCode{color:#696d79}:host .novo-select-trigger.text-color-earnCode{color:#696d79}:host .novo-select-trigger.text-color-invoiceStatement{color:#696d79}:host .novo-select-trigger.text-color-billableCharge{color:#696d79}:host .novo-select-trigger.text-color-payableCharge{color:#696d79}:host .novo-select-trigger.text-color-user{color:#696d79}:host .novo-select-trigger.text-color-corporateUser{color:#696d79}:host .novo-select-trigger.text-color-distributionList{color:#696d79}:host .novo-select-trigger.text-color-credential{color:#696d79}:host .novo-select-trigger.text-color-person{color:#696d79}:host .novo-select-trigger.margin-before{margin-top:.4rem}:host .novo-select-trigger.margin-after{margin-bottom:.8rem}:host .novo-select-trigger.text-length-small{max-width:40ch}:host .novo-select-trigger.text-length-medium{max-width:55ch}:host .novo-select-trigger.text-length-large{max-width:70ch}:host .novo-select-trigger.text-weight-hairline{font-weight:100}:host .novo-select-trigger.text-weight-thin{font-weight:200}:host .novo-select-trigger.text-weight-light{font-weight:300}:host .novo-select-trigger.text-weight-normal{font-weight:400}:host .novo-select-trigger.text-weight-medium{font-weight:500}:host .novo-select-trigger.text-weight-semibold{font-weight:600}:host .novo-select-trigger.text-weight-bold{font-weight:700}:host .novo-select-trigger.text-weight-extrabold{font-weight:800}:host .novo-select-trigger.text-weight-heavy{font-weight:900}:host .novo-select-trigger.text-weight-lighter{font-weight:lighter}:host .novo-select-trigger.text-weight-bolder{font-weight:bolder}:host .novo-select-trigger.empty{color:#a9a9a9}:host .novo-select-trigger:focus,:host .novo-select-trigger:hover{outline:none}:host .novo-select-trigger:hover{border-bottom:1px solid #5f6d78}:host .novo-select-trigger:focus{border-bottom:1px solid #4a89dc}:host .novo-select-trigger:focus i{color:#000000ba}:host .novo-select-trigger .novo-select-placeholder{color:var(--form-placeholder)}:host .novo-select-trigger i{font-size:.8em;color:#3d464d;position:absolute;right:0}:host[disabled],:host.novo-select-disabled{pointer-events:none}:host[disabled] div[type=button],:host.novo-select-disabled div[type=button]{color:#9e9e9e}:host[disabled] i,:host.novo-select-disabled i{color:#9e9e9e!important}:host[disabled] .novo-select-trigger,:host.novo-select-disabled .novo-select-trigger{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host[disabled] .novo-select-trigger:hover,:host.novo-select-disabled .novo-select-trigger:hover{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}.novo-select-list{background-color:var(--background-bright);cursor:default;list-style:none;overflow:auto;margin:0;padding:0;width:100%;box-shadow:0 -1px 3px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;font-size:1rem;z-index:-1;opacity:0}.novo-select-list.active{z-index:1000;max-height:219px;min-width:200px;width:100%;max-width:800px;width:inherit;overflow:auto;opacity:1}.novo-select-list .select-item{height:35px}.select-header button{text-transform:uppercase}.select-header button.header{color:#4a89dc;position:relative;text-align:left;cursor:pointer;height:3rem;margin:0;padding:.5rem 1.6rem 0 0;box-sizing:border-box;border:none;display:block;align-items:center;justify-content:space-between;font-size:1rem}.select-header button.header:focus,.select-header button.header:hover{color:#4f4f4f}.select-header button.header i{color:#4a89dc;padding-right:10px}.select-header button.header span{text-align:left}.select-header div.active{width:100%;float:right;padding:5px}.select-header div.active footer{float:right}.select-header div.active button{display:inline-block;border:none;float:left;width:auto;font-weight:500;font-size:.8rem;color:#acacac}.select-header div.active button:hover{color:#868686}.select-header div.active button.primary{color:#4a89dc}.select-header div.active button.primary:hover{color:#2363b6}.select-header div.active input{display:flex;justify-content:space-between;align-items:center;background-color:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.12);color:#000000ba;height:2.05rem;position:relative;text-align:left;text-shadow:none;width:100%;z-index:1;cursor:pointer;text-transform:none;padding-top:10px;font-size:1rem}.select-header div.active input.empty{color:#a9a9a9}.select-header div.active input:focus{outline:none}.select-header div.active input:hover{border-bottom:1px solid #4a89dc}.select-header div.active input.invalid{border-bottom:1px solid #da4453}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NovoLabelService }, { type: i0.ChangeDetectorRef }, { type: i2.FocusMonitor }, { type: i0.NgZone }, { type: i3.ErrorStateMatcher }, { type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {

package/fesm2022/novo-elements-elements-field.mjs

@@ -185,7 +185,7 @@ class NovoFieldElement {
         return !!this._labelElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NovoFieldElement, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NovoFieldElement, selector: "novo-field", inputs: { layout: "layout", appearance: "appearance", customOverlayOrigin: "customOverlayOrigin", width: "width" }, outputs: { valueChanges: "valueChanges", stateChanges: "stateChanges" }, host: { listeners: { "click": "_handleContainerClick($event)" }, properties: { "class.novo-field-layout-horizontal": "layout==\"horizontal\"", "class.novo-field-layout-vertical": "layout==\"vertical\"", "class.novo-field-appearance-standard": "appearance == \"standard\"", "class.novo-field-appearance-fill": "appearance == \"fill\"", "class.novo-field-appearance-outline": "appearance == \"outline\"", "class.novo-field-appearance-list": "appearance == \"list\"", "class.novo-field-appearance-underlined": "_isUnderlinedInput()", "class.novo-field-invalid": "_control.errorState", "class.novo-field-has-label": "_hasLabel()", "class.novo-field-no-label": "!_hasLabel()", "class.novo-field-disabled": "_control.disabled", "class.novo-field-autofilled": "_control.autofilled", "class.novo-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")" }, classAttribute: "novo-field" }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], queries: [{ propertyName: "_labelElement", first: true, predicate: NovoLabel, descendants: true }, { propertyName: "_control", first: true, predicate: NovoFieldControl, descendants: true }, { propertyName: "_hintElements", predicate: NovoHintElement }, { propertyName: "_errorElements", predicate: NovoErrorElement }, { propertyName: "_prefixElements", predicate: NovoFieldPrefixDirective }, { propertyName: "_suffixElements", predicate: NovoFieldSuffixDirective }, { propertyName: "_overlayElements", predicate: NOVO_OVERLAY_CONTAINER }], viewQueries: [{ propertyName: "_inputContainerRef", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NovoFieldElement, selector: "novo-field", inputs: { layout: "layout", appearance: "appearance", customOverlayOrigin: "customOverlayOrigin", width: "width" }, outputs: { valueChanges: "valueChanges", stateChanges: "stateChanges" }, host: { listeners: { "click": "_handleContainerClick($event)" }, properties: { "class.novo-field-layout-horizontal": "layout==\"horizontal\"", "class.novo-field-layout-vertical": "layout==\"vertical\"", "class.novo-field-appearance-standard": "appearance == \"standard\"", "class.novo-field-appearance-fill": "appearance == \"fill\"", "class.novo-field-appearance-outline": "appearance == \"outline\"", "class.novo-field-appearance-list": "appearance == \"list\"", "class.novo-field-appearance-underlined": "_isUnderlinedInput()", "class.novo-field-invalid": "_control.errorState", "class.novo-field-has-label": "_hasLabel()", "class.novo-field-no-label": "!_hasLabel()", "class.novo-field-disabled": "_control.disabled", "class.novo-field-autofilled": "_control.autofilled", "class.novo-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")" }, classAttribute: "novo-field" }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], queries: [{ propertyName: "_labelElement", first: true, predicate: NovoLabel, descendants: true }, { propertyName: "_control", first: true, predicate: NovoFieldControl, descendants: true }, { propertyName: "_hintElements", predicate: NovoHintElement }, { propertyName: "_errorElements", predicate: NovoErrorElement }, { propertyName: "_prefixElements", predicate: NovoFieldPrefixDirective }, { propertyName: "_suffixElements", predicate: NovoFieldSuffixDirective }, { propertyName: "_overlayElements", predicate: NOVO_OVERLAY_CONTAINER }], viewQueries: [{ propertyName: "_inputContainerRef", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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-standard.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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-fill.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NovoFieldElement, decorators: [{
             type: Component,
@@ -214,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         '[class.ng-valid]': '_shouldForward("valid")',
                         '[class.ng-invalid]': '_shouldForward("invalid")',
                         '[class.ng-pending]': '_shouldForward("pending")',
-                    }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"] }]
+                    }, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], template: "<div class=\"novo-field-label\">\n  <ng-content select=\"novo-label\"></ng-content>\n</div>\n<div class=\"novo-field-input\" [style.width]=\"width\" #inputContainer>\n  <div class=\"novo-field-prefix\">\n    <ng-content select=\"[novoPrefix]\"></ng-content>\n  </div>\n  <div class=\"novo-field-infix\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"novo-field-suffix\">\n    <ng-content select=\"[novoSuffix]\"></ng-content>\n  </div>\n</div>\n<div class=\"novo-field-messages\" [ngSwitch]=\"_getDisplayedMessages()\">\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'error'\">\n    <ng-content select=\"novo-error\"></ng-content>\n  </div>\n  <div class=\"novo-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n    <ng-content select=\"novo-hint\"></ng-content>\n    <ng-content select=\"novo-hint[align=end]\"></ng-content>\n  </div>\n</div>", styles: [":host{display:grid;position:relative}:host.novo-field-layout-horizontal{grid-gap:0rem 1rem;grid-template-columns:150px minmax(min-content,max-content);grid-template-areas:\"label input\" \". messages\"}:host.novo-field-layout-vertical{grid-template-columns:minmax(min-content,100%);grid-template-rows:repeat(3,minmax(min-content,max-content));grid-template-areas:\"label\" \"input\" \"messages\";width:max-content}:host .novo-field-label{grid-area:label;display:grid;align-items:center}:host.novo-field-type-color .novo-field-input::ng-deep .novo-input-element{padding:0}:host.ng-invalid.ng-dirty.ng-touched .novo-field-input{border-bottom:1px solid #da4453!important}:host .novo-field-input{grid-area:input;display:grid;align-items:center;grid-template-columns:minmax(auto,max-content) 1fr minmax(auto,max-content);flex:1 1 100%;min-height:2.9rem}:host .novo-field-input::ng-deep .novo-input-element{display:inline;font-weight:400;color:inherit;font-size:var(--font-size-text);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;border:none;background-image:none;background-color:transparent;box-shadow:none;padding:.4rem .2rem 0rem;border-bottom:none!important}:host .novo-field-input::ng-deep .novo-input-element.text-capitalize{text-transform:capitalize}:host .novo-field-input::ng-deep .novo-input-element.text-uppercase{text-transform:uppercase}:host .novo-field-input::ng-deep .novo-input-element.text-nowrap{white-space:nowrap}:host .novo-field-input::ng-deep .novo-input-element.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .novo-field-input::ng-deep .novo-input-element.text-size-default{font-size:inherit}:host .novo-field-input::ng-deep .novo-input-element.text-size-body{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xs{font-size:1rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-sm{font-size:1.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-md{font-size:1.3rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-lg{font-size:1.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-xl{font-size:2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-2xl{font-size:2.6rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-3xl{font-size:3.2rem}:host .novo-field-input::ng-deep .novo-input-element.text-size-smaller{font-size:.8em}:host .novo-field-input::ng-deep .novo-input-element.text-size-larger{font-size:1.2em}:host .novo-field-input::ng-deep .novo-input-element.text-color-black{color:#000}:host .novo-field-input::ng-deep .novo-input-element.text-color-white{color:#fff}:host .novo-field-input::ng-deep .novo-input-element.text-color-gray{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-grey{color:#9e9e9e}:host .novo-field-input::ng-deep .novo-input-element.text-color-offWhite{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-bright{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-light{color:#dbdbdb}:host .novo-field-input::ng-deep .novo-input-element.text-color-neutral{color:#4f5361}:host .novo-field-input::ng-deep .novo-input-element.text-color-dark{color:#3d464d}:host .novo-field-input::ng-deep .novo-input-element.text-color-orange{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-navigation{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-skyBlue{color:#009bdf}:host .novo-field-input::ng-deep .novo-input-element.text-color-steel{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-metal{color:#637893}:host .novo-field-input::ng-deep .novo-input-element.text-color-sand{color:#f4f4f4}:host .novo-field-input::ng-deep .novo-input-element.text-color-silver{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-stone{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-ash{color:#a0a0a0}:host .novo-field-input::ng-deep .novo-input-element.text-color-slate{color:#707070}:host .novo-field-input::ng-deep .novo-input-element.text-color-onyx{color:#526980}:host .novo-field-input::ng-deep .novo-input-element.text-color-charcoal{color:#282828}:host .novo-field-input::ng-deep .novo-input-element.text-color-moonlight{color:#1a242f}:host .novo-field-input::ng-deep .novo-input-element.text-color-midnight{color:#202945}:host .novo-field-input::ng-deep .novo-input-element.text-color-darkness{color:#161f27}:host .novo-field-input::ng-deep .novo-input-element.text-color-navy{color:#0d2d42}:host .novo-field-input::ng-deep .novo-input-element.text-color-aqua{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-ocean{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mint{color:#37bc9b}:host .novo-field-input::ng-deep .novo-input-element.text-color-grass{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-sunflower{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-bittersweet{color:#eb6845}:host .novo-field-input::ng-deep .novo-input-element.text-color-grapefruit{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-carnation{color:#d770ad}:host .novo-field-input::ng-deep .novo-input-element.text-color-lavender{color:#967adc}:host .novo-field-input::ng-deep .novo-input-element.text-color-mountain{color:#9678b6}:host .novo-field-input::ng-deep .novo-input-element.text-color-info{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-positive{color:#4a89dc}:host .novo-field-input::ng-deep .novo-input-element.text-color-success{color:#8cc152}:host .novo-field-input::ng-deep .novo-input-element.text-color-negative{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-danger{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-error{color:#da4453}:host .novo-field-input::ng-deep .novo-input-element.text-color-warning{color:#f6b042}:host .novo-field-input::ng-deep .novo-input-element.text-color-empty{color:#cccdcc}:host .novo-field-input::ng-deep .novo-input-element.text-color-disabled{color:#bebebe}:host .novo-field-input::ng-deep .novo-input-element.text-color-background{color:#f7f7f7}:host .novo-field-input::ng-deep .novo-input-element.text-color-backgroundDark{color:#e2e2e2}:host .novo-field-input::ng-deep .novo-input-element.text-color-presentation{color:#5b6770}:host .novo-field-input::ng-deep .novo-input-element.text-color-bullhorn{color:#ff6900}:host .novo-field-input::ng-deep .novo-input-element.text-color-pulse{color:#3bafda}:host .novo-field-input::ng-deep .novo-input-element.text-color-company{color:#39d}:host .novo-field-input::ng-deep .novo-input-element.text-color-candidate{color:#4b7}:host .novo-field-input::ng-deep .novo-input-element.text-color-lead{color:#a69}:host .novo-field-input::ng-deep .novo-input-element.text-color-contact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-clientcontact{color:#fa4}:host .novo-field-input::ng-deep .novo-input-element.text-color-opportunity{color:#625}:host .novo-field-input::ng-deep .novo-input-element.text-color-job{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-joborder{color:#b56}:host .novo-field-input::ng-deep .novo-input-element.text-color-submission{color:#a9adbb}:host .novo-field-input::ng-deep .novo-input-element.text-color-sendout{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-placement{color:#0b344f}:host .novo-field-input::ng-deep .novo-input-element.text-color-note{color:#747884}:host .novo-field-input::ng-deep .novo-input-element.text-color-contract{color:#454ea0}:host .novo-field-input::ng-deep .novo-input-element.text-color-jobCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-earnCode{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-invoiceStatement{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-billableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-payableCharge{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-user{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-corporateUser{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-distributionList{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-credential{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.text-color-person{color:#696d79}:host .novo-field-input::ng-deep .novo-input-element.margin-before{margin-top:.4rem}:host .novo-field-input::ng-deep .novo-input-element.margin-after{margin-bottom:.8rem}:host .novo-field-input::ng-deep .novo-input-element.text-length-small{max-width:40ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-medium{max-width:55ch}:host .novo-field-input::ng-deep .novo-input-element.text-length-large{max-width:70ch}:host .novo-field-input::ng-deep .novo-input-element.text-weight-hairline{font-weight:100}:host .novo-field-input::ng-deep .novo-input-element.text-weight-thin{font-weight:200}:host .novo-field-input::ng-deep .novo-input-element.text-weight-light{font-weight:300}:host .novo-field-input::ng-deep .novo-input-element.text-weight-normal{font-weight:400}:host .novo-field-input::ng-deep .novo-input-element.text-weight-medium{font-weight:500}:host .novo-field-input::ng-deep .novo-input-element.text-weight-semibold{font-weight:600}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bold{font-weight:700}:host .novo-field-input::ng-deep .novo-input-element.text-weight-extrabold{font-weight:800}:host .novo-field-input::ng-deep .novo-input-element.text-weight-heavy{font-weight:900}:host .novo-field-input::ng-deep .novo-input-element.text-weight-lighter{font-weight:lighter}:host .novo-field-input::ng-deep .novo-input-element.text-weight-bolder{font-weight:bolder}:host .novo-field-input::ng-deep .novo-input-element:focus{outline:none}:host .novo-field-input::ng-deep .novo-radio-group{padding:.5rem 0}:host .novo-field-input .novo-field-prefix{display:flex;align-items:center}:host .novo-field-input .novo-field-infix{display:flex;align-items:center;align-self:flex-end}:host .novo-field-input .novo-field-infix select,:host .novo-field-input .novo-field-infix::ng-deep .novo-input-element{width:100%}:host .novo-field-input .novo-field-suffix{display:flex;align-items:center}:host .novo-field-messages{grid-area:messages;display:grid}:host .novo-field-hint-wrapper{display:flex;flex-direction:column}:host::ng-deep .novo-date-range-format{min-width:22rem}\n", ":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-standard.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-standard.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":host.novo-field-appearance-fill.novo-field-layout-horizontal .novo-field-input{background:var(--background-main)}: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-top:.5em;padding-left:.5em;padding-right:.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-fill.novo-field-appearance-underlined.novo-field-disabled .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined.novo-field-disabled:not(.novo-focused):hover .novo-field-input{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}:host.novo-field-appearance-fill.novo-field-appearance-underlined .novo-field-input:disabled{color:#9e9e9e!important;border-bottom:1px dashed #9e9e9e!important}\n", ":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-top:-1.5rem;margin-left:.5rem;width:max-content;padding:.5rem}: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}\n", ":host.novo-field-appearance-list.novo-field-layout-horizontal{border-bottom:1px solid #f7f7f7!important;padding:.5rem 1.2rem;min-height:4.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{grid-template-columns:0px minmax(300px,600px);gap:0}:host.novo-field-appearance-list.novo-field-layout-horizontal.novo-field-appearance-underlined:not(.novo-focused):hover .novo-field-input{background:#4a89dc26}: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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _inputContainerRef: [{
                 type: ViewChild,
                 args: ['inputContainer']