@esri/solutions-components 0.6.17 → 0.6.18

package/dist/esm/{basemap-gallery_6.entry.js → basemap-gallery_7.entry.js}

@@ -99,6 +99,93 @@ const BasemapGallery = class {
 };
 BasemapGallery.style = basemapGalleryCss;
 
+const floorFilterCss = ":host{display:block}";
+
+const FloorFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.floorFilterWidget = undefined;
+    this.mapView = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      this._initFloorFilter(this.mapView);
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    return this._initModules();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => { this._floorFilterElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FloorFilter] = await loadModules([
+      "esri/widgets/FloorFilter"
+    ]);
+    this.FloorFilter = FloorFilter;
+  }
+  /**
+   * Initialize the floor filter or reset the current view if it already exists
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _initFloorFilter(view) {
+    if (view && this.FloorFilter) {
+      if (!this.floorFilterWidget) {
+        this.floorFilterWidget = new this.FloorFilter({
+          container: this._floorFilterElement,
+          view
+        });
+      }
+      else {
+        this.floorFilterWidget.view = view;
+      }
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+};
+FloorFilter.style = floorFilterCss;
+
 const mapFullscreenCss = ":host{display:block}";
 
 const MapFullscreen = class {
@@ -291,7 +378,7 @@ const MapLegend = class {
 };
 MapLegend.style = mapLegendCss;
 
-const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-ui-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.action-bar-color{background-color:var(--calcite-ui-border-3) !important}.align-center{align-items:center}";
+const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-ui-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.align-center{align-items:center}";
 
 const MapPicker = class {
   constructor(hostRef) {
@@ -391,7 +478,7 @@ const MapPicker = class {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "action-bar-color border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -624,6 +711,7 @@ const MapTools = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.enableLegend = undefined;
+    this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
     this.enableSearch = undefined;
     this.enableBasemap = undefined;
@@ -634,6 +722,7 @@ const MapTools = class {
     this._translations = undefined;
     this._showTools = true;
     this._showBasemapWidget = false;
+    this._showFloorFilter = false;
     this._showFullscreen = false;
     this._showLegendWidget = false;
     this._showSearchWidget = false;
@@ -660,6 +749,21 @@ const MapTools = class {
   /**
    * When the _showBasemapWidget property is true display the basemap gallery
    */
+  async _showFloorFilterWatchHandler(v) {
+    const widget = this._floorFilterElement.floorFilterWidget;
+    if (v) {
+      this.mapView.ui.add(widget, {
+        position: "top-right",
+        index: 1
+      });
+    }
+    else {
+      this.mapView.ui.remove(widget);
+    }
+  }
+  /**
+   * When the _showFullscreen property is true the app will consume the full screen
+   */
   async _showFullscreenWatchHandler(v) {
     const fs = this._fullscreenElement.fullscreenWidget;
     if (v) {
@@ -727,6 +831,7 @@ const MapTools = class {
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
+    const floorFilterClass = this._showFloorFilter ? "" : "display-none";
     const fullscreenClass = this._showFullscreen ? "" : "display-none";
     const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
     const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
@@ -740,7 +845,9 @@ const MapTools = class {
       this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
       undefined, this.enableBasemap ?
       this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
-      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
+      undefined, this.enableFloorFilter ?
+      this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
+      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -783,6 +890,17 @@ const MapTools = class {
     this._showBasemapWidget = !this._showBasemapWidget;
     this._showTools = false;
   }
+  /**
+   * Show/Hide the floor filter
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _toggleFloorFilter() {
+    this._showFloorFilter = !this._showFloorFilter;
+    this._showTools = false;
+  }
   /**
    * Enter/Exit fullscreen mode
    *
@@ -805,6 +923,7 @@ const MapTools = class {
       this._showBasemapWidget = false;
       this._showSearchWidget = false;
       this._showLegendWidget = false;
+      this._showFloorFilter = false;
     }
     this._showTools = !this._showTools;
   }
@@ -821,6 +940,7 @@ const MapTools = class {
   get el() { return getElement(this); }
   static get watchers() { return {
     "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
+    "_showFloorFilter": ["_showFloorFilterWatchHandler"],
     "_showFullscreen": ["_showFullscreenWatchHandler"],
     "_showLegendWidget": ["_showLegendWidgetWatchHandler"],
     "_showSearchWidget": ["_showSearchWidgetWatchHandler"]
@@ -828,4 +948,4 @@ const MapTools = class {
 };
 MapTools.style = mapToolsCss;
 
-export { BasemapGallery as basemap_gallery, MapFullscreen as map_fullscreen, MapLegend as map_legend, MapPicker as map_picker, MapSearch as map_search, MapTools as map_tools };
+export { BasemapGallery as basemap_gallery, FloorFilter as floor_filter, MapFullscreen as map_fullscreen, MapLegend as map_legend, MapPicker as map_picker, MapSearch as map_search, MapTools as map_tools };

package/dist/esm/{calcite-tree_3.entry.js → calcite-checkbox_3.entry.js}

@@ -3,14 +3,133 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, a as getAssetPath } from './index-c7de2486.js';
-import { e as focusElement, n as nodeListToArray, g as getSlotted, u as slotChangeHasAssignedElement, a as getElementDir, t as toAriaBoolean, y as filterDirectChildren } from './dom-ae3d8818.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1fee63c6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7de2486.js';
+import { t as toAriaBoolean, e as focusElement, n as nodeListToArray, g as getSlotted, u as slotChangeHasAssignedElement, a as getElementDir, y as filterDirectChildren } from './dom-ae3d8818.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-65431957.js';
+import { g as guid } from './guid-d34fe102.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-22a66feb.js';
+import { i as isActivationKey } from './key-554ad3f4.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-7187f15b.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-d0274dee.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1fee63c6.js';
 import { C as CSS_UTILITY } from './resources-4d5cdf35.js';
-import './guid-d34fe102.js';
-import './observers-a3cec8e4.js';
 import './browser-2ab8d297.js';
+import './observers-a3cec8e4.js';
+
+const checkboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Checkbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 6);
+    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 6);
+    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 6);
+    this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+    this.indeterminatePath = "M13 8v1H3V8z";
+    this.getPath = () => this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
+    this.toggle = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.setFocus();
+        this.indeterminate = false;
+        this.calciteCheckboxChange.emit();
+      }
+    };
+    this.keyDownHandler = (event) => {
+      if (isActivationKey(event.key)) {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
+    this.clickHandler = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.toggle();
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.form = undefined;
+    this.guid = undefined;
+    this.hovered = false;
+    this.indeterminate = false;
+    this.label = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.scale = "m";
+    this.value = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  syncHiddenFormInput(input) {
+    input.type = "checkbox";
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    connectInteractive(this);
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (toggleEl) => (this.toggleEl = toggleEl) }, h("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return getElement(this); }
+};
+Checkbox.style = checkboxCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -612,319 +731,4 @@ const TreeItem = class {
 };
 TreeItem.style = treeItemCss;
 
-const solutionItemIconCss = ".item-type-icon{pointer-events:none;display:block;height:1rem;box-sizing:border-box;margin-left:0.75rem;margin-right:0.75rem;min-width:0;flex-grow:0;flex-shrink:1}.item-type-icon-group-1-up>.block{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.item-type-icon-group-2-up>.block{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.item-type-icon-group-3-up>.block{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.item-type-icon-group-4-up>.block{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.item-type-icon-group-5-up>.block{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.item-type-icon-group-6-up>.block{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.item-type-icon-group-7-up>.block{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.item-type-icon-group-8-up>.block{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.tablet-block-group-1-up>.item-type-icon{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.tablet-block-group-2-up>.item-type-icon{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.tablet-block-group-3-up>.item-type-icon{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.tablet-block-group-4-up>.item-type-icon{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.tablet-block-group-5-up>.item-type-icon{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.tablet-block-group-6-up>.item-type-icon{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.tablet-block-group-7-up>.item-type-icon{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.tablet-block-group-8-up>.item-type-icon{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.phone-block-group-1-up>.item-type-icon{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.phone-block-group-2-up>.item-type-icon{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.phone-block-group-3-up>.item-type-icon{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.phone-block-group-4-up>.item-type-icon{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.phone-block-group-5-up>.item-type-icon{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.phone-block-group-6-up>.item-type-icon{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.phone-block-group-7-up>.item-type-icon{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.phone-block-group-8-up>.item-type-icon{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.code-face .item-type-icon{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:normal}.code-face .item-type-icon b,.code-face .item-type-icon strong{font-weight:400}.code-italic .item-type-icon{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:italic}.code-italic .item-type-icon b,.code-italic .item-type-icon strong{font-weight:400}.item-type-icon{margin-top:0.15em !important;min-width:16px;fill:currentColor;transform:rotate(360deg)}.item-type-icon-margin{margin-inline-end:0.375rem}";
-
-const SolutionItemIcon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isPortal = false;
-    this.type = "";
-    this.typeKeywords = [];
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Renders the component.
-   */
-  render() {
-    return h("div", { title: this.type }, h("img", { class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (protected)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods (async)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * This function was copied and slightly modified from the arcgis-portal-app.
-   *
-   * This will construct the path to the icon based on type and typeKeyword info.
-   *
-   * @param type The item type
-   * @param typeKeywords The item typeKeywords
-   */
-  _getIconUrl(type, typeKeywords) {
-    const itemType = (type && type.toLowerCase()) || "", imgDir = "./item-icons/", size = "16"; //for now we only support 16x16 pixel images
-    let isHosted = false, isRouteLayer = false, isMarkupLayer = false, isTable = false, isSpatiotemporal = false, isRelational = false, imgName = "";
-    typeKeywords = typeKeywords || [];
-    if (itemType.indexOf("service") > 0 || itemType === "feature collection" || itemType === "kml" || itemType === "wms" || itemType === "wmts" || itemType === "wfs") {
-      isHosted = typeKeywords.indexOf("Hosted Service") > -1;
-      if (itemType === "feature service" || itemType === "feature collection" || itemType === "kml" || itemType === "wfs") {
-        isTable = typeKeywords.indexOf("Table") > -1;
-        isRouteLayer = typeKeywords.indexOf("Route Layer") > -1;
-        isMarkupLayer = typeKeywords.indexOf("Markup") > -1;
-        isSpatiotemporal = typeKeywords.indexOf("Spatiotemporal") !== -1;
-        imgName = isSpatiotemporal && isTable ? "spatiotemporaltable" : (isTable ? "table" : (isRouteLayer ? "routelayer" : (isMarkupLayer ? "markup" : (isSpatiotemporal ? "spatiotemporal" : (isHosted ? "featureshosted" : "features")))));
-      }
-      else if (itemType === "map service" || itemType === "wms" || itemType === "wmts") {
-        isSpatiotemporal = typeKeywords.indexOf("Spatiotemporal") !== -1;
-        isRelational = typeKeywords.indexOf("Relational") !== -1;
-        if (isSpatiotemporal || isRelational) {
-          imgName = "mapimages";
-        }
-        else {
-          imgName = (isHosted || typeKeywords.indexOf("Tiled") > -1 || itemType === "wmts") ? "maptiles" : "mapimages";
-        }
-      }
-      else if (itemType === "scene service") {
-        if (typeKeywords.indexOf("Line") > -1) {
-          imgName = "sceneweblayerline";
-        }
-        else if (typeKeywords.indexOf("3DObject") > -1) {
-          imgName = "sceneweblayermultipatch";
-        }
-        else if (typeKeywords.indexOf("Point") > -1) {
-          imgName = "sceneweblayerpoint";
-        }
-        else if (typeKeywords.indexOf("IntegratedMesh") > -1) {
-          imgName = "sceneweblayermesh";
-        }
-        else if (typeKeywords.indexOf("PointCloud") > -1) {
-          imgName = "sceneweblayerpointcloud";
-        }
-        else if (typeKeywords.indexOf("Polygon") > -1) {
-          imgName = "sceneweblayerpolygon";
-        }
-        else if (typeKeywords.indexOf("Building") > -1) {
-          imgName = "sceneweblayerbuilding";
-        }
-        else {
-          imgName = "sceneweblayer";
-        }
-      }
-      else if (itemType === "image service") {
-        imgName = typeKeywords.indexOf("Elevation 3D Layer") > -1 ? "elevationlayer" : (typeKeywords.indexOf("Tiled Imagery") > -1 ? "tiledimagerylayer" : "imagery");
-      }
-      else if (itemType === "stream service") {
-        imgName = "streamlayer";
-      }
-      else if (itemType === "vector tile service") {
-        imgName = "vectortile";
-      }
-      else if (itemType === "datastore catalog service") {
-        imgName = "datastorecollection";
-      }
-      else if (itemType === "geocoding service") {
-        imgName = "geocodeservice";
-      }
-      else if (itemType === "geoprocessing service") {
-        imgName = (typeKeywords.indexOf("Web Tool") > -1 && (this.isPortal)) ? "tool" : "layers";
-      }
-      else {
-        imgName = "layers";
-      }
-    }
-    else if (itemType === "web map" || itemType === "cityengine web scene") {
-      imgName = "maps";
-    }
-    else if (itemType === "web scene") {
-      imgName = typeKeywords.indexOf("ViewingMode-Local") > -1 ? "webscenelocal" : "websceneglobal";
-    }
-    else if (itemType === "web mapping application" || itemType === "mobile application" || itemType === "application" ||
-      itemType === "operation view" || itemType === "desktop application") {
-      imgName = "apps";
-    }
-    else if (itemType === "map document" || itemType === "map package" || itemType === "published map" || itemType === "scene document" ||
-      itemType === "globe document" || itemType === "basemap package" || itemType === "mobile basemap package" || itemType === "mobile map package" ||
-      itemType === "project package" || itemType === "project template" || itemType === "pro map" || itemType === "layout" ||
-      (itemType === "layer" && typeKeywords.indexOf("ArcGIS Pro") > -1) || (itemType === "explorer map" && typeKeywords.indexOf("Explorer Document"))) {
-      imgName = "mapsgray";
-    }
-    else if (itemType === "service definition" || itemType === "csv" || itemType === "shapefile" || itemType === "cad drawing" || itemType === "geojson" || itemType === "360 vr experience" || itemType === "netcdf" || itemType === "administrative report") {
-      imgName = "datafiles";
-    }
-    else if (itemType === "explorer add in" || itemType === "desktop add in" || itemType === "windows viewer add in" || itemType === "windows viewer configuration") {
-      imgName = "appsgray";
-    }
-    else if (itemType === "arcgis pro add in" || itemType === "arcgis pro configuration") {
-      imgName = "addindesktop";
-    }
-    else if (itemType === "rule package" || itemType === "file geodatabase" || itemType === "sqlite geodatabase" || itemType === "csv collection" || itemType === "kml collection" ||
-      itemType === "windows mobile package" || itemType === "map template" || itemType === "desktop application template" || itemType === "gml" ||
-      itemType === "arcpad package" || itemType === "code sample" || itemType === "form" || itemType === "document link" ||
-      itemType === "operations dashboard add in" || itemType === "rules package" || itemType === "image" || itemType === "workflow manager package" ||
-      (itemType === "explorer map" && typeKeywords.indexOf("Explorer Mapping Application") > -1 || typeKeywords.indexOf("Document") > -1)) {
-      imgName = "datafilesgray";
-    }
-    else if (itemType === "network analysis service" || itemType === "geoprocessing service" ||
-      itemType === "geodata service" || itemType === "geometry service" || itemType === "geoprocessing package" ||
-      itemType === "locator package" || itemType === "geoprocessing sample" || itemType === "workflow manager service") {
-      imgName = "toolsgray";
-    }
-    else if (itemType === "layer" || itemType === "layer package" || itemType === "explorer layer") {
-      imgName = "layersgray";
-    }
-    else if (itemType === "scene package") {
-      imgName = "scenepackage";
-    }
-    else if (itemType === "mobile scene package") {
-      imgName = "mobilescenepackage";
-    }
-    else if (itemType === "tile package" || itemType === "compact tile package") {
-      imgName = "tilepackage";
-    }
-    else if (itemType === "task file") {
-      imgName = "taskfile";
-    }
-    else if (itemType === "report template") {
-      imgName = "report-template";
-    }
-    else if (itemType === "statistical data collection") {
-      imgName = "statisticaldatacollection";
-    }
-    else if (itemType === "insights workbook") {
-      imgName = "workbook";
-    }
-    else if (itemType === "insights model") {
-      imgName = "insightsmodel";
-    }
-    else if (itemType === "insights page") {
-      imgName = "insightspage";
-    }
-    else if (itemType === "insights theme") {
-      imgName = "insightstheme";
-    }
-    else if (itemType === "hub initiative") {
-      imgName = "hubinitiative";
-    }
-    else if (itemType === "hub page") {
-      imgName = "hubpage";
-    }
-    else if (itemType === "hub site application") {
-      imgName = "hubsite";
-    }
-    else if (itemType === "hub event") {
-      imgName = "hubevent";
-    }
-    else if (itemType === "relational database connection") {
-      imgName = "relationaldatabaseconnection";
-    }
-    else if (itemType === "big data file share") {
-      imgName = "datastorecollection";
-    }
-    else if (itemType === "image collection") {
-      imgName = "imagecollection";
-    }
-    else if (itemType === "desktop style") {
-      imgName = "desktopstyle";
-    }
-    else if (itemType === "style") {
-      imgName = "style";
-    }
-    else if (itemType === "dashboard") {
-      imgName = "dashboard";
-    }
-    else if (itemType === "raster function template") {
-      imgName = "rasterprocessingtemplate";
-    }
-    else if (itemType === "vector tile package") {
-      imgName = "vectortilepackage";
-    }
-    else if (itemType === "ortho mapping project") {
-      imgName = "orthomappingproject";
-    }
-    else if (itemType === "ortho mapping template") {
-      imgName = "orthomappingtemplate";
-    }
-    else if (itemType === "solution") {
-      imgName = "solutions";
-    }
-    else if (itemType === "geopackage") {
-      imgName = "geopackage";
-    }
-    else if (itemType === "deep learning package") {
-      imgName = "deeplearningpackage";
-    }
-    else if (itemType === "real time analytic") {
-      imgName = "realtimeanalytics";
-    }
-    else if (itemType === "big data analytic") {
-      imgName = "bigdataanalytics";
-    }
-    else if (itemType === "feed") {
-      imgName = "feed";
-    }
-    else if (itemType === "excalibur imagery project") {
-      imgName = "excaliburimageryproject";
-    }
-    else if (itemType === "notebook") {
-      imgName = "notebook";
-    }
-    else if (itemType === "storymap") {
-      imgName = "storymap";
-    }
-    else if (itemType === "survey123 add in") {
-      imgName = "survey123addin";
-    }
-    else if (itemType === "mission") {
-      imgName = "mission";
-    }
-    else if (itemType === "mission report") {
-      imgName = "missionreport";
-    }
-    else if (itemType === "quickcapture project") {
-      imgName = "quickcaptureproject";
-    }
-    else if (itemType === "pro report") {
-      imgName = "proreport";
-    }
-    else if (itemType === "urban model") {
-      imgName = "urbanmodel";
-    }
-    else if (itemType === "web experience") {
-      imgName = "experiencebuilder";
-    }
-    else if (itemType === "web experience template") {
-      imgName = "webexperiencetemplate";
-    }
-    else if (itemType === "workflow") {
-      imgName = "workflow";
-    }
-    else if (itemType === "kernel gateway connection") {
-      imgName = "kernelgatewayconnection";
-    }
-    else if (itemType === "insights script") {
-      imgName = "insightsscript";
-    }
-    else if (itemType === "hub initiative template") {
-      imgName = "hubinitiativetemplate";
-    }
-    else if (itemType === "storymap theme") {
-      imgName = "storymaptheme";
-    }
-    else if (itemType === "group") {
-      imgName = "group";
-    }
-    else {
-      imgName = "maps";
-    }
-    return imgName ? getAssetPath(imgDir + imgName + size + ".png") : null;
-  }
-  static get assetsDirs() { return ["item-icons"]; }
-  get el() { return getElement(this); }
-};
-SolutionItemIcon.style = solutionItemIconCss;
-
-export { Tree as calcite_tree, TreeItem as calcite_tree_item, SolutionItemIcon as solution_item_icon };
+export { Checkbox as calcite_checkbox, Tree as calcite_tree, TreeItem as calcite_tree_item };