@esri/solutions-components 0.7.6 → 0.7.7

package/dist/components/instant-apps-filter-list.js

@@ -3,1166 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loadModules } from './loadModules2.js';
-import { g as getMessages } from './locale3.js';
-import { g as getMode } from './mode.js';
-import { d as defineCustomElement$o } from './action.js';
-import { d as defineCustomElement$n } from './action-menu.js';
-import { d as defineCustomElement$m } from './block.js';
-import { d as defineCustomElement$l } from './button.js';
-import { d as defineCustomElement$k } from './checkbox.js';
-import { d as defineCustomElement$j } from './chip.js';
-import { d as defineCustomElement$i } from './combobox.js';
-import { d as defineCustomElement$h } from './combobox-item.js';
-import { d as defineCustomElement$g } from './date-picker.js';
-import { d as defineCustomElement$f } from './date-picker-day.js';
-import { d as defineCustomElement$e } from './date-picker-month.js';
-import { d as defineCustomElement$d } from './date-picker-month-header.js';
-import { d as defineCustomElement$c } from './graph.js';
-import { d as defineCustomElement$b } from './handle.js';
-import { d as defineCustomElement$a } from './icon.js';
-import { d as defineCustomElement$9 } from './input-date-picker.js';
-import { d as defineCustomElement$8 } from './input-text.js';
-import { d as defineCustomElement$7 } from './loader.js';
-import { d as defineCustomElement$6 } from './panel.js';
-import { d as defineCustomElement$5 } from './popover.js';
-import { d as defineCustomElement$4 } from './progress.js';
-import { d as defineCustomElement$3 } from './scrim.js';
-import { d as defineCustomElement$2 } from './slider.js';
-
-const baseClassLight = 'instant-apps-filter-list calcite-mode-light';
-const baseClassDark = 'instant-apps-filter-list calcite-mode-dark';
-const supportedTypes = ['feature', 'geojson', 'wfs', 'csv', 'scene', 'subtype-group', 'point-cloud', 'map-image', 'sublayer'];
-
-function handleSingleQuote(value) {
-  return value.replaceAll("'", "''");
-}
-function convertToDate(date, includeTime = false) {
-  if (date) {
-    const tmpDate = new Date(date);
-    const formattedDate = `${tmpDate.getFullYear()}-${tmpDate.getMonth() + 1}-${tmpDate.getDate()}`;
-    if (includeTime) {
-      const time = `${tmpDate.getHours()}:${tmpDate.getMinutes()}:${tmpDate.getSeconds()}`;
-      return `${formattedDate} ${time}`;
-    }
-    else {
-      return formattedDate;
-    }
-  }
-  return;
-}
-function resetDatePicker(datePicker) {
-  var _a;
-  if (datePicker != null) {
-    datePicker.value = ['', ''];
-    const inputs = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-input');
-    if (inputs != null) {
-      for (const input of inputs) {
-        input.value = '';
-      }
-    }
-  }
-}
-
-const instantAppsFilterListCss = ":host{display:block}.instant-apps-filter-list *{box-sizing:border-box}.instant-apps-filter-list__container{height:100%}.instant-apps-filter-list__container calcite-block:last-of-type{margin-bottom:0}.instant-apps-filter-list__footer{padding:12px;display:flex}.instant-apps-filter-list__footer calcite-button:nth-child(2){margin-left:6px}.instant-apps-filter-list__item-container,.instant-apps-filter-list__item-container--user-input{display:flex;justify-content:space-between;align-items:center}.instant-apps-filter-list__item-container:not(:last-child),.instant-apps-filter-list__item-container--user-input:not(:last-child){padding-bottom:20px}.instant-apps-filter-list__item-container--user-input{margin:0;display:flex;flex-direction:column;align-items:flex-start}.instant-apps-filter-list__item-container--user-input>span{margin:0 0 6px;font-size:14px;font-weight:normal}.instant-apps-filter-list__item-container--user-input calcite-combobox{width:100%;font-size:16px}.instant-apps-filter-list__number-input-container{width:100%;display:flex;justify-content:center}.instant-apps-filter-list__number-input-container calcite-slider{width:90%}.instant-apps-filter-list__date-picker-input-container{display:flex;align-items:center;justify-content:unset;width:100%}.instant-apps-filter-list__date-picker-input-container calcite-action{height:48px;border-top:1px solid var(--calcite-ui-border-input);border-right:1px solid var(--calcite-ui-border-input);border-bottom:1px solid var(--calcite-ui-border-input)}.instant-apps-filter-list__title{margin-right:20px}.instant-apps-filter-list__title>p{font-size:14px;font-weight:normal;margin:0}.instant-apps-filter-list__checkbox-container{display:flex}.instant-apps-filter-list__checkbox-container calcite-checkbox{height:18px}.instant-apps-filter-list__operator-description{margin:0;--calcite-font-size--1:12px}.instant-apps-filter-list__zoom-to{display:flex;justify-content:flex-end;margin:8px 0 20px}.instant-apps-filter-list__zoom-to calcite-action{width:-moz-min-content;width:min-content}@media (prefers-reduced-motion){.instant-apps-filter-list calcite-loader{--calcite-internal-duration-factor:2;--calcite-internal-animation-timing-slow:calc(300ms * 2)}}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__header-container{background:#2b2b2b;color:#fff}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__operator-description{background:#353535}";
-
-const CSS = {
-    base: 'instant-apps-filter-list',
-    filterContainer: 'instant-apps-filter-list__container',
-    footer: 'instant-apps-filter-list__footer',
-    filterItemTitle: 'instant-apps-filter-list__title',
-    filterItemContainer: 'instant-apps-filter-list__item-container',
-    filterUIItemContainer: 'instant-apps-filter-list__item-container--user-input',
-    checkboxContainer: 'instant-apps-filter-list__checkbox-container',
-    numberInputContainer: 'instant-apps-filter-list__number-input-container',
-    dateInputContainer: 'instant-apps-filter-list__date-picker-input-container',
-    operatorDesc: 'instant-apps-filter-list__operator-description',
-    zoomTo: 'instant-apps-filter-list__zoom-to',
-};
-const InstantAppsFilterList$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsFilterList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.filterListReset = createEvent(this, "filterListReset", 7);
-        this.filterUpdate = createEvent(this, "filterUpdate", 7);
-        this.layerExpressions = undefined;
-        this.autoUpdateUrl = false;
-        this.closeBtn = false;
-        this.closeBtnOnClick = undefined;
-        this.closeBtnText = undefined;
-        this.openFilters = false;
-        this.extentSelector = false;
-        this.extentSelectorConfig = undefined;
-        this.urlParams = undefined;
-        this.view = undefined;
-        this.loading = undefined;
-        this.filterLayerExpressions = undefined;
-        this.messages = undefined;
-        this.baseClass = baseClassLight;
-        this.disabled = true;
-        this.hasLayerExpression = false;
-        this.initDefExpressions = undefined;
-        this.initMapImageExpressions = undefined;
-        this.initPointCloudFilters = undefined;
-    }
-    watchViewHandler() {
-        this.handleWhenView();
-    }
-    watchLayerExpressions() {
-        if (!this.hasLayerExpression) {
-            this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
-    }
-    async componentWillLoad() {
-        var _a;
-        this.baseClass = getMode(this.el) === 'dark' ? baseClassDark : baseClassLight;
-        await this.initializeModules();
-        getMessages(this);
-        this.hasLayerExpression = this.layerExpressions != null;
-        this.filterLayerExpressions = this.layerExpressions != null ? JSON.parse(JSON.stringify(this.layerExpressions)) : undefined;
-        this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
-        this.reactiveUtils.whenOnce(() => this.view).then(() => this.handleLayerExpressionsUpdate());
-    }
-    componentShouldUpdate(newValue, _oldValue, name) {
-        if (name === 'view' && newValue != null) {
-            this.handleWhenView();
-        }
-        else if (name === 'layerExpressions') {
-            if (this.hasLayerExpression) {
-                this.resetAllFilters();
-            }
-            this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
-    }
-    componentWillRender() {
-        var _a;
-        this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? undefined : true;
-    }
-    disconnectedCallback() {
-        this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
-        this.resetAllFilters();
-    }
-    async initializeModules() {
-        const [intl, geometryJsonUtils, reactiveUtils] = await loadModules(['esri/intl', 'esri/geometry/support/jsonUtils', 'esri/core/reactiveUtils']);
-        this.geometryJsonUtils = geometryJsonUtils;
-        this.reactiveUtils = reactiveUtils;
-        this.locale = intl.getLocale();
-        return Promise.resolve();
-    }
-    render() {
-        const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
-        const footer = this.closeBtn ? this.renderFullFooter() : this.renderFooter();
-        return (h(Host, null, h("calcite-panel", { class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { slot: "header-content", name: "filter-header-content" }), h("slot", { slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS.filterContainer }, filterConfig, footer))));
-    }
-    renderLoading() {
-        return h("calcite-loader", { label: "Loading filters..." });
-    }
-    renderFilter(layerExpression) {
-        const { id } = layerExpression;
-        return layerExpression.expressions.map((expression, index) => {
-            return expression.type == 'checkbox' || expression.type == null ? (h("div", { key: `${id}-${index}`, class: CSS.filterItemContainer }, h("div", { class: CSS.filterItemTitle }, h("p", null, expression.name)), h("div", { class: CSS.checkboxContainer }, h("calcite-checkbox", { id: expression.id.toString(), scale: "l", checked: expression === null || expression === void 0 ? void 0 : expression.active, onCalciteCheckboxChange: this.handleCheckboxChange.bind(this, layerExpression, expression) })))) : (this.initInput(layerExpression, expression));
-        });
-    }
-    renderLayerBlock() {
-        return this.filterLayerExpressions.map(layerExpression => {
-            return this.renderFilterBlocks(layerExpression);
-        });
-    }
-    renderFilterBlocks(layerExpression) {
-        var _a;
-        const filter = this.renderFilter(layerExpression);
-        const { operator } = layerExpression;
-        const operatorTranslation = (operator === null || operator === void 0 ? void 0 : operator.trim()) === 'OR' ? 'orOperator' : 'andOperator';
-        const zoomTo = this.renderZoomTo(layerExpression);
-        return (h("calcite-block", { key: layerExpression.id, heading: layerExpression.title, description: (_a = this.messages) === null || _a === void 0 ? void 0 : _a[operatorTranslation], open: this.openFilters ? true : undefined, collapsible: true }, zoomTo, filter));
-    }
-    renderCombobox(layerExpression, expression) {
-        var _a;
-        return (h("label", { key: "combo-select", class: CSS.filterUIItemContainer }, h("span", null, expression.name), h("calcite-combobox", { id: expression.id.toString(), onCalciteComboboxChange: this.handleComboSelect.bind(this, expression, layerExpression), label: expression.name, placeholder: expression.placeholder, overlayPositioning: "fixed", selectionMode: "multiple", scale: "s", "max-items": "6" }, (_a = expression.fields) === null || _a === void 0 ? void 0 : _a.map((value, index) => this.renderComboboxItem(expression, value, index)))));
-    }
-    renderComboboxItem(expression, value, index) {
-        var _a, _b;
-        let label = value;
-        if (expression.type === 'coded-value') {
-            label = (_a = expression.codedValues) === null || _a === void 0 ? void 0 : _a[value];
-        }
-        else if (expression.type === 'number' && typeof value === 'number' && expression.format != null) {
-            if (expression.format.places != null) {
-                label = this.roundNumber(value, expression.format.places);
-            }
-            if (expression.format.digitSeparator) {
-                label = this.numberWithCommas(label);
-            }
-        }
-        const selectedFields = expression === null || expression === void 0 ? void 0 : expression.selectedFields;
-        const selected = (_b = selectedFields === null || selectedFields === void 0 ? void 0 : selectedFields.includes(value)) !== null && _b !== void 0 ? _b : false;
-        return h("calcite-combobox-item", { key: `${label}-${index}`, value: value, textLabel: label, selected: selected });
-    }
-    initFilterConfig() {
-        var _a, _b;
-        if (((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            if (this.filterLayerExpressions.length === 1) {
-                const { operator } = this.filterLayerExpressions[0];
-                const operatorTranslation = (operator === null || operator === void 0 ? void 0 : operator.trim()) === 'OR' ? 'orOperator' : 'andOperator';
-                const zoomTo = this.renderZoomTo(this.filterLayerExpressions[0]);
-                return (h("calcite-block", { class: CSS.operatorDesc, heading: (_b = this.messages) === null || _b === void 0 ? void 0 : _b[operatorTranslation], open: true }, zoomTo, this.renderFilter(this.filterLayerExpressions[0])));
-            }
-            else if (this.filterLayerExpressions.length > 1) {
-                return this.renderLayerBlock();
-            }
-        }
-        return;
-    }
-    renderNumberSlider(layerExpression, expression) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const min = expression === null || expression === void 0 ? void 0 : expression.min;
-        const max = expression === null || expression === void 0 ? void 0 : expression.max;
-        const step = (expression === null || expression === void 0 ? void 0 : expression.step) ? expression.step : 1;
-        const check = min != null && max != null;
-        const field = (_a = expression === null || expression === void 0 ? void 0 : expression.field) !== null && _a !== void 0 ? _a : '';
-        const minValue = ((_b = expression === null || expression === void 0 ? void 0 : expression.range) === null || _b === void 0 ? void 0 : _b.min) != null ? expression.range.min : min;
-        const maxValue = ((_c = expression === null || expression === void 0 ? void 0 : expression.range) === null || _c === void 0 ? void 0 : _c.max) != null ? expression.range.max : max;
-        const value = [minValue, maxValue];
-        return check ? (h("label", { key: expression === null || expression === void 0 ? void 0 : expression.id.toString(), class: CSS.filterUIItemContainer }, h("span", null, expression === null || expression === void 0 ? void 0 : expression.name), h("div", { class: CSS.numberInputContainer }, h("calcite-slider", { id: expression === null || expression === void 0 ? void 0 : expression.id.toString(), onCalciteSliderChange: this.handleSliderChange.bind(this, expression, layerExpression), min: min, max: max, minValue: min, maxValue: max, "min-label": (_e = (_d = this.messages) === null || _d === void 0 ? void 0 : _d.minSlider) === null || _e === void 0 ? void 0 : _e.replace('{field}', field), "max-label": (_g = (_f = this.messages) === null || _f === void 0 ? void 0 : _f.maxSlider) === null || _g === void 0 ? void 0 : _g.replace('{field}', field), step: step, labelHandles: true, snap: true, value: value, "group-separator": (_h = expression === null || expression === void 0 ? void 0 : expression.format) === null || _h === void 0 ? void 0 : _h.digitSeparator })))) : undefined;
-    }
-    renderDatePicker(layerExpression, expression) {
-        var _a, _b, _c, _d;
-        const min = convertToDate(expression.min);
-        const max = convertToDate(expression.max);
-        const value = [(_a = expression === null || expression === void 0 ? void 0 : expression.range) === null || _a === void 0 ? void 0 : _a.min, (_b = expression === null || expression === void 0 ? void 0 : expression.range) === null || _b === void 0 ? void 0 : _b.max];
-        const check = min != null && max != null;
-        return check ? (h("label", { class: CSS.filterUIItemContainer }, h("span", null, expression === null || expression === void 0 ? void 0 : expression.name), h("div", { class: CSS.dateInputContainer }, h("calcite-input-date-picker", { id: expression === null || expression === void 0 ? void 0 : expression.id.toString(), onCalciteInputDatePickerChange: this.handleDatePickerRangeChange.bind(this, expression, layerExpression), min: min, max: max, scale: "s", lang: (_c = this.locale) !== null && _c !== void 0 ? _c : 'en', "overlay-positioning": "fixed", layout: "vertical", value: value, range: true }), h("calcite-action", { onClick: this.handleResetDatePicker.bind(this, expression, layerExpression), icon: "reset", text: (_d = this.messages) === null || _d === void 0 ? void 0 : _d.resetDatePicker, scale: "s" })))) : null;
-    }
-    renderFooter() {
-        var _a;
-        return (h("div", { class: CSS.footer, slot: "footer" }, h("calcite-button", { appearance: "outline", width: "full", disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.resetFilter)));
-    }
-    renderFullFooter() {
-        var _a, _b, _c;
-        const closeText = this.closeBtnText != null ? this.closeBtnText : (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close;
-        return (h("div", { class: CSS.footer, slot: "footer" }, h("calcite-button", { appearance: "outline", width: "half", disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.resetFilter), h("calcite-button", { appearance: "solid", width: "half", kind: "brand", onClick: (_c = this.closeBtnOnClick) === null || _c === void 0 ? void 0 : _c.bind(this) }, closeText)));
-    }
-    renderZoomTo(layerExpression) {
-        var _a;
-        const id = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `zoom-to-${layerExpression.id}`;
-        return (h("div", { class: CSS.zoomTo }, h("calcite-button", { id: id, appearance: "transparent", kind: "neutral", scale: "s", iconStart: "magnifying-glass-plus", onClick: this.handleZoomTo.bind(this, layerExpression) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.zoomTo)));
-    }
-    handleResetDatePicker(expression, layerExpression) {
-        const datePicker = this.panelEl.querySelector(`[id='${expression.id}']`);
-        resetDatePicker(datePicker);
-        expression.active = false;
-        expression.definitionExpression = undefined;
-        expression.range = undefined;
-        this.generateOutput(layerExpression);
-    }
-    initInput(layerExpression, expression) {
-        const { type } = expression;
-        if (type === 'string' || type == 'coded-value') {
-            return this.renderCombobox(layerExpression, expression);
-        }
-        else if (type === 'number' || type == 'range') {
-            if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
-                return this.renderCombobox(layerExpression, expression);
-            }
-            return this.renderNumberSlider(layerExpression, expression);
-        }
-        else if (type === 'date') {
-            return this.renderDatePicker(layerExpression, expression);
-        }
-        return;
-    }
-    async initExpressions() {
-        this.loading = true;
-        if (this.filterLayerExpressions == null)
-            return;
-        const tmpLE = this.filterLayerExpressions;
-        for (let i = 0; i < (tmpLE === null || tmpLE === void 0 ? void 0 : tmpLE.length); i++) {
-            const expressions = tmpLE[i].expressions;
-            for (let j = 0; j < (expressions === null || expressions === void 0 ? void 0 : expressions.length); j++) {
-                if (expressions[j].active == null && expressions[j].definitionExpression != null) {
-                    expressions[j].active = false;
-                }
-                await this.setInitExpression(tmpLE[i], expressions[j]);
-            }
-        }
-        this.loading = false;
-        this.filterLayerExpressions = [...tmpLE];
-    }
-    handleResetFilter() {
-        var _a;
-        (_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.forEach(layerExpression => {
-            var _a;
-            (_a = layerExpression.expressions) === null || _a === void 0 ? void 0 : _a.forEach(expression => {
-                const { type } = expression;
-                if (type === 'string' || type === 'coded-value') {
-                    this.resetCombobox(expression);
-                }
-                else if (type === 'date') {
-                    this.resetDatePicker(expression);
-                }
-                else if (type === 'number' || type === 'range') {
-                    if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
-                        this.resetCombobox(expression);
-                    }
-                    else {
-                        this.resetNumberRange(expression);
-                    }
-                }
-                else {
-                    this.resetCheckbox(expression);
-                }
-                expression.active = false;
-            });
-        });
-        this.resetAllFilters();
-        this.generateURLParams();
-        this.filterListReset.emit();
-    }
-    resetCombobox(expression) {
-        const { id } = expression;
-        expression.selectedFields = undefined;
-        const combobox = this.panelEl.querySelector(`[id='${id}']`);
-        if (combobox != null) {
-            for (let i = 0; i < combobox.children.length; i++) {
-                const comboboxItem = combobox.children[i];
-                comboboxItem.selected = false;
-            }
-        }
-    }
-    resetDatePicker(expression) {
-        const { id } = expression;
-        expression.range = undefined;
-        const datePicker = this.panelEl.querySelector(`[id='${id}']`);
-        resetDatePicker(datePicker);
-    }
-    resetNumberRange(expression) {
-        expression.range = undefined;
-        const { id, max, min } = expression;
-        const slider = this.panelEl.querySelector(`[id='${id}']`);
-        if (slider != null) {
-            slider.minValue = min;
-            slider.maxValue = max;
-        }
-    }
-    resetCheckbox(expression) {
-        const { id } = expression;
-        const checkbox = this.panelEl.querySelector(`[id='${id}']`);
-        if (checkbox != null) {
-            checkbox.checked = false;
-        }
-    }
-    resetAllFilters() {
-        var _a, _b, _c;
-        (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.allLayers) === null || _c === void 0 ? void 0 : _c.forEach(layer => {
-            var _a, _b;
-            if (supportedTypes.includes(layer.type)) {
-                const fl = layer;
-                if (fl.type === 'point-cloud') {
-                    fl.filters = (_a = this.initPointCloudFilters) === null || _a === void 0 ? void 0 : _a[fl.id];
-                }
-                else if (fl.type === 'map-image') {
-                    fl.allSublayers.forEach(sublayer => {
-                        var _a, _b;
-                        sublayer.definitionExpression = (_b = (_a = this.initMapImageExpressions) === null || _a === void 0 ? void 0 : _a[fl.id]) === null || _b === void 0 ? void 0 : _b[sublayer.id];
-                    });
-                }
-                else {
-                    fl.definitionExpression = (_b = this.initDefExpressions) === null || _b === void 0 ? void 0 : _b[fl.id];
-                }
-            }
-        });
-    }
-    async updateStringExpression(layerExpression, expression) {
-        const { field } = expression;
-        const layer = this.findFilterLayer(layerExpression);
-        expression.fields = await this.getFeatureAttributes(layer, field);
-        if (expression === null || expression === void 0 ? void 0 : expression.selectedFields) {
-            const selectedFields = expression.selectedFields.map((field) => (typeof field === 'number' ? field : `'${handleSingleQuote(field)}'`));
-            expression.definitionExpression = `${field} IN (${selectedFields.join(',')})`;
-            return Promise.resolve(true);
-        }
-        return Promise.resolve(false);
-    }
-    async updateNumberExpression(layerExpression, expression) {
-        var _a, _b;
-        if ((!(expression === null || expression === void 0 ? void 0 : expression.min) && (expression === null || expression === void 0 ? void 0 : expression.min) !== 0) || (!(expression === null || expression === void 0 ? void 0 : expression.max) && (expression === null || expression === void 0 ? void 0 : expression.max) !== 0)) {
-            const layer = this.findFilterLayer(layerExpression);
-            const { field } = expression;
-            if (field != null) {
-                this.setExpressionFormat(layer, expression, field);
-                if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
-                    const fields = (await this.getFeatureAttributes(layer, field));
-                    fields.sort((a, b) => a - b);
-                    expression.fields = fields;
-                }
-                else {
-                    const graphic = await this.calculateMinMaxStatistics(layer, field);
-                    const attributes = (_a = graphic === null || graphic === void 0 ? void 0 : graphic[0]) === null || _a === void 0 ? void 0 : _a.attributes;
-                    if (((_b = expression.format) === null || _b === void 0 ? void 0 : _b.places) != null) {
-                        expression.min = this.roundMinNumberDown(attributes[`min${field}`], expression.format.places);
-                        expression.max = this.roundMaxNumberUp(attributes[`max${field}`], expression.format.places);
-                    }
-                    else {
-                        expression.min = attributes[`min${field}`];
-                        expression.max = attributes[`max${field}`];
-                    }
-                    if ((expression === null || expression === void 0 ? void 0 : expression.range) && Object.keys(expression.range).length) {
-                        const { min, max } = expression.range;
-                        expression.definitionExpression = `${expression.field} BETWEEN ${min} AND ${max}`;
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    }
-    async updateDateExpression(layerExpression, expression) {
-        var _a;
-        const { field, range } = expression;
-        const layer = this.findFilterLayer(layerExpression);
-        const graphic = await this.calculateMinMaxStatistics(layer, field);
-        const attributes = (_a = graphic === null || graphic === void 0 ? void 0 : graphic[0]) === null || _a === void 0 ? void 0 : _a.attributes;
-        expression.min = convertToDate(attributes[`min${field}`]);
-        expression.max = convertToDate(attributes[`max${field}`]);
-        if (range != null && ((range === null || range === void 0 ? void 0 : range.max) != null || (range === null || range === void 0 ? void 0 : range.min) != null)) {
-            let { min, max } = range;
-            min = min === null || min === void 0 ? void 0 : min.replace('+', ' ');
-            max = max === null || max === void 0 ? void 0 : max.replace('+', ' ');
-            if (min || max) {
-                const chevron = max && !min ? '<' : !max && min ? '>' : null;
-                if (chevron) {
-                    expression.definitionExpression = `${field} ${chevron} '${min !== null && min !== void 0 ? min : max}'`;
-                }
-                else {
-                    expression.definitionExpression = `${field} BETWEEN '${min}' AND '${max}'`;
-                }
-                return true;
-            }
-        }
-        return false;
-    }
-    updateCodedValueExpression(expression, layerField) {
-        var _a;
-        const { field } = expression;
-        const fields = [];
-        expression.codedValues = {};
-        const domain = layerField === null || layerField === void 0 ? void 0 : layerField.domain;
-        (_a = domain === null || domain === void 0 ? void 0 : domain.codedValues) === null || _a === void 0 ? void 0 : _a.forEach(cv => {
-            const { code, name } = cv;
-            fields.push(code);
-            if (expression.codedValues != null) {
-                expression.codedValues[code] = name;
-            }
-        });
-        expression.fields = fields;
-        if (expression === null || expression === void 0 ? void 0 : expression.selectedFields) {
-            const selectedFields = expression.selectedFields.map((field) => (typeof field === 'number' ? field : `'${handleSingleQuote(field)}'`));
-            const definitionExpression = `${field} IN (${selectedFields.join(',')})`;
-            expression.definitionExpression = definitionExpression;
-            return true;
-        }
-        return false;
-    }
-    updateRangeExpression(expression, layerField) {
-        const { field, range } = expression;
-        const domain = layerField === null || layerField === void 0 ? void 0 : layerField.domain;
-        expression.min = domain === null || domain === void 0 ? void 0 : domain.minValue;
-        expression.max = domain === null || domain === void 0 ? void 0 : domain.maxValue;
-        if (range && Object.keys(range).length) {
-            const { min, max } = range;
-            const definitionExpression = `${field} BETWEEN ${min} AND ${max}`;
-            expression.definitionExpression = definitionExpression;
-            return true;
-        }
-        return false;
-    }
-    async getFeatureAttributes(layer, field) {
-        var _a, _b, _c;
-        if (layer && supportedTypes.includes(layer.type)) {
-            const query = layer.createQuery();
-            if ((_b = (_a = layer === null || layer === void 0 ? void 0 : layer.capabilities) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b['supportsCacheHint']) {
-                query.cacheHint = true;
-            }
-            if (field) {
-                const initDefExpr = this.getInitDefExprFromLayer(layer);
-                query.where = initDefExpr || '1=1';
-                query.outFields = [field];
-                query.orderByFields = [`${field} DESC`];
-                query.returnDistinctValues = true;
-                query.returnGeometry = false;
-                query.maxRecordCountFactor = 3;
-                if (this.extentSelector && this.extentSelectorConfig) {
-                    const geo = this.getExtent(this.extentSelector, this.extentSelectorConfig);
-                    if (geo != null)
-                        query.geometry = geo;
-                    query.spatialRelationship = 'intersects';
-                }
-                return (_c = (await this.queryForFeatures(layer, query, field))) === null || _c === void 0 ? void 0 : _c.sort();
-            }
-        }
-        return [];
-    }
-    async queryForFeatures(layer, query, field) {
-        const results = await layer.queryFeatures(query);
-        const features = results === null || results === void 0 ? void 0 : results.features.filter(feature => { var _a; return (_a = feature.attributes) === null || _a === void 0 ? void 0 : _a[field]; });
-        return features === null || features === void 0 ? void 0 : features.map(feature => { var _a; return (_a = feature.attributes) === null || _a === void 0 ? void 0 : _a[field]; });
-    }
-    async calculateMinMaxStatistics(layer, field) {
-        var _a, _b;
-        if (layer && supportedTypes.includes(layer.type)) {
-            const query = layer.createQuery();
-            let initDefExpr = this.getInitDefExprFromLayer(layer);
-            query.where = initDefExpr || '1=1';
-            if ((_b = (_a = layer === null || layer === void 0 ? void 0 : layer.capabilities) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.supportsCacheHint) {
-                query.cacheHint = true;
-            }
-            if (field) {
-                const tmp = [
-                    {
-                        onStatisticField: field,
-                        outStatisticFieldName: `max${field}`,
-                        statisticType: 'max',
-                    },
-                    {
-                        onStatisticField: field,
-                        outStatisticFieldName: `min${field}`,
-                        statisticType: 'min',
-                    },
-                ];
-                query.outStatistics = tmp;
-                if (this.extentSelector && this.extentSelectorConfig) {
-                    const geo = this.getExtent(this.extentSelector, this.extentSelectorConfig);
-                    if (geo != null) {
-                        query.geometry = geo;
-                    }
-                    query.spatialRelationship = 'intersects';
-                }
-                const results = await layer.queryFeatures(query);
-                return results === null || results === void 0 ? void 0 : results.features;
-            }
-        }
-        return [];
-    }
-    getExtent(extentSelector, extentSelectorConfig) {
-        if (extentSelector && extentSelectorConfig) {
-            const { constraints } = extentSelectorConfig;
-            let newConstraints = Object.assign({}, constraints);
-            const geometry = newConstraints === null || newConstraints === void 0 ? void 0 : newConstraints.geometry;
-            if (geometry) {
-                const tmpExtent = this.geometryJsonUtils.fromJSON(geometry);
-                if (tmpExtent && ((tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'extent' || (tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'polygon')) {
-                    return tmpExtent;
-                }
-            }
-        }
-        return;
-    }
-    setInitExpression(layerExpression, expression) {
-        if (expression.field && expression.type) {
-            const filterLayer = this.findFilterLayer(layerExpression);
-            if (filterLayer == null) {
-                return Promise.resolve();
-            }
-            if (filterLayer.loadStatus === 'not-loaded' || filterLayer.loadStatus === 'failed') {
-                filterLayer.load();
-            }
-            return filterLayer.when(async () => {
-                var _a, _b;
-                const layerField = (_a = filterLayer.fields) === null || _a === void 0 ? void 0 : _a.find(({ name }) => name === expression.field);
-                const domainType = (_b = layerField === null || layerField === void 0 ? void 0 : layerField.domain) === null || _b === void 0 ? void 0 : _b.type;
-                expression.type = domainType === 'coded-value' || domainType === 'range' ? domainType : expression.type;
-                await this.updateExpression(layerExpression, expression, layerField);
-            });
-        }
-        else {
-            this.updateExpression(layerExpression, expression, undefined);
-            return Promise.resolve();
-        }
-    }
-    async updateExpression(layerExpression, expression, layerField) {
-        let update = false;
-        const { type } = expression;
-        if (type === 'string') {
-            update = await this.updateStringExpression(layerExpression, expression);
-        }
-        else if (type === 'number') {
-            update = await this.updateNumberExpression(layerExpression, expression);
-        }
-        else if (type === 'date') {
-            update = await this.updateDateExpression(layerExpression, expression);
-        }
-        else if (type === 'coded-value') {
-            update = this.updateCodedValueExpression(expression, layerField);
-        }
-        else if (type === 'range') {
-            update = this.updateRangeExpression(expression, layerField);
-        }
-        else if (expression.active && (type === 'checkbox' || type == null)) {
-            update = true;
-        }
-        if (update) {
-            this.generateOutput(layerExpression);
-        }
-    }
-    updateRangeExpressions(expression, layerExpression, max, min) {
-        const initExp = this.getInitDefExprFromLayerExpression(layerExpression);
-        if ((min || min === 0) && (max || max === 0)) {
-            if (min === (expression === null || expression === void 0 ? void 0 : expression.min) && max === (expression === null || expression === void 0 ? void 0 : expression.max)) {
-                expression.definitionExpression = undefined;
-                expression.active = false;
-            }
-            else {
-                expression.definitionExpression = initExp ? `(${initExp}) AND ${expression === null || expression === void 0 ? void 0 : expression.field} BETWEEN ${min} AND ${max}` : `${expression === null || expression === void 0 ? void 0 : expression.field} BETWEEN ${min} AND ${max}`;
-                expression.active = true;
-            }
-        }
-        expression.range = { min, max };
-    }
-    handleCheckboxChange(layerExpression, expression, event) {
-        const node = event.target;
-        expression.active = node.checked;
-        this.generateOutput(layerExpression);
-    }
-    handleSliderChange(expression, layerExpression, event) {
-        const { maxValue, minValue } = event.target;
-        this.updateRangeExpressions(expression, layerExpression, maxValue, minValue);
-        this.generateOutput(layerExpression);
-    }
-    handleComboSelect(expression, layerExpression, event) {
-        const combobox = event.target;
-        const items = combobox.selectedItems;
-        const { field } = expression;
-        if (items && items.length) {
-            const values = items.map(({ value }) => (typeof value === 'number' ? value : `'${handleSingleQuote(value)}'`));
-            expression.selectedFields = items.map(({ value }) => value);
-            const definitionExpression = `${field} IN (${values.join(',')})`;
-            expression.definitionExpression = definitionExpression;
-            expression.active = true;
-        }
-        else {
-            expression.definitionExpression = undefined;
-            expression.active = false;
-        }
-        this.generateOutput(layerExpression);
-    }
-    handleDatePickerRangeChange(expression, layerExpression, event) {
-        const datePicker = event.target;
-        const [startDate, endDate] = datePicker.valueAsDate;
-        const start = startDate != null ? convertToDate(Math.floor(startDate.getTime()), true) : undefined;
-        const end = endDate != null ? convertToDate(Math.floor(endDate.getTime()), true) : undefined;
-        if (start != null || end != null) {
-            const chevron = end && start == null ? '<' : end == null && start ? '>' : null;
-            if (chevron) {
-                expression.definitionExpression = `${expression.field} ${chevron} '${start !== null && start !== void 0 ? start : end}'`;
-            }
-            else {
-                expression.definitionExpression = `${expression.field} BETWEEN '${start}' AND '${end}'`;
-            }
-            expression.range = { min: start, max: end };
-            expression.active = true;
-            this.generateOutput(layerExpression);
-        }
-    }
-    handleURLParams() {
-        var _a;
-        if ('URLSearchParams' in window) {
-            const params = new URLSearchParams(document.location.search);
-            const filters = (_a = params.get('filter')) === null || _a === void 0 ? void 0 : _a.split(';');
-            filters === null || filters === void 0 ? void 0 : filters.forEach(filter => {
-                var _a;
-                const tmpFilter = JSON.parse(filter);
-                (_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.forEach(layerExpression => {
-                    var _a;
-                    if ((tmpFilter === null || tmpFilter === void 0 ? void 0 : tmpFilter.layerId) === layerExpression.id) {
-                        (_a = layerExpression.expressions) === null || _a === void 0 ? void 0 : _a.forEach(expression => {
-                            var _a, _b;
-                            if (((_a = expression.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_b = tmpFilter === null || tmpFilter === void 0 ? void 0 : tmpFilter.expressionId) === null || _b === void 0 ? void 0 : _b.toString())) {
-                                expression.active = true;
-                                if (tmpFilter.type === 'range') {
-                                    expression.range = tmpFilter.range;
-                                }
-                                else if (tmpFilter.type === 'select') {
-                                    expression.selectedFields = tmpFilter.selectedFields;
-                                }
-                            }
-                        });
-                    }
-                });
-            });
-        }
-    }
-    createURLParamExpression(layerExpression, expression) {
-        const { id, range, selectedFields, type } = expression;
-        if (type === 'number' || type === 'range' || type === 'date') {
-            return {
-                type: 'range',
-                layerId: layerExpression.id,
-                expressionId: id.toString(),
-                range,
-            };
-        }
-        else if (type === 'string' || type === 'coded-value') {
-            return {
-                type: 'select',
-                layerId: layerExpression.id,
-                expressionId: id.toString(),
-                selectedFields,
-            };
-        }
-        else {
-            return {
-                layerId: layerExpression.id,
-                expressionId: id.toString(),
-            };
-        }
-    }
-    autoUpdateURLCheck(params) {
-        if (this.autoUpdateUrl) {
-            if (params.toString()) {
-                window.history.replaceState({}, '', `${window.location.pathname}?${params} `);
-            }
-            else {
-                window.history.replaceState({}, '', window.location.pathname);
-            }
-        }
-    }
-    generateURLParams() {
-        var _a;
-        if ('URLSearchParams' in window) {
-            const params = new URLSearchParams(window.location.search);
-            const expressions = [];
-            (_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.forEach(layerExpr => {
-                var _a;
-                (_a = layerExpr === null || layerExpr === void 0 ? void 0 : layerExpr.expressions) === null || _a === void 0 ? void 0 : _a.forEach(expression => {
-                    if (expression.active) {
-                        const paramExpression = this.createURLParamExpression(layerExpr, expression);
-                        expressions.push(JSON.stringify(paramExpression));
-                    }
-                });
-            });
-            if (expressions.length > 0) {
-                params.set('filter', expressions.join(';'));
-            }
-            else {
-                params.delete('filter');
-            }
-            this.autoUpdateURLCheck(params);
-            this.urlParams = params;
-        }
-    }
-    updateFilter(layerExpression, defExpressions, filters) {
-        const { id } = layerExpression;
-        const fl = this.view.map.findLayerById(id);
-        if (fl != null) {
-            if (fl.type === 'point-cloud') {
-                this.updateFilterLayerPCLFilter(fl, filters);
-            }
-            else if (fl.type === 'map-image') {
-                const sublayer = fl.findSublayerById(layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId);
-                if (sublayer != null) {
-                    this.updateFilterLayerDefExpression(sublayer, defExpressions, layerExpression);
-                }
-            }
-            else {
-                this.updateFilterLayerDefExpression(fl, defExpressions, layerExpression);
-            }
-        }
-    }
-    updateFilterLayerDefExpression(layer, defExpressions, layerExpression) {
-        const { operator } = layerExpression;
-        let initDefExpressions = this.getInitDefExprFromLayer(layer);
-        const combinedExpressions = (defExpressions === null || defExpressions === void 0 ? void 0 : defExpressions.length) > 0 && initDefExpressions != null
-            ? `(${defExpressions.join(operator)}) AND (${initDefExpressions})`
-            : defExpressions.length > 0
-                ? defExpressions.join(operator)
-                : initDefExpressions;
-        layer.definitionExpression = combinedExpressions;
-    }
-    updateFilterLayerPCLFilter(layer, filters) {
-        layer.filters = filters;
-    }
-    async handleWhenView() {
-        if (this.view == null)
-            return;
-        const map = this.view.map;
-        await map.loadAll();
-        this.handleLayerExpressionsUpdate();
-    }
-    async handleLayerExpressionsUpdate() {
-        if (this.view == null)
-            return;
-        const map = this.view.map;
-        this.initDefExpressions = {};
-        this.initPointCloudFilters = {};
-        this.initMapImageExpressions = {};
-        for (let i = 0; i < map.allLayers.length; i++) {
-            const layer = map.allLayers.getItemAt(i);
-            if (supportedTypes.includes(layer.type)) {
-                const fl = layer;
-                if (fl.type === 'point-cloud') {
-                    this.initPointCloudFilters[fl.id] = fl.filters;
-                }
-                else if (fl.type === 'map-image') {
-                    this.initMapImageExpressions[fl.id] = {};
-                    fl.allSublayers.forEach(sublayer => {
-                        this.initMapImageExpressions[fl.id][sublayer.id] = sublayer.definitionExpression;
-                    });
-                }
-                else {
-                    this.initDefExpressions[fl.id] = fl.definitionExpression;
-                }
-            }
-        }
-        this.initExpressions();
-        this.handleURLParams();
-    }
-    async handleZoomTo(layerExpression) {
-        const zoomId = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `#zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `#zoom-to-${layerExpression.id}`;
-        const zoomToBtn = this.panelEl.querySelector(zoomId);
-        if (zoomToBtn != null) {
-            zoomToBtn.loading = true;
-        }
-        this.zoomToGraphics = [];
-        let loadingTime = 0;
-        let startGoTo = false;
-        const zoomToInterval = setInterval(() => {
-            if (loadingTime >= 1000 && startGoTo) {
-                this.view.goTo(this.zoomToGraphics);
-                if (zoomToBtn != null) {
-                    zoomToBtn.loading = false;
-                }
-                clearInterval(zoomToInterval);
-            }
-            loadingTime += 500;
-        }, 500);
-        await this.getZoomToGraphics(layerExpression);
-        startGoTo = true;
-    }
-    async getZoomToGraphics(layerExpression) {
-        var _a, _b, _c, _d, _e;
-        const lv = this.view.allLayerViews.find(({ layer }) => layer.id === layerExpression.id);
-        const layer = lv.layer;
-        const queryLayer = layer.type === 'map-image' ? layer.findSublayerById(layerExpression.sublayerId) : layer;
-        if (queryLayer.type !== 'point-cloud' && supportedTypes.includes(queryLayer === null || queryLayer === void 0 ? void 0 : queryLayer.type)) {
-            const query = queryLayer.createQuery();
-            if ((_b = (_a = layer === null || layer === void 0 ? void 0 : layer.capabilities) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b['supportsCacheHint']) {
-                query.cacheHint = true;
-            }
-            query.where = (_c = queryLayer.definitionExpression) !== null && _c !== void 0 ? _c : '1=1';
-            query.returnGeometry = true;
-            query.returnDistinctValues = true;
-            query.maxRecordCountFactor = 3;
-            query.returnExceededLimitFeatures = true;
-            query.outFields = [];
-            if (this.extentSelector && this.extentSelectorConfig) {
-                const geo = this.getExtent(this.extentSelector, this.extentSelectorConfig);
-                if (geo != null)
-                    query.geometry = geo;
-                query.spatialRelationship = 'intersects';
-            }
-            const filter = ((_d = lv === null || lv === void 0 ? void 0 : lv.featureEffect) === null || _d === void 0 ? void 0 : _d.filter) != null ? lv.featureEffect.filter : lv.filter;
-            if (filter != null) {
-                if (filter.objectIds != null) {
-                    query.objectIds = filter.objectIds;
-                }
-                if (filter.distance != null) {
-                    query.distance = filter.distance;
-                }
-                if (filter.geometry != null) {
-                    query.geometry = filter.geometry;
-                }
-                if (filter.distance != null) {
-                    query.distance = filter.distance;
-                }
-                if (filter.spatialRelationship != null) {
-                    query.spatialRelationship = filter.spatialRelationship;
-                }
-                if (filter.units != null) {
-                    query.units = filter.units;
-                }
-                if (filter.where != null) {
-                    query.where = filter.where;
-                }
-                if (filter.timeExtent != null) {
-                    query.timeExtent = filter.timeExtent;
-                }
-            }
-            try {
-                const results = await queryLayer.queryFeatures(query);
-                this.zoomToGraphics.push(...results.features);
-            }
-            catch (error) {
-                if ((_e = error === null || error === void 0 ? void 0 : error.message) === null || _e === void 0 ? void 0 : _e.toLowerCase().includes('distinct')) {
-                    try {
-                        query.returnDistinctValues = false;
-                        const results = await queryLayer.queryFeatures(query);
-                        this.zoomToGraphics.push(...results.features);
-                    }
-                    catch (_f) { }
-                }
-            }
-        }
-        return Promise.resolve();
-    }
-    generateOutput(layerExpression) {
-        if (this.view == null)
-            return;
-        const defExpressions = [];
-        let filters = [];
-        if (layerExpression) {
-            for (const expression of layerExpression.expressions) {
-                const { active, definitionExpression, pointCloudFilters } = expression;
-                if (active && definitionExpression) {
-                    defExpressions.push(`(${definitionExpression})`);
-                }
-                if (active && pointCloudFilters != null && pointCloudFilters.length > 0) {
-                    filters = filters.concat(pointCloudFilters);
-                }
-            }
-            this.updateFilter(layerExpression, defExpressions, filters);
-            this.generateURLParams();
-            this.filterUpdate.emit();
-        }
-    }
-    numberWithCommas(num) {
-        return num.toLocaleString('en-US', { maximumFractionDigits: 20 });
-    }
-    // If fieldInfo.format.places limits decimal digits then use this for min value to make sure the min is actually included in slider.
-    // e.g. when using Math.round() with a min of 1.058 with only 2 decimal places would be 1.06 so the slider wouldn't contain the min. Math.floor() ensures it does.
-    // Inverse of this reasoning for roundMaxNumberUp().
-    roundMinNumberDown(num, decimalPlaces) {
-        if (num == null)
-            return;
-        if (!('' + num).includes('e')) {
-            return +(Math.floor((num + 'e+' + decimalPlaces)) + 'e-' + decimalPlaces);
-        }
-        else {
-            var arr = ('' + num).split('e');
-            var sig = '';
-            if (+arr[1] + decimalPlaces > 0) {
-                sig = '+';
-            }
-            return +(Math.floor((+arr[0] + 'e' + sig + (+arr[1] + decimalPlaces))) + 'e-' + decimalPlaces);
-        }
-    }
-    roundMaxNumberUp(num, decimalPlaces) {
-        if (num == null)
-            return;
-        if (!('' + num).includes('e')) {
-            return +(Math.ceil((num + 'e+' + decimalPlaces)) + 'e-' + decimalPlaces);
-        }
-        else {
-            var arr = ('' + num).split('e');
-            var sig = '';
-            if (+arr[1] + decimalPlaces > 0) {
-                sig = '+';
-            }
-            return +(Math.ceil((+arr[0] + 'e' + sig + (+arr[1] + decimalPlaces))) + 'e-' + decimalPlaces);
-        }
-    }
-    roundNumber(num, decimalPlaces) {
-        if (num == null)
-            return;
-        if (!('' + num).includes('e')) {
-            return +(Math.round((num + 'e+' + decimalPlaces)) + 'e-' + decimalPlaces);
-        }
-        else {
-            var arr = ('' + num).split('e');
-            var sig = '';
-            if (+arr[1] + decimalPlaces > 0) {
-                sig = '+';
-            }
-            return +(Math.round((+arr[0] + 'e' + sig + (+arr[1] + decimalPlaces))) + 'e-' + decimalPlaces);
-        }
-    }
-    setExpressionFormat(layer, expression, field) {
-        if ((layer === null || layer === void 0 ? void 0 : layer.popupTemplate) != null) {
-            const fieldInfo = layer.popupTemplate.fieldInfos.find(({ fieldName }) => fieldName === field);
-            expression.format = fieldInfo === null || fieldInfo === void 0 ? void 0 : fieldInfo.format;
-        }
-    }
-    getInitDefExprFromLayer(layer) {
-        var _a, _b, _c;
-        return layer.type === 'sublayer' ? (_b = (_a = this.initMapImageExpressions) === null || _a === void 0 ? void 0 : _a[layer.layer.id]) === null || _b === void 0 ? void 0 : _b[layer.id] : (_c = this.initDefExpressions) === null || _c === void 0 ? void 0 : _c[layer.id];
-    }
-    getInitDefExprFromLayerExpression(layerExpression) {
-        var _a, _b, _c;
-        return (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) != null ? (_b = (_a = this.initMapImageExpressions) === null || _a === void 0 ? void 0 : _a[layerExpression.id]) === null || _b === void 0 ? void 0 : _b[layerExpression.sublayerId] : (_c = this.initDefExpressions) === null || _c === void 0 ? void 0 : _c[layerExpression.id];
-    }
-    findFilterLayer(layerExpression) {
-        const layer = this.view.map.allLayers.find(({ id }) => id === layerExpression.id);
-        if (layer.type === 'map-image') {
-            return layer === null || layer === void 0 ? void 0 : layer.findSublayerById(layerExpression.sublayerId);
-        }
-        else {
-            return layer;
-        }
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "view": ["watchViewHandler"],
-        "layerExpressions": ["watchLayerExpressions"]
-    }; }
-    static get style() { return instantAppsFilterListCss; }
-}, [1, "instant-apps-filter-list", {
-        "layerExpressions": [1040],
-        "autoUpdateUrl": [4, "auto-update-url"],
-        "closeBtn": [4, "close-btn"],
-        "closeBtnOnClick": [16],
-        "closeBtnText": [1, "close-btn-text"],
-        "openFilters": [4, "open-filters"],
-        "extentSelector": [4, "extent-selector"],
-        "extentSelectorConfig": [16],
-        "urlParams": [1040],
-        "view": [16],
-        "loading": [32],
-        "filterLayerExpressions": [32],
-        "messages": [32],
-        "baseClass": [32],
-        "disabled": [32],
-        "hasLayerExpression": [32],
-        "initDefExpressions": [32],
-        "initMapImageExpressions": [32],
-        "initPointCloudFilters": [32]
-    }, undefined, {
-        "view": ["watchViewHandler"],
-        "layerExpressions": ["watchLayerExpressions"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["instant-apps-filter-list", "calcite-action", "calcite-action-menu", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input-date-picker", "calcite-input-text", "calcite-loader", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-slider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "instant-apps-filter-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, InstantAppsFilterList$1);
-            }
-            break;
-        case "calcite-action":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$o();
-            }
-            break;
-        case "calcite-action-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$n();
-            }
-            break;
-        case "calcite-block":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$m();
-            }
-            break;
-        case "calcite-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$l();
-            }
-            break;
-        case "calcite-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$k();
-            }
-            break;
-        case "calcite-chip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "calcite-combobox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "calcite-combobox-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "calcite-date-picker":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "calcite-date-picker-day":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "calcite-date-picker-month":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "calcite-date-picker-month-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "calcite-graph":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "calcite-handle":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "calcite-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "calcite-input-date-picker":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "calcite-input-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "calcite-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "calcite-panel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "calcite-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "calcite-progress":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "calcite-scrim":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "calcite-slider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { I as InstantAppsFilterList$1, d as defineCustomElement$1 } from './instant-apps-filter-list2.js';
 
 const InstantAppsFilterList = InstantAppsFilterList$1;
 const defineCustomElement = defineCustomElement$1;