Merge pull request #882 from Esri/format-updates

formatting

src/components.d.ts

@@ -1976,7 +1976,7 @@ declare global {
         new (): HTMLCrowdsourceManagerElement;
     };
     interface HTMLCrowdsourceReporterElementEventMap {
-        "togglePanel": {panelState: boolean, isFormOpen: boolean};
+        "togglePanel": { panelState: boolean, isFormOpen: boolean };
     }
     interface HTMLCrowdsourceReporterElement extends Components.CrowdsourceReporter, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCrowdsourceReporterElementEventMap>(type: K, listener: (this: HTMLCrowdsourceReporterElement, ev: CrowdsourceReporterCustomEvent<HTMLCrowdsourceReporterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3061,7 +3061,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when toggle panel button is clicked in reporter
          */
-        "onTogglePanel"?: (event: CrowdsourceReporterCustomEvent<{panelState: boolean, isFormOpen: boolean}>) => void;
+        "onTogglePanel"?: (event: CrowdsourceReporterCustomEvent<{ panelState: boolean, isFormOpen: boolean }>) => void;
         /**
           * string: The word(s) to display in the reports submit button
          */

src/components/arcgis-login/arcgis-login.css

@@ -16,4 +16,4 @@
 
 :host {
   display: block;
-}
+}

src/components/arcgis-login/arcgis-login.tsx

@@ -75,7 +75,7 @@ export class ArcgisLogin {
   render() {
     return (
       <Host>
-        <slot/>
+        <slot />
       </Host>
     );
   }

src/components/basemap-gallery/basemap-gallery.css

@@ -16,4 +16,4 @@
 
 :host {
   display: block;
-}
+}

src/components/buffer-tools/buffer-tools.css

@@ -32,4 +32,4 @@
 
 .w-50 {
   width: 50%;
-}
+}

src/components/buffer-tools/buffer-tools.tsx

@@ -117,7 +117,7 @@ export class BufferTools {
   /**
    * Key Value pair: Lookup hash for translated units
    */
-  protected _units: {[key: string]: string};
+  protected _units: { [key: string]: string };
 
   //--------------------------------------------------------------------------
   //

src/components/card-manager/card-manager.css

@@ -64,4 +64,4 @@
 
 card-manager {
   display: block;
-}
+}

src/components/card-manager/card-manager.tsx

@@ -201,7 +201,7 @@ export class CardManager {
    */
   async componentWillLoad(): Promise<void> {
     await this._getTranslations();
-    if(this.selectedFeaturesIds?.length > 0) {
+    if (this.selectedFeaturesIds?.length > 0) {
       this._graphics = await this._getFeaturesByIds(this.selectedFeaturesIds);
     }
   }
@@ -277,30 +277,30 @@ export class CardManager {
     );
   }
 
-    /**
-   * Returns the editor component for adding feature
-   * @returns Node
-   */
-    protected getEditorComponent(): Node {
-      return (
-        <div>
-          {this._showCreateFeatureComponent && <create-feature
-            customizeSubmit
-            mapView={this.mapView}
-            onDrawComplete={() => { this._showSubmitBtn = true }}
-            onEditingAttachment={(evt) => { this._showSubmitBtn = !evt.detail }}
-            onProgressStatus={() => {
-                setTimeout(() => {
-                  this._isFeatureCreated = false;
-                }, 2000)
-            }}
-            onSuccess={this._featureCreated.bind(this)}
-            ref={el => this._createFeature = el}
-            selectedLayerId={this.layer?.id}
-          />}
-        </div>
-      )
-    }
+  /**
+ * Returns the editor component for adding feature
+ * @returns Node
+ */
+  protected getEditorComponent(): Node {
+    return (
+      <div>
+        {this._showCreateFeatureComponent && <create-feature
+          customizeSubmit
+          mapView={this.mapView}
+          onDrawComplete={() => { this._showSubmitBtn = true }}
+          onEditingAttachment={(evt) => { this._showSubmitBtn = !evt.detail }}
+          onProgressStatus={() => {
+            setTimeout(() => {
+              this._isFeatureCreated = false;
+            }, 2000)
+          }}
+          onSuccess={this._featureCreated.bind(this)}
+          ref={el => this._createFeature = el}
+          selectedLayerId={this.layer?.id}
+        />}
+      </div>
+    )
+  }
 
   //--------------------------------------------------------------------------
   //

src/components/card-manager/readme.md

@@ -10,6 +10,7 @@
 | Property                  | Attribute                     | Description                                                                                                                 | Type           | Default     |
 | ------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------- | ----------- |
 | `customInfoText`          | `custom-info-text`            | string: custom notice text to display                                                                                       | `string`       | `undefined` |
+| `enableCreateFeatures`    | `enable-create-features`      | boolean: when true the users can have the option to create features                                                         | `boolean`      | `true`      |
 | `enableEditGeometry`      | `enable-edit-geometry`        | When true the geometry of the current feature will be editable                                                              | `boolean`      | `false`     |
 | `isMobile`                | `is-mobile`                   | When true the component will render an optimized view for mobile devices                                                    | `boolean`      | `undefined` |
 | `layer`                   | --                            | esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html | `FeatureLayer` | `undefined` |
@@ -18,6 +19,15 @@
 | `zoomAndScrollToSelected` | `zoom-and-scroll-to-selected` | boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table          | `boolean`      | `undefined` |
 
 
+## Events
+
+| Event                      | Description                            | Type                |
+| -------------------------- | -------------------------------------- | ------------------- |
+| `backFromCreateWorkFlow`   | Emits when back from create work flow  | `CustomEvent<void>` |
+| `createWorkFlowStarted`    | Emits when create work flow started    | `CustomEvent<void>` |
+| `featureOrRecordSubmitted` | Emits when feature/record is submitted | `CustomEvent<void>` |
+
+
 ## Dependencies
 
 ### Used by
@@ -28,14 +38,24 @@
 
 - calcite-shell
 - [info-card](../info-card)
+- calcite-flow-item
+- calcite-panel
 - calcite-notice
+- calcite-button
+- calcite-action
+- [create-feature](../create-feature)
 
 ### Graph
 ```mermaid
 graph TD;
   card-manager --> calcite-shell
   card-manager --> info-card
+  card-manager --> calcite-flow-item
+  card-manager --> calcite-panel
   card-manager --> calcite-notice
+  card-manager --> calcite-button
+  card-manager --> calcite-action
+  card-manager --> create-feature
   info-card --> calcite-shell
   info-card --> calcite-loader
   info-card --> calcite-button
@@ -68,6 +88,9 @@ graph TD;
   calcite-action-menu --> calcite-popover
   calcite-popover --> calcite-action
   calcite-popover --> calcite-icon
+  calcite-flow-item --> calcite-action
+  calcite-flow-item --> calcite-panel
+  create-feature --> calcite-loader
   crowdsource-manager --> card-manager
   style card-manager fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/consent-manager/consent-manager.css

@@ -64,4 +64,4 @@
   --calcite-color-text-link: var(--calcite-color-text-inverse);
   --calcite-color-brand-underline: var(--calcite-color-text-inverse);
   --calcite-color-brand: var(--calcite-color-text-inverse);
-}
+}

src/components/consent-manager/consent-manager.tsx

@@ -205,7 +205,7 @@ export class ConsentManager {
                 >
                   {this._translations.cookiePolicy} 
                 </calcite-link>
-                  {this._translations.andOur}&nbsp;
+                {this._translations.andOur}&nbsp;
                 <calcite-link
                   class="link-text"
                   href="https://www.arcgis.com/"

src/components/create-feature/create-feature.css

@@ -65,6 +65,7 @@
   width: calc(100% - 22px);
   height: 50%;
 }
+
 /* override the padding of the feature form */
 .esri-editor__panel-content {
   padding-block: 10px !important;

src/components/create-feature/create-feature.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, Element, EventEmitter, Prop, Fragment, h, Event, Watch, Method, State} from "@stencil/core";
+import { Component, Element, EventEmitter, Prop, Fragment, h, Event, Watch, Method, State } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
 import { ILayerSourceConfigItem, ILocatorSourceConfigItem, ISearchConfiguration } from "../../utils/interfaces";
@@ -350,7 +350,7 @@ export class CreateFeature {
           label=""
           scale="s"
         />
-        <div class={featureFormClass} id="feature-form"/>
+        <div class={featureFormClass} id="feature-form" />
         {this.enableSearch && <div class={`search-widget ${showSearchWidget} ${featureFormClass}`} id="search-widget-ref" />}
         <div class={`${mobileMapClass}`} ref={(el) => { this._mapViewContainer = el }} />
       </Fragment>
@@ -472,7 +472,7 @@ export class CreateFeature {
 
     //Add handle to watch if attachments are added/edited
     const attachmentHandle = this.reactiveUtils.watch(
-      () =>  this._editor.viewModel.state,
+      () => this._editor.viewModel.state,
       (state) => {
         if (state === 'adding-attachment' || state === 'editing-attachment') {
           this._addingAttachment = true;
@@ -488,9 +488,9 @@ export class CreateFeature {
 
     //Add handle to watch featureTemplatesViewModel ready state and then start the creation
     const handle = this.reactiveUtils.watch(
-      () =>  this._editor.viewModel.featureTemplatesViewModel.state,
+      () => this._editor.viewModel.featureTemplatesViewModel.state,
       (state) => {
-        if(state === 'ready' && this._editor.viewModel?.activeWorkflow?.type !== "create-features") {
+        if (state === 'ready' && this._editor.viewModel?.activeWorkflow?.type !== "create-features") {
           this.progressStatus.emit(0.5);
           this._editorLoading = true;
         }
@@ -718,18 +718,18 @@ export class CreateFeature {
    * @protected
    */
   protected async hideEditorsElements(): Promise<void> {
-      if (!this.customizeSubmit) {
-        return;
-      }
-      await this.timeout(700);
-      //hides the header and footer on the featureForm
-      this.el.querySelector('.esri-editor')?.querySelectorAll('calcite-flow-item')?.forEach((flowItem) => {
-        const article = flowItem.shadowRoot?.querySelector('calcite-panel')?.shadowRoot?.querySelector('article');
-        //hide the header
-        article?.querySelector('header')?.setAttribute('style', 'display: none');
-        //hide the footer
-        article?.querySelector('footer')?.setAttribute('style', 'display: none');
-      });
+    if (!this.customizeSubmit) {
+      return;
+    }
+    await this.timeout(700);
+    //hides the header and footer on the featureForm
+    this.el.querySelector('.esri-editor')?.querySelectorAll('calcite-flow-item')?.forEach((flowItem) => {
+      const article = flowItem.shadowRoot?.querySelector('calcite-panel')?.shadowRoot?.querySelector('article');
+      //hide the header
+      article?.querySelector('header')?.setAttribute('style', 'display: none');
+      //hide the footer
+      article?.querySelector('footer')?.setAttribute('style', 'display: none');
+    });
   }
 
   /**

src/components/create-feature/readme.md

@@ -10,6 +10,7 @@
 | Property              | Attribute           | Description                                                                                                                                                                              | Type                   | Default     |
 | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
 | `customizeSubmit`     | `customize-submit`  | boolean: Set this to true when have a custom submit button in the app. This will hide the header and footer elements of the editor and user needs to execute the submit method manually. | `boolean`              | `false`     |
+| `enableSearch`        | `enable-search`     | boolean: When true the Search box will be displayed                                                                                                                                      | `boolean`              | `false`     |
 | `floorLevel`          | `floor-level`       | string: selected floor level                                                                                                                                                             | `string`               | `undefined` |
 | `formElements`        | `form-elements`     | string: selected floor level                                                                                                                                                             | `any`                  | `undefined` |
 | `isMobile`            | `is-mobile`         | boolean: When true the application will be in mobile mode, controls the mobile or desktop view                                                                                           | `boolean`              | `undefined` |
@@ -73,6 +74,7 @@ Promise that resolves when the operation is complete
 
 ### Used by
 
+ - [card-manager](../card-manager)
  - [crowdsource-reporter](../crowdsource-reporter)
 
 ### Depends on
@@ -83,6 +85,7 @@ Promise that resolves when the operation is complete
 ```mermaid
 graph TD;
   create-feature --> calcite-loader
+  card-manager --> create-feature
   crowdsource-reporter --> create-feature
   style create-feature fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/create-related-feature/create-related-feature.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, h, Prop, Element, Event, EventEmitter, Method, Watch, State} from '@stencil/core';
+import { Component, h, Prop, Element, Event, EventEmitter, Method, Watch, State } from '@stencil/core';
 import { loadModules } from "../../utils/loadModules";
 
 @Component({
@@ -113,9 +113,9 @@ export class CreateRelatedFeature {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
-   /**
-   * Called each time the mapView prop is changed.
-   */
+  /**
+  * Called each time the mapView prop is changed.
+  */
   @Watch("mapView")
   async mapViewWatchHandler(): Promise<void> {
     await this.mapView.when(async () => {
@@ -126,15 +126,15 @@ export class CreateRelatedFeature {
   /**
    * When _editorLoading is true the container node will be hidden while starting the create workflow
    */
-    @Watch("_editorLoading")
-    async _editorLoadingWatchHandler(v: boolean): Promise<void> {
-      if (v) {
-        this._container?.classList.add("display-none");
-        await this.startCreate();
-        this._container?.classList.remove("display-none");
-        this._editorLoading = false;
-      }
+  @Watch("_editorLoading")
+  async _editorLoadingWatchHandler(v: boolean): Promise<void> {
+    if (v) {
+      this._container?.classList.add("display-none");
+      await this.startCreate();
+      this._container?.classList.remove("display-none");
+      this._editorLoading = false;
     }
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -186,7 +186,7 @@ export class CreateRelatedFeature {
   /**
    * Emitted on demand when form is ready
    */
-    @Event() formReady: EventEmitter<void>;
+  @Event() formReady: EventEmitter<void>;
 
   //--------------------------------------------------------------------------
   //
@@ -228,11 +228,11 @@ export class CreateRelatedFeature {
   render() {
     const loaderClass = this._editorLoading ? "" : "display-none";
     return (
-       <calcite-loader
-          class={loaderClass}
-          label=""
-          scale="s"
-        />
+      <calcite-loader
+        class={loaderClass}
+        label=""
+        scale="s"
+      />
     );
   }
 
@@ -383,7 +383,7 @@ export class CreateRelatedFeature {
    * @param evt feature submit event
    * @protected
    */
-   protected async submitted(evt: any): Promise<void> {
+  protected async submitted(evt: any): Promise<void> {
     //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
     if (evt.invalid.length) {
       this._isSubmitBtnClicked = false;