novo-elements 13.0.0 → 13.1.0-next.2

package/elements/chips/index.d.ts

@@ -594,6 +594,9 @@ declare class NovoChipsElement implements OnInit, ControlValueAccessor {
     get value(): any;
     set value(selected: any);
     clearValue(): void;
+    getDynamicClasses(item: any): string | string[] | {
+        [className: string]: boolean;
+    } | null;
     setItems(): void;
     getLabelFromOptions(value: any): {
         value: any;

package/elements/form/index.d.ts

@@ -11,8 +11,10 @@ import { NovoToastService, ToastOptions } from 'novo-elements/elements/toast';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i5 from '@angular/forms';
 import { UntypedFormGroup, FormBuilder, FormControl, ControlValueAccessor, NgForm, FormGroupDirective, NgControl, FormGroup } from '@angular/forms';
-import * as i29 from 'novo-elements/elements/common';
-import { NovoTemplate, CanUpdateErrorStateCtor, ErrorStateMatcher } from 'novo-elements/elements/common';
+import * as i17 from 'novo-elements/elements/common';
+import { NovoTemplate, NovoOverlayTemplateComponent, CanUpdateErrorStateCtor, ErrorStateMatcher } from 'novo-elements/elements/common';
+import * as i16 from 'novo-elements/elements/places';
+import { PlacesSettings, PlacesListComponent } from 'novo-elements/elements/places';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i13 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -32,8 +34,8 @@ import * as i10$1 from 'novo-elements/elements/radio';
 import * as i11$1 from 'novo-elements/elements/tiles';
 import * as i14$1 from 'novo-elements/elements/chips';
 import * as i15$1 from 'novo-elements/elements/date-picker';
-import * as i16 from 'novo-elements/elements/time-picker';
-import * as i17 from 'novo-elements/elements/date-time-picker';
+import * as i16$1 from 'novo-elements/elements/time-picker';
+import * as i17$1 from 'novo-elements/elements/date-time-picker';
 import * as i18 from 'novo-elements/addons/ckeditor';
 import * as i20 from 'novo-elements/elements/quick-note';
 import * as i21 from 'novo-elements/elements/header';
@@ -989,6 +991,31 @@ declare class NovoDynamicFormElement implements OnChanges, OnInit, AfterContentI
     static ɵcmp: i0.ɵɵComponentDeclaration<NovoDynamicFormElement, "novo-dynamic-form", never, { "controls": { "alias": "controls"; "required": false; }; "fieldsets": { "alias": "fieldsets"; "required": false; }; "form": { "alias": "form"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "hideNonRequiredFields": { "alias": "hideNonRequiredFields"; "required": false; }; "autoFocusFirstField": { "alias": "autoFocusFirstField"; "required": false; }; }, {}, ["customTemplates"], ["form-title", "form-subtitle"], false, never>;
 }
 
+interface AddressLookupResult {
+    address1?: string;
+    address2?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    countryName?: string;
+    countryCode?: string;
+    formattedAddress?: string;
+    location?: {
+        latitude: number;
+        longitude: number;
+    };
+    viewport?: {
+        northeast: {
+            latitude: number;
+            longitude: number;
+        };
+        southwest: {
+            latitude: number;
+            longitude: number;
+        };
+    };
+    placeId?: string;
+}
 interface NovoAddressSubfieldConfig {
     label: string;
     required: boolean;
@@ -1008,18 +1035,19 @@ interface NovoAddressConfig {
     zip?: NovoAddressSubfieldConfig;
     countryID?: NovoAddressSubfieldConfig;
 }
-declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoCheck {
+declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoCheck, OnDestroy {
     labels: NovoLabelService;
+    addressConfig: PlacesSettings;
     config: NovoAddressConfig;
-    private _readOnly;
-    set readOnly(readOnly: boolean);
-    get readOnly(): boolean;
-    private previousRequiredState;
+    address1ElRef: ElementRef;
+    overlay: NovoOverlayTemplateComponent;
+    placesList: PlacesListComponent;
+    debouncedSearch: string;
+    private searchTerms$;
+    private searchSubscription;
     states: Array<any>;
     fieldList: Array<string>;
     model: any;
-    onModelChange: Function;
-    onModelTouched: Function;
     focused: any;
     invalid: any;
     disabled: any;
@@ -1032,8 +1060,15 @@ declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoChec
     focus: EventEmitter<any>;
     blur: EventEmitter<any>;
     validityChange: EventEmitter<any>;
-    constructor(labels: NovoLabelService);
+    private previousRequiredState;
+    constructor(labels: NovoLabelService, addressConfig: PlacesSettings);
+    private _readOnly;
+    get readOnly(): boolean;
+    set readOnly(readOnly: boolean);
+    onModelChange: Function;
+    onModelTouched: Function;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     initConfig(): void;
     ngDoCheck(): void;
     isValid(field: string): void;
@@ -1043,6 +1078,14 @@ declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoChec
     isBlurred(event: Event, field: string): void;
     onCountryChange(evt: any): void;
     onStateChange(evt: any): void;
+    onAddress1Input(event: Event): void;
+    onMatchesUpdated(matches: any[]): void;
+    onAddress1Keydown(event: KeyboardEvent): void;
+    onPlaceSelected(placeDetail: AddressLookupResult & {
+        address_components?: any[];
+        formatted_address?: string;
+    }): void;
+    private parseGooglePlaceDetail;
     setStateLabel(model: any): void;
     updateStates(): void;
     getStateOptions(filter: string, countryID: number): string[];
@@ -1052,7 +1095,7 @@ declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoChec
     registerOnTouched(fn: Function): void;
     private getDefaultStateConfig;
     private getDefaultCountryConfig;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NovoAddressElement, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoAddressElement, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NovoAddressElement, "novo-address", never, { "config": { "alias": "config"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, { "change": "change"; "focus": "focus"; "blur": "blur"; "validityChange": "validityChange"; }, never, never, false, never>;
 }
 
@@ -1230,7 +1273,7 @@ declare class NumberRangeComponent implements OnInit, OnDestroy, ControlValueAcc
 
 declare class NovoFormExtrasModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFormExtrasModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoFormExtrasModule, [typeof NovoAddressElement, typeof NovoFileInputElement, typeof NumberRangeComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.NovoPipesModule, typeof i7.NovoButtonModule, typeof i8.NovoSelectModule, typeof i9.NovoPickerModule, typeof i10.NovoLoadingModule, typeof i11.NovoTooltipModule, typeof i12.NovoCheckboxModule, typeof i13.DragDropModule, typeof i14.NovoFlexModule, typeof i15.NovoFieldModule, typeof i5.ReactiveFormsModule], [typeof NovoAddressElement, typeof NovoFileInputElement, typeof NumberRangeComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoFormExtrasModule, [typeof NovoAddressElement, typeof NovoFileInputElement, typeof NumberRangeComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.NovoPipesModule, typeof i7.NovoButtonModule, typeof i8.NovoSelectModule, typeof i9.NovoPickerModule, typeof i10.NovoLoadingModule, typeof i11.NovoTooltipModule, typeof i12.NovoCheckboxModule, typeof i13.DragDropModule, typeof i14.NovoFlexModule, typeof i15.NovoFieldModule, typeof i5.ReactiveFormsModule, typeof i16.GooglePlacesModule, typeof i17.NovoOverlayModule], [typeof NovoAddressElement, typeof NovoFileInputElement, typeof NumberRangeComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoFormExtrasModule>;
 }
 
@@ -1275,7 +1318,7 @@ declare class NovoFormElement implements AfterContentInit, OnInit {
 
 declare class NovoFormModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoFormModule, [typeof NovoAutoSize, typeof NovoControlElement, typeof NovoDynamicFormElement, typeof NovoFormElement, typeof NovoFieldsetElement, typeof NovoFieldsetHeaderElement, typeof ControlConfirmModal, typeof ControlPromptModal, typeof NovoControlGroup, typeof NovoControlTemplates], [typeof i4.CommonModule, typeof i8$1.OverlayModule, typeof i5.ReactiveFormsModule, typeof i10$1.NovoRadioModule, typeof i11$1.NovoTilesModule, typeof i8.NovoSelectModule, typeof i9.NovoPickerModule, typeof i14$1.NovoChipsModule, typeof i15$1.NovoDatePickerModule, typeof i16.NovoTimePickerModule, typeof i17.NovoDateTimePickerModule, typeof i18.NovoNovoCKEditorModule, typeof NovoFormExtrasModule, typeof i20.NovoQuickNoteModule, typeof i17.NovoDateTimePickerModule, typeof i21.NovoHeaderModule, typeof i11.NovoTooltipModule, typeof i23.NovoPopOverModule, typeof i24.IMaskModule, typeof i25.NovoTipWellModule, typeof i26.NovoModalModule, typeof i7.NovoButtonModule, typeof i28.NovoCodeEditorModule, typeof i29.NovoCommonModule, typeof i12.NovoCheckboxModule, typeof i31.NovoIconModule, typeof i10$1.NovoRadioModule, typeof i32.NovoSwitchModule], [typeof NovoAutoSize, typeof NovoDynamicFormElement, typeof NovoControlElement, typeof NovoFormElement, typeof NovoFieldsetHeaderElement, typeof NovoControlGroup, typeof NovoControlTemplates]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoFormModule, [typeof NovoAutoSize, typeof NovoControlElement, typeof NovoDynamicFormElement, typeof NovoFormElement, typeof NovoFieldsetElement, typeof NovoFieldsetHeaderElement, typeof ControlConfirmModal, typeof ControlPromptModal, typeof NovoControlGroup, typeof NovoControlTemplates], [typeof i4.CommonModule, typeof i8$1.OverlayModule, typeof i5.ReactiveFormsModule, typeof i10$1.NovoRadioModule, typeof i11$1.NovoTilesModule, typeof i8.NovoSelectModule, typeof i9.NovoPickerModule, typeof i14$1.NovoChipsModule, typeof i15$1.NovoDatePickerModule, typeof i16$1.NovoTimePickerModule, typeof i17$1.NovoDateTimePickerModule, typeof i18.NovoNovoCKEditorModule, typeof NovoFormExtrasModule, typeof i20.NovoQuickNoteModule, typeof i17$1.NovoDateTimePickerModule, typeof i21.NovoHeaderModule, typeof i11.NovoTooltipModule, typeof i23.NovoPopOverModule, typeof i24.IMaskModule, typeof i25.NovoTipWellModule, typeof i26.NovoModalModule, typeof i7.NovoButtonModule, typeof i28.NovoCodeEditorModule, typeof i17.NovoCommonModule, typeof i12.NovoCheckboxModule, typeof i31.NovoIconModule, typeof i10$1.NovoRadioModule, typeof i32.NovoSwitchModule], [typeof NovoAutoSize, typeof NovoDynamicFormElement, typeof NovoControlElement, typeof NovoFormElement, typeof NovoFieldsetHeaderElement, typeof NovoControlGroup, typeof NovoControlTemplates]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoFormModule>;
 }
 
@@ -1303,4 +1346,4 @@ declare class FormValidators {
 }
 
 export { AddressControl, BaseControl, CheckListControl, CheckboxControl, CodeEditorControl, ControlConfirmModal, ControlFactory, ControlPromptModal, CustomControl, DateControl, DateTimeControl, EditState, EditorControl, FieldInteractionApi, FileControl, FormUtils, FormValidators, GroupedControl, NativeSelectControl, NovoAddressElement, NovoAutoSize, NovoControlElement, NovoControlGroup, NovoControlTemplates, NovoDynamicFormElement, NovoFieldsetElement, NovoFieldsetHeaderElement, NovoFile, NovoFileInputElement, NovoFormControl, NovoFormElement, NovoFormExtrasModule, NovoFormGroup, NovoFormModule, NumberRangeComponent, PickerControl, QuickNoteControl, RadioControl, ReadOnlyControl, SelectControl, SwitchControl, TablePickerControl, TextAreaControl, TextBoxControl, TilesControl, TimeControl, TimezoneControl };
-export type { CustomHttp, FormField, IFieldInteractionEvent, IMaskOptions, ModifyPickerConfigArgs, NovoAddressConfig, NovoAddressSubfieldConfig, NovoControlConfig, NovoControlGroupAddConfig, NovoControlGroupRowConfig, NovoFieldset, NovoGroupedControlConfig, OptionsFunction, ResultsTemplateType };
+export type { AddressLookupResult, CustomHttp, FormField, IFieldInteractionEvent, IMaskOptions, ModifyPickerConfigArgs, NovoAddressConfig, NovoAddressSubfieldConfig, NovoControlConfig, NovoControlGroupAddConfig, NovoControlGroupRowConfig, NovoFieldset, NovoGroupedControlConfig, OptionsFunction, ResultsTemplateType };

package/elements/places/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, ElementRef, ChangeDetectorRef, InjectionToken } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
 import { BasePickerResults } from 'novo-elements/elements/picker';
@@ -32,7 +32,7 @@ declare class GooglePlacesService {
     static ɵprov: i0.ɵɵInjectableDeclaration<GooglePlacesService>;
 }
 
-interface Settings {
+interface PlacesSettings {
     geoPredictionServerUrl?: string;
     geoLatLangServiceUrl?: string;
     geoLocDetailServerUrl?: string;
@@ -56,22 +56,33 @@ interface Settings {
     searchIconUrl?: string;
     locationIconUrl?: string;
 }
+/** Normalized address prediction; raw provider records are mapped into this via normalizePrediction. */
+interface AddressLookupPrediction {
+    placeId?: string;
+    primaryText?: string;
+    secondaryText?: string;
+    displayAddress?: string;
+    types?: string[];
+    /** Original provider record, retained so recent-search selection re-emits full detail. */
+    raw?: any;
+}
 declare class PlacesListComponent extends BasePickerResults implements OnInit, OnChanges, ControlValueAccessor {
     private platformId;
     private _elmRef;
     private _global;
     private _googlePlacesService;
     private cdr;
-    userSettings: Settings;
+    userSettings: PlacesSettings;
     termChange: EventEmitter<any>;
     select: EventEmitter<any>;
+    matchesUpdated: EventEmitter<AddressLookupPrediction[]>;
     locationInput: string;
     gettingCurrentLocationFlag: boolean;
     dropdownOpen: boolean;
     recentDropdownOpen: boolean;
     isSettingsError: boolean;
     settingsErrorMsg: string;
-    settings: Settings;
+    settings: PlacesSettings;
     private moduleinit;
     private selectedDataIndex;
     private recentSearchData;
@@ -90,7 +101,7 @@ declare class PlacesListComponent extends BasePickerResults implements OnInit, O
     searchinputCallback(event: any): any;
     activeListNode(index: number): any;
     selectedListNode(event: MouseEvent, index: number): any;
-    selectMatch(match: any): any;
+    selectMatch(match: AddressLookupPrediction): any;
     closeAutocomplete(event: any): any;
     userQuerySubmit(selectedOption?: any): any;
     currentLocationSelected(): any;
@@ -105,10 +116,11 @@ declare class PlacesListComponent extends BasePickerResults implements OnInit, O
     private getPlaceLocationInfo;
     private setRecentLocation;
     private getRecentLocations;
+    normalizePrediction(raw: any): AddressLookupPrediction;
     onKeyDown(event: KeyboardEvent): void;
     search(term: any, mode?: any): Observable<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlacesListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlacesListComponent, "google-places-list", never, { "userSettings": { "alias": "userSettings"; "required": false; }; }, { "termChange": "termChange"; "select": "select"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlacesListComponent, "google-places-list", never, { "userSettings": { "alias": "userSettings"; "required": false; }; }, { "termChange": "termChange"; "select": "select"; "matchesUpdated": "matchesUpdated"; }, never, never, false, never>;
 }
 
 declare class GooglePlacesModule {
@@ -117,5 +129,8 @@ declare class GooglePlacesModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<GooglePlacesModule>;
 }
 
-export { GooglePlacesModule, GooglePlacesService, PlacesListComponent };
-export type { Settings };
+/** App-wide address-lookup config; when provided, every novo-address enables autocomplete on Address 1. */
+declare const NOVO_ADDRESS_CONFIG: InjectionToken<PlacesSettings>;
+
+export { GooglePlacesModule, GooglePlacesService, NOVO_ADDRESS_CONFIG, PlacesListComponent };
+export type { AddressLookupPrediction, PlacesSettings };

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

@@ -1354,6 +1354,13 @@ class NovoChipsElement {
         this.value = null;
         this._propagateChanges();
     }
+    getDynamicClasses(item) {
+        const classFunction = this.source?.classFunction;
+        if (typeof classFunction !== 'function') {
+            return null;
+        }
+        return classFunction(item?.value || item) ?? null;
+    }
     setItems() {
         this.items = [];
         if (this.model && Array.isArray(this.model)) {
@@ -1567,10 +1574,12 @@ class NovoChipsElement {
     <div class="novo-chip-container">
       <novo-chip
         *ngFor="let item of _items | async | slice: 0:hiddenChipsLimit"
+        [ngClass]="getDynamicClasses(item)"
         [class.selected]="item == selected"
         [selectable]="true"
         [disabled]="disablePickerInput"
         [size]="size"
+        [value]="item.value || item"
         (removed)="remove($event, item)"
         (selectionChange)="select($event, item)"
         (deselect)="deselect($event, item)"
@@ -1614,7 +1623,7 @@ class NovoChipsElement {
     <label class="clear-all" *ngIf="items.length && !disablePickerInput" (click)="clearValue()"
       >{{ labels.clearAll }} <i class="bhi-times"></i
     ></label>
-  `, isInline: true, styles: [":host{width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid rgb(175.4891304348,184.7826086957,192.0108695652);transition:all .2s ease-in-out;position:relative;padding:2px 0}:host .hidden-chips-toggle{cursor:pointer;padding-left:.5rem;line-height:2.7rem}:host.with-value{margin-bottom:20px}:host:hover{border-bottom:1px solid rgb(94.8152173913,108.8043478261,119.6847826087)}:host.selected,:host.selected:hover{border-bottom:1px solid #4a89dc}:host.selected+i,:host.selected:hover+i{color:#4a89dc}:host.disabled{border-bottom-style:dashed!important}:host .novo-chip-container{flex:1;display:flex;flex-flow:row wrap;gap:.4rem;align-items:center}:host .chip-input-container{flex:1 15rem;padding-left:1rem}:host .chip-input-container input{padding-top:0;border:none;background:transparent!important;width:100%}:host .chip-input-container input:focus{outline:none}:host .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host label.clear-all{flex:1 100%;position:absolute;right:0;bottom:-20px;font-size:.9rem;color:#da4453;cursor:pointer;display:flex;align-items:center}:host label.clear-all i{font-size:.7rem;padding-bottom:2px;margin-left:5px}:host i.bhi-search{position:absolute;bottom:8px;right:0;font-size:1.1em;color:#3d464d}:host+i{position:absolute;right:0;bottom:7px}:host.with-value{margin-bottom:0}:host novo-picker{position:inherit;padding-bottom:0}:host novo-picker>::ng-deep input{border:none;border-bottom:none!important}:host novo-picker>::ng-deep input:disabled{border-bottom:none!important}:host novo-picker>::ng-deep i{display:none}:host novo-picker div.picker-results-container{left:0}:host picker-results{position:absolute;color:#000}:host picker-results novo-list{max-height:49vh;overflow:auto}:host picker-results novo-list novo-list-item{flex:0 0;transition:background-color .25s}:host picker-results novo-list novo-list-item>div{width:100%}:host picker-results novo-list novo-list-item.active{background-color:#e0ebf9}:host picker-results novo-list novo-list-item:hover{background-color:#e0ebf9}:host picker-results novo-list novo-list-item item-content{flex-flow:row wrap}:host picker-results novo-list novo-list-item item-content>*{flex:0 0 33%;white-space:nowrap}:host picker-results .error-results,:host picker-results .no-recents,:host picker-results .null-results{text-align:center;padding:1em 0 4em}:host picker-results .error-results>i,:host picker-results .no-recents>i,:host picker-results .null-results>i{font-size:3em;margin:.5em;color:#0000004d}:host picker-results .error-results>h4,:host picker-results .error-results>p,:host picker-results .no-recents>h4,:host picker-results .no-recents>p,:host picker-results .null-results>h4,:host picker-results .null-results>p{margin:0;max-width:none;padding:0}:host picker-results .error-results>h4,:host picker-results .no-recents>h4,:host picker-results .null-results>h4{font-weight:500}:host picker-results section{box-shadow:.1em .1em 1em #00000040;z-index:9;position:absolute;width:100%;background-color:#fff;color:#000}:host .preview-container entity-picker-result{background:#fff;position:absolute;top:100%;left:0;width:100%;min-width:180px;max-height:49vh;overflow:auto;z-index:9001;border:1px solid #4a89dc;transition:all .2s ease-in-out}:host .preview-container entity-picker-result .novo-list-item{flex:0 0}:host .preview-container entity-picker-result .novo-list-item>div{width:100%}:host .preview-container entity-picker-result .novo-list-item .novo-item-content{flex-flow:row wrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>*{flex:0 0 33%;white-space:nowrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>p{min-width:15em;font-size:.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-right:1em}entity-chip-results{max-width:none!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NovoPickerElement, selector: "novo-picker", inputs: ["config", "placeholder", "clearValueOnSelect", "closeOnSelect", "selected", "appendToBody", "parentScrollSelector", "parentScrollAction", "containerClass", "side", "autoSelectFirstOption", "overrideElement", "maxlength", "allowCustomValues", "width", "minWidth", "allowTabNavigation", "disablePickerInput"], outputs: ["changed", "select", "focus", "blur", "typing", "tab"] }, { kind: "component", type: i5.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { kind: "component", type: i3.NovoLabel, selector: "novo-label,[novo-label]", inputs: ["id"] }, { kind: "component", type: NovoChipElement, selector: "novo-chip, [novo-chip]", inputs: ["color", "tabIndex", "size", "type", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"] }, { kind: "directive", type: NovoChipAvatar, selector: "novo-chip-avatar, [novoChipAvatar]" }, { kind: "directive", type: NovoChipRemove, selector: "[novoChipRemove]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: AvatarTypePipe, name: "avatarType" }] }); }
+  `, isInline: true, styles: [":host{width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid rgb(175.4891304348,184.7826086957,192.0108695652);transition:all .2s ease-in-out;position:relative;padding:2px 0}:host .hidden-chips-toggle{cursor:pointer;padding-left:.5rem;line-height:2.7rem}:host.with-value{margin-bottom:20px}:host:hover{border-bottom:1px solid rgb(94.8152173913,108.8043478261,119.6847826087)}:host.selected,:host.selected:hover{border-bottom:1px solid #4a89dc}:host.selected+i,:host.selected:hover+i{color:#4a89dc}:host.disabled{border-bottom-style:dashed!important}:host .novo-chip-container{flex:1;display:flex;flex-flow:row wrap;gap:.4rem;align-items:center}:host .chip-input-container{flex:1 15rem;padding-left:1rem}:host .chip-input-container input{padding-top:0;border:none;background:transparent!important;width:100%}:host .chip-input-container input:focus{outline:none}:host .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host label.clear-all{flex:1 100%;position:absolute;right:0;bottom:-20px;font-size:.9rem;color:#da4453;cursor:pointer;display:flex;align-items:center}:host label.clear-all i{font-size:.7rem;padding-bottom:2px;margin-left:5px}:host i.bhi-search{position:absolute;bottom:8px;right:0;font-size:1.1em;color:#3d464d}:host+i{position:absolute;right:0;bottom:7px}:host.with-value{margin-bottom:0}:host novo-picker{position:inherit;padding-bottom:0}:host novo-picker>::ng-deep input{border:none;border-bottom:none!important}:host novo-picker>::ng-deep input:disabled{border-bottom:none!important}:host novo-picker>::ng-deep i{display:none}:host novo-picker div.picker-results-container{left:0}:host picker-results{position:absolute;color:#000}:host picker-results novo-list{max-height:49vh;overflow:auto}:host picker-results novo-list novo-list-item{flex:0 0;transition:background-color .25s}:host picker-results novo-list novo-list-item>div{width:100%}:host picker-results novo-list novo-list-item.active{background-color:#e0ebf9}:host picker-results novo-list novo-list-item:hover{background-color:#e0ebf9}:host picker-results novo-list novo-list-item item-content{flex-flow:row wrap}:host picker-results novo-list novo-list-item item-content>*{flex:0 0 33%;white-space:nowrap}:host picker-results .error-results,:host picker-results .no-recents,:host picker-results .null-results{text-align:center;padding:1em 0 4em}:host picker-results .error-results>i,:host picker-results .no-recents>i,:host picker-results .null-results>i{font-size:3em;margin:.5em;color:#0000004d}:host picker-results .error-results>h4,:host picker-results .error-results>p,:host picker-results .no-recents>h4,:host picker-results .no-recents>p,:host picker-results .null-results>h4,:host picker-results .null-results>p{margin:0;max-width:none;padding:0}:host picker-results .error-results>h4,:host picker-results .no-recents>h4,:host picker-results .null-results>h4{font-weight:500}:host picker-results section{box-shadow:.1em .1em 1em #00000040;z-index:9;position:absolute;width:100%;background-color:#fff;color:#000}:host .preview-container entity-picker-result{background:#fff;position:absolute;top:100%;left:0;width:100%;min-width:180px;max-height:49vh;overflow:auto;z-index:9001;border:1px solid #4a89dc;transition:all .2s ease-in-out}:host .preview-container entity-picker-result .novo-list-item{flex:0 0}:host .preview-container entity-picker-result .novo-list-item>div{width:100%}:host .preview-container entity-picker-result .novo-list-item .novo-item-content{flex-flow:row wrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>*{flex:0 0 33%;white-space:nowrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>p{min-width:15em;font-size:.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-right:1em}entity-chip-results{max-width:none!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NovoPickerElement, selector: "novo-picker", inputs: ["config", "placeholder", "clearValueOnSelect", "closeOnSelect", "selected", "appendToBody", "parentScrollSelector", "parentScrollAction", "containerClass", "side", "autoSelectFirstOption", "overrideElement", "maxlength", "allowCustomValues", "width", "minWidth", "allowTabNavigation", "disablePickerInput"], outputs: ["changed", "select", "focus", "blur", "typing", "tab"] }, { kind: "component", type: i5.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { kind: "component", type: i3.NovoLabel, selector: "novo-label,[novo-label]", inputs: ["id"] }, { kind: "component", type: NovoChipElement, selector: "novo-chip, [novo-chip]", inputs: ["color", "tabIndex", "size", "type", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"] }, { kind: "directive", type: NovoChipAvatar, selector: "novo-chip-avatar, [novoChipAvatar]" }, { kind: "directive", type: NovoChipRemove, selector: "[novoChipRemove]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: AvatarTypePipe, name: "avatarType" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoChipsElement, decorators: [{
             type: Component,
@@ -1622,10 +1631,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
     <div class="novo-chip-container">
       <novo-chip
         *ngFor="let item of _items | async | slice: 0:hiddenChipsLimit"
+        [ngClass]="getDynamicClasses(item)"
         [class.selected]="item == selected"
         [selectable]="true"
         [disabled]="disablePickerInput"
         [size]="size"
+        [value]="item.value || item"
         (removed)="remove($event, item)"
         (selectionChange)="select($event, item)"
         (deselect)="deselect($event, item)"