novo-elements
Version:
339 lines (338 loc) • 163 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i1 from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { InjectionToken, Directive, Inject, EventEmitter, DOCUMENT, Output, Input, ContentChild, Optional, Attribute, ViewEncapsulation, Component, ContentChildren, Self, ChangeDetectionStrategy, forwardRef, Pipe, inject, ChangeDetectorRef, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { Subject, merge, ReplaySubject } from 'rxjs';
import { take, takeUntil, startWith } from 'rxjs/operators';
import * as i3 from 'novo-elements/elements/common';
import { mixinSize, mixinTabIndex, mixinColor, mixinErrorState, NOVO_OPTION_PARENT_COMPONENT, NovoCommonModule, ErrorStateMatcher } from 'novo-elements/elements/common';
import { hasModifierKey } from '@angular/cdk/keycodes';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { FocusKeyManager } from '@angular/cdk/a11y';
import * as i1$1 from '@angular/cdk/bidi';
import { SelectionModel } from '@angular/cdk/collections';
import * as i6 from 'novo-elements/elements/field';
import { NovoFieldControl, NovoFieldElement, NovoFieldModule } from 'novo-elements/elements/field';
import * as i1$2 from 'novo-elements/services';
import { Helpers } from 'novo-elements/utils';
import * as i4 from 'novo-elements/elements/picker';
import { NovoPickerModule } from 'novo-elements/elements/picker';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from 'novo-elements/elements/icon';
import { NovoIconModule } from 'novo-elements/elements/icon';
import * as i4$1 from 'novo-elements/elements/checkbox';
import { NovoCheckboxModule } from 'novo-elements/elements/checkbox';
const REMOVABLE_REF = new InjectionToken('REMOVABLE_REF');
/** Event object emitted by NovoChip when selected or deselected. */
class NovoChipSelectionChange {
constructor(
/** Reference to the chip that emitted the event. */
source,
/** Whether the chip that emitted the event is selected. */
selected,
/** Whether the selection change was a result of a user interaction. */
isUserInput = false) {
this.source = source;
this.selected = selected;
this.isUserInput = isUserInput;
}
}
// Boilerplate for applying mixins to NovoChipElement.
/** @docs-private */
class NovoChipBase {
// abstract disabled: boolean;
constructor(_elementRef) {
this._elementRef = _elementRef;
}
}
const NovoChipMixinBase = mixinSize(mixinTabIndex(mixinColor(NovoChipBase, null), -1), 'md');
/**
* Dummy directive to add CSS class to chip avatar.
* @docs-private
*/
class NovoChipAvatar {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoChipAvatar, isStandalone: false, selector: "novo-chip-avatar, [novoChipAvatar]", host: { classAttribute: "novo-chip-avatar" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipAvatar, decorators: [{
type: Directive,
args: [{
selector: 'novo-chip-avatar, [novoChipAvatar]',
host: { class: 'novo-chip-avatar' },
standalone: false,
}]
}] });
/**
* Applies proper (click) support and adds styling for use with Bullhorn's "x" icon *
* Example:
*
* `<novo-chip>
* <novo-icon novoChipRemove>x</novo-icon>
* </novo-chip>`
*
* You *may* use a custom icon, but you may need to override the `novo-chip-remove` positioning
* styles to properly center the icon within the chip.
*/
class NovoChipRemove {
constructor(_parentChip, elementRef) {
this._parentChip = _parentChip;
if (elementRef.nativeElement.nodeName === 'BUTTON') {
elementRef.nativeElement.setAttribute('type', 'button');
}
}
/** Calls the parent chip's public `remove()` method if applicable. */
_handleClick(event) {
const parentChip = this._parentChip;
if (parentChip.removable && !parentChip.disabled) {
parentChip.remove();
}
// We need to stop event propagation because otherwise the event will bubble up to the
// form field and cause the `onContainerClick` method to be invoked. This method would then
// reset the focused chip that has been focused after chip removal. Usually the parent
// the parent click listener of the `NovoChip` would prevent propagation, but it can happen
// that the chip is being removed before the event bubbles up.
event.stopPropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipRemove, deps: [{ token: REMOVABLE_REF }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoChipRemove, isStandalone: false, selector: "[novoChipRemove]", host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "novo-chip-remove" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipRemove, decorators: [{
type: Directive,
args: [{
selector: '[novoChipRemove]',
host: {
class: 'novo-chip-remove',
'(click)': '_handleClick($event)',
},
standalone: false,
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [REMOVABLE_REF]
}] }, { type: i0.ElementRef }] });
/**
* Chip component. Used inside the NovoChipList component.
*/
class NovoChipElement extends NovoChipMixinBase {
/** Whether the chip is selected. */
get selected() {
return this._selected;
}
set selected(value) {
const coercedValue = coerceBooleanProperty(value);
if (coercedValue !== this._selected) {
this._selected = coercedValue;
this._dispatchSelectionChange();
}
}
/** The value of the chip. Defaults to the content inside `<novo-chip>` tags. */
get value() {
return this._value !== undefined ? this._value : this._elementRef.nativeElement.textContent;
}
set value(value) {
this._value = value;
}
/**
* Whether or not the chip is selectable. When a chip is not selectable,
* changes to its selected state are always ignored. By default a chip is
* selectable, and it becomes non-selectable if its parent chip list is
* not selectable.
*/
get selectable() {
return this._selectable && this._chipListSelectable;
}
set selectable(value) {
this._selectable = coerceBooleanProperty(value);
}
/** Whether the chip is disabled. */
get disabled() {
return this._chipListDisabled || this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
/**
* Determines whether or not the chip displays the remove styling and emits (removed) events.
*/
get removable() {
return this._removable;
}
set removable(value) {
this._removable = coerceBooleanProperty(value);
}
/** The ARIA selected applied to the chip. */
get ariaSelected() {
// Remove the `aria-selected` when the chip is deselected in single-selection mode, because
// it adds noise to NVDA users where "not selected" will be read out for each chip.
return this.selectable && (this._chipListMultiple || this.selected) ? this.selected.toString() : null;
}
constructor(_elementRef, _ngZone, platform, _changeDetectorRef, _document, animationMode, tabIndex) {
super(_elementRef);
this._elementRef = _elementRef;
this._ngZone = _ngZone;
this._changeDetectorRef = _changeDetectorRef;
/** Whether the chip has focus. */
this._hasFocus = false;
/** Whether the chip list is selectable */
this._chipListSelectable = true;
/** Whether the chip list allows toggling */
this._chipListToggleable = true;
/** Whether the chip list is in multi-selection mode. */
this._chipListMultiple = false;
/** Whether the chip list as a whole is disabled. */
this._chipListDisabled = false;
this._selected = false;
this._selectable = false;
this._disabled = false;
this._removable = true;
/** Emits when the chip is focused. */
this._onFocus = new Subject();
/** Emits when the chip is blured. */
this._onBlur = new Subject();
/** Emitted when the chip is selected or deselected. */
this.selectionChange = new EventEmitter();
/** Emitted when the chip is destroyed. */
this.destroyed = new EventEmitter();
/** Emitted when a chip is to be removed. */
this.removed = new EventEmitter();
this._animationsDisabled = animationMode === 'NoopAnimations';
this.tabIndex = tabIndex != null ? parseInt(tabIndex, 10) || -1 : -1;
}
ngOnDestroy() {
this.destroyed.emit({ chip: this });
}
/** Selects the chip. */
select() {
if (!this._selected) {
this._selected = true;
this._dispatchSelectionChange();
this._changeDetectorRef.markForCheck();
}
}
/** Deselects the chip. */
deselect() {
if (this._selected) {
this._selected = false;
this._dispatchSelectionChange();
this._changeDetectorRef.markForCheck();
}
}
/** Select this chip and emit selected event */
selectViaInteraction() {
if (!this._selected) {
this._selected = true;
this._dispatchSelectionChange(true);
this._changeDetectorRef.markForCheck();
}
}
/** Toggles the current selected state of this chip. */
toggleSelected(isUserInput = false) {
this._selected = !this.selected;
this._dispatchSelectionChange(isUserInput);
this._changeDetectorRef.markForCheck();
return this.selected;
}
/** Allows for programmatic focusing of the chip. */
focus() {
if (!this._hasFocus) {
this._elementRef.nativeElement.focus();
this._onFocus.next({ chip: this });
}
this._hasFocus = true;
}
/**
* Allows for programmatic removal of the chip. Called by the NovoChipList when the DELETE or
* BACKSPACE keys are pressed.
*
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
*/
remove() {
if (this.removable) {
this.removed.emit({ chip: this });
}
}
/** Handles click events on the chip. */
_handleClick(event) {
if (this.disabled) {
event.preventDefault();
}
else {
event.stopPropagation();
}
if (this._chipListToggleable) {
this.toggleSelected(true);
}
}
/** Handle custom key presses. */
_handleKeydown(event) {
if (this.disabled) {
return;
}
switch (event.key) {
case "Delete" /* Key.Delete */:
case "Backspace" /* Key.Backspace */:
// If we are removable, remove the focused chip
this.remove();
// Always prevent so page navigation does not occur
event.preventDefault();
break;
case " " /* Key.Space */:
// If we are selectable, toggle the focused chip
if (this.selectable) {
this.toggleSelected(true);
}
// Always prevent space from scrolling the page since the list has focus
event.preventDefault();
break;
default:
// No default action for other keys
break;
}
}
_blur() {
// When animations are enabled, Angular may end up removing the chip from the DOM a little
// earlier than usual, causing it to be blurred and throwing off the logic in the chip list
// that moves focus not the next item. To work around the issue, we defer marking the chip
// as not focused until the next time the zone stabilizes.
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
this._ngZone.run(() => {
this._hasFocus = false;
this._onBlur.next({ chip: this });
});
});
}
_dispatchSelectionChange(isUserInput = false) {
this.selectionChange.emit({
source: this,
isUserInput,
selected: this._selected,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipElement, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.Platform }, { token: i0.ChangeDetectorRef, optional: true }, { token: DOCUMENT }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoChipElement, isStandalone: false, selector: "novo-chip, [novo-chip]", inputs: { color: "color", tabIndex: "tabIndex", size: "size", type: "type", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { attributes: { "role": "option" }, listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_blur()" }, properties: { "class.novo-chip-selectable": "selectable", "class.novo-chip-selected": "selected", "class.novo-chip-with-avatar": "avatar", "class.novo-chip-with-trailing-icon": "removeIcon", "class.novo-chip-disabled": "disabled", "class._novo-animation-noopable": "_animationsDisabled", "attr.tabindex": "disabled ? null : tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "novo-chip novo-focus-indicator" }, providers: [{ provide: REMOVABLE_REF, useExisting: NovoChipElement }], queries: [{ propertyName: "avatar", first: true, predicate: NovoChipAvatar, descendants: true }, { propertyName: "removeIcon", first: true, predicate: NovoChipRemove, descendants: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".novo-chip{position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;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;background:var(--background-main);border:1px solid transparent;transition:all .2s ease-in-out;display:inline-flex;align-items:center;cursor:default;gap:1rem;border-radius:.4rem;padding:0 1rem;min-height:2.4rem;height:1px;max-width:100%}.novo-chip.text-capitalize{text-transform:capitalize}.novo-chip.text-uppercase{text-transform:uppercase}.novo-chip.text-nowrap{white-space:nowrap}.novo-chip.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.novo-chip.text-size-default{font-size:inherit}.novo-chip.text-size-body{font-size:1.3rem}.novo-chip.text-size-xs{font-size:1rem}.novo-chip.text-size-sm{font-size:1.2rem}.novo-chip.text-size-md{font-size:1.3rem}.novo-chip.text-size-lg{font-size:1.6rem}.novo-chip.text-size-xl{font-size:2rem}.novo-chip.text-size-2xl{font-size:2.6rem}.novo-chip.text-size-3xl{font-size:3.2rem}.novo-chip.text-size-smaller{font-size:.8em}.novo-chip.text-size-larger{font-size:1.2em}.novo-chip.text-color-black{color:#000}.novo-chip.text-color-white{color:#fff}.novo-chip.text-color-gray,.novo-chip.text-color-grey{color:#9e9e9e}.novo-chip.text-color-offWhite,.novo-chip.text-color-bright{color:#f7f7f7}.novo-chip.text-color-light{color:#dbdbdb}.novo-chip.text-color-neutral{color:#4f5361}.novo-chip.text-color-dark{color:#3d464d}.novo-chip.text-color-orange{color:#ff6900}.novo-chip.text-color-navigation{color:#202945}.novo-chip.text-color-skyBlue{color:#009bdf}.novo-chip.text-color-steel{color:#5b6770}.novo-chip.text-color-metal{color:#637893}.novo-chip.text-color-sand{color:#f4f4f4}.novo-chip.text-color-silver{color:#e2e2e2}.novo-chip.text-color-stone{color:#bebebe}.novo-chip.text-color-ash{color:#a0a0a0}.novo-chip.text-color-slate{color:#707070}.novo-chip.text-color-onyx{color:#526980}.novo-chip.text-color-charcoal{color:#282828}.novo-chip.text-color-moonlight{color:#1a242f}.novo-chip.text-color-midnight{color:#202945}.novo-chip.text-color-darkness{color:#161f27}.novo-chip.text-color-navy{color:#0d2d42}.novo-chip.text-color-aqua{color:#3bafda}.novo-chip.text-color-ocean{color:#4a89dc}.novo-chip.text-color-mint{color:#37bc9b}.novo-chip.text-color-grass{color:#8cc152}.novo-chip.text-color-sunflower{color:#f6b042}.novo-chip.text-color-bittersweet{color:#eb6845}.novo-chip.text-color-grapefruit{color:#da4453}.novo-chip.text-color-carnation{color:#d770ad}.novo-chip.text-color-lavender{color:#967adc}.novo-chip.text-color-mountain{color:#9678b6}.novo-chip.text-color-info,.novo-chip.text-color-positive{color:#4a89dc}.novo-chip.text-color-success{color:#8cc152}.novo-chip.text-color-negative,.novo-chip.text-color-danger,.novo-chip.text-color-error{color:#da4453}.novo-chip.text-color-warning{color:#f6b042}.novo-chip.text-color-empty{color:#cccdcc}.novo-chip.text-color-disabled{color:#bebebe}.novo-chip.text-color-background{color:#f7f7f7}.novo-chip.text-color-backgroundDark{color:#e2e2e2}.novo-chip.text-color-presentation{color:#5b6770}.novo-chip.text-color-bullhorn{color:#ff6900}.novo-chip.text-color-pulse{color:#3bafda}.novo-chip.text-color-company{color:#39d}.novo-chip.text-color-candidate{color:#4b7}.novo-chip.text-color-lead{color:#a69}.novo-chip.text-color-contact,.novo-chip.text-color-clientcontact{color:#fa4}.novo-chip.text-color-opportunity{color:#625}.novo-chip.text-color-job,.novo-chip.text-color-joborder{color:#b56}.novo-chip.text-color-submission{color:#a9adbb}.novo-chip.text-color-sendout{color:#747884}.novo-chip.text-color-placement{color:#0b344f}.novo-chip.text-color-note{color:#747884}.novo-chip.text-color-contract{color:#454ea0}.novo-chip.text-color-task{color:#4f5361}.novo-chip.text-color-jobCode,.novo-chip.text-color-earnCode,.novo-chip.text-color-invoiceStatement,.novo-chip.text-color-billableCharge,.novo-chip.text-color-payableCharge,.novo-chip.text-color-user,.novo-chip.text-color-corporateUser,.novo-chip.text-color-distributionList,.novo-chip.text-color-credential,.novo-chip.text-color-person{color:#696d79}.novo-chip.margin-before{margin-top:.4rem}.novo-chip.margin-after{margin-bottom:.8rem}.novo-chip.text-length-small{max-width:40ch}.novo-chip.text-length-medium{max-width:55ch}.novo-chip.text-length-large{max-width:70ch}.novo-chip.text-weight-hairline{font-weight:100}.novo-chip.text-weight-thin{font-weight:200}.novo-chip.text-weight-light{font-weight:300}.novo-chip.text-weight-normal{font-weight:400}.novo-chip.text-weight-medium{font-weight:500}.novo-chip.text-weight-semibold{font-weight:600}.novo-chip.text-weight-bold{font-weight:700}.novo-chip.text-weight-extrabold{font-weight:800}.novo-chip.text-weight-heavy{font-weight:900}.novo-chip.text-weight-lighter{font-weight:lighter}.novo-chip.text-weight-bolder{font-weight:bolder}.novo-chip.novo-chip-selectable{color:var(--selection)}.novo-chip.novo-chip-selectable:after{inset:0;position:absolute;border-radius:inherit;opacity:0;background-color:#000;content:\"\";pointer-events:none;transition:opacity .2s ease-in-out}.novo-chip.novo-chip-selectable:focus{outline:none;border:1px solid var(--selection)}.novo-chip.novo-chip-selectable:focus:after{opacity:.16}.novo-chip.novo-chip-selectable:hover{border:1px solid var(--selection)}.novo-chip.novo-chip-disabled{color:var(--text-main);opacity:.7;pointer-events:none}.novo-chip.novo-chip-disabled:after{opacity:0}.novo-chip.novo-chip-disabled .novo-chip-remove,.novo-chip.novo-chip-disabled .novo-chip-trailing-icon{cursor:default}.novo-chip .novo-chip-avatar::not(novo-icon){width:24px;height:24px}.novo-chip .novo-chip-avatar{margin-right:0rem;margin-left:0rem}.novo-chip .novo-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover;flex-shrink:0}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{margin-left:0rem;margin-right:0}.novo-chip .novo-chip-remove{color:#dbdbdb}.novo-chip:not(.novo-chip-disabled) .novo-chip-remove:hover{color:#8f8f8f}.novo-chip.novo-size-xs{font-size:.8rem;border-radius:.4rem;padding:0 .25rem;min-height:1.6rem;gap:.25rem}.novo-chip.novo-size-xs.novo-chip-with-avatar{padding-left:.125rem}.novo-chip.novo-size-xs.novo-chip-with-trailing-icon{padding-right:.125rem}.novo-chip.novo-size-xs .novo-text{font-size:inherit}.novo-chip.novo-size-sm{font-size:1rem;border-radius:.4rem;padding:0 .5rem;min-height:2rem;gap:.5rem}.novo-chip.novo-size-sm.novo-chip-with-avatar{padding-left:.25rem}.novo-chip.novo-size-sm.novo-chip-with-trailing-icon{padding-right:.25rem}.novo-chip.novo-size-sm .novo-text{font-size:inherit}.novo-chip.novo-size-md{font-size:1.2rem;border-radius:.4rem;padding:0 1rem;min-height:2.8rem;gap:1rem}.novo-chip.novo-size-md.novo-chip-with-avatar{padding-left:.5rem}.novo-chip.novo-size-md.novo-chip-with-trailing-icon{padding-right:.5rem}.novo-chip.novo-size-md .novo-text{font-size:inherit}.novo-chip.novo-size-lg{font-size:1.4rem;border-radius:.4rem;padding:0 1.25rem;min-height:3.2rem;gap:1.25rem}.novo-chip.novo-size-lg.novo-chip-with-avatar{padding-left:.625rem}.novo-chip.novo-size-lg.novo-chip-with-trailing-icon{padding-right:.625rem}.novo-chip.novo-size-lg .novo-text{font-size:inherit}.novo-chip.novo-size-xl{font-size:1.8rem;border-radius:.4rem;padding:0 1.5rem;min-height:3.6rem;gap:1.5rem}.novo-chip.novo-size-xl.novo-chip-with-avatar{padding-left:.75rem}.novo-chip.novo-size-xl.novo-chip-with-trailing-icon{padding-right:.75rem}.novo-chip.novo-size-xl .novo-text{font-size:inherit}.novo-chip.novo-color-black{color:#fff;background:#000}.novo-chip.novo-color-black>*{color:inherit}.novo-chip.novo-accent-black{border:1px solid #000000;color:#000}.novo-chip.novo-color-white{color:#3d464d;background:#fff}.novo-chip.novo-color-white>*{color:inherit}.novo-chip.novo-accent-white{border:1px solid #ffffff;color:#fff}.novo-chip.novo-color-gray{color:#3d464d;background:#9e9e9e}.novo-chip.novo-color-gray>*{color:inherit}.novo-chip.novo-accent-gray{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-grey{color:#3d464d;background:#9e9e9e}.novo-chip.novo-color-grey>*{color:inherit}.novo-chip.novo-accent-grey{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-offWhite{color:#3d464d;background:#f7f7f7}.novo-chip.novo-color-offWhite>*{color:inherit}.novo-chip.novo-accent-offWhite{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-bright{color:#3d464d;background:#f7f7f7}.novo-chip.novo-color-bright>*{color:inherit}.novo-chip.novo-accent-bright{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-light{color:#3d464d;background:#dbdbdb}.novo-chip.novo-color-light>*{color:inherit}.novo-chip.novo-accent-light{border:1px solid #dbdbdb;color:#dbdbdb}.novo-chip.novo-color-neutral{color:#fff;background:#4f5361}.novo-chip.novo-color-neutral>*{color:inherit}.novo-chip.novo-accent-neutral{border:1px solid #4f5361;color:#4f5361}.novo-chip.novo-color-dark{color:#fff;background:#3d464d}.novo-chip.novo-color-dark>*{color:inherit}.novo-chip.novo-accent-dark{border:1px solid #3d464d;color:#3d464d}.novo-chip.novo-color-orange{color:#3d464d;background:#ff6900}.novo-chip.novo-color-orange>*{color:inherit}.novo-chip.novo-accent-orange{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-navigation{color:#fff;background:#202945}.novo-chip.novo-color-navigation>*{color:inherit}.novo-chip.novo-accent-navigation{border:1px solid #202945;color:#202945}.novo-chip.novo-color-skyBlue{color:#fff;background:#009bdf}.novo-chip.novo-color-skyBlue>*{color:inherit}.novo-chip.novo-accent-skyBlue{border:1px solid #009bdf;color:#009bdf}.novo-chip.novo-color-steel{color:#fff;background:#5b6770}.novo-chip.novo-color-steel>*{color:inherit}.novo-chip.novo-accent-steel{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-metal{color:#fff;background:#637893}.novo-chip.novo-color-metal>*{color:inherit}.novo-chip.novo-accent-metal{border:1px solid #637893;color:#637893}.novo-chip.novo-color-sand{color:#3d464d;background:#f4f4f4}.novo-chip.novo-color-sand>*{color:inherit}.novo-chip.novo-accent-sand{border:1px solid #f4f4f4;color:#f4f4f4}.novo-chip.novo-color-silver{color:#3d464d;background:#e2e2e2}.novo-chip.novo-color-silver>*{color:inherit}.novo-chip.novo-accent-silver{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-stone{color:#3d464d;background:#bebebe}.novo-chip.novo-color-stone>*{color:inherit}.novo-chip.novo-accent-stone{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-ash{color:#3d464d;background:#a0a0a0}.novo-chip.novo-color-ash>*{color:inherit}.novo-chip.novo-accent-ash{border:1px solid #a0a0a0;color:#a0a0a0}.novo-chip.novo-color-slate{color:#fff;background:#707070}.novo-chip.novo-color-slate>*{color:inherit}.novo-chip.novo-accent-slate{border:1px solid #707070;color:#707070}.novo-chip.novo-color-onyx{color:#fff;background:#526980}.novo-chip.novo-color-onyx>*{color:inherit}.novo-chip.novo-accent-onyx{border:1px solid #526980;color:#526980}.novo-chip.novo-color-charcoal{color:#fff;background:#282828}.novo-chip.novo-color-charcoal>*{color:inherit}.novo-chip.novo-accent-charcoal{border:1px solid #282828;color:#282828}.novo-chip.novo-color-moonlight{color:#fff;background:#1a242f}.novo-chip.novo-color-moonlight>*{color:inherit}.novo-chip.novo-accent-moonlight{border:1px solid #1a242f;color:#1a242f}.novo-chip.novo-color-midnight{color:#fff;background:#202945}.novo-chip.novo-color-midnight>*{color:inherit}.novo-chip.novo-accent-midnight{border:1px solid #202945;color:#202945}.novo-chip.novo-color-darkness{color:#fff;background:#161f27}.novo-chip.novo-color-darkness>*{color:inherit}.novo-chip.novo-accent-darkness{border:1px solid #161f27;color:#161f27}.novo-chip.novo-color-navy{color:#fff;background:#0d2d42}.novo-chip.novo-color-navy>*{color:inherit}.novo-chip.novo-accent-navy{border:1px solid #0d2d42;color:#0d2d42}.novo-chip.novo-color-aqua{color:#3d464d;background:#3bafda}.novo-chip.novo-color-aqua>*{color:inherit}.novo-chip.novo-accent-aqua{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-ocean{color:#fff;background:#4a89dc}.novo-chip.novo-color-ocean>*{color:inherit}.novo-chip.novo-accent-ocean{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-mint{color:#3d464d;background:#37bc9b}.novo-chip.novo-color-mint>*{color:inherit}.novo-chip.novo-accent-mint{border:1px solid #37bc9b;color:#37bc9b}.novo-chip.novo-color-grass{color:#fff;background:#8cc152}.novo-chip.novo-color-grass>*{color:inherit}.novo-chip.novo-accent-grass{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-sunflower{color:#fff;background:#f6b042}.novo-chip.novo-color-sunflower>*{color:inherit}.novo-chip.novo-accent-sunflower{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-bittersweet{color:#fff;background:#eb6845}.novo-chip.novo-color-bittersweet>*{color:inherit}.novo-chip.novo-accent-bittersweet{border:1px solid #eb6845;color:#eb6845}.novo-chip.novo-color-grapefruit{color:#fff;background:#da4453}.novo-chip.novo-color-grapefruit>*{color:inherit}.novo-chip.novo-accent-grapefruit{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-carnation{color:#fff;background:#d770ad}.novo-chip.novo-color-carnation>*{color:inherit}.novo-chip.novo-accent-carnation{border:1px solid #d770ad;color:#d770ad}.novo-chip.novo-color-lavender{color:#fff;background:#967adc}.novo-chip.novo-color-lavender>*{color:inherit}.novo-chip.novo-accent-lavender{border:1px solid #967adc;color:#967adc}.novo-chip.novo-color-mountain{color:#fff;background:#9678b6}.novo-chip.novo-color-mountain>*{color:inherit}.novo-chip.novo-accent-mountain{border:1px solid #9678b6;color:#9678b6}.novo-chip.novo-color-info{color:#fff;background:#4a89dc}.novo-chip.novo-color-info>*{color:inherit}.novo-chip.novo-accent-info{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-positive{color:#fff;background:#4a89dc}.novo-chip.novo-color-positive>*{color:inherit}.novo-chip.novo-accent-positive{border:1px solid #4a89dc;color:#4a89dc}.novo-chip.novo-color-success{color:#fff;background:#8cc152}.novo-chip.novo-color-success>*{color:inherit}.novo-chip.novo-accent-success{border:1px solid #8cc152;color:#8cc152}.novo-chip.novo-color-negative{color:#fff;background:#da4453}.novo-chip.novo-color-negative>*{color:inherit}.novo-chip.novo-accent-negative{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-danger{color:#fff;background:#da4453}.novo-chip.novo-color-danger>*{color:inherit}.novo-chip.novo-accent-danger{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-error{color:#fff;background:#da4453}.novo-chip.novo-color-error>*{color:inherit}.novo-chip.novo-accent-error{border:1px solid #da4453;color:#da4453}.novo-chip.novo-color-warning{color:#fff;background:#f6b042}.novo-chip.novo-color-warning>*{color:inherit}.novo-chip.novo-accent-warning{border:1px solid #f6b042;color:#f6b042}.novo-chip.novo-color-empty{color:#3d464d;background:#cccdcc}.novo-chip.novo-color-empty>*{color:inherit}.novo-chip.novo-accent-empty{border:1px solid #cccdcc;color:#cccdcc}.novo-chip.novo-color-disabled{color:#3d464d;background:#bebebe}.novo-chip.novo-color-disabled>*{color:inherit}.novo-chip.novo-accent-disabled{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-background{color:#3d464d;background:#f7f7f7}.novo-chip.novo-color-background>*{color:inherit}.novo-chip.novo-accent-background{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-backgroundDark{color:#3d464d;background:#e2e2e2}.novo-chip.novo-color-backgroundDark>*{color:inherit}.novo-chip.novo-accent-backgroundDark{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-presentation{color:#fff;background:#5b6770}.novo-chip.novo-color-presentation>*{color:inherit}.novo-chip.novo-accent-presentation{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-bullhorn{color:#3d464d;background:#ff6900}.novo-chip.novo-color-bullhorn>*{color:inherit}.novo-chip.novo-accent-bullhorn{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-pulse{color:#3d464d;background:#3bafda}.novo-chip.novo-color-pulse>*{color:inherit}.novo-chip.novo-accent-pulse{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-company{color:#fff;background:#39d}.novo-chip.novo-color-company>*{color:inherit}.novo-chip.novo-accent-company{border:1px solid #3399dd;color:#39d}.novo-chip.novo-color-candidate{color:#fff;background:#4b7}.novo-chip.novo-color-candidate>*{color:inherit}.novo-chip.novo-accent-candidate{border:1px solid #44bb77;color:#4b7}.novo-chip.novo-color-lead{color:#fff;background:#a69}.novo-chip.novo-color-lead>*{color:inherit}.novo-chip.novo-accent-lead{border:1px solid #aa6699;color:#a69}.novo-chip.novo-color-contact{color:#fff;background:#fa4}.novo-chip.novo-color-contact>*{color:inherit}.novo-chip.novo-accent-contact{border:1px solid #ffaa44;color:#fa4}.novo-chip.novo-color-clientcontact{color:#fff;background:#fa4}.novo-chip.novo-color-clientcontact>*{color:inherit}.novo-chip.novo-accent-clientcontact{border:1px solid #ffaa44;color:#fa4}.novo-chip.novo-color-opportunity{color:#fff;background:#625}.novo-chip.novo-color-opportunity>*{color:inherit}.novo-chip.novo-accent-opportunity{border:1px solid #662255;color:#625}.novo-chip.novo-color-job{color:#fff;background:#b56}.novo-chip.novo-color-job>*{color:inherit}.novo-chip.novo-accent-job{border:1px solid #bb5566;color:#b56}.novo-chip.novo-color-joborder{color:#fff;background:#b56}.novo-chip.novo-color-joborder>*{color:inherit}.novo-chip.novo-accent-joborder{border:1px solid #bb5566;color:#b56}.novo-chip.novo-color-submission{color:#3d464d;background:#a9adbb}.novo-chip.novo-color-submission>*{color:inherit}.novo-chip.novo-accent-submission{border:1px solid #a9adbb;color:#a9adbb}.novo-chip.novo-color-sendout{color:#fff;background:#747884}.novo-chip.novo-color-sendout>*{color:inherit}.novo-chip.novo-accent-sendout{border:1px solid #747884;color:#747884}.novo-chip.novo-color-placement{color:#fff;background:#0b344f}.novo-chip.novo-color-placement>*{color:inherit}.novo-chip.novo-accent-placement{border:1px solid #0b344f;color:#0b344f}.novo-chip.novo-color-note{color:#fff;background:#747884}.novo-chip.novo-color-note>*{color:inherit}.novo-chip.novo-accent-note{border:1px solid #747884;color:#747884}.novo-chip.novo-color-contract{color:#fff;background:#454ea0}.novo-chip.novo-color-contract>*{color:inherit}.novo-chip.novo-accent-contract{border:1px solid #454ea0;color:#454ea0}.novo-chip.novo-color-task{color:#fff;background:#4f5361}.novo-chip.novo-color-task>*{color:inherit}.novo-chip.novo-accent-task{border:1px solid #4f5361;color:#4f5361}.novo-chip.novo-color-jobCode{color:#fff;background:#696d79}.novo-chip.novo-color-jobCode>*{color:inherit}.novo-chip.novo-accent-jobCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-earnCode{color:#fff;background:#696d79}.novo-chip.novo-color-earnCode>*{color:inherit}.novo-chip.novo-accent-earnCode{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-invoiceStatement{color:#fff;background:#696d79}.novo-chip.novo-color-invoiceStatement>*{color:inherit}.novo-chip.novo-accent-invoiceStatement{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-billableCharge{color:#fff;background:#696d79}.novo-chip.novo-color-billableCharge>*{color:inherit}.novo-chip.novo-accent-billableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-payableCharge{color:#fff;background:#696d79}.novo-chip.novo-color-payableCharge>*{color:inherit}.novo-chip.novo-accent-payableCharge{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-user{color:#fff;background:#696d79}.novo-chip.novo-color-user>*{color:inherit}.novo-chip.novo-accent-user{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-corporateUser{color:#fff;background:#696d79}.novo-chip.novo-color-corporateUser>*{color:inherit}.novo-chip.novo-accent-corporateUser{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-distributionList{color:#fff;background:#696d79}.novo-chip.novo-color-distributionList>*{color:inherit}.novo-chip.novo-accent-distributionList{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-credential{color:#fff;background:#696d79}.novo-chip.novo-color-credential>*{color:inherit}.novo-chip.novo-accent-credential{border:1px solid #696d79;color:#696d79}.novo-chip.novo-color-person{color:#fff;background:#696d79}.novo-chip.novo-color-person>*{color:inherit}.novo-chip.novo-accent-person{border:1px solid #696d79;color:#696d79}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipElement, decorators: [{
type: Component,
args: [{ selector: 'novo-chip, [novo-chip]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, inputs: ['color', 'tabIndex', 'size'], providers: [{ provide: REMOVABLE_REF, useExisting: NovoChipElement }], host: {
class: 'novo-chip novo-focus-indicator',
role: 'option',
'[class.novo-chip-selectable]': 'selectable',
'[class.novo-chip-selected]': 'selected',
'[class.novo-chip-with-avatar]': 'avatar',
'[class.novo-chip-with-trailing-icon]': 'removeIcon',
'[class.novo-chip-disabled]': 'disabled',
'[class._novo-animation-noopable]': '_animationsDisabled',
'[attr.tabindex]': 'disabled ? null : tabIndex',
'[attr.disabled]': 'disabled || null',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-selected]': 'ariaSelected',
'(click)': '_handleClick($event)',
// '(mouseenter)': '_handleActivate($event)',
// '(mouseleave)': '_handleDeactivate($event)',
'(keydown)': '_handleKeydown($event)',
'(focus)': 'focus()',
'(blur)': '_blur()',
}, standalone: false, styles: [".novo-chip{position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;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;background:var(--background-main);border:1px solid transparent;transition:all .2s ease-in-out;display:inline-flex;align-items:center;cursor:default;gap:1rem;border-radius:.4rem;padding:0 1rem;min-height:2.4rem;height:1px;max-width:100%}.novo-chip.text-capitalize{text-transform:capitalize}.novo-chip.text-uppercase{text-transform:uppercase}.novo-chip.text-nowrap{white-space:nowrap}.novo-chip.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.novo-chip.text-size-default{font-size:inherit}.novo-chip.text-size-body{font-size:1.3rem}.novo-chip.text-size-xs{font-size:1rem}.novo-chip.text-size-sm{font-size:1.2rem}.novo-chip.text-size-md{font-size:1.3rem}.novo-chip.text-size-lg{font-size:1.6rem}.novo-chip.text-size-xl{font-size:2rem}.novo-chip.text-size-2xl{font-size:2.6rem}.novo-chip.text-size-3xl{font-size:3.2rem}.novo-chip.text-size-smaller{font-size:.8em}.novo-chip.text-size-larger{font-size:1.2em}.novo-chip.text-color-black{color:#000}.novo-chip.text-color-white{color:#fff}.novo-chip.text-color-gray,.novo-chip.text-color-grey{color:#9e9e9e}.novo-chip.text-color-offWhite,.novo-chip.text-color-bright{color:#f7f7f7}.novo-chip.text-color-light{color:#dbdbdb}.novo-chip.text-color-neutral{color:#4f5361}.novo-chip.text-color-dark{color:#3d464d}.novo-chip.text-color-orange{color:#ff6900}.novo-chip.text-color-navigation{color:#202945}.novo-chip.text-color-skyBlue{color:#009bdf}.novo-chip.text-color-steel{color:#5b6770}.novo-chip.text-color-metal{color:#637893}.novo-chip.text-color-sand{color:#f4f4f4}.novo-chip.text-color-silver{color:#e2e2e2}.novo-chip.text-color-stone{color:#bebebe}.novo-chip.text-color-ash{color:#a0a0a0}.novo-chip.text-color-slate{color:#707070}.novo-chip.text-color-onyx{color:#526980}.novo-chip.text-color-charcoal{color:#282828}.novo-chip.text-color-moonlight{color:#1a242f}.novo-chip.text-color-midnight{color:#202945}.novo-chip.text-color-darkness{color:#161f27}.novo-chip.text-color-navy{color:#0d2d42}.novo-chip.text-color-aqua{color:#3bafda}.novo-chip.text-color-ocean{color:#4a89dc}.novo-chip.text-color-mint{color:#37bc9b}.novo-chip.text-color-grass{color:#8cc152}.novo-chip.text-color-sunflower{color:#f6b042}.novo-chip.text-color-bittersweet{color:#eb6845}.novo-chip.text-color-grapefruit{color:#da4453}.novo-chip.text-color-carnation{color:#d770ad}.novo-chip.text-color-lavender{color:#967adc}.novo-chip.text-color-mountain{color:#9678b6}.novo-chip.text-color-info,.novo-chip.text-color-positive{color:#4a89dc}.novo-chip.text-color-success{color:#8cc152}.novo-chip.text-color-negative,.novo-chip.text-color-danger,.novo-chip.text-color-error{color:#da4453}.novo-chip.text-color-warning{color:#f6b042}.novo-chip.text-color-empty{color:#cccdcc}.novo-chip.text-color-disabled{color:#bebebe}.novo-chip.text-color-background{color:#f7f7f7}.novo-chip.text-color-backgroundDark{color:#e2e2e2}.novo-chip.text-color-presentation{color:#5b6770}.novo-chip.text-color-bullhorn{color:#ff6900}.novo-chip.text-color-pulse{color:#3bafda}.novo-chip.text-color-company{color:#39d}.novo-chip.text-color-candidate{color:#4b7}.novo-chip.text-color-lead{color:#a69}.novo-chip.text-color-contact,.novo-chip.text-color-clientcontact{color:#fa4}.novo-chip.text-color-opportunity{color:#625}.novo-chip.text-color-job,.novo-chip.text-color-joborder{color:#b56}.novo-chip.text-color-submission{color:#a9adbb}.novo-chip.text-color-sendout{color:#747884}.novo-chip.text-color-placement{color:#0b344f}.novo-chip.text-color-note{color:#747884}.novo-chip.text-color-contract{color:#454ea0}.novo-chip.text-color-task{color:#4f5361}.novo-chip.text-color-jobCode,.novo-chip.text-color-earnCode,.novo-chip.text-color-invoiceStatement,.novo-chip.text-color-billableCharge,.novo-chip.text-color-payableCharge,.novo-chip.text-color-user,.novo-chip.text-color-corporateUser,.novo-chip.text-color-distributionList,.novo-chip.text-color-credential,.novo-chip.text-color-person{color:#696d79}.novo-chip.margin-before{margin-top:.4rem}.novo-chip.margin-after{margin-bottom:.8rem}.novo-chip.text-length-small{max-width:40ch}.novo-chip.text-length-medium{max-width:55ch}.novo-chip.text-length-large{max-width:70ch}.novo-chip.text-weight-hairline{font-weight:100}.novo-chip.text-weight-thin{font-weight:200}.novo-chip.text-weight-light{font-weight:300}.novo-chip.text-weight-normal{font-weight:400}.novo-chip.text-weight-medium{font-weight:500}.novo-chip.text-weight-semibold{font-weight:600}.novo-chip.text-weight-bold{font-weight:700}.novo-chip.text-weight-extrabold{font-weight:800}.novo-chip.text-weight-heavy{font-weight:900}.novo-chip.text-weight-lighter{font-weight:lighter}.novo-chip.text-weight-bolder{font-weight:bolder}.novo-chip.novo-chip-selectable{color:var(--selection)}.novo-chip.novo-chip-selectable:after{inset:0;position:absolute;border-radius:inherit;opacity:0;background-color:#000;content:\"\";pointer-events:none;transition:opacity .2s ease-in-out}.novo-chip.novo-chip-selectable:focus{outline:none;border:1px solid var(--selection)}.novo-chip.novo-chip-selectable:focus:after{opacity:.16}.novo-chip.novo-chip-selectable:hover{border:1px solid var(--selection)}.novo-chip.novo-chip-disabled{color:var(--text-main);opacity:.7;pointer-events:none}.novo-chip.novo-chip-disabled:after{opacity:0}.novo-chip.novo-chip-disabled .novo-chip-remove,.novo-chip.novo-chip-disabled .novo-chip-trailing-icon{cursor:default}.novo-chip .novo-chip-avatar::not(novo-icon){width:24px;height:24px}.novo-chip .novo-chip-avatar{margin-right:0rem;margin-left:0rem}.novo-chip .novo-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover;flex-shrink:0}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.novo-chip .novo-chip-remove,.novo-chip .novo-chip-trailing-icon{margin-left:0rem;margin-right:0}.novo-chip .novo-chip-remove{color:#dbdbdb}.novo-chip:not(.novo-chip-disabled) .novo-chip-remove:hover{color:#8f8f8f}.novo-chip.novo-size-xs{font-size:.8rem;border-radius:.4rem;padding:0 .25rem;min-height:1.6rem;gap:.25rem}.novo-chip.novo-size-xs.novo-chip-with-avatar{padding-left:.125rem}.novo-chip.novo-size-xs.novo-chip-with-trailing-icon{padding-right:.125rem}.novo-chip.novo-size-xs .novo-text{font-size:inherit}.novo-chip.novo-size-sm{font-size:1rem;border-radius:.4rem;padding:0 .5rem;min-height:2rem;gap:.5rem}.novo-chip.novo-size-sm.novo-chip-with-avatar{padding-left:.25rem}.novo-chip.novo-size-sm.novo-chip-with-trailing-icon{padding-right:.25rem}.novo-chip.novo-size-sm .novo-text{font-size:inherit}.novo-chip.novo-size-md{font-size:1.2rem;border-radius:.4rem;padding:0 1rem;min-height:2.8rem;gap:1rem}.novo-chip.novo-size-md.novo-chip-with-avatar{padding-left:.5rem}.novo-chip.novo-size-md.novo-chip-with-trailing-icon{padding-right:.5rem}.novo-chip.novo-size-md .novo-text{font-size:inherit}.novo-chip.novo-size-lg{font-size:1.4rem;border-radius:.4rem;padding:0 1.25rem;min-height:3.2rem;gap:1.25rem}.novo-chip.novo-size-lg.novo-chip-with-avatar{padding-left:.625rem}.novo-chip.novo-size-lg.novo-chip-with-trailing-icon{padding-right:.625rem}.novo-chip.novo-size-lg .novo-text{font-size:inherit}.novo-chip.novo-size-xl{font-size:1.8rem;border-radius:.4rem;padding:0 1.5rem;min-height:3.6rem;gap:1.5rem}.novo-chip.novo-size-xl.novo-chip-with-avatar{padding-left:.75rem}.novo-chip.novo-size-xl.novo-chip-with-trailing-icon{padding-right:.75rem}.novo-chip.novo-size-xl .novo-text{font-size:inherit}.novo-chip.novo-color-black{color:#fff;background:#000}.novo-chip.novo-color-black>*{color:inherit}.novo-chip.novo-accent-black{border:1px solid #000000;color:#000}.novo-chip.novo-color-white{color:#3d464d;background:#fff}.novo-chip.novo-color-white>*{color:inherit}.novo-chip.novo-accent-white{border:1px solid #ffffff;color:#fff}.novo-chip.novo-color-gray{color:#3d464d;background:#9e9e9e}.novo-chip.novo-color-gray>*{color:inherit}.novo-chip.novo-accent-gray{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-grey{color:#3d464d;background:#9e9e9e}.novo-chip.novo-color-grey>*{color:inherit}.novo-chip.novo-accent-grey{border:1px solid #9e9e9e;color:#9e9e9e}.novo-chip.novo-color-offWhite{color:#3d464d;background:#f7f7f7}.novo-chip.novo-color-offWhite>*{color:inherit}.novo-chip.novo-accent-offWhite{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-bright{color:#3d464d;background:#f7f7f7}.novo-chip.novo-color-bright>*{color:inherit}.novo-chip.novo-accent-bright{border:1px solid #f7f7f7;color:#f7f7f7}.novo-chip.novo-color-light{color:#3d464d;background:#dbdbdb}.novo-chip.novo-color-light>*{color:inherit}.novo-chip.novo-accent-light{border:1px solid #dbdbdb;color:#dbdbdb}.novo-chip.novo-color-neutral{color:#fff;background:#4f5361}.novo-chip.novo-color-neutral>*{color:inherit}.novo-chip.novo-accent-neutral{border:1px solid #4f5361;color:#4f5361}.novo-chip.novo-color-dark{color:#fff;background:#3d464d}.novo-chip.novo-color-dark>*{color:inherit}.novo-chip.novo-accent-dark{border:1px solid #3d464d;color:#3d464d}.novo-chip.novo-color-orange{color:#3d464d;background:#ff6900}.novo-chip.novo-color-orange>*{color:inherit}.novo-chip.novo-accent-orange{border:1px solid #ff6900;color:#ff6900}.novo-chip.novo-color-navigation{color:#fff;background:#202945}.novo-chip.novo-color-navigation>*{color:inherit}.novo-chip.novo-accent-navigation{border:1px solid #202945;color:#202945}.novo-chip.novo-color-skyBlue{color:#fff;background:#009bdf}.novo-chip.novo-color-skyBlue>*{color:inherit}.novo-chip.novo-accent-skyBlue{border:1px solid #009bdf;color:#009bdf}.novo-chip.novo-color-steel{color:#fff;background:#5b6770}.novo-chip.novo-color-steel>*{color:inherit}.novo-chip.novo-accent-steel{border:1px solid #5b6770;color:#5b6770}.novo-chip.novo-color-metal{color:#fff;background:#637893}.novo-chip.novo-color-metal>*{color:inherit}.novo-chip.novo-accent-metal{border:1px solid #637893;color:#637893}.novo-chip.novo-color-sand{color:#3d464d;background:#f4f4f4}.novo-chip.novo-color-sand>*{color:inherit}.novo-chip.novo-accent-sand{border:1px solid #f4f4f4;color:#f4f4f4}.novo-chip.novo-color-silver{color:#3d464d;background:#e2e2e2}.novo-chip.novo-color-silver>*{color:inherit}.novo-chip.novo-accent-silver{border:1px solid #e2e2e2;color:#e2e2e2}.novo-chip.novo-color-stone{color:#3d464d;background:#bebebe}.novo-chip.novo-color-stone>*{color:inherit}.novo-chip.novo-accent-stone{border:1px solid #bebebe;color:#bebebe}.novo-chip.novo-color-ash{color:#3d464d;background:#a0a0a0}.novo-chip.novo-color-ash>*{color:inherit}.novo-chip.novo-accent-ash{border:1px solid #a0a0a0;color:#a0a0a0}.novo-chip.novo-color-slate{color:#fff;background:#707070}.novo-chip.novo-color-slate>*{color:inherit}.novo-chip.novo-accent-slate{border:1px solid #707070;color:#707070}.novo-chip.novo-color-onyx{color:#fff;background:#526980}.novo-chip.novo-color-onyx>*{color:inherit}.novo-chip.novo-accent-onyx{border:1px solid #526980;color:#526980}.novo-chip.novo-color-charcoal{color:#fff;background:#282828}.novo-chip.novo-color-charcoal>*{color:inherit}.novo-chip.novo-accent-charcoal{border:1px solid #282828;color:#282828}.novo-chip.novo-color-moonlight{color:#fff;background:#1a242f}.novo-chip.novo-color-moonlight>*{color:inherit}.novo-chip.novo-accent-moonlight{border:1px solid #1a242f;color:#1a242f}.novo-chip.novo-color-midnight{color:#fff;background:#202945}.novo-chip.novo-color-midnight>*{color:inherit}.novo-chip.novo-accent-midnight{border:1px solid #202945;color:#202945}.novo-chip.novo-color-darkness{color:#fff;background:#161f27}.novo-chip.novo-color-darkness>*{color:inherit}.novo-chip.novo-accent-darkness{border:1px solid #161f27;color:#161f27}.novo-chip.novo-color-navy{color:#fff;background:#0d2d42}.novo-chip.novo-color-navy>*{color:inherit}.novo-chip.novo-accent-navy{border:1px solid #0d2d42;color:#0d2d42}.novo-chip.novo-color-aqua{color:#3d464d;background:#3bafda}.novo-chip.novo-color-aqua>*{color:inherit}.novo-chip.novo-accent-aqua{border:1px solid #3bafda;color:#3bafda}.novo-chip.novo-color-ocean{color:#fff;background:#4a89dc}.novo-chip.novo-color-ocean>*{color:inherit}.novo-chip.novo-accent-ocean{border:1px solid #4a89dc;color:#4a89dc}.novo-chip