@esri/solutions-components 0.7.3 → 0.7.5

package/dist/components/solution-store.js

@@ -3,9 +3,10 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { f as EUpdateType } from './interfaces.js';
 import { E as EFileType, j as jszip_min, S as SolutionTemplateFormatVersion } from './solution-resource.js';
+import './index3.js';
 import { c as cleanUrl, r as request, b as blobToFile, d as checkUrlPathTermination, f as getThumbnailFile, h as getItemDataAsJson, a as getProp, s as setCreateProp } from './restHelpersGet.js';
 
 /* Copyright (c) 2018-2019 Environmental Systems Research Institute, Inc.

package/dist/components/spatial-ref2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import './solution-resource.js';
+import './index3.js';
 import './interfaces.js';
 import { d as defineCustomElement$6 } from './checkbox.js';
 import { d as defineCustomElement$5 } from './icon.js';

package/dist/components/store.js

@@ -0,0 +1,86 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { l as loadModules } from './loadModules2.js';
+import { c as createStore } from './index4.js';
+
+async function getMergedEffect(presetLayerEffect, featureLayerView, type) {
+  const [jsonUtils] = await loadModules(['esri/layers/effects/jsonUtils']);
+  const { toJSON, fromJSON } = jsonUtils;
+  const layer = featureLayerView === null || featureLayerView === void 0 ? void 0 : featureLayerView.layer;
+  if (!presetLayerEffect) {
+    if (layer === null || layer === void 0 ? void 0 : layer.effect) {
+      return layer.effect;
+    }
+    else if (layer === null || layer === void 0 ? void 0 : layer.featureEffect) {
+      return type === 'includedEffect' ? layer.featureEffect.includedEffect : layer.featureEffect.excludedEffect;
+    }
+    else {
+      return null;
+    }
+  }
+  // CONVERT EXISTING EFFECT AND PRESET LAYER EFFECT TO JSON
+  const presetLayerEffectJSON = toJSON(presetLayerEffect);
+  const layerEffect = layer.effect;
+  const layerFeatureEffect = layer.featureEffect;
+  let existingEffect;
+  if (layerFeatureEffect) {
+    existingEffect = type === 'includedEffect' ? layer.featureEffect.includedEffect : layer.featureEffect.excludedEffect;
+  }
+  else {
+    existingEffect = layerEffect;
+  }
+  const existingEffectJSON = existingEffect ? toJSON(existingEffect) : null;
+  // RETURN PRESET LAYER EFFECT IF THERE ARE NO EXISTING EFFECTS
+  if (!existingEffectJSON) {
+    return fromJSON(presetLayerEffectJSON);
+  }
+  let effectToUse = [...existingEffectJSON];
+  if (presetLayerEffectJSON) {
+    // ITERATE THROUGH PRESET LAYER EFFECT JSON
+    presetLayerEffectJSON.forEach(presetLayerEffectItem => {
+      // ITERATE THROUGH EXISTING EFFECT JSON
+      effectToUse.forEach(existingEffectToUseItem => {
+        const { value } = existingEffectToUseItem;
+        if (value) {
+          // ITERATE THROUGH EXISTING EFFECT JSON VALUES
+          value.forEach((effectValue, effectIndex) => {
+            // REPLACE EXISTING EFFECT VALUE IF SAME TYPE IS PRESENT IN PRESET LAYER EFFECT
+            if (effectValue.type === presetLayerEffectItem.type) {
+              value[effectIndex] = presetLayerEffectItem;
+            }
+            // OTHERWISE MODIFY EXISTING EFFECT
+            else {
+              const notMerged = !existingEffectToUseItem.value.find(existingEffectItemToMerge => existingEffectItemToMerge.type === presetLayerEffectJSON[0].type);
+              // CHECK IF PRESET LAYER EFFECT HAS BEEN MERGED, IF NOT YET MERGED APPEND PRESET LAYER EFFECT TO EXISTING EFFECT
+              if (notMerged) {
+                existingEffectToUseItem.value = [...existingEffectToUseItem.value, ...presetLayerEffectJSON];
+              }
+            }
+          });
+        }
+        else {
+          // HANDLE NON SCALE EFFECTS
+          const notMerged = !effectToUse.find(nonScaleEffectToUseItem => nonScaleEffectToUseItem.type === existingEffectToUseItem.type);
+          const presetNotMerged = !effectToUse.find(nonScaleEffectToUseItem => nonScaleEffectToUseItem.type === presetLayerEffectItem.type);
+          if (presetNotMerged) {
+            effectToUse = [...effectToUse, presetLayerEffectItem];
+          }
+          if (notMerged) {
+            effectToUse = [...effectToUse, existingEffectToUseItem];
+          }
+        }
+      });
+    });
+  }
+  const mergedEffect = fromJSON(effectToUse);
+  return mergedEffect;
+}
+
+const InteractiveLegendStore = createStore({ data: {}, relationshipRampExpandStates: {} });
+const interactiveLegendState = InteractiveLegendStore.state;
+const store = InteractiveLegendStore;
+
+export { getMergedEffect as g, interactiveLegendState as i, store as s };

package/dist/components/utils4.js

@@ -0,0 +1,111 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { b as getLocaleComponentStrings } from './locale3.js';
+import { c as createStore } from './index4.js';
+
+var EInputType;
+(function (EInputType) {
+  EInputType["User"] = "user";
+  EInputType["Translation"] = "translation";
+})(EInputType || (EInputType = {}));
+var ESettingType;
+(function (ESettingType) {
+  ESettingType["String"] = "string";
+  ESettingType["TextEditor"] = "textEditor";
+})(ESettingType || (ESettingType = {}));
+var EIcons;
+(function (EIcons) {
+  EIcons["ExpandCollapse"] = "list-merge";
+  EIcons["SettingIndicator"] = "list-button";
+  EIcons["Popover"] = "information";
+  EIcons["Expanded"] = "chevron-down";
+  EIcons["Collapsed"] = "chevron-right";
+  EIcons["Copy"] = "copy-to-clipboard";
+  EIcons["Breadcrumb"] = "chevron-right";
+  EIcons["DefaultIcon"] = "language";
+})(EIcons || (EIcons = {}));
+var ECalciteMode;
+(function (ECalciteMode) {
+  ECalciteMode["Light"] = "calcite-mode-light";
+  ECalciteMode["Dark"] = "calcite-mode-dark";
+})(ECalciteMode || (ECalciteMode = {}));
+
+const LanguageTranslatorStore = createStore({
+  uiData: null,
+  currentLanguage: null,
+  lastSave: null,
+  saving: false,
+  currentLocaleSettingItem: null,
+  portalItemResource: null,
+  portalItemResourceT9n: null,
+});
+const languageTranslatorState = LanguageTranslatorStore.state;
+const store = LanguageTranslatorStore;
+
+function generateUIData(appSettings, locales) {
+  var _a;
+  if (!appSettings)
+    return;
+  const existingUIData = store.get('uiData');
+  const uiData = new Map();
+  uiData.set('locales', locales);
+  uiData.set('translatedLanguageLabels', Object.assign({}, appSettings.translatedLanguageLabels));
+  appSettings.content.forEach(contentItem => {
+    var _a;
+    const { type, label, value, uiLocation } = contentItem;
+    const setting = existingUIData === null || existingUIData === void 0 ? void 0 : existingUIData.get(contentItem.id);
+    uiData.set(contentItem.id, {
+      userLocaleData: { type, label, value },
+      expanded: true,
+      selected: (_a = setting === null || setting === void 0 ? void 0 : setting['selected']) !== null && _a !== void 0 ? _a : false,
+      uiLocation,
+      tip: contentItem === null || contentItem === void 0 ? void 0 : contentItem.tip,
+    });
+  });
+  const settingKeys = appSettings.content.map(contentItem => contentItem.id);
+  const noneSelected = settingKeys.every((key) => {
+    const setting = uiData.get(key);
+    return !setting.selected;
+  });
+  const setting = uiData.get(settingKeys[0]);
+  if (noneSelected && setting) {
+    const existingData = existingUIData === null || existingUIData === void 0 ? void 0 : existingUIData.get(settingKeys[0]);
+    setting.selected = (_a = existingData === null || existingData === void 0 ? void 0 : existingData['selected']) !== null && _a !== void 0 ? _a : true;
+  }
+  return uiData;
+}
+async function getMessages(el) {
+  const messages = await getLocaleComponentStrings(el);
+  return messages[0];
+}
+function getUIDataKeys() {
+  var _a;
+  const settingKeys = [];
+  (_a = languageTranslatorState.uiData) === null || _a === void 0 ? void 0 : _a.forEach((_value, key) => {
+    if (key !== 'locales' && key !== 'translatedLanguageLabels') {
+      settingKeys.push(key);
+    }
+  });
+  return settingKeys;
+}
+function getT9nData(locale, data) {
+  const portalItemResourceT9n = store.get('portalItemResourceT9n');
+  let dataToWrite;
+  if (!(portalItemResourceT9n === null || portalItemResourceT9n === void 0 ? void 0 : portalItemResourceT9n[locale])) {
+    portalItemResourceT9n[locale] = {};
+  }
+  dataToWrite = Object.assign(Object.assign({}, portalItemResourceT9n), { [locale]: Object.assign(Object.assign({}, portalItemResourceT9n[locale]), data) });
+  return dataToWrite;
+}
+function getLocales(localeItems) {
+  var _a;
+  return (_a = localeItems === null || localeItems === void 0 ? void 0 : localeItems.map(localeItem => localeItem.locale)) !== null && _a !== void 0 ? _a : [];
+}
+function isCalciteModeDark() {
+  return document.body.classList.contains(ECalciteMode.Dark);
+}
+
+export { EIcons as E, generateUIData as a, getLocales as b, getUIDataKeys as c, ESettingType as d, ECalciteMode as e, EInputType as f, getMessages as g, getT9nData as h, isCalciteModeDark as i, languageTranslatorState as l, store as s };

package/dist/esm/ExpandToggle-52a39281.js

@@ -0,0 +1,110 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { f as forceUpdate, h } from './index-7183ce4a.js';
+import { a as getElementDir } from './dom-5698ed43.js';
+import { S as SLOTS$1 } from './resources-86171f0a.js';
+import { S as SLOTS } from './resources-e1487fc9.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.1-next.1
+ */
+const overflowActionsDebounceInMs = 150;
+const groupBufferPx = 2;
+const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
+const geActionDimensions = (actions) => {
+  const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS$1.menuActions);
+  const actionLen = actionsNotSlotted?.length;
+  return {
+    actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
+  };
+};
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
+  const maxContainerPx = layout === "horizontal" ? width : height;
+  const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
+  return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
+};
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }) => {
+  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
+};
+const queryActions = (el) => {
+  return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
+};
+const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
+  let needToSlotCount = overflowCount;
+  actionGroups.reverse().forEach((group) => {
+    let slottedWithinGroupCount = 0;
+    const groupActions = queryActions(group).reverse();
+    groupActions.forEach((groupAction) => {
+      if (groupAction.slot === SLOTS$1.menuActions) {
+        groupAction.removeAttribute("slot");
+        groupAction.textEnabled = expanded;
+      }
+    });
+    if (needToSlotCount > 0) {
+      groupActions.some((groupAction) => {
+        const unslottedActions = groupActions.filter((action) => !action.slot);
+        if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
+          groupAction.textEnabled = true;
+          groupAction.setAttribute("slot", SLOTS$1.menuActions);
+          slottedWithinGroupCount++;
+          if (slottedWithinGroupCount > 1) {
+            needToSlotCount--;
+          }
+        }
+        return needToSlotCount < 1;
+      });
+    }
+    forceUpdate(group);
+  });
+};
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.1-next.1
+ */
+const ICONS = {
+  chevronsLeft: "chevrons-left",
+  chevronsRight: "chevrons-right",
+};
+function getCalcitePosition(position, el) {
+  return position || el.closest("calcite-shell-panel")?.position || "start";
+}
+function toggleChildActionText({ el, expanded, }) {
+  queryActions(el)
+    .filter((el) => el.slot !== SLOTS$1.menuActions)
+    .forEach((action) => (action.textEnabled = expanded));
+  el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
+}
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
+  if (tooltip) {
+    tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
+  }
+  if (ref) {
+    ref(referenceElement);
+  }
+  return referenceElement;
+};
+const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
+  const rtl = getElementDir(el) === "rtl";
+  const text = expanded ? collapseText : expandText;
+  const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+  if (rtl) {
+    icons.reverse();
+  }
+  const end = getCalcitePosition(position, el) === "end";
+  const expandIcon = end ? icons[1] : icons[0];
+  const collapseIcon = end ? icons[0] : icons[1];
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: text, textEnabled: expanded, title: !expanded && !tooltip ? text : null,
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+    ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }) }));
+  return actionNode;
+};
+
+export { ExpandToggle as E, overflowActions as a, getOverflowCount as b, geActionDimensions as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };

package/dist/esm/FloatingArrow-337e6e2c.js

@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from './index-7183ce4a.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.1-next.1
+ */
+const CSS = {
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
+};
+const DEFAULTS = {
+  width: 12,
+  height: 6,
+  strokeWidth: 1,
+};
+/**
+ * Renders a SVG element to be used as a floating-ui arrow.
+ *
+ * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.
+ *
+ * @param floatingLayout.floatingLayout
+ * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
+ *
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
+ * @param floatingLayout.key
+ * @param floatingLayout.ref
+ */
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
+  const { width, height, strokeWidth } = DEFAULTS;
+  const svgX = width / 2;
+  const isVertical = floatingLayout === "vertical";
+  const dValue = "M0,0" +
+    ` H${width}` +
+    ` L${width - svgX},${height}` +
+    ` Q${svgX},${height} ${svgX},${height}` +
+    " Z";
+  return (h("svg", { "aria-hidden": "true", class: CSS.arrow, height: width, key: key, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0),
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+    ref: ref }, strokeWidth > 0 && (h("path", { class: CSS.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })), h("path", { d: dValue, stroke: "none" })));
+};
+
+export { FloatingArrow as F };

package/dist/esm/Heading-f6569cca.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from './index-7183ce4a.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.1-next.1
+ */
+function constrainHeadingLevel(level) {
+  return Math.min(Math.max(Math.ceil(level), 1), 6);
+}
+const Heading = (props, children) => {
+  const HeadingTag = props.level ? `h${props.level}` : "div";
+  delete props.level;
+  return h(HeadingTag, { ...props }, children);
+};
+
+export { Heading as H, constrainHeadingLevel as c };

package/dist/esm/ar-f77800f7.js

@@ -0,0 +1,102 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker-9906784a.js';
+import './index-7183ce4a.js';
+import './form-20beb147.js';
+import './dom-5698ed43.js';
+import './guid-0a2fd52d.js';
+import './resources-ed690b97.js';
+import './interactive-2595ba4e.js';
+import './browser-9f3f21fd.js';
+import './key-d3ab7af7.js';
+import './label-daf87924.js';
+import './loadable-4ea020fa.js';
+import './locale-f08c5b10.js';
+import './observers-dcb5485b.js';
+import './focusTrapComponent-55d35abf.js';
+import './time-8fc11a36.js';
+import './math-1c5a69ae.js';
+import './t9n-ff209b55.js';
+import './openCloseComponent-d85ff5f3.js';
+import './component-e446817d.js';
+
+// Arabic [ar]
+var months = 'يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split('_');
+var symbolMap = {
+  1: '١',
+  2: '٢',
+  3: '٣',
+  4: '٤',
+  5: '٥',
+  6: '٦',
+  7: '٧',
+  8: '٨',
+  9: '٩',
+  0: '٠'
+};
+var numberMap = {
+  '١': '1',
+  '٢': '2',
+  '٣': '3',
+  '٤': '4',
+  '٥': '5',
+  '٦': '6',
+  '٧': '7',
+  '٨': '8',
+  '٩': '9',
+  '٠': '0'
+};
+var locale = {
+  name: 'ar',
+  weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+  weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
+  weekdaysMin: 'ح_ن_ث_ر_خ_ج_س'.split('_'),
+  months: months,
+  monthsShort: months,
+  weekStart: 6,
+  meridiem: function meridiem(hour) {
+    return hour > 12 ? 'م' : 'ص';
+  },
+  relativeTime: {
+    future: 'بعد %s',
+    past: 'منذ %s',
+    s: 'ثانية واحدة',
+    m: 'دقيقة واحدة',
+    mm: '%d دقائق',
+    h: 'ساعة واحدة',
+    hh: '%d ساعات',
+    d: 'يوم واحد',
+    dd: '%d أيام',
+    M: 'شهر واحد',
+    MM: '%d أشهر',
+    y: 'عام واحد',
+    yy: '%d أعوام'
+  },
+  preparse: function preparse(string) {
+    return string.replace(/[١٢٣٤٥٦٧٨٩٠]/g, function (match) {
+      return numberMap[match];
+    }).replace(/،/g, ',');
+  },
+  postformat: function postformat(string) {
+    return string.replace(/\d/g, function (match) {
+      return symbolMap[match];
+    }).replace(/,/g, '،');
+  },
+  ordinal: function ordinal(n) {
+    return n;
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'D/‏M/‏YYYY',
+    LL: 'D MMMM YYYY',
+    LLL: 'D MMMM YYYY HH:mm',
+    LLLL: 'dddd D MMMM YYYY HH:mm'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export default locale;

package/dist/esm/arcgis-login.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, H as Host, g as getElement } from './index-3d4861da.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
 
 const arcgisLoginCss = ":host{display:block}";
 

package/dist/esm/basemap-gallery_7.entry.js

@@ -3,9 +3,10 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3d4861da.js';
-import { l as loadModules } from './loadModules-4d9c5c9e.js';
-import { g as getLocaleComponentStrings } from './locale-28107221.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-7183ce4a.js';
+import { l as loadModules } from './loadModules-cea493da.js';
+import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
+import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 
 const basemapGalleryCss = ":host{display:block}";
@@ -210,6 +211,7 @@ const mapFullscreenCss = ":host{display:block}";
 const MapFullscreen = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.fullscreenStateChange = createEvent(this, "fullscreenStateChange", 7);
         this.mapView = undefined;
         this.fullscreenWidget = undefined;
     }
@@ -224,22 +226,12 @@ const MapFullscreen = class {
      * @returns Promise when complete
      */
     async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initFullscreenWidget();
+        await this.mapView.when(async () => {
+            await this._initFullscreenWidget();
         });
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -260,13 +252,13 @@ const MapFullscreen = class {
      * It's never called during the first render().
      */
     async componentDidUpdate() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     //--------------------------------------------------------------------------
     //
@@ -281,21 +273,29 @@ const MapFullscreen = class {
      * @protected
      */
     async _initModules() {
-        const [Fullscreen] = await loadModules([
-            "esri/widgets/Fullscreen"
+        const [Fullscreen, reactiveUtils] = await loadModules([
+            "esri/widgets/Fullscreen",
+            "esri/core/reactiveUtils"
         ]);
         this.Fullscreen = Fullscreen;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Initialize the search widget
      *
      * @protected
      */
-    _initFullscreenWidget() {
+    async _initFullscreenWidget() {
         if (this.mapView && this._fullscreenElement && !this.fullscreenWidget) {
             this.fullscreenWidget = new this.Fullscreen({
                 view: this.mapView
             });
+            await this.fullscreenWidget.when(() => {
+                if (this._fullscreenStateChangeHandle) {
+                    this._fullscreenStateChangeHandle.remove();
+                }
+                this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (state) => this.fullscreenStateChange.emit(state));
+            });
         }
         else if (this.fullscreenWidget) {
             this.fullscreenWidget.view = this.mapView;
@@ -808,10 +808,14 @@ const MapTools = class {
     async _showFullscreenWatchHandler(v) {
         const fs = this._fullscreenElement.fullscreenWidget;
         if (v) {
-            fs.viewModel.enter();
+            if (fs.viewModel.state === "ready") {
+                fs.viewModel.enter();
+            }
         }
         else {
-            fs.viewModel.exit();
+            if (fs.viewModel.state === "active") {
+                fs.viewModel.exit();
+            }
         }
     }
     /**
@@ -888,7 +892,22 @@ const MapTools = class {
             this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
             undefined, this.enableFloorFilter && this._hasFloorInfo ?
             this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
-            undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+            undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+    }
+    /**
+     * Respond to fullscreen state change and ensure our state var is in sync
+     *
+     * @param state The fullscreen view model's state.
+     *
+     * @protected
+     */
+    _fullscreenStateChange(state) {
+        if (state === "ready" && this._showFullscreen) {
+            this._showFullscreen = false;
+        }
+        else if (state === "active" && !this._showFullscreen) {
+            this._showFullscreen = true;
+        }
     }
     //--------------------------------------------------------------------------
     //