novo-elements 7.12.0 → 7.13.0-next.2

package/fesm2015/novo-elements.mjs

@@ -28,7 +28,7 @@ import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$5 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager, A11yModule, FocusKeyManager } from '@angular/cdk/a11y';
-import { hasModifierKey, ENTER, COMMA } from '@angular/cdk/keycodes';
+import { hasModifierKey, ENTER } from '@angular/cdk/keycodes';
 import * as tokens from 'novo-design-tokens';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import * as i7 from '@angular/cdk/scrolling';
@@ -21003,6 +21003,7 @@ class NovoLabelService {
         this.within = 'Within';
         this.isEmpty = 'Is Empty?';
         this.refreshPagination = 'Refresh Pagination';
+        this.location = 'Location';
     }
     maxlengthMetWithField(field, maxlength) {
         return `Sorry, you have reached the maximum character count of ${maxlength} for ${field}.`;
@@ -55939,12 +55940,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     } });
 
 // NG2
+// Value accessor for the component (supports ngModel)
+const PLACES_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => PlacesListComponent),
+    multi: true,
+};
 class PlacesListComponent {
-    constructor(platformId, _elmRef, _global, _googlePlacesService) {
+    constructor(platformId, _elmRef, _global, _googlePlacesService, cdr) {
         this.platformId = platformId;
         this._elmRef = _elmRef;
         this._global = _global;
         this._googlePlacesService = _googlePlacesService;
+        this.cdr = cdr;
         this.term = '';
         this.termChange = new EventEmitter();
         this.select = new EventEmitter();
@@ -55984,6 +55992,8 @@ class PlacesListComponent {
             searchIconUrl: '',
             locationIconUrl: '',
         };
+        this.onModelChange = () => { };
+        this.onModelTouched = () => { };
     }
     ngOnInit() {
         if (!this.moduleinit) {
@@ -55995,6 +56005,15 @@ class PlacesListComponent {
         this.moduleInit();
         this.searchinputCallback(null);
     }
+    writeValue(model) {
+        this.model = model;
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
     // function called when click event happens in input box. (Binded with view)
     searchinputClickCallback(event) {
         event.target.select();
@@ -56177,6 +56196,7 @@ class PlacesListComponent {
     updateListItem(listData) {
         this.queryItems = listData ? listData : [];
         this.dropdownOpen = true;
+        this.cdr.detectChanges();
     }
     // function to show the recent search result.
     showRecentSearch() {
@@ -56254,8 +56274,8 @@ class PlacesListComponent {
         });
     }
 }
-PlacesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlacesListComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: GlobalRef }, { token: GooglePlacesService }], target: i0.ɵɵFactoryTarget.Component });
-PlacesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlacesListComponent, selector: "google-places-list", inputs: { userSettings: "userSettings", term: "term" }, outputs: { termChange: "termChange", select: "select" }, usesOnChanges: true, ngImport: i0, template: `
+PlacesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlacesListComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: GlobalRef }, { token: GooglePlacesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PlacesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlacesListComponent, selector: "google-places-list", inputs: { userSettings: "userSettings", term: "term" }, outputs: { termChange: "termChange", select: "select" }, providers: [PLACES_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: `
     <novo-list direction="vertical">
       <novo-list-item *ngFor="let data of queryItems; let $index = index" (click)="selectedListNode($event, $index)">
         <item-header>
@@ -56270,6 +56290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Component,
             args: [{
                     selector: 'google-places-list',
+                    providers: [PLACES_VALUE_ACCESSOR],
                     template: `
     <novo-list direction="vertical">
       <novo-list-item *ngFor="let data of queryItems; let $index = index" (click)="selectedListNode($event, $index)">
@@ -56286,7 +56307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: Object, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: i0.ElementRef }, { type: GlobalRef }, { type: GooglePlacesService }];
+                    }] }, { type: i0.ElementRef }, { type: GlobalRef }, { type: GooglePlacesService }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { userSettings: [{
                 type: Input
             }], term: [{
@@ -57467,10 +57488,10 @@ class ConditionBuilderComponent {
     }
 }
 ConditionBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ConditionBuilderComponent, deps: [{ token: NovoLabelService }, { token: i0.ChangeDetectorRef }, { token: QueryBuilderService }, { token: i4.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
-ConditionBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ConditionBuilderComponent, selector: "novo-condition-builder", inputs: { label: "label", isFirst: "isFirst", andIndex: "andIndex", groupIndex: "groupIndex" }, providers: [{ provide: NOVO_CONDITION_BUILDER, useExisting: ConditionBuilderComponent }], viewQueries: [{ propertyName: "_operatorOutlet", first: true, predicate: ConditionOperatorOutlet, descendants: true, static: true }, { propertyName: "_inputOutlet", first: true, predicate: ConditionInputOutlet, descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"parentForm\">\n  <novo-grid gap=\"1rem\" [columns]=\"isFirst ? '20rem 13rem 1fr' : '16rem 13rem 1fr'\" align=\"end\">\n    <novo-field class=\"condition-field\">\n      <novo-select\n        [placeholder]=\"labels.chooseAField\"\n        formControlName=\"field\"\n        (onSelect)=\"onFieldSelect()\"\n        overlayWidth=\"24rem\"\n        overlayHeight=\"20rem\"\n        [displayWith]=\"fieldDisplayWith\"\n        [style.minWidth.px]=\"160\"\n        [style.maxWidth.px]=\"isFirst ? 200 : 160\">\n        <novo-optgroup class=\"filter-search-results\">\n          <novo-option>\n            <novo-select-search [formControl]=\"searchTerm\" [clearSearchInput]=\"false\"></novo-select-search>\n          </novo-option>\n          <ng-container *ngIf=\"results$ | async as results; else loading\">\n            <ng-container *ngIf=\"results.length\">\n              <novo-option *ngFor=\"let field of results\" value=\"{{ field.name }}\"\n                [attr.data-automation-id]=\"field.name\">\n                {{ field.label || field.name }}\n              </novo-option>\n            </ng-container>\n          </ng-container>\n        </novo-optgroup>\n      </novo-select>\n    </novo-field>\n\n    <div class=\"condition-operator\">\n      <ng-container conditionOperatorOutlet></ng-container>\n    </div>\n\n    <div class=\"condition-input\">\n      <ng-container conditionInputOutlet></ng-container>\n    </div>\n  </novo-grid>\n  <ng-content></ng-content>\n</form>\n\n<!-- EMPTY STATE TEMPLATE -->\n<!-- <ng-template #empty>\n  <novo-non-ideal-state>\n    <novo-icon size=\"xl\" color=\"grapefruit\">search</novo-icon>\n    <novo-title>No results found.</novo-title>\n    <novo-text>Your search didn't find anything. Try searching for something else.</novo-text>\n  </novo-non-ideal-state>\n</ng-template> -->\n\n<!-- LOADING TEMPLATE -->\n<ng-template #loading>\n  <novo-loading></novo-loading>\n</ng-template>", styles: [":host{position:relative;display:block;width:100%}:host .condition-field{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:100%;width:-webkit-fill-available}:host .condition-operator::ng-deep .novo-select{min-width:13rem}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:-webkit-fill-available}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host .condition-input::ng-deep novo-field{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .condition-input::ng-deep .novo-field-infix{white-space:nowrap;overflow:hidden}:host .condition-input::ng-deep novo-chips{border-bottom:none!important}:host .condition-input::ng-deep novo-chips input{padding-left:0!important}:host .condition-input::ng-deep novo-radio-group{padding:0!important}:host .and-or-filter-button{box-sizing:border-box;background:#fff;border:1px solid #ddd;color:#5691f5;display:inline-block;position:relative;cursor:pointer;margin:.4rem auto;align-items:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;white-space:nowrap;text-transform:uppercase;overflow:hidden;transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}\n"], components: [{ type: NovoGridElement, selector: "novo-grid", inputs: ["direction", "align", "justify", "columns"] }, { type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoSelectSearchComponent, selector: "novo-select-search", inputs: ["name", "placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { type: NovoLoadingElement, selector: "novo-loading", inputs: ["theme", "color", "size"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: GapDirective, selector: "[gap]", inputs: ["gap"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ConditionOperatorOutlet, selector: "[conditionOperatorOutlet]" }, { type: ConditionInputOutlet, selector: "[conditionInputOutlet]" }], pipes: { "async": i1$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ConditionBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ConditionBuilderComponent, selector: "novo-condition-builder", inputs: { label: "label", isFirst: "isFirst", andIndex: "andIndex", groupIndex: "groupIndex" }, providers: [{ provide: NOVO_CONDITION_BUILDER, useExisting: ConditionBuilderComponent }], viewQueries: [{ propertyName: "_operatorOutlet", first: true, predicate: ConditionOperatorOutlet, descendants: true, static: true }, { propertyName: "_inputOutlet", first: true, predicate: ConditionInputOutlet, descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"parentForm\">\n  <novo-grid gap=\"1rem\" [columns]=\"isFirst ? '20rem 13rem 1fr' : '16rem 13rem 1fr'\" align=\"end\">\n    <novo-field class=\"condition-field\">\n      <novo-select\n        [placeholder]=\"labels.chooseAField\"\n        formControlName=\"field\"\n        (onSelect)=\"onFieldSelect()\"\n        overlayWidth=\"24rem\"\n        overlayHeight=\"20rem\"\n        [displayWith]=\"fieldDisplayWith\"\n        [style.minWidth.px]=\"160\"\n        [style.maxWidth.px]=\"isFirst ? 200 : 160\">\n        <novo-optgroup class=\"filter-search-results\">\n          <novo-option>\n            <novo-select-search [formControl]=\"searchTerm\" [clearSearchInput]=\"false\"></novo-select-search>\n          </novo-option>\n          <ng-container *ngIf=\"results$ | async as results; else loading\">\n            <ng-container *ngIf=\"results.length\">\n              <novo-option *ngFor=\"let field of results\" value=\"{{ field.name }}\"\n                [attr.data-automation-id]=\"field.name\">\n                {{ field.label || field.name }}\n              </novo-option>\n            </ng-container>\n          </ng-container>\n        </novo-optgroup>\n      </novo-select>\n    </novo-field>\n\n    <div class=\"condition-operator\">\n      <ng-container conditionOperatorOutlet></ng-container>\n    </div>\n\n    <div class=\"condition-input\">\n      <ng-container conditionInputOutlet></ng-container>\n    </div>\n  </novo-grid>\n  <ng-content></ng-content>\n</form>\n\n<!-- EMPTY STATE TEMPLATE -->\n<!-- <ng-template #empty>\n  <novo-non-ideal-state>\n    <novo-icon size=\"xl\" color=\"grapefruit\">search</novo-icon>\n    <novo-title>No results found.</novo-title>\n    <novo-text>Your search didn't find anything. Try searching for something else.</novo-text>\n  </novo-non-ideal-state>\n</ng-template> -->\n\n<!-- LOADING TEMPLATE -->\n<ng-template #loading>\n  <novo-loading></novo-loading>\n</ng-template>", styles: [":host{position:relative;display:block;width:100%}:host .condition-field{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:100%;width:-webkit-fill-available}:host .condition-operator::ng-deep .novo-select{min-width:13rem}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:-webkit-fill-available}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host .condition-input::ng-deep novo-field{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .condition-input::ng-deep .novo-field-infix{white-space:nowrap;overflow:hidden}:host .condition-input::ng-deep novo-chip-list{width:36rem}:host .condition-input::ng-deep novo-chips{border-bottom:none!important}:host .condition-input::ng-deep novo-chips input{padding-left:0!important}:host .condition-input::ng-deep novo-radio-group{padding:0!important}:host .and-or-filter-button{box-sizing:border-box;background:#fff;border:1px solid #ddd;color:#5691f5;display:inline-block;position:relative;cursor:pointer;margin:.4rem auto;align-items:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;white-space:nowrap;text-transform:uppercase;overflow:hidden;transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}\n"], components: [{ type: NovoGridElement, selector: "novo-grid", inputs: ["direction", "align", "justify", "columns"] }, { type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoSelectSearchComponent, selector: "novo-select-search", inputs: ["name", "placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { type: NovoLoadingElement, selector: "novo-loading", inputs: ["theme", "color", "size"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: GapDirective, selector: "[gap]", inputs: ["gap"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ConditionOperatorOutlet, selector: "[conditionOperatorOutlet]" }, { type: ConditionInputOutlet, selector: "[conditionInputOutlet]" }], pipes: { "async": i1$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ConditionBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'novo-condition-builder', providers: [{ provide: NOVO_CONDITION_BUILDER, useExisting: ConditionBuilderComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"parentForm\">\n  <novo-grid gap=\"1rem\" [columns]=\"isFirst ? '20rem 13rem 1fr' : '16rem 13rem 1fr'\" align=\"end\">\n    <novo-field class=\"condition-field\">\n      <novo-select\n        [placeholder]=\"labels.chooseAField\"\n        formControlName=\"field\"\n        (onSelect)=\"onFieldSelect()\"\n        overlayWidth=\"24rem\"\n        overlayHeight=\"20rem\"\n        [displayWith]=\"fieldDisplayWith\"\n        [style.minWidth.px]=\"160\"\n        [style.maxWidth.px]=\"isFirst ? 200 : 160\">\n        <novo-optgroup class=\"filter-search-results\">\n          <novo-option>\n            <novo-select-search [formControl]=\"searchTerm\" [clearSearchInput]=\"false\"></novo-select-search>\n          </novo-option>\n          <ng-container *ngIf=\"results$ | async as results; else loading\">\n            <ng-container *ngIf=\"results.length\">\n              <novo-option *ngFor=\"let field of results\" value=\"{{ field.name }}\"\n                [attr.data-automation-id]=\"field.name\">\n                {{ field.label || field.name }}\n              </novo-option>\n            </ng-container>\n          </ng-container>\n        </novo-optgroup>\n      </novo-select>\n    </novo-field>\n\n    <div class=\"condition-operator\">\n      <ng-container conditionOperatorOutlet></ng-container>\n    </div>\n\n    <div class=\"condition-input\">\n      <ng-container conditionInputOutlet></ng-container>\n    </div>\n  </novo-grid>\n  <ng-content></ng-content>\n</form>\n\n<!-- EMPTY STATE TEMPLATE -->\n<!-- <ng-template #empty>\n  <novo-non-ideal-state>\n    <novo-icon size=\"xl\" color=\"grapefruit\">search</novo-icon>\n    <novo-title>No results found.</novo-title>\n    <novo-text>Your search didn't find anything. Try searching for something else.</novo-text>\n  </novo-non-ideal-state>\n</ng-template> -->\n\n<!-- LOADING TEMPLATE -->\n<ng-template #loading>\n  <novo-loading></novo-loading>\n</ng-template>", styles: [":host{position:relative;display:block;width:100%}:host .condition-field{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:100%;width:-webkit-fill-available}:host .condition-operator::ng-deep .novo-select{min-width:13rem}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:-webkit-fill-available}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host .condition-input::ng-deep novo-field{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .condition-input::ng-deep .novo-field-infix{white-space:nowrap;overflow:hidden}:host .condition-input::ng-deep novo-chips{border-bottom:none!important}:host .condition-input::ng-deep novo-chips input{padding-left:0!important}:host .condition-input::ng-deep novo-radio-group{padding:0!important}:host .and-or-filter-button{box-sizing:border-box;background:#fff;border:1px solid #ddd;color:#5691f5;display:inline-block;position:relative;cursor:pointer;margin:.4rem auto;align-items:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;white-space:nowrap;text-transform:uppercase;overflow:hidden;transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}\n"] }]
+            args: [{ selector: 'novo-condition-builder', providers: [{ provide: NOVO_CONDITION_BUILDER, useExisting: ConditionBuilderComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"parentForm\">\n  <novo-grid gap=\"1rem\" [columns]=\"isFirst ? '20rem 13rem 1fr' : '16rem 13rem 1fr'\" align=\"end\">\n    <novo-field class=\"condition-field\">\n      <novo-select\n        [placeholder]=\"labels.chooseAField\"\n        formControlName=\"field\"\n        (onSelect)=\"onFieldSelect()\"\n        overlayWidth=\"24rem\"\n        overlayHeight=\"20rem\"\n        [displayWith]=\"fieldDisplayWith\"\n        [style.minWidth.px]=\"160\"\n        [style.maxWidth.px]=\"isFirst ? 200 : 160\">\n        <novo-optgroup class=\"filter-search-results\">\n          <novo-option>\n            <novo-select-search [formControl]=\"searchTerm\" [clearSearchInput]=\"false\"></novo-select-search>\n          </novo-option>\n          <ng-container *ngIf=\"results$ | async as results; else loading\">\n            <ng-container *ngIf=\"results.length\">\n              <novo-option *ngFor=\"let field of results\" value=\"{{ field.name }}\"\n                [attr.data-automation-id]=\"field.name\">\n                {{ field.label || field.name }}\n              </novo-option>\n            </ng-container>\n          </ng-container>\n        </novo-optgroup>\n      </novo-select>\n    </novo-field>\n\n    <div class=\"condition-operator\">\n      <ng-container conditionOperatorOutlet></ng-container>\n    </div>\n\n    <div class=\"condition-input\">\n      <ng-container conditionInputOutlet></ng-container>\n    </div>\n  </novo-grid>\n  <ng-content></ng-content>\n</form>\n\n<!-- EMPTY STATE TEMPLATE -->\n<!-- <ng-template #empty>\n  <novo-non-ideal-state>\n    <novo-icon size=\"xl\" color=\"grapefruit\">search</novo-icon>\n    <novo-title>No results found.</novo-title>\n    <novo-text>Your search didn't find anything. Try searching for something else.</novo-text>\n  </novo-non-ideal-state>\n</ng-template> -->\n\n<!-- LOADING TEMPLATE -->\n<ng-template #loading>\n  <novo-loading></novo-loading>\n</ng-template>", styles: [":host{position:relative;display:block;width:100%}:host .condition-field{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:100%;width:-webkit-fill-available}:host .condition-operator::ng-deep .novo-select{min-width:13rem}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical{grid-template-columns:minmax(-webkit-fit-content,1fr);grid-template-columns:minmax(fit-content,1fr);width:-webkit-fill-available}:host .condition-input::ng-deep novo-field.novo-field-layout-vertical .novo-input-element{width:100%}:host .condition-input::ng-deep novo-field{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .condition-input::ng-deep .novo-field-infix{white-space:nowrap;overflow:hidden}:host .condition-input::ng-deep novo-chip-list{width:36rem}:host .condition-input::ng-deep novo-chips{border-bottom:none!important}:host .condition-input::ng-deep novo-chips input{padding-left:0!important}:host .condition-input::ng-deep novo-radio-group{padding:0!important}:host .and-or-filter-button{box-sizing:border-box;background:#fff;border:1px solid #ddd;color:#5691f5;display:inline-block;position:relative;cursor:pointer;margin:.4rem auto;align-items:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;white-space:nowrap;text-transform:uppercase;overflow:hidden;transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: NovoLabelService }, { type: i0.ChangeDetectorRef }, { type: QueryBuilderService }, { type: i4.ControlContainer }]; }, propDecorators: { _operatorOutlet: [{
                 type: ViewChild,
                 args: [ConditionOperatorOutlet, { static: true }]
@@ -57639,35 +57660,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Handle selection of field values when a list of options is provided.
  */
 class NovoDefaultAddressConditionDef extends AbstractConditionFieldDef {
-    constructor() {
-        super(...arguments);
+    constructor(element, labels) {
+        super(labels);
+        this.element = element;
+        this.labels = labels;
         this.defaultOperator = 'includeAny';
+        this.chipListModel = '';
+        this.term = '';
+    }
+    onKeyup(event) {
+        this.term = event.target.value;
+    }
+    getValue(formGroup) {
+        return formGroup.value.value || [];
+    }
+    getCurrentOverlay(viewIndex) {
+        var _a;
+        return (_a = this.overlayChildren) === null || _a === void 0 ? void 0 : _a.find(item => item.overlayId === viewIndex);
+    }
+    selectPlace(event, formGroup, viewIndex) {
+        var _a;
+        const valueToAdd = {
+            address_components: event.address_components,
+            formatted_address: event.formatted_address,
+            geometry: event.geometry,
+            place_id: event.place_id,
+        };
+        const current = this.getValue(formGroup);
+        if (!Array.isArray(current)) {
+            formGroup.get('value').setValue([valueToAdd]);
+        }
+        else {
+            formGroup.get('value').setValue([...current, valueToAdd]);
+        }
+        this.inputChildren.forEach(input => {
+            input.nativeElement.value = '';
+        });
+        (_a = this.getCurrentOverlay(viewIndex)) === null || _a === void 0 ? void 0 : _a.closePanel();
+    }
+    remove(valueToRemove, formGroup) {
+        const current = this.getValue(formGroup);
+        const index = current.indexOf(valueToRemove);
+        if (index >= 0) {
+            const oldValue = [...current];
+            oldValue.splice(index, 1);
+            formGroup.get('value').setValue(oldValue);
+        }
     }
 }
-NovoDefaultAddressConditionDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDefaultAddressConditionDef, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NovoDefaultAddressConditionDef.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NovoDefaultAddressConditionDef, selector: "novo-address-condition-def", usesInheritance: true, ngImport: i0, template: `
+NovoDefaultAddressConditionDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDefaultAddressConditionDef, deps: [{ token: i0.ElementRef }, { token: NovoLabelService }], target: i0.ɵɵFactoryTarget.Component });
+NovoDefaultAddressConditionDef.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NovoDefaultAddressConditionDef, selector: "novo-address-condition-def", viewQueries: [{ propertyName: "overlayChildren", predicate: NovoPickerToggleElement, descendants: true }, { propertyName: "inputChildren", predicate: ["addressInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-container novoConditionFieldDef>
       <novo-field *novoConditionOperatorsDef="let formGroup" [formGroup]="formGroup">
         <novo-select [placeholder]="labels.operator" formControlName="operator" (onSelect)="onOperatorSelect(formGroup)">
           <novo-option value="includeAny">{{ labels.includeAny }}</novo-option>
           <novo-option value="excludeAny">{{ labels.exclude }}</novo-option>
-          <novo-option value="radius">{{ labels.radius }}</novo-option>
-          <novo-option value="isNull">{{ labels.isEmpty }}</novo-option>
         </novo-select>
       </novo-field>
       <ng-container *novoConditionInputDef="let formGroup; viewIndex as viewIndex; fieldMeta as meta" [ngSwitch]="formGroup.value.operator" [formGroup]="formGroup">
-        <novo-field *novoSwitchCases="['includeAny', 'excludeAny', 'radius']">
-          <novo-select formControlName="value" [placeholder]="labels.select" [multiple]="true"> </novo-select>
-        </novo-field>
-        <novo-field *novoSwitchCases="['isNull']">
-          <novo-radio-group formControlName="value">
-            <novo-radio [value]="true">{{ labels.yes }}</novo-radio>
-            <novo-radio [value]="false">{{ labels.no }}</novo-radio>
-          </novo-radio-group>
+        <novo-field *novoSwitchCases="['includeAny', 'excludeAny']" #novoField>
+          <novo-chip-list [(ngModel)]="chipListModel" [ngModelOptions]="{ standalone: true }">
+            <novo-chip *ngFor="let item of formGroup.get('value').value" (removed)="remove(item, formGroup)">
+              {{ item.formatted_address }}
+              <novo-icon novoChipRemove>close</novo-icon>
+            </novo-chip>
+            <input
+              novoChipInput
+              [placeholder]="labels.location"
+              (keyup)="onKeyup($event)"
+              [picker]="placesPicker"
+              #addressInput />
+          </novo-chip-list>
+          <novo-picker-toggle triggerOnFocus [overlayId]="viewIndex" icon="location" novoSuffix>
+            <google-places-list [term]="term" (select)="selectPlace($event, formGroup, viewIndex)" formControlName="value" #placesPicker></google-places-list>
+          </novo-picker-toggle>
         </novo-field>
       </ng-container>
     </ng-container>
-  `, isInline: true, components: [{ type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoRadioGroup, selector: "novo-radio-group", inputs: ["id", "tabindex", "errorStateMatcher", "appearance", "value", "name", "disabled", "required", "placeholder"], outputs: ["change", "blur"] }, { type: NovoRadioElement, selector: "novo-radio", inputs: ["id", "name", "tabindex", "vertical", "label", "button", "theme", "size", "icon", "color", "checked", "value", "disabled"], outputs: ["change", "blur", "focus"] }], directives: [{ type: NovoConditionFieldDef, selector: "[novoConditionFieldDef]" }, { type: NovoConditionOperatorsDef, selector: "[novoConditionOperatorsDef]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: NovoConditionInputDef, selector: "[novoConditionInputDef]" }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: SwitchCasesDirective, selector: "[novoSwitchCases]", inputs: ["novoSwitchCases"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, components: [{ type: NovoFieldElement, selector: "novo-field", inputs: ["layout", "appearance", "width"], outputs: ["valueChanges", "stateChanges"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { type: NovoChipList, selector: "novo-chip-list", inputs: ["errorStateMatcher", "multiple", "stacked", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["novoChipList"] }, { type: NovoChipElement, selector: "novo-chip, [novo-chip]", inputs: ["color", "tabIndex", "size", "type", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"] }, { type: NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { type: NovoPickerToggleElement, selector: "novo-picker-toggle", inputs: ["for", "icon", "tabIndex", "aria-label", "triggerOnFocus", "overlayId", "width", "disabled"], exportAs: ["novoPickerToggle"] }, { type: PlacesListComponent, selector: "google-places-list", inputs: ["userSettings", "term"], outputs: ["termChange", "select"] }], directives: [{ type: NovoConditionFieldDef, selector: "[novoConditionFieldDef]" }, { type: NovoConditionOperatorsDef, selector: "[novoConditionOperatorsDef]" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: NovoConditionInputDef, selector: "[novoConditionInputDef]" }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: SwitchCasesDirective, selector: "[novoSwitchCases]", inputs: ["novoSwitchCases"] }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: NovoChipRemove, selector: "[novoChipRemove]" }, { type: NovoChipInput, selector: "input[novoChipInput]", inputs: ["novoChipInputAddOnBlur", "novoChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["novoChipInputTokenEnd"], exportAs: ["novoChipInput", "novoChipInputFor"] }, { type: NovoPickerDirective, selector: "input[picker]", inputs: ["picker", "autocomplete"] }, { type: NovoFieldSuffixDirective, selector: "[novoSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDefaultAddressConditionDef, decorators: [{
             type: Component,
             args: [{
@@ -57678,19 +57748,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <novo-select [placeholder]="labels.operator" formControlName="operator" (onSelect)="onOperatorSelect(formGroup)">
           <novo-option value="includeAny">{{ labels.includeAny }}</novo-option>
           <novo-option value="excludeAny">{{ labels.exclude }}</novo-option>
-          <novo-option value="radius">{{ labels.radius }}</novo-option>
-          <novo-option value="isNull">{{ labels.isEmpty }}</novo-option>
         </novo-select>
       </novo-field>
       <ng-container *novoConditionInputDef="let formGroup; viewIndex as viewIndex; fieldMeta as meta" [ngSwitch]="formGroup.value.operator" [formGroup]="formGroup">
-        <novo-field *novoSwitchCases="['includeAny', 'excludeAny', 'radius']">
-          <novo-select formControlName="value" [placeholder]="labels.select" [multiple]="true"> </novo-select>
-        </novo-field>
-        <novo-field *novoSwitchCases="['isNull']">
-          <novo-radio-group formControlName="value">
-            <novo-radio [value]="true">{{ labels.yes }}</novo-radio>
-            <novo-radio [value]="false">{{ labels.no }}</novo-radio>
-          </novo-radio-group>
+        <novo-field *novoSwitchCases="['includeAny', 'excludeAny']" #novoField>
+          <novo-chip-list [(ngModel)]="chipListModel" [ngModelOptions]="{ standalone: true }">
+            <novo-chip *ngFor="let item of formGroup.get('value').value" (removed)="remove(item, formGroup)">
+              {{ item.formatted_address }}
+              <novo-icon novoChipRemove>close</novo-icon>
+            </novo-chip>
+            <input
+              novoChipInput
+              [placeholder]="labels.location"
+              (keyup)="onKeyup($event)"
+              [picker]="placesPicker"
+              #addressInput />
+          </novo-chip-list>
+          <novo-picker-toggle triggerOnFocus [overlayId]="viewIndex" icon="location" novoSuffix>
+            <google-places-list [term]="term" (select)="selectPlace($event, formGroup, viewIndex)" formControlName="value" #placesPicker></google-places-list>
+          </novo-picker-toggle>
         </novo-field>
       </ng-container>
     </ng-container>
@@ -57698,7 +57774,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.Default,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NovoLabelService }]; }, propDecorators: { overlayChildren: [{
+                type: ViewChildren,
+                args: [NovoPickerToggleElement]
+            }], inputChildren: [{
+                type: ViewChildren,
+                args: ['addressInput']
+            }] } });
 
 /**
  * When constructing a query using a field that is a boolean with only true/false as possible values.
@@ -58163,7 +58245,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class NovoDefaultStringConditionDef extends AbstractConditionFieldDef {
     constructor() {
         super(...arguments);
-        this.separatorKeysCodes = [ENTER, COMMA];
         this.defaultOperator = 'includeAny';
     }
     getValue(formGroup) {
@@ -58275,7 +58356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     // Change detection is intentionally not set to OnPush. This component's template will be provided
                     // to the table to be inserted into its view. This is problematic when change detection runs since
                     // the bindings in this template will be evaluated _after_ the table's view is evaluated, which
-                    // mean's the template in the table's view will not have the updated value (and in fact will cause
+                    // means the template in the table's view will not have the updated value (and in fact will cause
                     // an ExpressionChangedAfterItHasBeenCheckedError).
                     // tslint:disable-next-line:validate-decorators
                     changeDetection: ChangeDetectionStrategy.Default,
@@ -58556,6 +58637,7 @@ NovoQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         ReactiveFormsModule,
         DragDropModule,
         CdkTableModule,
+        GooglePlacesModule,
         NovoButtonModule,
         NovoCommonModule,
         NovoFormModule,
@@ -58570,6 +58652,7 @@ NovoQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         NovoDatePickerModule,
         NovoDateTimePickerModule,
         NovoIconModule,
+        NovoOverlayModule,
         NovoRadioModule,
         NovoSearchBoxModule,
         NovoSwitchModule,
@@ -58594,6 +58677,7 @@ NovoQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             ReactiveFormsModule,
             DragDropModule,
             CdkTableModule,
+            GooglePlacesModule,
             NovoButtonModule,
             NovoCommonModule,
             NovoFormModule,
@@ -58608,6 +58692,7 @@ NovoQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             NovoDatePickerModule,
             NovoDateTimePickerModule,
             NovoIconModule,
+            NovoOverlayModule,
             NovoRadioModule,
             NovoSearchBoxModule,
             NovoSwitchModule,
@@ -58624,6 +58709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         ReactiveFormsModule,
                         DragDropModule,
                         CdkTableModule,
+                        GooglePlacesModule,
                         NovoButtonModule,
                         NovoCommonModule,
                         NovoFormModule,
@@ -58638,6 +58724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NovoDatePickerModule,
                         NovoDateTimePickerModule,
                         NovoIconModule,
+                        NovoOverlayModule,
                         NovoRadioModule,
                         NovoSearchBoxModule,
                         NovoSwitchModule,