@esri/solutions-components 0.8.2 → 0.8.3

package/dist/esm/instant-apps-filter-list.entry.js

@@ -0,0 +1,1055 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { l as loadModules } from './loadModules-acccbc1c.js';
+import { g as getMessages } from './locale-4cfbae3e.js';
+import { g as getMode } from './mode-f9bfc4e9.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './languageUtil-71a7a914.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'];
+const supportedQueryTypes = ['feature', 'geojson', 'wfs', 'csv', 'scene'];
+
+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;--calcite-combobox-input-height:24px}.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:64px;border-top:1px solid var(--calcite-color-border-input);border-right:1px solid var(--calcite-color-border-input);border-bottom:1px solid var(--calcite-color-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}.instant-apps-filter-list calcite-input-date-picker{--calcite-font-size--1:16px}@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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.comboboxOverlayPositioning = 'absolute';
+        this.closeBtnText = undefined;
+        this.openFilters = false;
+        this.extentSelector = false;
+        this.extentSelectorConfig = undefined;
+        this.urlParams = undefined;
+        this.filterCount = 0;
+        this.view = undefined;
+        this.zoomBtn = true;
+        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();
+        this.intl = intl;
+        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, selectionMode: "multiple", "max-items": "6", scale: "s", overlayPositioning: this.comboboxOverlayPositioning }, (_a = expression.fields) === null || _a === void 0 ? void 0 : _a.map((value, index) => this.renderComboboxItem(expression, value, index)))));
+    }
+    renderComboboxItem(expression, value, index) {
+        var _a;
+        const label = this.createLabel(expression, value);
+        const selectedFields = expression === null || expression === void 0 ? void 0 : expression.selectedFields;
+        const selected = (_a = selectedFields === null || selectedFields === void 0 ? void 0 : selectedFields.includes(value)) !== null && _a !== void 0 ? _a : 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, max } = expression;
+        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, "overlay-positioning": "fixed", lang: (_c = this.locale) !== null && _c !== void 0 ? _c : 'en', 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 this.zoomBtn ? (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))) : undefined;
+    }
+    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' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
+                return this.renderCombobox(layerExpression, expression);
+            }
+            return this.renderNumberSlider(layerExpression, expression);
+        }
+        else if (type === 'date') {
+            if ((expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
+                return this.renderCombobox(layerExpression, expression);
+            }
+            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') {
+                    if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
+                        this.resetCombobox(expression);
+                    }
+                    else {
+                        this.resetDatePicker(expression);
+                    }
+                }
+                else if (type === 'number' || type === 'range') {
+                    if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === '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, _d, _e;
+        const allLayersAndTables = (_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.concat((_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.allTables);
+        allLayersAndTables === null || allLayersAndTables === void 0 ? void 0 : allLayersAndTables.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, type } = expression;
+        const layer = this.findFilterLayer(layerExpression);
+        expression.fields = await this.getFeatureAttributes(layer, field);
+        if (type === 'date') {
+            const layerField = layer.fields.find(({ name }) => name === field);
+            if ((layerField === null || layerField === void 0 ? void 0 : layerField.type) === 'date-only') {
+                expression.dateOnly = true;
+            }
+        }
+        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' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === '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 = 'extent' in geometry ? geometry : this.geometryJsonUtils.fromJSON(geometry);
+                if ((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') {
+            if (expression.displayOption === 'drop-down') {
+                update = await this.updateStringExpression(layerExpression, expression);
+            }
+            else {
+                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, type } = expression;
+        if (items && items.length) {
+            const values = items.map(({ value }) => (typeof value === 'number' ? value : `'${handleSingleQuote(value)}'`));
+            if (type === 'date') {
+                expression.selectedFields = items.map(({ value }) => value);
+                expression.definitionExpression = values.map(value => this.buildDateExpression(value, field)).join(' OR ');
+            }
+            else {
+                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(';');
+            let filterCount = 0;
+            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;
+                                filterCount++;
+                                if (tmpFilter.type === 'range') {
+                                    expression.range = tmpFilter.range;
+                                }
+                                else if (tmpFilter.type === 'select') {
+                                    expression.selectedFields = tmpFilter.selectedFields;
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+            this.filterCount = filterCount;
+        }
+    }
+    createURLParamExpression(layerExpression, expression) {
+        const { id, range, selectedFields, type } = expression;
+        if (type === 'string' || type === 'coded-value' || (expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
+            return {
+                type: 'select',
+                layerId: layerExpression.id,
+                expressionId: id.toString(),
+                selectedFields,
+            };
+        }
+        else if (type === 'number' || type === 'range' || type === 'date') {
+            return {
+                type: 'range',
+                layerId: layerExpression.id,
+                expressionId: id.toString(),
+                range,
+            };
+        }
+        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 = [];
+            let filterCount = 0;
+            (_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) {
+                        filterCount++;
+                        const paramExpression = this.createURLParamExpression(layerExpr, expression);
+                        expressions.push(JSON.stringify(paramExpression));
+                    }
+                });
+            });
+            this.filterCount = filterCount;
+            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) || this.view.map.findTableById(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 = {};
+        const layersAndTables = map.allLayers.concat(map.allTables);
+        for (let i = 0; i < layersAndTables.length; i++) {
+            const layer = layersAndTables.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;
+            zoomToBtn.disabled = 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;
+                    zoomToBtn.disabled = 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 allLayersAndTables = this.view.map.allLayers.concat(this.view.map.allTables);
+        const layer = allLayersAndTables.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;
+        }
+    }
+    createLabel(expression, value) {
+        var _a;
+        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);
+            }
+        }
+        else if (expression.type === 'date' && !expression.dateOnly) {
+            const format = expression.dateOnly ? this.intl.convertDateFormatToIntlOptions('short-date-long-time') : undefined;
+            label = this.intl.formatDate(value, format);
+        }
+        return label;
+    }
+    buildDateExpression(date, field) {
+        if (date) {
+            const tmpDate = new Date(date);
+            const tmpCompareDate = new Date(date);
+            const tmpCompareDate1 = new Date(tmpCompareDate.setDate(tmpDate.getDate() + 1));
+            const formattedDate = `${tmpDate.getFullYear()}-${tmpDate.getMonth() + 1}-${tmpDate.getDate()}`;
+            const time = `${tmpDate.getHours()}:${tmpDate.getMinutes()}:${tmpDate.getSeconds()}`;
+            const compareTime = `${tmpCompareDate1.getHours()}:${tmpCompareDate1.getMinutes()}:${tmpCompareDate1.getSeconds()}`;
+            const compareFormattedDate = `${tmpCompareDate1.getFullYear()}-${tmpCompareDate1.getMonth() + 1}-${tmpCompareDate1.getDate()}`;
+            return `${field} BETWEEN '${formattedDate} ${time}' AND '${compareFormattedDate} ${compareTime}'`;
+        }
+        return;
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "view": ["watchViewHandler"],
+        "layerExpressions": ["watchLayerExpressions"]
+    }; }
+};
+InstantAppsFilterList.style = instantAppsFilterListCss;
+
+export { InstantAppsFilterList as instant_apps_filter_list };