@esri/solutions-components 0.7.18 → 0.7.20

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

@@ -8,8 +8,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const utils = require('./utils-35b31785.js');
-require('./locale-9b9d0e94.js');
+const utils = require('./utils-6c713ba8.js');
+require('./locale-dab3f46a.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
@@ -129,7 +129,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 = {
@@ -145,78 +145,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) {
         index.registerInstance(this, hostRef);
         this.translatorItemDataUpdated = index.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 === utils.ESettingType.TextEditor;
     }
-    init() {
-        if (this.type === utils.ESettingType.TextEditor)
+    get calciteMode() {
+        return utils.isCalciteModeDark() ? utils.ECalciteMode.Dark : utils.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) {
             utils.store.onChange('uiData', () => this.handleEditorCollapse());
+        }
     }
     render() {
-        const uiDataItem = this.getUIDataItem();
-        return (index.h(index.Host, { class: `${utils.isCalciteModeDark() ? utils.ECalciteMode.Dark : utils.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 index.h(index.Fragment, null);
+        }
+        else {
+            return (index.h(index.Host, { class: this.calciteMode }, this.renderBase(), this.renderPopover()));
+        }
     }
-    renderBase(uiDataItem) {
-        return (index.h("div", { class: BASE$1 }, this.renderUserLocaleSection(uiDataItem), this.renderTranslatedLanguageSection()));
+    renderBase() {
+        return (index.h("div", { class: BASE$1 }, this.renderUserLocaleSection(), this.renderTranslatedLanguageSection()));
     }
-    renderUserLocaleSection(uiDataItem) {
+    renderPopover() {
+        const tip = this.getTip();
+        return (index.h("calcite-popover", { referenceElement: this.tipID, label: "", "auto-close": "true", placement: "trailing", closable: true }, index.h("span", { class: CSS$1.uiLocationPopoverContent }, index.h("span", { class: CSS$1.uiLocationItems }, this.getUILocation()), tip ? index.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 (index.h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(utils.EInputType.User, label), (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? this.renderInput(value, utils.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 (index.h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(utils.EInputType.User, label, uid), this.handleInputRender(utils.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 = utils.store.get('currentLanguage');
         const data = utils.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 (index.h("div", { class: `${CSS$1.section}${isSelected ? ` ${CSS$1.selected}` : ''}` }, this.renderItemHeader(utils.EInputType.Translation, this.translatedLanguageLabel), (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? this.renderInput(value, utils.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 (index.h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(utils.EInputType.Translation, label, uid), this.handleInputRender(utils.EInputType.Translation, value, uid)));
     }
-    renderInput(value, type) {
-        return this.type === 'string' || this.type === 'textarea'
-            ? type === utils.EInputType.User
-                ? this.renderUserLocaleInput(value)
-                : this.renderTranslatedLanguageInput(value)
-            : this.renderTextEditor(value, type);
-    }
-    renderUserLocaleInput(value) {
-        return (index.h("calcite-input", { class: utils.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 (index.h("calcite-input", { class: utils.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 (index.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 (index.h("div", { class: CSS$1.topRow }, index.h("div", { class: CSS$1.labelContainer }, this.renderExpandCollapseButton(), index.h("calcite-icon", { icon: utils.EIcons.SettingIndicator, scale: "s" }), index.h("span", { class: CSS$1.label }, type === utils.EInputType.Translation ? this.translatedLanguageLabel : label), type === utils.EInputType.User ? (index.h("button", { id: `${this.fieldName}goTo`, class: CSS$1.infoButton }, index.h("calcite-icon", { class: CSS$1.infoIcon, icon: utils.EIcons.Popover, scale: "s" }))) : null), this.renderCopyButton(type)));
+    renderNestedInput(inputType, contentItem) {
+        const locale = utils.store.get('currentLanguage');
+        const data = utils.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 === utils.EInputType.Translation ? this.translatedLanguageLabels[id] : label;
+        const isUser = inputType === utils.EInputType.User;
+        const inputValue = isUser ? value : translatedValue;
+        return (index.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 (index.h("div", { class: CSS$1.topRow }, this.renderItemHeaderLabel(type, label, contentItem), showCopyButton ? this.renderCopyButton(type, uid) : null));
+    }
+    renderItemHeaderLabel(type, label, contentItem) {
+        const isUserSectionWithNoNestedContent = type === utils.EInputType.User && !contentItem;
+        return (index.h("div", { class: CSS$1.labelContainer }, !contentItem ? this.renderExpandCollapseButton() : null, index.h("calcite-icon", { icon: this.getIcon(contentItem), scale: "s" }), index.h("span", { class: CSS$1.label }, label), isUserSectionWithNoNestedContent ? this.renderInfoButton() : null));
     }
     renderExpandCollapseButton() {
         const uiDataItem = this.getUIDataItem();
-        return (index.h("calcite-action", { onClick: this.handleExpand.bind(this, uiDataItem), icon: (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded) ? utils.EIcons.Expanded : utils.EIcons.Collapsed, scale: "s", appearance: "transparent", text: "" }));
+        const isExpanded = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded;
+        const icon = isExpanded ? utils.EIcons.Expanded : utils.EIcons.Collapsed;
+        return index.h("calcite-action", { onClick: this.handleExpand.bind(this, uiDataItem), icon: icon, scale: "s", appearance: "transparent", text: "" });
+    }
+    renderInfoButton() {
+        return (index.h("button", { id: this.tipID, class: CSS$1.infoButton }, index.h("calcite-icon", { class: CSS$1.infoIcon, icon: utils.EIcons.Popover, scale: "s" })));
+    }
+    renderCopyButton(type, uid) {
+        return index.h("calcite-action", { class: this.calciteMode, onClick: this.copySelection.bind(this, type, uid), slot: "action", icon: utils.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 === utils.EInputType.User
+                ? this.renderUserLocaleInput(value, uid)
+                : this.renderTranslatedLanguageInput(value, uid)
+            : this.renderTextEditor(value, type, uid);
     }
-    renderPopover(uiDataItem) {
-        const tip = this.getTip(uiDataItem);
-        return (index.h("calcite-popover", { referenceElement: `${this.fieldName}goTo`, label: "", "auto-close": "true", placement: "trailing", closable: true }, index.h("span", { class: CSS$1.uiLocationPopoverContent }, index.h("span", { class: CSS$1.uiLocationItems }, this.getUILocation(uiDataItem)), tip ? index.h("span", { class: CSS$1.tip }, tip) : null)));
+    renderUserLocaleInput(value, uid) {
+        return (index.h("calcite-input", { ref: (node) => (this.userInputs[uid] = node), key: uid, id: uid, class: utils.ECalciteMode.Light, "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleUserInputChange.bind(this) }));
     }
-    renderCopyButton(type) {
-        const darkMode = utils.isCalciteModeDark();
-        return (index.h("calcite-action", { class: darkMode ? utils.ECalciteMode.Dark : utils.ECalciteMode.Light, onClick: this.copySelection.bind(this, type), slot: "action", icon: utils.EIcons.Copy, appearance: "transparent", text: "" }));
+    renderTranslatedLanguageInput(value, uid) {
+        return (index.h("calcite-input", { ref: (node) => (this.translatedInputs[uid] = node), key: uid, id: uid, class: utils.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 (index.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 (!utils.languageTranslatorState.uiData)
@@ -229,7 +288,8 @@ const InstantAppsLanguageTranslatorItem = class {
         const updatedData = utils.getT9nData(currentLanguage, dataToWrite);
         utils.store.set('portalItemResourceT9n', updatedData);
     }
-    handleExpand(uiDataItem) {
+    handleExpand() {
+        const uiDataItem = this.getUIDataItem();
         uiDataItem.expanded = !uiDataItem.expanded;
         const uiData = new Map(utils.languageTranslatorState.uiData);
         uiData.set(this.fieldName, uiDataItem);
@@ -258,8 +318,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;
@@ -267,22 +327,24 @@ const InstantAppsLanguageTranslatorItem = class {
         });
         utils.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) => (index.h("span", { class: CSS$1.uiLocationItem }, index.h("span", null, breadCrumbLabel), breadCrumbLabelIndex !== breadCrumbLabels.length - 1 ? index.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 === utils.ESettingType.TextEditor) {
+    copySelection(type, uid) {
+        if (this.setting.type === utils.ESettingType.TextEditor) {
             this.copyTextEditorContent(type);
         }
         else {
-            this.copyCalciteInputContent(type);
+            this.copyCalciteInputContent(uid, type);
         }
     }
     copyTextEditorContent(type) {
@@ -316,11 +378,13 @@ const InstantAppsLanguageTranslatorItem = class {
         document.execCommand('copy');
         document.body.removeChild(tempElement);
     }
-    copyCalciteInputContent(type) {
-        const input = type === utils.EInputType.User ? this.userLocaleInput : this.translatedLangInput;
-        input.selectText();
-        const value = input.value;
-        navigator.clipboard.writeText(value);
+    copyCalciteInputContent(uid, inputType) {
+        const input = inputType === utils.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 === utils.EInputType.User) {
@@ -336,10 +400,11 @@ const InstantAppsLanguageTranslatorItem = class {
         utils.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);
             utils.store.set('saving', false);
         }
         catch (_a) {
@@ -365,10 +430,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(() => utils.store.set('saving', false), 1500);
             this.translatorItemDataUpdated.emit();
         }
@@ -380,10 +446,12 @@ const InstantAppsLanguageTranslatorItem = class {
     async handleTranslatedTextEditorChange(e) {
         utils.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(() => utils.store.set('saving', false), 1500);
             this.translatorItemDataUpdated.emit();
         }
@@ -401,12 +469,27 @@ const InstantAppsLanguageTranslatorItem = class {
         }
     }
     getTranslatedLocaleCallbackData() {
-        const { fieldName } = this;
         const locale = utils.store.get('currentLanguage');
         const resource = utils.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 utils.EIcons.Title;
+            case 'subtitle':
+                return utils.EIcons.Subtitle;
+            case 'text':
+                return utils.EIcons.Text;
+            case 'button':
+                return utils.EIcons.Button;
+            case 'string':
+                return utils.EIcons.String;
+            default:
+                return utils.EIcons.SettingIndicator;
+        }
     }
-    get el() { return index.getElement(this); }
 };
 InstantAppsLanguageTranslatorItem.style = instantAppsLanguageTranslatorItemCss;