@esri/solutions-components 0.7.31 → 0.7.32

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,90 @@
1
+ <html>
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <meta
5
+ name="viewport"
6
+ content="initial-scale=1,maximum-scale=1,user-scalable=no"
7
+ />
8
+ <title>Create Feature</title>
9
+ <!--
10
+ | Copyright 2022 Esri
11
+ |
12
+ | Licensed under the Apache License, Version 2.0 (the "License");
13
+ | you may not use this file except in compliance with the License.
14
+ | You may obtain a copy of the License at
15
+ |
16
+ | http://www.apache.org/licenses/LICENSE-2.0
17
+ |
18
+ | Unless required by applicable law or agreed to in writing, software
19
+ | distributed under the License is distributed on an "AS IS" BASIS,
20
+ | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
21
+ | See the License for the specific language governing permissions and
22
+ | limitations under the License.
23
+ -->
24
+ <style>
25
+ #viewDiv {
26
+ padding: 0;
27
+ margin: 0;
28
+ height: 100%;
29
+ width: calc(100% - 402px);
30
+ }
31
+
32
+ .over-map {
33
+ position: absolute;
34
+ top: 0;
35
+ right: 0px;
36
+ background-color: var(--calcite-color-foreground-1);
37
+ }
38
+
39
+ .column {
40
+ width: 400px;
41
+ height: 100%;
42
+ border: 1px solid var(--calcite-color-border-2);
43
+ }
44
+
45
+ .column[dir="rtl"] {
46
+ float: left;
47
+ }
48
+
49
+ .full-height {
50
+ height: 100%;
51
+ }
52
+ </style>
53
+
54
+ <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
55
+ <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
56
+ <link rel="stylesheet" href="../solutions-components.css" type="text/css">
57
+ <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
58
+
59
+ <script src="https://jsdev.arcgis.com/4.29/"></script>
60
+ <script type="module" src="../solutions-components.esm.js"></script>
61
+
62
+ <script>
63
+ require(["esri/WebMap", "esri/views/MapView"], (
64
+ WebMap,
65
+ MapView
66
+ ) => {
67
+ var webMap = new WebMap({
68
+ portalItem: {
69
+ id: "024e8a5e73a34c5aade9632d651c5750"
70
+ }
71
+ });
72
+ var view = new MapView({
73
+ container: "viewDiv",
74
+ map: webMap
75
+ });
76
+
77
+ view.when(function () {
78
+ const demo = document.getElementById("demo");
79
+ demo.mapView = view;
80
+ demo.selectedLayerId = 'SE_attch_7327';
81
+ })
82
+ });
83
+ </script>
84
+ </head>
85
+
86
+ <body>
87
+ <div id="viewDiv"></div>
88
+ <create-feature id="demo" class="over-map column full-height"></create-feature>
89
+ </body>
90
+ </html>
@@ -0,0 +1,17 @@
1
+ /*!
2
+ * Copyright 2022 Esri
3
+ * Licensed under the Apache License, Version 2.0
4
+ * http://www.apache.org/licenses/LICENSE-2.0
5
+ */
6
+ import{r as t,h as i,g as s,c as e,H as a,F as o}from"./p-78780f63.js";import{c as n}from"./p-5b566d55.js";import{c as l,s as c,a as r}from"./p-f10944e6.js";import{a as h}from"./p-83fd31d5.js";import{c as d,u as p,d as m}from"./p-0c97de08.js";import{c as u,d as f}from"./p-de281b08.js";import{c as v,s as g,d as y,u as w}from"./p-981e9549.js";import{S as b}from"./p-35c58364.js";import{l as x,g as k,f as L}from"./p-e902ba19.js";import{a as C,g as _,c as j,h as I,d as z}from"./p-2c382841.js";import{P as D}from"./p-515a319e.js";import"./p-fcefdfff.js";import"./p-29d68474.js";import"./p-c92fff33.js";import"./p-1e2ffee3.js";import"./p-d918ec36.js";import"./p-e1a4994d.js";import"./p-c1cf3ebc.js";
7
+ /*!
8
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
10
+ * v2.0.0
11
+ */const E=class{constructor(i){t(this,i),this.itemMutationObserver=n("mutation",(()=>this.updateFlowProps())),this.getFlowDirection=(t,i)=>t&&i>1||t>1?i<t?"retreating":"advancing":null,this.updateFlowProps=()=>{const{customItemSelectors:t,el:i,items:s}=this,e=Array.from(i.querySelectorAll("calcite-flow-item"+(t?`,${t}`:""))).filter((t=>t.closest("calcite-flow")===i)),a=s.length,o=e.length,n=e[o-1],l=e[o-2];if(o&&n&&e.forEach((t=>{t.showBackButton=t===n&&o>1,t.hidden=t!==n})),l&&(l.menuOpen=!1),this.items=e,a!==o){const t=this.getFlowDirection(a,o);this.itemCount=o,this.flowDirection=t}},this.customItemSelectors=void 0,this.flowDirection=null,this.itemCount=0,this.items=[]}async back(){const{items:t}=this,i=t[t.length-1];if(!i)return;const s=i.beforeBack?i.beforeBack:()=>Promise.resolve();try{await s.call(i)}catch(t){return}return i.remove(),i}async setFocus(){await l(this);const{items:t}=this,i=t[t.length-1];return null==i?void 0:i.setFocus()}connectedCallback(){var t;null===(t=this.itemMutationObserver)||void 0===t||t.observe(this.el,{childList:!0,subtree:!0}),this.updateFlowProps()}async componentWillLoad(){c(this)}componentDidLoad(){r(this)}disconnectedCallback(){var t;null===(t=this.itemMutationObserver)||void 0===t||t.disconnect()}async handleItemBackClick(t){if(!t.defaultPrevented)return await this.back(),this.setFocus()}render(){const{flowDirection:t}=this;return i("div",{class:{frame:!0,"frame--advancing":"advancing"===t,"frame--retreating":"retreating"===t}},i("slot",null))}get el(){return s(this)}};E.style=":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
12
+ /*!
13
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
14
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
15
+ * v2.0.0
16
+ */
17
+ const F=class{constructor(i){t(this,i),this.calciteFlowItemBack=e(this,"calciteFlowItemBack",7),this.calciteFlowItemScroll=e(this,"calciteFlowItemScroll",6),this.calciteFlowItemClose=e(this,"calciteFlowItemClose",6),this.calciteFlowItemToggle=e(this,"calciteFlowItemToggle",6),this.handlePanelScroll=t=>{t.stopPropagation(),this.calciteFlowItemScroll.emit()},this.handlePanelClose=t=>{t.stopPropagation(),this.calciteFlowItemClose.emit()},this.handlePanelToggle=t=>{t.stopPropagation(),this.collapsed=t.target.collapsed,this.calciteFlowItemToggle.emit()},this.backButtonClick=()=>{this.calciteFlowItemBack.emit()},this.setBackRef=t=>{this.backButtonEl=t},this.setContainerRef=t=>{this.containerEl=t},this.closable=!1,this.closed=!1,this.collapsed=!1,this.collapseDirection="down",this.collapsible=!1,this.beforeBack=void 0,this.description=void 0,this.disabled=!1,this.heading=void 0,this.headingLevel=void 0,this.loading=!1,this.menuOpen=!1,this.messageOverrides=void 0,this.messages=void 0,this.showBackButton=!1,this.defaultMessages=void 0,this.effectiveLocale=""}onMessagesChange(){}connectedCallback(){d(this),u(this),v(this)}async componentWillLoad(){await g(this),c(this)}componentDidRender(){p(this)}disconnectedCallback(){m(this),f(this),y(this)}componentDidLoad(){r(this)}effectiveLocaleChange(){w(this,this.effectiveLocale)}async setFocus(){await l(this);const{backButtonEl:t,containerEl:i}=this;return t?t.setFocus():i?i.setFocus():void 0}async scrollContentTo(t){var i;await(null===(i=this.containerEl)||void 0===i?void 0:i.scrollContentTo(t))}renderBackButton(){const{el:t}=this,s="rtl"===h(t),{showBackButton:e,backButtonClick:a,messages:o}=this,n=o.back;return e?i("calcite-action",{"aria-label":n,class:"back-button",icon:s?"chevron-right":"chevron-left",key:"flow-back-button",onClick:a,scale:"s",slot:"header-actions-start",text:n,title:n,ref:this.setBackRef}):null}render(){const{collapsed:t,collapseDirection:s,collapsible:e,closable:o,closed:n,description:l,disabled:c,heading:r,headingLevel:h,loading:d,menuOpen:p,messages:m}=this;return i(a,null,i("calcite-panel",{closable:o,closed:n,collapseDirection:s,collapsed:t,collapsible:e,description:l,disabled:c,heading:r,headingLevel:h,loading:d,menuOpen:p,messageOverrides:m,onCalcitePanelClose:this.handlePanelClose,onCalcitePanelScroll:this.handlePanelScroll,onCalcitePanelToggle:this.handlePanelToggle,ref:this.setContainerRef},this.renderBackButton(),i("slot",{name:"action-bar",slot:b.actionBar}),i("slot",{name:"header-actions-start",slot:b.headerActionsStart}),i("slot",{name:"header-actions-end",slot:b.headerActionsEnd}),i("slot",{name:"header-content",slot:b.headerContent}),i("slot",{name:"header-menu-actions",slot:b.headerMenuActions}),i("slot",{name:"fab",slot:b.fab}),i("slot",{name:"footer-actions",slot:b.footerActions}),i("slot",{name:"footer",slot:b.footer}),i("slot",null)))}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};F.style=":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";const S=class{constructor(i){t(this,i),this.success=e(this,"success",7),this.fail=e(this,"fail",7),this.drawComplete=e(this,"drawComplete",7),this.editingAttachment=e(this,"editingAttachment",7),this.mapView=void 0,this.selectedLayerId=void 0,this.customizeSubmit=!1}async mapViewWatchHandler(){await this.mapView.when((async()=>{await this.init()}))}async close(){this._editor&&this._editor.destroy()}async submit(){this._editor&&this._editor.viewModel.featureFormViewModel.submit()}async componentWillLoad(){await this.initModules()}async componentDidLoad(){await this.init()}render(){return i(a,{id:"feature-form"})}async init(){this.mapView&&this.selectedLayerId&&await this.createEditorWidget()}async initModules(){const[t,i]=await x(["esri/widgets/Editor","esri/core/reactiveUtils"]);this.Editor=t,this.reactiveUtils=i}async createEditorWidget(){this._editor&&this._editor.destroy();const t=[],i=document.createElement("div");(await C(this.mapView)).forEach((async i=>{t.push({layer:i,enabled:"feature"===(null==i?void 0:i.type)&&(null==i?void 0:i.id)===this.selectedLayerId,addEnabled:!0,updateEnabled:!1,deleteEnabled:!1})})),this._editor=new this.Editor({allowedWorkflows:"create-features",view:this.mapView,layerInfos:t,visibleElements:{snappingControls:!1},container:i}),this.el.appendChild(i);const s=this.reactiveUtils.watch((()=>this._editor.viewModel.state),(t=>{"adding-attachment"===t||"editing-attachment"===t?(this._addingAttachment=!0,this.editingAttachment.emit(!0)):this._addingAttachment&&(this.editingAttachment.emit(!1),this._addingAttachment=!1)}));this._editor.viewModel.addHandles(s);const e=this.reactiveUtils.watch((()=>this._editor.viewModel.featureTemplatesViewModel.state),(t=>{"ready"===t&&this.startCreate()}));this._editor.viewModel.addHandles(e)}async startCreate(){var t;if(null===(t=this._editor.viewModel.featureTemplatesViewModel.items)||void 0===t?void 0:t.length){const t=this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");this._editor.viewModel.featureTemplatesViewModel.on("select",(()=>{setTimeout((()=>{this._editor.viewModel.featureFormViewModel.on("submit",this.submitted.bind(this)),this._editor.viewModel.sketchViewModel.on("create",(t=>{"complete"===t.state&&this.drawComplete.emit()})),this.hideEditorsElements()}),700),this.hideEditorsElements()})),1===t.length&&this._editor.viewModel.featureTemplatesViewModel.select(t[0]),this.hideEditorsElements()}}hideEditorsElements(){this.customizeSubmit&&setTimeout((()=>{var t;null===(t=this.el.querySelector(".esri-editor").querySelectorAll("calcite-flow-item"))||void 0===t||t.forEach((t=>{var i,s,e,a,o;const n=null===(e=null===(s=null===(i=t.shadowRoot)||void 0===i?void 0:i.querySelector("calcite-panel"))||void 0===s?void 0:s.shadowRoot)||void 0===e?void 0:e.querySelector("article");null===(a=null==n?void 0:n.querySelector("header"))||void 0===a||a.setAttribute("style","display: none"),null===(o=null==n?void 0:n.querySelector("footer"))||void 0===o||o.setAttribute("style","display: none")}))}),700)}async submitted(t){var i;if(!t.invalid.length&&t.valid.length){try{await this._editor.activeWorkflow.commit(),(null===(i=this._editor.viewModel.failures)||void 0===i?void 0:i.length)&&this._editor.viewModel.failures.some((t=>{if(t.error)throw t.error}))}catch(t){return void this.fail.emit(t)}this.success.emit()}}get el(){return s(this)}static get watchers(){return{mapView:["mapViewWatchHandler"]}}};S.style=":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}";const W=class{constructor(i){t(this,i),this.featureSelect=e(this,"featureSelect",7),this.selectedLayerId=void 0,this.mapView=void 0,this.noFeaturesFoundMsg=void 0,this.pageSize=100,this.highlightOnMap=!1,this._featureItems=[],this._featuresCount=0,this._isLoading=!1,this._translations=void 0}async selectedLayerWatchHandler(){this._selectedLayer=await _(this.mapView,this.selectedLayerId),await this.initializeFeatureItems()}async componentWillLoad(){await this._getTranslations(),this._isLoading=!0,this._popupUtils=new D,this.mapView&&this.selectedLayerId&&(this._selectedLayer=await _(this.mapView,this.selectedLayerId))}async componentDidLoad(){await this.initializeFeatureItems()}render(){return i("calcite-panel",{"full-height":!0,"full-width":!0},this._isLoading&&i("calcite-loader",{scale:"m"}),0===this._featureItems.length&&!this._isLoading&&i("calcite-notice",{class:"error-msg",icon:"feature-details",kind:"info",open:!0},i("div",{slot:"message"},this.noFeaturesFoundMsg?this.noFeaturesFoundMsg:this._translations.featureErrorMsg)),i("calcite-list",{"selection-appearance":"border","selection-mode":"single"},!this._isLoading&&this._featureItems.length>0&&this._featureItems),this._featuresCount>this.pageSize&&i("div",{class:"width-full",slot:"footer"},i("calcite-pagination",{class:"pagination","full-width":!0,onCalcitePaginationChange:this.pageChanged.bind(this),"page-size":this.pageSize,"start-item":"1","total-items":this._featuresCount})))}async initializeFeatureItems(){this._selectedLayer&&(this._isLoading=!0,this._featureItems=await this.queryPage(0),this._featuresCount=await this._selectedLayer.queryFeatureCount(),this._isLoading=!1)}async pageChanged(t){this._isLoading=!0,this._highlightHandle&&(this._highlightHandle.remove(),this._highlightHandle=null);const i=t.target.startItem-1;this._featureItems=await this.queryPage(i),this._isLoading=!1}async featureClicked(t,i){if(this.highlightOnMap&&this._highlightHandle&&(this._highlightHandle.remove(),this._highlightHandle=null),t.target.selected){if(this.highlightOnMap){const i=Number(t.target.value),s=await j(this.mapView,this.selectedLayerId);this._highlightHandle=await I([i],s,this.mapView,!0)}this.featureSelect.emit(i)}}async queryPage(t){const i=this._selectedLayer,s=i.objectIdField,e={start:t,num:this.pageSize,outFields:["*"],returnGeometry:!0,where:i.definitionExpression,outSpatialReference:this.mapView.spatialReference.toJSON()};s&&(e.orderByFields=[s.toString()+" DESC"]);const a=await i.queryFeatures(e);return await this.createFeatureItem(a)}async createFeatureItem(t){const i=(null==t?void 0:t.features).map((async t=>{const i=await this._popupUtils.getPopupTitle(t,this.mapView.map);return this.getFeatureItem(t,i)}));return Promise.all(i)}getFeatureItem(t,s){const e=t.attributes[this._selectedLayer.objectIdField].toString();return i("calcite-list-item",{onCalciteListItemSelect:i=>{this.featureClicked(i,t)},value:e},i("div",{class:"popup-title",slot:"content-start"},s=null!=s?s:e),i("calcite-icon",{icon:"chevron-right",scale:"s",slot:"content-end"}))}async _getTranslations(){const t=await k(this.el);this._translations=t[0]}get el(){return s(this)}static get watchers(){return{selectedLayerId:["selectedLayerWatchHandler"]}}};W.style=":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.popup-title{font-weight:500;padding:10px 12px}";const P=class{constructor(i){t(this,i),this.layerSelect=e(this,"layerSelect",7),this.layersListLoaded=e(this,"layersListLoaded",7),this.mapView=void 0,this.layers=void 0,this.noLayerErrorMsg=void 0,this.showFeatureCount=!0,this.showNextIcon=!1,this._noLayersToDisplay=!1,this._mapLayerIds=[],this._isLoading=!1,this._translations=void 0}async refresh(){await this.setLayers()}async componentWillLoad(){await this._getTranslations(),this._isLoading=!0}async componentDidLoad(){await this.setLayers(),this._isLoading=!1}render(){return i(o,null,this._isLoading&&i("calcite-loader",{scale:"m"}),!this._isLoading&&this.mapView&&this._noLayersToDisplay&&i("calcite-notice",{class:"error-msg",icon:"layers-reference",kind:"danger",open:!0},i("div",{slot:"title"},this._translations.error),i("div",{slot:"message"},this.noLayerErrorMsg?this.noLayerErrorMsg:this._translations.noLayerToDisplayErrorMsg)),!this._isLoading&&this.mapView&&i("calcite-list",{"selection-appearance":"border","selection-mode":this.showNextIcon?"none":"single-persist"},this.renderLayerList()))}async setLayers(){this.mapView&&await this.initLayerHash()}async initLayerHash(){const t=[];this._layerItemsHash=await z(this.mapView,!0),(await C(this.mapView)).forEach((async i=>{var s,e;if("feature"===(null==i?void 0:i.type)&&(null==i?void 0:i.editingEnabled)&&(null===(e=null===(s=null==i?void 0:i.capabilities)||void 0===s?void 0:s.operations)||void 0===e?void 0:e.supportsAdd)&&(this._layerItemsHash[i.id].supportsAdd=!0,this.showFeatureCount)){const s=i.createQuery(),e=i.queryFeatureCount(s);t.push(e),e.then((async t=>{const s=isNaN(t)?"":await L(t,{places:0,api:4,type:"decimal"});this._layerItemsHash[i.id].formattedFeatureCount=s}))}})),await Promise.all(t).then((()=>{const t=this.getEditableIds(this._layerItemsHash);this._mapLayerIds=t.reverse(),this.handleNoLayersToDisplay()}),(()=>{this._mapLayerIds=[],this.handleNoLayersToDisplay()}))}handleNoLayersToDisplay(){this._noLayersToDisplay=!(this._mapLayerIds.length>0),this.layersListLoaded.emit(this._mapLayerIds)}getEditableIds(t){var i;const s=(null===(i=this.layers)||void 0===i?void 0:i.length)>0?this.layers:[];return Object.keys(t).reduce(((i,e)=>{let a=t[e].supportsAdd;return(null==s?void 0:s.length)>0&&(a=s.indexOf(e)>-1&&t[e].supportsAdd),a&&i.push(e),i}),[])}renderLayerList(){return this._mapLayerIds.length>0&&this._mapLayerIds.reduce(((t,i)=>(this._layerItemsHash[i]&&t.push(this.getLayerListItem(i)),t)),[])}getLayerListItem(t){const s=this._layerItemsHash[t].formattedFeatureCount;return i("calcite-list-item",{onCalciteListItemSelect:()=>{this.onLayerItemSelected(t)}},i("div",{class:"layer-name",slot:"content-start"},this._layerItemsHash[t].name),this.showFeatureCount&&void 0!==s&&""!==s&&i("div",{class:this.showNextIcon?"":"feature-count",slot:"content-end"},"("+s+")"),this.showNextIcon&&i("calcite-icon",{icon:"chevron-right",scale:"s",slot:"content-end"}))}onLayerItemSelected(t){this.layerSelect.emit({layerId:t,layerName:this._layerItemsHash[t].name})}async _getTranslations(){const t=await k(this.el);this._translations=t[0]}get el(){return s(this)}};P.style=":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}.feature-count{padding-right:12px}";export{E as calcite_flow,F as calcite_flow_item,S as create_feature,W as feature_list,P as layer_list}
@@ -0,0 +1,6 @@
1
+ /*!
2
+ * Copyright 2022 Esri
3
+ * Licensed under the Apache License, Version 2.0
4
+ * http://www.apache.org/licenses/LICENSE-2.0
5
+ */
6
+ import{r as t,c as i,h as s,H as e,g as h}from"./p-78780f63.js";import{l as a,g as o}from"./p-e902ba19.js";import{a as l,g as c,q as n}from"./p-2c382841.js";import"./p-d918ec36.js";import"./p-e1a4994d.js";import"./p-c1cf3ebc.js";const r=class{constructor(s){t(this,s),this.togglePanel=i(this,"togglePanel",7),this.description=void 0,this.isMobile=void 0,this.enableAnonymousAccess=void 0,this.enableAnonymousComments=void 0,this.enableComments=void 0,this.enableLogin=void 0,this.enableNewReports=void 0,this.layers=void 0,this.loginTitle=void 0,this.mapView=void 0,this.layerId=void 0,this.objectId=void 0,this.reportButtonText=void 0,this.reportsHeader=void 0,this.reportSubmittedMessage=void 0,this.searchConfiguration=void 0,this.showComments=void 0,this.defaultWebmap="",this.enableSearch=!0,this.enableHome=!0,this.mapInfos=[],this.theme="light",this.enableZoom=!0,this._mapInfo=void 0,this._flowItems=["layer-list"],this._sidePanelCollapsed=!1,this._translations=void 0,this._hasValidLayers=!1,this._selectedLayerName=void 0,this._reportSubmitted=!1,this._showSubmitCancelButton=!1,this._featureCreationFailedErrorMsg=void 0}async isMobileWatchHandler(){this._sidePanelCollapsed=!1}async mapViewWatchHandler(){await this.mapView.when((async()=>{await this.setMapView()}))}async componentWillLoad(){this._urlParamsLoaded=!1,await this._initModules(),await this._getTranslations()}render(){const t="dark"===this.theme?"calcite-mode-dark":"calcite-mode-light";return s(e,null,this._reportSubmitted&&s("calcite-alert",{"auto-close":!0,class:t,closable:!0,icon:"check-circle",kind:"success",onCalciteAlertClose:()=>{this._reportSubmitted=!1},open:!0,placement:"top"},s("div",{slot:"title"},this._translations.reportSubmit),s("div",{slot:"message"},this._translations.submitMsg)),this._featureCreationFailedErrorMsg&&s("calcite-alert",{"auto-close":!0,class:t,closable:!0,icon:"x-octagon",kind:"danger",onCalciteAlertClose:()=>{this._featureCreationFailedErrorMsg=""},open:!0,placement:"top"},s("div",{slot:"title"},this._translations.error),s("div",{slot:"message"},this._featureCreationFailedErrorMsg)),s("div",null,s("calcite-shell",{"content-behind":!0},this._getReporter())))}async _initModules(){const[t]=await a(["esri/core/reactiveUtils"]);this.reactiveUtils=t}setSelectedLayer(t,i){this._selectedLayerId=t,this._selectedLayerName=i,this._validLayers.forEach((i=>{i.set("visible",!t||i.id===t)}))}_getReporter(){const t=[];return this._flowItems.forEach((i=>{switch(i){case"layer-list":t.push(this.getLayerListFlowItem());break;case"feature-list":t.push(this.getFeatureListFlowItem(this._selectedLayerId,this._selectedLayerName));break;case"feature-details":t.push(this.getFeatureDetailsFlowItem());break;case"reporting-layer-list":t.push(this.getChooseCategoryFlowItem());break;case"feature-create":t.push(this.getFeatureCreateFlowItem())}})),s("calcite-panel",{class:"width-full "+("dark"===this.theme?"calcite-mode-dark":"calcite-mode-light")},this.mapView?s("calcite-flow",null,(null==t?void 0:t.length)>0&&t):s("calcite-loader",{scale:"m"}))}getLayerListFlowItem(){return s("calcite-flow-item",{collapsed:this.isMobile&&this._sidePanelCollapsed,heading:this.reportsHeader},this._hasValidLayers&&s("calcite-action",{icon:"sort-ascending-arrow",slot:this.isMobile?"header-menu-actions":"header-actions-end",text:this._translations.sort,"text-enabled":this.isMobile}),this._hasValidLayers&&s("calcite-action",{icon:"filter",slot:this.isMobile?"header-menu-actions":"header-actions-end",text:this._translations.filter,"text-enabled":this.isMobile}),this.isMobile&&this.getActionToExpandCollapsePanel(),this._hasValidLayers&&this.enableNewReports&&s("calcite-button",{appearance:"secondary",onClick:this.navigateToChooseCategory.bind(this),slot:"footer",width:"full"},this.reportButtonText),s("calcite-panel",{"full-height":!0,"full-width":!0},s("layer-list",{class:"height-full",layers:this.layers,mapView:this.mapView,noLayerErrorMsg:this._translations.noLayerToDisplayErrorMsg,onLayerSelect:this.displayFeaturesList.bind(this),onLayersListLoaded:this.layerListLoaded.bind(this),ref:t=>this._layerList=t,showFeatureCount:!0,showNextIcon:!0})))}getChooseCategoryFlowItem(){return s("calcite-flow-item",{collapsed:this.isMobile&&this._sidePanelCollapsed,heading:this._translations.createReportHeader,onCalciteFlowItemBack:this.backFromSelectedPanel.bind(this)},this.isMobile&&this.getActionToExpandCollapsePanel(),s("div",{class:"width-full",slot:"footer"},s("calcite-button",{appearance:"secondary",class:"footer-top-button footer-button",disabled:!this._selectedLayerId,onClick:this.navigateToCreateFeature.bind(this),width:"full"},this._translations.next),s("calcite-button",{appearance:"outline",class:"footer-button",onClick:this.backFromSelectedPanel.bind(this),width:"full"},this._translations.cancel)),s("calcite-panel",{"full-height":!0,"full-width":!0},s("calcite-notice",{class:"notice-msg",icon:"lightbulb",kind:"success",open:!0},s("div",{slot:"message"},this._translations.chooseCategoryMsg)),s("layer-list",{class:"height-full",layers:this.layers,mapView:this.mapView,noLayerErrorMsg:this._translations.noLayerToDisplayErrorMsg,onLayerSelect:this.highlightSelectedLayer.bind(this),showFeatureCount:!1,showNextIcon:!1})))}getFeatureCreateFlowItem(){return s("calcite-flow-item",{collapsed:this.isMobile&&this._sidePanelCollapsed,heading:this._selectedLayerName,onCalciteFlowItemBack:this.backFromCreateFeaturePanel.bind(this)},this.isMobile&&this.getActionToExpandCollapsePanel(),this._showSubmitCancelButton&&s("div",{class:"width-full",slot:"footer"},s("calcite-button",{appearance:"secondary",class:"footer-top-button footer-button",onClick:this.onSubmitButtonClick.bind(this),width:"full"},this._translations.submit),s("calcite-button",{appearance:"outline",class:"footer-button",onClick:this.backFromCreateFeaturePanel.bind(this),width:"full"},this._translations.cancel)),s("calcite-panel",{"full-height":!0,"full-width":!0},s("calcite-notice",{class:"notice-msg",icon:"lightbulb",kind:"success",open:!0},s("div",{slot:"message"},this._translations.featureEditFormInfoMsg)),s("create-feature",{customizeSubmit:!0,mapView:this.mapView,onDrawComplete:this.onDrawComplete.bind(this),onEditingAttachment:this.showSubmitCancelButton.bind(this),onFail:this.createFeatureFailed.bind(this),onSuccess:this.onReportSubmitted.bind(this),ref:t=>this._createFeature=t,selectedLayerId:this._selectedLayerId})))}onDrawComplete(){this._showSubmitCancelButton=!0}showSubmitCancelButton(t){this._showSubmitCancelButton=!t.detail}onSubmitButtonClick(){this._createFeature&&this._createFeature.submit()}backFromCreateFeaturePanel(){this._createFeature&&this._createFeature.close(),this.backFromSelectedPanel()}createFeatureFailed(t){console.error(t.detail),this._featureCreationFailedErrorMsg=t.detail.message}onReportSubmitted(){this._reportSubmitted=!0,this.navigateToHomePage()}navigateToHomePage(){this._createFeature&&this._createFeature.close(),this._layerList&&this._layerList.refresh(),this.setSelectedFeatures([]),this._flowItems=["layer-list"]}highlightSelectedLayer(t){this.setSelectedLayer(t.detail.layerId,t.detail.layerName)}async navigateToCreateFeature(){this._showSubmitCancelButton=!1,this._flowItems=[...this._flowItems,"feature-create"]}navigateToChooseCategory(){this._flowItems=[...this._flowItems,"reporting-layer-list"]}async layerListLoaded(t){const i=t.detail,s=await l(this.mapView);this._validLayers=[],s.forEach((t=>{i.includes(t.id)&&this._validLayers.push(t)})),this.handleMapClick(),this._hasValidLayers=i.length>0,this._urlParamsLoaded||(this._urlParamsLoaded=!0,await this.loadFeatureFromURLParams())}displayFeaturesList(t){this.setSelectedLayer(t.detail.layerId,t.detail.layerName),this._flowItems=[...this._flowItems,"feature-list"]}backFromSelectedPanel(){const t=[...this._flowItems];t.pop(),1!==t.length?this._flowItems=[...t]:this.navigateToHomePage()}toggleSidePanel(){this._sidePanelCollapsed=!this._sidePanelCollapsed,this.togglePanel.emit(this._sidePanelCollapsed)}async onFeatureSelectFromList(t){this.setSelectedFeatures([t.detail]),this._flowItems=[...this._flowItems,"feature-details"]}getFeatureListFlowItem(t,i){return s("calcite-flow-item",{collapsed:this.isMobile&&this._sidePanelCollapsed,heading:i,onCalciteFlowItemBack:this.backFromSelectedPanel.bind(this)},s("calcite-action",{icon:"sort-ascending-arrow",slot:this.isMobile?"header-menu-actions":"header-actions-end",text:this._translations.sort,"text-enabled":this.isMobile}),s("calcite-action",{icon:"filter",slot:this.isMobile?"header-menu-actions":"header-actions-end",text:this._translations.filter,"text-enabled":this.isMobile}),this.isMobile&&this.getActionToExpandCollapsePanel(),this.enableNewReports&&s("calcite-button",{appearance:"secondary",onClick:this.navigateToCreateFeature.bind(this),slot:"footer",width:"full"},this.reportButtonText),s("calcite-panel",{"full-height":!0},s("feature-list",{class:"height-full",highlightOnMap:!0,mapView:this.mapView,noFeaturesFoundMsg:this._translations.featureErrorMsg,onFeatureSelect:this.onFeatureSelectFromList.bind(this),pageSize:30,selectedLayerId:t})))}getFeatureDetailsFlowItem(){return s("calcite-flow-item",{collapsed:this.isMobile&&this._sidePanelCollapsed,heading:this._selectedLayerName,onCalciteFlowItemBack:this.backFromSelectedPanel.bind(this)},this.isMobile&&this.getActionToExpandCollapsePanel(),s("instant-apps-social-share",{autoUpdateShareUrl:!1,embed:!1,popoverButtonIconScale:"s",ref:t=>this._shareNode=t,scale:"m",shareButtonColor:"neutral",shareButtonType:"action",slot:"header-actions-end",socialMedia:!0,view:this.mapView}),s("calcite-panel",{"full-height":!0},s("info-card",{allowEditing:!1,graphics:this._selectedFeature,isLoading:!1,isMobile:!1,mapView:this.mapView,onSelectionChanged:this.featureDetailsChanged.bind(this),zoomAndScrollToSelected:!0})))}setSelectedFeatures(t){this._selectedFeature=t,this.setCurrentFeature(this._selectedFeature.length?this._selectedFeature[0]:null)}setCurrentFeature(t){if(t&&t.layer){const i=t.layer;this.setSelectedLayer(i.id,i.title),this._currentFeatureId=t.attributes[i.objectIdField]}else this.setSelectedLayer("",""),this._currentFeatureId="";this._updateShareURL()}featureDetailsChanged(t){this.setCurrentFeature(t.detail[0])}getActionToExpandCollapsePanel(){return s("calcite-action",{icon:this._sidePanelCollapsed?"chevrons-up":"chevrons-down",onClick:this.toggleSidePanel.bind(this),slot:"header-actions-end",text:this._sidePanelCollapsed?this._translations.expand:this._translations.collapse})}async setMapView(){this.mapView.popupEnabled=!1,this._defaultCenter&&this._defaultLevel&&(await this.mapView.goTo({center:this._defaultCenter,zoom:this._defaultLevel}),this._defaultCenter=void 0,this._defaultLevel=void 0)}handleMapClick(){this._mapClickHandle&&this._mapClickHandle.remove(),this._mapClickHandle=this.reactiveUtils.on((()=>this.mapView),"click",this.onMapClick.bind(this))}async onMapClick(t){this.mapView.popupEnabled=!1;const i={include:this._validLayers},s=await this.mapView.hitTest(t,i);if(s.results.length>0){const t=[];s.results.forEach((function(i){"graphic"===i.type&&t.push(i.graphic)})),this.setSelectedFeatures(t),this._flowItems=this._flowItems.length&&"feature-details"!==this._flowItems[this._flowItems.length-1]?[...this._flowItems,"feature-details"]:[...this._flowItems]}}async _getTranslations(){const t=await o(this.el);this._translations=t[0]}_updateShareURL(){var t,i;const s=null===(t=this._shareNode)||void 0===t?void 0:t.shareUrl;if(!s)return;const e=new URL(s);this._selectedLayerId?e.searchParams.set("layerid",this._selectedLayerId):e.searchParams.delete("layerid"),(null===(i=this._selectedFeature)||void 0===i?void 0:i.length)?e.searchParams.set("oid",this._currentFeatureId):e.searchParams.delete("oid"),this._shareNode.shareUrl=e.href}async loadFeatureFromURLParams(){if(this.layerId&&this.objectId){const t=await c(this.mapView,this.layerId);if(t){const i=await n([Number(this.objectId)],t,[],!1,this.mapView.spatialReference);i.length&&(this._selectedFeature=i,this._flowItems=this._flowItems.length&&"feature-details"!==this._flowItems[this._flowItems.length-1]?[...this._flowItems,"feature-details"]:[...this._flowItems])}}}get el(){return h(this)}static get watchers(){return{isMobile:["isMobileWatchHandler"],mapView:["mapViewWatchHandler"]}}};r.style=":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}";export{r as crowdsource_reporter}