@esri/solutions-components 0.5.1 → 0.5.2

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

@@ -8,217 +8,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c6979cbb.js');
-const ExpandToggle = require('./ExpandToggle-c990e1d5.js');
-const dom = require('./dom-4a580af6.js');
-const observers = require('./observers-5311faf8.js');
-const conditionalSlot = require('./conditionalSlot-baada7a3.js');
-const debounce = require('./debounce-69c3bada.js');
 const guid = require('./guid-84ac4d91.js');
 const floatingUi = require('./floating-ui-7e3d7775.js');
-require('./resources-2260d186.js');
-require('./resources-2a9862c7.js');
+const dom = require('./dom-4a580af6.js');
+require('./debounce-69c3bada.js');
 require('./resources-b56bce71.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) {
-    index.registerInstance(this, hostRef);
-    this.calciteActionBarToggle = index.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 = observers.createObserver("mutation", () => {
-      const { el, expanded } = this;
-      ExpandToggle.toggleChildActionText({ parent: el, expanded });
-      this.conditionallyOverflowActions();
-    });
-    this.resizeObserver = observers.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.debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout } = this;
-      if ((layout === "vertical" && !height) || (layout === "horizontal" && !width)) {
-        return;
-      }
-      const actions = ExpandToggle.queryActions(el);
-      const actionCount = expandDisabled ? actions.length : actions.length + 1;
-      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
-      const groupCount = dom.getSlotted(el, SLOTS.bottomActions) || !expandDisabled
-        ? actionGroups.length + 1
-        : actionGroups.length;
-      const { actionHeight, actionWidth } = ExpandToggle.geActionDimensions(actions);
-      const overflowCount = ExpandToggle.getOverflowCount({
-        layout,
-        actionCount,
-        actionHeight,
-        actionWidth,
-        height,
-        width,
-        groupCount
-      });
-      ExpandToggle.overflowActions({
-        actionGroups,
-        expanded,
-        overflowCount
-      });
-    }, ExpandToggle.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) {
-    ExpandToggle.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;
-    ExpandToggle.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();
-    conditionalSlot.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();
-    conditionalSlot.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 dom.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 = dom.getSlotted(el, SLOTS.expandTooltip);
-    const expandLabel = intlExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return dom.getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (index.h("calcite-action-group", { class: CSS$1.actionGroupBottom, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.bottomActions }), index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
-  }
-  render() {
-    return (index.h(index.Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, index.h("slot", null), this.renderBottomActionGroup()));
-  }
-  get el() { return index.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.
@@ -580,5 +375,4 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-exports.calcite_action_bar = ActionBar;
 exports.calcite_tooltip = Tooltip;

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

@@ -8,25 +8,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c6979cbb.js');
+const locale = require('./locale-04da9a8c.js');
+const interfaces = require('./interfaces-cac36920.js');
+require('./_commonjsHelpers-384729db.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) {
     index.registerInstance(this, hostRef);
+    this.mapInfos = [];
+    this._translations = undefined;
+    this._layoutMode = interfaces.ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
   }
   //--------------------------------------------------------------------------
   //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  State (internal)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
   //  Properties (protected)
   //
   //--------------------------------------------------------------------------
@@ -45,19 +43,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 (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h(index.Host, null, index.h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, index.h("div", { class: "display-flex", slot: "header-actions-end" }, index.h("div", { class: "header-text" }, "Layout"), this._getAction("grid-background", interfaces.ELayoutMode.GRID, this._translations.grid), this._getAction("horizontal-background", interfaces.ELayoutMode.VERTICAL, this._translations.horizontal), this._getAction("vertical-background", interfaces.ELayoutMode.HORIZONTAL, this._translations.vertical)), this._getBody(this._layoutMode, this._panelOpen))));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  _getAction(imgClass, layoutMode, tip) {
+    return (index.h("div", null, index.h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, index.h("div", { class: imgClass + " img-background" })), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, index.h("span", null, tip))));
+  }
+  _getDividerIcon(layoutMode, panelOpen) {
+    let icon = "";
+    switch (layoutMode) {
+      case interfaces.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 interfaces.ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+        break;
+      case interfaces.ELayoutMode.GRID:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+        break;
+      case interfaces.ELayoutMode.VERTICAL:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
+        break;
+    }
+    return sizeClass;
+  }
+  _getTableSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case interfaces.ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
+        break;
+      case interfaces.ELayoutMode.GRID:
+        sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+        break;
+      case interfaces.ELayoutMode.VERTICAL:
+        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
+        break;
+    }
+    return sizeClass;
+  }
+  _getBody(layoutMode, panelOpen) {
+    const displayFlex = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
+    return (index.h("calcite-shell", { class: "width-full height-full pad-top-51" }, index.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 (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, index.h("div", { style: { "overflow": "hidden" } }, index.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 === interfaces.ELayoutMode.HORIZONTAL ? "divider-h" : "divider-w";
+    return (index.h("div", { class: tableSizeClass }, index.h("div", { class: `border ${toggleSizeClass}` }, index.h("div", { class: "toggle-node" }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onclick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))), index.h("div", { class: "width-full height-full" }, index.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
    *
@@ -65,8 +139,8 @@ const CrowdsourceManager = class {
    * @protected
    */
   async _getTranslations() {
-    // const messages = await getLocaleComponentStrings(this.el);
-    // this._translations = messages[0] as typeof BufferTools_T9n;
+    const messages = await locale.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
   }
   get el() { return index.getElement(this); }
 };