@esri/solutions-components 0.7.19 → 0.7.20

package/dist/esm/card-manager_3.entry.js

@@ -495,7 +495,8 @@ const LayerTable = class {
         var _a;
         const activeDependant = [
             "filter",
-            "list-check-all"
+            "list-check-all",
+            "selected-items-filter"
         ];
         (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
             if (ti && activeDependant.indexOf(ti.icon) > -1) {
@@ -505,6 +506,9 @@ const LayerTable = class {
                 if (ti.icon === "list-check-all") {
                     ti.active = this._selectAllActive;
                 }
+                if (ti.icon === "selected-items-filter") {
+                    ti.active = this._showOnlySelected;
+                }
             }
         });
     }
@@ -1133,7 +1137,7 @@ const LayerTable = class {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1246,6 +1250,7 @@ const LayerTable = class {
         var _a;
         this._selectedIndexes = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        this._finishOnChange();
     }
     /**
      * When true the filter modal will be displayed
@@ -1458,7 +1463,7 @@ const MapCard = class {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
-        this.enableMapToolsExpand = true;
+        this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
         this.basemapConfig = undefined;
@@ -1514,7 +1519,7 @@ const MapCard = class {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
-        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableMapToolsExpand: this.enableMapToolsExpand, enableSearch: this.enableSearch, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/crowdsource-manager.entry.js

@@ -19,7 +19,6 @@ const CrowdsourceManager = class {
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
-        this.classicGrid = false;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -40,7 +39,6 @@ const CrowdsourceManager = class {
         this.enableBasemap = true;
         this.basemapConfig = undefined;
         this.showNewestFirst = true;
-        this.hideMap = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.searchConfiguration = undefined;
@@ -182,7 +180,7 @@ const CrowdsourceManager = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -228,19 +226,13 @@ const CrowdsourceManager = class {
         let icon = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-down" : "chevrons-up") :
-                    (panelOpen ? "chevrons-up" : "chevrons-down");
+                icon = (panelOpen ? "chevrons-up" : "chevrons-down");
                 break;
             case ELayoutMode.VERTICAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-right" : "chevrons-left") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
             case ELayoutMode.GRID:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-up" : "chevrons-down") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
         }
         return icon;
@@ -258,11 +250,10 @@ const CrowdsourceManager = class {
         let sizeClass = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                sizeClass = `${this._isMobile && this.hideMap ? "height-0 " : panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
+                sizeClass = `${panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
                 break;
             case ELayoutMode.GRID:
-                sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
-                    `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+                sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
@@ -286,9 +277,7 @@ const CrowdsourceManager = class {
                 sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
                 break;
             case ELayoutMode.GRID:
-                sizeClass = this.classicGrid ?
-                    `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-                    `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+                sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
@@ -301,47 +290,41 @@ const CrowdsourceManager = class {
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap, hideTable) {
-        const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
-            layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getTable(layoutMode, panelOpen, hideTable), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen, hideTable))));
+    _getBody(layoutMode, panelOpen, hideTable) {
+        const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the map node
      * @protected
      */
-    _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    _getMapAndCard(layoutMode, panelOpen) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-        return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode()));
+        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * @param panelOpen boolean indicates if all panels are open
      *
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, hideMap) {
+    _getMapNode(layoutMode, panelOpen) {
         var _a;
-        const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-            layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" : layoutMode === ELayoutMode.GRID && !hideMap ? "" : "visibility-hidden";
-        const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" :
-            this._layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" :
-                this._layoutMode === ELayoutMode.HORIZONTAL && this._isMobile && this.hideMap ? "height-0" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        const mapDisplayClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : layoutMode === ELayoutMode.GRID ? "" : "visibility-hidden";
+        const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -358,7 +341,7 @@ const CrowdsourceManager = class {
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-        const containerClass = this._isMobile && this._hideTable && this.hideMap ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
+        const containerClass = this._isMobile && this._hideTable ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -395,10 +378,8 @@ const CrowdsourceManager = class {
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-        const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
-            this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
-                layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
+        const toggleSlot = layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
         return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
     }
@@ -423,7 +404,6 @@ const CrowdsourceManager = class {
      * @param show when true the map, popup, and table will be displayed
      */
     showHideMapPopupAndTable(show) {
-        this.hideMap = show;
         this._expandPopup = false;
         this._hideTable = show;
         this._hideFooter = show;

package/dist/esm/instant-apps-ckeditor-wrapper_3.entry.js

@@ -3,9 +3,9 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { d as ESettingType, s as store, i as isCalciteModeDark, e as ECalciteMode, f as EInputType, E as EIcons, l as languageTranslatorState, h as getT9nData, c as getUIDataKeys } from './utils-b1bd777e.js';
-import './locale-89b49505.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-7183ce4a.js';
+import { d as ESettingType, i as isCalciteModeDark, e as ECalciteMode, s as store, f as EInputType, E as EIcons, l as languageTranslatorState, h as getT9nData, c as getUIDataKeys } from './utils-5ec65194.js';
+import './locale-c7d9e9aa.js';
 import './loadModules-b677d6d7.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
@@ -125,7 +125,7 @@ const InstantAppsCkeditorWrapper = class {
 };
 InstantAppsCkeditorWrapper.style = instantAppsCkeditorWrapperCss;
 
-const instantAppsLanguageTranslatorItemCss = ".sc-instant-apps-language-translator-item-h{display:block}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{padding:10px;border-bottom:1px solid var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-2);width:49%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__top-row.sc-instant-apps-language-translator-item{display:flex;align-items:center;justify-content:space-between}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label-container.sc-instant-apps-language-translator-item{display:flex;align-items:center}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label.sc-instant-apps-language-translator-item{display:inline-block;margin-left:10px;font-size:14px;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item calcite-input.sc-instant-apps-language-translator-item{margin-top:10px;margin-left:55px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--last-item.sc-instant-apps-language-translator-item{border-bottom:none}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item:first-child{margin-right:1%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-popover-content.sc-instant-apps-language-translator-item{display:inline-block;padding:10px;max-width:400px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-items.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-item.sc-instant-apps-language-translator-item{display:flex;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:14px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__tip.sc-instant-apps-language-translator-item{display:inline-block;font-size:14px;line-height:22px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-brand)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-button.sc-instant-apps-language-translator-item{border:0;background-color:transparent;cursor:pointer}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff;background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-action.sc-instant-apps-language-translator-item{--calcite-ui-icon-color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-text-inverse)}.instant-apps-language-translator--last-item.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{border-bottom:none}";
+const instantAppsLanguageTranslatorItemCss = ".sc-instant-apps-language-translator-item-h{display:block}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{padding:10px;border-bottom:1px solid var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-2);width:49%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__top-row.sc-instant-apps-language-translator-item{display:flex;align-items:center;justify-content:space-between}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label-container.sc-instant-apps-language-translator-item{display:flex;align-items:center}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label.sc-instant-apps-language-translator-item{display:inline-block;margin-left:10px;font-size:14px;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item calcite-input.sc-instant-apps-language-translator-item{margin-top:10px;margin-left:55px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--last-item.sc-instant-apps-language-translator-item{border-bottom:none}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item:first-child{margin-right:1%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-popover-content.sc-instant-apps-language-translator-item{display:inline-block;padding:10px;max-width:400px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-items.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-item.sc-instant-apps-language-translator-item{display:flex;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:14px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__tip.sc-instant-apps-language-translator-item{display:inline-block;font-size:14px;line-height:22px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-brand)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-button.sc-instant-apps-language-translator-item{border:0;background-color:transparent;cursor:pointer}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__nested-input.sc-instant-apps-language-translator-item{margin-left:60px;margin-top:8px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__nested-input.sc-instant-apps-language-translator-item calcite-input.sc-instant-apps-language-translator-item{margin-left:30px}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff;background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-action.sc-instant-apps-language-translator-item{--calcite-ui-icon-color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-text-inverse)}.instant-apps-language-translator--last-item.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{border-bottom:none}";
 
 const BASE$1 = 'instant-apps-language-translator-item';
 const CSS$1 = {
@@ -141,78 +141,137 @@ const CSS$1 = {
     infoIcon: `${BASE$1}__info-icon`,
     infoButton: `${BASE$1}__info-button`,
     tip: `${BASE$1}__tip`,
+    nestedInput: `${BASE$1}__nested-input`,
 };
 const InstantAppsLanguageTranslatorItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.translatorItemDataUpdated = createEvent(this, "translatorItemDataUpdated", 7);
+        this.userInputs = {};
+        this.translatedInputs = {};
         this.fieldName = undefined;
-        this.translatedLanguageLabel = undefined;
-        this.type = undefined;
+        this.translatedLanguageLabels = undefined;
+        this.setting = undefined;
         this.userLocaleInputOnChangeCallback = undefined;
         this.translatedLocaleInputOnChangeCallback = undefined;
     }
-    componentDidLoad() {
-        this.init();
+    get isTextEditor() {
+        return this.setting.type === ESettingType.TextEditor;
     }
-    init() {
-        if (this.type === ESettingType.TextEditor)
+    get calciteMode() {
+        return isCalciteModeDark() ? ECalciteMode.Dark : ECalciteMode.Light;
+    }
+    get hasNestedContent() {
+        var _a;
+        return !!((_a = this.setting) === null || _a === void 0 ? void 0 : _a.content);
+    }
+    get tipID() {
+        return `${this.fieldName}goTo`;
+    }
+    componentDidLoad() {
+        if (this.isTextEditor) {
             store.onChange('uiData', () => this.handleEditorCollapse());
+        }
     }
     render() {
-        const uiDataItem = this.getUIDataItem();
-        return (h(Host, { class: `${isCalciteModeDark() ? ECalciteMode.Dark : ECalciteMode.Light}` }, this.renderBase(uiDataItem), this.renderPopover(uiDataItem)));
+        var _a;
+        if ('content' in this.setting && ((_a = this.setting.content) === null || _a === void 0 ? void 0 : _a.every(contentItem => { var _a; return ((_a = contentItem === null || contentItem === void 0 ? void 0 : contentItem.content) === null || _a === void 0 ? void 0 : _a.length) === 0; }))) {
+            return h(Fragment, null);
+        }
+        else {
+            return (h(Host, { class: this.calciteMode }, this.renderBase(), this.renderPopover()));
+        }
     }
-    renderBase(uiDataItem) {
-        return (h("div", { class: BASE$1 }, this.renderUserLocaleSection(uiDataItem), this.renderTranslatedLanguageSection()));
+    renderBase() {
+        return (h("div", { class: BASE$1 }, this.renderUserLocaleSection(), this.renderTranslatedLanguageSection()));
     }
-    renderUserLocaleSection(uiDataItem) {
+    renderPopover() {
+        const tip = this.getTip();
+        return (h("calcite-popover", { referenceElement: this.tipID, label: "", "auto-close": "true", placement: "trailing", closable: true }, h("span", { class: CSS$1.uiLocationPopoverContent }, h("span", { class: CSS$1.uiLocationItems }, this.getUILocation()), tip ? h("span", { class: CSS$1.tip }, tip) : null)));
+    }
+    renderUserLocaleSection() {
+        const uiDataItem = this.getUIDataItem();
         const userLocaleData = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.userLocaleData;
-        const label = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.label;
-        const value = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.value;
         const isSelected = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.selected;
         const selected = isSelected ? ` ${CSS$1.selected}` : '';
-        return (h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(EInputType.User, label), (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? this.renderInput(value, EInputType.User) : null));
+        const label = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.label;
+        const value = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.value;
+        const uid = this.setting.id;
+        return (h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(EInputType.User, label, uid), this.handleInputRender(EInputType.User, value, uid)));
     }
     renderTranslatedLanguageSection() {
         var _a;
         const uiDataItem = this.getUIDataItem();
-        const isSelected = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.selected;
+        const uid = this.setting.id;
         const locale = store.get('currentLanguage');
         const data = store.get('portalItemResourceT9n');
-        const value = (_a = data === null || data === void 0 ? void 0 : data[locale]) === null || _a === void 0 ? void 0 : _a[this.fieldName];
-        return (h("div", { class: `${CSS$1.section}${isSelected ? ` ${CSS$1.selected}` : ''}` }, this.renderItemHeader(EInputType.Translation, this.translatedLanguageLabel), (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? this.renderInput(value, EInputType.Translation) : null));
+        const label = this.translatedLanguageLabels[this.fieldName];
+        const value = (_a = data === null || data === void 0 ? void 0 : data[locale]) === null || _a === void 0 ? void 0 : _a[uid];
+        const selected = (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.selected) ? ` ${CSS$1.selected}` : '';
+        return (h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(EInputType.Translation, label, uid), this.handleInputRender(EInputType.Translation, value, uid)));
     }
-    renderInput(value, type) {
-        return this.type === 'string' || this.type === 'textarea'
-            ? type === EInputType.User
-                ? this.renderUserLocaleInput(value)
-                : this.renderTranslatedLanguageInput(value)
-            : this.renderTextEditor(value, type);
-    }
-    renderUserLocaleInput(value) {
-        return (h("calcite-input", { class: ECalciteMode.Light, ref: (node) => (this.userLocaleInput = node), "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleUserInputChange.bind(this) }));
-    }
-    renderTranslatedLanguageInput(value) {
-        return (h("calcite-input", { class: ECalciteMode.Light, ref: (node) => (this.translatedLangInput = node), "data-field-name": this.fieldName, onFocus: this.handleSelection, onCalciteInputChange: this.handleTranslatedInputChange.bind(this), value: value }));
+    handleInputRender(type, value, uid) {
+        const uiDataItem = this.getUIDataItem();
+        const isExpanded = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded;
+        return isExpanded ? (this.hasNestedContent ? this.renderNestedInputs(type) : this.renderInput(type, value, uid)) : null;
     }
-    renderTextEditor(value, type) {
-        return (h("instant-apps-ckeditor-wrapper", { ref: this.setEditor.bind(this, type), onDataChanged: this.handleTextEditorDataChange.bind(this, type), onIsFocused: this.handleSelection, value: value !== null && value !== void 0 ? value : '', "data-field-name": this.fieldName, config: { toolbar: [] } }));
+    renderNestedInputs(inputType, contentItem) {
+        const settingToRender = contentItem !== null && contentItem !== void 0 ? contentItem : this.setting;
+        const { content } = settingToRender;
+        return content === null || content === void 0 ? void 0 : content.map(contentItem => (contentItem.hasOwnProperty('content') ? this.renderNestedInputs(inputType, contentItem) : this.renderNestedInput(inputType, contentItem)));
     }
-    renderItemHeader(type, label) {
-        return (h("div", { class: CSS$1.topRow }, h("div", { class: CSS$1.labelContainer }, this.renderExpandCollapseButton(), h("calcite-icon", { icon: EIcons.SettingIndicator, scale: "s" }), h("span", { class: CSS$1.label }, type === EInputType.Translation ? this.translatedLanguageLabel : label), type === EInputType.User ? (h("button", { id: `${this.fieldName}goTo`, class: CSS$1.infoButton }, h("calcite-icon", { class: CSS$1.infoIcon, icon: EIcons.Popover, scale: "s" }))) : null), this.renderCopyButton(type)));
+    renderNestedInput(inputType, contentItem) {
+        const locale = store.get('currentLanguage');
+        const data = store.get('portalItemResourceT9n');
+        const uid = contentItem === null || contentItem === void 0 ? void 0 : contentItem.id;
+        const localeData = data === null || data === void 0 ? void 0 : data[locale];
+        const translatedValue = localeData === null || localeData === void 0 ? void 0 : localeData[uid];
+        const { label, value, id } = contentItem;
+        const inputLabel = inputType === EInputType.Translation ? this.translatedLanguageLabels[id] : label;
+        const isUser = inputType === EInputType.User;
+        const inputValue = isUser ? value : translatedValue;
+        return (h("div", { class: CSS$1.nestedInput }, this.renderItemHeader(inputType, inputLabel, uid, contentItem), this.renderInput(inputType, inputValue, uid, contentItem)));
+    }
+    renderItemHeader(type, label, uid, contentItem) {
+        const doesNotHaveNestedContent = !this.hasNestedContent;
+        const isNestedItem = !!contentItem;
+        const showCopyButton = doesNotHaveNestedContent || isNestedItem;
+        return (h("div", { class: CSS$1.topRow }, this.renderItemHeaderLabel(type, label, contentItem), showCopyButton ? this.renderCopyButton(type, uid) : null));
+    }
+    renderItemHeaderLabel(type, label, contentItem) {
+        const isUserSectionWithNoNestedContent = type === EInputType.User && !contentItem;
+        return (h("div", { class: CSS$1.labelContainer }, !contentItem ? this.renderExpandCollapseButton() : null, h("calcite-icon", { icon: this.getIcon(contentItem), scale: "s" }), h("span", { class: CSS$1.label }, label), isUserSectionWithNoNestedContent ? this.renderInfoButton() : null));
     }
     renderExpandCollapseButton() {
         const uiDataItem = this.getUIDataItem();
-        return (h("calcite-action", { onClick: this.handleExpand.bind(this, uiDataItem), icon: (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? EIcons.Expanded : EIcons.Collapsed, scale: "s", appearance: "transparent", text: "" }));
+        const isExpanded = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded;
+        const icon = isExpanded ? EIcons.Expanded : EIcons.Collapsed;
+        return h("calcite-action", { onClick: this.handleExpand.bind(this, uiDataItem), icon: icon, scale: "s", appearance: "transparent", text: "" });
+    }
+    renderInfoButton() {
+        return (h("button", { id: this.tipID, class: CSS$1.infoButton }, h("calcite-icon", { class: CSS$1.infoIcon, icon: EIcons.Popover, scale: "s" })));
+    }
+    renderCopyButton(type, uid) {
+        return h("calcite-action", { class: this.calciteMode, onClick: this.copySelection.bind(this, type, uid), slot: "action", icon: EIcons.Copy, appearance: "transparent", text: "" });
+    }
+    renderInput(type, value, uid, contentItem) {
+        const setting = contentItem !== null && contentItem !== void 0 ? contentItem : this.setting;
+        const isNotRichText = setting.type === 'string' || setting.type === 'textarea';
+        return isNotRichText
+            ? type === EInputType.User
+                ? this.renderUserLocaleInput(value, uid)
+                : this.renderTranslatedLanguageInput(value, uid)
+            : this.renderTextEditor(value, type, uid);
     }
-    renderPopover(uiDataItem) {
-        const tip = this.getTip(uiDataItem);
-        return (h("calcite-popover", { referenceElement: `${this.fieldName}goTo`, label: "", "auto-close": "true", placement: "trailing", closable: true }, h("span", { class: CSS$1.uiLocationPopoverContent }, h("span", { class: CSS$1.uiLocationItems }, this.getUILocation(uiDataItem)), tip ? h("span", { class: CSS$1.tip }, tip) : null)));
+    renderUserLocaleInput(value, uid) {
+        return (h("calcite-input", { ref: (node) => (this.userInputs[uid] = node), key: uid, id: uid, class: ECalciteMode.Light, "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleUserInputChange.bind(this) }));
     }
-    renderCopyButton(type) {
-        const darkMode = isCalciteModeDark();
-        return (h("calcite-action", { class: darkMode ? ECalciteMode.Dark : ECalciteMode.Light, onClick: this.copySelection.bind(this, type), slot: "action", icon: EIcons.Copy, appearance: "transparent", text: "" }));
+    renderTranslatedLanguageInput(value, uid) {
+        return (h("calcite-input", { ref: (node) => (this.translatedInputs[uid] = node), key: uid, id: uid, class: ECalciteMode.Light, "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleTranslatedInputChange.bind(this) }));
+    }
+    renderTextEditor(value, type, uid) {
+        const config = { toolbar: [] };
+        return (h("instant-apps-ckeditor-wrapper", { id: uid, ref: this.setEditor.bind(this, type), onDataChanged: this.handleTextEditorDataChange.bind(this, type), onIsFocused: this.handleSelection, value: value !== null && value !== void 0 ? value : '', "data-field-name": this.fieldName, config: config }));
     }
     getUIDataItem() {
         if (!languageTranslatorState.uiData)
@@ -225,7 +284,8 @@ const InstantAppsLanguageTranslatorItem = class {
         const updatedData = getT9nData(currentLanguage, dataToWrite);
         store.set('portalItemResourceT9n', updatedData);
     }
-    handleExpand(uiDataItem) {
+    handleExpand() {
+        const uiDataItem = this.getUIDataItem();
         uiDataItem.expanded = !uiDataItem.expanded;
         const uiData = new Map(languageTranslatorState.uiData);
         uiData.set(this.fieldName, uiDataItem);
@@ -254,8 +314,8 @@ const InstantAppsLanguageTranslatorItem = class {
             setting.selected = false;
         });
         uiDataKeys.forEach(key => {
-            var _a;
-            const fieldName = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.getAttribute('data-field-name');
+            const node = event === null || event === void 0 ? void 0 : event.target;
+            const fieldName = node === null || node === void 0 ? void 0 : node.getAttribute('data-field-name');
             if (key === fieldName) {
                 const setting = uiData === null || uiData === void 0 ? void 0 : uiData.get(key);
                 setting.selected = true;
@@ -263,22 +323,24 @@ const InstantAppsLanguageTranslatorItem = class {
         });
         store.set('uiData', uiData);
     }
-    getUILocation(uiDataItem) {
+    getUILocation() {
+        const uiDataItem = this.getUIDataItem();
         const { uiLocation, userLocaleData } = uiDataItem;
         const { section, subsection } = uiLocation;
         const breadCrumbLabels = [section.label, subsection.label, userLocaleData.label].filter(uiLocationStr => !!uiLocationStr);
         return breadCrumbLabels.map((breadCrumbLabel, breadCrumbLabelIndex) => (h("span", { class: CSS$1.uiLocationItem }, h("span", null, breadCrumbLabel), breadCrumbLabelIndex !== breadCrumbLabels.length - 1 ? h("calcite-icon", { icon: "chevron-right", scale: "s" }) : null)));
     }
-    getTip(uiDataItem) {
+    getTip() {
+        const uiDataItem = this.getUIDataItem();
         const { tip } = uiDataItem;
         return tip;
     }
-    copySelection(type) {
-        if (this.type === ESettingType.TextEditor) {
+    copySelection(type, uid) {
+        if (this.setting.type === ESettingType.TextEditor) {
             this.copyTextEditorContent(type);
         }
         else {
-            this.copyCalciteInputContent(type);
+            this.copyCalciteInputContent(uid, type);
         }
     }
     copyTextEditorContent(type) {
@@ -312,11 +374,13 @@ const InstantAppsLanguageTranslatorItem = class {
         document.execCommand('copy');
         document.body.removeChild(tempElement);
     }
-    copyCalciteInputContent(type) {
-        const input = type === EInputType.User ? this.userLocaleInput : this.translatedLangInput;
-        input.selectText();
-        const value = input.value;
-        navigator.clipboard.writeText(value);
+    copyCalciteInputContent(uid, inputType) {
+        const input = inputType === EInputType.User ? this.userInputs[uid] : this.translatedInputs[uid];
+        if (input) {
+            input.selectText();
+            const value = input.value;
+            navigator.clipboard.writeText(value);
+        }
     }
     setEditor(type, node) {
         if (type === EInputType.User) {
@@ -332,10 +396,11 @@ const InstantAppsLanguageTranslatorItem = class {
         store.set('saving', true);
         try {
             const node = e.target;
+            const uid = node.id;
             const value = node.value;
             const uiDataItem = this.getUIDataItem();
             uiDataItem.userLocaleData.value = value;
-            await this.userLocaleInputOnChangeCallback(this.fieldName, value);
+            await this.userLocaleInputOnChangeCallback(uid, value);
             store.set('saving', false);
         }
         catch (_a) {
@@ -361,10 +426,11 @@ const InstantAppsLanguageTranslatorItem = class {
         try {
             const composedPath = e.composedPath();
             const node = composedPath[0];
-            this.updateT9nStore(this.fieldName, node.value);
-            const { fieldName, locale, resource } = this.getTranslatedLocaleCallbackData();
+            const uid = node.id;
+            this.updateT9nStore(uid, node.value);
+            const { locale, resource } = this.getTranslatedLocaleCallbackData();
             const value = e.target.value;
-            await this.translatedLocaleInputOnChangeCallback(fieldName, value, locale, resource);
+            await this.translatedLocaleInputOnChangeCallback(uid, value, locale, resource);
             setTimeout(() => store.set('saving', false), 1500);
             this.translatorItemDataUpdated.emit();
         }
@@ -376,10 +442,12 @@ const InstantAppsLanguageTranslatorItem = class {
     async handleTranslatedTextEditorChange(e) {
         store.set('saving', true);
         try {
-            this.updateT9nStore(this.fieldName, e.detail);
-            const { fieldName, locale, resource } = this.getTranslatedLocaleCallbackData();
+            const node = e.target;
+            const uid = node.id;
+            this.updateT9nStore(uid, e.detail);
+            const { locale, resource } = this.getTranslatedLocaleCallbackData();
             const value = e.detail;
-            await this.translatedLocaleInputOnChangeCallback(fieldName, value, locale, resource);
+            await this.translatedLocaleInputOnChangeCallback(uid, value, locale, resource);
             setTimeout(() => store.set('saving', false), 1500);
             this.translatorItemDataUpdated.emit();
         }
@@ -397,12 +465,27 @@ const InstantAppsLanguageTranslatorItem = class {
         }
     }
     getTranslatedLocaleCallbackData() {
-        const { fieldName } = this;
         const locale = store.get('currentLanguage');
         const resource = store.get('portalItemResource');
-        return { fieldName, locale, resource };
+        return { locale, resource };
+    }
+    getIcon(setting) {
+        const settingToUse = setting !== null && setting !== void 0 ? setting : this.setting;
+        switch (settingToUse.stringType) {
+            case 'title':
+                return EIcons.Title;
+            case 'subtitle':
+                return EIcons.Subtitle;
+            case 'text':
+                return EIcons.Text;
+            case 'button':
+                return EIcons.Button;
+            case 'string':
+                return EIcons.String;
+            default:
+                return EIcons.SettingIndicator;
+        }
     }
-    get el() { return getElement(this); }
 };
 InstantAppsLanguageTranslatorItem.style = instantAppsLanguageTranslatorItemCss;