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

package/dist/collection/components/flow-item/flow-item.stories.js

@@ -1,181 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { createComponentHTML as create, filterComponentAttributes, themesDarkDefault } from "../../../.storybook/utils";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import readme from "./readme.md";
-import { SLOTS, TEXT } from "./resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Flow Item",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const { scale } = ATTRIBUTES;
-    return filterComponentAttributes([
-        {
-            name: "dismissed",
-            commit() {
-                this.value = boolean("dismissed", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "dismissible",
-            commit() {
-                this.value = boolean("dismissible", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "height-scale",
-            commit() {
-                this.value = select("heightScale", scale.values, scale.defaultValue);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-close",
-            commit() {
-                this.value = text("intlClose", TEXT.close);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;
-const contentHTML = html `
-  <p>
-    Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
-    semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus
-    habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non.
-    Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti
-    consectetur. Non porttitor tempor orci dictumst magna porta vitae.
-  </p>
-  <p>
-    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
-    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
-    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
-    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
-    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
-    leo.
-  </p>
-  <p>
-    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
-    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
-    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
-    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
-    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
-  </p>
-`;
-const footerHTML = html `
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
-`;
-const flowItemContent = `${headerHTML}
-  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
-  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
-  ${contentHTML}
-  ${footerHTML}`;
-export const simple = () => create("calcite-flow-item", createAttributes(), html `
-      ${headerHTML}
-      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
-      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
-      ${contentHTML}
-      <calcite-fab slot="fab"></calcite-fab>
-      ${footerHTML}
-    `);
-export const onlyProps = () => html `
-  <div style="width: 300px;">
-    <calcite-flow-item
-      height-scale="s"
-      heading-level="${text("heading-level", "2")}"
-      summary="${text("summary", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
-      heading="${text("heading", "flowItem title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum")}"
-    />
-  </div>
-`;
-export const disabledWithStyledSlot_TestOnly = () => html `
-  <calcite-flow-item style="height: 100%;" heading="Heading" disabled>
-    <div id="content" style="height: 100%;">${contentHTML}</div>
-  </calcite-flow-item>
-`;
-export const darkThemeRTL_TestOnly = () => create("calcite-flow-item", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    {
-        name: "dir",
-        value: "rtl"
-    },
-    {
-        name: "class",
-        value: "calcite-theme-dark"
-    }
-]), flowItemContent);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const noDoubleScrollbars_TestOnly = () => html `
-  <style>
-    #container {
-      display: flex;
-      max-height: 540px;
-      width: 300px;
-    }
-
-    .content {
-      height: 100%;
-      display: flex;
-      padding: 10px;
-      overflow-y: auto; /* Control scrollbar via child */
-    }
-  </style>
-  <div id="container">
-    <calcite-flow>
-      <calcite-flow-item heading="Example">
-        <div>### Stickied Content e.g. toolbar</div>
-        <div class="content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec,
-          sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue
-          est malesuada quis. Proin tincidunt lacus laoreet mauris fringilla accumsan. Cras nec enim eu lectus suscipit
-          vestibulum a laoreet arcu. Duis posuere nunc vel enim blandit, nec vehicula orci aliquam. Vestibulum hendrerit
-          mi vel nisi posuere accumsan. Aenean efficitur est id cursus convallis. Morbi turpis ante, sodales eu tortor
-          eu, mattis bibendum purus. Morbi iaculis nisl nunc, quis accumsan quam laoreet vitae. Aliquam ex ligula,
-          ornare eu ex vitae, tincidunt venenatis lacus. Phasellus risus quam, elementum sed justo porttitor,
-          ullamcorper mattis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-          curae; Nulla non dui at metus porta lacinia congue sit amet quam. Mauris viverra diam neque, in blandit leo
-          vehicula et. Donec non purus vitae nunc tincidunt egestas. Nunc pretium enim magna, sed fringilla lacus
-          viverra in. Nam et pretium nisi. Ut bibendum, ipsum sit amet egestas hendrerit, quam orci sollicitudin purus,
-          sit amet finibus mauris erat in eros. Integer est dui, vehicula a ipsum id, pellentesque semper elit. Fusce
-          euismod volutpat eros vitae imperdiet. Nam suscipit lacus id posuere pharetra. Cras eros ipsum, feugiat non
-          leo non, ornare malesuada eros. Donec egestas purus non quam tempus commodo. Maecenas ex augue, euismod eget
-          magna in, dapibus fermentum felis. Phasellus justo felis, sollicitudin ut ex sed, lobortis scelerisque sem.
-          Pellentesque semper placerat velit, sit amet viverra tortor ultricies eu. Pellentesque habitant morbi
-          tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus feugiat, augue in molestie
-          imperdiet, felis turpis facilisis tortor, at tempus purus risus et sapien. Fusce id nisi id orci elementum
-          sollicitudin. Nam id libero eu odio efficitur rutrum maximus porta lorem. Nunc tristique interdum augue,
-          sodales viverra lectus efficitur vitae. Nam molestie, neque consequat mollis pulvinar, sapien sem semper nunc,
-          et euismod enim sem vitae ligula.
-        </div>
-      </calcite-flow-item>
-    </calcite-flow>
-  </div>
-`;

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

@@ -1,77 +0,0 @@
-import { number } from "@storybook/addon-knobs";
-import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Controls/Slider/support/Graph",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const data = [
-    [0, 0],
-    [10, 80],
-    [20, 20],
-    [30, 30],
-    [40, 42],
-    [50, 50],
-    [60, 55],
-    [70, 48],
-    [80, 30],
-    [90, 10],
-    [100, 0]
-];
-const rainbow = ["red", "orange", "yellow", "green", "cyan", "blue", "violet"];
-const colorStops = rainbow.map((color, i) => ({ offset: (1 / (rainbow.length - 1)) * i, color }));
-export const simple = () => {
-    const div = document.createElement("div");
-    div.style.width = `${number("width", 300)}px`;
-    div.style.height = `${number("height", 100)}px`;
-    const graph = document.createElement("calcite-graph");
-    graph.min = number("min", 0);
-    graph.max = number("max", 100);
-    graph.data = data;
-    div.appendChild(graph);
-    return div;
-};
-export const highlightRange = () => {
-    const div = document.createElement("div");
-    div.style.width = `${number("width", 300)}px`;
-    div.style.height = `${number("height", 100)}px`;
-    const graph = document.createElement("calcite-graph");
-    graph.min = number("min", 0);
-    graph.max = number("max", 100);
-    graph.highlightMin = number("highlightMin", 25);
-    graph.highlightMax = number("highlightMax", 75);
-    graph.data = data;
-    div.appendChild(graph);
-    return div;
-};
-export const withColorStops = () => {
-    const div = document.createElement("div");
-    div.style.width = `${number("width", 300)}px`;
-    div.style.height = `${number("height", 100)}px`;
-    const graph = document.createElement("calcite-graph");
-    graph.min = number("min", 0);
-    graph.max = number("max", 100);
-    graph.colorStops = colorStops;
-    graph.data = data;
-    div.appendChild(graph);
-    return div;
-};
-export const darkThemeRTL_TestOnly = () => {
-    const div = document.createElement("div");
-    div.style.width = `${number("width", 300)}px`;
-    div.style.height = `${number("height", 100)}px`;
-    div.dir = "rtl";
-    div.classList.add("calcite-theme-dark");
-    const graph = document.createElement("calcite-graph");
-    graph.min = number("min", 0);
-    graph.max = number("max", 100);
-    graph.highlightMin = number("highlightMin", 25);
-    graph.highlightMax = number("highlightMax", 75);
-    graph.colorStops = colorStops;
-    graph.data = data;
-    div.appendChild(graph);
-    return div;
-};

package/dist/collection/components/icon/icon.stories.js

@@ -1,26 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Icon",
-    parameters: { notes: readme },
-    ...storyFilters()
-};
-const sampleIcon = iconNames.find((item) => item === "arrowRight");
-export const simple = () => html `
-  <calcite-icon
-    icon="${select("icon", iconNames, sampleIcon)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-icon>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-icon
-    class="calcite-theme-dark"
-    dir="rtl"
-    icon="${select("icon", iconNames, sampleIcon)}"
-    ${boolean("flip-rtl", true)}
-  ></calcite-icon>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/inline-editable/inline-editable.stories.js

@@ -1,70 +0,0 @@
-import readme from "./readme.md";
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Controls/Inline Editable",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:300px;max-width:100%;">
-    <calcite-inline-editable
-      scale="${select("scale", ["s", "m", "l"], "m", "InlineEditable")}"
-      ${boolean("controls", false, "InlineEditable") && "controls"}
-      ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
-      ${boolean("loading", false, "InlineEditable") && "loading"}
-      ${boolean("disabled", false, "InlineEditable") && "disabled"}
-      intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
-      intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
-      intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
-    >
-      <calcite-input
-        alignment="${select("alignment", ["start", "end"], "start", "Input")}"
-        placeholder="${text("placeholder", "Placeholder text", "Input")}"
-      >
-      </calcite-input>
-    </calcite-inline-editable>
-  </div>
-`;
-export const disabled_TestOnly = () => html `<calcite-inline-editable disabled>
-  <calcite-input value="disabled"></calcite-input>
-</calcite-inline-editable>`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div dir="rtl" style="width:300px;max-width:100%;">
-    <calcite-label
-      class="calcite-theme-dark"
-      status="${select("status", ["idle", "valid", "invalid"], "idle", "Label")}"
-      scale="${select("scale", ["s", "m", "l"], "m", "Label")}"
-      layout="${select("layout", ["default", "inline", "inline-space-between"], "default", "Label")}"
-    >
-      ${text("label text", "My great label", "Label")}
-      <calcite-inline-editable
-        ${boolean("controls", false, "InlineEditable") && "controls"}
-        ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
-        ${boolean("loading", false, "InlineEditable") && "loading"}
-        ${boolean("disabled", false, "InlineEditable") && "disabled"}
-        intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
-        intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
-        intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
-      >
-        <calcite-input
-          alignment="${select("alignment", ["start", "end"], "start", "Input")}"
-          placeholder="${text("placeholder", "Placeholder text", "Input")}"
-        >
-        </calcite-input>
-      </calcite-inline-editable>
-      <calcite-input-message
-        ${boolean("active", false, "InputMessage") && "active"}
-        ${boolean("icon", false, "InputMessage") && "icon"}
-        status="${select("status", ["idle", "valid", "invalid"], "idle", "InputMessage")}"
-      >
-        ${text("text", "My great input message", "InputMessage")}
-      </calcite-input-message>
-    </calcite-label>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,146 +0,0 @@
-import { select, text, number } from "@storybook/addon-knobs";
-import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Controls/Input",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input
-      id="input-with-label"
-      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    ></calcite-input>
-  </div>
-`;
-export const withInputMessage = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input
-      id="input-with-label-and-input-message"
-      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text", "Input")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle", "Input")}"
-      alignment="${select("alignment", ["start", "end"], "start", "Input")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal", "Input")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "", "Input")}"
-      suffix-text="${text("suffix-text", "", "Input")}"
-      ${boolean("loading", false)}
-      ${boolean("autofocus", false)}
-      ${boolean("required", false)}
-      value="${text("value", "", "Input")}"
-      placeholder="${text("placeholder", "Placeholder text", "Input")}"
-    >
-    </calcite-input>
-    <calcite-input-message
-      ${boolean("active", true)}
-      ${boolean("icon", false)}
-      icon="${select("icon", iconNames, "", "Input Message")}"
-      >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
-    >
-  </div>
-`;
-export const withSlottedAction = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input
-      id="input-with-slotted-action"
-      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-      <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
-    </calcite-input>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
-  </div>
-`;
-export const textarea = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input
-      id="input-with-text-area"
-      type="textarea"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-    </calcite-input>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
-  </div>
-`;
-export const disabled_TestOnly = () => html `<calcite-input disabled value="disabled"></calcite-input>`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div dir="rtl" style="width:300px;max-width:100%;text-align:center;">
-    <calcite-label
-      class="calcite-theme-dark"
-      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
-      for="input-dark-theme"
-    >
-      ${text("label text", "My great label")}
-      <calcite-input
-        id="input-dark-theme"
-        type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
-        status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-        alignment="${select("alignment", ["start", "end"], "start")}"
-        number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-        min="${number("min", 0)}"
-        max="${number("max", 100)}"
-        step="${number("step", 1)}"
-        prefix-text="${text("prefix-text", "")}"
-        suffix-text="${text("suffix-text", "")}"
-        ${boolean("loading", false)}
-        ${boolean("clearable", false)}
-        ${boolean("disabled", false)}
-        value="${text("value", "")}"
-        placeholder="${text("placeholder", "Placeholder text")}"
-      >
-      </calcite-input>
-      <calcite-input-message
-        ${boolean("calcite-input-message-active", true)}
-        status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-        >${text("input message text", "My great input message")}</calcite-input-message
-      >
-    </calcite-label>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const hebrewNumberingSystem_TestOnly = () => html ` <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input>`;
-export const arabicLocaleWithLatinNumberingSystem_TestOnly = () => html ` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;

package/dist/collection/components/input-date-picker/input-date-picker.stories.js

@@ -1,79 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { locales } from "../../utils/locale";
-import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Controls/InputDatePicker",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width: 400px">
-    <calcite-input-date-picker
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      value="${text("value", "2020-12-12")}"
-      min="${text("min", "2016-08-09")}"
-      max="${text("max", "2023-12-18")}"
-      lang="${select("locale", locales, "en")}"
-      intl-next-month="${text("intl-next-month", "Next month")}"
-      intl-prev-month="${text("intl-prev-month", "Previous month")}"
-      placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    ></calcite-input-date-picker
-  </div>
-`;
-export const range = () => html `
-  <div style="width: 400px">
-    <calcite-input-date-picker
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      start="${text("start", "2020-12-12")}"
-      end="${text("end", "2020-12-16")}"
-      min="${text("min", "2016-08-09")}"
-      max="${text("max", "2023-12-18")}"
-      lang="${select("locale", locales, "en")}"
-      next-month-label="${text("next-month-label", "Next month")}"
-      prev-month-label="${text("prev-month-label", "Previous month")}"
-      range="${boolean("range", true)}"
-      layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
-    ></calcite-input-date-picker>
-  </div>
-`;
-export const disabled_TestOnly = () => html `<calcite-input-date-picker disabled></calcite-input-date-picker>`;
-export const flipPlacements_TestOnly = () => html `
-  <style>
-    .my-input-date-picker-div {
-      margin-top: 50px;
-    }
-
-    .my-input-date-picker {
-      position: unset;
-    }
-  </style>
-  <div style="height: 100px; overflow:scroll;">
-    <div class="my-input-date-picker-div">
-      <calcite-input-date-picker open class="my-input-date-picker" value="2020-02-12"></calcite-input-date-picker>
-    </div>
-  </div>
-  <script>
-    document.querySelector(".my-input-date-picker").flipPlacements = ["right"];
-  </script>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div dir="rtl" style="width: 400px">
-    <calcite-input-date-picker
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      value="${text("value", "2020-12-12")}"
-      min="${text("min", "2016-08-09")}"
-      max="${text("max", "2023-12-18")}"
-      lang="${select("locale", locales, "en")}"
-      intl-next-month="${text("intl-next-month", "Next month")}"
-      intl-prev-month="${text("intl-prev-month", "Previous month")}"
-      range="${boolean("range", false)}"
-    ></calcite-input-date-picker
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };