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

package/dist/collection/components/action-bar/action-bar.stories.js

@@ -0,0 +1,141 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import { html } from "../../../support/formatting";
+import { TEXT } from "./resources";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Action Bar",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const { position } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "expand-disabled",
+            commit() {
+                this.value = boolean("expandDisabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "expanded",
+            commit() {
+                this.value = boolean("expanded", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-expand",
+            commit() {
+                this.value = text("intlExpand", TEXT.expand);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-collapse",
+            commit() {
+                this.value = text("intlCollapse", TEXT.collapse);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "position",
+            commit() {
+                this.value = select("position", position.values, position.defaultValue);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+export const simple = () => create("calcite-action-bar", createAttributes(), html `
+      <calcite-action-group>
+        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
+        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
+      </calcite-action-group>
+    `);
+export const horizontal = () => html `
+  <div style="width: 500px;">
+    <calcite-action-bar layout="horizontal" style="width:100%">
+      <calcite-action-group layout="horizontal">
+        <calcite-action text="Add" icon="plus"> </calcite-action>
+        <calcite-action text="Save" icon="save"> </calcite-action>
+        <calcite-action text="Layers" icon="layers"> </calcite-action>
+      </calcite-action-group>
+      <calcite-action-group layout="horizontal">
+        <calcite-action text="Add" icon="plus"> </calcite-action>
+        <calcite-action text="Save" active icon="save"> </calcite-action>
+        <calcite-action text="Layers" icon="layers"> </calcite-action>
+      </calcite-action-group>
+      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+    </calcite-action-bar>
+  </div>
+`;
+export const horizontalSmall = () => html `
+  <div style="width: 250px;">
+    <calcite-action-bar layout="horizontal" style="width:100%">
+      <calcite-action-group layout="horizontal">
+        <calcite-action text="Add" icon="plus"> </calcite-action>
+        <calcite-action text="Save" icon="save"> </calcite-action>
+        <calcite-action text="Layers" icon="layers"> </calcite-action>
+      </calcite-action-group>
+      <calcite-action-group layout="horizontal">
+        <calcite-action text="Add" icon="plus"> </calcite-action>
+        <calcite-action text="Save" active icon="save"> </calcite-action>
+        <calcite-action text="Layers" icon="layers"> </calcite-action>
+      </calcite-action-group>
+      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+    </calcite-action-bar>
+  </div>
+`;
+export const withDefinedWidths = () => html `
+    <style>
+      calcite-action-bar {
+        --calcite-action-bar-expanded-max-width: 150px;
+      }
+    </style>
+    <calcite-action-bar expanded>
+      <calcite-action-group>
+        <calcite-action text="Add to my custom action bar application" icon="plus"></calcite-action>
+        <calcite-action text="Save to my custom action bar application" icon="save"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Layers in my custom action bar application" icon="layers"></calcite-action>
+      </calcite-action-group>
+    </calcite-action-bar>
+  `;
+export const darkThemeRTL_TestOnly = () => create("calcite-action-bar", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    {
+        name: "dir",
+        value: "rtl"
+    },
+    {
+        name: "class",
+        value: "calcite-theme-dark"
+    }
+]), html `
+      <calcite-action-group>
+        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
+        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
+      </calcite-action-group>
+    `);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const withTooltip_NoTest = () => create("calcite-action-bar", createAttributes(), html `
+      <calcite-tooltip placement="bottom" slot="expand-tooltip">Expand</calcite-tooltip>
+      <calcite-action text="Add" icon="plus"></calcite-action>
+    `);

package/dist/collection/components/action-bar/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-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.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-next.597
+ * v1.0.0-next.598
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-group/action-group.css

@@ -99,7 +99,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is "grid".
+* @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
 */
 :host {
   display: flex;

package/dist/collection/components/action-group/action-group.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-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { ICONS, SLOTS, TEXT } from "./resources";
@@ -22,7 +22,7 @@ export class ActionGroup {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, the component is expanded.
+     * When `true`, the component is expanded.
      */
     this.expanded = false;
     /**
@@ -30,7 +30,7 @@ export class ActionGroup {
      */
     this.layout = "vertical";
     /**
-     * When true, the `calcite-action-menu` is open.
+     * When `true`, the `calcite-action-menu` is open.
      */
     this.menuOpen = false;
     // --------------------------------------------------------------------------
@@ -100,7 +100,7 @@ export class ActionGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is expanded."
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,
@@ -180,7 +180,7 @@ export class ActionGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the `calcite-action-menu` is open."
+          "text": "When `true`, the `calcite-action-menu` is open."
         },
         "attribute": "menu-open",
         "reflect": true,

package/dist/collection/components/action-group/action-group.stories.js

@@ -0,0 +1,41 @@
+import { select, text } from "@storybook/addon-knobs";
+import { iconNames, storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Action Group",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const gridCenteringOfActionsInAGroup = () => html `
+  <div style="width:400px">
+    <calcite-action-group layout="${select("layout", ["horizontal", "vertical", "grid"], "grid")}">
+      <calcite-action
+        alignment="${select("alignment", ["start", "center", "end"], "center")}"
+        scale="${select("scale", ["s", "m", "l"], "m")}"
+        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
+        icon="${select("icon", iconNames, "polygon")}"
+        ${text("text", "polygon")}
+      >
+      </calcite-action>
+      <calcite-action
+        alignment="${select("alignment", ["start", "center", "end"], "center")}"
+        scale="${select("scale", ["s", "m", "l"], "m")}"
+        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
+        icon="${select("icon", iconNames, "rectangle")}"
+        ${text("text", "rectangle")}
+      >
+      </calcite-action>
+      <calcite-action
+        alignment="${select("alignment", ["start", "center", "end"], "center")}"
+        scale="${select("scale", ["s", "m", "l"], "m")}"
+        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
+        icon="${select("icon", iconNames, "trash")}"
+        ${text("text", "trash")}
+      >
+      </calcite-action>
+    </calcite-action-group>
+  </div>
+`;

package/dist/collection/components/action-group/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-next.597
+ * v1.0.0-next.598
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.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-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
@@ -25,11 +25,11 @@ export class ActionMenu {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, the component is expanded.
+     * When `true`, the component is expanded.
      */
     this.expanded = false;
     /**
-     * When true, the component is open.
+     * When `true`, the component is open.
      */
     this.open = false;
     /**
@@ -306,7 +306,7 @@ export class ActionMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is expanded."
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,
@@ -361,7 +361,7 @@ export class ActionMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is open."
+          "text": "When `true`, the component is open."
         },
         "attribute": "open",
         "reflect": true,

package/dist/collection/components/action-menu/action-menu.stories.js

@@ -0,0 +1,26 @@
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Action Menu",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+    <calcite-action-menu>
+      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+    </calcite-action-menu>
+  `;
+export const open = () => html `
+    <calcite-action-menu open>
+      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+    </calcite-action-menu>
+  `;

package/dist/collection/components/action-menu/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-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   menu: "menu",

package/dist/collection/components/action-pad/action-pad.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-next.597
+ * v1.0.0-next.598
  */
 import { Host, h } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -20,11 +20,11 @@ export class ActionPad {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, the expand-toggling behavior is disabled.
+     * When `true`, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * When true, the component is expanded.
+     * When `true`, the component is expanded.
      */
     this.expanded = false;
     /**
@@ -132,7 +132,7 @@ export class ActionPad {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the expand-toggling behavior is disabled."
+          "text": "When `true`, the expand-toggling behavior is disabled."
         },
         "attribute": "expand-disabled",
         "reflect": true,
@@ -150,7 +150,7 @@ export class ActionPad {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is expanded."
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,

package/dist/collection/components/action-pad/action-pad.stories.js

@@ -0,0 +1,107 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import { html } from "../../../support/formatting";
+import { TEXT } from "./resources";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Action Pad",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const { position } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "expand-disabled",
+            commit() {
+                this.value = boolean("expandDisabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "expanded",
+            commit() {
+                this.value = boolean("expanded", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "position",
+            commit() {
+                this.value = select("position", position.values, position.defaultValue);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-expand",
+            commit() {
+                this.value = text("intlExpand", TEXT.expand);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-collapse",
+            commit() {
+                this.value = text("intlCollapse", TEXT.collapse);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+export const simple = () => create("calcite-action-pad", createAttributes(), html `
+      <calcite-action-group>
+        <calcite-action text="Undo" label="Undo Action" icon="undo"></calcite-action>
+        <calcite-action text="Redo" label="Redo Action" icon="redo"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Delete" label="Delete Item" icon="trash"></calcite-action>
+      </calcite-action-group>
+    `);
+export const withDefinedWidths = () => html `
+    <style>
+      calcite-action-pad {
+        --calcite-action-pad-expanded-max-width: 150px;
+      }
+    </style>
+    <calcite-action-pad expanded>
+      <calcite-action-group>
+        <calcite-action text="Add to my custom action pad application" icon="plus"></calcite-action>
+        <calcite-action text="Save to my custom action pad application" icon="save"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Layers in my custom action pad application" icon="layers"></calcite-action>
+      </calcite-action-group>
+    </calcite-action-pad>
+  `;
+export const darkThemeRTL_TestOnly = () => create("calcite-action-pad", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    {
+        name: "dir",
+        value: "rtl"
+    },
+    {
+        name: "class",
+        value: "calcite-theme-dark"
+    }
+]), html `
+      <calcite-action-group>
+        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
+        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
+      </calcite-action-group>
+    `);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const withTooltip_NoTest = () => create("calcite-action-pad", createAttributes(), html `
+      <calcite-tooltip placement="bottom" slot="expand-tooltip">Expand</calcite-tooltip>
+      <calcite-action text="Add" icon="plus"></calcite-action>
+    `);

package/dist/collection/components/action-pad/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-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.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-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
-import { getSupportedNumberingSystem, connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
@@ -26,14 +26,14 @@ export class Alert {
     //
     //---------------------------------------------------------------------------
     /**
-     * When true, opens the combobox
+     * When `true`, displays and positions the component.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /** When true, opens the dropdown */
+    /** When `true`, displays and positions the component. */
     this.open = false;
-    /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
+    /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
     this.autoDismiss = false;
     /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
@@ -131,14 +131,13 @@ export class Alert {
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const formatter = new Intl.NumberFormat(this.effectiveLocale, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 20,
-      numberingSystem: getSupportedNumberingSystem(this.numberingSystem),
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
       signDisplay: "always"
-    });
+    };
     const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
-    const queueText = formatter.format(queueNumber);
+    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
@@ -243,9 +242,9 @@ export class Alert {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use open instead"
+              "text": "use `open` instead."
             }],
-          "text": "When true, opens the combobox"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "active",
         "reflect": true,
@@ -263,7 +262,7 @@ export class Alert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, opens the dropdown"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "open",
         "reflect": true,
@@ -281,7 +280,7 @@ export class Alert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component closes automatically (recommended for passive, non-blocking alerts)."
+          "text": "When `true`, the component closes automatically (recommended for passive, non-blocking alerts)."
         },
         "attribute": "auto-dismiss",
         "reflect": true,
@@ -345,7 +344,7 @@ export class Alert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true