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

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -89,65 +79,65 @@
 }
 
 :host {
+  margin-bottom: 1px;
   box-sizing: border-box;
+  display: flex;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
-  margin-bottom: 1px;
-  display: flex;
-  box-shadow: 0 1px 0 var(--calcite-ui-border-3);
-  transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  color: var(--calcite-ui-text-2);
+  --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
+  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition: background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 calcite-pick-list-item {
-  box-shadow: none;
-  flex-grow: 1;
   position: relative;
-  margin: 0;
+  margin: 0px;
+  flex-grow: 1;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]),
-:host([selected]) {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+:host([active]), :host([selected]) {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .handle {
   display: flex;
+  cursor: move;
   align-items: center;
   justify-content: center;
-  padding-top: 0;
-  padding-bottom: 0;
+  border-style: none;
+  background-color: transparent;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  background-color: transparent;
-  border-style: none;
   color: var(--calcite-ui-text-1);
-  cursor: move;
   color: var(--calcite-ui-border-1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
-
 .handle:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .handle--activated {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-
 .handle calcite-icon {
   color: inherit;
 }

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

@@ -9,6 +9,7 @@ import { CSS } from "../calcite-pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../calcite-pick-list-item/resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
@@ -66,6 +67,17 @@ export class CalciteValueListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

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"
+};