/*
* Copyright (c) 2021 Esri
* All rights reserved.
* 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.
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "esri/core/accessorSupport/decorators", "esri/widgets/Widget", "esri/core/Handles", "esri/widgets/support/widget", "esri/core/promiseUtils", "../utilites/lookupLayerUtils", "./GroupedAccordion", "esri/widgets/Expand", "esri/core/reactiveUtils", "../components/Notification", "TemplatesCommonLib/structuralFunctionality/a11yUtils", "TemplatesCommonLib/functionality/configUtils", "../utilites/utils", "esri/layers/support/FeatureEffect", "esri/layers/support/FeatureFilter", "esri/rest/support/Stop", "TemplatesCommonLib/functionality/effects", "../utilites/a11yUtils", "ArcGISHTMLSanitizer", "TemplatesCommonLib/functionality/securityUtils", "../utilites/ShareUtils", "./CountPage/CountPage", "../utilites/printUtils", "./Scoreboard", "TemplatesCommonLib/structuralFunctionality/t9nUtils"], function (require, exports, decorators_1, Widget_1, Handles_1, widget_1, promiseUtils_1, lookupLayerUtils_1, GroupedAccordion_1, Expand_1, reactiveUtils_1, Notification_1, a11yUtils_1, configUtils_1, utils_1, FeatureEffect_1, FeatureFilter_1, Stop_1, effects_1, a11yUtils_2, ArcGISHTMLSanitizer, securityUtils_1, ShareUtils, CountPage, printUtils_1, Scoreboard, t9nUtils_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Widget_1 = __importDefault(Widget_1);
Handles_1 = __importDefault(Handles_1);
GroupedAccordion_1 = __importDefault(GroupedAccordion_1);
Expand_1 = __importDefault(Expand_1);
Notification_1 = __importDefault(Notification_1);
FeatureEffect_1 = __importDefault(FeatureEffect_1);
FeatureFilter_1 = __importDefault(FeatureFilter_1);
Stop_1 = __importDefault(Stop_1);
const CSS = {
togglePanel: "toggle-panel",
toggle: "toggleOpen",
messageText: "message-text",
toggleContentTools: "toggle-content-tools",
toggleContentBtn: "toggle-content-btn"
};
let DisplayLookupResults = class DisplayLookupResults extends Widget_1.default {
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
constructor(props) {
super(props);
this.lookupGraphics = null;
this.empty = true;
this.lookupLayers = null;
this.expand = [];
this.directions = null;
this.searchLayer = null;
this.notice = null;
this.state = "init";
this.directionsReady = false;
this.elevationReady = false;
this.elevationProfile = null;
this.scoreboard = null;
this.messages = null;
//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------
this._featureResults = null;
this._eventHandler = null;
this._viewPoint = null;
this._handles = new Handles_1.default();
this._shareUtils = null;
this._highlightLayerView = null;
this._presetEffects = [];
this._sanitizer = null;
}
postInitialize() {
this._sanitizer = (0, securityUtils_1.createSanitizerInstance)(ArcGISHTMLSanitizer);
this.addHandles([
(0, reactiveUtils_1.watch)(() => this?.directions?.viewModel?.state, () => {
if (this?.directions?.viewModel?.state !== "ready")
return;
this.directionsReady = true;
}, { initial: true }),
(0, reactiveUtils_1.watch)(() => this?.elevationProfile, () => {
this._clearElevation();
if (this?.config?.showElevationProfile) {
this.elevationReady = true;
}
}, { initial: true }),
(0, reactiveUtils_1.watch)(() => this?.view?.ready, (ready) => {
if (ready) {
this.scoreboard = new Scoreboard({
view: this?.view,
config: this?.config,
location: this?.location
});
this.view.ui.add(this.scoreboard, "manual");
this.scoreboard.visible = false;
}
}, { initial: true }),
(0, reactiveUtils_1.watch)(() => this?.lookupLayers, () => {
this?.lookupLayers?.forEach((layer) => {
this?.view.whenLayerView(layer).then((layerView) => {
if (layerView?.featureEffect) {
this._presetEffects?.push({
layerView: layerView,
effect: layerView.featureEffect
});
}
});
});
}, { initial: true })
]);
if (this.config.useDirectionsApp) {
this.directionsReady = true;
}
if (this.config.shareSelected && this?.view) {
this._shareUtils = new ShareUtils({ view: this.view });
}
}
render() {
const ready = this.state === "ready" ? true : false;
const loader = this.state === "loading" ? ((0, widget_1.tsx)("div", { key: "loader", class: "loader" },
(0, widget_1.tsx)("calcite-loader", { scale: "s", inline: "false", hidden: true }),
(0, widget_1.tsx)("span", { style: "margin:0 10px" },
this.messages.load.label,
"..."))) : null;
// No Results
if (this.empty && ready) {
this._featureResults = [];
if (this.config.showScoreboard)
this.scoreboard.visible = false;
document.body.classList.remove("show-scoreboard");
if (this?.location)
this.addNotice();
}
if (this?.scoreboard) {
if (this.config?.showScoreboard && this._featureResults?.length > 0) {
this.scoreboard.visible = true;
document.body.classList.add("show-scoreboard");
}
else {
this.scoreboard.visible = false;
document.body.classList.remove("show-scoreboard");
}
}
const accordion = ((0, widget_1.tsx)("div", { key: "detailAccordion", bind: this, afterCreate: this._addDetailAccordion }));
const { count, exceeded } = (0, utils_1.getExceededCount)(this._featureResults);
const displayExceededMessage = exceeded > 0 ? this.createCountPage(count, exceeded) : null;
const togglePanel = this._featureResults?.length > 0 ? this.createTogglePanel() : null;
return ((0, widget_1.tsx)("div", { key: "loader" },
(0, widget_1.tsx)("div", null, togglePanel),
displayExceededMessage,
accordion,
loader,
(0, widget_1.tsx)("div", { class: "scoreboard-mobile-container" }, this?.scoreboard?.render())));
}
_addDetailAccordion(container) {
const { _featureResults, view } = this;
this._eventHandler = this._handleActionItem.bind(this);
this.accordion = new GroupedAccordion_1.default({
featureResults: _featureResults,
config: this.config,
view,
container
});
if (this?.config?.autoZoomFirstResult) {
(0, reactiveUtils_1.when)(() => this?.accordion?.featureResults, () => {
let features;
this?.accordion?.featureResults?.some((result) => {
if (result?.features?.length > 0) {
features = result.features;
return true;
}
else {
return false;
}
});
// get first highlighted record
// Don't zoom to the first if we have a sketch layer and features
if (this.config.enableSketchTools) {
const l = this?.view.map.findLayerById("sketchLayer");
if (l?.graphics?.length > 0) {
const goToProps = (0, lookupLayerUtils_1.createGoToProps)(l?.graphics, view, this.config);
this.view.goTo(goToProps).catch();
return;
}
}
if (features?.length > 0) {
let zoomFeature = features[0];
// Zoom to the searched location if its a polygon and if we have
// a zoom scale set
let enableZoom = true;
if (this.config?.searchPoint &&
zoomFeature?.geometry?.type === "polygon" &&
this.config.enableSearchScale &&
!this.config?.localeSwitched) {
zoomFeature = this.config.searchPoint;
enableZoom = false;
}
if (!this.config.localeSwitched)
this._zoomToFeature(zoomFeature, enableZoom, true);
}
}, { initial: true });
}
(0, reactiveUtils_1.when)(() => this?.config?.interactiveResults, () => {
const zoomButton = this._updateZoomToAction();
if (!zoomButton)
return;
if (this.config.interactiveResults) {
this.accordion.actionBarItems.push(zoomButton);
}
}, { once: true, initial: true });
(0, reactiveUtils_1.when)(() => this?.config?.shareSelected === true, () => {
const shareButton = this._updateSingleShare();
if (!shareButton)
return;
if (this.config.shareSelected) {
this.accordion.actionBarItems.push(shareButton);
}
}, { once: true });
(0, reactiveUtils_1.when)(() => this?.elevationReady === true, () => {
const elevationProfileButton = this._updateProfile();
if (elevationProfileButton) {
this.accordion.actionBarItems.push(elevationProfileButton);
}
}, { once: true, initial: true });
this.accordion.watch("hoveredItem", () => {
if (this.accordion.hoveredItem?.graphic && !this.config.showSelectedOnly) {
this._highlightFeature(this.accordion.hoveredItem.graphic);
(0, utils_1.displayPopup)(this.view, this.accordion.hoveredItem.graphic, this.config, false);
}
});
(0, reactiveUtils_1.when)(() => this?.directionsReady === true, () => {
const directionsButton = this._updateDirections();
if (directionsButton) {
this.accordion.actionBarItems.push(directionsButton);
}
}, { once: true, initial: true });
this.accordion.watch("selectedItem", () => {
this._clearDirections();
this._clearElevation();
if (this.accordion.selectedItem) {
this._highlightFeature(this.accordion.selectedItem);
const feature = this.accordion.selectedItem?.clone();
this.accordion.zoom && this._zoomToFeature(feature, false, false);
this.mapPanel.selectedItemTitle =
this.accordion.selectedItem.attributes["app-accordion-title"] ?? null;
}
this.accordion.selectedItem = null;
});
}
async _handleActionItem(e, name, selected) {
if (name === "directions") {
if (this.directions && this.directions.viewModel && !this.config.useDirectionsApp) {
const startLocation = this?.config?.directionsStart
? this.config.directionsStart
: this.location;
const start = this._createStop(startLocation);
const stop = this._createStop(selected);
this._clearDirections();
const vm = this.directions.viewModel;
vm.layer.stops = [start, stop];
const travelMode = this.directions.viewModel?.travelModes?.find((mode) => mode?.name === "Driving Time");
if (travelMode) {
this.directions.viewModel.selectedTravelMode = travelMode;
}
(await this.directions.viewModel.getDirections());
if (this.config.hideMap) {
this._showDirectionsPrintPage();
}
else {
setTimeout(() => {
this._showDirectionsPrintPage();
}, 500);
}
}
else if (this.config.useDirectionsApp) {
if (selected?.geometry.type === "point") {
const g = selected.geometry;
const origin = `${g.latitude.toFixed(3)},${g.longitude.toFixed(3)}`;
if (navigator.platform.indexOf("iPhone") != -1 ||
navigator.platform.indexOf("iPod") != -1 ||
navigator.platform.indexOf("iPad") != -1)
window.open(`maps://www.google.com/maps/dir/?api=1&destination=${origin}`);
else
window.open(`https://www.google.com/maps/dir/?api=1&destination=${origin}`);
}
/* // origin can be address or lat,long
const url = `https://www.google.com/maps/dir/?api=1&origin=${origin}`;
window.open(url, "_blank");*/
}
}
if (name === "zoomToAction") {
if (this.config?.showSelectedOnly && this.config?.selectionExpression) {
const { layer } = this.config.selectionExpression;
if (layer)
layer.definitionExpression = "";
this.config.selectionExpression = null;
}
this._highlightFeature(selected);
if (this.config.showSelectedOnly) {
// only show the selected feature and hide the others
this.config.selectionVisibilityLayers = [];
this?._featureResults?.forEach((feature) => {
const layer = selected?.layer || null;
feature?.features?.forEach((f) => {
this.config?.selectionVisibilityLayers?.push(f.layer);
if (f.layer.title !== layer.title) {
f.layer.visible = false;
}
else {
// same layer now we only want to show the selected feature
f.layer.visible = true;
if (f.layer?.type === "feature") {
const fl = f.layer;
if (fl) {
this.config.selectionExpression = {
layer: fl,
previousDefinitionExpression: fl.definitionExpression?.toString()
};
fl.definitionExpression = `${fl.objectIdField} = ${selected?.attributes[fl.objectIdField]}`;
}
}
}
});
});
}
if (this?.config?.showPopupsOnZoom) {
(0, utils_1.displayPopup)(this.view, selected, this.config, true);
}
else {
const goToProps = (0, lookupLayerUtils_1.createGoToProps)(selected, this.view, this.config);
this.view.goTo(goToProps).catch();
}
}
if (name === "elevationProfile") {
if (!this.elevationReady)
return;
this._clearElevation();
this.elevationProfile.input = selected;
const expand = new Expand_1.default({
content: this.elevationProfile,
mode: "floating",
id: "elevation-profile-expand",
expandIcon: "altitude",
group: "action-item-group",
view: this.view,
autoCollapse: false,
closeOnEsc: false
});
(0, utils_1.handleExpandUpdated)(expand);
if (this.elevationProfile?.label) {
expand.expandTooltip = "";
expand.collapseTooltip = `${this.messages.toggle} ${this.elevationProfile.label}`;
}
this._toggleExpandContainers();
this.expand.push(expand);
expand.expand();
this.view.ui.add(expand, "bottom-right");
}
if (name === "copyLink") {
let nav = navigator;
const button = e.target;
if (nav?.canShare && nav?.canShare({ url: window.location.href }) && (0, utils_1.isMobile)()) {
const url = await this._shareUtils?.generateUrl(selected);
nav
.share({
url,
title: document.title
})
.catch((error) => {
console.log("Error", error);
});
}
else if (nav?.clipboard) {
try {
// Safari treats user activation differently:
// https://bugs.webkit.org/show_bug.cgi?id=222262.
nav.clipboard.write([
new ClipboardItem({
"text/plain": this._shareUtils?.generateUrl(selected).then((result) => {
return new Blob([result], { type: "text/plain" });
})
})
]);
}
catch {
// Chromium
const url = await this._shareUtils?.generateUrl(selected);
await nav.clipboard.writeText(url);
}
}
else {
const url = await this._shareUtils?.generateUrl(selected);
const dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.value = url;
dummy.setSelectionRange(0, dummy.value.length);
dummy.focus();
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
this._updateButtonText(button);
}
}
_showDirectionsPrintPage() {
// add directions widget to panel
const printPage = document.getElementById("printPanel");
printPage?.removeAttribute("closed");
printPage?.classList.remove("hide");
printPage?.addEventListener("calcitePanelClose", () => {
this._cleanupDirectionsPanels();
});
// hide other panels
document.getElementById("refinePanel")?.classList.add("hide");
document.getElementById("resultsPanel")?.classList.add("hide");
document.getElementById("resultsPanel")?.classList.add("hide");
const directionContainer = document.getElementById("printDialogPanel");
directionContainer.innerHTML = this._sanitizer.sanitize("");
directionContainer?.appendChild(this?.directions?.container);
directionContainer?.setAttribute("tabindex", "0");
// get first focusable element on print dialog and set
const prevFocus = document.activeElement;
const directionsWidget = this?.directions?.container;
(0, a11yUtils_2.focusNode)(this?.directions?.id, false);
directionsWidget?.addEventListener("blur", () => {
prevFocus?.focus({ focusVisible: true });
});
}
_cleanupDirectionsPanels() {
this._clearDirections();
const printPage = document.getElementById("printPanel");
printPage.classList.add("hide");
const directionContainer = document.getElementById("printDialogPanel");
directionContainer.innerHTML = this._sanitizer.sanitize("");
directionContainer?.appendChild(this?.directions.container);
document.getElementById("refinePanel")?.classList.remove("hide");
document.getElementById("resultsPanel")?.classList.remove("hide");
document.getElementById("resultsPanel")?.classList.remove("hide");
}
_updateButtonText(button) {
if (!button)
return;
const origAppearance = button.appearance;
const origText = button.innerText;
button.appearance = "solid";
setTimeout(() => {
button.innerText = origText;
button.appearance = origAppearance;
}, 3000);
button.innerText = "Link Copied";
}
_toggleExpandContainers() {
this.expand?.forEach((expandItem) => {
if (expandItem?.expanded)
expandItem.collapse();
});
}
_createStop(graphic) {
let geometry = null;
if (!graphic)
return;
const type = graphic.geometry.type;
if (type === "polygon") {
const polyGeom = graphic.geometry;
geometry = polyGeom.centroid;
}
else if (type === "polyline") {
const polyLineGeom = graphic.geometry;
geometry = polyLineGeom.extent.center;
}
else if (type === "point") {
geometry = graphic?.geometry;
}
const stop = new Stop_1.default();
stop.geometry = geometry;
return stop;
}
async queryFeatures(location) {
this.location = location;
if (this?.scoreboard)
this.scoreboard.location = location;
this.lookupGraphics.graphic = location;
this.state = "loading";
if (!location) {
this.state = "ready";
this._featureResults = [];
this.empty = true;
Promise.resolve();
}
else {
await this.lookupGraphics.addGraphicsAndZoom();
const resultArray = [];
(0, promiseUtils_1.eachAlways)(this.lookupLayers?.map((layer) => {
return this._queryFeatureLayers(layer, location)
.then((results) => {
const { features, title, exceeded, exceededCount } = results;
const layerIndex = this.view.map.allLayers.indexOf(layer);
if (this.config.groupResultsByLayer) {
if (features?.length < 1) {
this.empty = true;
return;
}
this.empty = false;
resultArray.push({
title,
features,
layerIndex,
exceeded,
exceededCount
});
this._featureResults = resultArray;
return;
}
else {
if (results.features?.length < 1) {
this.empty = true;
return;
}
this.empty = false;
results.features.forEach((feature) => {
if (layerIndex)
feature.layerIndex = layerIndex;
resultArray.push(feature);
});
this._featureResults = [
{
features: resultArray,
title: null,
grouped: false,
exceeded,
exceededCount
}
];
return;
}
})
.catch(() => {
this.empty = true;
return;
});
}))
?.then(() => {
this.accordion?.set("featureResults", this._featureResults);
this.empty = this._featureResults?.length === 0 || !this._featureResults ? true : false;
this.state = "ready";
this.accordion.state = "ready";
if (this._featureResults?.length > 0) {
this?.notice?.dismissNotice();
(0, a11yUtils_1.postToLiveRegion)(`${this._featureResults.length} results found`);
}
else if (this._featureResults.length === 0) {
// add a notice
this.addNotice();
}
})
.catch(() => {
this.empty = true;
this.state = "init";
});
}
}
addNotice() {
document.body.classList.remove("no-results");
if (!this.notice) {
this.notice = new Notification_1.default({
config: this.config,
view: this.view,
container: document.getElementById("noResults")
});
(0, reactiveUtils_1.when)(() => this?.notice?.rootNode, () => {
this.notice.showNotice();
this.notice.rootNode.addEventListener("calcitePanelClose", () => {
this.notice.showNotice();
this.clearResults();
const clearMapButton = document.getElementById("mapSearchButton");
clearMapButton?.click();
});
}, { initial: true });
}
this.notice?.showNotice();
document?.body?.classList?.add("map-alert");
(0, a11yUtils_1.postToLiveRegion)(this.config.appBundle.noFeatures);
}
async _queryFeatureLayers(layer, location) {
const controller = new AbortController();
try {
const layerView = await this.view.whenLayerView(layer);
// Perform query first time layer is done updating
//layerView.effect = null;
layerView.filter = null;
let results = null;
const queryLayer = this._getQueryLayer(layerView);
let excededCount = null;
const query = this._createQuery(layerView, location.geometry);
if (layer?.id === location?.layer?.id) {
results = {
features: [location],
title: layer?.title ? layer.title : null,
id: layer?.id ? layer.id : null
};
this.applyLayerEffectAndFilter(layerView, {
where: `${layer.objectIdField} = ${location.attributes[layer.objectIdField]} `
});
}
else {
results = await queryLayer.queryFeatures(query, {
signal: controller.signal
});
if (results.exceededTransferLimit) {
query.num = layer?.sourceJSON?.maxRecordCount || null;
excededCount = await queryLayer.queryFeatureCount(query);
}
if (results?.features?.length < 1) {
query.where = "1=0";
}
this.applyLayerEffectAndFilter(layerView, query);
}
return Promise.resolve({
features: results.features,
title: layer?.title ? layer.title : null,
id: layer?.id ? layer.id : null,
exceeded: results?.exceededTransferLimit,
exceededCount: excededCount
});
}
catch (error) {
return Promise.reject();
}
}
_createQuery(layer, location) {
const { units, spatialRelationship, enableSearchLayer, maxQueryNumber } = this.config;
const query = layer?.layer?.createQuery();
const geometryType = location?.type || null;
// Find features near point click
query.geometry = location;
if (!this.searchLayer && spatialRelationship !== "contains") {
query.distance = 0;
query.units = units;
}
if (maxQueryNumber && layer?.layer?.capabilities?.query?.supportsPagination) {
query.num = maxQueryNumber;
}
query.spatialRelationship = geometryType === "polygon" ? "contains" : "intersects";
if (enableSearchLayer && spatialRelationship !== null) {
query.spatialRelationship = spatialRelationship;
}
return query;
}
_getFeatureCount(results) {
let count = 0;
results &&
results.forEach((result) => {
if (result.features && result.features.length) {
count += result.features.length;
}
});
return count;
}
_clearElevation() {
if (this?.config?.showElevationProfile && this.elevationProfile) {
if (this.elevationProfile?.input) {
this.elevationProfile.input = null;
}
if (this.expand) {
this.expand.forEach((expand) => {
if (expand?.id === "elevation-profile-expand") {
this.view.ui.remove(expand);
}
});
}
}
}
_clearDirections() {
if (this.directions && this.directions.viewModel) {
this.directions.viewModel?.layer?.stops.removeAll();
this.directions.viewModel.reset();
if (this.expand) {
this.expand.forEach((expand) => {
if (expand?.id === "directions-expand") {
this.view.ui.remove(expand);
}
});
}
}
if (this.config.hideMap) {
const printPage = document.getElementById("printPanel");
printPage.classList.add("hide");
printPage.innerHTML = null;
}
}
_getQueryLayer(layerView) {
const lv = layerView;
const { hideMap, hideLayers, enableFilter, shareSelected } = this.config;
// Do we have find or select url params?
const queryParms = new URLSearchParams(window?.location?.search);
const find = queryParms?.get("find") || false;
const select = queryParms?.get("select") || false;
let returnlayer;
if (hideMap || hideLayers || find || shareSelected || enableFilter || select) {
returnlayer = layerView.layer;
}
else {
returnlayer = lv?.hasAllFeatures ? layerView : layerView.layer;
}
return returnlayer;
}
_updateDirections() {
let actionButton = null;
if (this.config.showDirections) {
if (this.directions || this.config.useDirectionsApp) {
if (this?.directions?.viewModel?.state === "ready" || this.config.useDirectionsApp) {
actionButton = {
icon: "road-sign",
id: "directions",
name: this?.config?.appBundle?.tools?.directions,
handleClick: this._eventHandler
};
this.updateStrings(actionButton, "tools.directions", "name");
this.updateStrings(actionButton, "tools.directions", "tip");
}
}
}
return actionButton;
}
_updateProfile() {
let actionButton = null;
if (this.config.showElevationProfile) {
actionButton = {
icon: "graph-time-series",
id: "elevationProfile",
name: this.config.appBundle.tools.elevation,
handleClick: this._eventHandler
};
this.updateStrings(actionButton, "tools.elevation", "name");
this.updateStrings(actionButton, "tools.elevation", "tip");
}
return actionButton;
}
_updateSingleShare() {
let actionButton = null;
if (this.config.shareSelected) {
actionButton = {
icon: "copyToClipboard",
id: "copyLink",
name: this.config.appBundle.copy.label,
tip: this.config.appBundle.copy.tip,
handleClick: this._eventHandler
};
this.updateStrings(actionButton, "copy.label", "name");
this.updateStrings(actionButton, "copy.tip", "tip");
}
return actionButton;
}
_updateZoomToAction() {
let actionButton = null;
if (this.config.interactiveResults) {
actionButton = {
icon: "layer-zoom-to",
id: "zoomToAction",
name: this.config.appBundle.zoom,
tip: this.config.appBundle.zoomTip,
handleClick: this._eventHandler
};
this.updateStrings(actionButton, "zoom", "name");
this.updateStrings(actionButton, "zoomTip", "tip");
}
return actionButton;
}
clearResults() {
this._toggle = false;
this.empty = true;
this.lookupGraphics.clearGraphics();
if (this?.scoreboard)
this.scoreboard.visible = false;
this.accordion && this.accordion.clear();
this._featureResults = [];
this.config.hideLayers
? (0, lookupLayerUtils_1.hideLookuplayers)(this.lookupLayers, this.view)
: (0, lookupLayerUtils_1.clearLookupLayers)(this.lookupLayers, this._presetEffects, this.view);
this._clearDirections();
this._clearElevation();
this.clearHighlights();
(0, utils_1.updateUrlParam)(["level", "find", "center"]);
this?.notice?.dismissNotice();
this.state = "init";
// hide the map button
const clearMapButton = document.getElementById("mapSearchButton");
if (clearMapButton)
clearMapButton?.classList.add("hide");
if (this?._highlightLayerView?.featureEffect) {
this._highlightLayerView.featureEffect = null;
const query = this._highlightLayerView.createQuery() || null;
this.applyLayerEffectAndFilter(this._highlightLayerView, query);
}
document.body.classList.remove("results-full-height");
if (this.config.showSelectedOnly) {
this?.config?.selectionVisibilityLayers?.forEach((l) => {
const layer = l;
layer.visible = true;
});
this.config.selectionVisibilityLayers = [];
}
}
updateStrings(widget, key, property) {
if (property) {
t9nUtils_1.autoUpdatedStrings.add({
obj: widget,
property,
bundleName: "lookup/app/t9n/common",
key: key
});
}
else {
t9nUtils_1.autoUpdatedStrings.add({
obj: widget,
property: "collapseTooltip",
bundleName: "lookup/app/t9n/common",
key: key
});
t9nUtils_1.autoUpdatedStrings.add({
obj: widget,
property: "expandTooltip",
bundleName: "lookup/app/t9n/common",
key: key
});
}
}
clearHighlights() {
this._handles.removeAll();
if (this?.view?.popup)
this.view.popup.features = null;
}
_highlightFeature(graphic) {
this.clearHighlights();
if (this?.view?.popup)
this.view.closePopup();
if (!this.config.interactiveResults)
return;
this.view?.whenLayerView(graphic?.layer).then((layerView) => {
// highlight feature
this._handles.add(layerView.highlight(graphic));
});
}
_zoomToFeature(graphic, useSearchLayer, zoomToLocation) {
let zoomGraphic = graphic;
if (this?.config?.enableSearchLayer &&
useSearchLayer &&
graphic?.geometry?.type === "polygon") {
zoomGraphic = this?.location || graphic;
}
const goToProps = (0, lookupLayerUtils_1.createGoToProps)(zoomGraphic, this.view, this.config);
if (this?.view.popup?.selectedFeature && !zoomToLocation) {
zoomGraphic = this.view.popup.selectedFeature;
}
this.view.goTo(goToProps).catch();
this._highlightFeature(graphic);
}
destroy() {
this.clearResults();
this.clearHighlights();
}
applyLayerEffectAndFilter(layerView, query) {
const { geometry, spatialRelationship, where } = query;
const { presetLayerEffects, applyLayerEffects, displayUnmatchedResults } = this.config;
const props = {
geometry,
spatialRelationship,
where
};
// Check for old effect types if new ones haven't been defined
let includedEffect, excludedEffect = null;
if (!applyLayerEffects) {
if (displayUnmatchedResults === "sepia") {
excludedEffect = "sepia(100%)";
}
else if (displayUnmatchedResults === "gray") {
excludedEffect = "grayscale(100%)";
}
else if (presetLayerEffects?.data?.includedEffect) {
includedEffect = (0, effects_1.getMergedEffect)(presetLayerEffects.data.includedEffect, layerView, "includedEffect");
excludedEffect = (0, effects_1.getMergedEffect)("opacity(0%)", layerView, "excludedEffect");
}
}
else if (applyLayerEffects) {
// do we have preset effects defined?
if (presetLayerEffects?.data?.includedEffect) {
includedEffect = (0, effects_1.getMergedEffect)(presetLayerEffects.data.includedEffect, layerView, "includedEffect");
}
if (presetLayerEffects?.data?.excludedEffect) {
excludedEffect = (0, effects_1.getMergedEffect)(presetLayerEffects.data.excludedEffect, layerView, "excludedEffect");
}
}
const filter = new FeatureFilter_1.default(props);
const effect = new FeatureEffect_1.default({
filter,
includedEffect,
excludedEffect
});
if (effect?.includedEffect || effect?.excludedEffect) {
layerView.featureEffect = effect;
}
else {
layerView.filter = filter;
}
}
createCountPage(count, exceeded) {
return ((0, widget_1.tsx)(CountPage, { view: this.view, accordion: this?.accordion, config: this.config, search: this?.searchWidget, count: count, exceeded: exceeded }));
}
createTogglePanel() {
const count = this._getFeatureCount(this._featureResults);
const toggleLinks = this._createToggleLinks();
const pdfAction = this.renderPDFAction();
const csvAction = this.renderCSVAction();
const noToggleToolsExist = toggleLinks || pdfAction || csvAction;
const isExpanded = document.body.classList.contains("results-full-height");
const toggleClass = !noToggleToolsExist && count <= 1 ? "no-tools" : null;
const { theme } = this.config;
let themeClass = theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
const resultCountDiv = count > 1 ? ((0, widget_1.tsx)("div", { key: "count-div", id: "countDiv", class: this.classes("total-count", "results") },
(0, widget_1.tsx)("calcite-icon", { class: this.classes(themeClass), scale: "s", textLabel: this.messages.tools.results, icon: "table" }),
this.messages.tools.results,
":",
count)) : null;
const renderMobileButton = ((0, widget_1.tsx)("calcite-button", { label: isExpanded ? this.messages.tools.shrinkPanel : this.messages.tools.expandPanel, onclick: () => {
document.body.classList.toggle("results-full-height");
}, class: "mobile-expand", kind: "neutral", appearance: "transparent", "icon-start": isExpanded ? "chevrons-down" : "chevrons-up" }));
return count || toggleLinks ? ((0, widget_1.tsx)("div", { class: this.classes(CSS.togglePanel, toggleClass) },
resultCountDiv,
(0, widget_1.tsx)("div", { class: "right-toggle-actions" },
renderMobileButton,
pdfAction,
csvAction,
toggleLinks))) : null;
}
renderCSVAction() {
const { exportCSV } = this.config;
return exportCSV ? ((0, widget_1.tsx)("calcite-button", { slot: "dropdown-trigger", class: "pdf-share", appearance: "transparent", kind: "neutral", "icon-start": "file-csv", onclick: () => {
(0, utils_1.exportCSVData)(this._featureResults);
}, scale: "m", title: this.config.bundle.tools.exportCSV })) : null;
}
renderPDFAction() {
const { exportToPDF, scalebar, exportButtonIcon, legend, hideMap, customTheme, applySharedTheme } = this.config;
const { logo } = (0, configUtils_1.getLogoOptions)(customTheme, this.portal, applySharedTheme);
return exportToPDF ? ((0, widget_1.tsx)("instant-apps-export", { class: "pdf-share", bind: this, showIncludePopup: false, showIncludeLegend: legend, showScaleBar: scalebar, showIncludeMap: !hideMap ? true : false, includeMap: !hideMap ? true : false, beforeExport: this.createExtraContent.bind(this), extraContent: document.getElementById("printPopupInfo"), showHeaderTitle: true, headerTitle: this?.config?.title, extraContentLabel: this.config.bundle.tools.screenshotResults, includeExtraContent: true, logoImage: logo, view: this.view, mode: "popover", popoverIcon: exportButtonIcon, scale: "s", includeFileFormat: true, onExportOutputUpdated: () => {
(0, printUtils_1.cleanupPrintPage)();
} })) : null;
}
createExtraContent() {
return new Promise((resolve) => {
const container = document.getElementById("printPopupInfo");
const resultContainer = document.getElementById("feature-container");
const features = resultContainer?.getElementsByClassName("feature-group");
container.innerHTML = null;
const countHeader = document.getElementById("resultCountBlock");
if (countHeader?.dataset?.title) {
const resultCount = document.createElement("div");
resultCount.innerHTML = `${countHeader?.dataset?.title}`;
}
const preText = document.getElementById("preText");
if (preText) {
container.append(preText.textContent);
}
for (var i = 0; i < features?.length; i++) {
const popupDiv = document.createElement("div");
popupDiv.style.width = "90vw";
popupDiv.style.margin = "auto";
popupDiv.classList.add("popup-content", "light");
container.append(popupDiv);
const feature = features[i].cloneNode(true);
const children = features[i].children;
let title = null;
for (let index = 0; index < children?.length; index++) {
const element = children[index];
if (element.getAttribute("data-title")) {
title = element.getAttribute("data-title");
}
if (title) {
const h = document.createElement("h2");
h.innerHTML = title;
popupDiv.append(h);
}
while (feature?.firstChild) {
popupDiv.append(feature.firstChild);
}
const rel = element?.querySelectorAll(".related-feature-block");
rel?.forEach((r) => {
if (r?.parentElement?.hasAttribute("hidden")) {
// Is it expanded? IF so don't show
return;
}
if (r?.hasAttribute("data-title")) {
const h2 = document.createElement("h2");
h2.innerHTML = r.getAttribute("data-title");
popupDiv.append(h2);
// are there list items
for (let index = 0; index < r?.children.length; index++) {
const element = r?.children[index];
for (let i = 0; i < element?.children.length; i++) {
const listItem = element?.children[i];
if (listItem?.hasAttribute("data-label")) {
const label = listItem.getAttribute("data-label")?.split(",");
if (label?.length === 2) {
const itemHead = document.createElement("div");
itemHead.innerHTML = label[0];
itemHead.classList.add("bold-font");
popupDiv.append(itemHead);
const itemDesc = document.createElement("div");
itemDesc.innerHTML = label[1];
popupDiv.append(itemDesc);
}
}
}
}
}
});
}
}
const postText = document.getElementById("postText");
if (postText) {
container.append(postText.textContent);
}
const popupCanvas = resultContainer?.querySelectorAll("canvas");
const popContCanvas = container.querySelectorAll("canvas");
popupCanvas.forEach((canvas, key) => {
const image = canvas.toDataURL();
const img = document.createElement("img");
img.src = image;
const style = canvas.getAttribute("style");
if (style) {
img.setAttribute("style", style);
}
const popCanvas = popContCanvas[key];
if (popCanvas != null) {
popCanvas.replaceWith(img);
if (document.querySelector("link[href*='esri/themes/dark/main.css']") &&
img.parentElement?.parentElement != null) {
img.parentElement.style.background = "#242424";
img.parentElement.parentElement.style.background = "#242424";
}
}
});
if (this?.config?.showScoreboard) {
const scoreboard = document.getElementById("scoreboard");
const scoreboardContainer = document.createElement("div");
scoreboardContainer.innerHTML = `
<div style="border-top: solid 1px #ddd;"><ul style="display:flex;justify-content:start;padding-left:0;list-style:none;flex-direction:column;">
${scoreboard?.items
?.map((item) => `<li><b>${item.label}</b>: ${item.value?.toFixed(2)}</li>`)
.join("")}
</ul></div>
`;
container.append(scoreboardContainer);
}
setTimeout(() => {
resolve();
}, 500);
});
}
_createToggleLinks() {
const { theme } = this.config;
let themeClass = theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
const buttonLabel = this._toggle ? this.messages.tools.collapse : this.messages.tools.open;
const buttonIcon = this._toggle ? "contract" : "expand";
return this?.accordion?.showToggle() ? ((0, widget_1.tsx)("calcite-button", { bind: this, class: this.classes(themeClass, "toggle-items-button"), kind: "neutral", appearance: "transparent", key: buttonLabel, title: buttonLabel, label: buttonLabel, onclick: this._toggleItems, "icon-start": buttonIcon, scale: "s" })) : null;
}
_toggleItems() {
this._toggle = !this._toggle;
// Open section
const elements = document?.getElementsByTagName("calcite-accordion-item");
for (let i = 0; i < elements.length; i++) {
this._toggle
? elements[i]?.setAttribute("expanded", "true")
: elements[i].removeAttribute("expanded");
}
if (!this?.config?.groupResultsByLayer) {
// collapse blocks
const elements = document?.getElementsByClassName("feature-group-block");
for (let i = 0; i < elements.length; i++) {
this._toggle
? elements[i]?.setAttribute("open", "true")
: elements[i].removeAttribute("open");
}
}
}
};
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "accordion", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "location", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "view", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "lookupGraphics", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "config", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "mapPanel", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "empty", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "lookupLayers", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "expand", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "directions", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "searchWidget", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "searchLayer", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "notice", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "portal", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "state", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "directionsReady", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "elevationReady", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "elevationProfile", void 0);
__decorate([
(0, decorators_1.property)()
], DisplayLookupResults.prototype, "scoreboard", void 0);
__decorate([
(0, decorators_1.property)(),
(0, widget_1.messageBundle)("lookup/app/t9n/common")
], DisplayLookupResults.prototype, "messages", void 0);
DisplayLookupResults = __decorate([
(0, decorators_1.subclass)("app.DisplayLookupResults")
], DisplayLookupResults);
exports.default = DisplayLookupResults;
});