@esri/solutions-components 0.7.0 → 0.7.1

package/dist/collection/components/layer-table/layer-table.js

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryAllIds } from "../../utils/queryUtils";
+import { queryAllIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
   constructor() {
@@ -30,6 +30,14 @@ export class LayerTable {
      * number[]: A list of all IDs for the current layer
      */
     this._allIds = [];
+    /**
+     * boolean: When true the default global id provided via url param has been honored and should now be ignored
+     */
+    this._defaultGlobalIdHonored = false;
+    /**
+     * boolean: When true the default OID provided via url param has been honored and should now be ignored
+     */
+    this._defaultOidHonored = false;
     /**
      * bool: When true the table is being sorted
      */
@@ -45,7 +53,11 @@ export class LayerTable {
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.defaultLayerId = undefined;
+    this.defaultGlobalId = undefined;
+    this.defaultOid = undefined;
     this.enableAutoRefresh = undefined;
+    this.enableColumnReorder = true;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
     this.enableZoom = undefined;
@@ -60,6 +72,7 @@ export class LayerTable {
     this._isDeleting = false;
     this._layer = undefined;
     this._selectedIndexes = [];
+    this._showHideOpen = false;
     this._showOnlySelected = false;
     this._sortActive = false;
     this._translations = undefined;
@@ -220,6 +233,7 @@ export class LayerTable {
    */
   async componentDidLoad() {
     this._resizeObserver.observe(this._toolbar);
+    document.onclick = (e) => this._handleDocumentClick(e);
   }
   /**
    * Called after the component is rendered
@@ -274,7 +288,7 @@ export class LayerTable {
    * @returns The dom node that contains the controls
    */
   _getActionBar() {
-    return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
+    return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
   }
   /**
    * Get the actions that are used for various interactions with the table
@@ -287,11 +301,33 @@ export class LayerTable {
       if (cur && !cur.isOverflow) {
         prev.push(cur.isDanger ?
           this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
-          this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
+          cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(this._showHideOpen ? "chevron-down" : cur.icon, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+            this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
       }
       return prev;
     }, []);
   }
+  /**
+   * Get the list of fields as dropdown items and store the current selected state so
+   * we can show/hide the appropriate fields
+   *
+   * @returns Node with the fields as dropdown items
+   */
+  _getFieldlist() {
+    return this._columnsInfo ? (h("calcite-dropdown-group", { "selection-mode": "multiple" }, Object.keys(this._columnsInfo).map(k => {
+      const selected = this._columnsInfo[k];
+      return (h("calcite-dropdown-item", { id: k, onClick: (e) => {
+          const target = e.target;
+          this._columnsInfo[target.id] = target.selected;
+          if (!target.selected) {
+            this._table.hideColumn(target.id);
+          }
+          else {
+            this._table.showColumn(target.id);
+          }
+        }, selected: selected }, k));
+    }))) : undefined;
+  }
   /**
    * Update actions enabled prop based on number of selected indexes
    *
@@ -380,7 +416,14 @@ export class LayerTable {
         label: this._translations.exportCSV,
         disabled: featuresEmpty,
         isOverflow: false
-      } : undefined];
+      } : undefined, {
+        icon: this._showHideOpen ? "chevron-down" : "chevron-right",
+        func: () => this._toggleShowHide(),
+        label: this._translations.showHideColumns,
+        disabled: false,
+        isOverflow: false,
+        isSublist: true
+      }];
     this._defaultVisibleToolSizeInfos = undefined;
   }
   /**
@@ -531,9 +574,9 @@ export class LayerTable {
    */
   _getDropdown(id) {
     const dropdownItems = this._getDropdownItems();
-    return dropdownItems.length > 0 ? (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-      return (h("calcite-dropdown-item", { iconStart: item.icon, onClick: item.func }, item.label));
-    })))) : undefined;
+    return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
+      return (h("calcite-dropdown-item", { iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.icon, id: "solutions-subset-list", onClick: item.func }, item.label));
+    })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
   }
   /**
    * Get a list of toolInfos that should display in the dropdown
@@ -553,9 +596,9 @@ export class LayerTable {
    *
    * @returns VNode The node representing the DOM element that will contain the action
    */
-  _getAction(icon, label, func, disabled) {
+  _getAction(icon, label, func, disabled, slot) {
     const _disabled = this._layer === undefined ? true : disabled;
-    return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
+    return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
   }
   /**
    * Get a tooltip
@@ -608,6 +651,7 @@ export class LayerTable {
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
           view: this.mapView,
+          columnReorderingEnabled: this.enableColumnReorder,
           editingEnabled: this._editEnabled && this.enableInlineEdit,
           highlightEnabled: true,
           multiSortEnabled: false,
@@ -621,6 +665,7 @@ export class LayerTable {
           container: node
         });
       });
+      this._initColumnsInfo();
       this._checkEditEnabled();
       await this._table.when(() => {
         this._table.highlightIds.on("change", () => {
@@ -667,14 +712,53 @@ export class LayerTable {
     this._checkEditEnabled();
     this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
     this._initToolInfos();
-    await this._table.when(() => {
+    await this._table.when(async () => {
+      var _a, _b;
       this._table.highlightIds.removeAll();
       this._table.clearSelectionFilter();
+      this._initColumnsInfo();
+      if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1) {
+        this._selectDefaultFeature(this.defaultOid);
+        this._defaultOidHonored = true;
+      }
+      if (!this._defaultGlobalIdHonored && ((_b = this.defaultGlobalId) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        const features = await queryFeaturesByGlobalID(this.defaultGlobalId, this._layer);
+        const oids = (features === null || features === void 0 ? void 0 : features.length) > 0 ? features.map(f => f.getObjectId()) : undefined;
+        if (oids) {
+          this._selectDefaultFeature(oids);
+        }
+        this._defaultGlobalIdHonored = true;
+      }
     });
     this._showOnlySelected = false;
     this._sortActive = false;
     await this._sortTable();
   }
+  /**
+   * Store the column names and current hidden status to support show/hide of columns
+   *
+   * @returns void
+   */
+  _initColumnsInfo() {
+    this._columnsInfo = this._table.columns.reduce((prev, cur) => {
+      prev[cur.name] = !cur.hidden;
+      return prev;
+    }, {});
+  }
+  /**
+   * Select the feature that was specified via url params
+   *
+   * @returns void
+   */
+  _selectDefaultFeature(oids) {
+    if (oids.length > 0) {
+      this._table.highlightIds.addMany(oids);
+      void this._table.when(() => {
+        const i = this._table.viewModel.getObjectIdIndex(oids[0]);
+        this._table.viewModel.scrollToIndex(i);
+      });
+    }
+  }
   /**
    * Verify edit capabilities of the layer
    *
@@ -701,6 +785,45 @@ export class LayerTable {
       }
     }
   }
+  /**
+   * Open show/hide dropdown
+   */
+  _forceShowHide() {
+    if (this._showHideDropdown) {
+      this._showHideDropdown.open = this._showHideOpen;
+    }
+    if (this._moreDropdown) {
+      this._moreDropdown.open = this._showHideOpen;
+    }
+  }
+  /**
+   * Toggle show/hide dropdown
+   */
+  _toggleShowHide() {
+    this._showHideOpen = !this._showHideOpen;
+  }
+  /**
+   * Open show/hide dropdown
+   */
+  _closeShowHide() {
+    this._showHideOpen = false;
+  }
+  /**
+   * Close show/hide dropdown when the user clicks outside of it
+   */
+  _handleDocumentClick(e) {
+    var _a;
+    const id = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id;
+    if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
+      this._closeShowHide();
+      if (this._moreDropdown) {
+        this._moreDropdown.open = false;
+      }
+      if (this._showHideDropdown) {
+        this._showHideDropdown.open = false;
+      }
+    }
+  }
   /**
    * Show delete confirmation message
    *
@@ -946,6 +1069,53 @@ export class LayerTable {
   }
   static get properties() {
     return {
+      "defaultLayerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string: when provided this layer ID will be used when the app loads"
+        },
+        "attribute": "default-layer-id",
+        "reflect": false
+      },
+      "defaultGlobalId": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string: Global ID of the feature to select"
+        }
+      },
+      "defaultOid": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "number: when provided this will be used to select a feature in the table by default"
+        }
+      },
       "enableAutoRefresh": {
         "type": "boolean",
         "mutable": false,
@@ -963,6 +1133,24 @@ export class LayerTable {
         "attribute": "enable-auto-refresh",
         "reflect": false
       },
+      "enableColumnReorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the layer table will support drag/drop of columns to adjust order"
+        },
+        "attribute": "enable-column-reorder",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "enableCSV": {
         "type": "boolean",
         "mutable": false,
@@ -1116,6 +1304,7 @@ export class LayerTable {
       "_isDeleting": {},
       "_layer": {},
       "_selectedIndexes": {},
+      "_showHideOpen": {},
       "_showOnlySelected": {},
       "_sortActive": {},
       "_translations": {}

package/dist/collection/components/list-flow-item/list-flow-item.css

@@ -0,0 +1,19 @@
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/list-flow-item/list-flow-item.js

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Host, h } from "@stencil/core";
+export class ListFlowItem {
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "list-flow-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["list-flow-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list-flow-item.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/list-flow-item/test/list-flow-item.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('list-flow-item', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<list-flow-item></list-flow-item>');
+    const element = await page.find('list-flow-item');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/list-flow-item/test/list-flow-item.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { ListFlowItem } from "../list-flow-item";
+xdescribe('list-flow-item', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [ListFlowItem],
+      html: `<list-flow-item></list-flow-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <list-flow-item>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </list-flow-item>
+    `);
+  });
+});

package/dist/collection/components/location-flow-item/location-flow-item.css

@@ -0,0 +1,19 @@
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/location-flow-item/location-flow-item.js

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Host, h } from "@stencil/core";
+export class LocationFlowItem {
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "location-flow-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["location-flow-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["location-flow-item.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/location-flow-item/test/location-flow-item.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('location-flow-item', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<location-flow-item></location-flow-item>');
+    const element = await page.find('location-flow-item');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/location-flow-item/test/location-flow-item.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { LocationFlowItem } from "../location-flow-item";
+xdescribe('location-flow-item', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [LocationFlowItem],
+      html: `<location-flow-item></location-flow-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <location-flow-item>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </location-flow-item>
+    `);
+  });
+});