@esri/solutions-components 0.5.0 → 0.5.2

package/dist/esm/calcite-input-message_5.entry.js

@@ -8,11 +8,11 @@ import { s as setRequestedIcon, g as getElementProp, a as getSlotted } from './d
 import { S as StatusIcons } from './interfaces-4ae145eb.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-d09506c4.js';
 import { l as loadModules } from './loadModules-b299cd43.js';
-import { g as goToSelection, h as highlightFeatures, d as queryObjectIds, e as getQueryGeoms } from './mapViewUtils-4e945e07.js';
-import { E as EWorkflowType, f as ESelectionMode, g as ERefineMode, c as ESketchType } from './interfaces-d0d83efa.js';
+import { b as goToSelection, h as highlightFeatures, q as queryObjectIds, c as getQueryGeoms } from './mapViewUtils-8ffcd36d.js';
+import { c as EWorkflowType, f as ESelectionMode, g as ERefineMode, b as ESketchType } from './interfaces-cd4054e5.js';
 import { s as state } from './publicNotificationStore-b9daaee4.js';
 import { g as getLocaleComponentStrings } from './locale-7bf10e0a.js';
-import { d as downloadCSV, a as downloadPDF } from './downloadUtils-606b0f0e.js';
+import { d as downloadCSV, a as downloadPDF } from './downloadUtils-a8f139c5.js';
 import { a as getSelectionIds, g as getTotal } from './publicNotificationUtils-5cb5a607.js';
 import './resources-436ae282.js';
 import './guid-15fce7c0.js';
@@ -254,13 +254,16 @@ const MapSelectTools = class {
     this.enabledLayerIds = [];
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
-    this.geometries = undefined;
+    this.geometries = [];
     this.isUpdate = false;
     this.mapView = undefined;
     this.searchConfiguration = undefined;
     this.selectionSet = undefined;
     this.selectLayerView = undefined;
     this.showBufferTools = true;
+    this.sketchLineSymbol = undefined;
+    this.sketchPointSymbol = undefined;
+    this.sketchPolygonSymbol = undefined;
     this._layerSelectChecked = undefined;
     this._searchTerm = undefined;
     this._translations = undefined;
@@ -407,7 +410,7 @@ const MapSelectTools = class {
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
     const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: this._layerSelectChecked, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerView: this.selectLayerView, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit })), h("slot", null)));
+    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: this._layerSelectChecked, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerView: this.selectLayerView, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -442,7 +445,7 @@ const MapSelectTools = class {
    */
   async _init() {
     this._initGraphicsLayer();
-    this._initSelectionSet();
+    await this._initSelectionSet();
     this._initSearchWidget();
   }
   /**
@@ -450,7 +453,7 @@ const MapSelectTools = class {
    *
    * @protected
    */
-  _initSelectionSet() {
+  async _initSelectionSet() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if (this.selectionSet) {
       this._searchTerm = (_b = (_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.searchResult) === null || _b === void 0 ? void 0 : _b.name;
@@ -465,7 +468,7 @@ const MapSelectTools = class {
       ];
       // reset selection label base
       this._selectionLabel = ((_k = this.selectionSet) === null || _k === void 0 ? void 0 : _k.label) || this._getSelectionBaseLabel();
-      void goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
+      await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
     else {
       this._workflowType = EWorkflowType.SEARCH;
@@ -572,7 +575,7 @@ const MapSelectTools = class {
       this._bufferGraphicsLayer = this.mapView.map.layers.getItemAt(bufferIndex);
     }
     else {
-      this._bufferGraphicsLayer = new this.GraphicsLayer({ title });
+      this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
       if (sketchIndex > -1) {
@@ -641,17 +644,16 @@ const MapSelectTools = class {
     this.selectionLoadingChange.emit(false);
     // Add geometries used for selecting features as graphics
     this._drawTools.graphics = this.geometries.map(geom => {
-      var _a, _b, _c;
       const props = {
         "geometry": geom,
         "symbol": geom.type === "point" ?
-          (_a = this._drawTools) === null || _a === void 0 ? void 0 : _a.pointSymbol : geom.type === "polyline" ?
-          (_b = this._drawTools) === null || _b === void 0 ? void 0 : _b.polylineSymbol : geom.type === "polygon" ?
-          (_c = this._drawTools) === null || _c === void 0 ? void 0 : _c.polygonSymbol : undefined
+          this.sketchPointSymbol : geom.type === "polyline" ?
+          this.sketchLineSymbol : geom.type === "polygon" ?
+          this.sketchPolygonSymbol : undefined
       };
       return new this.Graphic(props);
     });
-    void this._highlightFeatures(this._selectedIds);
+    await this._highlightFeatures(this._selectedIds);
   }
   /**
    * Query the selectLayerView based on any user drawn geometries or buffers
@@ -680,8 +682,8 @@ const MapSelectTools = class {
       });
       this._bufferGraphicsLayer.removeAll();
       this._bufferGraphicsLayer.add(polygonGraphic);
-      void this._selectFeatures([this._bufferGeometry]);
-      void this.mapView.goTo(polygonGraphic.geometry.extent);
+      await this._selectFeatures([this._bufferGeometry]);
+      await this.mapView.goTo(polygonGraphic.geometry.extent);
     }
     else {
       if (this._bufferGraphicsLayer) {
@@ -725,7 +727,7 @@ const MapSelectTools = class {
     // for sketch
     // checking for clear as it would throw off tests
     if ((_b = this._drawTools) === null || _b === void 0 ? void 0 : _b.clear) {
-      void this._drawTools.clear();
+      await this._drawTools.clear();
     }
     this.selectionSetChange.emit(this._selectedIds.length);
   }

package/dist/esm/calcite-shell-panel_14.entry.js

@@ -15,8 +15,8 @@ import { o as getItemIndex, m as mutationObserverCallback, d as deselectRemovedI
 import { I as ICON_TYPES$1 } from './resources-2235e4ff.js';
 import { C as CSS$2, S as SLOTS$3 } from './resources-e3a5cf27.js';
 import { g as getLocaleComponentStrings } from './locale-7bf10e0a.js';
-import { s as state, E as EFileType } from './solution-store-477288ac.js';
-import { e as EUpdateType } from './interfaces-d0d83efa.js';
+import { s as state, E as EFileType } from './solution-store-1b67f2c8.js';
+import { e as EUpdateType } from './interfaces-cd4054e5.js';
 import './resources-436ae282.js';
 import './array-2ab3b18f.js';
 import './resources-78132e50.js';

package/dist/esm/{calcite-action-bar_2.entry.js → calcite-tooltip.entry.js}

@@ -3,218 +3,13 @@
  * 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 } from './index-c246d90e.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-5f4b222f.js';
-import { f as focusElement, a as getSlotted, i as isPrimaryPointerButton, q as queryElementRoots, t as toAriaBoolean } from './dom-3bdc69ee.js';
-import { c as createObserver } from './observers-31601001.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-d09506c4.js';
-import { d as debounce } from './debounce-4c884e5c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c246d90e.js';
 import { g as guid } from './guid-15fce7c0.js';
 import { b as defaultOffsetDistance, c as connectFloatingUI, u as updateAfterClose, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-63460291.js';
-import './resources-d60362c3.js';
-import './resources-3d641588.js';
+import { i as isPrimaryPointerButton, q as queryElementRoots, t as toAriaBoolean } from './dom-3bdc69ee.js';
+import './debounce-4c884e5c.js';
 import './resources-436ae282.js';
 
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
- */
-const CSS$1 = {
-  actionGroupBottom: "action-group--bottom"
-};
-const SLOTS = {
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip"
-};
-const TEXT = {
-  expand: "Expand",
-  collapse: "Collapse"
-};
-
-const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;background:transparent;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-width:0px;border-inline-end-width:1px;border-style:solid}::slotted(calcite-action-group:last-child){border-block-end-width:0px;border-inline-end-width:0px}.action-group--bottom{flex-grow:1;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px;-webkit-padding-end:0px;padding-inline-end:0px}";
-
-const ActionBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the expand-toggling behavior is disabled.
-     */
-    this.expandDisabled = false;
-    /**
-     * When `true`, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     *  The layout direction of the actions.
-     */
-    this.layout = "vertical";
-    /**
-     * Disables automatically overflowing `calcite-action`s that won't fit into menus.
-     */
-    this.overflowActionsDisabled = false;
-    this.mutationObserver = createObserver("mutation", () => {
-      const { el, expanded } = this;
-      toggleChildActionText({ parent: el, expanded });
-      this.conditionallyOverflowActions();
-    });
-    this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.actionMenuOpenChangeHandler = (event) => {
-      if (event.detail) {
-        const composedPath = event.composedPath();
-        Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
-          if (!composedPath.includes(group)) {
-            group.menuOpen = false;
-          }
-        });
-      }
-    };
-    this.resizeHandlerEntries = (entries) => {
-      entries.forEach(this.resizeHandler);
-    };
-    this.resizeHandler = (entry) => {
-      const { width, height } = entry.contentRect;
-      this.resize({ width, height });
-    };
-    this.resize = debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout } = this;
-      if ((layout === "vertical" && !height) || (layout === "horizontal" && !width)) {
-        return;
-      }
-      const actions = queryActions(el);
-      const actionCount = expandDisabled ? actions.length : actions.length + 1;
-      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
-      const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
-        ? actionGroups.length + 1
-        : actionGroups.length;
-      const { actionHeight, actionWidth } = geActionDimensions(actions);
-      const overflowCount = getOverflowCount({
-        layout,
-        actionCount,
-        actionHeight,
-        actionWidth,
-        height,
-        width,
-        groupCount
-      });
-      overflowActions({
-        actionGroups,
-        expanded,
-        overflowCount
-      });
-    }, overflowActionsDebounceInMs);
-    this.conditionallyOverflowActions = () => {
-      if (!this.overflowActionsDisabled) {
-        this.overflowActions();
-      }
-    };
-    this.toggleExpand = () => {
-      this.expanded = !this.expanded;
-      this.calciteActionBarToggle.emit();
-    };
-    this.setExpandToggleRef = (el) => {
-      this.expandToggleEl = el;
-    };
-  }
-  expandHandler() {
-    this.conditionallyOverflowActions();
-  }
-  expandedHandler(expanded) {
-    toggleChildActionText({ parent: this.el, expanded });
-    this.conditionallyOverflowActions();
-  }
-  overflowDisabledHandler(overflowActionsDisabled) {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  componentDidLoad() {
-    this.conditionallyOverflowActions();
-  }
-  connectedCallback() {
-    var _a, _b;
-    const { el, expanded } = this;
-    toggleChildActionText({ parent: el, expanded });
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
-    if (!this.overflowActionsDisabled) {
-      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
-    }
-    this.conditionallyOverflowActions();
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    disconnectConditionalSlotComponent(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Overflows actions that won't fit into menus.
-   *
-   * @internal
-   */
-  async overflowActions() {
-    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
-  }
-  /**
-   * Sets focus on the component.
-   *
-   * @param focusId
-   */
-  async setFocus(focusId) {
-    var _a;
-    if (focusId === "expand-toggle") {
-      await focusElement(this.expandToggleEl);
-      return;
-    }
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
-    const tooltip = getSlotted(el, SLOTS.expandTooltip);
-    const expandLabel = intlExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS$1.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
-  }
-  render() {
-    return (h(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, h("slot", null), this.renderBottomActionGroup()));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expandDisabled": ["expandHandler"],
-    "expanded": ["expandedHandler"],
-    "overflowActionsDisabled": ["overflowDisabledHandler"]
-  }; }
-};
-ActionBar.style = actionBarCss;
-
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
@@ -576,4 +371,4 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-export { ActionBar as calcite_action_bar, Tooltip as calcite_tooltip };
+export { Tooltip as calcite_tooltip };

package/dist/esm/crowdsource-manager.entry.js

@@ -4,25 +4,23 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c246d90e.js';
+import { g as getLocaleComponentStrings } from './locale-7bf10e0a.js';
+import { E as ELayoutMode } from './interfaces-cd4054e5.js';
+import './_commonjsHelpers-d5f9d613.js';
 
-const crowdsourceManagerCss = ":host{display:block}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.pad-top-51{padding-top:51px}.header-title{display:flex;float:left}.header-controls-label{display:flex;float:right}.header-controls{height:50px}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.vertical-background{background-image:url('../../assets/data/images/horizontal.png')}.horizontal-background{background-image:url('../../assets/data/images/vertical.png')}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.background-transparent{background-color:transparent}.display-flex{display:flex}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:48px;height:48px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.position-relative{position:relative}";
 
 const CrowdsourceManager = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.mapInfos = [];
+    this._translations = undefined;
+    this._layoutMode = ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
   }
   //--------------------------------------------------------------------------
   //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  State (internal)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
   //  Properties (protected)
   //
   //--------------------------------------------------------------------------
@@ -41,19 +39,95 @@ const CrowdsourceManager = class {
   //  Events (public)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Handle changes to the buffer distance value
+   */
+  mapChanged(event) {
+    this._mapView = event.detail;
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
   //
   //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, null, h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, h("div", { class: "display-flex", slot: "header-actions-end" }, h("div", { class: "header-text" }, "Layout"), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("horizontal-background", ELayoutMode.VERTICAL, this._translations.horizontal), this._getAction("vertical-background", ELayoutMode.HORIZONTAL, this._translations.vertical)), this._getBody(this._layoutMode, this._panelOpen))));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  _getAction(imgClass, layoutMode, tip) {
+    return (h("div", null, h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, h("div", { class: imgClass + " img-background" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, h("span", null, tip))));
+  }
+  _getDividerIcon(layoutMode, panelOpen) {
+    let icon = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        icon = panelOpen ? "chevrons-up" : "chevrons-down";
+        break;
+      default:
+        icon = panelOpen ? "chevrons-left" : "chevrons-right";
+        break;
+    }
+    return icon;
+  }
+  _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 = `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;
+  }
+  _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 = `${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;
+  }
+  _getBody(layoutMode, panelOpen) {
+    const displayFlex = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+    return (h("calcite-shell", { class: "width-full height-full pad-top-51" }, h("div", { class: `width-full height-full ${displayFlex}` }, this._getMap(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen))));
+  }
+  _getMap(layoutMode, panelOpen) {
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    return (h("div", { class: `${mapSizeClass} overflow-hidden` }, h("div", { style: { "overflow": "hidden" } }, h("map-card", { mapInfos: this.mapInfos }))));
+  }
+  _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 toggleSizeClass = layoutMode === ELayoutMode.HORIZONTAL ? "divider-h" : "divider-w";
+    return (h("div", { class: tableSizeClass }, h("div", { class: `border ${toggleSizeClass}` }, h("div", { class: "toggle-node" }, 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" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView }))));
+  }
+  _setLayoutMode(layoutMode) {
+    this._layoutMode = layoutMode;
+  }
+  _toggleLayout() {
+    this._panelOpen = !this._panelOpen;
+  }
   /**
    * Fetches the component's translations
    *
@@ -61,8 +135,8 @@ const CrowdsourceManager = class {
    * @protected
    */
   async _getTranslations() {
-    // const messages = await getLocaleComponentStrings(this.el);
-    // this._translations = messages[0] as typeof BufferTools_T9n;
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
   }
   get el() { return getElement(this); }
 };