@esri/solutions-components 0.5.1 → 0.5.2

package/dist/collection/assets/arcgis-pdf-creator/PDFCreator.js

@@ -1,6 +1,6 @@
 /* @preserve
 * arcgis-pdf-creator v0.0.1
-* Fri Feb 03 2023 09:47:02 GMT-0800 (Pacific Standard Time)
+* Tue Mar 21 2023 10:44:29 GMT-0700 (Pacific Daylight Time)
 */
 /** @license
  * Copyright 2022 Esri
@@ -275,13 +275,16 @@ class PDFCreator {
      *
      * @param text String to estimate
      * @param fontSize Text size in points
-     * @returns Estimated width of text in doc units
+     * @returns Estimated width of text using (points x 1/72 inches/point) * 0.6;
+     * need to override this generalized function with a specific PDF generator;
+     * the 0.6 width:height ratio comes from https://www.fhwa.dot.gov/publications/research/safety/98057/ch03.cfm#width
      *
      * @class PDFCreator
      */
     getTextWidth(text, fontSize) {
+        const ratioWidthToHeight = 0.6;
         // Return a value for testing
-        return text.length * fontSize;
+        return text.length * fontSize * this.fontProps.fontResolutionInchesPerPoint * ratioWidthToHeight;
     }
     /**
      * @class PDFCreator

package/dist/collection/assets/arcgis-pdf-creator/PDFCreator_jsPDF.js

@@ -1,6 +1,6 @@
 /* @preserve
 * arcgis-pdf-creator v0.0.1
-* Fri Feb 03 2023 09:47:02 GMT-0800 (Pacific Standard Time)
+* Tue Mar 21 2023 10:44:29 GMT-0700 (Pacific Daylight Time)
 */
 import * as jspdf from 'jspdf';
 import { PDFCreator, EPageType } from './PDFCreator.js';

package/dist/collection/assets/arcgis-pdf-creator/PDFCreator_pdf_lib.js

@@ -1,6 +1,6 @@
 /* @preserve
 * arcgis-pdf-creator v0.0.1
-* Fri Feb 03 2023 09:47:02 GMT-0800 (Pacific Standard Time)
+* Tue Mar 21 2023 10:44:29 GMT-0700 (Pacific Daylight Time)
 */
 import * as fontkit from '@pdf-lib/fontkit';
 import { PDFCreator, EPageType } from './PDFCreator.js';

package/dist/collection/assets/arcgis-pdf-creator/PDFLabels.js

@@ -1,6 +1,6 @@
 /* @preserve
 * arcgis-pdf-creator v0.0.1
-* Fri Feb 03 2023 09:47:02 GMT-0800 (Pacific Standard Time)
+* Tue Mar 21 2023 10:44:29 GMT-0700 (Pacific Daylight Time)
 */
 import { drawGridOfBoxes } from './grid.js';
 
@@ -28,12 +28,13 @@ class PDFLabels {
      * @param labels Array of labels; each label consists of one or more line strings
      * @param labelSpec Properties describing page dimensions of labels sheet
      * @param startingPageNum The 1-based page number to start printing labels into; page is assumed to be blank & to exist
+     * @param heading Line to add at top of label page outside of labels
      * @param progressCallback Callback with percent done in range 0..100
      * @returns Promise which, when resolved, returns the 1-based page number of the last page containing labels
      *
      * @class PDFLabels
      */
-    addLabelsToDoc(labels, labelSpec, startingPageNum, progressCallback) {
+    addLabelsToDoc(labels, labelSpec, startingPageNum, heading, progressCallback) {
         return new Promise((resolve) => {
             const labelsPerPageDisplay = labelSpec.numLabelsAcross * labelSpec.numLabelsDown;
             let column;
@@ -44,6 +45,9 @@ class PDFLabels {
             // Draw
             let currentPageNum = startingPageNum;
             const topOfFirstLabel = labelSpec.pageProperties.topMargin - this.PDFCreator.pageOptions.topMargin;
+            if (heading) {
+                this._drawSupplementalText(heading, 0, -0.1);
+            }
             for (let iLabel = 0, iNonBlankLabel = 0; iLabel < labels.length; iLabel++) {
                 if (progressCallback) {
                     progressCallback(Math.round(iLabel / labels.length * 100));
@@ -59,6 +63,9 @@ class PDFLabels {
                         // Advance to next page
                         this.PDFCreator.addPage();
                         ++currentPageNum;
+                        if (heading) {
+                            this._drawSupplementalText(heading, 0, -0.1);
+                        }
                     }
                     // Prep the new page
                     column = 0;
@@ -71,11 +78,14 @@ class PDFLabels {
                     row = 0;
                 }
                 // Draw the label
+                const minimumFontSize = 4;
                 // Temporarily reduce the font size if we have more lines than the label can hold
                 let fontPoints = labelSpec.fontSizePx;
                 if (labelSpec.maxNumLabelLines < labelLines.length) {
-                    fontPoints = Math.floor(labelSpec.maxNumLabelLines / labelLines.length * labelSpec.fontSizePx);
+                    fontPoints = Math.max(Math.floor(labelSpec.maxNumLabelLines / labelLines.length * labelSpec.fontSizePx), minimumFontSize);
                 }
+                // Temporarily reduce the font size farther if label lines are too long
+                fontPoints = this._getFontSizeForOverlongLines(labelLines, maxLabelTextWidth, fontPoints, minimumFontSize);
                 // Clip overlong lines; append ellipses to clipped lines
                 labelLines = this._clipOverlongLines(labelLines, maxLabelTextWidth, fontPoints);
                 const labelLineHeight = this.PDFCreator.fontAscenderDescenderHeight(fontPoints);
@@ -237,6 +247,47 @@ class PDFLabels {
         });
         return trimmedLines;
     }
+    /**
+     * Draws supplemental text such as a heading or footer.
+     *
+     * @param text Text to draw
+     * @param left Offset from left edge of document to left edge of text
+     * @param top Offset from top of document to top of text
+     */
+    _drawSupplementalText(text, left, top) {
+        const fontPoints = 6;
+        this.PDFCreator.drawText(text, {
+            left,
+            top,
+            fontPoints,
+            fontColor: "000000"
+        });
+    }
+    /**
+     * Trims a set of text lines to fit within specified bounds.
+     *
+     * @param lines Text lines to be checked
+     * @param maxTextWidth The maximum width permitted for the drawing of the text in doc units
+     * @param preferredFontSize Initial text size in points
+     * @param minimumFontSize The smallest acceptable font size in points
+     * @returns The maximum of `minimumFontSize` and the font size in points that should help all lines
+     * of the label to fit on the label
+     *
+     * @class PDFLabels
+     * @private
+     */
+    _getFontSizeForOverlongLines(lines, maxTextWidth, preferredFontSize, minimumFontSize) {
+        let fontSize = preferredFontSize;
+        lines.forEach(line => {
+            line = line.trim();
+            if (this.PDFCreator.getTextWidth(line, fontSize) > maxTextWidth) {
+                do {
+                    --fontSize;
+                } while (this.PDFCreator.getTextWidth(line, fontSize) > maxTextWidth && fontSize > minimumFontSize);
+            }
+        });
+        return fontSize;
+    }
     /**
      * Loads the label formats.
      *

package/dist/collection/assets/arcgis-pdf-creator/grid.js

@@ -1,6 +1,6 @@
 /* @preserve
 * arcgis-pdf-creator v0.0.1
-* Fri Feb 03 2023 09:47:02 GMT-0800 (Pacific Standard Time)
+* Tue Mar 21 2023 10:44:29 GMT-0700 (Pacific Daylight Time)
 */
 /** @license
  * Copyright 2022 Esri

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

@@ -16,4 +16,126 @@
 
 :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;
 }

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

@@ -19,17 +19,16 @@
  * limitations under the License.
  */
 import { Host, h } from '@stencil/core';
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { ELayoutMode } from '../../utils/interfaces';
 export class CrowdsourceManager {
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  State (internal)
-  //
-  //--------------------------------------------------------------------------
+  constructor() {
+    this.mapInfos = [];
+    this._translations = undefined;
+    this._layoutMode = ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Properties (protected)
@@ -50,19 +49,95 @@ export class CrowdsourceManager {
   //  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
    *
@@ -70,11 +145,10 @@ export class CrowdsourceManager {
    * @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];
   }
   static get is() { return "crowdsource-manager"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["crowdsource-manager.css"]
@@ -85,5 +159,47 @@ export class CrowdsourceManager {
       "$": ["crowdsource-manager.css"]
     };
   }
+  static get properties() {
+    return {
+      "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": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {},
+      "_layoutMode": {},
+      "_mapView": {},
+      "_panelOpen": {}
+    };
+  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "mapChanged",
+        "method": "mapChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -18,44 +18,8 @@
   display: block;
 }
 
-.table {
-  display: table;
-  width: 100%;
-}
-
-.header {
-  display: table-header-group;
-  background-color: #757575;
-  font-weight: 500;
-  font-size: var(--calcite-font-size-0);
-  color: var(--calcite-ui-text-inverse);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.table-header-cell {
-  display: table-cell;
-  text-align: justify;
-  border-right: 1px solid var(--calcite-ui-border-2);
-  padding: 0.5rem;
-}
-
-.table-body {
-  display: table-row-group;
-}
-
-.row {
-  display: table-row;
-}
-
-.table-cell {
-  display: table-cell;
-  padding: 0.5rem;
-}
-
-.display-table-header {
-  display: table-header-group;
+.table-div {
+  height: calc(100% - 35px);
 }
 
 .display-flex {
@@ -65,35 +29,3 @@
 .table-border {
   border: 1px solid var(--calcite-ui-border-2);
 }
-
-.justify-center {
-  justify-content: center;
-}
-
-.table-container {
-  width: 100%;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.data-container {
-  overflow: auto;
-  height: calc(100% - 35px);
-}
-
-.row:nth-child(odd) {
-  background: var(--calcite-ui-foreground-3);
-}
-
-.padding-3-4 {
-  padding: 0.75rem;
-}
-
-.field-width {
-  white-space: nowrap;
-  min-width: 300px;
-  max-width: 300px;
-  overflow: hidden;
-}