novo-elements
Version:
778 lines (760 loc) • 226 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Injectable, HostBinding, Input, Directive, Host, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule, InjectionToken, Output, input, inject, DestroyRef, DOCUMENT, TemplateRef, ViewChild } from '@angular/core';
import { of, Subject, fromEvent, merge } from 'rxjs';
import { spacing } from 'novo-design-tokens';
import { BooleanInput, Helpers } from 'novo-elements/utils';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { hasModifierKey } from '@angular/cdk/keycodes';
import * as i1$1 from '@angular/cdk/overlay';
import { OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter, first, switchMap } from 'rxjs/operators';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { FormsModule } from '@angular/forms';
class NovoThemeOptions {
}
class NovoTheme {
constructor() {
this._defaultTheme = { themeName: 'modern-light' };
this.onThemeChange = new EventEmitter();
}
/** Name of the theme being used. defaults to `modern-light` */
get themeName() {
return this._currentTheme?.themeName || this._defaultTheme.themeName;
}
set themeName(value) {
this._currentTheme = { themeName: value };
this.changeTheme(this._currentTheme);
}
use(options) {
// future: don't change the theme if the theme given is already selected
this.changeTheme(options);
// this might become async in future
return of(options);
}
/**
* Changes the current theme
*/
changeTheme(theme) {
this._currentTheme = theme;
this.onThemeChange.emit({ themeName: theme.themeName, options: theme });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoTheme, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoTheme, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoTheme, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class AccentColorDirective {
get hb_textColor() {
// Support legacy classic theme... for now
if (this.theme.themeName === 'classic') {
return `novo-theme-${this.accent}`;
}
return `novo-accent-${this.accent}`;
}
constructor(theme, cdr) {
this.theme = theme;
this.cdr = cdr;
this.subscription = this.theme.onThemeChange.subscribe((event) => {
this.cdr.markForCheck();
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AccentColorDirective, deps: [{ token: NovoTheme }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: AccentColorDirective, isStandalone: false, selector: "[accent]", inputs: { accent: "accent" }, host: { properties: { "class": "this.hb_textColor" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AccentColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[accent]',
standalone: false,
}]
}], ctorParameters: () => [{ type: NovoTheme }, { type: i0.ChangeDetectorRef }], propDecorators: { accent: [{
type: Input
}], hb_textColor: [{
type: HostBinding,
args: ['class']
}] } });
class BackgroundColorDirective {
get hb_bgColor() {
return isValidColor$1(this.bg) ? 'novo-background-custom' : `novo-background-${this.bg}`;
}
get hb_bgStyle() {
return isValidColor$1(this.bg) ? this.bg : null;
}
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BackgroundColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: BackgroundColorDirective, isStandalone: false, selector: "[bg]", inputs: { bg: "bg" }, host: { properties: { "class": "this.hb_bgColor", "style.background-color": "this.hb_bgStyle" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BackgroundColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[bg]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { bg: [{
type: Input
}], hb_bgColor: [{
type: HostBinding,
args: ['class']
}], hb_bgStyle: [{
type: HostBinding,
args: ['style.background-color']
}] } });
function isValidColor$1(color) {
return color.startsWith('#') || color.startsWith('rgb');
}
class BorderDirective {
get hb_border() {
return `border-${this.border}`;
}
get hb_border_left() {
return this.borderLeft || this.bl || this.bx || this.borderX;
}
get hb_border_right() {
return this.borderRight || this.bt || this.bx || this.borderX;
}
get hb_border_top() {
return this.borderTop || this.bt || this.by || this.borderY;
}
get hb_border_bottom() {
return this.borderBottom || this.bt || this.by || this.borderY;
}
constructor(el) {
this.el = el;
this.borderStyle = 'solid';
this.borderColor = '#eaecef';
this.borderWidth = 1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BorderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: BorderDirective, isStandalone: false, selector: "[border], [bb], [borderBottom], [bt], [borderTop], [bl], [borderLeft], [br], [borderRight], [bx], [borderX], [by], [borderY]", inputs: { borderStyle: "borderStyle", borderColor: "borderColor", borderWidth: "borderWidth", border: "border", borderLeft: "borderLeft", bl: "bl", borderRight: "borderRight", br: "br", borderTop: "borderTop", bt: "bt", borderBottom: "borderBottom", bb: "bb", borderX: "borderX", bx: "bx", borderY: "borderY", by: "by" }, host: { properties: { "class": "this.hb_border", "style.border-left": "this.hb_border_left", "style.border-right": "this.hb_border_right", "style.border-top": "this.hb_border_top", "style.border-bottom": "this.hb_border_bottom" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BorderDirective, decorators: [{
type: Directive,
args: [{
selector: '[border], [bb], [borderBottom], [bt], [borderTop], [bl], [borderLeft], [br], [borderRight], [bx], [borderX], [by], [borderY]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { borderStyle: [{
type: Input
}], borderColor: [{
type: Input
}], borderWidth: [{
type: Input
}], border: [{
type: Input
}], borderLeft: [{
type: Input
}], bl: [{
type: Input
}], borderRight: [{
type: Input
}], br: [{
type: Input
}], borderTop: [{
type: Input
}], bt: [{
type: Input
}], borderBottom: [{
type: Input
}], bb: [{
type: Input
}], borderX: [{
type: Input
}], bx: [{
type: Input
}], borderY: [{
type: Input
}], by: [{
type: Input
}], hb_border: [{
type: HostBinding,
args: ['class']
}], hb_border_left: [{
type: HostBinding,
args: ['style.border-left']
}], hb_border_right: [{
type: HostBinding,
args: ['style.border-right']
}], hb_border_top: [{
type: HostBinding,
args: ['style.border-top']
}], hb_border_bottom: [{
type: HostBinding,
args: ['style.border-bottom']
}] } });
class TextColorDirective {
get hb_textColor() {
return isValidColor(this.txc) ? 'novo-text-custom' : `novo-text-${this.txc}`;
}
get hb_textStyle() {
return isValidColor(this.txc) ? this.txc : null;
}
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: TextColorDirective, isStandalone: false, selector: "[txc]", inputs: { txc: "txc" }, host: { properties: { "class": "this.hb_textColor", "style.color": "this.hb_textStyle" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[txc]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { txc: [{
type: Input
}], hb_textColor: [{
type: HostBinding,
args: ['class']
}], hb_textStyle: [{
type: HostBinding,
args: ['style.color']
}] } });
function isValidColor(color) {
return color.startsWith('#') || color.startsWith('rgb');
}
class FillColorDirective {
get hb_textColor() {
return `novo-fill-${this.fill}`;
}
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FillColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FillColorDirective, isStandalone: false, selector: "[fill]", inputs: { fill: "fill" }, host: { properties: { "class": "this.hb_textColor" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FillColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[fill]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fill: [{
type: Input
}], hb_textColor: [{
type: HostBinding,
args: ['class']
}] } });
class FlexDirective {
get flex() {
return this._flex;
}
set flex(value) {
if (!value) {
this._flex = '1 1 auto';
}
else {
this._flex = value;
}
}
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FlexDirective, isStandalone: false, selector: "[flex]", inputs: { flex: "flex" }, host: { properties: { "style.flex": "this.flex" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FlexDirective, decorators: [{
type: Directive,
args: [{
selector: '[flex]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { flex: [{
type: HostBinding,
args: ['style.flex']
}, {
type: Input
}] } });
/*
Prop CSS Property Theme Field
m, margin margin space
mt, marginTop margin-top space
mr, marginRight margin-right space
mb, marginBottom margin-bottom space
ml, marginLeft margin-left space
mx margin-left and margin-right space
my margin-top and margin-bottom space
p, padding padding space
pt, paddingTop padding-top space
pr, paddingRight padding-right space
pb, paddingBottom padding-bottom space
pl, paddingLeft padding-left space
px padding-left and padding-right space
py padding-top and padding-bottom space
*/
/*
// Selectors generated with the following code
const directions = ['Top', 'Right', 'Bottom', 'Left', 'X', 'Y'];
const abbrDirections = directions.map((d) => d.slice(0, 1).toLowerCase());
const marginAttrs = [
'[m]',
'[margin]',
...directions.map((dir) => `[margin${dir}]`),
...abbrDirections.map((dir) => `[m${dir}]`),
];
const paddingAttrs = [
'[p]',
'[padding]',
...directions.map((dir) => `[padding${dir}]`),
...abbrDirections.map((dir) => `[p${dir}]`),
];
const selectors = [...marginAttrs, ...paddingAttrs];
*/
const getSpacingToken = (value) => {
if (Object.keys(spacing).includes(value)) {
return spacing[value];
}
// TODO: Maybe Validate Value ie.(rem, px)
return value;
};
class MarginDirective {
get hb_margin() {
return `margin-${this.margin || this.m}`;
}
get hb_margin_left() {
return getSpacingToken(this.marginLeft || this.ml || this.mx || this.marginX);
}
get hb_margin_right() {
return getSpacingToken(this.marginRight || this.mr || this.mx || this.marginX);
}
get hb_margin_top() {
return getSpacingToken(this.marginTop || this.mt || this.my || this.marginY);
}
get hb_margin_bottom() {
return getSpacingToken(this.marginBottom || this.mb || this.my || this.marginY);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MarginDirective, isStandalone: false, selector: "[m],[margin],[marginTop],[marginRight],[marginBottom],[marginLeft],[marginX],[marginY],[mt],[mr],[mb],[ml],[mx],[my]", inputs: { margin: "margin", m: "m", marginLeft: "marginLeft", ml: "ml", marginRight: "marginRight", mr: "mr", marginTop: "marginTop", mt: "mt", marginBottom: "marginBottom", mb: "mb", marginX: "marginX", mx: "mx", marginY: "marginY", my: "my" }, host: { properties: { "class": "this.hb_margin", "style.margin-left": "this.hb_margin_left", "style.margin-right": "this.hb_margin_right", "style.margin-top": "this.hb_margin_top", "style.margin-bottom": "this.hb_margin_bottom" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarginDirective, decorators: [{
type: Directive,
args: [{
selector: '[m],[margin],[marginTop],[marginRight],[marginBottom],[marginLeft],[marginX],[marginY],[mt],[mr],[mb],[ml],[mx],[my]',
standalone: false,
}]
}], propDecorators: { margin: [{
type: Input
}], m: [{
type: Input
}], marginLeft: [{
type: Input
}], ml: [{
type: Input
}], marginRight: [{
type: Input
}], mr: [{
type: Input
}], marginTop: [{
type: Input
}], mt: [{
type: Input
}], marginBottom: [{
type: Input
}], mb: [{
type: Input
}], marginX: [{
type: Input
}], mx: [{
type: Input
}], marginY: [{
type: Input
}], my: [{
type: Input
}], hb_margin: [{
type: HostBinding,
args: ['class']
}], hb_margin_left: [{
type: HostBinding,
args: ['style.margin-left']
}], hb_margin_right: [{
type: HostBinding,
args: ['style.margin-right']
}], hb_margin_top: [{
type: HostBinding,
args: ['style.margin-top']
}], hb_margin_bottom: [{
type: HostBinding,
args: ['style.margin-bottom']
}] } });
class PaddingDirective {
get hb_padding() {
return `padding-${this.padding || this.p}`;
}
get hb_padding_left() {
return getSpacingToken(this.paddingLeft || this.pl || this.px || this.paddingX);
}
get hb_padding_right() {
return getSpacingToken(this.paddingRight || this.pr || this.px || this.paddingX);
}
get hb_padding_top() {
return getSpacingToken(this.paddingTop || this.pt || this.py || this.paddingY);
}
get hb_padding_bottom() {
return getSpacingToken(this.paddingBottom || this.pb || this.py || this.paddingY);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaddingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: PaddingDirective, isStandalone: false, selector: "[p],[padding],[paddingTop],[paddingRight],[paddingBottom],[paddingLeft],[paddingX],[paddingY],[pt],[pr],[pb],[pl],[px],[py]", inputs: { padding: "padding", p: "p", paddingLeft: "paddingLeft", pl: "pl", paddingRight: "paddingRight", pr: "pr", paddingTop: "paddingTop", pt: "pt", paddingBottom: "paddingBottom", pb: "pb", paddingX: "paddingX", px: "px", paddingY: "paddingY", py: "py" }, host: { properties: { "class": "this.hb_padding", "style.padding-left": "this.hb_padding_left", "style.padding-right": "this.hb_padding_right", "style.padding-top": "this.hb_padding_top", "style.padding-bottom": "this.hb_padding_bottom" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaddingDirective, decorators: [{
type: Directive,
args: [{
selector: '[p],[padding],[paddingTop],[paddingRight],[paddingBottom],[paddingLeft],[paddingX],[paddingY],[pt],[pr],[pb],[pl],[px],[py]',
standalone: false,
}]
}], propDecorators: { padding: [{
type: Input
}], p: [{
type: Input
}], paddingLeft: [{
type: Input
}], pl: [{
type: Input
}], paddingRight: [{
type: Input
}], pr: [{
type: Input
}], paddingTop: [{
type: Input
}], pt: [{
type: Input
}], paddingBottom: [{
type: Input
}], pb: [{
type: Input
}], paddingX: [{
type: Input
}], px: [{
type: Input
}], paddingY: [{
type: Input
}], py: [{
type: Input
}], hb_padding: [{
type: HostBinding,
args: ['class']
}], hb_padding_left: [{
type: HostBinding,
args: ['style.padding-left']
}], hb_padding_right: [{
type: HostBinding,
args: ['style.padding-right']
}], hb_padding_top: [{
type: HostBinding,
args: ['style.padding-top']
}], hb_padding_bottom: [{
type: HostBinding,
args: ['style.padding-bottom']
}] } });
class GapDirective {
get hb_gap() {
return getSpacingToken(this.gap);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: GapDirective, isStandalone: false, selector: "[gap]", inputs: { gap: "gap" }, host: { properties: { "style.gap": "this.hb_gap" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GapDirective, decorators: [{
type: Directive,
args: [{
selector: '[gap]',
standalone: false,
}]
}], propDecorators: { gap: [{
type: Input
}], hb_gap: [{
type: HostBinding,
args: ['style.gap']
}] } });
class SwitchCasesDirective {
constructor(viewContainer, templateRef, ngSwitch) {
this.viewContainer = viewContainer;
this.templateRef = templateRef;
this._created = false;
this.ngSwitch = ngSwitch;
}
ngOnInit() {
(this.novoSwitchCases || []).forEach(() => this.ngSwitch._addCase());
}
ngDoCheck() {
let enforce = false;
(this.novoSwitchCases || []).forEach((value) => (enforce = this.ngSwitch._matchCase(value) || enforce));
this.enforceState(enforce);
}
enforceState(created) {
if (created && !this._created) {
this._created = true;
this.viewContainer.createEmbeddedView(this.templateRef);
}
else if (!created && this._created) {
this._created = false;
this.viewContainer.clear();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SwitchCasesDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1.NgSwitch, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: SwitchCasesDirective, isStandalone: false, selector: "[novoSwitchCases]", inputs: { novoSwitchCases: "novoSwitchCases" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SwitchCasesDirective, decorators: [{
type: Directive,
args: [{
selector: '[novoSwitchCases]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1.NgSwitch, decorators: [{
type: Host
}] }], propDecorators: { novoSwitchCases: [{
type: Input
}] } });
class ThemeColorDirective {
get hb_textColor() {
return `novo-theme-${this.theme}`;
}
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ThemeColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ThemeColorDirective, isStandalone: false, selector: "[theme]", inputs: { theme: "theme" }, host: { properties: { "class": "this.hb_textColor" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ThemeColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[theme]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { theme: [{
type: Input
}], hb_textColor: [{
type: HostBinding,
args: ['class']
}] } });
var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata$3 = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
class VisibleDirective {
get hb_visibility() {
return this.visible ? '' : 'novo-visibility-hidden';
}
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VisibleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: VisibleDirective, isStandalone: false, selector: "[visible]", inputs: { visible: "visible" }, host: { properties: { "class": "this.hb_visibility" } }, ngImport: i0 }); }
}
__decorate$3([
BooleanInput(),
__metadata$3("design:type", Boolean)
], VisibleDirective.prototype, "visible", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VisibleDirective, decorators: [{
type: Directive,
args: [{
selector: '[visible]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visible: [{
type: Input
}, {
type: HostBinding,
args: ['class']
}], hb_visibility: [{
type: HostBinding,
args: ['class']
}] } });
class NovoTemplate {
constructor(template) {
this.template = template;
}
getType() {
return this.name;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoTemplate, isStandalone: false, selector: "[novoTemplate]", inputs: { type: "type", name: ["novoTemplate", "name"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoTemplate, decorators: [{
type: Directive,
args: [{
selector: '[novoTemplate]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{
type: Input
}], name: [{
type: Input,
args: ['novoTemplate']
}] } });
/**
* Component that shows a simplified checkbox without including any kind of "real" checkbox.
* Meant to be used when the checkbox is purely decorative and a large number of them will be
* included, such as for the options in a multi-select. Uses no SVGs or complex animations.
* Note that theming is meant to be handled by the parent element, e.g.
* `novo-primary .novo-pseudo-checkbox`.
*
* Note that this component will be completely invisible to screen-reader users. This is *not*
* interchangeable with `<novo-checkbox>` and should *not* be used if the user would directly
* interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
* of more complex components that appropriately handle selected / checked state.
* @docs-private
*/
class NovoPseudoCheckbox {
constructor(_animationMode) {
this._animationMode = _animationMode;
/** Display state of the checkbox. */
this.state = 'unchecked';
/** Display state of the checkbox. */
this.shape = 'box';
/** Whether the checkbox is disabled. */
this.disabled = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckbox, deps: [{ token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoPseudoCheckbox, isStandalone: false, selector: "novo-pseudo-checkbox", inputs: { state: "state", shape: "shape", disabled: "disabled" }, host: { properties: { "class.novo-pseudo-checkbox-indeterminate": "state === \"indeterminate\"", "class.novo-pseudo-checkbox-checked": "state === \"checked\"", "class.novo-pseudo-checkbox-disabled": "disabled", "class._novo-animation-noopable": "_animationMode === \"NoopAnimations\"" }, classAttribute: "novo-pseudo-checkbox" }, ngImport: i0, template: ` <i
[class.bhi-checkbox-empty]="state === 'unchecked' && shape === 'box'"
[class.bhi-checkbox-filled]="state === 'checked' && shape === 'box'"
[class.bhi-checkbox-indeterminate]="state === 'indeterminate' && shape === 'box'"
[class.bhi-circle-o]="state === 'unchecked' && shape === 'circle'"
[class.bhi-check-circle-filled]="state === 'checked' && shape === 'circle'"
[class.bhi-circle]="state === 'indeterminate' && shape === 'circle'"
[class.bhi-box-empty]="state === 'unchecked' && shape === 'line'"
[class.bhi-check]="state === 'checked' && shape === 'line'"
[class.bhi-box-minus-o]="state === 'indeterminate' && shape === 'line'"
></i>`, isInline: true, styles: [".novo-pseudo-checkbox{width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:color .3s ease-in-out}.novo-pseudo-checkbox.novo-pseudo-checkbox-checked,.novo-pseudo-checkbox.novo-pseudo-checkbox-indeterminate{color:#4a89dc;animation:iconEnter .16s ease-in-out}.novo-pseudo-checkbox i{font-size:1.4rem;line-height:1rem}.novo-pseudo-checkbox-disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckbox, decorators: [{
type: Component,
args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'novo-pseudo-checkbox', template: ` <i
[class.bhi-checkbox-empty]="state === 'unchecked' && shape === 'box'"
[class.bhi-checkbox-filled]="state === 'checked' && shape === 'box'"
[class.bhi-checkbox-indeterminate]="state === 'indeterminate' && shape === 'box'"
[class.bhi-circle-o]="state === 'unchecked' && shape === 'circle'"
[class.bhi-check-circle-filled]="state === 'checked' && shape === 'circle'"
[class.bhi-circle]="state === 'indeterminate' && shape === 'circle'"
[class.bhi-box-empty]="state === 'unchecked' && shape === 'line'"
[class.bhi-check]="state === 'checked' && shape === 'line'"
[class.bhi-box-minus-o]="state === 'indeterminate' && shape === 'line'"
></i>`, host: {
class: 'novo-pseudo-checkbox',
'[class.novo-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
'[class.novo-pseudo-checkbox-checked]': 'state === "checked"',
'[class.novo-pseudo-checkbox-disabled]': 'disabled',
'[class._novo-animation-noopable]': '_animationMode === "NoopAnimations"',
}, standalone: false, styles: [".novo-pseudo-checkbox{width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:color .3s ease-in-out}.novo-pseudo-checkbox.novo-pseudo-checkbox-checked,.novo-pseudo-checkbox.novo-pseudo-checkbox-indeterminate{color:#4a89dc;animation:iconEnter .16s ease-in-out}.novo-pseudo-checkbox i{font-size:1.4rem;line-height:1rem}.novo-pseudo-checkbox-disabled{cursor:default}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [ANIMATION_MODULE_TYPE]
}] }], propDecorators: { state: [{
type: Input
}], shape: [{
type: Input
}], disabled: [{
type: Input
}] } });
class NovoPseudoCheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckboxModule, declarations: [NovoPseudoCheckbox], exports: [NovoPseudoCheckbox] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckboxModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoPseudoCheckboxModule, decorators: [{
type: NgModule,
args: [{
imports: [],
exports: [NovoPseudoCheckbox],
declarations: [NovoPseudoCheckbox],
}]
}] });
/** Mixin to augment a directive with a `disabled` property. */
function mixinDisabled(base) {
return class extends base {
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
constructor(...args) {
super(...args);
this._disabled = false;
}
};
}
/**
* Injection token used to provide the parent component to options.
*/
const NOVO_OPTION_PARENT_COMPONENT = new InjectionToken('NOVO_OPTION_PARENT_COMPONENT');
// Notes on the accessibility pattern used for `novo-optgroup`.
// The option group has two different "modes": regular and novoInert. The regular mode uses the
// recommended a11y pattern which has `role="group"` on the group element with `aria-labelledby`
// pointing to the label. This works for `novo-select`, but it seems to hit a bug for autocomplete
// under VoiceOver where the group doesn't get read out at all. The bug appears to be that if
// there's __any__ a11y-related attribute on the group (e.g. `role` or `aria-labelledby`),
// VoiceOver on Safari won't read it out.
// We've introduced the `novoInert` mode as a workaround. Under this mode, all a11y attributes are
// removed from the group, and we get the screen reader to read out the group label by mirroring it
// inside an invisible element in the option. This is sub-optimal, because the screen reader will
// repeat the group label on each navigation, whereas the default pattern only reads the group when
// the user enters a new group. The following alternate approaches were considered:
// 1. Reading out the group label using the `LiveAnnouncer` solves the problem, but we can't control
// when the text will be read out so sometimes it comes in too late or never if the user
// navigates quickly.
// 2. `<novo-option aria-describedby="groupLabel"` - This works on Safari, but VoiceOver in Chrome
// won't read out the description at all.
// 3. `<novo-option aria-labelledby="optionLabel groupLabel"` - This works on Chrome, but Safari
// doesn't read out the text at all. Furthermore, on
// Boilerplate for applying mixins to NovoOptgroup.
class NovoOptgroupBase {
constructor() {
/** Unique id for the underlying label. */
this._labelId = `novo-optgroup-label-${_uniqueOptgroupIdCounter++}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoOptgroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NovoOptgroupBase, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoOptgroupBase, decorators: [{
type: Directive
}] });
const NovoOptgroupMixinBase = mixinDisabled(NovoOptgroupBase);
// Counter for unique group ids.
let _uniqueOptgroupIdCounter = 0;
/**
* Injection token that can be used to reference instances of `NovoOptgroup`. It serves as
* alternative token to the actual `NovoOptgroup` class which could cause unnecessary
* retention of the class and its component metadata.
*/
const NOVO_OPTGROUP = new InjectionToken('NovoOptgroup');
/**
* Component that is used to group instances of `novo-option`.
*/
class NovoOptgroup extends NovoOptgroupMixinBase {
constructor(parent) {
super();
this._novoInert = parent?.inertGroups ?? false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoOptgroup, deps: [{ token: NOVO_OPTION_PARENT_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoOptgroup, isStandalone: false, selector: "novo-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "attr.role": "_novoInert ? null : \"group\"", "attr.aria-disabled": "_novoInert ? null : disabled.toString()", "attr.aria-labelledby": "_novoInert ? null : _labelId", "class.novo-optgroup-disabled": "disabled" }, classAttribute: "novo-optgroup" }, providers: [{ provide: NOVO_OPTGROUP, useExisting: NovoOptgroup }], exportAs: ["novoOptgroup"], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"label\" class=\"novo-optgroup-label\" aria-hidden=\"true\" [id]=\"_labelId\">{{ label }}</span>\n<ng-content select=\"novo-option, ng-container, novo-divider, cdk-virtual-scroll-viewport\"></ng-content>", styles: [".novo-optgroup-label{font-weight:500;word-break:word-break;overflow-wrap:break-word;line-height:1.375;color:var(--text-muted);font-size:var(--font-size-label);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;color:#9e9e9e;cursor:default;flex:1;padding:5px 10px;display:block}.novo-optgroup-label.text-capitalize{text-transform:capitalize}.novo-optgroup-label.text-uppercase{text-transform:uppercase}.novo-optgroup-label.text-nowrap{white-space:nowrap}.novo-optgroup-label.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.novo-optgroup-label.text-size-default{font-size:inherit}.novo-optgroup-label.text-size-body{font-size:1.3rem}.novo-optgroup-label.text-size-xs{font-size:1rem}.novo-optgroup-label.text-size-sm{font-size:1.2rem}.novo-optgroup-label.text-size-md{font-size:1.3rem}.novo-optgroup-label.text-size-lg{font-size:1.6rem}.novo-optgroup-label.text-size-xl{font-size:2rem}.novo-optgroup-label.text-size-2xl{font-size:2.6rem}.novo-optgroup-label.text-size-3xl{font-size:3.2rem}.novo-optgroup-label.text-size-smaller{font-size:.8em}.novo-optgroup-label.text-size-larger{font-size:1.2em}.novo-optgroup-label.text-color-black{color:#000}.novo-optgroup-label.text-color-white{color:#fff}.novo-optgroup-label.text-color-gray,.novo-optgroup-label.text-color-grey{color:#9e9e9e}.novo-optgroup-label.text-color-offWhite,.novo-optgroup-label.text-color-bright{color:#f7f7f7}.novo-optgroup-label.text-color-light{color:#dbdbdb}.novo-optgroup-label.text-color-neutral{color:#4f5361}.novo-optgroup-label.text-color-dark{color:#3d464d}.novo-optgroup-label.text-color-orange{color:#ff6900}.novo-optgroup-label.text-color-navigation{color:#202945}.novo-optgroup-label.text-color-skyBlue{color:#009bdf}.novo-optgroup-label.text-color-steel{color:#5b6770}.novo-optgroup-label.text-color-metal{color:#637893}.novo-optgroup-label.text-color-sand{color:#f4f4f4}.novo-optgroup-label.text-color-silver{color:#e2e2e2}.novo-optgroup-label.text-color-stone{color:#bebebe}.novo-optgroup-label.text-color-ash{color:#a0a0a0}.novo-optgroup-label.text-color-slate{color:#707070}.novo-optgroup-label.text-color-onyx{color:#526980}.novo-optgroup-label.text-color-charcoal{color:#282828}.novo-optgroup-label.text-color-moonlight{color:#1a242f}.novo-optgroup-label.text-color-midnight{color:#202945}.novo-optgroup-label.text-color-darkness{color:#161f27}.novo-optgroup-label.text-color-navy{color:#0d2d42}.novo-optgroup-label.text-color-aqua{color:#3bafda}.novo-optgroup-label.text-color-ocean{color:#4a89dc}.novo-optgroup-label.text-color-mint{color:#37bc9b}.novo-optgroup-label.text-color-grass{color:#8cc152}.novo-optgroup-label.text-color-sunflower{color:#f6b042}.novo-optgroup-label.text-color-bittersweet{color:#eb6845}.novo-optgroup-label.text-color-grapefruit{color:#da4453}.novo-optgroup-label.text-color-carnation{color:#d770ad}.novo-optgroup-label.text-color-lavender{color:#967adc}.novo-optgroup-label.text-color-mountain{color:#9678b6}.novo-optgroup-label.text-color-info,.novo-optgroup-label.text-color-positive{color:#4a89dc}.novo-optgroup-label.text-color-success{color:#8cc152}.novo-optgroup-label.text-color-negative,.novo-optgroup-label.text-color-danger,.novo-optgroup-label.text-color-error{color:#da4453}.novo-optgroup-label.text-color-warning{color:#f6b042}.novo-optgroup-label.text-color-empty{color:#cccdcc}.novo-optgroup-label.text-color-disabled{color:#bebebe}.novo-optgroup-label.text-color-background{color:#f7f7f7}.novo-optgroup-label.text-color-backgroundDark{color:#e2e2e2}.novo-optgroup-label.text-color-presentation{color:#5b6770}.novo-optgroup-label.text-color-bullhorn{color:#ff6900}.novo-optgroup-label.text-color-pulse{color:#3bafda}.novo-optgroup-label.text-color-company{color:#39d}.novo-optgroup-label.text-color-candidate{color:#4b7}.novo-optgroup-label.text-color-lead{color:#a69}.novo-optgroup-label.text-color-contact,.novo-optgroup-label.text-color-clientcontact{color:#fa4}.novo-optgroup-label.text-color-opportunity{color:#625}.novo-optgroup-label.text-color-job,.novo-optgroup-label.text-color-joborder{color:#b56}.novo-optgroup-label.text-color-submission{color:#a9adbb}.novo-optgroup-label.text-color-sendout{color:#747884}.novo-optgroup-label.text-color-placement{color:#0b344f}.novo-optgroup-label.text-color-note{color:#747884}.novo-optgroup-label.text-color-contract{color:#454ea0}.novo-optgroup-label.text-color-task{color:#4f5361}.novo-optgroup-label.text-color-jobCode,.novo-optgroup-label.text-color-earnCode,.novo-optgroup-label.text-color-invoiceStatement,.novo-optgroup-label.text-color-billableCharge,.novo-optgroup-label.text-color-payableCharge,.novo-optgroup-label.text-color-user,.novo-optgroup-label.text-color-corporateUser,.novo-optgroup-label.text-color-distributionList,.novo-optgroup-label.text-color-credential,.novo-optgroup-label.text-color-person{color:#696d79}.novo-optgroup-label.margin-before{margin-top:.4rem}.novo-optgroup-label.margin-after{margin-bottom:.8rem}.novo-optgroup-label.text-length-small{max-width:40ch}.novo-optgroup-label.text-length-medium{max-width:55ch}.novo-optgroup-label.text-length-large{max-width:70ch}.novo-optgroup-label.text-weight-hairline{font-weight:100}.novo-optgroup-label.text-weight-thin{font-weight:200}.novo-optgroup-label.text-weight-light{font-weight:300}.novo-optgroup-label.text-weight-normal{font-weight:400}.novo-optgroup-label.text-weight-medium{font-weight:500}.novo-optgroup-label.text-weight-semibold{font-weight:600}.novo-optgroup-label.text-weight-bold{font-weight:700}.novo-optgroup-label.text-weight-extrabold{font-weight:800}.novo-optgroup-label.text-weight-heavy{font-weight:900}.novo-optgroup-label.text-weight-lighter{font-weight:lighter}.novo-optgroup-label.text-weight-bolder{font-weight:bolder}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoOptgroup, decorators: [{
type: Component,
args: [{ selector: 'novo-optgroup', exportAs: 'novoOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled', 'label'], host: {
class: 'novo-optgroup',
'[attr.role]': '_novoInert ? null : "group"',
'[attr.aria-disabled]': '_novoInert ? null : disabled.toString()',
'[attr.aria-labelledby]': '_novoInert ? null : _labelId',
'[class.novo-optgroup-disabled]': 'disabled',
}, providers: [{ provide: NOVO_OPTGROUP, useExisting: NovoOptgroup }], standalone: false, template: "<span *ngIf=\"label\" class=\"novo-optgroup-label\" aria-hidden=\"true\" [id]=\"_labelId\">{{ label }}</span>\n<ng-content select=\"novo-option, ng-container, novo-divider, cdk-virtual-scroll-viewport\"></ng-content>", styles: [".novo-optgroup-label{font-weight:500;word-break:word-break;overflow-wrap:break-word;line-height:1.375;color:var(--text-muted);font-size:var(--font-size-label);transition:color .2s ease-out,opacity .2s ease-out;vertical-align:middle;color:#9e9e9e;cursor:default;flex:1;padding:5px 10px;display:block}.novo-optgroup-label.text-capitalize{text-transform:capitalize}.novo-optgroup-label.text-uppercase{text-transform:uppercase}.novo-optgroup-label.text-nowrap{white-space:nowrap}.novo-optgroup-label.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.novo-optgroup-label.text-size-default{font-size:inherit}.novo-optgroup-label.text-size-body{font-size:1.3rem}.novo-optgroup-label.text-size-xs{font-size:1rem}.novo-optgroup-label.text-size-sm{font-size:1.2rem}.novo-optgroup-label.text-size-md{font-size:1.3rem}.novo-optgroup-label.text-size-lg{font-size:1.6rem}.novo-optgroup-label.text-size-xl{font-size:2rem}.novo-optgroup-label.text-size-2xl{font-size:2.6rem}.novo-optgroup-label.text-size-3xl{font-size:3.2rem}.novo-optgroup-label.text-size-smaller{font-size:.8em}.novo-optgroup-label.text-size-larger{font-size:1.2em}.novo-optgroup-label.text-color-black{color:#000}.novo-optgroup-label.text-color-white{color:#fff}.novo-optgroup-label.text-color-gray,.novo-optgroup-label.text-color-grey{color:#9e9e9e}.novo-optgroup-label.text-color-offWhite,.novo-optgroup-label.text-color-bright{color:#f7f7f7}.novo-optgroup-label.text-color-light{color:#dbdbdb}.novo-optgroup-label.text-color-neutral{color:#4f5361}.novo-optgroup-label.text-color-dark{color:#3d464d}.novo-optgroup-label.text-color-orange{color:#ff6900}.novo-optgroup-label.text-color-navigation{color:#202945}.novo-optgroup-label.text-color-skyBlue{color:#009bdf}.novo-optgroup-label.text-color-steel{color:#5b6770}.novo-optgroup-label.text-color-metal{color:#637893}.novo-optgroup-label.text-color-sand{color:#f4f4f4}.novo-optgroup-label.text-color-silver{color:#e2e2e2}.novo-optgroup-label.text-color-stone{color:#bebebe}.novo-optgroup-label.text-color-ash{color:#a0a0a0}.novo-optgroup-label.text-color-slate{color:#707070}.novo-optgroup-label.text-color-onyx{color:#526980}.novo-optgroup-label.text-color-charcoal{color:#282828}.novo-optgroup-label.text-color-moonlight{color:#1a242f}.novo-optgroup-label.text-color-midnight{color:#202945}.novo-optgroup-label.text-color-darkness{color:#161f27}.novo-optgroup-label.text-color-navy{color:#0d2d42}.novo-optgroup-label.text-color-aqua{color:#3bafda}.novo-optgroup-label.text-color-ocean{color:#4a89dc}.novo-optgroup-label.text-color-mint{color:#37bc9b}.novo-optgroup-label.text-color-grass{color:#8cc152}.novo-optgroup-label.text-color-sunflower{color:#f6b042}.novo-optgroup-label.text-color-bittersweet{color:#eb6845}.novo-optgroup-label.text-color-grapefruit{color:#da4453}.novo-optgroup-label.text-color-carnation{color:#d770ad}.novo-optgroup-label.text-color-lavender{color:#967adc}.novo-optgroup-label.text-color-mountain{color:#9678b6}.novo-optgroup-label.text-color-info,.novo-optgroup-label.text-color-positive{color:#4a89dc}.novo-optgroup-label.text-color-success{color:#8cc152}.novo-optgroup-label.text-color-negative,.novo-optgroup-label.text-color-danger,.novo-optgroup-label.text-color-error{color:#da4453}.novo-optgroup-label.text-color-warning{colo