@esri/calcite-components 1.0.0-beta.75 → 1.0.0-beta.76

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css

@@ -123,6 +123,7 @@
   height: 0.125rem;
   background-color: var(--calcite-ui-brand);
   transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -524,7 +524,7 @@ export class CalciteTimePicker {
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
         [CSS[`scale-${this.scale}`]]: true
-      } },
+      }, dir: "ltr" },
       h("div", { class: CSS.column, role: "group" },
         h("span", { "aria-label": this.intlHourUp, class: {
             [CSS.button]: true,

package/dist/collection/components/calcite-tooltip/calcite-tooltip.js

@@ -13,12 +13,12 @@ import { queryElementRoots } from "../../utils/dom";
 export class CalciteTooltip {
   constructor() {
     /**
-     * Offset the position of the popover away from the reference element.
+     * Offset the position of the tooltip away from the reference element.
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the popover along the reference element.
+     * Offset the position of the tooltip along the reference element.
      */
     this.offsetSkidding = 0;
     /**
@@ -227,7 +227,7 @@ export class CalciteTooltip {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the popover away from the reference element."
+        "text": "Offset the position of the tooltip away from the reference element."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -245,7 +245,7 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the popover along the reference element."
+        "text": "Offset the position of the tooltip along the reference element."
       },
       "attribute": "offset-skidding",
       "reflect": true,

package/dist/collection/components/calcite-tree-item/calcite-tree-item.css

@@ -133,6 +133,11 @@
   position: absolute;
   top: 0px;
   width: 1px;
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -34,7 +34,7 @@ export class CalciteTreeItem {
       this.expanded = !this.expanded;
       if (this.selectionMode !== TreeSelectionMode.Ancestors) {
         this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: event.shiftKey,
+          modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: true
         });
       }
@@ -68,6 +68,11 @@ export class CalciteTreeItem {
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
   }
+  getselectionMode() {
+    this.isSelectionMultiLike =
+      this.selectionMode === TreeSelectionMode.Multi ||
+        this.selectionMode === TreeSelectionMode.MultiChildren;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -119,9 +124,10 @@ export class CalciteTreeItem {
         [CSS.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
-    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel },
+    const defaultSlotNode = h("slot", { key: "default-slot" });
+    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel, key: "checkbox-label" },
       h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }),
-      h("slot", null))) : null;
+      defaultSlotNode)) : null;
     const selectedIcon = showBulletPoint
       ? ICONS.bulletPoint
       : showCheckmark
@@ -140,7 +146,7 @@ export class CalciteTreeItem {
         }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) },
         chevron,
         bulletOrCheckIcon,
-        checkbox ? checkbox : h("slot", null)),
+        checkbox ? checkbox : defaultSlotNode),
       h("div", { class: {
           [CSS.childrenContainer]: true,
           [CSS_UTILITY.rtl]: rtl
@@ -161,7 +167,7 @@ export class CalciteTreeItem {
       window.open(link.href, target);
     }
     this.calciteTreeItemSelect.emit({
-      modifyCurrentSelection: e.shiftKey || this.selectionMode === TreeSelectionMode.Ancestors,
+      modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
   }
@@ -170,7 +176,7 @@ export class CalciteTreeItem {
     switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: e.shiftKey,
+          modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
         e.preventDefault();
@@ -185,7 +191,7 @@ export class CalciteTreeItem {
         }
         else {
           this.calciteTreeItemSelect.emit({
-            modifyCurrentSelection: e.shiftKey,
+            modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
         }
@@ -504,6 +510,9 @@ export class CalciteTreeItem {
   static get watchers() { return [{
       "propName": "expanded",
       "methodName": "expandedHandler"
+    }, {
+      "propName": "selectionMode",
+      "methodName": "getselectionMode"
     }]; }
   static get listeners() { return [{
       "name": "click",

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.css

@@ -120,6 +120,7 @@ calcite-pick-list-item {
   padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
+  color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
   outline-offset: 0;
   outline-color: transparent;

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/color-picker/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/color-picker/utils.js

@@ -0,0 +1,107 @@
+export function rgbToHex(color) {
+    const { r, g, b } = color;
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b
+        .toString(16)
+        .padStart(2, "0")}`.toLowerCase();
+}
+export const hexChar = /^[0-9A-F]$/i;
+const shortHandHex = /^#[0-9A-F]{3}$/i;
+const longhandHex = /^#[0-9A-F]{6}$/i;
+export function isValidHex(hex) {
+    return isShorthandHex(hex) || isLonghandHex(hex);
+}
+export function isShorthandHex(hex) {
+    return hex && hex.length === 4 && shortHandHex.test(hex);
+}
+export function isLonghandHex(hex) {
+    return hex && hex.length === 7 && longhandHex.test(hex);
+}
+export function normalizeHex(hex) {
+    hex = hex.toLowerCase();
+    if (!hex.startsWith("#")) {
+        hex = `#${hex}`;
+    }
+    if (isShorthandHex(hex)) {
+        return rgbToHex(hexToRGB(hex));
+    }
+    return hex;
+}
+export function hexToRGB(hex) {
+    if (!isValidHex(hex)) {
+        return null;
+    }
+    hex = hex.replace("#", "");
+    if (hex.length === 3) {
+        const [first, second, third] = hex.split("");
+        const r = parseInt(`${first}${first}`, 16);
+        const g = parseInt(`${second}${second}`, 16);
+        const b = parseInt(`${third}${third}`, 16);
+        return { r, g, b };
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return { r, g, b };
+}
+// these utils allow users to pass enum values as strings without having to access the enum
+// based on the approach suggested by https://github.com/microsoft/TypeScript/issues/17690#issuecomment-321365759,
+const enumify = (x) => x;
+export const CSSColorMode = enumify({
+    HEX: "hex",
+    HEXA: "hexa",
+    RGB_CSS: "rgb-css",
+    RGBA_CSS: "rgba-css",
+    HSL_CSS: "hsl-css",
+    HSLA_CSS: "hsla-css"
+});
+export const ObjectColorMode = enumify({
+    RGB: "rgb",
+    RGBA: "rgba",
+    HSL: "hsl",
+    HSLA: "hsla",
+    HSV: "hsv",
+    HSVA: "hsva"
+});
+export function parseMode(colorValue) {
+    if (typeof colorValue === "string") {
+        if (colorValue.startsWith("#")) {
+            const { length } = colorValue;
+            if (length === 4 || length === 7) {
+                return CSSColorMode.HEX;
+            }
+            if (length === 5 || length === 9) {
+                return CSSColorMode.HEXA;
+            }
+        }
+        if (colorValue.startsWith("rgba(")) {
+            return CSSColorMode.RGBA_CSS;
+        }
+        if (colorValue.startsWith("rgb(")) {
+            return CSSColorMode.RGB_CSS;
+        }
+        if (colorValue.startsWith("hsl(")) {
+            return CSSColorMode.HSL_CSS;
+        }
+        if (colorValue.startsWith("hsla(")) {
+            return CSSColorMode.HSLA_CSS;
+        }
+    }
+    if (typeof colorValue === "object") {
+        if (hasChannels(colorValue, "r", "g", "b")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
+        }
+        if (hasChannels(colorValue, "h", "s", "l")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
+        }
+        if (hasChannels(colorValue, "h", "s", "v")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
+        }
+    }
+    return null;
+}
+function hasChannels(colorObject, ...channels) {
+    return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
+}
+export function colorEqual(value1, value2) {
+    return (value1 === null || value1 === void 0 ? void 0 : value1.rgbNumber()) === (value2 === null || value2 === void 0 ? void 0 : value2.rgbNumber());
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/date-picker/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/date-picker/utils.js

@@ -0,0 +1,53 @@
+import { getAssetPath } from "@stencil/core";
+import { locales } from "../../utils/locale";
+/**
+ * Get supported locale code from raw user input
+ * Exported for testing purposes.
+ * @private
+ */
+function getSupportedLocale(lang = "") {
+    if (locales.indexOf(lang) > -1) {
+        return lang;
+    }
+    lang = lang.toLowerCase();
+    if (lang.includes("-")) {
+        lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+        if (!locales.includes(lang)) {
+            lang = lang.split("-")[0];
+        }
+    }
+    return locales.includes(lang) ? lang : "en";
+}
+/**
+ * CLDR cache.
+ * Exported for testing purposes.
+ * @private
+ */
+export const translationCache = {};
+/**
+ * CLDR request cache.
+ * Exported for testing purposes.
+ * @private
+ */
+export const requestCache = {};
+/**
+ * Fetch calendar data for a given locale from list of supported languages
+ * @public
+ */
+export async function getLocaleData(lang) {
+    const locale = getSupportedLocale(lang);
+    if (translationCache[locale]) {
+        return translationCache[locale];
+    }
+    if (!requestCache[locale]) {
+        requestCache[locale] = fetch(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;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/dropdown-group/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+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}`;
+    delete props.level;
+    return h(HeadingTag, Object.assign({}, props), children);
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/pagination/pagination.js

@@ -0,0 +1,201 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
+import { CSS, TEXT } from "./resources";
+const maxPagesDisplayed = 5;
+let Pagination = class Pagination {
+    constructor() {
+        //--------------------------------------------------------------------------
+        //
+        //  Public Properties
+        //
+        //--------------------------------------------------------------------------
+        /** number of items per page */
+        this.num = 20;
+        /** index of item that should begin the page */
+        this.start = 1;
+        /** total number of items */
+        this.total = 0;
+        /** Used as an accessible label (aria-label) for the next button
+         * @default "Next"
+         */
+        this.textLabelNext = TEXT.nextLabel;
+        /** Used as an accessible label (aria-label) of the previous button
+         * @default "Previous"
+         */
+        this.textLabelPrevious = TEXT.previousLabel;
+        /** The scale of the pagination */
+        this.scale = "m";
+        this.previousClicked = () => {
+            this.previousPage().then();
+            this.emitUpdate();
+        };
+        this.nextClicked = () => {
+            this.nextPage();
+            this.emitUpdate();
+        };
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Go to the next page of results */
+    async nextPage() {
+        this.start = Math.min(this.getLastStart(), this.start + this.num);
+    }
+    /** Go to the previous page of results */
+    async previousPage() {
+        this.start = Math.max(1, this.start - this.num);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    getLastStart() {
+        const { total, num } = this;
+        const lastStart = total % num === 0 ? total - num : Math.floor(total / num) * num;
+        return lastStart + 1;
+    }
+    showLeftEllipsis() {
+        return Math.floor(this.start / this.num) > 3;
+    }
+    showRightEllipsis() {
+        return (this.total - this.start) / this.num > 3;
+    }
+    emitUpdate() {
+        const changePayload = {
+            start: this.start,
+            total: this.total,
+            num: this.num
+        };
+        this.calcitePaginationChange.emit(changePayload);
+        this.calcitePaginationUpdate.emit(changePayload);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
+    renderPages() {
+        const lastStart = this.getLastStart();
+        let end;
+        let nextStart;
+        // if we don't need ellipses render the whole set
+        if (this.total / this.num <= maxPagesDisplayed) {
+            nextStart = 1 + this.num;
+            end = lastStart - this.num;
+        }
+        else {
+            // if we're within max pages of page 1
+            if (this.start / this.num < maxPagesDisplayed - 1) {
+                nextStart = 1 + this.num;
+                end = 1 + 4 * this.num;
+            }
+            else {
+                // if we're within max pages of last page
+                if (this.start + 3 * this.num >= this.total) {
+                    nextStart = lastStart - 4 * this.num;
+                    end = lastStart - this.num;
+                }
+                else {
+                    nextStart = this.start - this.num;
+                    end = this.start + this.num;
+                }
+            }
+        }
+        const pages = [];
+        while (nextStart <= end) {
+            pages.push(nextStart);
+            nextStart = nextStart + this.num;
+        }
+        return pages.map((page) => this.renderPage(page));
+    }
+    renderPage(start) {
+        const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
+        return (h("button", { class: {
+                [CSS.page]: true,
+                [CSS.selected]: start === this.start
+            }, onClick: () => {
+                this.start = start;
+                this.emitUpdate();
+            } }, page));
+    }
+    renderLeftEllipsis() {
+        if (this.total / this.num > maxPagesDisplayed && this.showLeftEllipsis()) {
+            return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisStart}` }, "\u2026");
+        }
+    }
+    renderRightEllipsis() {
+        if (this.total / this.num > maxPagesDisplayed && this.showRightEllipsis()) {
+            return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisEnd}` }, "\u2026");
+        }
+    }
+    render() {
+        const { total, num, start } = this;
+        const prevDisabled = num === 1 ? start <= num : start < num;
+        const nextDisabled = num === 1 ? start + num > total : start + num > total;
+        return (h(Fragment, null,
+            h("button", { "aria-label": this.textLabelPrevious, class: {
+                    [CSS.previous]: true,
+                    [CSS.disabled]: prevDisabled
+                }, disabled: prevDisabled, onClick: this.previousClicked },
+                h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })),
+            total > num ? this.renderPage(1) : null,
+            this.renderLeftEllipsis(),
+            this.renderPages(),
+            this.renderRightEllipsis(),
+            this.renderPage(this.getLastStart()),
+            h("button", { "aria-label": this.textLabelNext, class: {
+                    [CSS.next]: true,
+                    [CSS.disabled]: nextDisabled
+                }, disabled: nextDisabled, onClick: this.nextClicked },
+                h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
+    }
+};
+__decorate([
+    Prop()
+], Pagination.prototype, "num", void 0);
+__decorate([
+    Prop({ mutable: true })
+], Pagination.prototype, "start", void 0);
+__decorate([
+    Prop()
+], Pagination.prototype, "total", void 0);
+__decorate([
+    Prop()
+], Pagination.prototype, "textLabelNext", void 0);
+__decorate([
+    Prop()
+], Pagination.prototype, "textLabelPrevious", void 0);
+__decorate([
+    Prop({ reflect: true })
+], Pagination.prototype, "scale", void 0);
+__decorate([
+    Element()
+], Pagination.prototype, "el", void 0);
+__decorate([
+    Event()
+], Pagination.prototype, "calcitePaginationUpdate", void 0);
+__decorate([
+    Event()
+], Pagination.prototype, "calcitePaginationChange", void 0);
+__decorate([
+    Method()
+], Pagination.prototype, "nextPage", null);
+__decorate([
+    Method()
+], Pagination.prototype, "previousPage", null);
+Pagination = __decorate([
+    Component({
+        tag: "calcite-pagination",
+        styleUrl: "pagination.scss",
+        shadow: true
+    })
+], Pagination);
+export { Pagination };

package/dist/collection/components/pagination/resources.js

@@ -0,0 +1,14 @@
+export const CSS = {
+    page: "page",
+    selected: "is-selected",
+    previous: "previous",
+    next: "next",
+    disabled: "is-disabled",
+    ellipsis: "ellipsis",
+    ellipsisStart: "ellipsis--start",
+    ellipsisEnd: "ellipsis--end"
+};
+export const TEXT = {
+    nextLabel: "Next",
+    previousLabel: "Previous"
+};