@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/cjs/resources-70df862e.js

@@ -0,0 +1,52 @@
+/*!
+ * 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.94
+ */
+'use strict';
+
+const CSS = {
+  backButton: "back-button",
+  container: "container",
+  header: "header",
+  heading: "heading",
+  summary: "summary",
+  description: "description",
+  headerContent: "header-content",
+  headerActions: "header-actions",
+  headerActionsEnd: "header-actions--end",
+  headerActionsStart: "header-actions--start",
+  contentWrapper: "content-wrapper",
+  contentContainer: "content-container",
+  contentHeight: "content-height",
+  fabContainer: "fab-container",
+  footer: "footer"
+};
+const ICONS = {
+  close: "x",
+  menu: "ellipsis",
+  backLeft: "chevron-left",
+  backRight: "chevron-right"
+};
+const SLOTS = {
+  headerActionsStart: "header-actions-start",
+  headerActionsEnd: "header-actions-end",
+  headerMenuActions: "header-menu-actions",
+  headerContent: "header-content",
+  fab: "fab",
+  footer: "footer",
+  footerActions: "footer-actions"
+};
+const TEXT = {
+  back: "Back",
+  close: "Close",
+  open: "Open",
+  options: "Options"
+};
+const HEADING_LEVEL = 3;
+
+exports.CSS = CSS;
+exports.HEADING_LEVEL = HEADING_LEVEL;
+exports.ICONS = ICONS;
+exports.SLOTS = SLOTS;
+exports.TEXT = TEXT;

package/dist/cjs/{resources-549d99a7.js → resources-8e0523cb.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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 

package/dist/cjs/{resources-a7220671.js → resources-95894101.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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 

package/dist/cjs/{resources-42b4d672.js → resources-ed85e818.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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 

package/dist/cjs/{resources-95ef3f0a.js → resources-ef687533.js}

@@ -1,70 +1,12 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 
-const index = require('./index-d1f4f7de.js');
-const locale = require('./locale-eb7612fa.js');
-
-/**
- * Get supported locale code from raw user input
- * Exported for testing purposes.
- *
- * @param lang
- * @private
- */
-function getSupportedLocale(lang = "") {
-  if (locale.locales.indexOf(lang) > -1) {
-    return lang;
-  }
-  lang = lang.toLowerCase();
-  if (lang.includes("-")) {
-    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
-    if (!locale.locales.includes(lang)) {
-      lang = lang.split("-")[0];
-    }
-  }
-  return locale.locales.includes(lang) ? lang : "en";
-}
-/**
- * CLDR cache.
- * Exported for testing purposes.
- *
- * @private
- */
-const translationCache = {};
-/**
- * CLDR request cache.
- * Exported for testing purposes.
- *
- * @private
- */
-const requestCache = {};
-/**
- * Fetch calendar data for a given locale from list of supported languages
- *
- * @param lang
- * @public
- */
-async function getLocaleData(lang) {
-  const locale = getSupportedLocale(lang);
-  if (translationCache[locale]) {
-    return translationCache[locale];
-  }
-  if (!requestCache[locale]) {
-    requestCache[locale] = fetch(index.getAssetPath(`./assets/date-picker/nls/${locale}.json`))
-      .then((resp) => resp.json())
-      .catch(() => {
-      console.error(`Translations for "${locale}" not found or invalid, falling back to english`);
-      return getLocaleData("en");
-    });
-  }
-  const data = await requestCache[locale];
-  translationCache[locale] = data;
-  return data;
-}
+const index = require('./index-1dbd01a1.js');
+const locale = require('./locale-f8b73f7b.js');
 
 /**
  * Check if date is within a min and max
@@ -107,8 +49,9 @@ function dateFromRange(date, min, max) {
  * TODO: handle time when time of day UI is added
  *
  * @param iso8601
+ * @param isEndDate
  */
-function dateFromISO(iso8601) {
+function dateFromISO(iso8601, isEndDate = false) {
   if (iso8601 instanceof Date) {
     return iso8601;
   }
@@ -121,6 +64,9 @@ function dateFromISO(iso8601) {
   if (isNaN(date.getTime())) {
     throw new Error(`Invalid ISO 8601 date: "${iso8601}"`);
   }
+  if (isEndDate) {
+    return setEndOfDay(date);
+  }
   return date;
 }
 /**
@@ -254,6 +200,82 @@ function getDaysDiff(date1, date2) {
   const ts2 = date2.getTime();
   return (ts1 - ts2) / (1000 * 3600 * 24);
 }
+/**
+ * Set time of the day to the end.
+ *
+ * @param {Date} date Date.
+ * @returns {Date} Date with time set to end of day .
+ */
+function setEndOfDay(date) {
+  date.setHours(23, 59, 59, 999);
+  return date;
+}
+
+/**
+ * Get supported locale code from raw user input
+ * Exported for testing purposes.
+ *
+ * @param lang
+ * @private
+ */
+function getSupportedLocale(lang = "") {
+  if (locale.locales.indexOf(lang) > -1) {
+    return lang;
+  }
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+    if (!locale.locales.includes(lang)) {
+      lang = lang.split("-")[0];
+    }
+  }
+  return locale.locales.includes(lang) ? lang : "en";
+}
+/**
+ * CLDR cache.
+ * Exported for testing purposes.
+ *
+ * @private
+ */
+const translationCache = {};
+/**
+ * CLDR request cache.
+ * Exported for testing purposes.
+ *
+ * @private
+ */
+const requestCache = {};
+/**
+ * Fetch calendar data for a given locale from list of supported languages
+ *
+ * @param lang
+ * @public
+ */
+async function getLocaleData(lang) {
+  const locale = getSupportedLocale(lang);
+  if (translationCache[locale]) {
+    return translationCache[locale];
+  }
+  if (!requestCache[locale]) {
+    requestCache[locale] = fetch(index.getAssetPath(`./assets/date-picker/nls/${locale}.json`))
+      .then((resp) => resp.json())
+      .catch(() => {
+      console.error(`Translations for "${locale}" not found or invalid, falling back to english`);
+      return getLocaleData("en");
+    });
+  }
+  const data = await requestCache[locale];
+  translationCache[locale] = data;
+  return data;
+}
+/**
+ *  Maps value to valueAsDate
+ *
+ * @param value
+ */
+function getValueAsDateRange(value) {
+  return value.map((v, index) => dateFromISO(v, index === 1));
+}
 
 const HEADING_LEVEL = 2;
 const TEXT = {
@@ -270,6 +292,7 @@ exports.dateToISO = dateToISO;
 exports.getDaysDiff = getDaysDiff;
 exports.getLocaleData = getLocaleData;
 exports.getOrder = getOrder;
+exports.getValueAsDateRange = getValueAsDateRange;
 exports.inRange = inRange;
 exports.localizeNumber = localizeNumber;
 exports.nextMonth = nextMonth;
@@ -277,3 +300,4 @@ exports.parseDateString = parseDateString;
 exports.parseNumber = parseNumber;
 exports.prevMonth = prevMonth;
 exports.sameDate = sameDate;
+exports.setEndOfDay = setEndOfDay;

package/dist/cjs/{sortable.esm-027d0bf8.js → sortable.esm-7d4d980b.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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 

package/dist/cjs/{utils-87048187.js → utils-4b72e0e2.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.92
+ * v1.0.0-beta.94
  */
 'use strict';
 

package/dist/collection/collection-manifest.json

@@ -34,6 +34,7 @@
     "./components/fab/fab.js",
     "./components/filter/filter.js",
     "./components/flow/flow.js",
+    "./components/flow-item/flow-item.js",
     "./components/graph/graph.js",
     "./components/handle/handle.js",
     "./components/icon/icon.js",
@@ -95,7 +96,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.16.1",
+    "version": "2.17.4",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/accordion/accordion.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Listen, Prop } from "@stencil/core";
 /**
@@ -15,7 +15,7 @@ export class Accordion {
     //
     //--------------------------------------------------------------------------
     /** Specifies the appearance of the component. */
-    this.appearance = "default";
+    this.appearance = "solid";
     /** Specifies the placement of the icon in the header. */
     this.iconPosition = "end";
     /** Specifies the type of the icon in the header. */
@@ -50,10 +50,12 @@ export class Accordion {
     }
   }
   render() {
+    const transparent = this.appearance === "transparent";
+    const minimal = this.appearance === "minimal";
     return (h("div", { class: {
-        "accordion--transparent": this.appearance === "transparent",
-        "accordion--minimal": this.appearance === "minimal",
-        accordion: this.appearance === "default"
+        "accordion--transparent": transparent,
+        "accordion--minimal": minimal,
+        accordion: !transparent && !minimal
       } },
       h("slot", null)));
   }
@@ -159,7 +161,7 @@ export class Accordion {
       "mutable": false,
       "complexType": {
         "original": "AccordionAppearance",
-        "resolved": "\"default\" | \"minimal\" | \"transparent\"",
+        "resolved": "\"default\" | \"minimal\" | \"solid\" | \"transparent\"",
         "references": {
           "AccordionAppearance": {
             "location": "import",
@@ -175,7 +177,7 @@ export class Accordion {
       },
       "attribute": "appearance",
       "reflect": true,
-      "defaultValue": "\"default\""
+      "defaultValue": "\"solid\""
     },
     "iconPosition": {
       "type": "string",

package/dist/collection/components/accordion/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/accordion-item/accordion-item.css

@@ -152,6 +152,23 @@
   margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);
 }
 
+.icon--start {
+  display: flex;
+  align-items: center;
+  margin-inline-end: var(--calcite-accordion-icon-margin);
+}
+
+.icon--end {
+  display: flex;
+  align-items: center;
+  margin-inline-end: var(--calcite-accordion-icon-margin);
+  margin-inline-start: var(--calcite-accordion-icon-margin);
+}
+
+.header-container {
+  inline-size: 100%;
+}
+
 .content {
   padding: var(--calcite-accordion-item-padding);
 }

package/dist/collection/components/accordion-item/accordion-item.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom";
@@ -37,6 +37,12 @@ export class AccordionItem {
   expandedHandler(value) {
     this.active = value;
   }
+  iconHandler(value) {
+    this.iconStart = value;
+  }
+  iconStartHandler(value) {
+    this.icon = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -52,6 +58,12 @@ export class AccordionItem {
       this.activeHandler(isExpanded);
       this.expandedHandler(isExpanded);
     }
+    if (this.iconStart) {
+      this.icon = this.iconStart;
+    }
+    else if (this.icon) {
+      this.iconStart = this.icon;
+    }
     connectConditionalSlotComponent(this);
   }
   componentDidLoad() {
@@ -81,7 +93,9 @@ export class AccordionItem {
   }
   render() {
     const dir = getElementDir(this.el);
-    const iconEl = h("calcite-icon", { class: CSS.icon, icon: this.icon, scale: "s" });
+    const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
+    const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
+    const description = this.description || this.itemSubtitle;
     return (h(Host, null,
       h("div", { class: {
           [`icon-position--${this.iconPosition}`]: true,
@@ -90,10 +104,12 @@ export class AccordionItem {
         h("div", { class: { [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
           this.renderActionsStart(),
           h("div", { "aria-expanded": toAriaBoolean(this.active || this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" },
-            this.icon ? iconEl : null,
-            h("div", { class: CSS.headerText },
-              h("span", { class: CSS.heading }, this.heading || this.itemTitle),
-              this.itemSubtitle || this.description ? (h("span", { class: CSS.description }, this.description || this.itemSubtitle)) : null),
+            h("div", { class: CSS.headerContainer },
+              iconStartEl,
+              h("div", { class: CSS.headerText },
+                h("span", { class: CSS.heading }, this.heading || this.itemTitle),
+                description ? h("span", { class: CSS.description }, description) : null),
+              iconEndEl),
             h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
                 ? "chevronDown"
                 : this.iconType === "caret"
@@ -292,7 +308,7 @@ export class AccordionItem {
     },
     "icon": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -301,11 +317,48 @@ export class AccordionItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `iconStart` or `iconEnd` properties instead"
+          }],
         "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
       "reflect": true
+    },
+    "iconStart": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specified an icon to display at the start - accepts Calcite UI icon names."
+      },
+      "attribute": "icon-start",
+      "reflect": true
+    },
+    "iconEnd": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specified an icon to display at the end - accepts Calcite UI icon names."
+      },
+      "attribute": "icon-end",
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -403,6 +456,12 @@ export class AccordionItem {
     }, {
       "propName": "expanded",
       "methodName": "expandedHandler"
+    }, {
+      "propName": "icon",
+      "methodName": "iconHandler"
+    }, {
+      "propName": "iconStart",
+      "methodName": "iconStartHandler"
     }]; }
   static get listeners() { return [{
       "name": "keydown",

package/dist/collection/components/accordion-item/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/accordion-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.92
+ * v1.0.0-beta.94
  */
 export const SLOTS = {
   actionsStart: "actions-start",
@@ -17,5 +17,8 @@ export const CSS = {
   heading: "heading",
   description: "description",
   expandIcon: "expand-icon",
-  content: "content"
+  content: "content",
+  iconStart: "icon--start",
+  iconEnd: "icon--end",
+  headerContainer: "header-container"
 };

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

@@ -256,7 +256,8 @@
   background-color: var(--calcite-ui-foreground-1);
 }
 
-:host([appearance=clear]) .button {
+:host([appearance=clear]) .button, 
+:host([appearance=transparent]) .button {
   background-color: transparent;
   transition-property: box-shadow;
   transition-duration: 150ms;
@@ -264,21 +265,28 @@
 }
 
 :host([appearance=clear]) .button:hover, 
-:host([appearance=clear]) .button:focus {
+:host([appearance=clear]) .button:focus, 
+:host([appearance=transparent]) .button:hover, 
+:host([appearance=transparent]) .button:focus {
   background-color: transparent;
   box-shadow: 0 0 0 2px var(--calcite-ui-border-1) inset;
 }
 
 :host([active][appearance=clear]) .button, 
 :host([active][appearance=clear]) .button:hover, 
-:host([active][appearance=clear]) .button:focus {
+:host([active][appearance=clear]) .button:focus, 
+:host([active][appearance=transparent]) .button, 
+:host([active][appearance=transparent]) .button:hover, 
+:host([active][appearance=transparent]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
 }
 
 :host([appearance=clear][loading]) .button, 
-:host([appearance=clear][disabled]) .button {
+:host([appearance=clear][disabled]) .button, 
+:host([appearance=transparent][loading]) .button, 
+:host([appearance=transparent][disabled]) .button {
   background-color: transparent;
 }
 

package/dist/collection/components/action/action.js

@@ -1,10 +1,10 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
-import { CSS, TEXT } from "./resources";
+import { CSS, TEXT, SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
@@ -60,6 +60,17 @@ export class Action {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.handleTooltipSlotChange = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      const tooltip = tooltips[0];
+      if (tooltip) {
+        tooltip.referenceElement = this.buttonEl;
+      }
+    };
     this.calciteActionClickHandler = () => {
       if (!this.disabled) {
         this.calciteActionClick.emit();
@@ -134,7 +145,8 @@ export class Action {
     return (h(Host, { onClick: this.calciteActionClickHandler },
       h("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) },
         this.renderIconContainer(),
-        this.renderTextContainer())));
+        this.renderTextContainer()),
+      h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange })));
   }
   static get is() { return "calcite-action"; }
   static get encapsulation() { return "shadow"; }
@@ -262,7 +274,7 @@ export class Action {
         "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
-      "reflect": false
+      "reflect": true
     },
     "indicator": {
       "type": "boolean",

package/dist/collection/components/action/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   button: "button",
@@ -16,3 +16,6 @@ export const CSS = {
 export const TEXT = {
   loading: "Loading"
 };
+export const SLOTS = {
+  tooltip: "tooltip"
+};

package/dist/collection/components/action-bar/action-bar.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -311,7 +311,7 @@ export class ActionBar {
         "text": "Disables automatically overflowing `calcite-action`s that won't fit into menus."
       },
       "attribute": "overflow-actions-disabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "position": {