@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.68

package/dist/components/calcite-value-list.js

@@ -0,0 +1,271 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { S as Sortable } from './sortable.esm.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, r as removeItem, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, j as setUpItems, l as setFocus, L as List } from './shared-list-render.js';
+import { g as getRoundRobinIndex } from './array.js';
+import { c as createObserver } from './observers.js';
+import { d as defineCustomElement$7 } from './calcite-filter2.js';
+import { d as defineCustomElement$6 } from './calcite-icon2.js';
+import { d as defineCustomElement$5 } from './calcite-input2.js';
+import { d as defineCustomElement$4 } from './calcite-loader2.js';
+import { d as defineCustomElement$3 } from './calcite-progress2.js';
+import { d as defineCustomElement$2 } from './calcite-scrim2.js';
+
+const CSS = {
+  container: "container",
+  handle: "handle"
+};
+var ICON_TYPES;
+(function (ICON_TYPES) {
+  ICON_TYPES["grip"] = "grip";
+})(ICON_TYPES || (ICON_TYPES = {}));
+
+const calciteValueListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}calcite-value-list-item:last-of-type{-webkit-box-shadow:none;box-shadow:none}:host([filter-enabled]) header{background-color:var(--calcite-ui-foreground-1);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:0.25rem;-webkit-box-shadow:0 1px 0 var(--calcite-ui-border-3);box-shadow:0 1px 0 var(--calcite-ui-border-3)}:host([filter-enabled]) header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:10}calcite-filter{margin-bottom:1px}";
+
+let CalciteValueList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, the items will be sortable via drag and drop.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple Works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+     */
+    this.selectionFollowsFocus = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+    };
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      const handleElement = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+      const item = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+      // Only trigger keyboard sorting when the internal drag handle is focused and activated
+      if (!handleElement || !item.handleActivated) {
+        keyDownHandler.call(this, event);
+        return;
+      }
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const { el, items } = this;
+      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+      const currentIndex = items.indexOf(item);
+      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      requestAnimationFrame(() => handleElement.focus());
+      item.handleActivated = true;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListItemRemoveHandler(event) {
+    removeItem.call(this, event);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
+    }
+  }
+  setUpDragAndDrop() {
+    this.cleanUpDragAndDrop();
+    if (!this.dragEnabled) {
+      return;
+    }
+    this.sortable = Sortable.create(this.el, {
+      dataIdAttr: "id",
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    var _a;
+    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.sortable = null;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  /** Sets focus on the component. */
+  async setFocus(focusId) {
+    return setFocus.call(this, focusId);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
+    }
+    return type;
+  }
+  render() {
+    return h(List, { onKeyDown: this.keyDownHandler, props: this });
+  }
+  get el() { return this; }
+  static get style() { return calciteValueListCss; }
+};
+CalciteValueList$1 = /*@__PURE__*/ proxyCustomElement(CalciteValueList$1, [1, "calcite-value-list", {
+    "disabled": [516],
+    "dragEnabled": [516, "drag-enabled"],
+    "filterEnabled": [516, "filter-enabled"],
+    "filterPlaceholder": [513, "filter-placeholder"],
+    "group": [1],
+    "loading": [516],
+    "multiple": [516],
+    "selectionFollowsFocus": [4, "selection-follows-focus"],
+    "selectedValues": [32],
+    "dataForFilter": [32],
+    "getSelectedItems": [64],
+    "setFocus": [64]
+  }, [[0, "calciteListItemRemove", "calciteListItemRemoveHandler"], [0, "calciteListItemChange", "calciteListItemChangeHandler"], [0, "calciteListItemPropsChange", "calciteListItemPropsChangeHandler"], [0, "calciteListItemValueChange", "calciteListItemValueChangeHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-value-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteValueList$1);
+      }
+      break;
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteValueList = CalciteValueList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteValueList, defineCustomElement };

package/dist/components/date.js

@@ -0,0 +1,159 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+/**
+ * Check if date is within a min and max
+ */
+function inRange(date, min, max) {
+  const time = date.getTime();
+  const afterMin = !(min instanceof Date) || time >= min.getTime();
+  const beforeMax = !(max instanceof Date) || time <= max.getTime();
+  return afterMin && beforeMax;
+}
+/**
+ * Ensures date is within range,
+ * returns min or max if out of bounds
+ */
+function dateFromRange(date, min, max) {
+  if (!(date instanceof Date)) {
+    return null;
+  }
+  const time = date.getTime();
+  const beforeMin = min instanceof Date && time < min.getTime();
+  const afterMax = max instanceof Date && time > max.getTime();
+  if (beforeMin) {
+    return min;
+  }
+  if (afterMax) {
+    return max;
+  }
+  return date;
+}
+/**
+ * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
+ * TODO: handle time when time of day UI is added
+ */
+function dateFromISO(iso8601) {
+  if (iso8601 instanceof Date) {
+    return iso8601;
+  }
+  if (!iso8601 || typeof iso8601 !== "string") {
+    return null;
+  }
+  const d = iso8601.split(/[: T-]/).map(parseFloat);
+  const date = new Date(d[0], (d[1] || 1) - 1, d[2] || 1);
+  date.setFullYear(d[0]);
+  if (isNaN(date.getTime())) {
+    throw new Error(`Invalid ISO 8601 date: "${iso8601}"`);
+  }
+  return date;
+}
+/**
+ * Return first portion of ISO string (YYYY-mm-dd)
+ */
+function dateToISO(date) {
+  if (typeof date === "string") {
+    return date;
+  }
+  if (date instanceof Date) {
+    return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split("T")[0];
+  }
+  return "";
+}
+/**
+ * Check if two dates are the same day, month, year
+ */
+function sameDate(d1, d2) {
+  return (d1 instanceof Date &&
+    d2 instanceof Date &&
+    d1.getDate() === d2.getDate() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getFullYear() === d2.getFullYear());
+}
+/**
+ * Get a date one month in the past
+ */
+function prevMonth(date) {
+  const month = date.getMonth();
+  const nextDate = new Date(date);
+  nextDate.setMonth(month - 1);
+  // date doesn't exist in new month, use last day
+  if (month === nextDate.getMonth()) {
+    return new Date(date.getFullYear(), month, 0);
+  }
+  return nextDate;
+}
+/**
+ * Get a date one month in the future
+ */
+function nextMonth(date) {
+  const month = date.getMonth();
+  const nextDate = new Date(date);
+  nextDate.setMonth(month + 1);
+  // date doesn't exist in new month, use last day
+  if ((month + 2) % 7 === nextDate.getMonth() % 7) {
+    return new Date(date.getFullYear(), month + 2, 0);
+  }
+  return nextDate;
+}
+/**
+ * Translate a number into a given locals numeral system
+ */
+function localizeNumber(num, localeData) {
+  return String(num)
+    .split("")
+    .map((i) => localeData.numerals[i])
+    .join("");
+}
+/**
+ * Calculate actual number from localized string
+ */
+function parseNumber(str, localeData) {
+  const numerals = "0123456789";
+  return parseInt(str
+    .split("")
+    .map((i) => numerals[localeData.numerals.indexOf(i)])
+    .filter((num) => num)
+    .join(""));
+}
+/**
+ * Parse numeric units for day, month, and year from a localized string
+ * month starts at 0 (can pass to date constructor)
+ */
+function parseDateString(str, localeData) {
+  const { separator, unitOrder } = localeData;
+  const order = getOrder(unitOrder);
+  const values = replaceArabicNumerals(str).split(separator);
+  return {
+    day: parseInt(values[order.indexOf("d")]),
+    month: parseInt(values[order.indexOf("m")]) - 1,
+    year: parseInt(values[order.indexOf("y")])
+  };
+}
+/**
+ * Convert eastern arbic numerals
+ */
+function replaceArabicNumerals(str = "") {
+  return str
+    .replace(/[\u0660-\u0669]/g, (c) => (c.charCodeAt(0) - 0x0660))
+    .replace(/[\u06f0-\u06f9]/g, (c) => (c.charCodeAt(0) - 0x06f0));
+}
+/**
+ * Based on the unitOrder string, find order of month, day, and year for locale
+ */
+function getOrder(unitOrder) {
+  const signifiers = ["d", "m", "y"];
+  const order = unitOrder.toLowerCase();
+  return signifiers.sort((a, b) => order.indexOf(a) - order.indexOf(b));
+}
+/**
+ * Get number of days between two dates
+ */
+function getDaysDiff(date1, date2) {
+  const ts1 = date1.getTime();
+  const ts2 = date2.getTime();
+  return (ts1 - ts2) / (1000 * 3600 * 24);
+}
+
+export { dateFromISO as a, dateFromRange as b, getOrder as c, dateToISO as d, parseNumber as e, parseDateString as f, getDaysDiff as g, inRange as i, localizeNumber as l, nextMonth as n, prevMonth as p, sameDate as s };