@esri/solutions-components 0.10.24 → 0.10.25

package/dist/cjs/instant-apps-language-translator.cjs.entry.js

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a0af791.js');
-const utils = require('./utils-9343bd5b.js');
+const utils = require('./utils-62072741.js');
 const loadModules = require('./loadModules-8567855e.js');
 const locale = require('./locale-a965a573.js');
 const constants = require('./constants-0a4fc296.js');
@@ -17,7 +17,7 @@ require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./languageUtil-a3e1eafd.js');
 
-const instantAppsLanguageTranslatorCss = ".sc-instant-apps-language-translator-h{display:block}.sc-instant-apps-language-translator-h calcite-modal.sc-instant-apps-language-translator{--calcite-modal-content-padding:0}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header.sc-instant-apps-language-translator{display:flex;justify-content:space-between;width:100%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-text.sc-instant-apps-language-translator{font-size:18px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__saving-indicator.sc-instant-apps-language-translator{display:flex;align-items:center;font-size:14.5px;color:var(--calcite-color-brand)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__writing-icon.sc-instant-apps-language-translator{display:flex;justify-content:center;align-items:center;margin-right:5px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__close-button.sc-instant-apps-language-translator{width:175px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-tip.sc-instant-apps-language-translator{padding:20px;max-width:45vw}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator{display:flex;width:100%;position:sticky;top:0;background:var(--calcite-color-foreground-1);z-index:1}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator calcite-label.sc-instant-apps-language-translator{--calcite-label-margin-bottom:0;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator{box-sizing:border-box;display:flex;align-items:center;width:50%;padding:0.5%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__user-lang-text.sc-instant-apps-language-translator{font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:first-child{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:nth-child(2) calcite-select.sc-instant-apps-language-translator{width:255px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator calcite-input.sc-instant-apps-language-translator{width:300px;margin-left:30px}.ck.ck-reset.ck-editor.ck-rounded-corners.sc-instant-apps-language-translator{margin-top:10px !important;margin-left:55px !important}.ck-editor__editable.sc-instant-apps-language-translator{height:70px !important;font-size:0.875rem !important;line-height:1.375 !important}.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:first-child,.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:last-child{--ck-spacing-large:0.5rem !important}";
+const instantAppsLanguageTranslatorCss = ".sc-instant-apps-language-translator-h{display:block}.sc-instant-apps-language-translator-h calcite-modal.sc-instant-apps-language-translator{--calcite-modal-content-padding:0}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header.sc-instant-apps-language-translator{display:flex;justify-content:space-between;width:100%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-text.sc-instant-apps-language-translator{font-size:18px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__saving-indicator.sc-instant-apps-language-translator{display:flex;align-items:center;font-size:14.5px;color:var(--calcite-color-brand)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__writing-icon.sc-instant-apps-language-translator{display:flex;justify-content:center;align-items:center;margin-right:5px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__close-button.sc-instant-apps-language-translator{width:175px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-tip.sc-instant-apps-language-translator{padding:20px;max-width:45vw}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator{display:flex;width:100%;position:sticky;top:0;background:var(--calcite-color-foreground-1);z-index:1}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator calcite-label.sc-instant-apps-language-translator{--calcite-label-margin-bottom:0;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator{box-sizing:border-box;display:flex;align-items:center;width:50%;padding:0.5%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__user-lang-text.sc-instant-apps-language-translator{font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:first-child{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:nth-child(2) calcite-select.sc-instant-apps-language-translator{width:255px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator calcite-input.sc-instant-apps-language-translator{width:300px;margin-left:30px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator{display:flex;align-items:center}.sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__close-button.sc-instant-apps-language-translator,.sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__saving-indicator.sc-instant-apps-language-translator,.sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__last-auto-save.sc-instant-apps-language-translator{margin-right:20px}.ck.ck-reset.ck-editor.ck-rounded-corners.sc-instant-apps-language-translator{margin-top:10px !important;margin-left:55px !important}.ck-editor__editable.sc-instant-apps-language-translator{height:70px !important;font-size:0.875rem !important;line-height:1.375 !important}.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:first-child,.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:last-child{--ck-spacing-large:0.5rem !important}html[dir=rtl] .sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__close-button.sc-instant-apps-language-translator,html[dir=rtl] .sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__saving-indicator.sc-instant-apps-language-translator,html[dir=rtl] .sc-instant-apps-language-translator-h .instant-apps-language-translator__primary-content.sc-instant-apps-language-translator .instant-apps-language-translator__last-auto-save.sc-instant-apps-language-translator{margin-right:unset;margin-left:20px}";
 const InstantAppsLanguageTranslatorStyle0 = instantAppsLanguageTranslatorCss;
 
 const BASE = 'instant-apps-language-translator';
@@ -34,6 +34,8 @@ const CSS = {
     userLangText: `${BASE}__user-lang-text`,
     lastItem: `${BASE}--last-item`,
     writingIcon: `${BASE}__writing-icon`,
+    primaryContent: `${BASE}__primary-content`,
+    lastAutoSave: `${BASE}__last-auto-save`,
 };
 const InstantAppsLanguageTranslator = class {
     constructor(hostRef) {
@@ -60,6 +62,9 @@ const InstantAppsLanguageTranslator = class {
         this.initUIData();
         this.initSelectLanguage();
     }
+    componentWillLoad() {
+        utils.initExternalCKEditorStyles();
+    }
     async componentDidLoad() {
         this.initialize();
     }
@@ -109,23 +114,23 @@ const InstantAppsLanguageTranslator = class {
             const portalItemResource = (await constants.getPortalItemResource(this.portalItem));
             utils.store.set('portalItemResource', portalItemResource);
             const t9nData = await constants.fetchResourceData(this.request, portalItemResource);
+            utils.store.set('lastSave', t9nData.lastSave);
             utils.store.set('portalItemResourceT9n', t9nData !== null && t9nData !== void 0 ? t9nData : {});
         }
         catch (_a) { }
     }
     render() {
-        return (index.h(index.Host, { key: '2c017345058f822812f4f26d7360e40fa8a4cab1' }, this.renderModal(), this.renderPopoverTip()));
+        return (index.h(index.Host, { key: '1f68786d3e9bced7a2242033cf51fc4937bc910a' }, this.renderModal(), this.renderPopoverTip()));
     }
     renderModal() {
-        return (index.h("calcite-modal", { open: this.open, scale: "l", fullscreen: true, onCalciteModalClose: this.close.bind(this) }, this.renderHeader(), this.renderContent(), this.renderPrimaryButton()));
+        return (index.h("calcite-modal", { open: this.open, scale: "l", fullscreen: true, onCalciteModalClose: this.close.bind(this) }, this.renderHeader(), this.renderContent(), this.renderPrimaryContent()));
     }
     renderPopoverTip() {
         var _a;
         return (index.h("calcite-popover", { label: "", referenceElement: "headerTip", placement: "trailing", "auto-close": true, closable: true }, index.h("div", { class: CSS.headerTip }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.headerTip)));
     }
     renderHeader() {
-        const saving = utils.store.get('saving');
-        return (index.h("header", { class: CSS.header, slot: "header" }, this.renderHeaderText(), saving ? this.renderSavingIndicator() : null));
+        return (index.h("header", { class: CSS.header, slot: "header" }, this.renderHeaderText()));
     }
     renderHeaderText() {
         const { messages } = this;
@@ -133,9 +138,8 @@ const InstantAppsLanguageTranslator = class {
     }
     renderSavingIndicator() {
         var _a;
-        const saving = utils.store.get('saving');
         const t9n = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.saving;
-        return (index.h("div", { class: CSS.savingIndicator }, saving ? index.h("calcite-loader", { label: t9n, inline: true }) : null, index.h("span", null, t9n)));
+        return (index.h("div", { class: CSS.savingIndicator }, index.h("calcite-loader", { label: t9n, inline: true }), index.h("span", null, t9n)));
     }
     renderContent() {
         const localeItems = utils.getLocales(this.locales);
@@ -204,11 +208,25 @@ const InstantAppsLanguageTranslator = class {
         const translatedLanguageLabels = (_b = (_a = this.appSettings) === null || _a === void 0 ? void 0 : _a.translatedLanguageLabels) === null || _b === void 0 ? void 0 : _b[utils.languageTranslatorState.currentLanguage];
         const isLast = `${keyIndex === uiDataKeysLen - 1 ? CSS.lastItem : ''}`;
         const setting = this.appSettings.content.filter(contentItem => contentItem.id === key)[0];
-        return (index.h("instant-apps-language-translator-item", { key: `${key}-${keyIndex}`, class: isLast, fieldName: key, translatedLanguageLabels: translatedLanguageLabels, setting: setting, userLocaleInputOnChangeCallback: this.userLocaleInputOnChangeCallback, translatedLocaleInputOnChangeCallback: this.translatedLocaleInputOnChangeCallback }));
-    }
-    renderPrimaryButton() {
-        var _a;
-        return (index.h("calcite-button", { onClick: () => (this.open = false), slot: "primary", class: CSS.closeButton }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close));
+        return (index.h("instant-apps-language-translator-item", { key: `${key}-${keyIndex}`, class: isLast, fieldName: key, translatedLanguageLabels: translatedLanguageLabels, setting: setting, userLocaleInputOnChangeCallback: async (fieldName, value) => {
+                try {
+                    await this.userLocaleInputOnChangeCallback(fieldName, value);
+                    const resource = utils.store.get('portalItemResource');
+                    utils.updateLastSave(resource);
+                }
+                catch (_a) { }
+            }, translatedLocaleInputOnChangeCallback: async (fieldName, value, locale, resource) => {
+                try {
+                    await this.translatedLocaleInputOnChangeCallback(fieldName, value, locale, resource);
+                    utils.updateLastSave(resource);
+                }
+                catch (_a) { }
+            } }));
+    }
+    renderPrimaryContent() {
+        var _a, _b;
+        return (index.h("div", { class: CSS.primaryContent, slot: "primary" }, utils.store.get('saving') ? this.renderSavingIndicator() : null, utils.store.get('lastSave') ? (index.h("span", { key: "last-save", class: CSS.lastAutoSave }, (_a = this.messages) === null || _a === void 0 ? void 0 :
+            _a.lastAutoSave, " ", this.intl.formatDate(utils.store.get('lastSave')))) : null, index.h("calcite-button", { onClick: () => (this.open = false), class: CSS.closeButton }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.close)));
     }
     handleExpandCollapseAll() {
         this.isCollapse = !this.isCollapse;
@@ -265,7 +283,9 @@ const InstantAppsLanguageTranslator = class {
         utils.store.set('saving', true);
         try {
             const resource = await this.getPortalItemResource();
-            const dataStr = JSON.stringify(data);
+            const lastSave = Date.now();
+            utils.store.set('lastSave', lastSave);
+            const dataStr = JSON.stringify(Object.assign(Object.assign({}, data), { lastSave }));
             const blobParts = [dataStr];
             const options = { type: 'application/json' };
             const blob = new Blob(blobParts, options);

package/dist/cjs/instant-apps-measurement.cjs.entry.js

@@ -38,7 +38,7 @@ const InstantAppsMeasurement = class {
     componentDidLoad() { }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '0af812b1330d8e6dc26319b6c19ccc94b3704759' }, index.h("calcite-panel", { key: '61a7c3c7e880ddb4aeeeac24ac0c37eeedb96a0c', heading: (_a = this === null || this === void 0 ? void 0 : this.messages) === null || _a === void 0 ? void 0 : _a.label, closable: this.closable }, index.h("div", { key: '835e5e4f7a90618eb37a65bdca38e7ec684f54d1' }, this.renderActionPad()), this.renderMeasureToolPanel())));
+        return (index.h(index.Host, { key: '843dd716e3f9b125044afd9a2919a60b937ae8b0' }, index.h("calcite-panel", { key: '45dd9e43decdcdc0526139938751d727bd73b3e0', heading: (_a = this === null || this === void 0 ? void 0 : this.messages) === null || _a === void 0 ? void 0 : _a.label, closable: this.closable }, index.h("div", { key: 'beb440bfbb87cd00189630e442aabe97a1e83d9e' }, this.renderActionPad()), this.renderMeasureToolPanel())));
     }
     renderMeasureToolPanel() {
         const { view, coordinateFormat, areaUnit, linearUnit, activeToolType } = this;

package/dist/cjs/instant-apps-popover.cjs.entry.js

@@ -53,7 +53,7 @@ const InstantAppsPopover = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("calcite-popover", { key: '0a947f50aa4cdd6bc976114ae22306fb0209c2b4', ref: (el) => (this.popoverEl = el), heading: this.popoverTitle, "auto-close": true, placement: this.placement, messageOverrides: { close: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close }, "trigger-disabled": true, "ref-id": this.refId, closable: true, referenceElement: this.referenceElement, label: this.popoverTitle }, index.h("div", { key: '7cab29cdb387d8134443710ef99a25bcf82c763c', class: `${CSS.content}${this.disableAction ? ` ${CSS.actionDisabled}` : ''}` }, !this.disableAction ? (index.h("calcite-action", { key: "popover-action", class: CSS.action, onClick: this.popoverAction, icon: document.dir === 'rtl' ? 'chevron-right' : 'chevron-left', compact: true, "text-enabled": true, text: (((_b = this.messageOverrides) === null || _b === void 0 ? void 0 : _b.popoverAction) ? this.messageOverrides.popoverAction : this.messages.back) })) : null, index.h("section", { key: '88a40da705c769e1683d3fbcb399b5eeee60ddab' }, index.h("span", { key: 'c69d391e94a9be35f88af0a9ea7cd75bb3a4fe97', id: "subtitle" }, this.subtitle), index.h("p", { key: 'f14f885d04d2788c6b7f129e5b1294b0136162a0' }, this.content), this.imgSrc ? index.h("img", { key: `iac-popover-img-${this.refId}`, class: CSS.img, src: this.imgSrc, alt: this.imgAlt ? this.imgAlt : '' }) : null), this.pagination ? (index.h("div", { key: `iac-popover-footer-${this.index}`, class: CSS.footer }, index.h("span", null, this.index + 1, " ", (_c = this.messages) === null || _c === void 0 ? void 0 :
+        return (index.h("calcite-popover", { key: '325d942b43189ebeb5c3be2a4bac2c66f283a5cc', ref: (el) => (this.popoverEl = el), heading: this.popoverTitle, "auto-close": true, placement: this.placement, messageOverrides: { close: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close }, "trigger-disabled": true, "ref-id": this.refId, closable: true, referenceElement: this.referenceElement, label: this.popoverTitle }, index.h("div", { key: '46d0e04ac90ecf4765d29c48968c53873d475776', class: `${CSS.content}${this.disableAction ? ` ${CSS.actionDisabled}` : ''}` }, !this.disableAction ? (index.h("calcite-action", { key: "popover-action", class: CSS.action, onClick: this.popoverAction, icon: document.dir === 'rtl' ? 'chevron-right' : 'chevron-left', compact: true, "text-enabled": true, text: (((_b = this.messageOverrides) === null || _b === void 0 ? void 0 : _b.popoverAction) ? this.messageOverrides.popoverAction : this.messages.back) })) : null, index.h("section", { key: 'f48382c9f915edc1d4fd90e107c9c86efc2b2114' }, index.h("span", { key: '5e14762c0520cab8d1207a7aae255f185dc0319c', id: "subtitle" }, this.subtitle), index.h("p", { key: '6fd83761aa4acbcdead3bef826dba252f1cdf71d' }, this.content), this.imgSrc ? index.h("img", { key: `iac-popover-img-${this.refId}`, class: CSS.img, src: this.imgSrc, alt: this.imgAlt ? this.imgAlt : '' }) : null), this.pagination ? (index.h("div", { key: `iac-popover-footer-${this.index}`, class: CSS.footer }, index.h("span", null, this.index + 1, " ", (_c = this.messages) === null || _c === void 0 ? void 0 :
             _c.of, " ", (_e = (_d = this.parent) === null || _d === void 0 ? void 0 : _d.instantAppsPopovers) === null || _e === void 0 ? void 0 :
             _e.size), this.renderPagination())) : null)));
     }

package/dist/cjs/instant-apps-scoreboard.cjs.entry.js

@@ -248,7 +248,7 @@ const InstantAppsScoreboard = class {
         const progress = isLoading || isCalculating || ((_a = this.view) === null || _a === void 0 ? void 0 : _a.updating) ? this.renderProgress() : null;
         const positionClass = this.getPositionClass;
         const styleClass = this.getStyleClass;
-        return index.h(index.Host, { key: '0a4e0bd527aa63498f71650b418da1167c0570c0', class: `${positionClass} ${styleClass}` }, isDisabled ? null : [progress, ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.renderBase() : null]);
+        return index.h(index.Host, { key: '44beef3ec01847c89e09afa6469f05dd5caf9e9d', class: `${positionClass} ${styleClass}` }, isDisabled ? null : [progress, ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.renderBase() : null]);
     }
     renderBase() {
         return (index.h("div", { key: "instant-apps-scoreboard-base", class: BASE }, this.renderContent()));

package/dist/cjs/instant-apps-sign-in.cjs.entry.js

@@ -53,7 +53,7 @@ const InstantAppsSignIn = class {
     }
     render() {
         const signIn = this.ready ? this.renderContent() : null;
-        return index.h(index.Host, { key: 'af813637b99889bb82ab99c21d2b2dce986f546a' }, signIn);
+        return index.h(index.Host, { key: 'af7ff807a996fd2dbbc647988fc24e5a122c4efe' }, signIn);
     }
     renderContent() {
         return this.type === 'landingPage' ? this.renderLandingPageSignIn() : this.renderSignInContainer();

package/dist/cjs/instant-apps-splash.cjs.entry.js

@@ -98,7 +98,7 @@ const InstantAppsSplash = class {
         locale.getMessages(this);
     }
     render() {
-        return (index.h("calcite-modal", { key: '6d98522026f0aba032808d486474ac04501e9a81', onCalciteModalClose: this.close.bind(this), open: this.open, closeButtonDisabled: this.closeButtonDisabled, outsideCloseDisabled: this.outsideCloseDisabled }, this.renderHeader(), this.renderContent(), this.localStorageKey ? this.renderDontShowThisAgainCheckbox() : null, this.renderPrimaryButton(), this.secondaryButton ? this.renderSecondaryButton() : null));
+        return (index.h("calcite-modal", { key: 'd7ae1e9533ce3ac221547530c509e1682e253ab2', onCalciteModalClose: this.close.bind(this), open: this.open, closeButtonDisabled: this.closeButtonDisabled, outsideCloseDisabled: this.outsideCloseDisabled }, this.renderHeader(), this.renderContent(), this.localStorageKey ? this.renderDontShowThisAgainCheckbox() : null, this.renderPrimaryButton(), this.secondaryButton ? this.renderSecondaryButton() : null));
     }
     renderHeader() {
         const { titleText } = this;

package/dist/cjs/instant-apps-time-filter.cjs.entry.js

@@ -259,7 +259,7 @@ class InstantAppsTimeFilterViewModel {
         catch (_a) { }
     }
     async init(timeSliderRef) {
-        var _a, _b;
+        var _a, _b, _c;
         if (timeSliderRef)
             timeSliderRef.innerHTML = '';
         if (((_b = (_a = state === null || state === void 0 ? void 0 : state.timeSlider) === null || _a === void 0 ? void 0 : _a.viewModel) === null || _b === void 0 ? void 0 : _b.state) === 'playing')
@@ -269,13 +269,21 @@ class InstantAppsTimeFilterViewModel {
             return;
         try {
             await view.when();
-            const timeLayerViews = await this.getTimeLayerViews(view, timeInfoConfigItems);
-            state.timeInfoItems = this.generateTimeInfoItems(timeLayerViews, timeInfoConfigItems);
-            this.initTimeSlider(timeSliderRef);
-            this.setupFilterModeWatcher();
+            if (timeInfoConfigItems.length === 1 && ((_c = timeInfoConfigItems[0]) === null || _c === void 0 ? void 0 : _c.type) === 'map') {
+                this.initTimeSlider(timeSliderRef, timeInfoConfigItems[0]);
+            }
+            else {
+                const timeLayerViews = await this.getTimeLayerViews(view, timeInfoConfigItems);
+                state.timeInfoItems = this.generateTimeInfoItems(timeLayerViews, timeInfoConfigItems);
+                this.initTimeSlider(timeSliderRef);
+            }
             return Promise.resolve();
         }
-        catch (_c) { }
+        catch (_d) {
+        }
+        finally {
+            this.setupFilterModeWatcher();
+        }
     }
     destroy() {
         var _a, _b;
@@ -312,17 +320,26 @@ class InstantAppsTimeFilterViewModel {
             previousTimeExtent: null,
         };
     }
-    initTimeSlider(timeSliderRef) {
+    initTimeSlider(timeSliderRef, defaultItem) {
         var _a, _b;
-        const initialTimeInfoItem = (_a = state === null || state === void 0 ? void 0 : state.timeInfoItems) === null || _a === void 0 ? void 0 : _a[0];
-        if (!initialTimeInfoItem)
-            return;
         const { TimeSlider } = this;
-        state.selectedTimeInfoItem = initialTimeInfoItem;
-        const config = this.getTimeSliderConfig(timeSliderRef);
-        state.timeSlider = new TimeSlider(config);
-        if (state.autoPlay)
-            state.timeSlider.play();
+        const initializeSlider = config => {
+            state.timeSlider = new TimeSlider(config);
+            if (state.autoPlay)
+                state.timeSlider.play();
+        };
+        if (defaultItem) {
+            const config = this.getTimeSliderConfig(timeSliderRef, defaultItem);
+            initializeSlider(config);
+        }
+        else {
+            const initialTimeInfoItem = (_a = state === null || state === void 0 ? void 0 : state.timeInfoItems) === null || _a === void 0 ? void 0 : _a[0];
+            if (!initialTimeInfoItem)
+                return;
+            state.selectedTimeInfoItem = initialTimeInfoItem;
+            const config = this.getTimeSliderConfig(timeSliderRef);
+            initializeSlider(config);
+        }
         if (((_b = state.view) === null || _b === void 0 ? void 0 : _b.type) === '2d')
             this.initialize2DView();
     }
@@ -333,20 +350,33 @@ class InstantAppsTimeFilterViewModel {
             this.applyTimeExtent(fLayerView, ((_b = (_a = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.featureEffect) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.timeExtent) || ((_c = fLayerView.filter) === null || _c === void 0 ? void 0 : _c.timeExtent), newValue);
         }));
     }
-    getTimeSliderConfig(timeSliderRef) {
-        var _a;
-        const [{ timeExtent, rangeStart, rangeEnd, unit, timeIntervalValue }] = state.timeInfoItems;
+    getTimeSliderConfig(timeSliderRef, defaultItem) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { TimeExtent, TimeInterval } = this;
-        const config = Object.assign({ container: timeSliderRef, fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
-                start: rangeStart,
-                end: rangeEnd,
-            }), mode: 'time-window', stops: {
-                interval: new TimeInterval({
-                    unit,
-                    value: timeIntervalValue,
-                }),
-            }, view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
-        return config;
+        const baseConfig = Object.assign({ container: timeSliderRef, mode: 'time-window', view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
+        if (defaultItem) {
+            const timeSlider = (_d = (_c = (_b = state.view) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.widgets) === null || _d === void 0 ? void 0 : _d.timeSlider;
+            return Object.assign(Object.assign({}, baseConfig), { fullTimeExtent: timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.fullTimeExtent, timeExtent: timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.currentTimeExtent, stops: ((_e = timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.stopInterval) === null || _e === void 0 ? void 0 : _e.unit) && ((_f = timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.stopInterval) === null || _f === void 0 ? void 0 : _f.value)
+                    ? {
+                        interval: new TimeInterval({
+                            unit: (_g = timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.stopInterval) === null || _g === void 0 ? void 0 : _g.unit,
+                            value: (_h = timeSlider === null || timeSlider === void 0 ? void 0 : timeSlider.stopInterval) === null || _h === void 0 ? void 0 : _h.value,
+                        }),
+                    }
+                    : null });
+        }
+        else {
+            const [{ timeExtent, rangeStart, rangeEnd, unit, timeIntervalValue }] = state.timeInfoItems;
+            return Object.assign(Object.assign({}, baseConfig), { fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
+                    start: rangeStart,
+                    end: rangeEnd,
+                }), stops: {
+                    interval: new TimeInterval({
+                        unit,
+                        value: timeIntervalValue,
+                    }),
+                } });
+        }
     }
     initialize2DView() {
         state.timeInfoItems.forEach(timeInfoItem => this.applyTimeExtent(timeInfoItem.layerView, new this.TimeExtent({ start: timeInfoItem.rangeStart, end: timeInfoItem.rangeEnd })));
@@ -505,7 +535,7 @@ const InstantAppsTimeFilter = class {
         viewModel.destroy();
     }
     render() {
-        return index$1.h(index$1.Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
+        return index$1.h(index$1.Host, { key: '9366ce36d85d1b97ff9dad8a93f5cfb93d12551b' }, this._renderBase());
     }
     _renderBase() {
         return (index$1.h("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), index$1.h("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));