@esri/solutions-components 0.10.6 → 0.10.7

package/dist/components/instant-apps-control-panel.js

@@ -68,9 +68,10 @@ const InstantAppsControlPanel$1 = /*@__PURE__*/ proxyCustomElement(class Instant
         };
     }
     _getExpand(component) {
+        var _a;
         const { view } = this;
         const { content } = component;
-        const expanded = false;
+        const expanded = (_a = component === null || component === void 0 ? void 0 : component.expanded) !== null && _a !== void 0 ? _a : false;
         return new this.Expand({ content, view, expanded, mode: MODE, group: GROUP });
     }
     _getComponentsNode() {

package/dist/components/instant-apps-time-filter.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement as HTMLElement$1, h as h$2, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, h as h$2, Host } from '@stencil/core/internal/client';
 import { c as createStore } from './index2.js';
 import { l as loadModules } from './loadModules2.js';
 import { g as getMessages } from './locale3.js';
@@ -21,6 +21,8 @@ const { state, onChange } = createStore({
     timeInfoItems: [],
     selectedTimeInfoItem: null,
     loading: true,
+    timeSliderConfig: {},
+    autoPlay: false,
 });
 
 /*
@@ -239,8 +241,8 @@ class InstantAppsTimeFilterViewModel {
                 'esri/core/Handles',
                 'esri/core/reactiveUtils',
                 'esri/widgets/TimeSlider',
-                'esri/TimeExtent',
-                'esri/TimeInterval',
+                'esri/time/TimeExtent',
+                'esri/time/TimeInterval',
                 'esri/layers/support/FeatureFilter',
                 'esri/layers/support/FeatureEffect',
             ]);
@@ -255,8 +257,11 @@ class InstantAppsTimeFilterViewModel {
         catch (_a) { }
     }
     async init(timeSliderRef) {
+        var _a, _b;
         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')
+            state.timeSlider.stop();
         const { view, timeInfoConfigItems } = state;
         if (!view)
             return;
@@ -268,7 +273,7 @@ class InstantAppsTimeFilterViewModel {
             this.setupFilterModeWatcher();
             return Promise.resolve();
         }
-        catch (_a) { }
+        catch (_c) { }
     }
     destroy() {
         var _a, _b;
@@ -313,6 +318,8 @@ class InstantAppsTimeFilterViewModel {
         state.selectedTimeInfoItem = initialTimeInfoItem;
         const config = this.getTimeSliderConfig(timeSliderRef);
         state.timeSlider = new TimeSlider(config);
+        if (state.autoPlay)
+            state.timeSlider.play();
         if (((_b = state.view) === null || _b === void 0 ? void 0 : _b.type) === '2d')
             this.initialize2DView();
     }
@@ -327,23 +334,16 @@ class InstantAppsTimeFilterViewModel {
         var _a;
         const [{ timeExtent, rangeStart, rangeEnd, unit }] = state.timeInfoItems;
         const { TimeExtent, TimeInterval } = this;
-        return {
-            container: timeSliderRef,
-            fullTimeExtent: timeExtent,
-            timeExtent: new TimeExtent({
+        const config = Object.assign({ container: timeSliderRef, fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
                 start: rangeStart,
                 end: rangeEnd,
-            }),
-            mode: 'time-window',
-            loop: true,
-            stops: {
+            }), mode: 'time-window', stops: {
                 interval: new TimeInterval({
                     unit,
                     value: 1,
                 }),
-            },
-            view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null,
-        };
+            }, view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
+        return config;
     }
     initialize2DView() {
         state.timeInfoItems.forEach(timeInfoItem => this.applyTimeExtent(timeInfoItem.layerView, new this.TimeExtent({ start: timeInfoItem.rangeStart, end: timeInfoItem.rangeEnd })));
@@ -451,6 +451,8 @@ const InstantAppsTimeFilter$1 = /*@__PURE__*/ proxyCustomElement(class InstantAp
         this.timeInfoConfigItems = [];
         this.filterMode = undefined;
         this.view = undefined;
+        this.timeSliderConfig = undefined;
+        this.autoPlay = false;
     }
     async updateTimeInfoConfigItems() {
         state.timeInfoConfigItems = this.timeInfoConfigItems;
@@ -459,10 +461,28 @@ const InstantAppsTimeFilter$1 = /*@__PURE__*/ proxyCustomElement(class InstantAp
     async updateFilterMode() {
         state.filterMode = this.filterMode;
     }
+    async updateTimeSliderConfig() {
+        state.timeSliderConfig = this.timeSliderConfig;
+        await viewModel.init(this.timeSliderRef);
+    }
+    async updateAutoPlay() {
+        state.autoPlay = this.autoPlay;
+        if (state.timeSlider) {
+            if (state.autoPlay) {
+                state.timeSlider.play();
+            }
+            else {
+                state.timeSlider.stop();
+            }
+        }
+    }
     async componentWillLoad() {
         try {
             state.view = this.view;
             state.timeInfoConfigItems = this.timeInfoConfigItems;
+            state.autoPlay = !!this.autoPlay;
+            if (this.timeSliderConfig)
+                state.timeSliderConfig = this.timeSliderConfig;
             if (this.filterMode)
                 state.filterMode = this.filterMode;
             await getMessages(this);
@@ -483,17 +503,14 @@ const InstantAppsTimeFilter$1 = /*@__PURE__*/ proxyCustomElement(class InstantAp
         viewModel.destroy();
     }
     render() {
-        return h$2(Host, { key: 'bf0887f83b19239ce1b81efad5c356c7edc05ba1' }, this._renderBase());
+        return h$2(Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
     }
     _renderBase() {
-        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this._renderMain()));
-    }
-    _renderMain() {
-        return (h$2(Fragment, null, this.view.type === '2d' && this._renderTopEl(), h$2("div", { ref: (ref) => (this.timeSliderRef = ref) })));
+        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), h$2("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));
     }
     _renderLoader() {
         var _a, _b;
-        return (state.loading && (h$2(Fragment, null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
+        return (state.loading && (h$2("div", null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
     }
     _renderTopEl() {
         const moreThanOneTimeLayer = this.timeInfoConfigItems.length > 1;
@@ -523,17 +540,23 @@ const InstantAppsTimeFilter$1 = /*@__PURE__*/ proxyCustomElement(class InstantAp
     get el() { return this; }
     static get watchers() { return {
         "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
-        "filterMode": ["updateFilterMode"]
+        "filterMode": ["updateFilterMode"],
+        "timeSliderConfig": ["updateTimeSliderConfig"],
+        "autoPlay": ["updateAutoPlay"]
     }; }
     static get style() { return InstantAppsTimeFilterStyle0; }
 }, [0, "instant-apps-time-filter", {
         "timeInfoConfigItems": [16],
         "filterMode": [16],
         "view": [16],
+        "timeSliderConfig": [16],
+        "autoPlay": [4, "auto-play"],
         "timeSliderRef": [32]
     }, undefined, {
         "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
-        "filterMode": ["updateFilterMode"]
+        "filterMode": ["updateFilterMode"],
+        "timeSliderConfig": ["updateTimeSliderConfig"],
+        "autoPlay": ["updateAutoPlay"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/esm/instant-apps-control-panel.entry.js

@@ -68,9 +68,10 @@ const InstantAppsControlPanel = class {
         };
     }
     _getExpand(component) {
+        var _a;
         const { view } = this;
         const { content } = component;
-        const expanded = false;
+        const expanded = (_a = component === null || component === void 0 ? void 0 : component.expanded) !== null && _a !== void 0 ? _a : false;
         return new this.Expand({ content, view, expanded, mode: MODE, group: GROUP });
     }
     _getComponentsNode() {

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

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h as h$2, H as Host, F as Fragment, g as getElement } from './index-e3f04fa1.js';
+import { r as registerInstance, h as h$2, H as Host, g as getElement } from './index-e3f04fa1.js';
 import { c as createStore } from './index-1dc14abf.js';
 import { l as loadModules } from './loadModules-03ba7abe.js';
 import { g as getMessages } from './locale-adb5ff0b.js';
@@ -19,6 +19,8 @@ const { state, onChange } = createStore({
     timeInfoItems: [],
     selectedTimeInfoItem: null,
     loading: true,
+    timeSliderConfig: {},
+    autoPlay: false,
 });
 
 /*
@@ -237,8 +239,8 @@ class InstantAppsTimeFilterViewModel {
                 'esri/core/Handles',
                 'esri/core/reactiveUtils',
                 'esri/widgets/TimeSlider',
-                'esri/TimeExtent',
-                'esri/TimeInterval',
+                'esri/time/TimeExtent',
+                'esri/time/TimeInterval',
                 'esri/layers/support/FeatureFilter',
                 'esri/layers/support/FeatureEffect',
             ]);
@@ -253,8 +255,11 @@ class InstantAppsTimeFilterViewModel {
         catch (_a) { }
     }
     async init(timeSliderRef) {
+        var _a, _b;
         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')
+            state.timeSlider.stop();
         const { view, timeInfoConfigItems } = state;
         if (!view)
             return;
@@ -266,7 +271,7 @@ class InstantAppsTimeFilterViewModel {
             this.setupFilterModeWatcher();
             return Promise.resolve();
         }
-        catch (_a) { }
+        catch (_c) { }
     }
     destroy() {
         var _a, _b;
@@ -311,6 +316,8 @@ class InstantAppsTimeFilterViewModel {
         state.selectedTimeInfoItem = initialTimeInfoItem;
         const config = this.getTimeSliderConfig(timeSliderRef);
         state.timeSlider = new TimeSlider(config);
+        if (state.autoPlay)
+            state.timeSlider.play();
         if (((_b = state.view) === null || _b === void 0 ? void 0 : _b.type) === '2d')
             this.initialize2DView();
     }
@@ -325,23 +332,16 @@ class InstantAppsTimeFilterViewModel {
         var _a;
         const [{ timeExtent, rangeStart, rangeEnd, unit }] = state.timeInfoItems;
         const { TimeExtent, TimeInterval } = this;
-        return {
-            container: timeSliderRef,
-            fullTimeExtent: timeExtent,
-            timeExtent: new TimeExtent({
+        const config = Object.assign({ container: timeSliderRef, fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
                 start: rangeStart,
                 end: rangeEnd,
-            }),
-            mode: 'time-window',
-            loop: true,
-            stops: {
+            }), mode: 'time-window', stops: {
                 interval: new TimeInterval({
                     unit,
                     value: 1,
                 }),
-            },
-            view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null,
-        };
+            }, view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
+        return config;
     }
     initialize2DView() {
         state.timeInfoItems.forEach(timeInfoItem => this.applyTimeExtent(timeInfoItem.layerView, new this.TimeExtent({ start: timeInfoItem.rangeStart, end: timeInfoItem.rangeEnd })));
@@ -448,6 +448,8 @@ const InstantAppsTimeFilter = class {
         this.timeInfoConfigItems = [];
         this.filterMode = undefined;
         this.view = undefined;
+        this.timeSliderConfig = undefined;
+        this.autoPlay = false;
     }
     async updateTimeInfoConfigItems() {
         state.timeInfoConfigItems = this.timeInfoConfigItems;
@@ -456,10 +458,28 @@ const InstantAppsTimeFilter = class {
     async updateFilterMode() {
         state.filterMode = this.filterMode;
     }
+    async updateTimeSliderConfig() {
+        state.timeSliderConfig = this.timeSliderConfig;
+        await viewModel.init(this.timeSliderRef);
+    }
+    async updateAutoPlay() {
+        state.autoPlay = this.autoPlay;
+        if (state.timeSlider) {
+            if (state.autoPlay) {
+                state.timeSlider.play();
+            }
+            else {
+                state.timeSlider.stop();
+            }
+        }
+    }
     async componentWillLoad() {
         try {
             state.view = this.view;
             state.timeInfoConfigItems = this.timeInfoConfigItems;
+            state.autoPlay = !!this.autoPlay;
+            if (this.timeSliderConfig)
+                state.timeSliderConfig = this.timeSliderConfig;
             if (this.filterMode)
                 state.filterMode = this.filterMode;
             await getMessages(this);
@@ -480,17 +500,14 @@ const InstantAppsTimeFilter = class {
         viewModel.destroy();
     }
     render() {
-        return h$2(Host, { key: 'bf0887f83b19239ce1b81efad5c356c7edc05ba1' }, this._renderBase());
+        return h$2(Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
     }
     _renderBase() {
-        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this._renderMain()));
-    }
-    _renderMain() {
-        return (h$2(Fragment, null, this.view.type === '2d' && this._renderTopEl(), h$2("div", { ref: (ref) => (this.timeSliderRef = ref) })));
+        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), h$2("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));
     }
     _renderLoader() {
         var _a, _b;
-        return (state.loading && (h$2(Fragment, null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
+        return (state.loading && (h$2("div", null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
     }
     _renderTopEl() {
         const moreThanOneTimeLayer = this.timeInfoConfigItems.length > 1;
@@ -520,7 +537,9 @@ const InstantAppsTimeFilter = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
-        "filterMode": ["updateFilterMode"]
+        "filterMode": ["updateFilterMode"],
+        "timeSliderConfig": ["updateTimeSliderConfig"],
+        "autoPlay": ["updateAutoPlay"]
     }; }
 };
 InstantAppsTimeFilter.style = InstantAppsTimeFilterStyle0;