@esri/solutions-components 0.6.6 → 0.6.7

package/dist/components/info-card2.js

@@ -18,256 +18,257 @@ import { d as defineCustomElement$1 } from './edit-card2.js';
 
 const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
 
-const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.graphics = undefined;
-    this.isLoading = false;
-    this.mapView = undefined;
-    this.zoomAndScrollToSelected = undefined;
-    this._alertOpen = false;
-    this._editRecordOpen = false;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Watch for changes to the graphic and update the feature widget
-   */
-  async graphicsWatchHandler() {
-    var _a;
-    if (this.graphics.length > 0) {
-      this._editEnabled = ((_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer).editingEnabled;
-      this._features.open({
-        features: this.graphics
-      });
-    }
-    else {
-      this._features.clear();
-      this._features.close();
-    }
-  }
-  /**
-   * Watch for changes to the mapView and re-init the Feature widget
-   */
-  async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
-      await this._initFeaturesWidget();
-    });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the current selected feature from the Features widget
-   *
-   * @returns Promise resolving with the current feature
-   */
-  async getSelectedFeature() {
-    return this._features.selectedFeature;
-  }
-  /**
-   * Respond to and close the edit record display
-   *
-   * @returns a promise when the operation has completed
-   */
-  async closeEdit() {
-    this._editRecordOpen = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._initModules();
-    await this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    var _a;
-    const loadingClass = this.isLoading ? "" : "display-none";
-    const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
-    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
-    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: "padding-1-2 display-flex " + editButtonClass, slot: "footer" }, h("calcite-button", { appearance: "outline", iconStart: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   *
-   * @protected
-   */
-  async _initModules() {
-    const [Features, reactiveUtils] = await loadModules([
-      "esri/widgets/Features",
-      "esri/core/reactiveUtils"
-    ]);
-    this.Features = Features;
-    this.reactiveUtils = reactiveUtils;
-  }
-  /**
-   * Init the Feature widget so we can display the popup content
-   *
-   * @returns a promise when the operation has completed
-   *
-   * @protected
-   */
-  async _initFeaturesWidget() {
-    if (!this._features) {
-      this._features = new this.Features({
-        view: this.mapView,
-        container: "features-node",
-        visibleElements: {
-          actionBar: false,
-          closeButton: false,
-          heading: true
-        }
-      });
-      if (this.zoomAndScrollToSelected) {
-        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-          if (i > -1) {
-            this.selectionChanged.emit(this._features.selectedFeature);
-          }
-        });
-      }
-    }
-    else {
-      this._features.view = this.mapView;
-    }
-  }
-  /**
-   * Set the alertOpen member to false when the alert is closed
-   *
-   * @returns void
-   */
-  _alertClosed() {
-    this._alertOpen = false;
-  }
-  /**
-   * Close the edit record
-   *
-   * @returns void
-   */
-  _editRecordClosed() {
-    this._editRecordOpen = false;
-  }
-  /**
-   * Open the edit record
-   *
-   * @returns void
-   */
-  _openEditRecord() {
-    if (this._editEnabled) {
-      this._editRecordOpen = true;
-    }
-    else {
-      this._alertOpen = true;
-    }
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "graphics": ["graphicsWatchHandler"],
-    "mapView": ["mapViewWatchHandler"]
-  }; }
-  static get style() { return infoCardCss; }
-}, [0, "info-card", {
-    "graphics": [16],
-    "isLoading": [4, "is-loading"],
-    "mapView": [16],
-    "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
-    "_alertOpen": [32],
-    "_editRecordOpen": [32],
-    "_translations": [32],
-    "getSelectedFeature": [64]
-  }, [[8, "closeEdit", "closeEdit"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["info-card", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
-  components.forEach(tagName => { switch (tagName) {
-    case "info-card":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InfoCard);
-      }
-      break;
-    case "calcite-alert":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "calcite-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "calcite-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "calcite-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "calcite-notice":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "calcite-shell":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "calcite-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "edit-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const InfoCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.graphics = undefined;
+    this.isLoading = false;
+    this.mapView = undefined;
+    this.zoomAndScrollToSelected = undefined;
+    this._alertOpen = false;
+    this._editRecordOpen = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Watch for changes to the graphic and update the feature widget
+   */
+  async graphicsWatchHandler() {
+    var _a;
+    if (this.graphics.length > 0) {
+      this._editEnabled = ((_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer).editingEnabled;
+      this._features.open({
+        features: this.graphics
+      });
+    }
+    else {
+      this._features.clear();
+      this._features.close();
+    }
+  }
+  /**
+   * Watch for changes to the mapView and re-init the Feature widget
+   */
+  async mapViewWatchHandler() {
+    await this.mapView.when(async () => {
+      await this._initFeaturesWidget();
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the current selected feature from the Features widget
+   *
+   * @returns Promise resolving with the current feature
+   */
+  async getSelectedFeature() {
+    return this._features.selectedFeature;
+  }
+  /**
+   * Respond to and close the edit record display
+   *
+   * @returns a promise when the operation has completed
+   */
+  async closeEdit() {
+    this._editRecordOpen = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._initModules();
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    var _a;
+    const loadingClass = this.isLoading ? "" : "display-none";
+    const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
+    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: "padding-1-2 display-flex " + editButtonClass, slot: "footer" }, h("calcite-button", { appearance: "outline", iconStart: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Features, reactiveUtils] = await loadModules([
+      "esri/widgets/Features",
+      "esri/core/reactiveUtils"
+    ]);
+    this.Features = Features;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Init the Feature widget so we can display the popup content
+   *
+   * @returns a promise when the operation has completed
+   *
+   * @protected
+   */
+  async _initFeaturesWidget() {
+    if (!this._features) {
+      this._features = new this.Features({
+        view: this.mapView,
+        container: "features-node",
+        visibleElements: {
+          actionBar: false,
+          closeButton: false,
+          heading: true
+        }
+      });
+      if (this.zoomAndScrollToSelected) {
+        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+          if (i > -1) {
+            this.selectionChanged.emit(this._features.selectedFeature);
+          }
+        });
+      }
+    }
+    else {
+      this._features.view = this.mapView;
+    }
+  }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
+  /**
+   * Close the edit record
+   *
+   * @returns void
+   */
+  _editRecordClosed() {
+    this._editRecordOpen = false;
+  }
+  /**
+   * Open the edit record
+   *
+   * @returns void
+   */
+  _openEditRecord() {
+    if (this._editEnabled) {
+      this._editRecordOpen = true;
+    }
+    else {
+      this._alertOpen = true;
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "graphics": ["graphicsWatchHandler"],
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+  static get style() { return infoCardCss; }
+}, [0, "info-card", {
+    "graphics": [16],
+    "isLoading": [4, "is-loading"],
+    "mapView": [16],
+    "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
+    "_alertOpen": [32],
+    "_editRecordOpen": [32],
+    "_translations": [32],
+    "getSelectedFeature": [64]
+  }, [[8, "closeEdit", "closeEdit"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["info-card", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "info-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InfoCard);
+      }
+      break;
+    case "calcite-alert":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-notice":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-shell":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "edit-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { InfoCard as I, defineCustomElement as d };

package/dist/components/input-message.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as setRequestedIcon } from './dom.js';
+import { m as setRequestedIcon } from './dom.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
@@ -21,70 +21,71 @@ var StatusIconDefaults;
 
 const inputMessageCss = ":host([scale=m]),:host([scale=l]){--calcite-input-message-spacing-value:0.25rem}:host{visibility:hidden;box-sizing:border-box;display:flex;block-size:0px;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);visibility:visible;block-size:auto;opacity:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([scale=m]),:host([scale=l]){margin-block-start:var(--calcite-input-message-spacing-value)}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-ui-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-ui-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-ui-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-ui-brand)}:host([status]){color:var(--calcite-ui-text-1)}:host([status][scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([status][scale=m]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([status][scale=l]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([hidden]){display:none}[hidden]{display:none}";
 
-const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icon = undefined;
-    this.iconFlipRtl = false;
-    this.scale = "m";
-    this.status = "idle";
-  }
-  handleIconEl() {
-    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
-  }
-  render() {
-    const hidden = this.el.hidden;
-    return (h(Host, { "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", null)));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  renderIcon(iconName) {
-    if (iconName) {
-      return (h("calcite-icon", { class: "calcite-input-message-icon", flipRtl: this.iconFlipRtl, icon: iconName, scale: "s" }));
-    }
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "status": ["handleIconEl"],
-    "icon": ["handleIconEl"]
-  }; }
-  static get style() { return inputMessageCss; }
-}, [1, "calcite-input-message", {
-    "icon": [520],
-    "iconFlipRtl": [516, "icon-flip-rtl"],
-    "scale": [513],
-    "status": [513]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-input-message", "calcite-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-input-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InputMessage);
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.scale = "m";
+    this.status = "idle";
+  }
+  handleIconEl() {
+    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
+  }
+  render() {
+    const hidden = this.el.hidden;
+    return (h(Host, { "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  renderIcon(iconName) {
+    if (iconName) {
+      return (h("calcite-icon", { class: "calcite-input-message-icon", flipRtl: this.iconFlipRtl, icon: iconName, scale: "s" }));
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "status": ["handleIconEl"],
+    "icon": ["handleIconEl"]
+  }; }
+  static get style() { return inputMessageCss; }
+}, [1, "calcite-input-message", {
+    "icon": [520],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
+    "scale": [513],
+    "status": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-input-message", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-input-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputMessage);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { InputMessage as I, defineCustomElement as d };