@esri/solutions-components 0.7.23 → 0.7.24

package/dist/components/layer-list2.js

@@ -0,0 +1,268 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { c as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
+import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
+import { d as defineCustomElement$c } from './action.js';
+import { d as defineCustomElement$b } from './filter2.js';
+import { d as defineCustomElement$a } from './handle.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './input.js';
+import { d as defineCustomElement$7 } from './list.js';
+import { d as defineCustomElement$6 } from './list-item.js';
+import { d as defineCustomElement$5 } from './loader.js';
+import { d as defineCustomElement$4 } from './notice.js';
+import { d as defineCustomElement$3 } from './progress.js';
+import { d as defineCustomElement$2 } from './scrim.js';
+import { d as defineCustomElement$1 } from './stack.js';
+
+const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}";
+
+const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.layerSelect = createEvent(this, "layerSelect", 7);
+        this.layersListLoaded = createEvent(this, "layersListLoaded", 7);
+        this.mapView = undefined;
+        this.layers = undefined;
+        this.noLayerErrorMsg = undefined;
+        this._noLayersToDisplay = false;
+        this._mapLayerIds = [];
+        this._isLoading = false;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+        this._isLoading = true;
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        await this.setLayers();
+        this._isLoading = false;
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay && h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", null, this.renderLayerList())));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch the ids of the layers from the map
+     * @returns Promise when the operation has completed
+     * @protected
+     */
+    async setLayers() {
+        if (this.mapView) {
+            await this.initLayerHash();
+        }
+    }
+    /**
+     * Create a layer hash for layer name display
+     * @returns Promise when the operation has completed
+     * @protected
+     */
+    async initLayerHash() {
+        const def = [];
+        this._layerItemsHash = await getMapLayerHash(this.mapView, true);
+        const allMapLayers = await getAllLayers(this.mapView);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        allMapLayers.forEach(async (eachLayer) => {
+            var _a, _b;
+            //TODO: checking editable condition could be configurable
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsUpdate)) {
+                const q = eachLayer.createQuery();
+                const result = eachLayer.queryFeatureCount(q);
+                def.push(result);
+                void result.then(async (resCount) => {
+                    const formattedCount = !isNaN(resCount) ? await formatNumber(resCount, {
+                        places: 0,
+                        api: 4,
+                        type: "decimal"
+                    }) : "";
+                    this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
+                });
+            }
+        });
+        await Promise.all(def).then(() => {
+            const editableLayerIds = this.getEditableIds(this._layerItemsHash);
+            this._mapLayerIds = editableLayerIds.reverse();
+            this.handleNoLayersToDisplay();
+        }, () => {
+            this._mapLayerIds = [];
+            this.handleNoLayersToDisplay();
+        });
+    }
+    /**
+     * Set no layers to display state and emit event
+     */
+    handleNoLayersToDisplay() {
+        this._noLayersToDisplay = !(this._mapLayerIds.length > 0);
+        this.layersListLoaded.emit(this._mapLayerIds);
+    }
+    /**
+     * Returns the ids of all OR configured layers that support edits with the update capability
+     * @param hash each layer item details
+     * @returns array of layer ids
+     */
+    getEditableIds(hash) {
+        var _a;
+        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
+        return Object.keys(hash).reduce((prev, cur) => {
+            let showLayer = hash[cur].supportsUpdate;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsUpdate : false;
+            }
+            if (showLayer) {
+                prev.push(cur);
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Render feature layer list
+     * @returns layer list
+     * @protected
+     */
+    renderLayerList() {
+        return this._mapLayerIds.length > 0 && this._mapLayerIds.reduce((prev, layerId) => {
+            if (this._layerItemsHash[layerId]) {
+                prev.push(this.getLayerListItem(layerId));
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Get each item
+     * @param layerId Layer id
+     * @returns individual item
+     * @protected
+     */
+    getLayerListItem(layerId) {
+        const layerName = this._layerItemsHash[layerId].name;
+        const featureCount = this._layerItemsHash[layerId].formattedFeatureCount;
+        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.showFeaturesList(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), featureCount !== "" && h("div", { slot: "content-end" }, "(" + featureCount + ")"), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+    }
+    /**On click of layer list item show feature list
+     * @param layerId Layer id
+     * @protected
+     */
+    showFeaturesList(layerId) {
+        this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId].name });
+    }
+    /**
+     * Fetches the component's translations
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return this; }
+    static get style() { return layerListCss; }
+}, [0, "layer-list", {
+        "mapView": [16],
+        "layers": [16],
+        "noLayerErrorMsg": [1, "no-layer-error-msg"],
+        "_noLayersToDisplay": [32],
+        "_mapLayerIds": [32],
+        "_isLoading": [32],
+        "_translations": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["layer-list", "calcite-action", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-progress", "calcite-scrim", "calcite-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "layer-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayerList);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "calcite-filter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-handle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LayerList as L, defineCustomElement as d };