@ukic/canary-web-components 2.0.0-canary.37 → 2.0.0-canary.39

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { html } from "lit-html";
+import readme from "./readme.md";
+export default {
+    title: "Web Components/Data Table Title Bar",
+    component: "ic-data-table-title-bar",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+/**
+ * Use the data table title bar component to provide titling, description, metadata and also global table functionality.
+ *
+ * By default, the density selector appears within the data table title bar. The three density options are:
+ * - Default
+ * - Dense
+ * - Spacious
+ */
+export const Basic = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+    ></ic-data-table-title-bar>`,
+    name: "Basic",
+    height: "220px",
+};
+/**
+ * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.
+ */
+export const Slots = {
+    render: () => html `
+    <ic-data-table-title-bar>
+      <ic-typography slot="heading" variant="h1"
+        ><h3>Title Bar</h3></ic-typography
+      >
+      <div slot="description">
+        <ic-chip label="Chip"></ic-chip>
+        <ic-chip label="Chip"></ic-chip>
+      </div>
+    </ic-data-table-title-bar>
+  `,
+    name: "Slots",
+    height: "220px",
+};
+/**
+ * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.
+ */
+export const WithMetadataAndDescription = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    ></ic-data-table-title-bar>`,
+    name: "With metadata and description",
+    height: "220px",
+};
+/**
+ * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.
+ */
+export const HideDensitySelector = {
+    render: () => html `<ic-data-table-title-bar
+      hide-density-select="true"
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    ></ic-data-table-title-bar>`,
+    name: "Hide density selector",
+};
+/**
+ * Custom actions can be added to the data table title bar via slots. There are two slots available:
+ * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.
+ * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.
+ */
+export const CustomActions = {
+    render: () => html `<ic-data-table-title-bar
+      heading="Title Bar"
+      metadata="128 items | 32gb | Updated: 01/02/03"
+      description="Data table description that describes the purpose of the table."
+    >
+      <ic-button slot="primary-action" size="small">Primary</ic-button>
+      <ic-button slot="custom-actions" variant="icon" aria-label="Icon Button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 -960 960 960"
+          width="24"
+        >
+          <path
+            d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"
+          />
+        </svg>
+      </ic-button>
+    </ic-data-table-title-bar>`,
+    name: "Custom actions",
+    height: "220px",
+};
+//# sourceMappingURL=ic-data-table-title-bar.stories.js.map

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table-title-bar.stories.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,yBAAyB;IAEpC,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;gCAEwB;IAE9B,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IAED,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;gCAIwB;IAE9B,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;gCAKwB;IAE9B,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;+BAkBuB;IAE7B,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,OAAO;CAChB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Data Table Title Bar\",\n  component: \"ic-data-table-title-bar\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table title bar component to provide titling, description, metadata and also global table functionality.\n *\n * By default, the density selector appears within the data table title bar. The three density options are:\n * - Default\n * - Dense\n * - Spacious\n */\nexport const Basic = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"Basic\",\n  height: \"220px\",\n};\n\n/**\n * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.\n */\nexport const Slots = {\n  render: () => html`\n    <ic-data-table-title-bar>\n      <ic-typography slot=\"heading\" variant=\"h1\"\n        ><h3>Title Bar</h3></ic-typography\n      >\n      <div slot=\"description\">\n        <ic-chip label=\"Chip\"></ic-chip>\n        <ic-chip label=\"Chip\"></ic-chip>\n      </div>\n    </ic-data-table-title-bar>\n  `,\n\n  name: \"Slots\",\n  height: \"220px\",\n};\n\n/**\n * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.\n */\nexport const WithMetadataAndDescription = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"With metadata and description\",\n  height: \"220px\",\n};\n\n/**\n * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.\n */\nexport const HideDensitySelector = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      hide-density-select=\"true\"\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    ></ic-data-table-title-bar>`,\n\n  name: \"Hide density selector\",\n};\n\n/**\n * Custom actions can be added to the data table title bar via slots. There are two slots available:\n * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.\n * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.\n */\nexport const CustomActions = {\n  render: () =>\n    html`<ic-data-table-title-bar\n      heading=\"Title Bar\"\n      metadata=\"128 items | 32gb | Updated: 01/02/03\"\n      description=\"Data table description that describes the purpose of the table.\"\n    >\n      <ic-button slot=\"primary-action\" size=\"small\">Primary</ic-button>\n      <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon Button\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24\"\n          viewBox=\"0 -960 960 960\"\n          width=\"24\"\n        >\n          <path\n            d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n          />\n        </svg>\n      </ic-button>\n    </ic-data-table-title-bar>`,\n\n  name: \"Custom actions\",\n  height: \"220px\",\n};\n"]}

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

@@ -0,0 +1,341 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { createDateInputForm } from "./story-data";
+import { html } from "lit-html";
+import readme from "./readme.md";
+export default {
+    title: "Web Components/Date Input",
+    component: "ic-date-input",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+/**
+ * Use the date input component to manually type in a date in different formats.
+ * The input `label` is the only required attribute for date input.
+ *
+ * Click the 'Component API' tab to view all the available attributes, events and slots for date input.
+ * To use the date input component, import `@ukic/canary-web-components` into your application.
+ *
+ * Each example below demonstrates the date input in three different date formats:
+ * - DD/MM/YYYY (Default date format)
+ * - MM/DD/YYYY
+ * - YYYY/MM/DD
+ *
+ * Dates can be added by manually typing into the input or using the up and down arrow keys.
+ * To move between day, month and year using the keyboard, provide the required values based on the placeholders or use `/` or `-`.
+ *
+ * By default, the helper text displays the date format.
+ */
+export const Default = {
+    render: () => html `<ic-date-input
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <script>
+        var dateInput = document.querySelector("ic-date-input");
+        {
+          dateInput.addEventListener("icChange", function (event) {
+            console.log("icChange", event.detail.value);
+          });
+        }
+      </script>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+        date-format="MM/DD/YYYY"
+      ></ic-date-input>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+        date-format="YYYY/MM/DD"
+      ></ic-date-input> `,
+    name: "Default",
+};
+/**
+ * Retrieving the date input value via `icChange` returns the date as a Date object. The event returns the Date object once day, month and year have been entered.
+ */
+export const IcChangeEvent = {
+    render: () => html `<ic-date-input
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <script>
+        var dateInput = document.querySelector("ic-date-input");
+        dateInput.addEventListener("icChange", function (event) {
+          console.log(event.detail.value);
+        });
+      </script>`,
+    name: "icChange event",
+};
+/**
+ * To set a value to the date input, pass the date value in the relevant date format.
+ */
+export const WithValue = {
+    render: () => html `<ic-date-input
+      id="date-input-default-date-with-value"
+      label="When would you like to collect your coffee?"
+      date-format="DD/MM/YYYY"
+      value="21/01/2001"
+    ></ic-date-input>`,
+    name: "With value",
+};
+/**
+ * The date input also accepts a number of different date formats within the value attribute:
+ * - [Date object](#date-object)
+ * - [Zulu datetime](#zulu-time)
+ * - [With hyphens (DD-MM-YYYY)](#with-hyphens)
+ * - [Epoch time](#epoch-time)
+ */
+export const DateObject = {
+    render: () => html `<ic-date-input
+        id="date-input-default-date-date"
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <script>
+        var dateInputDate = document.querySelector(
+          "#date-input-default-date-date"
+        );
+        dateInputDate.value = new Date("28 November 2021");
+      </script>`,
+    name: "Date object",
+};
+export const ZuluTime = {
+    render: () => html `<div>
+        <ic-date-input
+          id="date-input-default-zulu-date"
+          label="When would you like to collect your coffee?"
+        ></ic-date-input>
+      </div>
+      <script>
+        var dateInputDate = document.querySelector(
+          "#date-input-default-zulu-date"
+        );
+        dateInputDate.value = new Date("1 May 1990").toISOString();
+      </script>`,
+    name: "Zulu time",
+};
+export const WithHyphens = {
+    render: () => html `<ic-date-input
+        id="date-input-default-date-string"
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <script>
+        var dateInputString = document.querySelector(
+          "#date-input-default-date-string"
+        );
+        dateInputString.value = "25-05-2005";
+      </script>`,
+    name: "With hyphens",
+};
+export const EpochTime = {
+    render: () => html `<ic-date-input
+        id="date-input-default-date-epoch"
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <script>
+        var dateInputString = document.querySelector(
+          "#date-input-default-date-epoch"
+        );
+        dateInputString.value = Date.now();
+      </script>`,
+    name: "Epoch time",
+};
+/**
+ * To set the date input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the date input label.
+ */
+export const Required = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      required
+    ></ic-date-input>`,
+    name: "Required",
+};
+/**
+ * To hide the label, set the `hide-label` attribute to `true`. The required `label` will still be read out by screen readers.
+ */
+export const HideLabel = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      hide-label="true"
+    ></ic-date-input> `,
+    name: "Hide label",
+};
+/**
+ * Set the `disabled` attribute to `true` to prevent interaction with the date input.
+ */
+export const Disabled = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      disabled
+    ></ic-date-input>`,
+    name: "Disabled",
+};
+/**
+ * The date input is available in three different sizes:
+ * - small
+ * - default
+ * - large
+ */
+export const Sizes = {
+    render: () => html `<ic-date-input
+        label="When would you like to collect your coffee?"
+        size="small"
+      ></ic-date-input>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+      ></ic-date-input>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+        size="large"
+      ></ic-date-input> `,
+    name: "Sizes",
+};
+/**
+ * Use the `helper-text` attribute to add additional detail for the date input.
+ */
+export const CustomHelperText = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      helper-text="We will have your order ready for you on this date"
+    ></ic-date-input>`,
+    name: "Custom helper text",
+};
+/**
+ * Hide visible helper text by setting `hide-helper-text` to `true`.
+ */
+export const HideHelperText = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      helper-text="You cannot see me, but you can hear me"
+      hide-helper-text="true"
+    ></ic-date-input>`,
+    name: "Hide helper text",
+};
+/**
+ * Validation on date input is set via `validation-status` and `validation-text`.
+ * `validation-status` will set the style of the validation message. `validation-status` accepts:
+ * - `error`
+ * - `warning`
+ * - `success`
+ *
+ * `validation-status` is required for the `validation-text` to appear.
+ */
+export const CustomValidation = {
+    render: () => html `<ic-date-input
+        label="When would you like to collect your coffee?"
+        validation-status="error"
+        validation-text="There is a coffee shortage forecast for that day. Please choose a different date."
+      ></ic-date-input>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+        validation-status="warning"
+        validation-text="Please be aware that there may be a coffee shortage on that day."
+      ></ic-date-input>
+      <br />
+      <br />
+      <ic-date-input
+        label="When would you like to collect your coffee?"
+        validation-status="success"
+        validation-text="Your coffee will be available for you to collect on this day."
+      ></ic-date-input> `,
+    name: "Custom validation",
+};
+/**
+ * Validation can be set on the date input if a date in the past has been set by setting the `disable-past` attribute to `true`.
+ *
+ * Enter a date in the past to view the validation message.
+ */
+export const DisabledPastDates = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      disable-past
+    ></ic-date-input>`,
+    name: "Disabled past dates",
+};
+/**
+ * Validation can be set on the date input if a date in the future has been set by setting the `disable-future` attribute to `true`.
+ *
+ * Enter a date in the future to view the validation message.
+ */
+export const DisabledFutureDates = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      disable-future
+    ></ic-date-input>`,
+    name: "Disabled future dates",
+};
+/**
+ * It is possible to set a min and max date range. If a date is set and it is before the min or after the max date, a validation error will appear.
+ * The min or max dates accept the following date formats:
+ * - [Date string](#with-value) (with slashes i.e. DD/MM/YYYY)
+ * - [Date string](#with-hyphens) (with hyphens i.e. DD-MM-YYYY)
+ * - [Date object](#date-object)
+ * - [Zulu time](#zulu-time)
+ *
+ * Enter a date after 2nd Jan 2023 and before 20th July to view the validation message.
+ *
+ * In this code snippet, the min and max have been set using two different date formats to demonstrate its flexibility.
+ */
+export const MinAndMax = {
+    render: () => html `<ic-date-input
+      label="When would you like to collect your coffee?"
+      min="02/01/2023"
+      max="20-07-2023"
+    ></ic-date-input>`,
+    name: "Min and max",
+};
+/**
+ * When the date input component is used within a form, the date value is returned as an ISO string. The value is console logged to the browser dev tools.
+ */
+export const Form = {
+    render: () => createDateInputForm(),
+    name: "Form",
+};
+/**
+ * The date input can be cleared by setting the the value attribute to one of the following:
+ * - empty string
+ * - `null`
+ * - `undefined`
+ */
+export const WithClearingValue = {
+    render: () => html `<ic-date-input
+        id="date-input-clear-value"
+        label="When would you like to collect your coffee?"
+        date-format="DD/MM/YYYY"
+        value="21/01/2001"
+      ></ic-date-input>
+      <br />
+      <ic-button id="update">Update date</ic-button>
+      <ic-button id="null-btn">set null</ic-button>
+      <ic-button id="empty-btn">set empty string</ic-button>
+      <ic-button id="undef-btn">set undefined</ic-button>
+      <script>
+        var input = document.querySelector("#date-input-clear-value");
+        var btn = document.querySelector("#update");
+        btn.addEventListener("click", () => {
+          input.value = new Date("05 May 2005");
+        });
+        var btn2 = document.querySelector("#null-btn");
+        btn2.addEventListener("click", () => {
+          input.value = null;
+        });
+        var btn3 = document.querySelector("#empty-btn");
+        btn3.addEventListener("click", () => {
+          input.value = "";
+        });
+        var btn4 = document.querySelector("#undef-btn");
+        btn4.addEventListener("click", () => {
+          input.value = undefined;
+        });
+      </script>`,
+    name: "With clearing value",
+};
+//# sourceMappingURL=ic-date-input.stories.js.map

package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-date-input.stories.js","sourceRoot":"","sources":["../../../src/components/ic-date-input/ic-date-input.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { createDateInputForm } from \"./story-data\";\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Date Input\",\n  component: \"ic-date-input\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the date input component to manually type in a date in different formats.\n * The input `label` is the only required attribute for date input.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for date input.\n * To use the date input component, import `@ukic/canary-web-components` into your application.\n *\n * Each example below demonstrates the date input in three different date formats:\n * - DD/MM/YYYY (Default date format)\n * - MM/DD/YYYY\n * - YYYY/MM/DD\n *\n * Dates can be added by manually typing into the input or using the up and down arrow keys.\n * To move between day, month and year using the keyboard, provide the required values based on the placeholders or use `/` or `-`.\n *\n * By default, the helper text displays the date format.\n */\nexport const Default = {\n  render: () =>\n    html`<ic-date-input\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <script>\n        var dateInput = document.querySelector(\"ic-date-input\");\n        {\n          dateInput.addEventListener(\"icChange\", function (event) {\n            console.log(\"icChange\", event.detail.value);\n          });\n        }\n      </script>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        date-format=\"MM/DD/YYYY\"\n      ></ic-date-input>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        date-format=\"YYYY/MM/DD\"\n      ></ic-date-input> `,\n\n  name: \"Default\",\n};\n\n/**\n * Retrieving the date input value via `icChange` returns the date as a Date object. The event returns the Date object once day, month and year have been entered.\n */\nexport const IcChangeEvent = {\n  render: () =>\n    html`<ic-date-input\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <script>\n        var dateInput = document.querySelector(\"ic-date-input\");\n        dateInput.addEventListener(\"icChange\", function (event) {\n          console.log(event.detail.value);\n        });\n      </script>`,\n\n  name: \"icChange event\",\n};\n\n/**\n * To set a value to the date input, pass the date value in the relevant date format.\n */\nexport const WithValue = {\n  render: () =>\n    html`<ic-date-input\n      id=\"date-input-default-date-with-value\"\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"DD/MM/YYYY\"\n      value=\"21/01/2001\"\n    ></ic-date-input>`,\n\n  name: \"With value\",\n};\n\n/**\n * The date input also accepts a number of different date formats within the value attribute:\n * - [Date object](#date-object)\n * - [Zulu datetime](#zulu-time)\n * - [With hyphens (DD-MM-YYYY)](#with-hyphens)\n * - [Epoch time](#epoch-time)\n */\nexport const DateObject = {\n  render: () =>\n    html`<ic-date-input\n        id=\"date-input-default-date-date\"\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <script>\n        var dateInputDate = document.querySelector(\n          \"#date-input-default-date-date\"\n        );\n        dateInputDate.value = new Date(\"28 November 2021\");\n      </script>`,\n\n  name: \"Date object\",\n};\n\nexport const ZuluTime = {\n  render: () =>\n    html`<div>\n        <ic-date-input\n          id=\"date-input-default-zulu-date\"\n          label=\"When would you like to collect your coffee?\"\n        ></ic-date-input>\n      </div>\n      <script>\n        var dateInputDate = document.querySelector(\n          \"#date-input-default-zulu-date\"\n        );\n        dateInputDate.value = new Date(\"1 May 1990\").toISOString();\n      </script>`,\n\n  name: \"Zulu time\",\n};\n\nexport const WithHyphens = {\n  render: () =>\n    html`<ic-date-input\n        id=\"date-input-default-date-string\"\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <script>\n        var dateInputString = document.querySelector(\n          \"#date-input-default-date-string\"\n        );\n        dateInputString.value = \"25-05-2005\";\n      </script>`,\n\n  name: \"With hyphens\",\n};\n\nexport const EpochTime = {\n  render: () =>\n    html`<ic-date-input\n        id=\"date-input-default-date-epoch\"\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <script>\n        var dateInputString = document.querySelector(\n          \"#date-input-default-date-epoch\"\n        );\n        dateInputString.value = Date.now();\n      </script>`,\n\n  name: \"Epoch time\",\n};\n\n/**\n * To set the date input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the date input label.\n */\nexport const Required = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      required\n    ></ic-date-input>`,\n\n  name: \"Required\",\n};\n\n/**\n * To hide the label, set the `hide-label` attribute to `true`. The required `label` will still be read out by screen readers.\n */\nexport const HideLabel = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      hide-label=\"true\"\n    ></ic-date-input> `,\n\n  name: \"Hide label\",\n};\n\n/**\n * Set the `disabled` attribute to `true` to prevent interaction with the date input.\n */\nexport const Disabled = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      disabled\n    ></ic-date-input>`,\n\n  name: \"Disabled\",\n};\n\n/**\n * The date input is available in three different sizes:\n * - small\n * - default\n * - large\n */\nexport const Sizes = {\n  render: () =>\n    html`<ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        size=\"small\"\n      ></ic-date-input>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        size=\"large\"\n      ></ic-date-input> `,\n\n  name: \"Sizes\",\n};\n\n/**\n * Use the `helper-text` attribute to add additional detail for the date input.\n */\nexport const CustomHelperText = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      helper-text=\"We will have your order ready for you on this date\"\n    ></ic-date-input>`,\n\n  name: \"Custom helper text\",\n};\n\n/**\n * Hide visible helper text by setting `hide-helper-text` to `true`.\n */\nexport const HideHelperText = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      helper-text=\"You cannot see me, but you can hear me\"\n      hide-helper-text=\"true\"\n    ></ic-date-input>`,\n\n  name: \"Hide helper text\",\n};\n\n/**\n * Validation on date input is set via `validation-status` and `validation-text`.\n * `validation-status` will set the style of the validation message. `validation-status` accepts:\n * - `error`\n * - `warning`\n * - `success`\n *\n * `validation-status` is required for the `validation-text` to appear.\n */\nexport const CustomValidation = {\n  render: () =>\n    html`<ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        validation-status=\"error\"\n        validation-text=\"There is a coffee shortage forecast for that day. Please choose a different date.\"\n      ></ic-date-input>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        validation-status=\"warning\"\n        validation-text=\"Please be aware that there may be a coffee shortage on that day.\"\n      ></ic-date-input>\n      <br />\n      <br />\n      <ic-date-input\n        label=\"When would you like to collect your coffee?\"\n        validation-status=\"success\"\n        validation-text=\"Your coffee will be available for you to collect on this day.\"\n      ></ic-date-input> `,\n\n  name: \"Custom validation\",\n};\n\n/**\n * Validation can be set on the date input if a date in the past has been set by setting the `disable-past` attribute to `true`.\n *\n * Enter a date in the past to view the validation message.\n */\nexport const DisabledPastDates = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      disable-past\n    ></ic-date-input>`,\n\n  name: \"Disabled past dates\",\n};\n\n/**\n * Validation can be set on the date input if a date in the future has been set by setting the `disable-future` attribute to `true`.\n *\n * Enter a date in the future to view the validation message.\n */\nexport const DisabledFutureDates = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      disable-future\n    ></ic-date-input>`,\n\n  name: \"Disabled future dates\",\n};\n\n/**\n * It is possible to set a min and max date range. If a date is set and it is before the min or after the max date, a validation error will appear.\n * The min or max dates accept the following date formats:\n * - [Date string](#with-value) (with slashes i.e. DD/MM/YYYY)\n * - [Date string](#with-hyphens) (with hyphens i.e. DD-MM-YYYY)\n * - [Date object](#date-object)\n * - [Zulu time](#zulu-time)\n *\n * Enter a date after 2nd Jan 2023 and before 20th July to view the validation message.\n *\n * In this code snippet, the min and max have been set using two different date formats to demonstrate its flexibility.\n */\nexport const MinAndMax = {\n  render: () =>\n    html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      min=\"02/01/2023\"\n      max=\"20-07-2023\"\n    ></ic-date-input>`,\n\n  name: \"Min and max\",\n};\n\n/**\n * When the date input component is used within a form, the date value is returned as an ISO string. The value is console logged to the browser dev tools.\n */\nexport const Form = {\n  render: () => createDateInputForm(),\n  name: \"Form\",\n};\n\n/**\n * The date input can be cleared by setting the the value attribute to one of the following:\n * - empty string\n * - `null`\n * - `undefined`\n */\nexport const WithClearingValue = {\n  render: () =>\n    html`<ic-date-input\n        id=\"date-input-clear-value\"\n        label=\"When would you like to collect your coffee?\"\n        date-format=\"DD/MM/YYYY\"\n        value=\"21/01/2001\"\n      ></ic-date-input>\n      <br />\n      <ic-button id=\"update\">Update date</ic-button>\n      <ic-button id=\"null-btn\">set null</ic-button>\n      <ic-button id=\"empty-btn\">set empty string</ic-button>\n      <ic-button id=\"undef-btn\">set undefined</ic-button>\n      <script>\n        var input = document.querySelector(\"#date-input-clear-value\");\n        var btn = document.querySelector(\"#update\");\n        btn.addEventListener(\"click\", () => {\n          input.value = new Date(\"05 May 2005\");\n        });\n        var btn2 = document.querySelector(\"#null-btn\");\n        btn2.addEventListener(\"click\", () => {\n          input.value = null;\n        });\n        var btn3 = document.querySelector(\"#empty-btn\");\n        btn3.addEventListener(\"click\", () => {\n          input.value = \"\";\n        });\n        var btn4 = document.querySelector(\"#undef-btn\");\n        btn4.addEventListener(\"click\", () => {\n          input.value = undefined;\n        });\n      </script>`,\n\n  name: \"With clearing value\",\n};\n"]}

package/dist/collection/components/ic-date-picker/ic-date-picker.css

@@ -481,18 +481,25 @@ ic-date-input {
   flex-direction: column;
   gap: var(--ic-space-xs);
   position: absolute;
-  border: var(--ic-border-default);
-  border-radius: var(--ic-border-radius);
   align-items: center;
   background-color: var(--ic-architectural-white);
   z-index: var(--ic-z-index-date-picker);
   box-sizing: border-box;
-  box-shadow: var(--ic-elevation-overlay);
   margin-top: var(--ic-space-xxxs);
   padding: var(--ic-space-xs);
   animation: fade-in-calendar var(--ic-transition-duration-slow);
 }
 
+:host .calendar-container.show-date-input {
+  border: var(--ic-border-default);
+  border-radius: var(--ic-border-radius);
+  box-shadow: var(--ic-elevation-overlay);
+}
+
+:host .calendar-container.hide-date-input {
+  position: static;
+}
+
 :host(.small) .calendar-container {
   min-width: 17rem;
   max-width: 21.5rem;