@esri/solutions-components 0.8.2 → 0.8.3

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

@@ -0,0 +1,65 @@
+/*!
+ * 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 helpers = require('./helpers-7415d67a.js');
+const store = require('./store-1f422ad4.js');
+require('./loadModules-a67b6702.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./index-af047760.js');
+
+const instantAppsInteractiveLegendLegendElementCss = ".sc-instant-apps-interactive-legend-legend-element-h{display:block}.sc-instant-apps-interactive-legend-legend-element-h .esri-legend__layer-table.sc-instant-apps-interactive-legend-legend-element,.sc-instant-apps-interactive-legend-legend-element-h .instant-apps-interactive-legend__nested-unique-symbol.sc-instant-apps-interactive-legend-legend-element{margin:0}.sc-instant-apps-interactive-legend-legend-element-h .hide.sc-instant-apps-interactive-legend-legend-element{display:none}";
+
+const CSS = {
+    layerTableSizeRamp: 'esri-legend__layer-table--size-ramp',
+    layerChildTable: 'esri-legend__layer-child-table',
+    layerTable: 'esri-legend__layer-table',
+    nestedUniqueSymbol: 'instant-apps-interactive-legend__nested-unique-symbol',
+    nonInteractive: 'instant-apps-interactive-legend__non-interactive',
+};
+const InstantAppsInteractiveLegendLegendElement = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.activeLayerInfo = undefined;
+        this.isSizeRamp = undefined;
+        this.isChild = undefined;
+        this.isColorRamp = undefined;
+        this.isRelationshipRamp = undefined;
+        this.isInteractive = undefined;
+        this.zoomTo = undefined;
+        this.legendElement = undefined;
+        this.titleText = undefined;
+        this.legendvm = undefined;
+        this.legendElementIndex = undefined;
+        this.messages = undefined;
+        this.expanded = true;
+    }
+    legendLayerExpandUpdatedEmitted() {
+        this.expanded = this.legendLayerCaption.expanded;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const tableClass = this.isChild ? CSS.layerChildTable : CSS.layerTable;
+        const singleSymbol = ((_b = (_a = this.legendElement) === null || _a === void 0 ? void 0 : _a.infos) === null || _b === void 0 ? void 0 : _b.length) === 1 && !((_e = (_d = (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.layer) === null || _d === void 0 ? void 0 : _d.renderer) === null || _e === void 0 ? void 0 : _e.field);
+        const tableClasses = (this.isSizeRamp || !this.isChild) && !this.isColorRamp ? ` ${CSS.layerTableSizeRamp}` : '';
+        const nonInteractiveClass = !this.isInteractive ? ` ${CSS.nonInteractive}` : '';
+        const nestedUniqueSymbolClass = helpers.checkNestedUniqueSymbolLegendElement(this.activeLayerInfo) ? ` ${CSS.nestedUniqueSymbol}` : '';
+        let expanded = singleSymbol && !this.expanded && !this.zoomTo ? true : this.expanded;
+        if (this.isRelationshipRamp) {
+            const relationshipRampExpandStates = store.store.get('relationshipRampExpandStates');
+            const expandState = relationshipRampExpandStates[this.activeLayerInfo.layer.id];
+            expanded = expandState;
+        }
+        return (index.h("div", { class: `${tableClass}${tableClasses}${nonInteractiveClass}${nestedUniqueSymbolClass}` }, index.h("div", { id: `${(_g = (_f = this.activeLayerInfo) === null || _f === void 0 ? void 0 : _f.layer) === null || _g === void 0 ? void 0 : _g.id}-legend-element-caption`, class: `${this.isRelationshipRamp || (!this.titleText && !this.zoomTo && singleSymbol) ? 'hide' : 'show'}` }, index.h("instant-apps-interactive-legend-legend-element-caption", { ref: node => (this.legendLayerCaption = node), legendvm: this.legendvm, activeLayerInfo: this.activeLayerInfo, layer: this.activeLayerInfo.layer, titleText: this.titleText, legendElement: this.legendElement, legendElementIndex: this.legendElementIndex, zoomTo: this.zoomTo, isInteractive: this.isInteractive, messages: this.messages })), index.h("div", { key: "content", id: `${(_j = (_h = this.activeLayerInfo) === null || _h === void 0 ? void 0 : _h.layer) === null || _j === void 0 ? void 0 : _j.id}-legend-element-content-${this.legendElementIndex}`, class: `${expanded === false ? 'hide' : 'show'}` }, index.h("slot", { name: "content" }))));
+    }
+};
+InstantAppsInteractiveLegendLegendElement.style = instantAppsInteractiveLegendLegendElementCss;
+
+exports.instant_apps_interactive_legend_legend_element = InstantAppsInteractiveLegendLegendElement;

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

@@ -0,0 +1,552 @@
+/*!
+ * 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;

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

@@ -7,14 +7,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const loadModules = require('./loadModules-69fc5b98.js');
-const locale = require('./locale-3e33f44c.js');
-const helpers = require('./helpers-81779c18.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
-require('./languageUtil-9bd00bad.js');
-require('./index-ae65e42f.js');
+const index = require('./index-b53bfd7c.js');
+const loadModules = require('./loadModules-a67b6702.js');
+const locale = require('./locale-28c7c569.js');
+const helpers = require('./helpers-7415d67a.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./languageUtil-43c3acdc.js');
+require('./store-1f422ad4.js');
+require('./index-af047760.js');
 
 const instantAppsInteractiveLegendCss = ".sc-instant-apps-interactive-legend-h{display:block;height:100%}.sc-instant-apps-interactive-legend-h .esri-legend.sc-instant-apps-interactive-legend{height:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}.sc-instant-apps-interactive-legend-h .esri-legend.esri-component.esri-widget.esri-widget--panel.sc-instant-apps-interactive-legend{margin:0}";
 

package/dist/cjs/instant-apps-keyboard-shortcuts.cjs.entry.js

@@ -7,12 +7,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const locale = require('./locale-3e33f44c.js');
-require('./loadModules-69fc5b98.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
-require('./languageUtil-9bd00bad.js');
+const index = require('./index-b53bfd7c.js');
+const locale = require('./locale-28c7c569.js');
+require('./loadModules-a67b6702.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./languageUtil-43c3acdc.js');
 
 const instantAppsKeyboardShortcutsCss = ":host .instant-apps-keyboard-shortcuts__content{display:flex;flex-direction:column;font-family:var(--calcite-sans-family);font-size:0.875rem;background-color:var(--calcite-color-background);color:var(--calcite-color-text-1);width:auto;padding:0.5em;margin-bottom:0;overflow:auto}:host .instant-apps-keyboard-shortcuts__content table{border:none;border-collapse:collapse;width:100%;margin-bottom:1em}:host .instant-apps-keyboard-shortcuts__content table td,:host .instant-apps-keyboard-shortcuts__content table th{border:solid 1px var(--calcite-color-border-1);padding:0.5rem 0.75rem 0.5rem 0.75rem;white-space:normal}:host .instant-apps-keyboard-shortcuts__content table td:lang(ja),:host .instant-apps-keyboard-shortcuts__content table td:lang(ja-JP),:host .instant-apps-keyboard-shortcuts__content table th:lang(ja-JP),:host .instant-apps-keyboard-shortcuts__content table th:lang(ja){white-space:nowrap}:host .instant-apps-keyboard-shortcuts__content tr:nth-child(even){background-color:var(--calcite-color-foreground-2)}:host .instant-apps-keyboard-shortcuts__content tr th{padding:0.5em 0.7em;font-weight:400}";