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

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

@@ -1,208 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders } from "../../tests/commonTests";
-import { CSS } from "./resources";
-import { html } from "../../../support/formatting";
-describe("calcite-pagination", () => {
-    it("renders", async () => renders("calcite-pagination", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-pagination"));
-    it("is accessible", async () => accessible(`<calcite-pagination></calcite-pagination>`));
-    describe("page links", () => {
-        it("should render only one page when total is less than num", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pagination total="10" num="11"></calcite-pagination>`);
-            const links = await page.findAll(`calcite-pagination >>> .${CSS.page}`);
-            expect(links.length).toBe(1);
-        });
-    });
-    describe("ellipsis rendering", () => {
-        it("should not render either ellipsis when total pages is less than or equal to 5", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pagination total="80"></calcite-pagination>`);
-            const startEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisStart}`);
-            const endEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisEnd}`);
-            expect(startEllipsis).toBeNull();
-            expect(endEllipsis).toBeNull();
-        });
-        it("should render start ellipsis when total pages is over 5 and the selected page more than 4 from the starting page", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pagination start="101" total="140" num="20"></calcite-pagination>`);
-            const startEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisStart}`);
-            expect(startEllipsis).not.toBeNull();
-        });
-        it("should render end ellipsis when total pages is over 5 and the selected page more than 3 from the final page", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pagination start="801" total="1200" num="100"></calcite-pagination>`);
-            const endEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisEnd}`);
-            expect(endEllipsis).not.toBeNull();
-        });
-    });
-    describe("next and previous buttons", () => {
-        let page;
-        let pagination;
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(`<calcite-pagination start="1" total="124" num="20"></calcite-pagination>`);
-            pagination = await page.find("calcite-pagination");
-        });
-        it("next button should increase selected page by 1 when clicked", async () => {
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
-            await nextButton.click();
-            await page.waitForChanges();
-            const selectedPage = await page.find(`calcite-pagination >>> .${CSS.page}.${CSS.selected}`);
-            expect(selectedPage.innerText).toBe("2");
-            expect(toggleSpy).toHaveReceivedEventTimes(1);
-        });
-        it("previous button should be disabled when selected page equals the starting page", async () => {
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
-            await previousButton.click();
-            await page.waitForChanges();
-            expect(toggleSpy).toHaveReceivedEventTimes(0);
-        });
-        it("previous button should decrease selected page by 1", async () => {
-            await pagination.setAttribute("start", "21");
-            await page.waitForChanges();
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
-            await previousButton.click();
-            await page.waitForChanges();
-            const selectedPage = await page.find(`calcite-pagination >>> .${CSS.page}.${CSS.selected}`);
-            expect(selectedPage.innerText).toBe("1");
-            expect(toggleSpy).toHaveReceivedEventTimes(1);
-        });
-        it("next button should be disabled on last page", async () => {
-            await pagination.setAttribute("start", "121");
-            await page.waitForChanges();
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
-            await nextButton.click();
-            await page.waitForChanges();
-            expect(toggleSpy).toHaveReceivedEventTimes(0);
-        });
-        it("next button should be enabled if last page has only 1 result", async () => {
-            await pagination.setAttribute("total", "11");
-            await pagination.setAttribute("num", "10");
-            await pagination.setAttribute("start", "1");
-            await page.waitForChanges();
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
-            await nextButton.click();
-            await page.waitForChanges();
-            expect(toggleSpy).toHaveReceivedEventTimes(1);
-        });
-    });
-    describe("page buttons", () => {
-        it("should switch selected page to the page that's clicked", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pagination start="1" total="36" num="10"></calcite-pagination>`);
-            const toggleSpy = await page.spyOnEvent("calcitePaginationChange");
-            await page.evaluate(() => {
-                document.addEventListener("calcitePaginationChange", (event) => {
-                    window.eventDetail = event.detail;
-                });
-            });
-            const pages = await page.findAll("calcite-pagination >>> .page");
-            await pages[1].click();
-            await page.waitForChanges();
-            let selectedPage = await page.find(`calcite-pagination >>> .${CSS.page}.${CSS.selected}`);
-            expect(selectedPage.innerText).toBe("2");
-            expect(toggleSpy).toHaveReceivedEventTimes(1);
-            const eventDetail = await page.evaluateHandle(() => {
-                const detail = window.eventDetail;
-                return {
-                    num: detail.num,
-                    start: detail.start,
-                    total: detail.total
-                };
-            });
-            const properties = await eventDetail.getProperties();
-            expect(eventDetail).toBeDefined();
-            expect(properties.get("num")._remoteObject.value).toBe(10);
-            expect(properties.get("start")._remoteObject.value).toBe(11);
-            expect(properties.get("total")._remoteObject.value).toBe(36);
-            await pages[2].click();
-            await page.waitForChanges();
-            selectedPage = await page.find(`calcite-pagination >>> .${CSS.page}.${CSS.selected}`);
-            expect(selectedPage.innerText).toBe("3");
-            expect(toggleSpy).toHaveReceivedEventTimes(2);
-        });
-    });
-    describe("showing one item at a time", () => {
-        let page;
-        let pagination;
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(`<calcite-pagination start="1" total="5" num="1"></calcite-pagination>`);
-            pagination = await page.find("calcite-pagination");
-        });
-        it("should show the first page", async () => {
-            const selectedPage = await page.find(`calcite-pagination >>> .${CSS.page}.${CSS.selected}`);
-            expect(selectedPage.innerText).toBe("1");
-        });
-        it("previous button should be disabled when selected page equals the starting page", async () => {
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
-            await previousButton.click();
-            await page.waitForChanges();
-            expect(toggleSpy).toHaveReceivedEventTimes(0);
-        });
-        it("next button should be disabled on last page", async () => {
-            await pagination.setAttribute("start", "5");
-            await page.waitForChanges();
-            const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-            const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
-            await nextButton.click();
-            await page.waitForChanges();
-            expect(toggleSpy).toHaveReceivedEventTimes(0);
-        });
-    });
-    describe("number locale support", () => {
-        let page;
-        let element;
-        const expectedNotSeparatedValueArray = ["14999997", "14999998", "14999999", "15000000"];
-        const formattedValuesPerLanguageObject = {
-            "de-CH": ["14’999’997", "14’999’998", "14’999’999", "15’000’000"],
-            en: ["14,999,997", "14,999,998", "14,999,999", "15,000,000"],
-            es: ["14.999.997", "14.999.998", "14.999.999", "15.000.000"],
-            fr: ["14 999 997", "14 999 998", "14 999 999", "15 000 000"],
-            hi: ["1,49,99,997", "1,49,99,998", "1,49,99,999", "1,50,00,000"]
-        };
-        async function getDisplayedValues() {
-            const buttons = await page.findAll("calcite-pagination >>> .page");
-            const buttonsTestedForSeparator = buttons.slice(-4);
-            return buttonsTestedForSeparator.map((button) => button.innerText);
-        }
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(html `<calcite-pagination lang="en" group-separator total="150000000" num="10"></calcite-pagination>`);
-            element = await page.find("calcite-pagination");
-            const buttons = await page.findAll(`calcite-pagination >>> .${CSS.page}`);
-            const last = buttons[buttons.length - 1];
-            await last.click();
-        });
-        it("does not render separated when groupSeparator prop is false", async () => {
-            element.setProperty("groupSeparator", false);
-            await page.waitForChanges();
-            let noSeparator = await getDisplayedValues();
-            expect(noSeparator).toEqual(expectedNotSeparatedValueArray);
-            expect(await element.getProperty("groupSeparator")).toBe(false);
-            element.setProperty("lang", "fr");
-            await page.waitForChanges();
-            noSeparator = await getDisplayedValues();
-            expect(noSeparator).toEqual(expectedNotSeparatedValueArray);
-            expect(await element.getProperty("groupSeparator")).toBe(false);
-        });
-        it("displays group separator for multiple locales", async () => {
-            const testLocalizedGroupSeparator = async (lang, formattedValuesArr) => {
-                element.setProperty("lang", lang);
-                await page.waitForChanges();
-                const withSeparator = await getDisplayedValues();
-                expect(withSeparator).toEqual(formattedValuesArr);
-            };
-            for (const lang in formattedValuesPerLanguageObject) {
-                await testLocalizedGroupSeparator(lang, formattedValuesPerLanguageObject[lang]);
-            }
-        });
-    });
-});

package/dist/collection/components/panel/panel.e2e.js

@@ -1,281 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-import { CSS, SLOTS } from "./resources";
-const panelTemplate = (scrollable = false) => html `<div style="height: 200px; display: flex">
-  <calcite-panel>
-    <div>
-      ${scrollable ? '<p style="height: 400px">Hello world!</p>' : ""}
-      <p>Hello world!</p>
-    </div>
-  </calcite-panel>
-</div>`;
-describe("calcite-panel", () => {
-    it("renders", async () => renders("calcite-panel", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-panel"));
-    it("has property defaults", async () => defaults("calcite-panel", [
-        {
-            propertyName: "widthScale",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        }
-    ]));
-    it("has slots", () => slots("calcite-panel", SLOTS));
-    it("can be disabled", () => disabled(`<calcite-panel closable>scrolling content</calcite-panel>`));
-    it("honors dismissed prop (deprecated)", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel dismissible>test</calcite-panel>");
-        const element = await page.find("calcite-panel");
-        const container = await page.find(`calcite-panel >>> .${CSS.container}`);
-        await page.waitForChanges();
-        expect(await container.isVisible()).toBe(true);
-        element.setProperty("dismissed", true);
-        await page.waitForChanges();
-        expect(await element.getProperty("closed")).toBe(true);
-        expect(await container.isVisible()).toBe(false);
-    });
-    it("honors closed prop", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel closable>test</calcite-panel>");
-        const element = await page.find("calcite-panel");
-        const container = await page.find(`calcite-panel >>> .${CSS.container}`);
-        await page.waitForChanges();
-        expect(await container.isVisible()).toBe(true);
-        element.setProperty("closed", true);
-        await page.waitForChanges();
-        expect(await element.getProperty("dismissed")).toBe(true);
-        expect(await container.isVisible()).toBe(false);
-    });
-    it("close event should fire when closed", async () => {
-        const page = await newE2EPage({ html: "<calcite-panel closable>test</calcite-panel>" });
-        const calcitePanelClose = await page.spyOnEvent("calcitePanelClose", "window");
-        const calcitePanelDismiss = await page.spyOnEvent("calcitePanelDismiss", "window");
-        const calcitePanelDismissedChange = await page.spyOnEvent("calcitePanelDismissedChange", "window");
-        const closeButton = await page.find("calcite-panel >>> calcite-action");
-        await closeButton.click();
-        expect(calcitePanelClose).toHaveReceivedEvent();
-        expect(calcitePanelDismiss).toHaveReceivedEvent();
-        expect(calcitePanelDismissedChange).toHaveReceivedEvent();
-    });
-    it("dismiss event should not fire when closed via prop", async () => {
-        const page = await newE2EPage({ html: "<calcite-panel closable>test</calcite-panel>" });
-        const eventSpy = await page.spyOnEvent("calcitePanelDismiss", "window");
-        const panel = await page.find("calcite-panel");
-        panel.setProperty("dismissed", true);
-        await page.waitForChanges();
-        expect(await panel.getProperty("closed")).toBe(true);
-        expect(eventSpy).not.toHaveReceivedEvent();
-    });
-    it("should be accessible", async () => accessible(`
-    <calcite-panel>
-      <div slot="${SLOTS.headerActionsStart}">test start</div>
-      <div slot="${SLOTS.headerContent}">test content</div>
-      <div slot="${SLOTS.headerActionsEnd}">test end</div>
-      <p>Content</p>
-      <calcite-button slot="${SLOTS.footerActions}">test button 1</calcite-button>
-      <calcite-button slot="${SLOTS.footerActions}">test button 2</calcite-button>
-    </calcite-panel>
-    `));
-    it("should focus on close button (deprecated)", async () => focusable(`<calcite-panel dismissible>test</calcite-panel>`, {
-        focusId: "dismiss-button",
-        shadowFocusTargetSelector: "calcite-action"
-    }));
-    it("should focus on close button )", async () => focusable(`<calcite-panel closable>test</calcite-panel>`, {
-        shadowFocusTargetSelector: "calcite-action"
-    }));
-    it("should focus on back button", async () => focusable(`<calcite-panel show-back-button>test</calcite-panel>`, {
-        shadowFocusTargetSelector: "calcite-action"
-    }));
-    it("should focus on container", async () => focusable(`<calcite-panel>test</calcite-panel>`, {
-        shadowFocusTargetSelector: "article"
-    }));
-    it("honors calcitePanelScroll event", async () => {
-        const page = await newE2EPage({
-            html: "<calcite-panel>test</calcite-panel>"
-        });
-        const scrollSpy = await page.spyOnEvent("calcitePanelScroll");
-        await page.evaluate((contentContainerSelector) => {
-            const contentContainer = document
-                .querySelector("calcite-panel")
-                .shadowRoot.querySelector(contentContainerSelector);
-            contentContainer.dispatchEvent(new CustomEvent("scroll"));
-        }, `.${CSS.contentWrapper}`);
-        await page.waitForChanges();
-        expect(scrollSpy).toHaveReceivedEventTimes(1);
-    });
-    it("should have default heading", async () => {
-        const page = await newE2EPage();
-        await page.setContent('<calcite-panel heading="test heading"></calcite-panel>');
-        const element = await page.find(`calcite-panel >>> .${CSS.heading}`);
-        expect(element).toEqualText("test heading");
-    });
-    it("should have default summary (deprecated)", async () => {
-        const page = await newE2EPage();
-        await page.setContent('<calcite-panel summary="test summary"></calcite-panel>');
-        const element = await page.find(`calcite-panel >>> .${CSS.description}`);
-        expect(element).toEqualText("test summary");
-    });
-    it("should have default description", async () => {
-        const page = await newE2EPage();
-        await page.setContent('<calcite-panel description="test description"></calcite-panel>');
-        const element = await page.find(`calcite-panel >>> .${CSS.description}`);
-        expect(element).toEqualText("test description");
-    });
-    it("should not render a header if there are no actions or content", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel>test</calcite-panel>");
-        const header = await page.find(`calcite-panel >>> .${CSS.header}`);
-        expect(await header.isVisible()).toBe(false);
-    });
-    it("menuOpen should show/hide when toggled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-panel>
-        <calcite-action slot="${SLOTS.headerMenuActions}" text="hello"></calcite-action>
-        <calcite-action slot="${SLOTS.headerMenuActions}" text="hello2"></calcite-action>
-      </calcite-panel>`);
-        await page.waitForChanges();
-        const element = await page.find("calcite-panel");
-        expect(element.getAttribute("menuOpen")).toBeNull();
-        element.setProperty("menuOpen", true);
-        await page.waitForChanges();
-        const menu = await page.find(`calcite-panel >>> calcite-action-menu`);
-        expect(menu).not.toBeNull();
-        const menuVisible = await menu.isVisible();
-        expect(menuVisible).toBe(true);
-        const menuOpen = await menu.getProperty("open");
-        expect(menuOpen).toBe(true);
-    });
-    it("should not render start or end actions containers when there are no start or end actions", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel></calcite-panel>");
-        const actionsContainerStart = await page.find(`calcite-panel >>> .${CSS.headerActionsStart}`);
-        const actionsContainerEnd = await page.find(`calcite-panel >>> .${CSS.headerActionsEnd}`);
-        expect(await actionsContainerStart.isVisible()).toBe(false);
-        expect(await actionsContainerEnd.isVisible()).toBe(false);
-    });
-    it("header-content should override heading and summary properties (deprecated)", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-panel heading="test heading" summary="test summary">
-        <div slot=${SLOTS.headerContent}>custom header content</div>
-      </calcite-panel>`);
-        const heading = await page.find(`calcite-panel >>> ${CSS.heading}`);
-        const summary = await page.find(`calcite-panel >>> ${CSS.description}`);
-        const header = await page.find(`calcite-panel >>> ${CSS.header}`);
-        expect(heading).toBeNull();
-        expect(summary).toBeNull();
-        expect(header).not.toBeNull();
-    });
-    it("header-content should override heading and description properties", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-panel heading="test heading" description="test description">
-        <div slot=${SLOTS.headerContent}>custom header content</div>
-      </calcite-panel>`);
-        const heading = await page.find(`calcite-panel >>> ${CSS.heading}`);
-        const description = await page.find(`calcite-panel >>> ${CSS.description}`);
-        const header = await page.find(`calcite-panel >>> ${CSS.header}`);
-        expect(heading).toBeNull();
-        expect(description).toBeNull();
-        expect(header).not.toBeNull();
-    });
-    it("showBackButton", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel></calcite-panel>");
-        const element = await page.find("calcite-panel");
-        const showBackButton = await element.getProperty("showBackButton");
-        expect(showBackButton).toBe(false);
-        const backButton = await page.find(`calcite-panel >>> .${CSS.backButton}`);
-        expect(backButton).toBeNull();
-        element.setProperty("showBackButton", true);
-        await page.waitForChanges();
-        const showBackButtonNew = await element.getProperty("showBackButton");
-        expect(showBackButtonNew).toBe(true);
-        const backButtonNew = await page.find(`calcite-panel >>> .${CSS.backButton}`);
-        expect(backButtonNew).not.toBeNull();
-        expect(await backButtonNew.isVisible()).toBe(true);
-        const eventSpy = await page.spyOnEvent("calcitePanelBackClick", "window");
-        await page.$eval("calcite-panel", (elm) => {
-            const nativeBackButton = elm.shadowRoot.querySelector(`calcite-action`);
-            nativeBackButton.click();
-        });
-        expect(eventSpy).toHaveReceivedEvent();
-    });
-    it("should not render footer node if there are no actions or content", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel>test</calcite-panel>");
-        const footer = await page.find(`calcite-panel >>> .${CSS.footer}`);
-        expect(await footer.isVisible()).toBe(false);
-    });
-    it("should update width based on the multipier CSS variable", async () => {
-        const multipier = 2;
-        const page = await newE2EPage();
-        await page.setViewport({ width: 1600, height: 1200 });
-        await page.setContent(`
-      <calcite-panel width-scale="m">
-        test
-      </calcite-panel>
-    `);
-        await page.waitForChanges();
-        const content = await page.find(`calcite-panel >>> .${CSS.container}`);
-        const style = await content.getComputedStyle("width");
-        const widthDefault = parseFloat(style["width"]);
-        const page2 = await newE2EPage();
-        await page2.setViewport({ width: 1600, height: 1200 });
-        await page2.setContent(`
-      <style>
-        :root {
-          --calcite-panel-width-multiplier: ${multipier};
-        }
-      </style>
-      <calcite-panel width-scale="m">
-        test multiplied
-      </calcite-panel>
-    `);
-        await page2.waitForChanges();
-        const content2 = await page2.find(`calcite-panel >>> .${CSS.container}`);
-        const style2 = await content2.getComputedStyle("width");
-        const width2 = parseFloat(style2["width"]);
-        expect(width2).toEqual(widthDefault * multipier);
-    });
-    it("should set tabIndex of -1 on a non-scrollable panel", async () => {
-        const page = await newE2EPage();
-        await page.setContent(panelTemplate());
-        const scrollEl = await page.find(`calcite-panel >>> .${CSS.contentWrapper}`);
-        expect(await scrollEl.getProperty("tabIndex")).toBe(-1);
-    });
-    it("should set tabIndex of 0 on a scrollable panel", async () => {
-        const page = await newE2EPage();
-        await page.setContent(panelTemplate(true));
-        const scrollEl = await page.find(`calcite-panel >>> .${CSS.contentWrapper}`);
-        expect(await scrollEl.getProperty("tabIndex")).toBe(0);
-    });
-    it("handles scrollContentTo method", async () => {
-        const page = await newE2EPage();
-        await page.setContent(panelTemplate(true));
-        const scrollEl = await page.find(`calcite-panel >>> .${CSS.contentWrapper}`);
-        expect(await scrollEl.getProperty("scrollTop")).toBe(0);
-        await page.$eval("calcite-panel", async (panel) => {
-            await panel.scrollContentTo({ top: 100 });
-        });
-        expect(await scrollEl.getProperty("scrollTop")).toBe(100);
-    });
-    it("should close when Escape key is pressed and closable is true", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-panel>test</calcite-panel>");
-        const panel = await page.find("calcite-panel");
-        const container = await page.find(`calcite-panel >>> .${CSS.container}`);
-        expect(await panel.getProperty("closed")).toBe(false);
-        expect(await container.isVisible()).toBe(true);
-        await container.press("Escape");
-        await page.waitForChanges();
-        expect(await panel.getProperty("closed")).toBe(false);
-        expect(await container.isVisible()).toBe(true);
-        panel.setProperty("closable", true);
-        await page.waitForChanges();
-        await container.press("Escape");
-        expect(await panel.getProperty("closed")).toBe(true);
-        expect(await container.isVisible()).toBe(false);
-    });
-});

package/dist/collection/components/pick-list/pick-list.e2e.js

@@ -1,157 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { ICON_TYPES } from "./resources";
-import { accessible, hidden, renders, defaults } from "../../tests/commonTests";
-import { selectionAndDeselection, filterBehavior, loadingState, keyboardNavigation, itemRemoval, focusing, disabling } from "./shared-list-tests";
-import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources";
-describe("calcite-pick-list", () => {
-    it("has property defaults", async () => defaults("calcite-pick-list", [
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        }
-    ]));
-    it("renders", async () => renders("calcite-pick-list", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-pick-list"));
-    it("is accessible", async () => accessible(html `
-      <calcite-pick-list>
-        <calcite-pick-list-item label="Sample" value="one"></calcite-pick-list-item>
-      </calcite-pick-list>
-    `));
-    describe("disabling", () => {
-        disabling("pick");
-    });
-    describe("Selection and Deselection", () => {
-        selectionAndDeselection("pick");
-    });
-    describe("Keyboard navigation", () => {
-        keyboardNavigation("pick");
-    });
-    describe("icon logic", () => {
-        it("should be 'circle' when multi-select is disabled", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pick-list>
-        <calcite-pick-list-item value="one"></calcite-pick-list-item>
-      </calcite-pick-list>`);
-            const item = await page.find("calcite-pick-list-item");
-            const icon = await item.getProperty("icon");
-            expect(icon).toBe(ICON_TYPES.circle);
-        });
-        it("should be 'square' when multi-select is enabled", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-pick-list multiple>
-        <calcite-pick-list-item value="one"></calcite-pick-list-item>
-      </calcite-pick-list>`);
-            const item = await page.find("calcite-pick-list-item");
-            const icon = await item.getProperty("icon");
-            expect(icon).toBe(ICON_TYPES.square);
-        });
-    });
-    describe("filter behavior (hide/show items)", () => {
-        filterBehavior("pick");
-        let page = null;
-        let groupOrParentItem;
-        let item1;
-        let item2;
-        async function assertGroupIsVisibleWhenChildMatches(page, groupOrParentItem, item1, item2) {
-            const item1ValueLowercased = (await item1.getProperty("label")).toLowerCase();
-            await page.evaluate((filterText) => {
-                const filterInput = window.filterInput;
-                filterInput.value = filterText;
-                filterInput.dispatchEvent(new CustomEvent("calciteInputInput"));
-            }, [item1ValueLowercased]);
-            await item2.waitForNotVisible();
-            const parentVisible = await groupOrParentItem.isVisible();
-            expect(parentVisible).toBe(true);
-        }
-        describe("filtering with groups", () => {
-            beforeEach(async () => {
-                page = await newE2EPage({
-                    html: `<calcite-pick-list filter-enabled>
-          <calcite-pick-list-group group-title="Numbers">
-            <calcite-pick-list-item value="1" label="One" description="uno"></calcite-pick-list-item>
-            <calcite-pick-list-item value="2" label="Two" description="dos"></calcite-pick-list-item>
-          </calcite-pick-list-group>
-        </calcite-pick-list>`
-                });
-                groupOrParentItem = await page.find(`calcite-pick-list-group`);
-                item1 = await page.find(`calcite-pick-list-item[value="1"]`);
-                item2 = await page.find(`calcite-pick-list-item[value="2"]`);
-                item1.setProperty("metadata", { category: "first" });
-                item2.setProperty("metadata", { category: "second" });
-                await page.waitForChanges();
-                await page.evaluate(() => {
-                    window.filter = document
-                        .querySelector(`calcite-pick-list`)
-                        .shadowRoot.querySelector("calcite-filter");
-                    const filter = window.filter;
-                    window.filterInput = filter.shadowRoot.querySelector("calcite-input");
-                });
-            });
-            it("should show the group parent if a match is found in a child", async () => await assertGroupIsVisibleWhenChildMatches(page, groupOrParentItem, item1, item2));
-        });
-        describe("filtering with groups (nested)", () => {
-            beforeEach(async () => {
-                page = await newE2EPage({
-                    html: `<calcite-pick-list filter-enabled>
-          <calcite-pick-list-group>
-            <calcite-pick-list-item slot="parent-item" value="nums" label="Numbers"></calcite-pick-list-item>
-            <calcite-pick-list-item value="1" label="One" description="uno"></calcite-pick-list-item>
-            <calcite-pick-list-item value="2" label="Two" description="dos"></calcite-pick-list-item>
-          </calcite-pick-list-group>
-        </calcite-pick-list>`
-                });
-                groupOrParentItem = await page.find(`calcite-pick-list-item[slot="parent-item"]`);
-                item1 = await page.find(`calcite-pick-list-item[value="1"]`);
-                item2 = await page.find(`calcite-pick-list-item[value="2"]`);
-                item1.setProperty("metadata", { category: "first" });
-                item2.setProperty("metadata", { category: "second" });
-                await page.waitForChanges();
-                await page.evaluate(() => {
-                    window.filter = document
-                        .querySelector(`calcite-pick-list`)
-                        .shadowRoot.querySelector("calcite-filter");
-                    const filter = window.filter;
-                    window.filterInput = filter.shadowRoot.querySelector("calcite-input");
-                });
-            });
-            it("should show the group parent if a match is found in a child", async () => await assertGroupIsVisibleWhenChildMatches(page, groupOrParentItem, item1, item2));
-            it("should show the children of a group if the parent matches", async () => {
-                await page.evaluate(() => {
-                    const filterInput = window.filterInput;
-                    filterInput.value = "nums";
-                    filterInput.dispatchEvent(new CustomEvent("calciteInputInput"));
-                });
-                await page.waitForTimeout(500);
-                const item1Visible = await item1.isVisible();
-                const item2Visible = await item2.isVisible();
-                expect(item1Visible).toBe(true);
-                expect(item2Visible).toBe(true);
-            });
-        });
-    });
-    describe("item removal", () => {
-        itemRemoval("pick");
-    });
-    describe("loading state", () => {
-        loadingState("pick");
-    });
-    describe("setFocus", () => {
-        focusing("pick");
-    });
-    it("should set headingLevel of tip", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list heading-level="1">
-      <calcite-pick-list-group group-title="test">
-        <calcite-pick-list-item value="1" label="One" description="uno"></calcite-pick-list-item>
-        <calcite-pick-list-item value="2" label="Two" description="dos"></calcite-pick-list-item>
-      </calcite-pick-list-group>
-    </calcite-pick-list>`
-        });
-        await page.waitForChanges();
-        const pickList = await page.find("calcite-pick-list");
-        expect(await pickList.getProperty("headingLevel")).toEqual(1);
-        const heading = await page.find(`calcite-pick-list-group >>> .${PICK_LIST_GROUP_CSS.heading}`);
-        expect(heading.tagName).toEqual("H2");
-    });
-});