@esri/solutions-components 0.6.2 → 0.6.3

package/dist/collection/components/map-tools/map-tools.js

@@ -0,0 +1,196 @@
+/*!
+ * 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 { EExpandType } from "../../utils/interfaces";
+export class MapTools {
+  constructor() {
+    this.layout = "vertical";
+    this.mapView = undefined;
+    this._translations = undefined;
+    this._showTools = true;
+    this._showBasemapPicker = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * StencilJS: Renders the component.
+   */
+  render() {
+    const toggleIcon = this._showTools ? "chevrons-up" : "chevrons-down";
+    const toolsClass = this._showTools ? "" : "display-none";
+    return (h(Host, null, h("div", { class: "display-flex" }, h("calcite-action", { alignment: "center", class: "border", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, text: "" }), h("calcite-action-bar", { class: `border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("home", false, this._translations.home, () => this._goHome()), this._getActionGroup("plus", false, this._translations.zoomIn, () => this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => this._zoomOut()), this._getActionGroup("list", false, this._translations.list, () => this._showList()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker())))));
+  }
+  /**
+   * Get a calcite action group for the current action
+   *
+   * @param icon the icon to display for the current action
+   * @param disabled should the action be disabled
+   * @param tip information tip to display helpful details to end user
+   * @param func the associated onClick function to execute
+   *
+   * @returns the dom node for the action group
+   *
+   * @protected
+   */
+  _getActionGroup(icon, disabled, tip, func) {
+    return (h("calcite-action-group", null, h("calcite-action", { alignment: "center", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+  }
+  // Need to discuss this with the team
+  _goHome() {
+    alert("go home");
+  }
+  // need to discuss this with the team
+  _showList() {
+    alert("show list");
+  }
+  // Need to discuss this with the team
+  _search() {
+    alert("search");
+  }
+  // Need to explore map fixed zoom in considerations
+  _zoomIn() {
+    alert("zoom in");
+  }
+  // Need to explore map fixed zoom out considerations
+  _zoomOut() {
+    alert("zoom out");
+  }
+  _toggleBasemapPicker() {
+    this._showBasemapPicker = !this._showBasemapPicker;
+  }
+  /**
+   * Emit the expand map event
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _expand() {
+    this.expandMap.emit(EExpandType.EXPAND);
+  }
+  _toggleTools() {
+    this._showTools = !this._showTools;
+  }
+  /**
+   * 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 "map-tools"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-tools.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-tools.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"horizontal\" | \"vertical\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "\"vertical\""
+      },
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {},
+      "_showTools": {},
+      "_showBasemapPicker": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "expandMap",
+        "name": "expandMap",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the expand button is clicked"
+        },
+        "complexType": {
+          "original": "EExpandType",
+          "resolved": "EExpandType.COLLAPSE | EExpandType.EXPAND",
+          "references": {
+            "EExpandType": {
+              "location": "import",
+              "path": "../../utils/interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/pdf-download/pdf-download.js

@@ -26,6 +26,7 @@ import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class PdfDownload {
   constructor() {
+    this.defaultNumLabelsPerPage = undefined;
     this.disabled = false;
     this._translations = undefined;
   }
@@ -149,7 +150,7 @@ export class PdfDownload {
       option.value = l;
       option.innerHTML = this._getLabelSizeText(l);
       this._labelInfoElement.appendChild(option);
-      if (i === 0) {
+      if (this.defaultNumLabelsPerPage ? parseInt(l.descriptionPDF.labelsPerPageDisplay, 10) === this.defaultNumLabelsPerPage : i === 0) {
         // Setting selected wasn't enough to trigger it being the 'selectedOption'
         option.selected = true;
         this._labelInfoElement.selectedOption = option;
@@ -170,6 +171,23 @@ export class PdfDownload {
   }
   static get properties() {
     return {
+      "defaultNumLabelsPerPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "number: The default number of labels per page to export"
+        },
+        "attribute": "default-num-labels-per-page",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/public-notification/public-notification.js

@@ -32,6 +32,10 @@ export class PublicNotification {
      * string: The url to the onboarding image
      */
     this._onboardingImageUrl = "";
+    /**
+     * Text to be used as title on PDF pages
+     */
+    this._titleValue = undefined;
     /**
      * number: The number of selected features
      */
@@ -42,6 +46,8 @@ export class PublicNotification {
     this.customLabelEnabled = undefined;
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
+    this.defaultExportTitle = "";
+    this.defaultNumLabelsPerPage = undefined;
     this.featureEffect = undefined;
     this.featureHighlightEnabled = undefined;
     this.mapView = undefined;
@@ -510,7 +516,8 @@ export class PublicNotification {
   _getExportOptions() {
     const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
     const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
-    return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.addTitle)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", placeholder: this._translations.titlePlaceholder, ref: (el) => { this._title = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
+    const title = this._titleValue !== undefined ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
+    return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: "padding-sides-1" }, h("pdf-download", { defaultNumLabelsPerPage: this.defaultNumLabelsPerPage, disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.addTitle)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
   }
   /**
    * Render the refine page
@@ -538,6 +545,12 @@ export class PublicNotification {
   _getPageNavButtons(topLabel, topDisabled, topFunc, bottomLabel, bottomDisabled, bottomFunc) {
     return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, h("span", { class: "font-weight-500" }, topLabel))), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, h("span", { class: "font-weight-500" }, bottomLabel)))));
   }
+  /**
+   * Store the user defined title value
+   */
+  _changeTitle() {
+    this._titleValue = this._titleElement.value;
+  }
   /**
    * Create an informational notice
    *
@@ -620,7 +633,7 @@ export class PublicNotification {
       }
       this._fetchingData = true;
       // Create the labels for each selection set
-      await this._downloadTools.downloadPDF(exportInfos, this._removeDuplicates.checked, this._addTitle ? this._title.value : "", initialImageDataUrl);
+      await this._downloadTools.downloadPDF(exportInfos, this._removeDuplicates.checked, this._addTitle ? this._titleElement.value : "", initialImageDataUrl);
       this._fetchingData = false;
     }
     if (this._exportType === EExportType.CSV) {
@@ -958,6 +971,41 @@ export class PublicNotification {
         "attribute": "default-buffer-unit",
         "reflect": false
       },
+      "defaultExportTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string: The default value to use for the export title"
+        },
+        "attribute": "default-export-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "defaultNumLabelsPerPage": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "number: The default number of labels per page to export"
+        },
+        "attribute": "default-num-labels-per-page",
+        "reflect": false
+      },
       "featureEffect": {
         "type": "unknown",
         "mutable": false,
@@ -1010,7 +1058,7 @@ export class PublicNotification {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+          "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
       "noResultText": {

package/dist/collection/components/refine-selection/refine-selection.js

@@ -77,7 +77,7 @@ export class RefineSelection {
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id] })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -469,7 +469,7 @@ export class RefineSelection {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+          "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
       "selectionSets": {

package/dist/collection/demos/buffer-tools.html

@@ -46,12 +46,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
     <script>
       require(["esri/Map", "esri/views/MapView"], (

package/dist/collection/demos/card-manager.html

@@ -28,7 +28,8 @@
         align-self: center;
       }
       .column {
-        width: 350px;
+        width: 360px;
+        height: 340px;
         padding: 1rem;
         border: 1px solid var(--calcite-ui-border-2);
       }
@@ -46,8 +47,45 @@
         const url = href.substring(0, href.lastIndexOf('/'));
         const img = `${url}/data/generic.png`;
 
-        const demo = document.getElementById("demo-media");
-        demo.values = [{
+        const demo = document.getElementById("demo");
+
+        demo.mediaCardValues = [{
+          name: "Filename.png",
+          description: "This is an example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename2.png",
+          description: "Another example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename3.png",
+          description: "And another example of a media description.",
+          url: img
+        }, {
+          name: "Filename.png",
+          description: "This is an example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename2.png",
+          description: "Another example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename3.png",
+          description: "And another example of a media description.",
+          url: img
+        }, {
+          name: "Filename.png",
+          description: "This is an example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename2.png",
+          description: "Another example of what a media description looks like.",
+          url: img
+        }, {
+          name: "Filename3.png",
+          description: "And another example of a media description.",
+          url: img
+        },{
           name: "Filename.png",
           description: "This is an example of what a media description looks like.",
           url: img
@@ -61,6 +99,14 @@
           url: img
         }];
 
+        demo.infoCardValues = {
+          "Details": "Details info goes here",
+          "Name": "Name here",
+          "Phone": "(000) 000-0000",
+          "Email": "example@gmail.com",
+          "Date": "May 11, 2022"
+        };
+
       }
   </script>
   </head>

package/dist/collection/demos/crowdsource-manager.html

@@ -30,23 +30,33 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
       function addValues() {
         const demo = document.getElementById("demo");
-        demo.mapInfos = [{
+        demo.mapInfos = [
+        {
           id: "863e4f6f2a7840db896cc1b1606d552d",
-          name: "Name of map 1"
+          name: "IA map"
         }, {
           id: "3715f4899bea4b2a948347c5c2357e58",
-          name: "Name of map 2"
+          name: "PN Map"
+        }, {
+          id: "4fa949c89bb04ecb8a9f5ad119448333",
+          name: "CS TIL DATA"
+        }, {
+          id: "f5b01c17a09941eaad63e7b4e6c7d880",
+          name: "Attachments Map"
+        }, {
+          id: "ce3dec81bf714d3bb71da9691ab686d1",
+          name: "Popup Configured Map"
         }];
       }
     </script>

package/dist/collection/demos/crowdsource-reporter.html

@@ -47,13 +47,13 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://unpkg.com/@esri/calcite-components@1.0.0-beta.97/dist/calcite/calcite.css" type="text/css" />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

package/dist/collection/demos/demo-map.html

@@ -34,12 +34,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
   </head>
 

package/dist/collection/demos/edit-card.html

@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <title>Edit Card</title>
+    <!--
+    | 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.
+    -->
+    <link rel="stylesheet" href="https://unpkg.com/@esri/calcite-components@1.0.0-beta.97/dist/calcite/calcite.css" type="text/css" />
+    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
+    <link rel="stylesheet" href="../solutions-components.css" type="text/css">
+
+    <script type="module" src="../solutions-components.esm.js"></script>
+  </head>
+
+  <body>
+    <edit-card id="demo" open="true"></edit-card>
+  </body>
+</html>

package/dist/collection/demos/index.html

@@ -171,7 +171,7 @@
                 <calcite-link href="./add-record-modal.html" target="_blank">&lt;add-record-modal&gt;</calcite-link>
               </li>
               <li>
-                <calcite-link href="./edit-record-modal.html" target="_blank">&lt;edit-record-modal&gt;</calcite-link>
+                <calcite-link href="./edit-card.html" target="_blank">&lt;edit-card&gt;</calcite-link>
               </li>
             </ul>
           </div>

package/dist/collection/demos/layer-table.html

@@ -45,12 +45,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

package/dist/collection/demos/list-item.html

@@ -41,13 +41,13 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://unpkg.com/@esri/calcite-components@1.0.0-beta.97/dist/calcite/calcite.css" type="text/css" />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

package/dist/collection/demos/map-card.html

@@ -39,12 +39,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

package/dist/collection/demos/map-draw-tools.html

@@ -44,12 +44,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
     <script>
       require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Legend"], (

package/dist/collection/demos/map-layer-picker.html

@@ -43,12 +43,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
     <script>
       require(["esri/WebMap", "esri/views/MapView"], (