@esri/solutions-components 0.6.6 → 0.6.7

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -1,407 +1,406 @@
-/*!
- * 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";
-import { getLocaleComponentStrings } from "../../utils/locale";
-import { ELayoutMode } from "../../utils/interfaces";
-export class CrowdsourceManager {
-  constructor() {
-    this.classicGrid = false;
-    this.hideHeader = true;
-    this.hideMap = false;
-    this.mapInfos = [];
-    this.zoomAndScrollToSelected = false;
-    this._translations = undefined;
-    this._layoutMode = ELayoutMode.GRID;
-    this._mapView = undefined;
-    this._panelOpen = true;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (protected)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Listen for layoutChanged event to be fired so we can adjust the layout
-   */
-  async layoutChanged(evt) {
-    this._layoutMode = evt.detail;
-  }
-  /**
-   * Listen for mapChanged event to be fired then store the new mapView so components will be updated
-   */
-  async mapChanged(evt) {
-    this._mapView = evt.detail;
-    this._mapView.popupEnabled = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the icon name to use for the divider icon based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the icon name
-   * @protected
-   */
-  _getDividerIcon(layoutMode, panelOpen) {
-    let icon = "";
-    switch (layoutMode) {
-      case ELayoutMode.HORIZONTAL:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-down" : "chevrons-up") :
-          (panelOpen ? "chevrons-up" : "chevrons-down");
-        break;
-      case ELayoutMode.VERTICAL:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-right" : "chevrons-left") :
-          (panelOpen ? "chevrons-left" : "chevrons-right");
-        break;
-      case ELayoutMode.GRID:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-up" : "chevrons-down") :
-          (panelOpen ? "chevrons-left" : "chevrons-right");
-        break;
-    }
-    return icon;
-  }
-  /**
-   * Get the css selector names to use for the map based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the css selectors
-   * @protected
-   */
-  _getMapSizeClass(layoutMode, panelOpen) {
-    let sizeClass = "";
-    switch (layoutMode) {
-      case ELayoutMode.HORIZONTAL:
-        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
-        break;
-      case ELayoutMode.GRID:
-        sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
-          `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
-        break;
-      case ELayoutMode.VERTICAL:
-        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
-        break;
-    }
-    return sizeClass;
-  }
-  /**
-   * Get the css selector names to use for the table based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the css selectors
-   * @protected
-   */
-  _getTableSizeClass(layoutMode, panelOpen) {
-    let sizeClass = "";
-    switch (layoutMode) {
-      case ELayoutMode.HORIZONTAL:
-        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
-        break;
-      case ELayoutMode.GRID:
-        sizeClass = this.classicGrid ?
-          `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-          `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
-        break;
-      case ELayoutMode.VERTICAL:
-        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
-        break;
-    }
-    return sizeClass;
-  }
-  /**
-   * Get the table and map nodes based for the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the parent node that contains the table and map
-   * @protected
-   */
-  _getBody(layoutMode, panelOpen, hideMap) {
-    const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
-      layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-    return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
-  }
-  /**
-   * Get the map and card nodes based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getMapAndCard(layoutMode, panelOpen, hideMap) {
-    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
-  }
-  /**
-   * Get the map node based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getMapNode(layoutMode, hideMap) {
-    const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-      layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
-    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
-  }
-  /**
-   * Get the card node based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getCardNode(layoutMode, hideMap) {
-    const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
-      layoutMode === ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
-    const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
-      "width-full adjusted-height-100" : "width-50 height-full";
-    return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
-  }
-  /**
-   * Get the table node based for the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the table node
-   * @protected
-   */
-  _getTable(layoutMode, panelOpen) {
-    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
-    const icon = this._getDividerIcon(layoutMode, panelOpen);
-    const tooltip = panelOpen ? this._translations.close : this._translations.open;
-    const id = "toggle-layout";
-    const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-    const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
-      this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
-        layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
-  }
-  /**
-   * Open/Close the appropriate panel.
-   * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
-   *
-   * @returns void
-   * @protected
-   */
-  _toggleLayout() {
-    this._panelOpen = !this._panelOpen;
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  static get is() { return "crowdsource-manager"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["crowdsource-manager.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["crowdsource-manager.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "classicGrid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: when true the grid will display like the previous manager app with the table across the top"
-        },
-        "attribute": "classic-grid",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hideHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: when true no header is displayed for the app"
-        },
-        "attribute": "hide-header",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "hideMap": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: when true no map is displayed for the app"
-        },
-        "attribute": "hide-map",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "mapInfos": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IMapInfo[]",
-          "resolved": "IMapInfo[]",
-          "references": {
-            "IMapInfo": {
-              "location": "import",
-              "path": "../../utils/interfaces",
-              "id": "src/utils/interfaces.ts::IMapInfo"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "IMapInfo[]: array of map infos (name and id)"
-        },
-        "defaultValue": "[]"
-      },
-      "zoomAndScrollToSelected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
-        },
-        "attribute": "zoom-and-scroll-to-selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_translations": {},
-      "_layoutMode": {},
-      "_mapView": {},
-      "_panelOpen": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "layoutChanged",
-        "method": "layoutChanged",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mapChanged",
-        "method": "mapChanged",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+/*!
+ * 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";
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { ELayoutMode } from "../../utils/interfaces";
+export class CrowdsourceManager {
+  constructor() {
+    this.classicGrid = false;
+    this.hideHeader = true;
+    this.hideMap = false;
+    this.mapInfos = [];
+    this.zoomAndScrollToSelected = false;
+    this._translations = undefined;
+    this._layoutMode = ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Listen for layoutChanged event to be fired so we can adjust the layout
+   */
+  async layoutChanged(evt) {
+    this._layoutMode = evt.detail;
+  }
+  /**
+   * Listen for mapChanged event to be fired then store the new mapView so components will be updated
+   */
+  async mapChanged(evt) {
+    this._mapView = evt.detail;
+    this._mapView.popupEnabled = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the icon name to use for the divider icon based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the icon name
+   * @protected
+   */
+  _getDividerIcon(layoutMode, panelOpen) {
+    let icon = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-down" : "chevrons-up") :
+          (panelOpen ? "chevrons-up" : "chevrons-down");
+        break;
+      case ELayoutMode.VERTICAL:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-right" : "chevrons-left") :
+          (panelOpen ? "chevrons-left" : "chevrons-right");
+        break;
+      case ELayoutMode.GRID:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-up" : "chevrons-down") :
+          (panelOpen ? "chevrons-left" : "chevrons-right");
+        break;
+    }
+    return icon;
+  }
+  /**
+   * Get the css selector names to use for the map based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the css selectors
+   * @protected
+   */
+  _getMapSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+        break;
+      case ELayoutMode.GRID:
+        sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
+          `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+        break;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
+        break;
+    }
+    return sizeClass;
+  }
+  /**
+   * Get the css selector names to use for the table based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the css selectors
+   * @protected
+   */
+  _getTableSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
+        break;
+      case ELayoutMode.GRID:
+        sizeClass = this.classicGrid ?
+          `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
+          `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+        break;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
+        break;
+    }
+    return sizeClass;
+  }
+  /**
+   * Get the table and map nodes based for the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the parent node that contains the table and map
+   * @protected
+   */
+  _getBody(layoutMode, panelOpen, hideMap) {
+    const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
+      layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+    return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
+  }
+  /**
+   * Get the map and card nodes based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+  }
+  /**
+   * Get the map node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getMapNode(layoutMode, hideMap) {
+    const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
+      layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
+    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+  }
+  /**
+   * Get the card node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getCardNode(layoutMode, hideMap) {
+    const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
+      layoutMode === ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+    const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
+      "width-full adjusted-height-100" : "width-50 height-full";
+    return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+  }
+  /**
+   * Get the table node based for the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the table node
+   * @protected
+   */
+  _getTable(layoutMode, panelOpen) {
+    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
+    const icon = this._getDividerIcon(layoutMode, panelOpen);
+    const tooltip = panelOpen ? this._translations.close : this._translations.open;
+    const id = "toggle-layout";
+    const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
+    const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
+      this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
+        layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+  }
+  /**
+   * Open/Close the appropriate panel.
+   * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
+   *
+   * @returns void
+   * @protected
+   */
+  _toggleLayout() {
+    this._panelOpen = !this._panelOpen;
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  static get is() { return "crowdsource-manager"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["crowdsource-manager.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["crowdsource-manager.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "classicGrid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the grid will display like the previous manager app with the table across the top"
+        },
+        "attribute": "classic-grid",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true no header is displayed for the app"
+        },
+        "attribute": "hide-header",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "hideMap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true no map is displayed for the app"
+        },
+        "attribute": "hide-map",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mapInfos": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMapInfo[]",
+          "resolved": "IMapInfo[]",
+          "references": {
+            "IMapInfo": {
+              "location": "import",
+              "path": "../../utils/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IMapInfo[]: array of map infos (name and id)"
+        },
+        "defaultValue": "[]"
+      },
+      "zoomAndScrollToSelected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
+        },
+        "attribute": "zoom-and-scroll-to-selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {},
+      "_layoutMode": {},
+      "_mapView": {},
+      "_panelOpen": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "layoutChanged",
+        "method": "layoutChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "mapChanged",
+        "method": "mapChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}