@esri/solutions-components 0.8.3 → 0.8.5

package/dist/cjs/instant-apps-interactive-legend-relationship.cjs.entry.js

@@ -1,552 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b53bfd7c.js');
-const loadModules = require('./loadModules-a67b6702.js');
-const store = require('./store-1f422ad4.js');
-require('./esri-loader-5b8fbfa4.js');
-require('./_commonjsHelpers-ed90c4ad.js');
-require('./index-af047760.js');
-
-const instantAppsInteractiveLegendRelationshipCss = ".sc-instant-apps-interactive-legend-relationship-h{display:block}.sc-instant-apps-interactive-legend-relationship-h .instant-apps-interactive-legend-relationship__instructional-text.sc-instant-apps-interactive-legend-relationship{display:inline-block;width:100%;text-align:center;margin-bottom:10px;background-color:#d2e9f9}.calcite-mode-dark .sc-instant-apps-interactive-legend-relationship-h .instant-apps-interactive-legend-relationship__instructional-text.sc-instant-apps-interactive-legend-relationship{background-color:var(--calcite-color-brand);color:#151515}";
-
-const RELATIONSHIP_DIAMOND_SELECTOR = '.esri-relationship-ramp--diamond__middle-column--ramp svg g';
-const CSS = {
-    instructionalText: 'instant-apps-interactive-legend-relationship__instructional-text',
-};
-const InstantAppsInteractiveLegendRelationship = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.cellNodeCounter = 0;
-        this.filterMode = undefined;
-        this.activeLayerInfo = undefined;
-        this.legendElement = undefined;
-        this.messages = undefined;
-    }
-    applyInteractivity() {
-        this.applyRelationshipRampInteractivity();
-    }
-    showAllSelectedEmitted() {
-        const cleared = store.interactiveLegendState.data[this.activeLayerInfo.layer.id].queryExpressions.length === 0;
-        const gNode = this.relationshipRamp.querySelector(RELATIONSHIP_DIAMOND_SELECTOR);
-        const children = gNode.children;
-        const cellGroup = children ? Array.from(children) : null;
-        if (cleared) {
-            cellGroup === null || cellGroup === void 0 ? void 0 : cellGroup.forEach(cell => {
-                cell.removeAttribute('stroke');
-                cell.removeAttribute('stroke-width');
-                cell.removeAttribute('stroke-opacity');
-                cell.classList.remove('esri-interactive-legend--selected-cell');
-            });
-        }
-    }
-    async componentWillLoad() {
-        const [symbolUtils] = await loadModules.loadModules(['esri/symbols/support/symbolUtils']);
-        this.symbolUtils = symbolUtils;
-    }
-    render() {
-        var _a, _b;
-        return (index.h("div", { ref: (node) => {
-                const styleSheet = node === null || node === void 0 ? void 0 : node.querySelector('relationshipStyles');
-                if (!styleSheet) {
-                    const css = document.createElement('style');
-                    css.id = 'relationshipStyles';
-                    css.innerHTML = `
-                rect:hover {
-                  cursor: pointer;
-                  opacity: 0.8;
-                }
-          `;
-                    node === null || node === void 0 ? void 0 : node.appendChild(css);
-                }
-            } }, index.h("span", { class: CSS.instructionalText }, (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.relationship) === null || _b === void 0 ? void 0 : _b.instructionalText), this.renderRelationshipRamp()));
-    }
-    renderRelationshipRamp() {
-        var _a;
-        const renderer = ((_a = this.activeLayerInfo) === null || _a === void 0 ? void 0 : _a.layer).renderer;
-        const relationshipRamp = this.symbolUtils.renderRelationshipRampPreviewHTML(renderer);
-        const outerHTML = relationshipRamp === null || relationshipRamp === void 0 ? void 0 : relationshipRamp.outerHTML;
-        return (index.h("div", { ref: (node) => {
-                this.relationshipRamp = node;
-                this.applyRelationshipRampInteractivity();
-            }, key: "relationship-ramp-diamond", innerHTML: `${outerHTML}` }));
-    }
-    applyRelationshipRampInteractivity() {
-        if (!this.relationshipRamp || !this.activeLayerInfo || !this.legendElement || !store.interactiveLegendState.data)
-            return;
-        let intervalId = setInterval(() => {
-            const gNode = this.relationshipRamp.querySelector(RELATIONSHIP_DIAMOND_SELECTOR);
-            if (gNode) {
-                clearInterval(intervalId);
-                const rampSVG = gNode.children;
-                this.setupRelationshipDrawingStyle(rampSVG);
-            }
-        }, 10);
-    }
-    setupRelationshipDrawingStyle(rampSVG) {
-        const cellGroup = rampSVG ? Array.from(rampSVG) : null;
-        if (!cellGroup)
-            return;
-        cellGroup.map((cell, cellIndex) => {
-            var _a, _b;
-            const uvInfos = ((_b = (_a = this.activeLayerInfo) === null || _a === void 0 ? void 0 : _a.layer) === null || _b === void 0 ? void 0 : _b.renderer).uniqueValueInfos;
-            if (uvInfos[cellIndex]) {
-                const color = uvInfos[cellIndex].symbol.color;
-                uvInfos.forEach((uvInfo, index) => {
-                    const itemColor = uvInfo.symbol.color;
-                    const match = color.r === itemColor.r && color.g === itemColor.g && color.b === itemColor.b && color.a === itemColor.a;
-                    if (match)
-                        this.setCellAttributes(cell, index);
-                });
-                cell.classList.add('esri-interactive-legend__svg-rect-element');
-            }
-        });
-        const cellItems = this.reorderCellNodes(cellGroup);
-        this.attachFeatureIndexes(cellItems);
-        this.applyEventHandlers();
-    }
-    setCellAttributes(cell, index) {
-        const fLayer = this.activeLayerInfo.layer;
-        const uvInfo = fLayer.renderer.uniqueValueInfos;
-        const newIndex = this.generateIndexPattern(index);
-        if (uvInfo[newIndex]) {
-            cell.setAttribute('data-color', `${uvInfo[newIndex].symbol.color}`);
-            cell.setAttribute('data-cell-index', `${newIndex}`);
-            cell.setAttribute('tabindex', '0');
-        }
-    }
-    generateIndexPattern(index) {
-        const { focus, numClasses } = this.legendElement;
-        if (focus === 'HL') {
-            return index;
-        }
-        return numClasses === 2 ? this.twoClasses(index, focus) : numClasses === 3 ? this.threeClasses(index, focus) : numClasses === 4 ? this.fourClasses(index, focus) : null;
-    }
-    // _twoClasses
-    twoClasses(index, focus) {
-        if (focus === 'HH' || focus === null) {
-            return index === 0 || index === 2 ? index + 1 : index === 1 || index === 3 ? index - 1 : null;
-        }
-        else if (focus === 'LH') {
-            return index === 0 ? index + 3 : index === 1 ? index + 1 : index === 2 ? index - 1 : index === 3 ? index - 3 : index === 4 ? index + 0 : null;
-        }
-        else if (focus === 'LL') {
-            return index === 0 || index === 1 ? index + 2 : index === 2 || index === 3 ? index - 2 : null;
-        }
-    }
-    // _threeClasses
-    threeClasses(index, focus) {
-        if (focus === 'HH' || focus === null) {
-            return index === 0 || index === 3 || index === 6 ? index + 2 : index === 2 || index === 5 || index === 8 ? index - 2 : index;
-        }
-        else if (focus === 'LH') {
-            return index === 0
-                ? index + 8
-                : index === 1
-                    ? index + 6
-                    : index === 2
-                        ? index + 4
-                        : index === 3
-                            ? index + 2
-                            : index === 5
-                                ? index - 2
-                                : index === 6
-                                    ? index - 4
-                                    : index === 7
-                                        ? index - 6
-                                        : index === 8
-                                            ? index - 8
-                                            : index;
-        }
-        else if (focus === 'LL') {
-            return index === 0 || index === 1 || index === 2 ? index + 6 : index === 6 || index === 7 || index === 8 ? index - 6 : index;
-        }
-    }
-    // _fourNumClasses
-    fourClasses(index, focus) {
-        if (focus === 'HH' || focus === null) {
-            return index === 0 || index === 4 || index === 8 || index === 12
-                ? index + 3
-                : index === 1 || index === 5 || index === 9 || index === 13
-                    ? index + 1
-                    : index === 2 || index === 6 || index === 10 || index === 14
-                        ? index - 1
-                        : index === 3 || index === 7 || index === 11 || index === 15
-                            ? index - 3
-                            : null;
-        }
-        else if (focus === 'LH') {
-            return index === 0
-                ? index + 15
-                : index === 1
-                    ? index + 13
-                    : index === 2
-                        ? index + 11
-                        : index === 3
-                            ? index + 9
-                            : index === 4
-                                ? index + 7
-                                : index === 5
-                                    ? index + 5
-                                    : index === 6
-                                        ? index + 3
-                                        : index === 7
-                                            ? index + 1
-                                            : index === 8
-                                                ? index - 1
-                                                : index === 9
-                                                    ? index - 3
-                                                    : index === 10
-                                                        ? index - 5
-                                                        : index === 11
-                                                            ? index - 7
-                                                            : index === 12
-                                                                ? index - 9
-                                                                : index === 13
-                                                                    ? index - 11
-                                                                    : index === 14
-                                                                        ? index - 13
-                                                                        : index === 15
-                                                                            ? index - 15
-                                                                            : null;
-        }
-        else if (focus === 'LL') {
-            return index === 0 || index === 1 || index === 2 || index === 3
-                ? index + 12
-                : index === 4 || index === 5 || index === 6 || index === 7
-                    ? index + 4
-                    : index === 8 || index === 9 || index === 10 || index === 11
-                        ? index - 4
-                        : index === 12 || index === 13 || index === 14 || index === 15
-                            ? index - 12
-                            : null;
-        }
-    }
-    reorderCellNodes(cellGroup) {
-        const cellItems = [];
-        while (this.cellNodeCounter <= cellGroup.length - 1) {
-            cellGroup.map(cell => {
-                if (parseInt(cell.getAttribute('data-cell-index')) === this.cellNodeCounter) {
-                    cellItems.push(cell);
-                }
-            });
-            this.cellNodeCounter++;
-        }
-        this.cellNodeCounter = 0;
-        return cellItems;
-    }
-    attachFeatureIndexes(cellItems) {
-        const { focus, numClasses } = this.legendElement;
-        focus === 'HH' || focus === null
-            ? this.relationshipFocusIsHighHigh(cellItems, numClasses)
-            : focus === 'LL'
-                ? this.relationshipFocusIsLowLow(cellItems, numClasses)
-                : focus === 'LH'
-                    ? this.relationshipFocusIsLowHigh(cellItems, numClasses)
-                    : focus === 'HL'
-                        ? this.relationshipFocusIsHighLow(cellItems, numClasses)
-                        : null;
-        this.cellNodeCounter = 0;
-    }
-    // _relationshipFocusIsHighHigh
-    relationshipFocusIsHighHigh(cellItems, numClasses) {
-        for (let i = numClasses - 1; i >= 0; i--) {
-            for (let j = numClasses - 1; j >= 0; j--) {
-                this.setDataAttributes(cellItems, i, j, numClasses);
-                this.cellNodeCounter++;
-            }
-        }
-    }
-    // _relationshipFocusIsLowLow
-    relationshipFocusIsLowLow(cellItems, numClasses) {
-        for (let i = 0; i < numClasses; i++) {
-            for (let j = 0; j < numClasses; j++) {
-                this.setDataAttributes(cellItems, i, j, numClasses);
-                this.cellNodeCounter++;
-            }
-        }
-    }
-    // _relationshipFocusIsLowHigh
-    relationshipFocusIsLowHigh(cellItems, numClasses) {
-        for (let i = 0; i < numClasses; i++) {
-            for (let j = numClasses - 1; j >= 0; j--) {
-                this.setDataAttributes(cellItems, i, j, numClasses);
-                this.cellNodeCounter++;
-            }
-        }
-    }
-    // _relationshipFocusIsHighLow
-    relationshipFocusIsHighLow(cellItems, numClasses) {
-        for (let j = numClasses - 1; j >= 0; j--) {
-            for (let i = 0; i < numClasses; i++) {
-                this.setDataAttributes(cellItems, i, j, numClasses);
-                this.cellNodeCounter++;
-            }
-        }
-    }
-    // _setDataAttributes
-    setDataAttributes(cellItems, i, j, numClasses) {
-        const rawNode = cellItems[this.cellNodeCounter];
-        if (numClasses === 2) {
-            this.twoClassAttributes(rawNode, i, j);
-        }
-        else if (numClasses === 3) {
-            this.threeClassAttributes(rawNode, i, j);
-        }
-        else {
-            this.fourClassAttributes(rawNode, i, j);
-        }
-    }
-    // _twoClassAttributes
-    twoClassAttributes(rawNode, i, j) {
-        const { legendElement } = this;
-        if (this.cellNodeCounter === 0 || this.cellNodeCounter === 3) {
-            legendElement.focus === 'HL' ? this.swapDataFeatureIndexes(rawNode, i, j) : this.setDataFeatureIndexes(rawNode, i, j);
-        }
-        else {
-            legendElement.focus === 'HL' ? this.swapDataFeatureIndexes(rawNode, i, j) : this.setDataFeatureIndexes(rawNode, i, j);
-        }
-    }
-    // _threeClassAttributes
-    threeClassAttributes(rawNode, i, j) {
-        const { legendElement } = this;
-        if (this.cellNodeCounter === 1 || this.cellNodeCounter === 3 || this.cellNodeCounter === 5 || this.cellNodeCounter === 7) {
-            legendElement.focus === 'HL' ? this.swapDataFeatureIndexes(rawNode, i, j) : this.setDataFeatureIndexes(rawNode, i, j);
-        }
-        else {
-            legendElement.focus !== 'HL' ? this.setDataFeatureIndexes(rawNode, i, j) : this.swapDataFeatureIndexes(rawNode, i, j);
-        }
-    }
-    // _fourClassAttributes
-    fourClassAttributes(rawNode, i, j) {
-        const { legendElement } = this;
-        const { focus } = legendElement;
-        if (this.cellNodeCounter === 1 ||
-            this.cellNodeCounter === 2 ||
-            this.cellNodeCounter === 4 ||
-            this.cellNodeCounter === 5 ||
-            this.cellNodeCounter === 7 ||
-            this.cellNodeCounter === 8 ||
-            this.cellNodeCounter === 10 ||
-            this.cellNodeCounter === 11 ||
-            this.cellNodeCounter === 13 ||
-            this.cellNodeCounter === 14) {
-            focus === 'HL' ? this.swapDataFeatureIndexes(rawNode, i, j) : this.setDataFeatureIndexes(rawNode, i, j);
-        }
-        else {
-            focus !== 'HL' ? this.setDataFeatureIndexes(rawNode, i, j) : this.swapDataFeatureIndexes(rawNode, i, j);
-        }
-    }
-    setDataFeatureIndexes(rawNode, i, j) {
-        rawNode.setAttribute('data-feature-i', `${i}`);
-        rawNode.setAttribute('data-feature-j', `${j}`);
-        this.setDataCellFocus(rawNode, i, j);
-    }
-    swapDataFeatureIndexes(rawNode, i, j) {
-        rawNode.setAttribute('data-feature-i', `${j}`);
-        rawNode.setAttribute('data-feature-j', `${i}`);
-        this.setDataCellFocus(rawNode, j, i);
-    }
-    setDataCellFocus(rawNode, i, j) {
-        const { numClasses } = this.legendElement;
-        if (numClasses === 2) {
-            this.setDataCellFocusForTwoClasses(rawNode, i, j);
-        }
-        else if (numClasses === 3) {
-            this.setDataCellFocusForThreeClasses(rawNode, i, j);
-        }
-        else if (numClasses === 4) {
-            this.setDataCellFocusForFourClasses(rawNode, i, j);
-        }
-    }
-    setDataCellFocusForTwoClasses(rawNode, i, j) {
-        i === 0 && j === 0
-            ? rawNode.setAttribute('data-cell-focus', 'LL')
-            : i === 0 && j === 1
-                ? rawNode.setAttribute('data-cell-focus', 'LH')
-                : i === 1 && j === 0
-                    ? rawNode.setAttribute('data-cell-focus', 'HL')
-                    : i === 1 && j === 1
-                        ? rawNode.setAttribute('data-cell-focus', 'HH')
-                        : null;
-    }
-    setDataCellFocusForThreeClasses(rawNode, i, j) {
-        i === 0 && j === 0
-            ? rawNode.setAttribute('data-cell-focus', 'LL')
-            : i === 0 && j === 1
-                ? rawNode.setAttribute('data-cell-focus', 'LM')
-                : i === 0 && j === 2
-                    ? rawNode.setAttribute('data-cell-focus', 'LH')
-                    : i === 1 && j === 0
-                        ? rawNode.setAttribute('data-cell-focus', 'ML')
-                        : i === 1 && j === 1
-                            ? rawNode.setAttribute('data-cell-focus', 'MM')
-                            : i === 1 && j === 2
-                                ? rawNode.setAttribute('data-cell-focus', 'MH')
-                                : i === 2 && j === 0
-                                    ? rawNode.setAttribute('data-cell-focus', 'HL')
-                                    : i === 2 && j === 1
-                                        ? rawNode.setAttribute('data-cell-focus', 'HM')
-                                        : i === 2 && j === 2
-                                            ? rawNode.setAttribute('data-cell-focus', 'HH')
-                                            : null;
-    }
-    setDataCellFocusForFourClasses(rawNode, i, j) {
-        i === 0 && j === 0
-            ? rawNode.setAttribute('data-cell-focus', 'LL')
-            : i === 0 && j === 1
-                ? rawNode.setAttribute('data-cell-focus', 'LM1')
-                : i === 0 && j === 2
-                    ? rawNode.setAttribute('data-cell-focus', 'LM2')
-                    : i === 0 && j === 3
-                        ? rawNode.setAttribute('data-cell-focus', 'LH')
-                        : i === 1 && j === 0
-                            ? rawNode.setAttribute('data-cell-focus', 'M1L')
-                            : i === 1 && j === 1
-                                ? rawNode.setAttribute('data-cell-focus', 'M1M1')
-                                : i === 1 && j === 2
-                                    ? rawNode.setAttribute('data-cell-focus', 'M1M2')
-                                    : i === 1 && j === 3
-                                        ? rawNode.setAttribute('data-cell-focus', 'M1H')
-                                        : i === 2 && j === 0
-                                            ? rawNode.setAttribute('data-cell-focus', 'M2L')
-                                            : i === 2 && j === 1
-                                                ? rawNode.setAttribute('data-cell-focus', 'M2M1')
-                                                : i === 2 && j === 2
-                                                    ? rawNode.setAttribute('data-cell-focus', 'M2M2')
-                                                    : i === 2 && j === 3
-                                                        ? rawNode.setAttribute('data-cell-focus', 'M2H')
-                                                        : i === 3 && j === 0
-                                                            ? rawNode.setAttribute('data-cell-focus', 'HL')
-                                                            : i === 3 && j === 1
-                                                                ? rawNode.setAttribute('data-cell-focus', 'HM1')
-                                                                : i === 3 && j === 2
-                                                                    ? rawNode.setAttribute('data-cell-focus', 'HM2')
-                                                                    : i === 3 && j === 3
-                                                                        ? rawNode.setAttribute('data-cell-focus', 'HH')
-                                                                        : null;
-    }
-    applyEventHandlers() {
-        const cellGroup = document.querySelectorAll('.esri-interactive-legend__svg-rect-element');
-        const cells = Array.from(cellGroup);
-        cells.map(cell => {
-            const i = cell.getAttribute('data-feature-i');
-            const j = cell.getAttribute('data-feature-j');
-            const focus = cell.getAttribute('data-cell-focus');
-            cell.onclick = () => {
-                this.handleFilter(i, j, focus);
-                this.handleSelectedElement(cell);
-            };
-            cell.onkeydown = e => {
-                const { key } = e;
-                const isActionKey = key === 'Enter' || key === 'Space';
-                if (isActionKey) {
-                    this.handleFilter(i, j, focus);
-                    this.handleSelectedElement(cell);
-                }
-            };
-        });
-    }
-    async handleFilter(i, j, focus) {
-        var _a, _b, _c, _d, _e;
-        const fLayer = this.activeLayerInfo.layer;
-        const { authoringInfo } = fLayer.renderer;
-        const { field1, field2 } = authoringInfo;
-        const { queryExpressions, fLayerView } = store.interactiveLegendState.data[this.activeLayerInfo.layer.id];
-        if (this.legendElement.type === 'relationship-ramp' && authoringInfo && field1 && field2) {
-            const expressionParams = this.generateExpressionParams(field1, field2, authoringInfo, i, j, focus);
-            const queryExpression = this.generateExpressionForRelationship(expressionParams);
-            if (queryExpressions.length === 0) {
-                queryExpressions[0] = queryExpression;
-            }
-            else {
-                if (queryExpressions.indexOf(queryExpression) === -1) {
-                    queryExpressions.push(queryExpression);
-                }
-                else {
-                    queryExpressions.splice(queryExpressions.indexOf(queryExpression), 1);
-                }
-            }
-            const where = queryExpressions.join(' OR ');
-            const timeExtent = (_b = (_a = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.filter) === null || _a === void 0 ? void 0 : _a.timeExtent) !== null && _b !== void 0 ? _b : null;
-            const [FeatureFilter, FeatureEffect] = await loadModules.loadModules(['esri/layers/support/FeatureFilter', 'esri/layers/support/FeatureEffect']);
-            if (((_c = this.filterMode) === null || _c === void 0 ? void 0 : _c.type) === 'filter') {
-                fLayerView.filter = new FeatureFilter({
-                    where,
-                    timeExtent: ((_d = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.filter) === null || _d === void 0 ? void 0 : _d.timeExtent) ? fLayerView.filter.timeExtent : null,
-                });
-            }
-            else if ((_e = this.filterMode) === null || _e === void 0 ? void 0 : _e.effect) {
-                const { includedEffect, excludedEffect } = this.filterMode.effect;
-                const mergedExcludedEffect = await store.getMergedEffect(excludedEffect, fLayerView, 'excludedEffect');
-                const mergedIncludedEffect = await store.getMergedEffect(includedEffect, fLayerView, 'includedEffect');
-                fLayerView.featureEffect = new FeatureEffect({
-                    filter: new FeatureFilter({ where, timeExtent }),
-                    includedEffect: mergedIncludedEffect,
-                    excludedEffect: mergedExcludedEffect,
-                });
-            }
-        }
-    }
-    generateExpressionParams(field1, field2, authoringInfo, i, j, focus) {
-        const data = [];
-        const authoringInfofield1 = field1.field;
-        const authoringInfofield2 = field2.field;
-        const classBreakInfos1 = field1.classBreakInfos;
-        const classBreakInfos2 = field2.classBreakInfos;
-        const normalizationField1 = authoringInfo.field1.hasOwnProperty('normalizationField') ? authoringInfo.field1.normalizationField : null;
-        const normalizationField2 = authoringInfo.field2.hasOwnProperty('normalizationField') ? authoringInfo.field2.normalizationField : null;
-        classBreakInfos1.forEach((_item, itemIndex1) => {
-            const nestedData = [];
-            classBreakInfos2.forEach((_item2, itemIndex2) => {
-                nestedData.push([classBreakInfos1[itemIndex1], classBreakInfos2[itemIndex2]]);
-            });
-            data.push(nestedData);
-        });
-        const field1ToInclude = normalizationField1 ? `(${authoringInfofield1}/${normalizationField1})` : `${authoringInfofield1}`;
-        const field2ToInclude = normalizationField2 ? `(${authoringInfofield2}/${normalizationField2})` : `${authoringInfofield2}`;
-        return {
-            data,
-            i,
-            j,
-            field1: field1ToInclude,
-            field2: field2ToInclude,
-            focus,
-        };
-    }
-    // _generateExpressionForTwoClasses
-    generateExpressionForRelationship(expressionParams) {
-        const { focus, field1, field2, data, i, j } = expressionParams;
-        return focus === 'LL'
-            ? `${field1} >= ${data[i][j][0].minValue} AND ${field1} <= ${data[i][j][0].maxValue} AND ${field2} >= ${data[i][j][1].minValue} AND ${field2} <= ${data[i][j][1].maxValue}`
-            : focus === 'LM' || focus === 'LM1' || focus === 'LM2' || focus === 'LH'
-                ? `${field1} >= ${data[i][j][0].minValue} AND ${field1} <= ${data[i][j][0].maxValue} AND ${field2} > ${data[i][j][1].minValue} AND ${field2} <= ${data[i][j][1].maxValue}`
-                : focus === 'ML' || focus === 'M1L' || focus === 'M2L' || focus === 'HL'
-                    ? `${field1} > ${data[i][j][0].minValue} AND ${field1} <= ${data[i][j][0].maxValue} AND ${field2} >= ${data[i][j][1].minValue} AND ${field2} <= ${data[i][j][1].maxValue}`
-                    : `${field1} > ${data[i][j][0].minValue} AND ${field1} <= ${data[i][j][0].maxValue} AND ${field2} > ${data[i][j][1].minValue} AND ${field2} <= ${data[i][j][1].maxValue}`;
-    }
-    handleSelectedElement(cell) {
-        const cellClass = cell.classList;
-        if (!cellClass.contains('esri-interactive-legend--selected-cell')) {
-            cellClass.add('esri-interactive-legend--selected-cell');
-            cell.setAttribute('stroke', 'black');
-            cell.setAttribute('stroke-width', '3px');
-            cell.setAttribute('stroke-opacity', '1');
-        }
-        else {
-            cell.removeAttribute('stroke');
-            cell.removeAttribute('stroke-width');
-            cell.removeAttribute('stroke-opacity');
-            cellClass.remove('esri-interactive-legend--selected-cell');
-        }
-    }
-};
-InstantAppsInteractiveLegendRelationship.style = instantAppsInteractiveLegendRelationshipCss;
-
-exports.instant_apps_interactive_legend_relationship = InstantAppsInteractiveLegendRelationship;