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

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

@@ -1,66 +0,0 @@
-import { colorEqual, hexToRGB, isLonghandHex, isShorthandHex, isValidHex, normalizeHex, parseMode, rgbToHex } from "./utils";
-import Color from "color";
-describe("utils", () => {
-    it("can parse supported color modes", () => {
-        expect(parseMode("#abc")).toBe("hex");
-        expect(parseMode("#aabbcc")).toBe("hex");
-        expect(parseMode("#caca")).toBe("hexa");
-        expect(parseMode("#cacacaca")).toBe("hexa");
-        expect(parseMode("rgb(214, 122, 127)")).toBe("rgb-css");
-        expect(parseMode("rgba(34, 12, 64, 0.6)")).toBe("rgba-css");
-        expect(parseMode("hsl(30, 100%, 50%)")).toBe("hsl-css");
-        expect(parseMode("hsla(30, 100%, 50%, .3)")).toBe("hsla-css");
-        expect(parseMode("unknown")).toBeNull();
-        expect(parseMode({ r: 255, g: 255, b: 255 })).toBe("rgb");
-        expect(parseMode({ r: 255, g: 255, b: 255, a: 0.5 })).toBe("rgba");
-        expect(parseMode({ h: 255, s: 255, l: 255 })).toBe("hsl");
-        expect(parseMode({ h: 255, s: 255, l: 255, a: 0.5 })).toBe("hsla");
-        expect(parseMode({ h: 255, s: 255, v: 255 })).toBe("hsv");
-        expect(parseMode({ h: 255, s: 255, v: 255, a: 0.5 })).toBe("hsva");
-        const nonMatchingObject = {};
-        expect(parseMode(nonMatchingObject)).toBeNull();
-    });
-    it("helps compare Color instances", () => {
-        expect(colorEqual(Color("#f0f"), Color({ r: 255, g: 0, b: 255 }))).toBe(true);
-        expect(colorEqual(Color("rgb(255, 0, 255)"), Color({ h: 300, s: 100, v: 100 }))).toBe(true);
-    });
-    it("can convert hex to RGB", () => {
-        expect(hexToRGB("#0f0")).toMatchObject({ r: 0, g: 255, b: 0 });
-        expect(hexToRGB("#00ff00")).toMatchObject({ r: 0, g: 255, b: 0 });
-        expect(hexToRGB("0f0")).toBeNull();
-        expect(hexToRGB("00ff00")).toBeNull();
-    });
-    it("can convert RGB to hex", () => expect(rgbToHex({
-        r: 0,
-        g: 255,
-        b: 0
-    })).toBe("#00ff00"));
-    it("can determine shorthand hex", () => {
-        expect(isShorthandHex("#0f0")).toBe(true);
-        expect(isShorthandHex("#0f00")).toBe(false);
-        expect(isShorthandHex("#0f")).toBe(false);
-        expect(isShorthandHex("#00ff00")).toBe(false);
-    });
-    it("can normalize hex", () => {
-        expect(normalizeHex("#f00")).toBe("#ff0000");
-        expect(normalizeHex("f00")).toBe("#ff0000");
-        expect(normalizeHex("#ff0000")).toBe("#ff0000");
-        expect(normalizeHex("ff0000")).toBe("#ff0000");
-    });
-    it("can validate hex", () => {
-        expect(isValidHex("#ff0")).toBe(true);
-        expect(isValidHex("#ffff00")).toBe(true);
-        expect(isValidHex("#f0")).toBe(false);
-        expect(isValidHex("#ff00")).toBe(false);
-        expect(isValidHex("#ffff0")).toBe(false);
-        expect(isValidHex("#ffff000")).toBe(false);
-        expect(isValidHex("ff0")).toBe(false);
-        expect(isValidHex("ffff00")).toBe(false);
-    });
-    it("can determine longhand hex", () => {
-        expect(isLonghandHex("#00ff00")).toBe(true);
-        expect(isLonghandHex("#00ff000")).toBe(false);
-        expect(isLonghandHex("#00ff0")).toBe(false);
-        expect(isLonghandHex("#0f0")).toBe(false);
-    });
-});

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.e2e.js

@@ -1,281 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, reflects, renders, hidden } from "../../tests/commonTests";
-import { isValidHex, normalizeHex } from "../color-picker/utils";
-import { CSS } from "./resources";
-import { TEXT } from "../color-picker/resources";
-import { selectText } from "../../tests/utils";
-describe("calcite-color-picker-hex-input", () => {
-    it("renders", () => renders("calcite-color-picker-hex-input", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-color-picker-hex-input"));
-    it("is accessible", async () => {
-        await accessible("calcite-color-picker-hex-input");
-        await accessible("<calcite-color-picker-hex-input color='#c0ffee'></calcite-color-picker-hex-input>");
-        await accessible("<calcite-color-picker-hex-input allow-empty color=''></calcite-color-picker-hex-input>");
-    });
-    it("has defaults", () => defaults("calcite-color-picker-hex-input", [
-        {
-            propertyName: "allowEmpty",
-            defaultValue: false
-        },
-        {
-            propertyName: "intlHex",
-            defaultValue: TEXT.hex
-        },
-        {
-            propertyName: "intlNoColor",
-            defaultValue: TEXT.noColor
-        },
-        {
-            propertyName: "value",
-            defaultValue: "#000000"
-        }
-    ]));
-    it("reflects", () => reflects("calcite-color-picker-hex-input", [
-        {
-            propertyName: "value",
-            value: "#ffffff"
-        }
-    ]));
-    it("can be focused", async () => focusable("calcite-color-picker-hex-input"));
-    it("supports no color", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input allow-empty></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        await input.setProperty("value", null);
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(null);
-        expect(input.getAttribute("value")).toBe(null);
-        const internalInput = await page.find(`calcite-color-picker-hex-input >>> .${CSS.input}`);
-        expect(await internalInput.getProperty("value")).toBe("");
-        const internalSwatch = await page.find(`calcite-color-picker-hex-input >>> .${CSS.preview}`);
-        expect(internalSwatch).toBe(null);
-    });
-    it("accepts shorthand hex", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        await input.setProperty("value", "#fff");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("#ffffff");
-    });
-    it("allows entering text if it has a selection", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input value='#ffffff'></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        await selectText(input);
-        await page.keyboard.type("000");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("#000000");
-    });
-    it("accepts longhand hex", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        await input.setProperty("value", "#fafafa");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("#fafafa");
-    });
-    it("normalizes value when initialized", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input value='#f0f'></calcite-color-picker-hex-input>"
-        });
-        await page.waitForChanges();
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        expect(await input.getProperty("value")).toBe("#ff00ff");
-    });
-    it("ignores invalid hex", async () => {
-        const hex = "#b33f33";
-        const page = await newE2EPage({
-            html: `<calcite-color-picker-hex-input value='${hex}'></calcite-color-picker-hex-input>`
-        });
-        const input = await page.find(`calcite-color-picker-hex-input`);
-        await input.setProperty("value", null);
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "wrong");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "#");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "#a");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "#aa");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "#aaaa");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-        await input.setProperty("value", "#aaaaa");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe(hex);
-    });
-    it("emits event when color changes via user and not programmatically", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input value='#b33f33'></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find("calcite-color-picker-hex-input");
-        const spy = await input.spyOnEvent("calciteColorPickerHexInputChange");
-        await input.setProperty("value", "#abcdef");
-        await page.waitForChanges();
-        expect(spy).toHaveReceivedEventTimes(0);
-        await selectText(input);
-        await page.keyboard.type("abc");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(spy).toHaveReceivedEventTimes(1);
-    });
-    it("prevents entering chars if invalid hex chars or it exceeds max hex length", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-hex-input value='#b33f33'></calcite-color-picker-hex-input>"
-        });
-        const input = await page.find("calcite-color-picker-hex-input");
-        const selectAllText = async () => await input.click({ clickCount: 3 });
-        await selectAllText();
-        await page.keyboard.type("zaaaz");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("#aaaaaa");
-        await selectAllText();
-        await page.keyboard.type("bbbbbbc");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("#bbbbbb");
-    });
-    describe("keyboard interaction", () => {
-        async function assertTabAndEnterBehavior(hexInputChars, expectedValue, resetHex = "#efface") {
-            const normalizedInputHex = normalizeHex(hexInputChars);
-            if (normalizedInputHex === resetHex) {
-                throw new Error(`input hex (${hexInputChars}) cannot be the same as reset value (${resetHex})`);
-            }
-            expectedValue = expectedValue === null || isValidHex(normalizedInputHex) ? expectedValue : resetHex;
-            await typeHexValue(resetHex, "Enter");
-            expect(await input.getProperty("value")).toBe(resetHex);
-            await typeHexValue(hexInputChars, "Enter");
-            expect(await input.getProperty("value")).toBe(expectedValue);
-            await typeHexValue(resetHex, "Enter");
-            expect(await input.getProperty("value")).toBe(resetHex);
-            await typeHexValue(hexInputChars, "Tab");
-            expect(await input.getProperty("value")).toBe(expectedValue);
-        }
-        async function typeHexValue(text, commitKey) {
-            await clearText();
-            await input.type(text);
-            await page.keyboard.press(commitKey);
-            await page.waitForChanges();
-        }
-        async function clearText() {
-            await input.callMethod("setFocus");
-            await page.$eval("calcite-color-picker-hex-input", (el) => {
-                var _a, _b;
-                const input = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("calcite-input").shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("input");
-                if (!input) {
-                    return;
-                }
-                const inputType = input.type;
-                input.type = "text";
-                input.setSelectionRange(input.value.length, input.value.length);
-                input.type = inputType;
-            });
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-        }
-        const startingHex = "#b33f33";
-        let page;
-        let input;
-        beforeEach(async () => {
-            page = await newE2EPage({
-                html: `<calcite-color-picker-hex-input value=${startingHex}></calcite-color-picker-hex-input>`
-            });
-            input = await page.find("calcite-color-picker-hex-input");
-        });
-        describe("when color value is required", () => {
-            it("commits hex chars on Tab and Enter", async () => {
-                await assertTabAndEnterBehavior("b00", "#bb0000");
-                await assertTabAndEnterBehavior("c0ffee", "#c0ffee");
-                await assertTabAndEnterBehavior("", startingHex);
-            });
-            it("prevents committing invalid hex values", async () => {
-                await assertTabAndEnterBehavior("aabbc", startingHex);
-                await assertTabAndEnterBehavior("aabb", startingHex);
-                await assertTabAndEnterBehavior("aa", startingHex);
-                await assertTabAndEnterBehavior("a", startingHex);
-                await assertTabAndEnterBehavior("", startingHex);
-            });
-            it("allows nudging RGB channels with arrow keys (+/-1) and shift modifies amount (+/-10)", async () => {
-                const initialHex = "#000000";
-                await input.callMethod("setFocus");
-                await input.setProperty("value", initialHex);
-                await page.waitForChanges();
-                await page.keyboard.press("ArrowUp");
-                await page.waitForChanges();
-                expect(await input.getProperty("value")).toBe("#010101");
-                await page.keyboard.press("ArrowDown");
-                await page.waitForChanges();
-                expect(await input.getProperty("value")).toBe(initialHex);
-                await page.keyboard.down("Shift");
-                await page.keyboard.press("ArrowUp");
-                await page.keyboard.up("Shift");
-                expect(await input.getProperty("value")).toBe("#0a0a0a");
-                await page.keyboard.down("Shift");
-                await page.keyboard.press("ArrowDown");
-                await page.keyboard.up("Shift");
-                expect(await input.getProperty("value")).toBe(initialHex);
-            });
-        });
-        describe("when empty is allowed", () => {
-            beforeEach(async () => {
-                input.setProperty("allowEmpty", true);
-                await page.waitForChanges();
-            });
-            it("commits hex chars on Tab and Enter", async () => {
-                await assertTabAndEnterBehavior("b00", "#bb0000");
-                await assertTabAndEnterBehavior("c0ffee", "#c0ffee");
-                await assertTabAndEnterBehavior("", null);
-            });
-            it("prevents committing invalid hex values", async () => {
-                await assertTabAndEnterBehavior("aabbc", startingHex);
-                await assertTabAndEnterBehavior("aabb", startingHex);
-                await assertTabAndEnterBehavior("aa", startingHex);
-                await assertTabAndEnterBehavior("a", startingHex);
-                await assertTabAndEnterBehavior("", null);
-            });
-            it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {
-                const noColorValue = null;
-                await input.setProperty("value", noColorValue);
-                await page.waitForChanges();
-                await input.callMethod("setFocus");
-                await page.keyboard.press("ArrowUp");
-                await page.waitForChanges();
-                expect(await input.getProperty("value")).toBe(startingHex);
-                await input.setProperty("value", noColorValue);
-                await page.waitForChanges();
-                await page.keyboard.press("ArrowDown");
-                await page.waitForChanges();
-                expect(await input.getProperty("value")).toBe(startingHex);
-                await input.setProperty("value", noColorValue);
-                await page.waitForChanges();
-                await page.keyboard.down("Shift");
-                await page.keyboard.press("ArrowUp");
-                await page.keyboard.up("Shift");
-                expect(await input.getProperty("value")).toBe(startingHex);
-                await input.setProperty("value", noColorValue);
-                await page.waitForChanges();
-                await page.keyboard.down("Shift");
-                await page.keyboard.press("ArrowDown");
-                await page.keyboard.up("Shift");
-                expect(await input.getProperty("value")).toBe(startingHex);
-            });
-        });
-    });
-});

package/dist/collection/components/color-picker-swatch/color-picker-swatch.e2e.js

@@ -1,71 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS } from "./resources";
-import { accessible, defaults, reflects, renders, hidden } from "../../tests/commonTests";
-describe("calcite-color-picker-swatch", () => {
-    it("renders", () => renders("calcite-color-picker-swatch", { display: "inline-flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-color-picker-swatch"));
-    it("is accessible", async () => {
-        await accessible("calcite-color-picker-swatch");
-        await accessible(`<calcite-color-picker-swatch active></calcite-color-picker-swatch>`);
-        await accessible(`<calcite-color-picker-swatch color='#c0ffee'></calcite-color-picker-swatch>`);
-        await accessible(`<calcite-color-picker-swatch active color='#c0ffee'></calcite-color-picker-swatch>`);
-    });
-    it("has defaults", () => defaults("calcite-color-picker-swatch", [
-        {
-            propertyName: "active",
-            defaultValue: false
-        }
-    ]));
-    it("reflects", () => reflects("calcite-color-picker-swatch", [
-        {
-            propertyName: "active",
-            value: true
-        }
-    ]));
-    describe("accepts CSS color strings", () => {
-        it("supports rgb", async () => {
-            const page = await newE2EPage({
-                html: "<calcite-color-picker-swatch color='rgb(255, 255, 255)'></calcite-color-picker-swatch>"
-            });
-            const swatch = await page.find(`calcite-color-picker-swatch >>> .${CSS.swatch} rect`);
-            const style = await swatch.getComputedStyle();
-            expect(style["fill"]).toBe("rgb(255, 255, 255)");
-        });
-        it("supports keywords", async () => {
-            const page = await newE2EPage({
-                html: "<calcite-color-picker-swatch color='chartreuse'></calcite-color-picker-swatch>"
-            });
-            const swatch = await page.find(`calcite-color-picker-swatch >>> .${CSS.swatch} rect`);
-            const style = await swatch.getComputedStyle();
-            expect(style["fill"]).toBe("rgb(127, 255, 0)");
-        });
-        it("supports hsl", async () => {
-            const page = await newE2EPage({
-                html: "<calcite-color-picker-swatch color='hsl(120, 100%, 97%)'></calcite-color-picker-swatch>"
-            });
-            const swatch = await page.find(`calcite-color-picker-swatch >>> .${CSS.swatch} rect`);
-            const style = await swatch.getComputedStyle();
-            expect(style["fill"]).toBe("rgb(240, 255, 240)");
-        });
-        it("supports hex", async () => {
-            const page = await newE2EPage({
-                html: "<calcite-color-picker-swatch color='#ff8200'></calcite-color-picker-swatch>"
-            });
-            const swatch = await page.find(`calcite-color-picker-swatch >>> .${CSS.swatch} rect`);
-            const style = await swatch.getComputedStyle();
-            expect(style["fill"]).toBe("rgb(255, 130, 0)");
-        });
-    });
-    it("has an active state", async () => {
-        // this is probably better suited for a screenshot test
-        const page = await newE2EPage({
-            html: "<calcite-color-picker-swatch color'#beefee'></calcite-color-picker-swatch>"
-        });
-        const swatchRect = await page.find(`calcite-color-picker-swatch >>> .${CSS.swatch} rect`);
-        expect(swatchRect.getAttribute("rx")).toBe("0");
-        const swatch = await page.find(`calcite-color-picker-swatch`);
-        swatch.setProperty("active", true);
-        await page.waitForChanges();
-        expect(swatchRect.getAttribute("rx")).toBe("100%");
-    });
-});