Fixed an issue with sizing circular progress bars. Added search loading property to chip list.

chip-list.js

@@ -2,6 +2,7 @@ import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, list, div, input, button, h4, span } from "../ignite-html/ignite-template.js";
 import { Chip } from "./chip.js";
 import { Popper } from "./popper.js";
+import { LinearProgress } from "./linear-progress.js";
 
 class ChipList extends IgniteElement {
     constructor() {
@@ -75,9 +76,13 @@ class ChipList extends IgniteElement {
             search: true,
             searching: false,
             showSearchResults: true,
+            searchLoading: false,
             searchResults: null,
             searchPlaceholder: "No results found.",
             searchFooter: null,
+            onSearch: null,
+            onSearchDelay: 200,
+            onSearchCallback: null,
             blurTimeout: null,
             documentListener: null,
             freeForm: true,
@@ -203,24 +208,31 @@ class ChipList extends IgniteElement {
                                     //Don't allow input if we reached the max number of items.
                                     e.preventDefault();
                                 }
+
+                                //If we are searching and we have a on search function invoke it.
+                                if (this.searching && this.onSearch) {
+                                    if (this.onSearchCallback) {
+                                        clearTimeout(this.onSearchCallback);
+                                    }
+                                    this.onSearchCallback = setTimeout(() => this.onSearch(this.input.textContent.trim()), this.onSearchDelay);
+                                }
                             })
                     ),
                 new Popper()
                     .property("show", this.searching)
                     .child(
                         new div()
-                            .class("d-flex flex-column justify-content-center p-2")
+                            .class("d-flex flex-column justify-content-center p-2 shadow bg-white")
-                            .style("background-color", "#fff")
                             .style("border-radius", "0.4em")
-                            .style("box-shadow", "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px")
                             .child(
-                                new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults], (searchResults, showSearchResults) => {
+                                new LinearProgress().class("my-2").property("loading", this.searchLoading),
+                                new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults, this.searchLoading], (searchResults, showSearchResults, searchLoading) => {
                                     //Dont show the placeholder if we have search results, or if we are not showing search results.
-                                    return (searchResults != null && searchResults.length > 0) || !showSearchResults;
+                                    return (searchResults != null && searchResults.length > 0 && !searchLoading) || (!showSearchResults || searchLoading);
                                 }),
                                 new list(this.searchResults, item => {
                                     return new div(item.content).class("search-result p-2").onClick(() => this.searchResultClick(item));
-                                }).hide(this.showSearchResults, value => { return !value; }),
+                                }).hide([this.showSearchResults, this.searchLoading], (showSearchResults, searchLoading) => !showSearchResults || searchLoading),
                                 this.searchFooter
                             )
                     ),

circular-progress.js

@@ -11,8 +11,6 @@ class CircularProgress extends IgniteElement {
         mt-circular-progress > div > svg {
             position: absolute;
             z-index: 1;
-            left: calc(50% - (4em / 2));
-            top: calc(50% - (4em / 2));
             animation: rotator 2s linear infinite;
         }
           
@@ -81,6 +79,8 @@ class CircularProgress extends IgniteElement {
                     .attribute("viewBox", "22 22 44 44")
                     .style("width", this.size)
                     .style("height", this.size)
+                    .style("left", this.size, null, size => `calc(50% - (${size} / 2))`)
+                    .style("top", this.size, null, size => `calc(50% - (${size} / 2))`)
                     .show(this.loading)
                     .child(
                         new circle()