@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

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

@@ -0,0 +1,96 @@
+import { CSS as PICK_LIST_ITEM_CSS, SLOTS } from "../pick-list-item/resources";
+import { accessible, disabled, focusable, renders, slots, hidden } from "../../tests/commonTests";
+import { newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+describe("calcite-value-list-item", () => {
+    it("renders", async () => renders("calcite-value-list-item", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-value-list-item"));
+    it("is accessible", async () => {
+        await accessible(html `
+      <calcite-value-list>
+        <calcite-value-list-item label="test" description="a number" value="one"></calcite-value-list-item>
+      </calcite-value-list>
+    `);
+        await accessible(html `
+      <calcite-value-list>
+        <calcite-value-list-item label="test" description="a number" value="one" selected></calcite-value-list-item>
+      </calcite-value-list>
+    `);
+        await accessible(html `
+      <calcite-value-list>
+        <calcite-value-list-item label="test" description="a number" value="one" removable></calcite-value-list-item>
+      </calcite-value-list>
+    `);
+    });
+    it("has slots", () => slots("calcite-value-list-item", SLOTS));
+    it("is focusable", async () => focusable("calcite-value-list-item"));
+    it("can be disabled", async () => disabled("calcite-value-list-item"));
+    it("should toggle selected attribute when clicked", async () => {
+        const page = await newE2EPage({ html: `<calcite-value-list-item label="test"></calcite-value-list-item>` });
+        const item = await page.find("calcite-value-list-item");
+        expect(await item.getProperty("selected")).toBe(false);
+        await item.click();
+        expect(await item.getProperty("selected")).toBe(true);
+        await item.click();
+        expect(await item.getProperty("selected")).toBe(false);
+    });
+    it("should fire event calciteListItemChange when item is clicked", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-value-list-item label="test" value="example"></calcite-value-list-item>`
+        });
+        const item = await page.find("calcite-value-list-item");
+        await page.evaluate(() => document.addEventListener("calciteListItemChange", (event) => {
+            window.eventDetail = event.detail;
+        }));
+        await item.click();
+        const eventDetail = await page.evaluateHandle(() => window.eventDetail);
+        const properties = await eventDetail.getProperties();
+        expect(properties.get("item")).toBeDefined();
+        expect(properties.get("value")._remoteObject.value).toBe("example");
+        expect(properties.get("selected")._remoteObject.value).toBe(true);
+        expect(properties.get("shiftPressed")._remoteObject.value).toBe(false);
+    });
+    it("prevents deselection when disableDeselect is true", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-value-list-item label="test" value="example" disable-deselect selected></calcite-value-list-item>`
+        });
+        const item = await page.find("calcite-value-list-item");
+        await item.click();
+        expect(await item.getProperty("selected")).toBe(true);
+    });
+    it("prevents selection when nonInteractive is true", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-value-list-item label="test" value="example" non-interactive></calcite-value-list-item>`
+        });
+        const item = await page.find("calcite-value-list-item");
+        await item.click();
+        expect(await item.getProperty("selected")).toBe(false);
+    });
+    it("prevents deselection when nonInteractive is true", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-value-list-item label="test" value="example" non-interactive selected></calcite-value-list-item>`
+        });
+        const item = await page.find("calcite-value-list-item");
+        await item.click();
+        expect(await item.getProperty("selected")).toBe(true);
+    });
+    function queryWrappedPickListPart(page, partSelector, partMethodToInvoke) {
+        return page.$eval("calcite-value-list-item", (item, selector, partMethod) => {
+            const part = item.shadowRoot
+                .querySelector("calcite-pick-list-item")
+                .shadowRoot.querySelector(selector);
+            if (partMethod) {
+                part[partMethod]();
+            }
+        }, partSelector, partMethodToInvoke);
+    }
+    it("allows for easy removal", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-value-list-item label="test" value="example" removable></calcite-value-list-item>`
+        });
+        const item = await page.find("calcite-value-list-item");
+        const removeEventSpy = await item.spyOnEvent("calciteListItemRemove");
+        await queryWrappedPickListPart(page, `.${PICK_LIST_ITEM_CSS.remove}`, "click");
+        expect(removeEventSpy).toHaveReceivedEventTimes(1);
+    });
+});

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";

package/dist/collection/demos/_assets/demo-dom-swapper.js

@@ -0,0 +1,45 @@
+/**
+ * This component helps test existing components work when encapsulated in another component's shadow DOM.
+ *
+ * Demo pages should set this component as the root, under `<body>`
+ *
+ * Note:* due to style encapsulation, demo styles need to be a child of the component
+ */
+class DomSwapper extends HTMLElement {
+    constructor() {
+        super();
+        this._context = "light";
+        const shadow = this.attachShadow({ mode: "open" });
+        const slot = document.createElement("slot");
+        shadow.append(slot);
+        this._slot = slot;
+    }
+    get context() {
+        return this._context;
+    }
+    set context(value) {
+        this._context = value;
+    }
+    /**
+     * moves content between light and shadow DOM
+     *
+     * @param context
+     */
+    moveTo(context) {
+        if (context === "light") {
+            this.append(...Array.from(this.shadowRoot.children).filter((node) => node !== this._slot));
+            this._context = "light";
+        }
+        else {
+            if (!this._headStyles) {
+                this._headStyles = this.recreateDemoStyle();
+            }
+            this.shadowRoot.append(...this._headStyles, ...this.shadowRoot.querySelector("slot").assignedNodes());
+            this._context = "shadow";
+        }
+    }
+    recreateDemoStyle() {
+        return Array.from(document.querySelectorAll("head style:not([data-styles]), head link[rel=stylesheet]")).map((style) => style.cloneNode(true));
+    }
+}
+customElements.define("demo-dom-swapper", DomSwapper);

package/dist/collection/demos/_assets/demo-spacer.js

@@ -0,0 +1,17 @@
+class DemoSpacer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+          <style>
+            :host {
+              display: grid;
+              grid-template-columns: 1fr;
+              grid-gap: ${this.getAttribute("gap") || "12px"};
+            }
+          </style>
+          <slot></slot>
+        `;
+    }
+}
+customElements.define("demo-spacer", DemoSpacer);

package/dist/collection/demos/_assets/demo-template.js

@@ -0,0 +1,24 @@
+const toggleDir = () => {
+    document.dir = document.dir === "rtl" ? "ltr" : "rtl";
+};
+const toggleTheme = () => {
+    document.body.classList.toggle("calcite-theme-dark");
+};
+const toggleDom = (event) => {
+    const mover = document.querySelector("demo-dom-swapper");
+    const switchEl = event.currentTarget;
+    if (switchEl.checked) {
+        mover.moveTo("shadow");
+    }
+    else {
+        mover.moveTo("light");
+    }
+};
+const loadDemoToggles = () => {
+    document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
+    document.getElementById("demo-heading").textContent = document.title;
+    document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
+    document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
+    document.getElementById("toggle-dom").addEventListener("calciteSwitchChange", toggleDom);
+};
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();

package/dist/collection/demos/_assets/head.js

@@ -0,0 +1,48 @@
+(() => {
+    const DEMO_ROOT = "demos";
+    const ASSETS_PATH = "demos/_assets";
+    const CSS = [`${ASSETS_PATH}/demos.css`, "build/calcite.css"];
+    const urlParams = new URLSearchParams(window.location.search);
+    const DISABLE_HEADER_URL_PARAM = "header-disabled";
+    const SCRIPTS = [
+        {
+            src: "build/calcite.esm.js",
+            type: "module"
+        },
+        {
+            src: "demos/_assets/demo-dom-swapper.js"
+        }
+    ];
+    const parseTemplate = (text) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "text/html");
+        return doc.head.querySelector("template");
+    };
+    const loadHeader = async () => {
+        const root = window.location.pathname.split(DEMO_ROOT).shift();
+        const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
+        const text = await response.text();
+        const template = parseTemplate(text);
+        const firstChild = document.body.firstChild;
+        firstChild && document.body.insertBefore(template.content, firstChild);
+    };
+    if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
+        document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadHeader) : loadHeader();
+    }
+    const ROOT = window.location.pathname.split(DEMO_ROOT).shift();
+    function loadCss(url) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = ROOT + url;
+        document.head.appendChild(link);
+    }
+    function loadScript(script) {
+        const scriptElement = document.createElement("script");
+        Object.keys(script).forEach((key) => {
+            scriptElement[key] = key === "src" ? ROOT + script[key] : script[key];
+        });
+        document.head.appendChild(scriptElement);
+    }
+    CSS.forEach(loadCss);
+    SCRIPTS.forEach(loadScript);
+})();

package/dist/collection/demos/_assets/locales.js

@@ -0,0 +1,223 @@
+const locales = [
+    { name: "Afrikaans", locale: "af" },
+    { name: "Albanian", locale: "sq" },
+    { name: "Albanian (Albania)", locale: "sq-AL" },
+    { name: "Amharic", locale: "am" },
+    { name: "Arabic", locale: "ar", dir: "rtl" },
+    { name: "Arabic (Algeria)", locale: "ar-DZ", dir: "rtl" },
+    { name: "Arabic (Bahrain)", locale: "ar-BH", dir: "rtl" },
+    { name: "Arabic (Egypt)", locale: "ar-EG", dir: "rtl" },
+    { name: "Arabic (Iraq)", locale: "ar-IQ", dir: "rtl" },
+    { name: "Arabic (Jordan)", locale: "ar-JO", dir: "rtl" },
+    { name: "Arabic (Kuwait)", locale: "ar-KW", dir: "rtl" },
+    { name: "Arabic (Lebanon)", locale: "ar-LB", dir: "rtl" },
+    { name: "Arabic (Libya)", locale: "ar-LY", dir: "rtl" },
+    { name: "Arabic (Morocco)", locale: "ar-MA", dir: "rtl" },
+    { name: "Arabic (Oman)", locale: "ar-OM", dir: "rtl" },
+    { name: "Arabic (Qatar)", locale: "ar-QA", dir: "rtl" },
+    { name: "Arabic (Saudi Arabia)", locale: "ar-SA", dir: "rtl" },
+    { name: "Arabic (Sudan)", locale: "ar-SD", dir: "rtl" },
+    { name: "Arabic (Syria)", locale: "ar-SY", dir: "rtl" },
+    { name: "Arabic (Tunisia)", locale: "ar-TN", dir: "rtl" },
+    { name: "Arabic (United Arab Emirates)", locale: "ar-AE", dir: "rtl" },
+    { name: "Arabic (Yemen)", locale: "ar-YE", dir: "rtl" },
+    { name: "Armenian (Armenia)", locale: "hy-AM" },
+    { name: "Assamese", locale: "as" },
+    { name: "Azeri (Cyrillic)", locale: "az" },
+    { name: "Azeri (Latin)", locale: "az" },
+    { name: "Basque", locale: "eu" },
+    { name: "Belarusian", locale: "be" },
+    { name: "Belarusian (Belarus)", locale: "be-BY" },
+    { name: "Bengali", locale: "bn" },
+    { name: "Bengali (Bangladesh)", locale: "bn-BD" },
+    { name: "Bengali (India)", locale: "bn-IN" },
+    { name: "Bosnian", locale: "bs" },
+    { name: "Bulgarian", locale: "bg" },
+    { name: "Bulgarian (Bulgaria)", locale: "bg-BG" },
+    { name: "Burmese", locale: "my" },
+    { name: "Catalan", locale: "ca" },
+    { name: "Catalan (Spain)", locale: "ca-ES" },
+    { name: "Chinese", locale: "zh" },
+    { name: "Chinese (China)", locale: "zh-CN" },
+    { name: "Chinese (Hong Kong)", locale: "zh-HK" },
+    { name: "Chinese (Macau SAR)", locale: "zh-MO" },
+    { name: "Chinese (Singapore)", locale: "zh-SG" },
+    { name: "Chinese (Taiwan)", locale: "zh-TW" },
+    { name: "Croatian", locale: "hr" },
+    { name: "Croatian (Croatia)", locale: "hr-HR" },
+    { name: "Czech", locale: "cs" },
+    { name: "Czech (Czech Republic)", locale: "cs-CZ" },
+    { name: "Danish", locale: "da" },
+    { name: "Danish (Denmark)", locale: "da-DK" },
+    { name: "Divehi", locale: "dv" },
+    { name: "Dutch", locale: "nl" },
+    { name: "Dutch (Belgium)", locale: "nl-BE" },
+    { name: "Dutch (Netherlands)", locale: "nl-NL" },
+    { name: "English", locale: "en" },
+    { name: "English (Australia)", locale: "en-AU" },
+    { name: "English (Belize)", locale: "en-BZ" },
+    { name: "English (Canada)", locale: "en-CA" },
+    { name: "English (Caribbean)", locale: "en-CB" },
+    { name: "English (Great Britain)", locale: "en-GB" },
+    { name: "English (India)", locale: "en-IN" },
+    { name: "English (Ireland)", locale: "en-IE" },
+    { name: "English (Jamaica)", locale: "en-JM" },
+    { name: "English (Malta)", locale: "en-MT" },
+    { name: "English (New Zealand)", locale: "en-NZ" },
+    { name: "English (Philippines)", locale: "en-PH" },
+    { name: "English (South Africa)", locale: "en-ZA" },
+    { name: "English (Singapore)", locale: "en-SG" },
+    { name: "English (Trinidad)", locale: "en-TT" },
+    { name: "English (United States)", locale: "en-US" },
+    { name: "English (South Africa)", locale: "en-ZA" },
+    { name: "Estonian", locale: "et" },
+    { name: "Estonian (Estonia)", locale: "et-EE" },
+    { name: "Faroese", locale: "fo" },
+    { name: "Farsi (Persian)", locale: "fa" },
+    { name: "Finnish", locale: "fi" },
+    { name: "Finnish (Finland)", locale: "fi-FI" },
+    { name: "French", locale: "fr" },
+    { name: "French (Belgium)", locale: "fr-BE" },
+    { name: "French (Canada)", locale: "fr-CA" },
+    { name: "French (Switzerland)", locale: "fr-CH" },
+    { name: "French (France)", locale: "fr-FR" },
+    { name: "French (Luxembourg)", locale: "fr-LU" },
+    { name: "Gaelic (Ireland)", locale: "gd-IE" },
+    { name: "Gaelic (Scotland)", locale: "gd" },
+    { name: "Galician", locale: "gl" },
+    { name: "Georgian", locale: "ka" },
+    { name: "German", locale: "de" },
+    { name: "German (Austria)", locale: "de-AT" },
+    { name: "German (Germany)", locale: "de-DE" },
+    { name: "German (Liechtenstein)", locale: "de-LI" },
+    { name: "German (Luxembourg)", locale: "de-LU" },
+    { name: "German (Switzerland)", locale: "de-CH" },
+    { name: "Greek", locale: "el" },
+    { name: "Greek (Cyprus)", locale: "el-CY" },
+    { name: "Greek (Greece)", locale: "el-GR" },
+    { name: "Guarani (Paraguay)", locale: "gu" },
+    { name: "Gujarati", locale: "gn" },
+    { name: "Hebrew", locale: "iw" },
+    { name: "Hebrew (Israel)", locale: "iw-IL" },
+    { name: "Hindi (India)", locale: "hi-IN" },
+    { name: "Hungarian", locale: "hu" },
+    { name: "Hungarian (Hungary)", locale: "hu-HU" },
+    { name: "Icelandic", locale: "is" },
+    { name: "Icelandic (Iceland)", locale: "is-IS" },
+    { name: "Indonesian (ISO 639)", locale: "in" },
+    { name: "Indonesian (Indonesia) (ISO 639)", locale: "in-ID" },
+    { name: "Indonesian (ISO 3166)", locale: "id" },
+    { name: "Indonesian (Indonesia) (ISO 3166)", locale: "id-ID" },
+    { name: "Irish", locale: "ga" },
+    { name: "Irish (Ireland)", locale: "ga-IE" },
+    { name: "Italian", locale: "it" },
+    { name: "Italian (Italy)", locale: "it-IT" },
+    { name: "Italian (Switzerland)", locale: "it-CH" },
+    { name: "Japanese", locale: "ja" },
+    { name: "Japanese (Japan)", locale: "ja-JP" },
+    { name: "Kannada", locale: "kn" },
+    { name: "Kashmiri", locale: "ks" },
+    { name: "Kazakh", locale: "kk" },
+    { name: "Khmer", locale: "km" },
+    { name: "Korean", locale: "ko" },
+    { name: "Korean (South Korea)", locale: "ko-KR" },
+    { name: "Lao", locale: "lo" },
+    { name: "Latin", locale: "la" },
+    { name: "Latvian", locale: "lv" },
+    { name: "Latvian (Latvia)", locale: "lv-LV" },
+    { name: "Lithuanian", locale: "lt" },
+    { name: "Lithuanian (Lithuania)", locale: "lt-LT" },
+    { name: "Macedonian", locale: "mk" },
+    { name: "Macedonian (Macedonia)", locale: "mk-MK" },
+    { name: "Malay", locale: "ms" },
+    { name: "Malay (Brunei)", locale: "ms-BN" },
+    { name: "Malay (Malaysia)", locale: "ms-MY" },
+    { name: "Malayalam", locale: "ml" },
+    { name: "Maltese", locale: "mt" },
+    { name: "Maltese (Malta)", locale: "mt-MT" },
+    { name: "Maori", locale: "mi" },
+    { name: "Marathi", locale: "mr" },
+    { name: "Mongolian", locale: "mn" },
+    { name: "Nepali", locale: "ne" },
+    { name: "Norwegian", locale: "no" },
+    { name: "Norwegian (Bokml)", locale: "nb" },
+    { name: "Norwegian (Norway)", locale: "no-NO" },
+    { name: "Norwegian (Norway, Nynorsk)", locale: "no-NY" },
+    { name: "Oriya", locale: "or" },
+    { name: "Polish", locale: "pl" },
+    { name: "Polish (Poland)", locale: "pl-PL" },
+    { name: "Portuguese", locale: "pt" },
+    { name: "Portuguese (Brazil)", locale: "pt-BR" },
+    { name: "Portuguese (Portugal)", locale: "pt-PT" },
+    { name: "Punjabi", locale: "pa" },
+    { name: "Raeto-Romance", locale: "rm" },
+    { name: "Romanian", locale: "ro" },
+    { name: "Romanian (Moldova)", locale: "ro-MO" },
+    { name: "Romanian (Romania)", locale: "ro-RO" },
+    { name: "Russian", locale: "ru" },
+    { name: "Russian (Moldova)", locale: "ru-MO" },
+    { name: "Russian (Russia)", locale: "ru-RU" },
+    { name: "Sanskrit", locale: "sa" },
+    { name: "Serbian", locale: "sr" },
+    { name: "Serbian (Cyrillic, Latin)", locale: "sr-SP" },
+    { name: "Serbian (Bosnia and Herzegovina)", locale: "sr-BA" },
+    { name: "Serbian (Montenegro)", locale: "sr-ME" },
+    { name: "Serbian (Serbia)", locale: "sr-RS" },
+    { name: "Serbian (Serbia and Montenegro)", locale: "sr-CS" },
+    { name: "Setsuana", locale: "tn" },
+    { name: "Sindhi", locale: "sd" },
+    { name: "Sinhala", locale: "si" },
+    { name: "Slovak", locale: "sk" },
+    { name: "Slovak (Slovakia)", locale: "sk-SK" },
+    { name: "Slovenian", locale: "sl" },
+    { name: "Slovenian (Slovenia)", locale: "sl-SI" },
+    { name: "Somali", locale: "so" },
+    { name: "Sorbian", locale: "sb" },
+    { name: "Spanish", locale: "es" },
+    { name: "Spanish (Argentina)", locale: "es-AR" },
+    { name: "Spanish (Bolivia)", locale: "es-BO" },
+    { name: "Spanish (Chile)", locale: "es-CL" },
+    { name: "Spanish (Colombia)", locale: "es-CO" },
+    { name: "Spanish (Costa Rica)", locale: "es-CR" },
+    { name: "Spanish (Dominican Republic)", locale: "es-DO" },
+    { name: "Spanish (Ecuador)", locale: "es-EC" },
+    { name: "Spanish (El Salvador)", locale: "es-SV" },
+    { name: "Spanish (Guatemala)", locale: "es-GT" },
+    { name: "Spanish (Honduras)", locale: "es-HN" },
+    { name: "Spanish (Mexico)", locale: "es-MX" },
+    { name: "Spanish (Nicaragua)", locale: "es-NI" },
+    { name: "Spanish (Panama)", locale: "es-PA" },
+    { name: "Spanish (Paraguay)", locale: "es-PY" },
+    { name: "Spanish (Peru)", locale: "es-PE" },
+    { name: "Spanish (Puerto Rico)", locale: "es-PR" },
+    { name: "Spanish (Spain)", locale: "es-ES" },
+    { name: "Spanish (United States)", locale: "es-US" },
+    { name: "Spanish (Uruguay)", locale: "es-UY" },
+    { name: "Spanish (Venezuela)", locale: "es-VE" },
+    { name: "Swahili", locale: "sw" },
+    { name: "Swedish", locale: "sv" },
+    { name: "Swedish (Finland)", locale: "sv-FI" },
+    { name: "Swedish (Sweden)", locale: "sv-SE" },
+    { name: "Tajik", locale: "tg" },
+    { name: "Tamil", locale: "ta" },
+    { name: "Tatar", locale: "tt" },
+    { name: "Telugu", locale: "te" },
+    { name: "Thai", locale: "th" },
+    { name: "Thai (Thailand)", locale: "th-TH" },
+    { name: "Thai (Thai Digits)", locale: "th-TH-u-nu-thai" },
+    { name: "Tibetan", locale: "bo" },
+    { name: "Tsonga", locale: "ts" },
+    { name: "Turkish", locale: "tr" },
+    { name: "Turkish (Turkey)", locale: "tr-TR" },
+    { name: "Turkmen", locale: "tk" },
+    { name: "Ukrainian", locale: "uk" },
+    { name: "Ukrainian (Ukraine)", locale: "uk-UA" },
+    { name: "Urdu", locale: "ur" },
+    { name: "Uzbek (Cyrillic, Latin)", locale: "uz-UZ" },
+    { name: "Vietnamese", locale: "vi" },
+    { name: "Vietnamese (Vietnam)", locale: "vi-VN" },
+    { name: "Welsh", locale: "cy" },
+    { name: "Xhosa", locale: "xh" },
+    { name: "Yiddish", locale: "yi" },
+    { name: "Zulu", locale: "zu" }
+];