@esri/solutions-components 0.7.3 → 0.7.4

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

@@ -0,0 +1,463 @@
+/*!
+ * Copyright 2022 Esri
+ * 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 { l as loadModules } from './loadModules-037feea8.js';
+import { b as getLocaleComponentStrings } from './locale-53d724b5.js';
+import { w as widthBreakpoints } from './breakpoints-f0f1417d.js';
+import './esri-loader-eda07632.js';
+import './_commonjsHelpers-d5f9d613.js';
+import './languageUtil-8b54477c.js';
+
+const instantAppsScoreboardCss = ":host{display:block;--instant-apps-scoreboard-background-color:var(--calcite-ui-foreground-1);--instant-apps-scoreboard-text-color:var(--calcite-ui-text-1);--instant-apps-scoreboard-mobile-position-bottom:0;background-color:var(--instant-apps-scoreboard-background-color);color:var(--instant-apps-scoreboard-text-color)}:host .instant-apps-scoreboard{box-sizing:border-box;border:1px solid var(--calcite-ui-border-1);box-shadow:0px 3px 15px rgba(0, 0, 0, 0.2);border-radius:3px}:host .instant-apps-scoreboard calcite-loader{--calcite-loader-padding:1rem}:host .instant-apps-scoreboard__items-container{display:flex}:host .instant-apps-scoreboard__items-container calcite-action{height:100%}:host .instant-apps-scoreboard__items,:host .instant-apps-scoreboard__item{box-sizing:border-box;display:flex}:host .instant-apps-scoreboard__items{list-style-type:none;padding-left:0;margin:0;padding-top:1.75%;padding-bottom:1.75%;width:100%}:host .instant-apps-scoreboard__item{flex-direction:column;justify-content:flex-end;align-items:center;padding:1%}:host .instant-apps-scoreboard__item-label{box-sizing:border-box;line-height:24px;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;word-break:break-word;font-size:1rem;font-weight:400;text-align:center}:host .instant-apps-scoreboard__item-value{display:flex;justify-content:center;align-items:center;min-width:32px;min-height:32px;margin-top:5px;font-size:1.5rem;font-weight:900}:host .instant-apps-scoreboard__item-value-placeholder{display:inline-block;width:32px;height:32px;background-color:var(--calcite-ui-foreground-3);border-radius:4px}:host(.instant-apps-scoreboard__position--bottom){bottom:0}:host(.instant-apps-scoreboard__position--bottom) .instant-apps-scoreboard{display:flex;justify-content:center}:host(.instant-apps-scoreboard__position--bottom) .instant-apps-scoreboard__items{display:flex;justify-content:center}:host(.instant-apps-scoreboard__position--bottom) .instant-apps-scoreboard__item{min-width:10vw;vertical-align:top}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--floating){left:50%;max-width:calc(100% - 30px);transform:translate(-50%, -15px)}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--floating) .instant-apps-scoreboard{min-width:25vw}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--pinned){left:unset;bottom:0;transform:unset;width:100%}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--pinned) .instant-apps-scoreboard{min-width:unset}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--pinned) .instant-apps-scoreboard__items-container{width:100%;justify-content:space-between}:host(.instant-apps-scoreboard__position--side) .instant-apps-scoreboard{display:flex;justify-content:center;align-items:center;width:10vw;overflow-y:auto}:host(.instant-apps-scoreboard__position--side) .instant-apps-scoreboard__items-container{flex-direction:column;height:100%;box-sizing:border-box}:host(.instant-apps-scoreboard__position--side) .instant-apps-scoreboard__items-container calcite-action{height:unset;width:100%}:host(.instant-apps-scoreboard__position--side) .instant-apps-scoreboard__items{flex-direction:column;padding:10px}:host(.instant-apps-scoreboard__position--side) .instant-apps-scoreboard__item{padding-top:0.5vh;padding-bottom:0.5vh}:host(.instant-apps-scoreboard__position--side.instant-apps-scoreboard__mode--floating){top:15px;left:15px;max-height:calc(100% - 30px)}:host(.instant-apps-scoreboard__position--side.instant-apps-scoreboard__mode--floating) .instant-apps-scoreboard{min-width:10vw;min-height:35vh}:host(.instant-apps-scoreboard__position--side.instant-apps-scoreboard__mode--pinned){top:unset;left:unset;transform:unset;height:100%}:host(.instant-apps-scoreboard__position--side.instant-apps-scoreboard__mode--pinned) .instant-apps-scoreboard{height:100%}:host(.instant-apps-scoreboard__position--side.instant-apps-scoreboard__mode--pinned) .instant-apps-scoreboard__items-container{justify-content:space-between}:host(.instant-apps-scoreboard__position--left.instant-apps-scoreboard__mode--floating){left:15px}:host(.instant-apps-scoreboard__position--right.instant-apps-scoreboard__mode--floating){left:unset;right:15px}:host(.instant-apps-scoreboard__position--left.instant-apps-scoreboard__mode--pinned){left:0}:host(.instant-apps-scoreboard__position--right.instant-apps-scoreboard__mode--pinned){left:unset;right:0}@media only screen and (min-width: 992px){:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--pinned){bottom:var(--instant-apps-scoreboard-mobile-position-bottom)}:host(.instant-apps-scoreboard__position--bottom.instant-apps-scoreboard__mode--pinned) .instant-apps-scoreboard__item{justify-content:center;min-width:unset;flex-grow:1}}";
+
+// Constants
+const BASE = 'instant-apps-scoreboard';
+const ITEM_LIMIT_FALLBACK = 6;
+const KEY_PREFIX = `${BASE}--`;
+const __BASE__ = `${BASE}__`;
+const MOBILE_BREAKPOINT = widthBreakpoints.medium[1];
+const CSS = {
+    BASE,
+    itemsContainer: `${__BASE__}items-container`,
+    items: `${__BASE__}items`,
+    item: `${__BASE__}item`,
+    label: `${__BASE__}item-label`,
+    value: `${__BASE__}item-value`,
+    valuePlaceholder: `${__BASE__}item-value-placeholder`,
+    position: {
+        bottom: `${__BASE__}position--bottom`,
+        side: `${__BASE__}position--side`,
+        left: `${__BASE__}position--left`,
+        right: `${__BASE__}position--right`,
+    },
+    mode: {
+        floating: `${__BASE__}mode--floating`,
+        pinned: `${__BASE__}mode--pinned`,
+    },
+};
+const InstantAppsScoreboard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scoreboardItemsUpdated = createEvent(this, "scoreboardItemsUpdated", 7);
+        this.view = undefined;
+        this.items = undefined;
+        this.position = "bottom" /* Scoreboard.Bottom */;
+        this.mode = "floating" /* Scoreboard.Floating */;
+        this.itemLimit = 6;
+        this.autoDockEnabled = true;
+        this.geometry = null;
+        this.state = "loading" /* Scoreboard.Loading */;
+        this.messages = undefined;
+        this.itemIndex = 0;
+        this.layers = undefined;
+        this.layerViews = undefined;
+        this.isMobile = false;
+    }
+    scoreboardItemsUpdatedHandler() {
+        this.scoreboardItemsUpdated.emit(this.items);
+    }
+    // Watchers
+    generateUIDs() {
+        // Generates a series of UIDs (unique identifiers) to ensure each item is unique to properly handle comparisons
+        this.itemIndex = 0;
+        this.items.forEach(this.generateUID());
+    }
+    async storeLayers() {
+        this.state = "calculating" /* Scoreboard.Calculating */;
+        await this.view.map.loadAll();
+        const layerIds = this.items.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.id; });
+        const isNotTable = (layer) => !layer.isTable;
+        const isAcceptableLayer = (layer) => layer.type === 'feature' || layer.type === 'scene';
+        const notAddedYet = (layer) => layerIds.indexOf(layer.id) > -1;
+        const validateLayer = (layer) => isNotTable(layer) && isAcceptableLayer(layer) && notAddedYet(layer);
+        this.layers = this.view.map.allLayers.filter(layer => validateLayer(layer));
+        this.watchLayerVisibility();
+    }
+    async storeLayerViews() {
+        if (this.layers && this.layers.length > 0) {
+            this.layers.forEach(layer => (layer.outFields = ['*']));
+            const promises = [];
+            this.layers.forEach(layer => {
+                const layerToLoad = layer;
+                const layerViewToLoad = this.view.whenLayerView(layerToLoad);
+                promises.push(layerViewToLoad);
+            });
+            const settledPromises = await Promise.allSettled(promises);
+            const fulfilledPromises = settledPromises.filter(promise => promise.status == 'fulfilled' && promise.value);
+            const layerViews = fulfilledPromises.map(fulfilledPromise => fulfilledPromise.value);
+            const layerViewUpdatePromises = [];
+            layerViews.forEach(layerView => { var _a; return layerViewUpdatePromises.push((_a = this.reactiveUtils) === null || _a === void 0 ? void 0 : _a.whenOnce(() => !layerView.updating)); });
+            await Promise.all(layerViewUpdatePromises);
+            this.layerViews = new this.Collection([...layerViews]);
+        }
+    }
+    calculateScoreboardItemValuesFromGeometry() {
+        this.calculateScoreboardItemValues();
+    }
+    async calculateScoreboardItemValues() {
+        if ((this.layers && this.layers.length === 0) || (this.layerViews && this.layerViews.length === 0))
+            return;
+        this.state = "calculating" /* Scoreboard.Calculating */;
+        const items_temp = [...this.items];
+        const queryFeaturePromises = [];
+        this.queryStatDefinitions(items_temp, queryFeaturePromises);
+        const queryFeaturesRes = await Promise.all(queryFeaturePromises);
+        this.handleQueryFeaturesResponses(queryFeaturesRes, items_temp);
+        this.items.length = 0;
+        items_temp.forEach(item => this.items.push(item));
+        this.state = "complete" /* Scoreboard.Complete */;
+        this.scoreboardItemsUpdatedHandler();
+        this.initStationaryWatcher();
+    }
+    // Lifecycle methods
+    async componentWillLoad() {
+        var _a;
+        const resizeObesrver = new ResizeObserver(() => {
+            this.itemIndex = 0;
+            if (this.autoDockEnabled)
+                this.isMobile = !!this.checkMobile;
+        });
+        resizeObesrver.observe((_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement);
+        try {
+            this.state = "loading" /* Scoreboard.Loading */;
+            await this.initMessages();
+        }
+        catch (_b) {
+            this.state = "disabled" /* Scoreboard.Disabled */;
+            return Promise.reject();
+        }
+        finally {
+            if (!this.view || !this.items) {
+                this.state = "disabled" /* Scoreboard.Disabled */;
+                return Promise.reject();
+            }
+            else {
+                try {
+                    await this.initModules();
+                    return Promise.resolve();
+                }
+                catch (_c) {
+                    this.state = "disabled" /* Scoreboard.Disabled */;
+                    return Promise.reject();
+                }
+            }
+        }
+    }
+    async componentDidLoad() {
+        var _a;
+        if (this.state === "disabled" /* Scoreboard.Disabled */)
+            return;
+        try {
+            await ((_a = this.reactiveUtils) === null || _a === void 0 ? void 0 : _a.whenOnce(() => { var _a; return (_a = this.view) === null || _a === void 0 ? void 0 : _a.ready; }));
+            this.generateUIDs();
+            await this.loadMapResources();
+            this.storeLayers();
+            this.initViewUpdateWatcher();
+        }
+        catch (_b) {
+            this.state = "disabled" /* Scoreboard.Disabled */;
+            console.error(`${BASE}: FAILED TO LOAD MAP RESOURCES`);
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f;
+        this.state = "disabled" /* Scoreboard.Disabled */;
+        this.itemIndex = 0;
+        (_a = this.layers) === null || _a === void 0 ? void 0 : _a.removeAll();
+        (_b = this.layers) === null || _b === void 0 ? void 0 : _b.destroy();
+        this.layers = null;
+        (_c = this.layerViews) === null || _c === void 0 ? void 0 : _c.removeAll();
+        (_d = this.layerViews) === null || _d === void 0 ? void 0 : _d.destroy();
+        this.layerViews = null;
+        (_e = this.handles) === null || _e === void 0 ? void 0 : _e.removeAll();
+        (_f = this.handles) === null || _f === void 0 ? void 0 : _f.destroy();
+        this.handles = null;
+    }
+    // Initialize
+    async initMessages() {
+        let messages;
+        try {
+            const res = await getLocaleComponentStrings(this.el);
+            messages = res[0];
+            this.messages = Object.assign(Object.assign({}, this.messages), messages);
+            return Promise.resolve();
+        }
+        catch (err) {
+            console.error('FAILED TO LOAD MESSAGES');
+            Promise.reject();
+        }
+    }
+    async initModules() {
+        try {
+            const [Handles, reactiveUtils, Collection, intl] = await loadModules(['esri/core/Handles', 'esri/core/reactiveUtils', 'esri/core/Collection', 'esri/intl']);
+            // Store modules for future use
+            this.reactiveUtils = reactiveUtils;
+            this.Collection = Collection;
+            this.intl = intl;
+            // Instantiate handles and collections
+            this.handles = new Handles();
+            this.layers = new Collection();
+            this.layerViews = new Collection();
+            return Promise.resolve();
+        }
+        catch (err) {
+            console.error(err);
+            this.state = "disabled" /* Scoreboard.Disabled */;
+            return Promise.reject();
+        }
+    }
+    async loadMapResources() {
+        const { map } = this.view;
+        const webItem = map;
+        try {
+            await webItem.loadAll();
+            return Promise.resolve();
+        }
+        catch (err) {
+            console.error(err);
+            this.state = "disabled" /* Scoreboard.Disabled */;
+            return Promise.reject();
+        }
+    }
+    generateUID() {
+        return (item) => {
+            // Generates a random number to be used for radix in Number.toString()
+            const randNum = Math.random();
+            const randomInt = Math.floor(Math.random() * 10) + 11;
+            // Generates a random string of characters - remove redundant '0.';
+            const randStr = randNum.toString(randomInt).replace('0.', '');
+            const uid = randStr;
+            item['uid'] = uid;
+        };
+    }
+    // Start of render methods
+    render() {
+        var _a, _b;
+        const { state } = this;
+        const isLoading = state === "loading" /* Scoreboard.Loading */;
+        const isCalculating = state === "calculating" /* Scoreboard.Calculating */;
+        const isDisabled = state === "disabled" /* Scoreboard.Disabled */;
+        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 h(Host, { class: `${positionClass} ${styleClass}` }, isDisabled ? null : [progress, ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.renderBase() : null]);
+    }
+    renderBase() {
+        return (h("div", { key: "instant-apps-scoreboard-base", class: BASE }, this.renderContent()));
+    }
+    renderContent() {
+        const { state } = this;
+        return state === "loading" /* Scoreboard.Loading */ ? this.renderLoader() : state === "calculating" /* Scoreboard.Calculating */ || state === "complete" /* Scoreboard.Complete */ ? this.renderItemsContainer() : null;
+    }
+    renderItemsContainer() {
+        const [previousButton, nextButton] = this.renderPreviousNextButtons();
+        return (h("div", { class: CSS.itemsContainer }, previousButton, this.renderItems(), nextButton));
+    }
+    renderPreviousNextButtons() {
+        var _a, _b, _c;
+        const itemLimit = this.getItemLimit();
+        const isBelowOrAtLimit = ((_a = this.items.filter(item => item.visible)) === null || _a === void 0 ? void 0 : _a.length) <= itemLimit;
+        const isBeginning = this.itemIndex === 0;
+        const isEnd = this.isEnd;
+        const isBottom = this.isMobile ? true : this.position === "bottom" /* Scoreboard.Bottom */;
+        const iconPosition = isBottom ? "start" /* ScoreboardAlignment.Start */ : "center" /* ScoreboardAlignment.Center */;
+        const previous = isBottom ? "chevron-left" /* ScoreboardIcons.Left */ : "chevron-up" /* ScoreboardIcons.Up */;
+        const next = isBottom ? "chevron-right" /* ScoreboardIcons.Right */ : "chevron-down" /* ScoreboardIcons.Down */;
+        const iconType = { previous, next };
+        const previousIcon = isBeginning || isBelowOrAtLimit ? "blank" /* ScoreboardIcons.Blank */ : iconType.previous;
+        const nextIcon = isEnd || isBelowOrAtLimit ? "blank" /* ScoreboardIcons.Blank */ : iconType.next;
+        const isDisabled = { previous: isBeginning || isBelowOrAtLimit, next: isEnd || isBelowOrAtLimit };
+        const appearance = "transparent" /* ScoreboardAppearance.Transparent */;
+        const scale = this.isMobile ? "s" /* ScoreboardScale.Small */ : "l" /* ScoreboardScale.Large */;
+        const t9n = {
+            previous: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.previous,
+            next: (_c = this.messages) === null || _c === void 0 ? void 0 : _c.next,
+        };
+        return [
+            h("calcite-action", { onClick: this.previousItem.bind(this), icon: previousIcon, disabled: isDisabled.previous, alignment: iconPosition, scale: scale, appearance: appearance, text: t9n.previous, label: t9n.previous }),
+            h("calcite-action", { onClick: this.nextItem.bind(this), icon: nextIcon, disabled: isDisabled.next, alignment: iconPosition, scale: scale, appearance: appearance, text: t9n.next, label: t9n.next }),
+        ];
+    }
+    renderItems() {
+        const { items } = CSS;
+        const itemToDisplay = this.getItemsToDisplay;
+        const scoreboardItems = itemToDisplay.map(item => this.renderItem(item));
+        return h("ul", { class: items }, scoreboardItems);
+    }
+    renderItem(scoreboardItem) {
+        const { label } = scoreboardItem;
+        return (h("li", { class: CSS.item }, h("span", { class: CSS.label, title: label }, label), this.renderValue(scoreboardItem)));
+    }
+    renderValue(scoreboardItem) {
+        var _a, _b, _c;
+        const { displayValue } = scoreboardItem;
+        const isCalculating = this.state === "calculating" /* Scoreboard.Calculating */;
+        const isDisabled = this.state === "disabled" /* Scoreboard.Disabled */;
+        const showPlaceholder = displayValue === undefined && isCalculating;
+        const valueToDisplay = displayValue ? displayValue : (_a = this.messages) === null || _a === void 0 ? void 0 : _a.NA;
+        const layer = (_b = this.layers) === null || _b === void 0 ? void 0 : _b.find(layer => { var _a; return ((_a = scoreboardItem === null || scoreboardItem === void 0 ? void 0 : scoreboardItem.layer) === null || _a === void 0 ? void 0 : _a.id) === layer.id; });
+        const isNotVisible = !(layer === null || layer === void 0 ? void 0 : layer.visible);
+        const content = showPlaceholder ? (this.renderValuePlaceholder()) : !isDisabled ? (isNotVisible ? (h("calcite-icon", { icon: "view-hide", scale: "l", title: (_c = this.messages) === null || _c === void 0 ? void 0 : _c.layerVisibilityOff })) : (valueToDisplay)) : ('');
+        return h("span", { class: CSS.value }, content);
+    }
+    renderValuePlaceholder() {
+        return h("span", { class: CSS.valuePlaceholder });
+    }
+    renderProgress() {
+        const key = `${KEY_PREFIX}calcite-`;
+        return h("calcite-progress", { key: `${key}progress`, type: "indeterminate" });
+    }
+    renderLoader() {
+        var _a;
+        const key = `${KEY_PREFIX}calcite-`;
+        const loading = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading;
+        return h("calcite-loader", { key: `${key}loader`, label: loading, text: loading, scale: "m" });
+    }
+    // End of render methods
+    // Getters
+    get getPositionClass() {
+        const { bottom, left, right, side } = CSS.position;
+        const leftRight = `${this.position === "left" /* Scoreboard.Left */ ? left : right} ${side}`;
+        return this.isMobile || this.position === "bottom" /* Scoreboard.Bottom */ ? bottom : leftRight;
+    }
+    get getStyleClass() {
+        const { floating, pinned } = CSS.mode;
+        return this.isMobile ? pinned : this.mode === "floating" /* Scoreboard.Floating */ ? floating : pinned;
+    }
+    get checkMobile() {
+        var _a, _b;
+        const hostElParentWidth = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+        return !isNaN(hostElParentWidth) && hostElParentWidth > 0 ? hostElParentWidth < MOBILE_BREAKPOINT : false;
+    }
+    get getItemsToDisplay() {
+        const itemLimit = this.getItemLimit();
+        return this.items.filter(item => item.visible).slice(this.itemIndex, itemLimit + this.itemIndex);
+    }
+    get isEnd() {
+        const itemLimit = this.getItemLimit();
+        const lastItems = this.items.slice(this.items.length - itemLimit);
+        const uidsOfLast = lastItems.map(item => item['uid']);
+        const uidsOfCurrent = this.items.slice(this.itemIndex, this.itemIndex + itemLimit).map(item => item['uid']);
+        return uidsOfLast.every((val, index) => val === uidsOfCurrent[index]);
+    }
+    // UI interactions
+    previousItem() {
+        this.itemIndex = this.itemIndex - 1;
+    }
+    nextItem() {
+        this.itemIndex = this.itemIndex + 1;
+    }
+    // Query statistic definitions (FeatreLayerView/SceneLayerView.queryFeatures())
+    queryStatDefinitions(items, queryFeaturePromises) {
+        const getStatsDefinition = (item) => {
+            const { field, operation } = item;
+            const onStatisticField = field;
+            const outStatisticFieldName = `${field}_${operation}`;
+            const statisticType = operation;
+            return { onStatisticField, outStatisticFieldName, statisticType };
+        };
+        const getStatDefinitionQuery = (layerView, statDefinition) => {
+            const query = layerView.createQuery();
+            const outStatistics = [statDefinition];
+            const geometry = this.geometry ? this.geometry : this.view.extent;
+            query.outStatistics = outStatistics;
+            query.geometry = geometry;
+            return query;
+        };
+        const queryFeaturesForItem_LayerView = () => {
+            return async (item) => {
+                var _a;
+                const layerView = (_a = this.layerViews) === null || _a === void 0 ? void 0 : _a.find(layerView => { var _a; return layerView.layer.id === ((_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.id); });
+                if (!layerView)
+                    return;
+                const statDefinition = getStatsDefinition(item);
+                const query = getStatDefinitionQuery(layerView, statDefinition);
+                const queryFeaturesRes = layerView.queryFeatures(query);
+                queryFeaturePromises.push(queryFeaturesRes);
+            };
+        };
+        items.forEach(queryFeaturesForItem_LayerView());
+    }
+    handleQueryFeaturesResponses(queryFeaturesRes, items) {
+        const getValue = (stat) => {
+            const features = stat.features;
+            const feature = features[0];
+            const { attributes } = feature;
+            const attrValues = Object.values(attributes);
+            return attrValues[0];
+        };
+        const getNumberFormatOptions = () => {
+            const notation = 'compact';
+            const compactDisplay = 'short';
+            return { notation, compactDisplay };
+        };
+        const updateItemValue = () => {
+            return (stat, statIndex) => {
+                const value = getValue(stat);
+                const numberFormatOptions = getNumberFormatOptions();
+                const isNotNull = value !== null;
+                const formattedNumber = isNotNull ? this.intl.formatNumber(value, numberFormatOptions) : null;
+                const displayValue = isNotNull ? `${formattedNumber}` : '';
+                items[statIndex].displayValue = displayValue;
+                items[statIndex].value = value;
+            };
+        };
+        queryFeaturesRes.forEach(updateItemValue());
+    }
+    initStationaryWatcher() {
+        var _a, _b;
+        const whenOnceConfig = { once: true, initial: true };
+        const isNotInteractingWatcher = () => {
+            var _a;
+            return (_a = this.reactiveUtils) === null || _a === void 0 ? void 0 : _a.when(() => { var _a; return !((_a = this.view) === null || _a === void 0 ? void 0 : _a.interacting); }, () => this.calculateScoreboardItemValues(), whenOnceConfig);
+        };
+        const stationaryWatcher = () => {
+            var _a;
+            return (_a = this.reactiveUtils) === null || _a === void 0 ? void 0 : _a.when(() => { var _a; return (_a = this.view) === null || _a === void 0 ? void 0 : _a.stationary; }, () => isNotInteractingWatcher());
+        };
+        const stationaryWatcherKey = 'stationary-watcher-key';
+        if ((_a = this.handles) === null || _a === void 0 ? void 0 : _a.has(stationaryWatcherKey))
+            this.handles.remove(stationaryWatcherKey);
+        (_b = this.handles) === null || _b === void 0 ? void 0 : _b.add(stationaryWatcher(), stationaryWatcherKey);
+    }
+    initViewUpdateWatcher() {
+        return this.reactiveUtils.watch(() => { var _a; return (_a = this.view) === null || _a === void 0 ? void 0 : _a.updating; }, () => {
+            this.reactiveUtils.when(() => { var _a; return !((_a = this.view) === null || _a === void 0 ? void 0 : _a.updating); }, () => this.calculateScoreboardItemValues(), { once: true, initial: true });
+        }, { initial: true });
+    }
+    watchLayerVisibility() {
+        var _a, _b;
+        if (!this.layers)
+            return;
+        const visibilityWatcherKey = 'visbilityWatcherKey';
+        (_a = this.handles) === null || _a === void 0 ? void 0 : _a.remove(visibilityWatcherKey);
+        const visibilityWatchers = [];
+        const watchVisbilityForLayer = (layer) => {
+            const activateScoreboardItemCalculation = async () => {
+                const layerView = await this.view.whenLayerView(layer);
+                await this.reactiveUtils.whenOnce(() => (layerView === null || layerView === void 0 ? void 0 : layerView.updating) === false);
+                this.calculateScoreboardItemValues();
+            };
+            const watcher = this.reactiveUtils.watch(() => layer === null || layer === void 0 ? void 0 : layer.visible, async () => activateScoreboardItemCalculation());
+            visibilityWatchers.push(watcher);
+        };
+        this.layers.forEach(watchVisbilityForLayer);
+        (_b = this.handles) === null || _b === void 0 ? void 0 : _b.add([...visibilityWatchers], visibilityWatcherKey);
+    }
+    getItemLimit() {
+        return this.itemLimit < 2 || this.itemLimit > 6 ? ITEM_LIMIT_FALLBACK : this.itemLimit;
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["generateUIDs", "storeLayers"],
+        "layers": ["storeLayerViews"],
+        "geometry": ["calculateScoreboardItemValuesFromGeometry"],
+        "layerViews": ["calculateScoreboardItemValues"]
+    }; }
+};
+InstantAppsScoreboard.style = instantAppsScoreboardCss;
+
+export { InstantAppsScoreboard as instant_apps_scoreboard };