npm - @esri/calcite-components - Versions diffs - 1.0.0-next.596 → 1.0.0-next.598 - Mend

@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1195) hide show

package/dist/collection/components/flow-item/flow-item.js CHANGED Viewed

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.598
  */
-import { Component, Element, Prop, h, Host, Method, Event, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS, ICONS, TEXT, SLOTS } from "./resources";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
@@ -61,6 +61,9 @@ export class FlowItem {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
+    this.setContainerRef = (node) => {
+      this.containerEl = node;
+    };
     this.getBackLabel = () => {
       return this.intlBack || TEXT.back;
     };
@@ -92,19 +95,17 @@ export class FlowItem {
   /**
    * Scrolls the component's content to a specified set of coordinates.
    *
-   * ```
-   *   myCalciteFlowItem.scrollContentTo({
-   *     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
-   *     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
-   *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
-   *   });
-   * ```
-   *
+   * @example
+   * myCalciteFlowItem.scrollContentTo({
+   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   * });
    * @param options
    */
   async scrollContentTo(options) {
     var _a;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options);
+    await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options));
   }
   // --------------------------------------------------------------------------
   //
@@ -122,404 +123,408 @@ export class FlowItem {
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, heightScale, intlBack, intlClose, intlOptions, loading, menuOpen, widthScale, backButtonEl } = this;
     const label = this.getBackLabel();
-    return (h(Host, null,
-      h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlBack: intlBack, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, widthScale: widthScale },
-        h("slot", { name: SLOTS.headerActionsStart, slot: PANEL_SLOTS.headerActionsStart }),
-        h("slot", { name: SLOTS.headerActionsEnd, slot: PANEL_SLOTS.headerActionsEnd }),
-        h("slot", { name: SLOTS.headerContent, slot: PANEL_SLOTS.headerContent }),
-        h("slot", { name: SLOTS.headerMenuActions, slot: PANEL_SLOTS.headerMenuActions }),
-        h("slot", { name: SLOTS.fab, slot: PANEL_SLOTS.fab }),
-        h("slot", { name: SLOTS.footerActions, slot: PANEL_SLOTS.footerActions }),
-        h("slot", { name: SLOTS.footer, slot: PANEL_SLOTS.footer }),
-        h("slot", null),
-        this.renderBackButton()),
-      backButtonEl ? (h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
+    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlBack: intlBack, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, ref: this.setContainerRef, widthScale: widthScale }, h("slot", { name: SLOTS.headerActionsStart, slot: PANEL_SLOTS.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: PANEL_SLOTS.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: PANEL_SLOTS.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: PANEL_SLOTS.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: PANEL_SLOTS.fab }), h("slot", { name: SLOTS.footerActions, slot: PANEL_SLOTS.footerActions }), h("slot", { name: SLOTS.footer, slot: PANEL_SLOTS.footer }), h("slot", null), this.renderBackButton()), backButtonEl ? (h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
   }
   static get is() { return "calcite-flow-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["flow-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["flow-item.css"]
-  }; }
-  static get properties() { return {
-    "closable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, displays a close button in the trailing side of the header"
-      },
-      "attribute": "closable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "closed": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, flow-item will be hidden"
-      },
-      "attribute": "closed",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "beforeBack": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "() => Promise<void>",
-        "resolved": "() => Promise<void>",
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "When provided, this method will be called before it is removed from the parent flow."
-      }
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A description for the component."
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The component header text."
-      },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "headingLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "HeadingLevel",
-        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-        "references": {
-          "HeadingLevel": {
-            "location": "import",
-            "path": "../functional/Heading"
+  static get originalStyleUrls() {
+    return {
+      "$": ["flow-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["flow-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "closable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, displays a close button in the trailing side of the header"
+        },
+        "attribute": "closable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "closed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, flow-item will be hidden"
+        },
+        "attribute": "closed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "beforeBack": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => Promise<void>",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When provided, this method will be called before it is removed from the parent flow."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the number at which section headings should start."
-      },
-      "attribute": "heading-level",
-      "reflect": true
-    },
-    "heightScale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A description for the component."
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The component header text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "HeadingLevel": {
+              "location": "import",
+              "path": "../functional/Heading"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the maximum height of the component."
-      },
-      "attribute": "height-scale",
-      "reflect": true
-    },
-    "intlBack": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true."
-      },
-      "attribute": "intl-back",
-      "reflect": false
-    },
-    "intlClose": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true."
-      },
-      "attribute": "intl-close",
-      "reflect": false
-    },
-    "intlOptions": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component's actions menu."
-      },
-      "attribute": "intl-options",
-      "reflect": false
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, a busy indicator is displayed."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "menuOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the action menu items in the `header-menu-actions` slot are open."
-      },
-      "attribute": "menu-open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "showBackButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, displays a back button in the header."
-      },
-      "attribute": "show-back-button",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "widthScale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the number at which section headings should start."
+        },
+        "attribute": "heading-level",
+        "reflect": true
+      },
+      "heightScale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the width of the component."
-      },
-      "attribute": "width-scale",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "backButtonEl": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteFlowItemBack",
-      "name": "calciteFlowItemBack",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the back button is clicked."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteFlowItemBackClick",
-      "name": "calciteFlowItemBackClick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use calciteFlowItemBack instead."
-          }],
-        "text": "Fires when the back button is clicked."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteFlowItemClose",
-      "name": "calciteFlowItemClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the close button is clicked."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the maximum height of the component."
+        },
+        "attribute": "height-scale",
+        "reflect": true
+      },
+      "intlBack": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true."
+        },
+        "attribute": "intl-back",
+        "reflect": false
+      },
+      "intlClose": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true."
+        },
+        "attribute": "intl-close",
+        "reflect": false
+      },
+      "intlOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component's actions menu."
+        },
+        "attribute": "intl-options",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, a busy indicator is displayed."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "menuOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the action menu items in the `header-menu-actions` slot are open."
+        },
+        "attribute": "menu-open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showBackButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, displays a back button in the header."
+        },
+        "attribute": "show-back-button",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "widthScale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the width of the component."
+        },
+        "attribute": "width-scale",
+        "reflect": true
       }
-    },
-    "scrollContentTo": {
-      "complexType": {
-        "signature": "(options?: ScrollToOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "options"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "backButtonEl": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteFlowItemBack",
+        "name": "calciteFlowItemBack",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the back button is clicked."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteFlowItemBackClick",
+        "name": "calciteFlowItemBackClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use calciteFlowItemBack instead."
+            }],
+          "text": "Fires when the back button is clicked."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteFlowItemClose",
+        "name": "calciteFlowItemClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the close button is clicked."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "ScrollToOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Scrolls the component's content to a specified set of coordinates.\n\n```\n  myCalciteFlowItem.scrollContentTo({\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n  });\n```",
-        "tags": [{
-            "name": "param",
-            "text": "options"
-          }]
+      "scrollContentTo": {
+        "complexType": {
+          "signature": "(options?: ScrollToOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "options"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ScrollToOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Scrolls the component's content to a specified set of coordinates.",
+          "tags": [{
+              "name": "example",
+              "text": "myCalciteFlowItem.scrollContentTo({\n  left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n  top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n  behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n});"
+            }, {
+              "name": "param",
+              "text": "options"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }