@ukic/web-components 2.1.0-beta.12 → 2.1.0-beta.14

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js

@@ -0,0 +1,225 @@
+import { h, } from "@stencil/core";
+export class PaginationItem {
+  constructor() {
+    this.handleClick = () => {
+      this.paginationItemClick.emit({ page: this.page });
+    };
+    this.page = undefined;
+    this.selected = false;
+    this.type = undefined;
+    this.disabled = false;
+    this.appearance = undefined;
+    this.label = "Page ";
+    this.ariaOverride = false;
+    this.pages = undefined;
+  }
+  render() {
+    const { page, selected, type, disabled, appearance, label, ariaOverride, pages, } = this;
+    return (h("a", null, type === "ellipsis" ? (h("div", { class: {
+        ["item-container"]: true,
+        ["ellipsis"]: true,
+        ["disabled"]: disabled,
+      } }, h("ic-typography", { class: {
+        [`${appearance}`]: true,
+      }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "Current page", "aria-label": selected ? `${label}: ${page}` : `Go to page ${page}`, class: {
+        ["selected"]: !disabled && selected,
+        ["disabled"]: disabled,
+        ["item-container"]: true,
+        [`${appearance}`]: true,
+        ["page"]: type === "page",
+      } }, h("ic-typography", { variant: "label", class: {
+        ["page-selected"]: selected,
+        ["disabled"]: disabled,
+        [`${appearance}`]: true,
+      } }, page))) : (h("ic-typography", { "aria-live": "polite", "aria-label": ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`, class: `simple-current ${appearance}`, variant: "label" }, label, " ", page))));
+  }
+  static get is() { return "ic-pagination-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-pagination-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-pagination-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "page": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current page number."
+        },
+        "attribute": "page",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the pagination item will be selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcPaginationItemType",
+          "resolved": "\"ellipsis\" | \"page\" | \"simple-current\"",
+          "references": {
+            "IcPaginationItemType": {
+              "location": "import",
+              "path": "./ic-pagination-item.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of pagination item - 'page' or 'ellipsis'."
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the pagination item will be disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The appearance of the pagination, e.g. dark, light or the default."
+        },
+        "attribute": "appearance",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the pagination item (applicable when simple pagination is being used)."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Page \""
+      },
+      "ariaOverride": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count."
+        },
+        "attribute": "aria-override",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "pages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The total number of pages."
+        },
+        "attribute": "pages",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "paginationItemClick",
+        "name": "paginationItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "- Emitted when a pagination item is clicked."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ page: number }",
+          "resolved": "{ page: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-pagination-item.js.map

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-pagination-item.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,CAAC,EACD,KAAK,GAEN,MAAM,eAAe,CAAC;AASvB,MAAM,OAAO,cAAc;;IAyCjB,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;;oBAjC0B,KAAK;;oBAQL,KAAK;;iBAQT,OAAO;wBAIC,KAAK;;;EAerC,MAAM;IACJ,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,KAAK,EACL,YAAY,EACZ,KAAK,GACN,GAAG,IAAI,CAAC;IAET,OAAO,CACL,aACG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,WACE,KAAK,EAAE;QACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;QACxB,CAAC,UAAU,CAAC,EAAE,IAAI;QAClB,CAAC,UAAU,CAAC,EAAE,QAAQ;OACvB;MAED,qBACE,KAAK,EAAE;UACL,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;SACxB,EACD,OAAO,EAAC,OAAO,UAGD,CACZ,CACP,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACpB,cACE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAC/B,IAAI,EAAC,QAAQ,kBACC,QAAQ,IAAI,cAAc,gBAC5B,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,EACjE,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,CAAC,QAAQ,IAAI,QAAQ;QACnC,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,gBAAgB,CAAC,EAAE,IAAI;QACxB,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;QACvB,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;OAC1B;MAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;UACL,CAAC,eAAe,CAAC,EAAE,QAAQ;UAC3B,CAAC,UAAU,CAAC,EAAE,QAAQ;UACtB,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;SACxB,IAEA,IAAI,CACS,CACT,CACV,CAAC,CAAC,CAAC,CACF,kCACY,QAAQ,gBAEhB,YAAY,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,IAAI,EAAE,EAEhE,KAAK,EAAE,kBAAkB,UAAU,EAAE,EACrC,OAAO,EAAC,OAAO;MAEd,KAAK;;MAAG,IAAI,CACC,CACjB,CACC,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../interface\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  /**\n   * The current page number.\n   */\n  @Prop() page: number | null;\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground;\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page \";\n  /**\n   * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.\n   */\n  @Prop() ariaOverride: boolean = false;\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages: number;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      appearance,\n      label,\n      ariaOverride,\n      pages,\n    } = this;\n\n    return (\n      <a>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: disabled,\n            }}\n          >\n            <ic-typography\n              class={{\n                [`${appearance}`]: true,\n              }}\n              variant=\"label\"\n            >\n              ...\n            </ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"Current page\"}\n            aria-label={selected ? `${label}: ${page}` : `Go to page ${page}`}\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: disabled,\n              [\"item-container\"]: true,\n              [`${appearance}`]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: disabled,\n                [`${appearance}`]: true,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            aria-label={\n              ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`\n            }\n            class={`simple-current ${appearance}`}\n            variant=\"label\"\n          >\n            {label} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-pagination-item/ic-pagination-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-pagination-item.types.js.map

package/dist/collection/components/ic-pagination-item/ic-pagination-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-pagination-item.types.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcPaginationItemType = \"page\" | \"ellipsis\" | \"simple-current\";\n"]}

package/dist/collection/components/ic-popover-menu/ic-popover-menu.css

@@ -440,7 +440,8 @@ video {
   vertical-align: baseline;
 }
 
-/** 
+
+/**
 * @prop --ic-z-index-popover: z-index of popover menu. 
 * @prop --max-height: Maximum height of the popover menu.
 * @prop --popover-width: Default width of the popover menu.

package/dist/collection/components/ic-search-bar/ic-search-bar.css

@@ -542,10 +542,6 @@ video {
   width: 100%;
 }
 
-ic-menu {
-  transition: var(--ic-easing-transition-slow);
-}
-
 .no-results {
   cursor: not-allowed;
 }

package/dist/collection/components/ic-search-bar/ic-search-bar.js

@@ -4,6 +4,7 @@ import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick
 import clearIcon from "../../assets/clear-icon.svg";
 import searchIcon from "../../assets/search-icon.svg";
 let inputIds = 0;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class SearchBar {
   constructor() {
     this.inputId = `ic-search-bar-input-${inputIds++}`;
@@ -12,6 +13,10 @@ export class SearchBar {
     this.truncateValue = false;
     this.assistiveHintEl = null;
     this.preventSubmit = false;
+    this.prevNoOption = false;
+    this.hasTimedOut = false;
+    this.preLoad = true;
+    this.retryButtonClick = false;
     this.handleSubmitSearch = () => {
       this.highlightedValue && (this.value = this.highlightedValue);
       this.highlightedValue = undefined;
@@ -27,6 +32,26 @@ export class SearchBar {
         this.handleSubmitSearch();
       }
     };
+    this.handleRetry = (ev) => {
+      this.retryViaKeyPress = ev.detail.keyPressed === "Enter";
+      this.icRetryLoad.emit({ value: ev.detail.value });
+      this.triggerLoading();
+      this.retryButtonClick = true;
+    };
+    this.triggerLoading = () => {
+      const loadingOption = [
+        { label: this.loadingLabel, value: "", loading: true },
+      ];
+      if (this.filteredOptions !== loadingOption)
+        this.filteredOptions = loadingOption;
+      if (this.timeout) {
+        this.timeoutTimer = window.setTimeout(() => {
+          this.filteredOptions = [
+            { label: this.loadingErrorLabel, value: "", timedOut: true },
+          ];
+        }, this.timeout);
+      }
+    };
     this.onInput = (ev) => {
       this.value = ev.target.value;
       const noOptions = [{ label: this.emptyOptionListText, value: "" }];
@@ -127,13 +152,22 @@ export class SearchBar {
     };
     this.handleHostBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
-      if (this.open && this.options && nextFocus !== this.menu) {
+      if (this.open &&
+        this.options &&
+        nextFocus !== this.menu &&
+        !this.retryViaKeyPress &&
+        !this.retryButtonClick) {
         this.setMenuChange(false);
       }
+      if (this.retryButtonClick || this.retryViaKeyPress) {
+        this.inputEl.setFocus();
+      }
       this.handleShowClearButton(false);
       this.handleMenuCloseFromMenuChange(false);
       this.handleTruncateValue(true);
       this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
+      this.retryViaKeyPress = false;
+      this.retryButtonClick = false;
     };
     this.handleShowClearButton = (visible) => {
       this.showClearButton = visible;
@@ -173,7 +207,8 @@ export class SearchBar {
       else if (this.hasOptionsOrFilterDisabled() &&
         this.filteredOptions.length > 0 &&
         this.open &&
-        searchResultsStatusEl) {
+        searchResultsStatusEl &&
+        !this.filteredOptions[0].loading) {
         if (this.hadNoOptions()) {
           searchResultsStatusEl.innerText = this.emptyOptionListText;
         }
@@ -188,14 +223,21 @@ export class SearchBar {
     this.isSubmitDisabled = () => {
       const valueNotSet = this.value === undefined || this.value === null || this.value === "";
       const valueLengthLess = this.value.length < this.charactersUntilSuggestion;
-      return (valueNotSet || valueLengthLess || this.disabled || this.hadNoOptions());
+      return (valueNotSet ||
+        valueLengthLess ||
+        this.disabled ||
+        this.hadNoOptions() ||
+        this.hasTimedOut ||
+        this.loading);
     };
     this.highlightFirstOptionAfterNoResults = () => {
-      if (this.prevNoOption && this.menu) {
+      if (this.prevNoOption && this.menu && !this.hasTimedOut) {
         this.menu.handleSetFirstOption();
         this.prevNoOption = false;
       }
-      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText);
+      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText ||
+        filteredOption.label === this.loadingErrorLabel ||
+        filteredOption.label === this.loadingLabel);
       if (prevNoOptionsList) {
         this.prevNoOption = true;
       }
@@ -219,6 +261,10 @@ export class SearchBar {
     this.name = this.inputId;
     this.spellcheck = false;
     this.options = [];
+    this.timeout = undefined;
+    this.loadingLabel = "Loading...";
+    this.loadingErrorLabel = "Loading Error";
+    this.loading = false;
     this.focusOnLoad = false;
     this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
     this.emptyOptionListText = "No results found";
@@ -229,11 +275,21 @@ export class SearchBar {
     this.showClearButton = false;
     this.clearButtonFocused = false;
     this.searchSubmitFocused = false;
-    this.prevNoOption = false;
     this.highlightedValue = undefined;
   }
+  loadingHandler(newValue) {
+    if (newValue && !this.hasTimedOut) {
+      this.preLoad = false;
+      this.triggerLoading();
+    }
+  }
+  filteredOptionsHandler(newOptions) {
+    this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
+  }
   watchOptionsHandler(newOptions) {
-    if (this.disableFilter) {
+    if (this.disableFilter && !this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
       if (newOptions.length > 0) {
         this.filteredOptions = newOptions;
       }
@@ -242,7 +298,11 @@ export class SearchBar {
           return;
         }
         this.setMenuChange(true);
-        this.filteredOptions = [{ label: this.emptyOptionListText, value: "" }];
+        !this.preLoad &&
+          (this.filteredOptions = [
+            { label: this.emptyOptionListText, value: "" },
+          ]);
+        this.preLoad = true;
       }
     }
     this.debounceAriaLiveUpdate();
@@ -261,6 +321,8 @@ export class SearchBar {
    * Sets focus on the native `input`.
    */
   async setFocus() {
+    this.retryViaKeyPress = false;
+    this.retryButtonClick = false;
     if (this.inputEl) {
       this.inputEl.setFocus();
     }
@@ -338,6 +400,9 @@ export class SearchBar {
     const disabledText = disabledMode && !readonly;
     const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
     const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
+    const isOrHasLoaded = this.filteredOptions.length === 1 &&
+      (this.filteredOptions[0].label === this.loadingLabel ||
+        filteredOptions[0].label === this.loadingErrorLabel);
     let expanded;
     if (options.length > 0) {
       if (menuOpen) {
@@ -375,8 +440,8 @@ export class SearchBar {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
-        "no-results": this.hadNoOptions(),
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+        "no-results": this.hadNoOptions() || isOrHasLoaded,
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get is() { return "ic-search-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -747,6 +812,77 @@ export class SearchBar {
         },
         "defaultValue": "[]"
       },
+      "timeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If using external filtering, set a timeout for when loading takes too long."
+        },
+        "attribute": "timeout",
+        "reflect": false
+      },
+      "loadingLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Change the message displayed whilst the options are being loaded externally."
+        },
+        "attribute": "loading-label",
+        "reflect": false,
+        "defaultValue": "\"Loading...\""
+      },
+      "loadingErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Change the message displayed when external loading times out."
+        },
+        "attribute": "loading-error-label",
+        "reflect": false,
+        "defaultValue": "\"Loading Error\""
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Trigger loading state when fetching options asyncronously"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "focusOnLoad": {
         "type": "boolean",
         "mutable": false,
@@ -829,7 +965,6 @@ export class SearchBar {
       "showClearButton": {},
       "clearButtonFocused": {},
       "searchSubmitFocused": {},
-      "prevNoOption": {},
       "highlightedValue": {}
     };
   }
@@ -1076,6 +1211,26 @@ export class SearchBar {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "icRetryLoad",
+        "name": "icRetryLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the 'retry loading' button is clicked"
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -1101,6 +1256,12 @@ export class SearchBar {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "loading",
+        "methodName": "loadingHandler"
+      }, {
+        "propName": "filteredOptions",
+        "methodName": "filteredOptionsHandler"
+      }, {
         "propName": "options",
         "methodName": "watchOptionsHandler"
       }, {