@arcgis/map-components 1.0.0-beta.17 → 1.0.0-beta.19

package/dist/cjs/arcgis-basemap-gallery_3.cjs.entry.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b51d5a0.js');
+const index$1 = require('./index-fda6ecee.js');
+const componentUtils = require('./component-utils-cbd20e88.js');
+const disconnected = require('./disconnected-306cb220.js');
+const mappingUtils = require('./mapping-utils-c2c7b994.js');
+
+const arcgisBasemapGalleryCss = "";
+
+const ArcgisBasemapGallery = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.activeBasemap = undefined;
+    this.position = "bottom-left";
+    this.expandable = false;
+    this.source = undefined;
+    this.view = undefined;
+    this.widget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    const params = this._createParams();
+    const widget = await index$1.newWidgetsBasemapGallery(params);
+    this.widget = widget;
+    this.widget.when(() => {
+      this.source = this.widget.source;
+    });
+    await this._addWatchers();
+    this.widgetReady.emit(true);
+    componentUtils.checkForView(this);
+  }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
+  }
+  render() {
+    if (this.expandable) {
+      return (index.h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, index.h("div", { ref: (el) => (this.childElem = el) })));
+    }
+    return index.h("div", { ref: (el) => (this.childElem = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Interal Methods
+  //
+  //--------------------------------------------------------------------------
+  async _addWatchers() {
+    const { watch } = await index$1.importCoreReactiveUtils();
+    watch(() => this.widget.source, () => (this.source = this.widget.source));
+    watch(() => this.widget.activeBasemap, (basemap) => (this.activeBasemap = basemap));
+  }
+  _createParams() {
+    const params = {
+      container: this.childElem
+    };
+    if (this.view) {
+      params.view = this.view;
+    }
+    return params;
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"]
+  }; }
+};
+ArcgisBasemapGallery.style = arcgisBasemapGalleryCss;
+
+const arcgisExpandCss = "arcgis-expand>.esri-expand__content--expanded{background-color:var(--calcite-ui-background)}";
+
+const ArcgisExpand = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.position = "top-right";
+    this.view = undefined;
+    this.widget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    const widget = await index$1.newWidgetsExpand({
+      container: this.childElem
+    });
+    this.widget = widget;
+    if (this.view) {
+      this.widget.view = this.view;
+    }
+    this._checkForView();
+  }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
+  }
+  render() {
+    return index.h("div", { ref: (el) => (this.childElem = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Internal Methods
+  //
+  //--------------------------------------------------------------------------
+  _checkForView() {
+    const viewRef = this.el.closest("arcgis-map") || this.el.closest("arcgis-scene");
+    if (viewRef?.view) {
+      this.view = viewRef.view;
+      this.view.ui.add(this.childElem, this.position);
+      this.widgetReady.emit(true);
+    }
+    else if (viewRef) {
+      const handler = () => {
+        this.view = viewRef.view;
+        this.view.ui.add(this.childElem, this.position);
+        this.widgetReady.emit(true);
+      };
+      viewRef.addEventListener("viewReady", handler, false);
+    }
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"]
+  }; }
+};
+ArcgisExpand.style = arcgisExpandCss;
+
+const arcgisMapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
+
+const ArcgisMap = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.viewReady = index.createEvent(this, "viewReady", 7);
+    this.apiKey = undefined;
+    this.basemap = undefined;
+    this.disableNavigation = false;
+    this.itemId = undefined;
+    this.zoom = undefined;
+    this.center = undefined;
+    this.view = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  apiKeyWatcher(value) {
+    this.config.apiKey = value;
+  }
+  itemIdWatcher(value, old) {
+    if (value && value !== old) {
+      this.loadMap();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    this.config = await index$1.importConfig();
+    if (this.apiKey) {
+      this.config.apiKey = this.apiKey;
+    }
+    await this.loadMap();
+  }
+  componentDidRender() {
+    if (this.view) {
+      this.view.container = this.el;
+    }
+  }
+  render() {
+    return index.h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  async loadMap() {
+    const mapParams = {};
+    if (this.itemId) {
+      mapParams.portalItem = {
+        id: this.itemId
+      };
+    }
+    if (this.basemap) {
+      mapParams.basemap = this.basemap;
+    }
+    const map = await index$1.newWebMap(mapParams);
+    const params = {};
+    if (this.zoom) {
+      params.zoom = this.zoom;
+    }
+    if (this.center) {
+      if (typeof this.center === "string") {
+        params.center = this.center.split(",").map((x) => Number(x));
+      }
+      else {
+        params.center = this.center;
+      }
+    }
+    const view = await index$1.newViewsMapView({
+      map,
+      ...params
+    });
+    const { watch } = await index$1.importCoreReactiveUtils();
+    this.view = view;
+    watch(() => this.view.center, (center) => {
+      const value = `${center.longitude},${center.latitude}`;
+      this.center = value;
+    });
+    watch(() => this.view.zoom, (value) => (this.zoom = value));
+    if (this.disableNavigation) {
+      mappingUtils.disableNavigation(this.view);
+    }
+    this.viewReady.emit(true);
+  }
+  get hostElem() { return index.getElement(this); }
+  static get watchers() { return {
+    "apiKey": ["apiKeyWatcher"],
+    "itemId": ["itemIdWatcher"]
+  }; }
+};
+ArcgisMap.style = arcgisMapCss;
+
+exports.arcgis_basemap_gallery = ArcgisBasemapGallery;
+exports.arcgis_expand = ArcgisExpand;
+exports.arcgis_map = ArcgisMap;

package/dist/cjs/arcgis-basemap-layer-list.cjs.entry.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b51d5a0.js');
+const index$1 = require('./index-fda6ecee.js');
+const componentUtils = require('./component-utils-cbd20e88.js');
+const disconnected = require('./disconnected-306cb220.js');
+
+const arcgisBasemapLayerListCss = "";
+
+const ArcgisBasemapLayerList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.basemapTitle = undefined;
+    this.baseItems = undefined;
+    this.editingEnabled = false;
+    this.mulitpleSelectionEnabled = false;
+    this.position = "bottom-left";
+    this.expandable = false;
+    this.referenceItems = undefined;
+    this.selectedItems = undefined;
+    this.view = undefined;
+    this.widget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
+  }
+  basemapTitleWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.basemapTitle = newValue;
+    }
+  }
+  editingBasemapEnabledWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.editingEnabled = newValue;
+    }
+  }
+  multipleSelectionEnabledWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.multipleSelectionEnabled = newValue;
+    }
+  }
+  selectedItemsWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.selectedItems = newValue;
+    }
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    const params = this._createParams();
+    const widget = await index$1.newWidgetsBasemapLayerList(params);
+    this.widget = widget;
+    await this._addWatchers();
+    this.widgetReady.emit(true);
+    componentUtils.checkForView(this);
+  }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
+  }
+  render() {
+    if (this.expandable) {
+      return (index.h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, index.h("div", { ref: (el) => (this.childElem = el) })));
+    }
+    return index.h("div", { ref: (el) => (this.childElem = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  _createParams() {
+    const params = {
+      container: this.childElem
+    };
+    if (this.basemapTitle) {
+      params.basemapTitle = this.basemapTitle;
+    }
+    if (this.editingEnabled !== undefined) {
+      params.editingEnabled = this.editingEnabled;
+    }
+    if (this.mulitpleSelectionEnabled !== undefined) {
+      params.multipleSelectionEnabled = this.mulitpleSelectionEnabled;
+    }
+    if (this.view) {
+      params.view = this.view;
+    }
+    return params;
+  }
+  async _addWatchers() {
+    const { watch } = await index$1.importCoreReactiveUtils();
+    watch(() => this.widget.basemapTitle, (value) => (this.basemapTitle = value), {
+      initial: true
+    });
+    watch(() => this.widget.editingEnabled, (value) => (this.editingEnabled = value), {
+      initial: true
+    });
+    watch(() => this.widget.multipleSelectionEnabled, (value) => (this.mulitpleSelectionEnabled = value), {
+      initial: true
+    });
+    watch(() => this.widget.referenceItems, (value) => (this.referenceItems = value), {
+      initial: true
+    });
+    watch(() => this.widget.selectedItems, (value) => (this.selectedItems = value), {
+      initial: true
+    });
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatcher"],
+    "basemapTitle": ["basemapTitleWatcher"],
+    "editingEnabled": ["editingBasemapEnabledWatcher"],
+    "mulitpleSelectionEnabled": ["multipleSelectionEnabledWatcher"],
+    "selectedItems": ["selectedItemsWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"]
+  }; }
+};
+ArcgisBasemapLayerList.style = arcgisBasemapLayerListCss;
+
+exports.arcgis_basemap_layer_list = ArcgisBasemapLayerList;

package/dist/cjs/arcgis-basemap-toggle.cjs.entry.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b51d5a0.js');
+const index$1 = require('./index-fda6ecee.js');
+const componentUtils = require('./component-utils-cbd20e88.js');
+const disconnected = require('./disconnected-306cb220.js');
+
+const arcgisBasemapToggleCss = "";
+
+const ArcgisBasemapToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.activeBasemap = undefined;
+    this.nextBasemap = undefined;
+    this.position = "bottom-left";
+    this.expandable = false;
+    this.view = undefined;
+    this.widget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
+  }
+  nextBasemapWatcher(value) {
+    if (value && this.widget) {
+      this.widget.nextBasemap = value;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  //--------------------------------------------------------------------------
+  async toggle() {
+    return this.widget?.toggle();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    const params = this._createParams();
+    const widget = await index$1.newWidgetsBasemapToggle(params);
+    this.widget = widget;
+    await this._addWatchers();
+    this.widgetReady.emit(true);
+    componentUtils.checkForView(this);
+  }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
+  }
+  render() {
+    if (this.expandable) {
+      return (index.h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, index.h("div", { ref: (el) => (this.childElem = el) })));
+    }
+    return index.h("div", { ref: (el) => (this.childElem = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  _createParams() {
+    const params = {
+      container: this.childElem
+    };
+    if (this.nextBasemap) {
+      params.nextBasemap = this.nextBasemap;
+    }
+    if (this.view) {
+      params.view = this.view;
+    }
+    return params;
+  }
+  async _addWatchers() {
+    const { watch } = await index$1.importCoreReactiveUtils();
+    watch(() => this.widget.activeBasemap, (value) => (this.activeBasemap = value), {
+      initial: true
+    });
+    watch(() => this.widget.nextBasemap, (value) => (this.nextBasemap = value), {
+      initial: true
+    });
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"],
+    "nextBasemap": ["nextBasemapWatcher"]
+  }; }
+};
+ArcgisBasemapToggle.style = arcgisBasemapToggleCss;
+
+exports.arcgis_basemap_toggle = ArcgisBasemapToggle;

package/dist/cjs/arcgis-bookmarks.cjs.entry.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b51d5a0.js');
+const index$1 = require('./index-fda6ecee.js');
+const componentUtils = require('./component-utils-cbd20e88.js');
+const disconnected = require('./disconnected-306cb220.js');
+
+const arcgisBookmarksCss = "";
+
+const ArcgisBookmarks = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bookmarkEdit = index.createEvent(this, "bookmarkEdit", 7);
+    this.bookmarkSelect = index.createEvent(this, "bookmarkSelect", 7);
+    this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.bookmarks = undefined;
+    this.defaultCreateOptions = undefined;
+    this.defaultEditOptions = undefined;
+    this.editingEnabled = undefined;
+    this.position = "bottom-left";
+    this.expandable = false;
+    this.view = undefined;
+    this.widget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
+  }
+  bookmarksWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.bookmarks = newValue;
+    }
+  }
+  defaultCreateOptionsWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.defaultCreateOptions = newValue;
+    }
+  }
+  defaultEditOptionsWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.defaultEditOptions = newValue;
+    }
+  }
+  editingEnabledWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.editingEnabled = newValue;
+    }
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    const params = this._createParams();
+    const widget = await index$1.newWidgetsBookmarks(params);
+    this.widget = widget;
+    await this._addWatchers();
+    this._proxyEvents();
+    this.widgetReady.emit(true);
+    componentUtils.checkForView(this);
+  }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
+  }
+  render() {
+    if (this.expandable) {
+      return (index.h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, index.h("div", { ref: (el) => (this.childElem = el) })));
+    }
+    return index.h("div", { ref: (el) => (this.childElem = el) });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  async _addWatchers() {
+    const { watch } = await index$1.importCoreReactiveUtils();
+    watch(() => this.widget.editingEnabled, (value) => (this.editingEnabled = value), {
+      initial: true
+    });
+  }
+  _createParams() {
+    const params = {
+      container: this.childElem
+    };
+    if (this.view) {
+      params.view = this.view;
+    }
+    if (this.bookmarks) {
+      params.bookmarks = this.bookmarks;
+    }
+    if (this.defaultCreateOptions) {
+      params.defaultCreateOptions = this.defaultCreateOptions;
+    }
+    if (this.defaultEditOptions) {
+      params.defaultEditOptions = this.defaultEditOptions;
+    }
+    if (this.editingEnabled !== undefined) {
+      params.editingEnabled = this.editingEnabled;
+    }
+    return params;
+  }
+  _proxyEvents() {
+    this.widget.on("bookmark-edit", (e) => this.bookmarkEdit.emit(e));
+    this.widget.on("bookmark-select", (e) => this.bookmarkSelect.emit(e));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatcher"],
+    "bookmarks": ["bookmarksWatcher"],
+    "defaultCreateOptions": ["defaultCreateOptionsWatcher"],
+    "defaultEditOptions": ["defaultEditOptionsWatcher"],
+    "editingEnabled": ["editingEnabledWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"]
+  }; }
+};
+ArcgisBookmarks.style = arcgisBookmarksCss;
+
+exports.arcgis_bookmarks = ArcgisBookmarks;