novo-elements
Version:
219 lines (215 loc) • 124 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Directive, Input, InjectionToken, EventEmitter, HostListener, Output, ContentChild, ContentChildren, ViewChild, ChangeDetectionStrategy, HostBinding, forwardRef, Optional, Self, Inject, Attribute, ViewEncapsulation, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import { Subscription, Subject, fromEvent } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import * as i2$1 from 'novo-elements/elements/common';
import { NovoLabel, NOVO_OVERLAY_CONTAINER, NovoOverlayTemplateComponent, NovoOverlayModule, NovoOptionModule, NovoCommonModule } from 'novo-elements/elements/common';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$4 from 'novo-elements/elements/button';
import { NovoButtonModule } from 'novo-elements/elements/button';
import { BooleanInput, DateUtil } from 'novo-elements/utils';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { IMaskDirective } from 'angular-imask';
import { isValid } from 'date-fns';
import { MaskedRange, MaskedEnum } from 'imask';
import * as i1$2 from 'novo-elements/services';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i1$3 from '@angular/cdk/platform';
import { getSupportedInputTypes } from '@angular/cdk/platform';
import * as i3 from '@angular/cdk/text-field';
// NG2
class NovoErrorElement {
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoErrorElement, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoErrorElement, isStandalone: false, selector: "novo-error", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:flex;padding-bottom:5px;flex:1;font-size:.8em;color:#da4453}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoErrorElement, decorators: [{
type: Component,
args: [{ selector: 'novo-error', standalone: false, template: "<ng-content></ng-content>", styles: [":host{display:flex;padding-bottom:5px;flex:1;font-size:.8em;color:#da4453}\n"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
/** An interface which allows a control to work inside of a `NovoField`. */
class NovoFieldControl {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoFieldControl, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldControl, decorators: [{
type: Directive
}] });
// NG2
let nextUniqueId$1 = 0;
class NovoHintElement {
constructor() {
/** Whether to align the hint label at the start or end of the line. */
this.align = 'start';
/** Unique ID for the hint. Used for the aria-describedby on the form field control. */
this.id = `novo-hint-${nextUniqueId$1++}`;
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoHintElement, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoHintElement, isStandalone: false, selector: "novo-hint", inputs: { align: "align", id: "id" }, host: { properties: { "class.novo-field-hint-end": "align === \"end\"", "attr.id": "id", "attr.align": "null" }, classAttribute: "novo-hint" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:var(--font-size-caption);font-weight:400;line-height:1.375;color:var(--text-muted);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;flex:1 0 auto;width:max-content;color:#9e9e9e;padding-bottom:.4rem;padding-top:.4rem}:host.text-capitalize{text-transform:capitalize}:host.text-uppercase{text-transform:uppercase}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray{color:#9e9e9e}:host.text-color-grey{color:#9e9e9e}:host.text-color-offWhite{color:#f7f7f7}:host.text-color-bright{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info{color:#4a89dc}:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-negative{color:#da4453}:host.text-color-danger{color:#da4453}:host.text-color-error{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-clientcontact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-joborder{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-task{color:#4f5361}:host.text-color-jobCode{color:#696d79}:host.text-color-earnCode{color:#696d79}:host.text-color-invoiceStatement{color:#696d79}:host.text-color-billableCharge{color:#696d79}:host.text-color-payableCharge{color:#696d79}:host.text-color-user{color:#696d79}:host.text-color-corporateUser{color:#696d79}:host.text-color-distributionList{color:#696d79}:host.text-color-credential{color:#696d79}:host.text-color-person{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host.novo-field-hint-end{order:1;text-align:right;align-content:end;justify-content:flex-end}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoHintElement, decorators: [{
type: Component,
args: [{ selector: 'novo-hint', host: {
class: 'novo-hint',
'[class.novo-field-hint-end]': 'align === "end"',
'[attr.id]': 'id',
// Remove align attribute to prevent it from interfering with layout.
'[attr.align]': 'null',
}, standalone: false, template: "<ng-content></ng-content>", styles: [":host{font-size:var(--font-size-caption);font-weight:400;line-height:1.375;color:var(--text-muted);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;display:flex;flex:1 0 auto;width:max-content;color:#9e9e9e;padding-bottom:.4rem;padding-top:.4rem}:host.text-capitalize{text-transform:capitalize}:host.text-uppercase{text-transform:uppercase}:host.text-nowrap{white-space:nowrap}:host.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host.text-size-default{font-size:inherit}:host.text-size-body{font-size:1.3rem}:host.text-size-xs{font-size:1rem}:host.text-size-sm{font-size:1.2rem}:host.text-size-md{font-size:1.3rem}:host.text-size-lg{font-size:1.6rem}:host.text-size-xl{font-size:2rem}:host.text-size-2xl{font-size:2.6rem}:host.text-size-3xl{font-size:3.2rem}:host.text-size-smaller{font-size:.8em}:host.text-size-larger{font-size:1.2em}:host.text-color-black{color:#000}:host.text-color-white{color:#fff}:host.text-color-gray{color:#9e9e9e}:host.text-color-grey{color:#9e9e9e}:host.text-color-offWhite{color:#f7f7f7}:host.text-color-bright{color:#f7f7f7}:host.text-color-light{color:#dbdbdb}:host.text-color-neutral{color:#4f5361}:host.text-color-dark{color:#3d464d}:host.text-color-orange{color:#ff6900}:host.text-color-navigation{color:#202945}:host.text-color-skyBlue{color:#009bdf}:host.text-color-steel{color:#5b6770}:host.text-color-metal{color:#637893}:host.text-color-sand{color:#f4f4f4}:host.text-color-silver{color:#e2e2e2}:host.text-color-stone{color:#bebebe}:host.text-color-ash{color:#a0a0a0}:host.text-color-slate{color:#707070}:host.text-color-onyx{color:#526980}:host.text-color-charcoal{color:#282828}:host.text-color-moonlight{color:#1a242f}:host.text-color-midnight{color:#202945}:host.text-color-darkness{color:#161f27}:host.text-color-navy{color:#0d2d42}:host.text-color-aqua{color:#3bafda}:host.text-color-ocean{color:#4a89dc}:host.text-color-mint{color:#37bc9b}:host.text-color-grass{color:#8cc152}:host.text-color-sunflower{color:#f6b042}:host.text-color-bittersweet{color:#eb6845}:host.text-color-grapefruit{color:#da4453}:host.text-color-carnation{color:#d770ad}:host.text-color-lavender{color:#967adc}:host.text-color-mountain{color:#9678b6}:host.text-color-info{color:#4a89dc}:host.text-color-positive{color:#4a89dc}:host.text-color-success{color:#8cc152}:host.text-color-negative{color:#da4453}:host.text-color-danger{color:#da4453}:host.text-color-error{color:#da4453}:host.text-color-warning{color:#f6b042}:host.text-color-empty{color:#cccdcc}:host.text-color-disabled{color:#bebebe}:host.text-color-background{color:#f7f7f7}:host.text-color-backgroundDark{color:#e2e2e2}:host.text-color-presentation{color:#5b6770}:host.text-color-bullhorn{color:#ff6900}:host.text-color-pulse{color:#3bafda}:host.text-color-company{color:#39d}:host.text-color-candidate{color:#4b7}:host.text-color-lead{color:#a69}:host.text-color-contact{color:#fa4}:host.text-color-clientcontact{color:#fa4}:host.text-color-opportunity{color:#625}:host.text-color-job{color:#b56}:host.text-color-joborder{color:#b56}:host.text-color-submission{color:#a9adbb}:host.text-color-sendout{color:#747884}:host.text-color-placement{color:#0b344f}:host.text-color-note{color:#747884}:host.text-color-contract{color:#454ea0}:host.text-color-task{color:#4f5361}:host.text-color-jobCode{color:#696d79}:host.text-color-earnCode{color:#696d79}:host.text-color-invoiceStatement{color:#696d79}:host.text-color-billableCharge{color:#696d79}:host.text-color-payableCharge{color:#696d79}:host.text-color-user{color:#696d79}:host.text-color-corporateUser{color:#696d79}:host.text-color-distributionList{color:#696d79}:host.text-color-credential{color:#696d79}:host.text-color-person{color:#696d79}:host.margin-before{margin-top:.4rem}:host.margin-after{margin-bottom:.8rem}:host.text-length-small{max-width:40ch}:host.text-length-medium{max-width:55ch}:host.text-length-large{max-width:70ch}:host.text-weight-hairline{font-weight:100}:host.text-weight-thin{font-weight:200}:host.text-weight-light{font-weight:300}:host.text-weight-normal{font-weight:400}:host.text-weight-medium{font-weight:500}:host.text-weight-semibold{font-weight:600}:host.text-weight-bold{font-weight:700}:host.text-weight-extrabold{font-weight:800}:host.text-weight-heavy{font-weight:900}:host.text-weight-lighter{font-weight:lighter}:host.text-weight-bolder{font-weight:bolder}:host.novo-field-hint-end{order:1;text-align:right;align-content:end;justify-content:flex-end}\n"] }]
}], propDecorators: { align: [{
type: Input
}], id: [{
type: Input
}] } });
// NG2
class NovoFieldPrefixDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoFieldPrefixDirective, isStandalone: false, selector: "[novoPrefix]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldPrefixDirective, decorators: [{
type: Directive,
args: [{
selector: '[novoPrefix]',
standalone: false,
}]
}] });
class NovoFieldSuffixDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoFieldSuffixDirective, isStandalone: false, selector: "[novoSuffix]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFieldSuffixDirective, decorators: [{
type: Directive,
args: [{
selector: '[novoSuffix]',
standalone: false,
}]
}] });
const NOVO_INPUT_UNDERLINED_TYPES = [
'text',
'date',
'time',
'datetime-local',
'password',
'email',
'tel',
'select',
'textarea',
'number',
'novo-chip-list',
'chip-list',
];
const NOVO_FORM_FIELD = new InjectionToken('NovoFormField');
class NovoFieldElement {
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._labelClicks = Subscription.EMPTY;
this.layout = 'vertical';
this.appearance = 'standard';
this._destroyed = new Subject();
this.valueChanges = new EventEmitter();
this.stateChanges = new EventEmitter();
}
/**
* Gets an ElementRef for the element that a overlay attached to the form-field should be
* positioned relative to.
*/
getConnectedOverlayOrigin() {
return this.customOverlayOrigin || this._inputContainerRef || this._elementRef;
}
ngAfterContentInit() {
this._validateControlChild();
const control = this._control;
if (control.controlType) {
this._elementRef.nativeElement.classList.add(`novo-field-type-${control.controlType}`);
this._elementRef.nativeElement.setAttribute('data-control-type', control.controlType);
}
if (control.id) {
this._elementRef.nativeElement.setAttribute('data-control-id', control.id);
}
if (control.ngControl?.name) {
this._elementRef.nativeElement.setAttribute('data-control-key', control.ngControl.name);
}
// Subscribe to changes in the child control state in order to update the form field UI.
control.stateChanges.pipe(startWith(null)).subscribe(() => {
this.stateChanges.next();
this._changeDetectorRef.markForCheck();
});
// Run change detection if the value changes.
if (control.ngControl && control.ngControl.valueChanges) {
control.ngControl.valueChanges.pipe(takeUntil(this._destroyed)).subscribe((v) => {
this.valueChanges.next(v);
this._changeDetectorRef.markForCheck();
});
}
if (this._hasLabel()) {
this._labelClicks = fromEvent(this._labelElement.nativeElement, 'click').subscribe(() => this._control.focus());
}
}
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
this._labelClicks.unsubscribe();
}
/** Throws an error if the form field's control is missing. */
_validateControlChild() {
if (!this._control) {
throw new Error('Missing Novo Control');
}
}
blurEventIsInField(blurEvt) {
return this._elementRef.nativeElement.contains(blurEvt.relatedTarget) || this._overlayElements.some(hasOverlay => hasOverlay.overlay?.isBlurRecipient(blurEvt));
}
_handleContainerClick(evt) {
this._control.onContainerClick(evt);
}
_isUnderlinedInput() {
return NOVO_INPUT_UNDERLINED_TYPES.includes(this._control.controlType);
}
/** Determines whether to display hints or errors. */
_getDisplayedMessages() {
return this._errorElements && this._errorElements.length > 0 && this._control.errorState ? 'error' : 'hint';
}
/** Determines whether a class from the NgControl should be forwarded to the host element. */
_shouldForward(prop) {
const ngControl = this._control ? this._control.ngControl : null;
return ngControl && ngControl[prop];
}
_hasLabel() {
return !!this._labelElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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: "20.3.19", type: NovoFieldElement, isStandalone: false, 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-task{color:#4f5361}: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 rgb(175.4891304348,184.7826086957,192.0108695652)!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 rgb(175.4891304348,184.7826086957,192.0108695652)!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 rgb(175.4891304348,184.7826086957,192.0108695652)!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: "20.3.19", ngImport: i0, type: NovoFieldElement, decorators: [{
type: Component,
args: [{ selector: 'novo-field', changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'novo-field',
'[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")',
}, providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }], standalone: false, 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-task{color:#4f5361}: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-eleme