novo-elements 13.1.0 → 13.2.0-next.1

package/elements/picker/extras/grouped-multi-picker-results/GroupedMultiPickerResults.scss

@@ -1,12 +1,12 @@
 @import "../../../../styles/variables.scss";
 
 :host {
-  background-color: $white;
+  background-color: var(--background-body);
   max-height: 300px;
   padding: 0;
   margin: 0;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  border: 1px solid $positive;
+  border: 1px solid var(--color-positive);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
   display: flex;
@@ -36,7 +36,7 @@
       height: 50px;
       display: flex;
       align-items: center;
-      border-top: 1px solid $off-white;
+      border-top: 1px solid var(--border-2);
       label {
         font-weight: 500;
       }
@@ -56,14 +56,14 @@
         color: #999999;
       }
       &.active {
-        color: $positive;
-        border-left-color: $positive;
+        color: var(--color-positive);
+        border-left-color: var(--color-positive);
         background-color: #e9e9e9;
         item-end {
-          color: $positive;
+          color: var(--color-positive);
         }
         ::ng-deep .list-item > item-content > * {
-          color: $positive !important;
+          color: var(--color-positive) !important;
         }
       }
     }
@@ -82,8 +82,8 @@
         padding: 0.95em;
         background: transparent !important;
         border: none;
-        border-bottom: 1px solid $off-white;
-        border-left: 1px solid $off-white;
+        border-bottom: 1px solid var(--border-2);
+        border-left: 1px solid var(--border-2);
         border-radius: 0;
         border-radius: 0;
         outline: none;
@@ -93,11 +93,11 @@
         transition: all 300ms;
         color: #26282b;
         &:hover {
-          border-bottom: 1px solid $off-white;
+          border-bottom: 1px solid var(--border-2);
         }
         &:focus {
-          border-bottom: 1px solid $positive;
-          border-left: 1px solid $positive;
+          border-bottom: 1px solid var(--color-positive);
+          border-left: 1px solid var(--color-positive);
         }
         &[disabled] {
           pointer-events: none;
@@ -109,7 +109,7 @@
         position: absolute;
         right: 10px;
         top: 12px;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
         &.disabled {
           pointer-events: none;
           opacity: 0.4;
@@ -120,7 +120,7 @@
       }
     }
     .grouped-multi-picker-list-container {
-      border-left: 1px solid $off-white;
+      border-left: 1px solid var(--border-2);
       flex: 1;
       display: flex;
       flex-direction: column;

package/elements/picker/extras/mixed-multi-picker-results/MixedMultiPickerResults.scss

@@ -1,12 +1,12 @@
 @import "../../../../styles/variables.scss";
 
 :host {
-  background-color: $white;
+  background-color: var(--background-body);
   max-height: 300px;
   padding: 0;
   margin: 0;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  border: 1px solid $positive;
+  border: 1px solid var(--color-positive);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
   display: flex;
@@ -34,7 +34,7 @@
         width: 100%;
       }
       &:hover {
-        background-color: lighten($positive, 39%);
+        background-color: brightenLive('--color-positive', 39);
       }
       .list-item {
         justify-content: center;
@@ -43,14 +43,14 @@
         color: #999999;
       }
       &.active {
-        color: $positive;
-        border-left-color: $positive;
-        background-color: lighten($positive, 35%);
+        color: var(--color-positive);
+        border-left-color: var(--color-positive);
+        background-color: brightenLive('--color-positive', 35);
         item-end {
-          color: $positive;
+          color: var(--color-positive);
         }
         .list-item > item-content > * {
-          color: $positive !important;
+          color: var(--color-positive) !important;
         }
       }
       item-content {
@@ -76,10 +76,10 @@
           width: 100%;
         }
         &.active {
-          background-color: lighten($positive, 35%);
+          background-color: brightenLive('--color-positive', 35);
         }
         &:hover {
-          background-color: lighten($positive, 39%);
+          background-color: brightenLive('--color-positive', 39);
         }
         item-content {
           flex-flow: row wrap;
@@ -97,8 +97,8 @@
         padding: 0.95em;
         background: transparent !important;
         border: none;
-        border-bottom: 1px solid $off-white;
-        border-left: 1px solid $off-white;
+        border-bottom: 1px solid var(--border-2);
+        border-left: 1px solid var(--border-2);
         border-radius: 0;
         border-radius: 0;
         outline: none;
@@ -108,11 +108,11 @@
         transition: all 300ms;
         color: #26282b;
         &:hover {
-          border-bottom: 1px solid $off-white;
+          border-bottom: 1px solid var(--border-2);
         }
         &:focus {
-          border-bottom: 1px solid $positive;
-          border-left: 1px solid $positive;
+          border-bottom: 1px solid var(--color-positive);
+          border-left: 1px solid var(--color-positive);
         }
         &[disabled] {
           pointer-events: none;
@@ -124,7 +124,7 @@
         position: absolute;
         right: 10px;
         top: 12px;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
         &.disabled {
           pointer-events: none;
           opacity: 0.4;
@@ -135,7 +135,7 @@
       }
     }
     .mixed-multi-picker-list-container {
-      border-left: 1px solid $off-white;
+      border-left: 1px solid var(--border-2);
       flex: 1;
       display: flex;
       flex-direction: column;

package/elements/picker/extras/picker-results/PickerResult.scss

@@ -7,6 +7,6 @@
 
 :host(.active) {
   > novo-list-item {
-    background-color: lighten($positive, 35%);
+    background-color: brightenLive('--color-positive', 35);
   }
 }

package/elements/picker/extras/picker-results/PickerResults.scss

@@ -8,8 +8,11 @@ entity-picker-results {
   max-width: 100%;
   z-index: 10;
   top: 100%;
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
   .novo-list {
-    border: 1px solid #4a89dc;
+    border: 1px solid var(--color-border-default, #4a89dc);
+    border-radius: var(--border-radius-sm);
     .novo-list-item {
       cursor: pointer;
       flex: 0 0;
@@ -18,10 +21,10 @@ entity-picker-results {
         width: 100%;
       }
       &.active {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       &:hover {
-        background-color: lighten($positive, 39%);
+        background-color: brightenLive('--color-positive', 39);
       }
       .novo-item-content {
         flex-flow: row wrap;
@@ -49,14 +52,14 @@ entity-picker-results {
   .picker-loader,
   .picker-null-recent-results,
   .picker-null-results {
-    background-color: $white;
+    background-color: var(--background-body);
     text-align: center;
-    color: darken($light, 15%);
+    color: darkenLive('--color-light', 15);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    border: 1px solid $positive;
+    border: 1px solid var(--color-positive);
     transform: translateY(0%);
     transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
-    padding: $spacing-sm;
+    padding: var(--spacing-sm);
   }
 
   p.picker-error,
@@ -69,12 +72,12 @@ entity-picker-results {
 
   picker-loader,
   .picker-loader {
-    background-color: $white;
+    background-color: var(--background-body);
     display: flex;
     align-items: center;
     flex-direction: column;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    border: 1px solid $positive;
+    border: 1px solid var(--color-positive);
     transform: translateY(0%);
     transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
   }
@@ -92,21 +95,21 @@ picker-results,
 .picker-results,
 quick-note-results,
 .quick-note-results {
-  background-color: $white;
+  background-color: var(--background-body);
   cursor: default;
   line-height: 26px;
   width: 100%;
   display: block;
   novo-list,
   ul {
-    background-color: $white;
+    background-color: var(--background-body);
     max-height: 200px;
     overflow: auto;
     list-style: none;
     padding: 0;
     margin: 0;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    border: 1px solid $positive;
+    border: 1px solid var(--color-positive);
     transform: translateY(0%);
     transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
     display: block;
@@ -122,16 +125,16 @@ quick-note-results,
       h6 {
         padding-top: 0;
         font-weight: 400;
-        color: lighten($dark, 35%);
+        color: brightenLive('--color-dark', 35);
         strong {
           font-weight: 400;
-          color: $dark;
+          color: var(--font-color-base);
         }
       }
       &.active,
       &:focus,
       &:hover {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       &.disabled {
         opacity: 0.5;
@@ -170,7 +173,7 @@ entity-picker-results {
     max-height: 49vh;
     overflow: auto;
     .novo-item-content {
-      margin-top: $spacing-sm;
+      margin-top: var(--spacing-sm);
       margin-left: 1.8rem;
       row-gap: 1rem;
       .novo-text {
@@ -197,7 +200,7 @@ distribution-list-picker-results {
   background: $white;
   padding: 1px;
   &.active {
-    border: 1px solid $positive;
+    border: 1px solid var(--color-positive);
   }
   .novo-list {
     min-height: 100%;
@@ -208,7 +211,7 @@ distribution-list-picker-results {
     .novo-list-item {
       display: block;
       transition: background-color 250ms;
-      border-bottom: 1px solid $background-dark;
+      border-bottom: 1px solid var(--background-dark);
       cursor: pointer;
       &.disabled {
         opacity: 0.5;
@@ -231,10 +234,10 @@ distribution-list-picker-results {
         margin-left: 15px;
       }
       &.active {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       &:hover {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       item-content {
         flex-flow: row nowrap;
@@ -292,7 +295,8 @@ distribution-list-picker-results {
     z-index: 9;
     position: absolute;
     width: 100%;
-    background-color: white;
+    background-color: var(--background-bright);
     color: black;
   }
 }
+

package/elements/picker/extras/skills-picker-results/SkillsSpecialtyPickerResults.scss

@@ -8,7 +8,7 @@
   z-index: 99;
   background: $white;
   &.active {
-    border: 1px solid $positive;
+    border: 1px solid var(--color-positive);
   }
   novo-list {
     list-style: none;
@@ -39,7 +39,7 @@
       &.active,
       &:focus,
       &:hover {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       &.disabled {
         opacity: 0.5;
@@ -62,6 +62,6 @@
   .picker-loading,
   .picker-null {
     text-align: center;
-    color: darken($light, 15%);
+    color: darkenLive('--color-light', 15);
   }
 }

package/elements/places/index.d.ts

@@ -14,12 +14,13 @@ declare class GooglePlacesService {
     private platformId;
     private _global;
     private _localStorageService;
+    private mapsLoad?;
+    private mapsLoadKey?;
     constructor(_http: HttpClient, platformId: Object, _global: GlobalRef, _localStorageService: LocalStorageService);
-    getPredictions(url: string, query: string): Promise<any>;
-    getLatLngDetail(url: string, lat: number, lng: number): Promise<any>;
-    getPlaceDetails(url: string, placeId: string): Promise<any>;
-    getGeoCurrentLocation(): Promise<any>;
-    getGeoLatLngDetail(latlng: any): Promise<any>;
+    loadGoogleMaps(settings: PlacesSettings): Promise<void>;
+    private injectGoogleMapsScript;
+    getPredictions(url: string, query: string, sessionToken?: string): Promise<any>;
+    getPlaceDetails(url: string, placeId: string, sessionToken?: string): Promise<any>;
     getGeoPrediction(params: any): Promise<any>;
     getGeoPlaceDetail(placeId: string): Promise<any>;
     getGeoPaceDetailByReferance(referance: string): Promise<any>;
@@ -55,6 +56,12 @@ interface PlacesSettings {
     currentLocIconUrl?: string;
     searchIconUrl?: string;
     locationIconUrl?: string;
+    /** Bullhorn-managed key; when set, the library lazy-loads the Maps JS SDK with it instead of relying on a host script tag. */
+    googleApiKey?: string;
+    /** Extra Maps JS loader query params, merged over the defaults (libraries=places, loading=async). */
+    googleMapsLoaderParams?: Record<string, string>;
+    /** When false/undefined, the address-block inline autocomplete overlay is suppressed even when this config is present. */
+    addressBlockEnabled?: boolean;
 }
 /** Normalized address prediction; raw provider records are mapped into this via normalizePrediction. */
 interface AddressLookupPrediction {
@@ -67,17 +74,17 @@ interface AddressLookupPrediction {
     raw?: any;
 }
 declare class PlacesListComponent extends BasePickerResults implements OnInit, OnChanges, ControlValueAccessor {
-    private platformId;
     private _elmRef;
     private _global;
     private _googlePlacesService;
     private cdr;
+    private addressConfig;
+    private static readonly SESSION_TOKEN_TIMEOUT_MS;
     userSettings: PlacesSettings;
     termChange: EventEmitter<any>;
     select: EventEmitter<any>;
     matchesUpdated: EventEmitter<AddressLookupPrediction[]>;
     locationInput: string;
-    gettingCurrentLocationFlag: boolean;
     dropdownOpen: boolean;
     recentDropdownOpen: boolean;
     isSettingsError: boolean;
@@ -87,11 +94,13 @@ declare class PlacesListComponent extends BasePickerResults implements OnInit, O
     private selectedDataIndex;
     private recentSearchData;
     private userSelectedOption;
+    private sessionToken;
+    private sessionTokenStartedAt;
     private defaultSettings;
     model: any;
     onModelChange: Function;
     onModelTouched: Function;
-    constructor(platformId: Object, _elmRef: ElementRef, _global: GlobalRef, _googlePlacesService: GooglePlacesService, cdr: ChangeDetectorRef);
+    constructor(_elmRef: ElementRef, _global: GlobalRef, _googlePlacesService: GooglePlacesService, cdr: ChangeDetectorRef, addressConfig?: PlacesSettings);
     ngOnInit(): any;
     ngOnChanges(): any;
     writeValue(model: any): void;
@@ -104,22 +113,23 @@ declare class PlacesListComponent extends BasePickerResults implements OnInit, O
     selectMatch(match: AddressLookupPrediction): any;
     closeAutocomplete(event: any): any;
     userQuerySubmit(selectedOption?: any): any;
-    currentLocationSelected(): any;
+    normalizePrediction(raw: any): AddressLookupPrediction;
+    onKeyDown(event: KeyboardEvent): void;
+    search(term: any, mode?: any): Observable<any>;
     private moduleInit;
     private processSearchQuery;
     private setUserSettings;
     private getListQuery;
+    private ensureSessionToken;
+    private generateSessionToken;
+    private clearSessionToken;
     private extractServerList;
     private updateListItem;
     private showRecentSearch;
-    private getCurrentLocationInfo;
     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 ɵfac: i0.ɵɵFactoryDeclaration<PlacesListComponent, [null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PlacesListComponent, "google-places-list", never, { "userSettings": { "alias": "userSettings"; "required": false; }; }, { "termChange": "termChange"; "select": "select"; "matchesUpdated": "matchesUpdated"; }, never, never, false, never>;
 }
 

package/elements/places/places.component.scss

@@ -4,7 +4,7 @@
   display: grid;
   novo-list {
     border: 1px solid #4a89dc;
-    background-color: $white;
+    background-color: var(--background-body);
     novo-list-item {
       cursor: pointer;
       flex: 0 0;
@@ -13,10 +13,10 @@
         width: 100%;
       }
       &.active {
-        background-color: lighten($positive, 35%);
+        background-color: brightenLive('--color-positive', 35);
       }
       &:hover {
-        background-color: lighten($positive, 39%);
+        background-color: brightenLive('--color-positive', 39);
       }
       item-content {
         flex-flow: row wrap;

package/elements/popover/PopOver.scss

@@ -13,6 +13,7 @@
     color: var(--text-main, $dark);
     background-clip: padding-box;
     box-shadow: $shadow-popover;
+    border-radius: var(--border-radius-sm);
 
     &.top {
       margin-top: -1rem;
@@ -21,7 +22,7 @@
       }
     }
     &.right {
-      margin-left: 1rem;
+      margin-left: var(--spacing-md);
       &.virtual-area {
         left: -1.1rem;
       }

package/elements/progress/Progress.scss

@@ -22,8 +22,8 @@
   &.linear {
     width: 200px;
     height: 1.2em;
-    background-color: $background;
-    border: 1px solid $empty;
+    background-color: var(--background-main);
+    border: 1px solid var(--color-empty);
     overflow: hidden;
   }
 

package/elements/progress/ProgressBar.scss

@@ -7,7 +7,7 @@
 
   &.linear {
     @include theme-backgrounds("color");
-    background-color: $positive;
+    background-color: var(--color-positive);
 
     &:first-child {
       border-radius: 0.2em 0 0 0.2em;
@@ -51,7 +51,7 @@
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &[color="#{$name}"] {
         svg circle {
-          stroke: $color;
+          stroke: getCssVarname($name);
         }
       }
     }
@@ -59,7 +59,7 @@
 
     svg {
       circle {
-        stroke: $positive;
+        stroke: var(--color-positive);
         transform-origin: 50% 50%;
         transform: rotate(-90deg);
         transition: 0.35s stroke-dashoffset;
@@ -105,3 +105,13 @@
   60% { transform: translateX(0%) }
   100% { transform: translateX(0%) }
 }
+
+// bh2026: pill progress bar ends (fill color rides on the deferred accent).
+:host-context([data-theme='bh2026']) {
+  &.linear:first-child {
+    border-radius: 999px 0 0 999px;
+  }
+  &.linear:last-child {
+    border-radius: 0 999px 999px 0;
+  }
+}

package/elements/query-builder/condition-builder/condition-builder.component.scss

@@ -39,7 +39,7 @@
           width: 100px;
           min-width: 100px;
           max-width: 100px;
-          margin-right: 1rem;
+          margin-right: var(--spacing-md);
           novo-select {
             min-width: 70px;
           }
@@ -71,23 +71,4 @@
       }
     }
   }
-
-  .and-or-filter-button {
-    box-sizing: border-box;
-    background: #fff;
-    border: 1px solid #ddd;
-    color: #5691f5;
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    margin: 0.4rem auto;
-    align-items: center;
-    text-align: center;
-    user-select: none;
-    outline: none;
-    white-space: nowrap;
-    text-transform: uppercase;
-    overflow: hidden;
-    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-  }
 }