@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,50 +1,28 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
-import { CSS, ICONS, TEXT, SLOTS } from "./resources";
+import { CSS, ICONS, SLOTS } from "./resources";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { updateHostInteraction } from "../../utils/interactive";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 /**
  * @slot - A slot for adding custom content.
- * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
- * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
- * @slot header-content - A slot for adding custom content to the header.
- * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
+ * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
+ * @slot header-content - A slot for adding custom content to the component's header.
+ * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - A slot for adding buttons to the footer.
- * @slot footer - A slot for adding custom content to the footer.
+ * @slot footer-actions - A slot for adding `calcite-button`s to the component's footer.
+ * @slot footer - A slot for adding custom content to the component's footer.
  */
 export class FlowItem {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /** When true, displays a close button in the trailing side of the header */
-    this.closable = false;
-    /** When true, flow-item will be hidden */
-    this.closed = false;
-    /**
-     *  When true, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When true, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * When true, the action menu items in the `header-menu-actions` slot are open.
-     */
-    this.menuOpen = false;
-    /**
-     * When true, displays a back button in the header.
-     */
-    this.showBackButton = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -59,7 +37,6 @@ export class FlowItem {
       this.calciteFlowItemClose.emit();
     };
     this.backButtonClick = () => {
-      this.calciteFlowItemBackClick.emit();
       this.calciteFlowItemBack.emit();
     };
     this.setBackRef = (node) => {
@@ -68,18 +45,53 @@ export class FlowItem {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.getBackLabel = () => {
-      return this.intlBack || TEXT.back;
-    };
+    this.closable = false;
+    this.closed = false;
+    this.beforeBack = undefined;
+    this.description = undefined;
+    this.disabled = false;
+    this.heading = undefined;
+    this.headingLevel = undefined;
+    this.heightScale = undefined;
+    this.loading = false;
+    this.menuOpen = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.showBackButton = false;
+    this.widthScale = undefined;
+    this.backButtonEl = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  async componentWillLoad() {
+    await setUpMessages(this);
+    setUpLoadableComponent(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -89,12 +101,13 @@ export class FlowItem {
    * Sets focus on the component.
    */
   async setFocus() {
+    await componentLoaded(this);
     const { backButtonEl, containerEl } = this;
     if (backButtonEl) {
       backButtonEl.setFocus();
       return;
     }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.setFocus();
+    containerEl?.setFocus();
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -108,8 +121,7 @@ export class FlowItem {
    * @param options
    */
   async scrollContentTo(options) {
-    var _a;
-    await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options));
+    await this.containerEl?.scrollContentTo(options);
   }
   // --------------------------------------------------------------------------
   //
@@ -119,15 +131,15 @@ export class FlowItem {
   renderBackButton() {
     const { el } = this;
     const rtl = getElementDir(el) === "rtl";
-    const { showBackButton, backButtonClick } = this;
-    const label = this.getBackLabel();
+    const { showBackButton, backButtonClick, messages } = this;
+    const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label })) : null;
   }
   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, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), 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)), backButtonEl ? (h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
+    const { closable, closed, description, disabled, heading, headingLevel, heightScale, loading, menuOpen, messages, widthScale, backButtonEl } = this;
+    const label = messages.back;
+    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), 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)), backButtonEl ? (h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
   }
   static get is() { return "calcite-flow-item"; }
   static get encapsulation() { return "shadow"; }
@@ -141,6 +153,7 @@ export class FlowItem {
       "$": ["flow-item.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "closable": {
@@ -155,7 +168,7 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays a close button in the trailing side of the header"
+          "text": "When `true`, displays a close button in the trailing side of the component's header."
         },
         "attribute": "closable",
         "reflect": true,
@@ -173,7 +186,7 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, flow-item will be hidden"
+          "text": "When `true`, the component will be hidden."
         },
         "attribute": "closed",
         "reflect": true,
@@ -192,10 +205,10 @@ export class FlowItem {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "When provided, this method will be called before it is removed from the parent flow."
+          "text": "When provided, the method will be called before it is removed from its parent `calcite-flow`."
         }
       },
       "description": {
@@ -227,7 +240,7 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -242,7 +255,7 @@ export class FlowItem {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "The component header text."
@@ -286,7 +299,7 @@ export class FlowItem {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the maximum height of the component."
@@ -294,57 +307,6 @@ export class FlowItem {
         "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,
@@ -357,7 +319,7 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -375,12 +337,58 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the action menu items in the `header-menu-actions` slot are open."
+          "text": "When `true`, the action menu items in the `header-menu-actions` slot are open."
         },
         "attribute": "menu-open",
         "reflect": true,
         "defaultValue": "false"
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<FlowItemMessages>",
+          "resolved": "{ back?: string; close?: string; options?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "FlowItemMessages": {
+              "location": "import",
+              "path": "./assets/flow-item/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "FlowItemMessages",
+          "resolved": "{ back: string; close: string; options: string; }",
+          "references": {
+            "FlowItemMessages": {
+              "location": "import",
+              "path": "./assets/flow-item/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
       "showBackButton": {
         "type": "boolean",
         "mutable": false,
@@ -393,7 +401,7 @@ export class FlowItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays a back button in the header."
+          "text": "When true, displays a back button in the header.\nWhen `true`, displays a back button in the component's header."
         },
         "attribute": "show-back-button",
         "reflect": true,
@@ -413,7 +421,7 @@ export class FlowItem {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the width of the component."
@@ -425,7 +433,9 @@ export class FlowItem {
   }
   static get states() {
     return {
-      "backButtonEl": {}
+      "backButtonEl": {},
+      "defaultMessages": {},
+      "effectiveLocale": {}
     };
   }
   static get events() {
@@ -444,24 +454,6 @@ export class FlowItem {
           "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": "calciteFlowItemScroll",
         "name": "calciteFlowItemScroll",
@@ -546,4 +538,13 @@ export class FlowItem {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
+      }];
+  }
 }

package/dist/collection/components/flow-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 export const CSS = {
   backButton: "back-button"
@@ -10,9 +10,6 @@ export const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
-export const TEXT = {
-  back: "Back"
-};
 export const SLOTS = {
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",

package/dist/collection/components/functional/ExpandToggle.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -12,8 +12,7 @@ const ICONS = {
   chevronsRight: "chevrons-right"
 };
 function getCalcitePosition(position, el) {
-  var _a;
-  return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
+  return position || el.closest("calcite-shell-panel")?.position || "start";
 }
 export function toggleChildActionText({ parent, expanded }) {
   queryActions(parent)

package/dist/collection/components/functional/Heading.js

@@ -1,14 +1,14 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);
 }
 export const Heading = (props, children) => {
-  const HeadingTag = `h${props.level}`;
+  const HeadingTag = props.level ? `h${props.level}` : "div";
   delete props.level;
   return h(HeadingTag, { ...props }, children);
 };

package/dist/collection/components/graph/graph.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {

package/dist/collection/components/graph/graph.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -9,16 +9,6 @@ import { area, range, translate } from "./util";
 import { createObserver } from "../../utils/observers";
 export class Graph {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Array of tuples describing a single data point ([x, y])
-     * These data points should be sorted by x-axis value
-     */
-    this.data = [];
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -26,6 +16,12 @@ export class Graph {
     //--------------------------------------------------------------------------
     this.graphId = `calcite-graph-${guid()}`;
     this.resizeObserver = createObserver("resize", () => forceUpdate(this));
+    this.data = [];
+    this.colorStops = undefined;
+    this.highlightMin = undefined;
+    this.highlightMax = undefined;
+    this.min = undefined;
+    this.max = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -33,12 +29,10 @@ export class Graph {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    this.resizeObserver?.observe(this.el);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver?.disconnect();
   }
   render() {
     const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;
@@ -46,7 +40,7 @@ export class Graph {
     const { clientHeight: height, clientWidth: width } = el;
     // if we have no data, return empty svg
     if (!data || data.length === 0) {
-      return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
+      return (h("svg", { "aria-hidden": "true", class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
     }
     const { min: rangeMin, max: rangeMax } = range(data);
     let currentMin = rangeMin;
@@ -62,7 +56,7 @@ export class Graph {
     const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
-    return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
+    return (h("svg", { "aria-hidden": "true", class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
       h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
             M 0,0
             L ${hMinX - 1},0

package/dist/collection/components/graph/util.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 /**
  * Calculate slope of the tangents

package/dist/collection/components/handle/handle.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {